.observation-card{overflow:hidden;border:1px solid #e3e5ef;border-radius:26px;background:#fff;box-shadow:0 18px 50px rgba(21,29,62,.08)}
.observation-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #e8e8f1;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.observation-header small{color:#747b91}.live-dot{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:#20b675}
.pause-action,.secondary-action,.support-grid button,.issue-grid button{border:1px solid #d8d4ee;border-radius:13px;background:#fff;color:#35265d;font:inherit;font-weight:750;cursor:pointer}
.pause-action{padding:9px 14px}.task-panel,.pause-panel{padding:clamp(25px,6vw,48px)}
.task-panel h1,.pause-panel h1{margin:0;color:#0d1533;font-size:clamp(2rem,8vw,3.4rem);letter-spacing:-.04em}
.support-grid,.issue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0}.support-grid button,.issue-grid button{min-height:62px;padding:12px}.issue-grid{grid-template-columns:repeat(2,1fr)}
.secondary-action{width:100%;min-height:50px;margin-top:12px}.advice-copy{margin:24px 0;padding:20px;border-radius:16px;background:#f2efff;font-size:1.08rem;line-height:1.65}
.pause-panel{text-align:center;background:#fbfaff}.pause-clock{margin:20px 0;color:#6842ff;font-size:3rem;font-weight:850}
.task-panel label{display:grid;gap:8px;margin:20px 0;font-weight:750}.task-panel select{min-height:50px;padding:8px 12px;border:1px solid #cfd2df;border-radius:12px;background:#fff;font:inherit}.task-panel .check-row{display:flex;align-items:center;gap:10px}.check-row input{width:20px;height:20px}
.support-grid button:active,.primary-action:active{transform:scale(.97)}
.support-grid button:focus-visible,.primary-action:focus-visible{outline:3px solid #15945f;outline-offset:3px}
.action-message{margin:16px 0;padding:12px 16px;border-radius:12px;background:#e9f9f1;color:#116641;font-weight:700;animation:guide-confirm .25s ease-out}
.live-qr-video{display:block;width:100%;max-height:320px;margin:16px 0;border-radius:16px;background:#101631;object-fit:cover}
@keyframes guide-confirm{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.observation-card{border-radius:20px}.support-grid{grid-template-columns:1fr}.issue-grid{grid-template-columns:1fr 1fr}.task-panel,.pause-panel{padding:28px 18px}}
/* Optional free observation and animated feedback controls. */
.observation-notes{display:block;margin-top:20px}.observation-notes span{color:#747b91;font-weight:500}
.task-panel textarea{width:100%;box-sizing:border-box;margin-top:8px;padding:14px;border:1px solid #d8d4ee;border-radius:13px;background:#fff;color:#172143;font:inherit;line-height:1.5;resize:vertical}
.task-panel textarea:focus{outline:3px solid rgba(104,66,255,.18);border-color:#6842ff}
.pause-action,.secondary-action,.support-grid button,.issue-grid button{transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
.pause-action:hover,.secondary-action:hover,.support-grid button:hover,.issue-grid button:hover{transform:translateY(-2px);border-color:#9d8df0;background:#f7f5ff;box-shadow:0 9px 18px rgba(53,38,93,.1)}
.pause-action:active,.secondary-action:active,.support-grid button:active,.issue-grid button:active{transform:scale(.97)}