html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f4f7f9;color:#263f4c;font-family:Pretendard,sans-serif;font-size:16px}
body{display:flex;flex-direction:column}header{height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff;border-bottom:1px solid #d7e2e8}header b{font-size:20px;color:#3f5663}header b span{color:#16858a}header>div{display:flex;align-items:center;gap:12px;font-size:11px;color:#68818d}.avatar{display:grid;place-items:center;width:28px;height:28px;background:#e5eff2;border-radius:50%;font-weight:700}svg{width:16px;height:16px}main{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}main::-webkit-scrollbar{display:none}.scene-title{padding:14px 16px 0;font-size:12px;font-weight:700;color:#168087}nav{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #d7e2e8;background:#fff}nav span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:#718390}nav span.active{color:#087d82}nav svg{width:20px;height:20px}
.status-bar{height:37px;flex-shrink:0;background:#2341ad;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:14px;font-weight:600}.status-bar>div{display:flex;align-items:center;gap:5px}.status-bar svg{width:14px;height:14px}.battery{background:#bbc8ef;color:#314781;border-radius:9px;font-size:10px;line-height:14px;padding:0 4px}header{height:52px;padding:0 14px}header .brand-path{gap:8px}header b{color:#17212f;font-size:18px;letter-spacing:-.6px}header b em{font-style:normal;color:#ef4444}header b span{color:#06b6d4}header .brand-path>svg{width:12px;height:12px;color:#cbd5e1}.screen-path{font-size:12px;font-weight:600;color:#64748b}header .header-actions{gap:8px}.header-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f8fafc;color:#98a2b3}.header-icon.manual{background:#dbeafe;color:#2563eb}
/* Keep the source's font sizes and field structure; unify surface/border treatment. */
main .rounded-2xl{border-radius:10px}main .shadow-sm{box-shadow:0 1px 2px #334d5b08}main .border-gray-100{border-color:#dce5ea}main .mobile-record-content{padding-top:12px;padding-bottom:20px}main input,main select,main textarea{font-family:inherit}main .text-gray-400{color:#71818b}main .text-gray-500{color:#637581}main .bg-brand-100{background:#e1eff0}main .text-brand-600,main .text-brand-500{color:#087e83}main .comment-item{padding:12px 0;border-bottom:1px solid #e2e8ec}main .comment-item:last-child{border-bottom:0}main [data-scene="3"]>div:last-child>div{border:1px solid #dce5ea;border-radius:10px}main [data-scene="2"] .text-center{padding:3px 0}main [data-scene="2"] svg{width:100%;height:auto}main [data-scene="2"] svg.lucide{width:16px;height:16px}
@media(prefers-reduced-motion:no-preference){section:not([hidden]){animation:reveal .3s ease-out}@keyframes reveal{from{opacity:.45}to{opacity:1}}}