:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  font-synthesis: none;
  color-scheme: dark;
  --ink: #f4f8fb;
  --muted: #90a5b8;
  --muted-2: #6f879a;
  --navy: #061421;
  --navy-2: #081b2b;
  --navy-3: #0c2437;
  --panel: rgba(12, 35, 53, .94);
  --panel-2: rgba(15, 42, 62, .92);
  --line: rgba(151, 185, 207, .14);
  --line-strong: rgba(83, 173, 235, .42);
  --green: #35dc91;
  --green-deep: #087c55;
  --green-soft: rgba(53, 220, 145, .12);
  --blue: #4db0ff;
  --blue-deep: #1679c8;
  --blue-soft: rgba(77, 176, 255, .12);
  --amber: #f1ba42;
  --amber-soft: rgba(241, 186, 66, .12);
  --danger: #ff6d7a;
  --danger-soft: rgba(255, 109, 122, .12);
  --shadow: 0 22px 58px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy); }
body { margin: 0; min-height: 100vh; direction: rtl; color: var(--ink); background: var(--navy); }
button, input, textarea, select { font: inherit; }
button { border: 0; border-radius: 11px; padding: 11px 15px; color: #fff; background: linear-gradient(135deg, #168ad7, #1f6fbe); font-weight: 750; cursor: pointer; transition: transform .16s ease, filter .16s ease, border-color .16s ease, background .16s ease; }
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: linear-gradient(135deg, #238ee2, #1768b7); box-shadow: 0 12px 30px rgba(19, 112, 187, .25); }
.secondary { color: #b9ddf8; background: rgba(74, 156, 214, .09); border: 1px solid rgba(75, 170, 236, .25); }
.danger { color: #ff9aa4 !important; background: var(--danger-soft) !important; border: 1px solid rgba(255, 109, 122, .22) !important; }
.ghost { color: #d6e6f2; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.small-button { padding: 9px 13px; font-size: .86rem; }
.wide-button { width: 100%; }
[hidden] { display: none !important; }

label { display: block; margin: 13px 0 7px; color: #b9cad7; font-size: .88rem; font-weight: 720; }
input, textarea, select { width: 100%; min-height: 46px; padding: 11px 13px; color: #eef7fd; background: rgba(4, 17, 28, .62); border: 1px solid rgba(139, 178, 203, .2); border-radius: 10px; outline: none; font-size: 1rem; transition: border-color .15s, box-shadow .15s, background .15s; }
input::placeholder, textarea::placeholder { color: #60788b; }
input:focus, textarea:focus, select:focus { border-color: #388fcb; background: rgba(5, 23, 37, .88); box-shadow: 0 0 0 3px rgba(55, 143, 204, .12); }
textarea { min-height: 106px; resize: vertical; }
select option { color: #eef7fd; background: #0a2133; }
.eyebrow { display: block; color: var(--green); font-size: .76rem; font-weight: 850; letter-spacing: .35px; }
.eyebrow.light { color: #70ddb2; }
.brand-symbol { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; color: #dffbef; background: linear-gradient(145deg, #109a6b, #086748); border: 1px solid rgba(90, 232, 177, .25); border-radius: 13px; font-weight: 900; box-shadow: 0 10px 25px rgba(7, 113, 77, .28); }
.form-message { min-height: 21px; margin: 8px 0; color: var(--muted); font-size: .83rem; }
.error { color: var(--danger); }

/* Secure login */
.login-page { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 32px; overflow-x: hidden; background: radial-gradient(circle at 50% -10%, #153d59 0, #081d2e 32%, #04101a 75%); }
.login-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(114, 171, 208, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 171, 208, .035) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at center, #000, transparent 78%); }
.login-shell { position: relative; width: min(980px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; background: rgba(5, 20, 32, .9); border: 1px solid rgba(142, 184, 211, .18); border-radius: 25px; box-shadow: 0 35px 100px rgba(0, 0, 0, .52); backdrop-filter: blur(18px); }
.login-brand { min-height: 690px; display: flex; flex-direction: column; padding: 52px 46px 40px; background: linear-gradient(180deg, rgba(4, 17, 29, .1), rgba(4, 17, 29, .82)); }
.login-brand-copy { text-align: center; }
.document-lock { width: 67px; height: 67px; display: grid; place-items: center; margin: 0 auto 18px; color: #d9e9f5; border: 1px solid rgba(158, 197, 221, .24); border-radius: 18px; background: rgba(17, 45, 65, .66); }
.document-lock svg { width: 39px; height: 39px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.login-brand h1 { margin: 9px 0 7px; font-size: 1.62rem; letter-spacing: -.4px; }
.login-brand p { margin: 0; color: #9cb0c0; font-size: .92rem; }
.login-photo { position: relative; min-height: 300px; display: flex; align-items: flex-end; justify-content: center; margin-top: 34px; overflow: hidden; background: linear-gradient(180deg, rgba(5, 20, 32, .05), rgba(5, 20, 32, .8)), url('/secure-documents.webp') center / cover; border: 1px solid rgba(151, 190, 214, .18); border-radius: 16px; box-shadow: inset 0 -80px 80px rgba(3, 13, 22, .48); }
.login-photo span { margin-bottom: 30px; padding: 13px 22px; color: #ecf7fe; background: rgba(5, 24, 38, .72); border: 1px solid rgba(174, 205, 224, .15); border-radius: 12px; text-align: center; font-size: 1.18rem; font-weight: 800; backdrop-filter: blur(10px); }
.login-photo small { display: inline-block; margin-top: 4px; color: #9eb2c2; font-size: .78rem; font-weight: 500; }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: 52px 45px; background: linear-gradient(180deg, rgba(13, 39, 58, .82), rgba(8, 26, 41, .94)); border-right: 1px solid rgba(158, 193, 214, .12); }
.login-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.login-heading h2 { margin: 6px 0 0; font-size: 1.72rem; }
.login-heading p { margin: 10px 0 0; color: var(--muted); line-height: 1.7; font-size: .86rem; }
.shield-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: var(--green); background: var(--green-soft); border: 1px solid rgba(53, 220, 145, .23); border-radius: 12px; font-weight: 900; }
.face-button { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 24px; padding: 13px; text-align: right; color: #eaf7ff; background: rgba(63, 145, 204, .11); border: 1px solid rgba(74, 169, 234, .25); }
.face-symbol { width: 41px; height: 41px; display: grid; place-items: center; flex: 0 0 auto; color: #86caff; background: rgba(76, 177, 249, .12); border-radius: 10px; font-size: 1.55rem; }
.face-button b, .face-button small { display: block; }
.face-button small { margin-top: 3px; color: var(--muted); font-size: .72rem; font-weight: 500; }
.login-divider { display: flex; align-items: center; gap: 11px; margin: 20px 0 1px; color: #70879a; font-size: .74rem; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: rgba(151, 185, 207, .14); }
.input-with-icon { position: relative; }
.input-with-icon > span { position: absolute; z-index: 1; right: 14px; top: 50%; transform: translateY(-50%); color: #6487a0; font-size: .55rem; }
.input-with-icon input { padding-right: 35px; }
.password-field input { padding-left: 70px; }
.password-field button { position: absolute; z-index: 2; left: 6px; top: 6px; height: 34px; padding: 0 10px; color: #91a8b9; background: transparent; font-size: .76rem; box-shadow: none; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; }
.secure-note { display: flex; align-items: flex-start; justify-content: center; gap: 9px; margin-top: 20px; color: #a7bac8; text-align: right; }
.secure-note > span { color: #708ba0; font-size: .72rem; }
.secure-note b, .secure-note small { display: block; }
.secure-note b { font-size: .76rem; }
.secure-note small { margin-top: 4px; color: #6f8597; font-size: .68rem; line-height: 1.55; }

/* Dashboard shell */
.dashboard-body { padding-right: 252px; background: radial-gradient(circle at 72% 0, #102f47 0, #071827 34%, #05121d 90%); }
.dashboard-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .3; background-image: linear-gradient(rgba(113, 163, 194, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(113, 163, 194, .025) 1px, transparent 1px); background-size: 42px 42px; }
.sidebar { position: fixed; z-index: 30; inset: 0 0 0 auto; width: 252px; display: flex; flex-direction: column; padding: 25px 17px; color: #fff; background: rgba(4, 17, 28, .96); border-left: 1px solid rgba(136, 174, 199, .12); backdrop-filter: blur(18px); }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 0 5px 23px; border-bottom: 1px solid var(--line); }
.side-brand b, .side-brand small { display: block; }
.side-brand b { font-size: .9rem; }
.side-brand small { margin-top: 4px; color: #72899b; font-size: .7rem; }
.side-nav { display: grid; gap: 7px; margin-top: 22px; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px 13px; color: #91a7b8; background: transparent; border: 1px solid transparent; text-align: right; border-radius: 10px; }
.nav-item:hover { color: #eaf5fc; background: rgba(255, 255, 255, .035); }
.nav-item.active { color: #eff9ff; background: linear-gradient(90deg, rgba(40, 145, 214, .17), rgba(40, 145, 214, .06)); border-color: rgba(69, 166, 230, .18); }
.nav-item > span { width: 21px; color: #67c8ff; text-align: center; font-size: 1.05rem; }
.nav-item i { min-width: 22px; margin-right: auto; padding: 2px 6px; color: #142233; background: var(--amber); border-radius: 999px; text-align: center; font-size: .67rem; font-style: normal; }
.side-security { display: flex; align-items: flex-start; gap: 9px; margin-top: auto; padding: 14px; color: #bbcad5; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-radius: 11px; }
.side-security > span { color: var(--green); }
.side-security b, .side-security small { display: block; }
.side-security b { font-size: .78rem; }
.side-security small { margin-top: 5px; color: #6f8597; font-size: .67rem; line-height: 1.6; }
.app-shell { position: relative; min-height: 100vh; }
.appbar { position: sticky; z-index: 20; top: 0; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 30px; background: rgba(5, 20, 32, .88); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.app-identity { display: flex; align-items: center; gap: 12px; }
.admin-avatar { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; color: #dfeef8; background: linear-gradient(145deg, #203d55, #10283b); border: 1px solid rgba(147, 181, 203, .2); border-radius: 50%; font-weight: 850; }
.appbar h1 { margin: 2px 0 0; font-size: 1.08rem; }
.mobile-kicker { display: block; color: #788fa1; font-size: .7rem; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.connection-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; color: #a8bac7; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 999px; font-size: .77rem; font-weight: 760; }
.connection-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8798a5; box-shadow: 0 0 0 4px rgba(135, 152, 165, .08); }
.connection-pill.online { color: #a5f0cd; background: var(--green-soft); border-color: rgba(53, 220, 145, .18); }
.connection-pill.online::before { background: var(--green); box-shadow: 0 0 0 4px rgba(53, 220, 145, .11); }
.connection-pill.offline { color: #ffc1c7; background: var(--danger-soft); }
.connection-pill.offline::before { background: var(--danger); }
.icon-button { width: 37px; height: 37px; display: grid; place-items: center; padding: 0; color: #b9cbd8; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; }
.workspace { position: relative; width: min(1180px, calc(100% - 50px)); margin: auto; padding: 27px 0 70px; }
.view { display: none; }
.view.active { display: block; animation: reveal .22s ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.welcome-row h2 { margin: 5px 0 4px; font-size: 1.55rem; letter-spacing: -.35px; }
.welcome-row p { margin: 0; color: var(--muted); font-size: .86rem; }
.last-update { color: #6f879a; font-size: .73rem; }

.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.service-card { min-height: 112px; display: flex; align-items: center; gap: 13px; padding: 17px; background: linear-gradient(145deg, rgba(14, 41, 60, .96), rgba(9, 29, 45, .96)); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 13px 34px rgba(0, 0, 0, .15); }
.service-card > div:nth-child(2) { min-width: 0; flex: 1; }
.service-card span, .service-card b, .service-card small { display: block; }
.service-card > div > span { color: #8499aa; font-size: .75rem; }
.service-card b { margin: 4px 0; font-size: 1.04rem; }
.service-card small { color: #657e91; font-size: .7rem; line-height: 1.5; }
.service-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; font-size: .83rem; font-weight: 900; }
.service-icon.green { color: var(--green); background: var(--green-soft); }
.service-icon.blue { color: var(--blue); background: var(--blue-soft); }
.service-icon.amber { color: var(--amber); background: var(--amber-soft); }
.switch-button { position: relative; width: 45px; height: 26px; flex: 0 0 auto; padding: 3px; background: #324657; border-radius: 999px; }
.switch-button span { width: 20px; height: 20px; display: block; background: #d6e0e7; border-radius: 50%; box-shadow: 0 2px 7px rgba(0, 0, 0, .35); transition: transform .18s ease; }
.switch-button.on { background: var(--green-deep); }
.switch-button.on span { background: #eafff6; transform: translateX(-19px); }
.status-tag, .badge { display: inline-block; padding: 5px 9px; color: #7ce6b9; background: var(--green-soft); border: 1px solid rgba(53, 220, 145, .16); border-radius: 999px; font-size: .7rem; font-weight: 800; }
.badge.off { color: #f4c176; background: var(--amber-soft); border-color: rgba(241, 186, 66, .18); }

.panel { margin-top: 14px; padding: 21px; background: linear-gradient(145deg, rgba(12, 36, 54, .94), rgba(8, 27, 42, .94)); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 15px 42px rgba(0, 0, 0, .14); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.section-heading h2 { margin: 4px 0 0; font-size: 1.12rem; }
.section-heading p { margin: 0; color: var(--muted); font-size: .76rem; }
.account-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-row { display: flex; align-items: center; gap: 11px; padding: 14px; background: rgba(17, 47, 69, .62); border: 1px solid rgba(132, 172, 198, .13); border-radius: 11px; }
.account-avatar { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; color: var(--green); background: var(--green-soft); border-radius: 10px; font-weight: 900; }
.account-copy { min-width: 0; flex: 1; }
.account-copy b, .account-copy small { display: block; }
.account-copy b { font-size: .91rem; }
.account-copy small { margin-top: 4px; color: #728a9c; font-size: .69rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-action { padding: 8px 10px; font-size: .72rem; }
.safety-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; padding: 11px 13px; color: #d1b87a; background: rgba(148, 105, 27, .08); border-right: 3px solid #d49a2f; border-radius: 8px; font-size: .72rem; line-height: 1.7; }
.safety-note b { color: #e5c982; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.metric { position: relative; min-height: 111px; padding: 15px; overflow: hidden; background: rgba(10, 31, 47, .9); border: 1px solid var(--line); border-radius: 12px; }
.metric::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: rgba(70, 168, 232, .55); }
.metric.attention::after { background: var(--amber); }
.metric span, .metric small { display: block; color: #7f96a7; font-size: .72rem; }
.metric b { display: block; margin: 9px 0 5px; color: #f4f9fd; font-size: 1.55rem; overflow-wrap: anywhere; }

.question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.question-card { padding: 18px; background: linear-gradient(145deg, rgba(13, 39, 58, .96), rgba(8, 28, 43, .96)); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #758b9d; font-size: .71rem; }
.question-label { color: var(--green); font-weight: 850; }
.question-text { display: block; min-height: 55px; color: #eef7fd; font-size: 1rem; line-height: 1.7; }
.question-card textarea { margin-top: 10px; }
.variant-list { margin: 13px 0; padding: 12px; background: rgba(5, 20, 32, .48); border: 1px solid var(--line); border-radius: 10px; }
.variant-list legend { padding: 0 7px; color: #b9ccda; font-size: .79rem; font-weight: 800; }
.variant-option { display: flex; align-items: flex-start; gap: 9px; margin: 9px 0; color: #a8bccb; font-size: .8rem; line-height: 1.55; cursor: pointer; }
.variant-option input { width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--green-deep); }
.variant-list > small { display: block; color: #6f879a; font-size: .71rem; line-height: 1.6; }
.actions { display: flex; gap: 7px; }
.actions.wrap { flex-wrap: wrap; }
.actions button { padding: 9px 11px; font-size: .73rem; }
.compact-panel { padding: 18px; }
.knowledge-form, .recipient-form { display: flex; align-items: flex-end; gap: 11px; }
.knowledge-form > div, .recipient-form > div { min-width: 160px; }
.knowledge-form .grow, .recipient-form .grow, .grow { flex: 1; }
.knowledge-form textarea { min-height: 46px; height: 46px; }
.knowledge-form label, .recipient-form label { margin-top: 0; }
.list-panel { padding-top: 6px; }
.recipient { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.recipient:last-child { border-bottom: 0; }
.recipient b { color: #eaf4fa; }
.recipient small { color: #839aab; line-height: 1.8; }
.aliases { margin-top: 9px; color: var(--muted); }
.aliases summary { color: var(--blue); font-size: .73rem; font-weight: 750; cursor: pointer; }
.aliases small { display: block; padding: 8px 0; }
.empty-state { grid-column: 1 / -1; padding: 28px; color: #71899b; background: rgba(5, 20, 32, .35); border: 1px dashed rgba(134, 174, 200, .2); border-radius: 11px; text-align: center; font-size: .82rem; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.setting-card { display: flex; align-items: center; gap: 13px; margin-top: 0; }
.setting-card:first-child { grid-column: 1 / -1; }
.setting-card h3 { margin: 0; font-size: 1rem; }
.setting-card p { margin: 6px 0; color: #a9bdca; font-size: .83rem; }
.setting-card small { color: #748c9e; font-size: .71rem; line-height: 1.6; }
.setting-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; color: var(--blue); background: var(--blue-soft); border-radius: 11px; font-size: 1.3rem; }
.bottom-nav { display: none; }

dialog { width: min(430px, calc(100% - 28px)); padding: 22px; color: var(--ink); background: #0a2133; border: 1px solid rgba(136, 177, 203, .2); border-radius: 16px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
dialog::backdrop { background: rgba(1, 8, 13, .8); backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; }
.dialog-heading h2 { margin: 4px 0; }
.qr-area { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 13px; margin-top: 16px; background: #f7fbfd; border-radius: 12px; color: #10263a; text-align: center; }
.qr-area img { width: min(100%, 320px); height: auto; }
.spinner { width: 28px; height: 28px; border: 3px solid #bdd1df; border-top-color: var(--green-deep); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; z-index: 70; left: 24px; bottom: 24px; max-width: 340px; padding: 12px 16px; color: #eaf6fd; background: #102e44; border: 1px solid rgba(139, 180, 206, .18); border-radius: 10px; box-shadow: var(--shadow); font-size: .83rem; transform: translateY(120px); opacity: 0; transition: .25s; }
.toast.show { transform: none; opacity: 1; }

@media (max-width: 1050px) {
  .dashboard-body { padding-right: 0; }
  .sidebar { display: none; }
  .workspace { width: min(100% - 28px, 900px); padding-bottom: 105px; }
  .bottom-nav { position: fixed; z-index: 40; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px max(7px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)); background: rgba(4, 17, 28, .97); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
  .bottom-nav button { position: relative; display: grid; place-items: center; gap: 3px; padding: 6px 2px; color: #71889a; background: transparent; border: 0; border-radius: 8px; font-size: .64rem; }
  .bottom-nav button span { font-size: 1.04rem; }
  .bottom-nav button.active { color: #59baff; background: rgba(59, 157, 225, .07); }
  .bottom-nav i { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 16px; padding: 1px 4px; color: #142233; background: var(--amber); border-radius: 999px; font-size: .56rem; font-style: normal; }
}

@media (max-width: 760px) {
  .login-page { display: block; padding: 0; background: var(--navy); }
  .login-shell { width: 100%; min-height: 100vh; display: block; border: 0; border-radius: 0; box-shadow: none; }
  .login-brand { min-height: 0; padding: calc(31px + env(safe-area-inset-top)) 17px 0; background: linear-gradient(180deg, #071c2d, #061421); }
  .document-lock { width: 54px; height: 54px; margin-bottom: 13px; border-radius: 15px; }
  .document-lock svg { width: 32px; height: 32px; }
  .login-brand h1 { margin-top: 7px; font-size: 1.38rem; }
  .login-brand p { font-size: .82rem; }
  .login-photo { min-height: 220px; margin-top: 23px; border-radius: 13px 13px 0 0; border-bottom: 0; }
  .login-photo span { margin-bottom: 21px; font-size: 1.06rem; }
  .login-card { position: relative; margin-top: -10px; padding: 26px 20px calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(12, 37, 56, .98), #071827); border: 1px solid rgba(144, 182, 205, .16); border-width: 1px 0 0; border-radius: 24px 24px 0 0; }
  .login-heading h2 { font-size: 1.5rem; }
  .login-heading p { font-size: .82rem; }
  .appbar { min-height: 88px; align-items: flex-start; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
  .app-identity { align-items: center; }
  .admin-avatar { width: 36px; height: 36px; }
  .appbar h1 { font-size: .96rem; }
  .mobile-kicker { max-width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .64rem; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .header-actions .icon-button { display: none; }
  .header-actions .ghost { display: block; padding: 7px 9px; font-size: .72rem; }
  .connection-pill { order: 2; padding: 6px 8px; font-size: .68rem; }
  .workspace { width: calc(100% - 24px); padding: 19px 0 104px; }
  .welcome-row { align-items: flex-start; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .welcome-row h2 { font-size: 1.32rem; }
  .welcome-row p { font-size: .78rem; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .service-card { min-height: 118px; display: grid; grid-template-columns: 34px 1fr; align-content: center; gap: 7px; padding: 11px 9px; }
  .service-icon { width: 34px; height: 34px; border-radius: 9px; font-size: .7rem; }
  .service-card > div:nth-child(2) { grid-column: 1 / -1; }
  .service-card > div > span { font-size: .66rem; }
  .service-card b { margin: 3px 0; font-size: .83rem; }
  .service-card small { display: none; }
  .switch-button { width: 39px; height: 23px; justify-self: end; padding: 3px; }
  .switch-button span { width: 17px; height: 17px; }
  .switch-button.on span { transform: translateX(-16px); }
  .status-tag { justify-self: end; padding: 4px 7px; font-size: .62rem; }
  .panel { padding: 15px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .section-heading p { font-size: .7rem; }
  .account-list, .question-grid, .settings-grid { grid-template-columns: 1fr; }
  .account-row { gap: 9px; padding: 12px 10px; }
  .account-copy small { max-width: 138px; }
  .account-action { padding: 7px 8px; }
  .safety-note { display: block; }
  .safety-note b { display: block; margin-bottom: 3px; }
  .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .metric { min-height: 95px; padding: 11px 9px; }
  .metric span, .metric small { font-size: .64rem; }
  .metric small { display: none; }
  .metric b { margin: 9px 0 0; font-size: 1.28rem; }
  .question-card { padding: 15px; }
  .knowledge-form, .recipient-form { display: grid; grid-template-columns: 1fr; }
  .knowledge-form > div, .recipient-form > div { min-width: 0; }
  .recipient { align-items: flex-start; flex-direction: column; }
  .recipient .actions { width: 100%; flex-wrap: wrap; }
  .recipient .actions button { min-width: 82px; flex: 1; }
  .setting-card { align-items: flex-start; flex-wrap: wrap; }
  .setting-card:first-child { grid-column: auto; }
  .setting-card button { width: 100%; }
  .toast { right: 12px; left: 12px; bottom: calc(83px + env(safe-area-inset-bottom)); max-width: none; }
}

@media (max-width: 430px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-height: 88px; }
  .login-photo { min-height: 194px; }
}

/* v2.3 operations workspace */
.profile-button{position:relative;width:48px;height:48px;padding:0;overflow:visible;background:none;border:0;border-radius:50%;box-shadow:none}.profile-button img{width:48px;height:48px;display:block;object-fit:cover;border:2px solid rgba(64,205,148,.65);border-radius:50%}.profile-button span{position:absolute;left:-2px;bottom:-2px;width:20px;height:20px;display:grid;place-items:center;color:#071827;background:var(--amber);border:2px solid #071827;border-radius:50%;font-size:.65rem}.health-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px;padding:11px;background:rgba(5,21,34,.66);border:1px solid var(--line);border-radius:13px}.health-strip>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:9px 11px;border-left:1px solid var(--line)}.health-strip>div:last-child{border-left:0}.health-strip small{color:var(--muted);font-size:.67rem}.health-strip b{font-size:.8rem}.health-dot{grid-row:1/3;width:9px;height:9px;background:var(--green);border-radius:50%;box-shadow:0 0 0 5px rgba(53,220,145,.1)}.health-dot.bad{background:var(--amber);box-shadow:0 0 0 5px rgba(241,186,66,.1)}.decision-card{display:flex;align-items:center;gap:14px;margin:14px 0;padding:17px;color:#f8ead0;background:linear-gradient(100deg,rgba(115,75,18,.34),rgba(38,32,24,.2));border:1px solid rgba(241,186,66,.32);border-radius:14px}.decision-card.hidden{display:none}.decision-card>div:nth-child(2){flex:1}.decision-card span,.decision-card b,.decision-card small{display:block}.decision-card span{color:#d6b978;font-size:.72rem}.decision-card b{margin:4px 0}.decision-card small{color:#a99470}.decision-icon{width:40px;height:40px;display:grid;place-items:center;background:rgba(241,186,66,.15);border-radius:11px;color:var(--amber);font-size:1.3rem;font-weight:900}.metric-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.cleanup-note{display:flex;align-items:center;gap:12px;margin-top:14px;padding:15px;color:#a9c0ce;background:rgba(6,24,38,.62);border:1px dashed rgba(127,167,192,.22);border-radius:12px}.cleanup-note>span{font-size:1.4rem;color:var(--blue)}.cleanup-note b,.cleanup-note small{display:block}.cleanup-note small{margin-top:4px;color:var(--muted);font-size:.72rem}.operation-list{display:grid}.operation-row{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}.operation-row:last-child{border-bottom:0}.operation-row>div{min-width:0;flex:1}.operation-row b,.operation-row small{display:block}.operation-row b{font-size:.84rem}.operation-row small{margin-top:5px;color:var(--muted);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.operation-state{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:var(--amber);background:var(--amber-soft);font-weight:900}.operation-state.success{color:var(--green);background:var(--green-soft)}.operation-state.failed,.operation-state.rejected{color:var(--danger);background:var(--danger-soft)}.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.review-card{padding:18px;background:linear-gradient(145deg,rgba(44,36,23,.74),rgba(11,30,43,.95));border:1px solid rgba(241,186,66,.24);border-radius:14px}.review-head{display:flex;justify-content:space-between;align-items:center}.review-head small{color:var(--muted)}.review-card h3{margin:14px 0 5px}.review-card p{margin:0;color:#d2b982;font-size:.8rem}.review-card ul{padding:0;margin:13px 0;list-style:none}.review-card li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.75rem}.review-card li span{color:var(--muted)}button.warning{color:#18140b;background:var(--amber)}.reset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.profile-preview{width:140px;height:140px;display:block;object-fit:cover;margin:16px auto;border:3px solid rgba(53,220,145,.35);border-radius:50%}#profileFile{display:none}.dialog-actions{display:flex;gap:9px}.dialog-actions button{flex:1}#passwordDialog form{display:grid;gap:8px;margin-top:14px}#passwordDialog label{margin-top:4px}
@media(max-width:760px){.health-strip{grid-template-columns:1fr 1fr}.health-strip>div{border-left:0}.review-grid{grid-template-columns:1fr}.metric-grid.four{grid-template-columns:1fr 1fr}.reset-grid{grid-template-columns:1fr 1fr}.decision-card{align-items:flex-start}.decision-card button{padding:8px 10px}.profile-button,.profile-button img{width:40px;height:40px}}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* v2.4 preview — organized operations dashboard */
.mobile-sections{display:none}.metric-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.policy-grid article,.security-policy{min-height:150px;padding:18px;background:linear-gradient(145deg,rgba(9,34,51,.98),rgba(7,25,39,.92));border:1px solid var(--line);border-radius:14px}.policy-grid article b,.policy-grid article small,.security-policy b,.security-policy small{display:block}.policy-grid article b,.security-policy b{margin-bottom:7px;color:#eaf4fa}.policy-grid article small,.security-policy small{color:var(--muted);line-height:1.75}.knowledge-asset-field{position:relative;padding:10px 12px;background:rgba(4,18,29,.54);border:1px dashed rgba(128,171,198,.27);border-radius:10px}.knowledge-asset-field input{max-width:210px;font-size:.72rem}.knowledge-asset-field small{display:block;margin-top:5px;color:var(--muted)}.knowledge-form{display:grid;grid-template-columns:minmax(170px,1fr) minmax(220px,1.5fr) 175px minmax(180px,.8fr) auto;align-items:end}.recipient-form{align-items:end}.view-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}.view-header h2{margin:0}.view-header p{margin:6px 0 0;color:var(--muted);font-size:.78rem}.subtle-counter{padding:7px 10px;color:#9bb2c2;background:rgba(8,29,44,.78);border:1px solid var(--line);border-radius:999px;font-size:.72rem}.profile-preview-note{text-align:center;color:var(--muted);font-size:.72rem}.danger-zone{border-color:rgba(239,104,112,.28);background:linear-gradient(145deg,rgba(55,19,25,.35),rgba(7,25,39,.92))}
@media(max-width:1050px){.bottom-nav{display:none}.mobile-sections{position:sticky;z-index:35;top:88px;display:flex;gap:7px;margin:0 -14px 15px;padding:8px 14px;overflow-x:auto;scrollbar-width:none;background:rgba(4,17,28,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.mobile-sections::-webkit-scrollbar{display:none}.mobile-sections button{flex:0 0 auto;padding:8px 12px;color:#8da5b6;background:rgba(10,34,51,.74);border:1px solid var(--line);border-radius:999px;font-size:.72rem}.mobile-sections button.active{color:#dff3ff;background:rgba(48,150,219,.18);border-color:rgba(75,176,240,.36)}}
@media(max-width:760px){.mobile-sections{top:88px}.metric-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.policy-grid{grid-template-columns:1fr}.knowledge-form{grid-template-columns:1fr}.view-header{align-items:flex-start;flex-direction:column}.security-policy{min-height:0}.profile-preview{width:124px;height:124px}}