/* Mobile product skin: presentation only; bridge and API contracts stay in index.html. */
:root { --brand: #2563eb; --brand-soft: #edf3ff; --bg: #f3f5f9; --text: #17243b; --muted: #64748b; --line: #e5eaf2; --radius: 20px; }
body { background: radial-gradient(ellipse at 10% 0, #dce8ff 0, transparent 420px), var(--bg); }
.wrap { padding-right: 20px; padding-left: 20px; }
.topbar { margin: 8px 0 28px; }
.topbar h1 { font-size: 22px; letter-spacing: -.6px; }
.logo { background: linear-gradient(145deg, #3978ff, #1743a6); box-shadow: 0 6px 16px #2563eb26; }
.card { border: 1px solid #e5eaf2; border-radius: 20px; padding: 22px; margin-bottom: 18px; box-shadow: 0 4px 18px #17243b04; }
.card h2 { font-size: 16px; margin-bottom: 20px; }
.card h2::before { height: 16px; background: #2563eb; }
.btn { min-height: 44px; border-radius: 12px; font-weight: 600; transition: background .16s, transform .16s; touch-action: manipulation; }
.btn:active { transform: scale(.98); }
.btn.primary { background: #2563eb; box-shadow: 0 4px 10px #2563eb20; }
.btn:disabled { opacity: .55; cursor: wait; }
.field input { min-height: 48px; border-radius: 12px; background: #f8fafd; font-size: 16px; }
.field input:focus { background: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px #2563eb14; outline: none; }
.field > span { font-weight: 500; }
.kv { gap: 13px 12px; }
.kv dd { font-weight: 500; }
.tip { border: 1px solid #edf0f5; line-height: 1.8; }
.set-item { min-height: 54px; border-bottom-style: solid; }
.set-item:active { background: #f5f8ff; }
#userBar { background: linear-gradient(120deg, #173e8d, #2563eb); border: 0; color: white; }
#userBar .u-name { font-size: 22px; }
#userBar .u-role { color: #d5e3ff; }
#userBar .u-out { background: #ffffff18; border-color: #ffffff40; color: white; }
#loginView { padding-top: max(48px, env(safe-area-inset-top)); }
#loginCard { padding: 28px 24px; }
#loginCard .btn.primary { margin-top: 12px; min-height: 48px; }
.doc-sheet { padding-bottom: calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 48px #17243b1a; }
.foot { color: #718096; font-size: 11px; letter-spacing: .3px; padding: 12px 0; }
:focus-visible { outline: 3px solid #93b4fc; outline-offset: 3px; }
@media (max-width: 360px) { .wrap { padding-left: 12px; padding-right: 12px; } .card { padding: 18px; } .topbar h1 { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }