/* ShardSense platform layer: account security, device authorization, appeals, states
   and responsive polish. Additive to styles.css / community.css / account.css. */
:root {
  --ok:#7fe0b2; --ok-bg:rgba(91,211,161,.12); --warn:#f3cd78; --warn-bg:rgba(241,199,101,.12);
  --bad:#ff93a5; --bad-bg:rgba(255,127,146,.12); --info:#c9a2ff; --info-bg:rgba(190,121,255,.12);
  --focus:#f097d0; --radius-sm:8px; --ring:0 0 0 3px rgba(240,151,208,.28);
}

/* ---- foundations: buttons, inputs, focus ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; font-weight:650; text-decoration:none; white-space:nowrap; }
.btn:hover:not(:disabled) { background:#3a3042; border-color:#56465f; }
.btn.primary:hover:not(:disabled) { filter:brightness(1.08); }
.btn.danger { background:linear-gradient(110deg,#c94661,#a53a74); border:0; font-weight:850; color:#fff; }
.btn.danger:hover:not(:disabled) { filter:brightness(1.1); }
.btn.ghost { background:transparent; }
.btn.small { min-height:30px; height:30px; padding:0 10px; font-size:.78rem; }
.btn[aria-busy="true"] { position:relative; color:transparent !important; }
.btn[aria-busy="true"]::after { content:""; position:absolute; width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:ss-spin .7s linear infinite; }
@keyframes ss-spin { to { transform:rotate(360deg); } }
.field input, .field textarea, .field select { min-height:42px; transition:border-color .15s, box-shadow .15s; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color:#a56bb4; box-shadow:var(--ring); }
.field .hint { color:#9d90a3; font-size:.74rem; line-height:1.5; }
.field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
input[type=checkbox] { accent-color:#d85ab6; width:16px; height:16px; }
.check-row { display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:#cbbfd1; line-height:1.5; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* ---- chips & states ---- */
.chip { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; border:1px solid transparent; background:#2d2633; color:#cbbfd1; white-space:nowrap; }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.chip.ok, .chip.active, .chip.trusted, .chip.healthy, .chip.configured, .chip.approved, .chip.resolved { color:var(--ok); background:var(--ok-bg); border-color:rgba(127,224,178,.25); }
.chip.warn, .chip.warned, .chip.monitored, .chip.degraded, .chip.pending, .chip.under_review, .chip.open, .chip.appealed, .chip.approval_pending, .chip.monitoring, .chip.shortened { color:var(--warn); background:var(--warn-bg); border-color:rgba(243,205,120,.25); }
.chip.bad, .chip.banned, .chip.suspended, .chip.blocked, .chip.restricted, .chip.unavailable, .chip.denied, .chip.not_configured, .chip.high { color:var(--bad); background:var(--bad-bg); border-color:rgba(255,147,165,.25); }
.chip.info, .chip.moderator, .chip.admin, .chip.owner, .chip.action_taken, .chip.overturned, .chip.medium, .chip.false_positive, .chip.dismissed, .chip.actioned { color:var(--info); background:var(--info-bg); border-color:rgba(201,162,255,.25); }
.state { display:grid; gap:10px; justify-items:center; text-align:center; padding:34px 18px; border:1px dashed var(--line); border-radius:10px; background:#1c1820; color:#a99cae; }
.state strong { color:#efe5f3; font-size:1rem; }
.state.error { border-style:solid; border-color:rgba(255,147,165,.35); background:linear-gradient(180deg,rgba(255,127,146,.06),transparent); }
.state.success { border-style:solid; border-color:rgba(127,224,178,.35); background:linear-gradient(180deg,rgba(91,211,161,.07),transparent); }
.state .glyph { font-size:1.8rem; line-height:1; }
.skeleton { position:relative; overflow:hidden; border-radius:8px; background:#231d28; min-height:14px; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation:ss-shimmer 1.2s infinite; }
@keyframes ss-shimmer { to { transform:translateX(100%); } }
.skeleton-stack { display:grid; gap:12px; }
.skeleton.card { height:96px; } .skeleton.line { height:14px; width:70%; } .skeleton.line.short { width:40%; }

/* ---- callouts / banners ---- */
.callout { display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:10px; border:1px solid var(--line); background:#221c27; color:#d8cbdd; font-size:.86rem; line-height:1.55; margin:12px 0; }
.callout .icon { flex:0 0 auto; font-size:1.05rem; line-height:1.4; }
.callout.warn { border-color:rgba(243,205,120,.35); background:linear-gradient(90deg,rgba(241,199,101,.10),rgba(241,199,101,.02)); }
.callout.bad { border-color:rgba(255,147,165,.38); background:linear-gradient(90deg,rgba(255,127,146,.12),rgba(255,127,146,.02)); }
.callout.ok { border-color:rgba(127,224,178,.35); background:linear-gradient(90deg,rgba(91,211,161,.10),rgba(91,211,161,.02)); }
.callout.info { border-color:rgba(201,162,255,.35); background:linear-gradient(90deg,rgba(190,121,255,.10),rgba(190,121,255,.02)); }
.callout a { color:#f4b6e3; font-weight:700; }
#platform-banner:empty { display:none; }
#platform-banner { padding-top:16px; }
#platform-banner .callout { margin:0; }

/* ---- account security ---- */
.security-grid { display:grid; gap:14px; }
.sec-card { padding:18px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,#241e2a,#211c26); }
.sec-card > header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.sec-card h2 { margin:0 !important; font-size:1.05rem !important; display:flex; align-items:center; gap:9px; }
.sec-card p { margin:6px 0; }
.sec-list { display:grid; gap:0; margin:6px 0 0; padding:0; list-style:none; }
.sec-list li { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line-soft); }
.sec-list li:first-child { border-top:0; }
.sec-list .meta { color:#a99cae; font-size:.78rem; margin-top:3px; }
.sec-list strong { font-size:.9rem; }
.tag-current { color:var(--ok); font-size:.72rem; font-weight:800; margin-left:6px; }
.qr-wrap { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; margin:14px 0; }
.qr-box { width:196px; height:196px; padding:10px; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.qr-box svg { width:100%; height:100%; display:block; }
.secret-key { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem; letter-spacing:.06em; padding:9px 11px; border-radius:8px; background:#161219; border:1px solid var(--line); color:#f7e9fb; overflow-wrap:anywhere; user-select:all; }
.code-input { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; font-size:1.35rem !important; letter-spacing:.35em; text-align:center; max-width:220px; }
.recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; padding:14px; border-radius:10px; background:#161219; border:1px dashed #5b4664; }
.recovery-grid code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem; color:#ffd7f1; letter-spacing:.05em; }
.steps { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:0; list-style:none; counter-reset:s; }
.steps li { counter-increment:s; font-size:.76rem; color:#9e91a4; padding:5px 10px; border-radius:999px; border:1px solid var(--line); }
.steps li::before { content:counter(s) ". "; }
.steps li.now { color:#ffd3f0; border-color:#c25aa5; background:rgba(216,90,182,.12); }
.steps li.done { color:var(--ok); border-color:rgba(127,224,178,.35); }

/* ---- device authorization & appeal pages ---- */
.platform-narrow { max-width:640px; margin:12px auto 0; }
.auth-card { padding:26px; border:1px solid #4a3a53; border-radius:16px; background:radial-gradient(circle at 100% 0,rgba(216,90,182,.12),transparent 55%),linear-gradient(180deg,#26202c,#1f1a24); box-shadow:var(--shadow); }
.auth-card h1 { margin:0 0 6px !important; font-size:1.5rem !important; }
.auth-card .lede { color:#bfb2c6; margin:0 0 18px; line-height:1.6; }
.device-code { display:flex; justify-content:center; margin:16px 0; }
.device-code span { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:2rem; font-weight:800; letter-spacing:.18em; padding:12px 18px; border-radius:12px; background:#161219; border:1px solid #5b4664; color:#ffe1f5; }
.kv { display:grid; grid-template-columns:minmax(110px,max-content) 1fr; gap:8px 16px; margin:14px 0; font-size:.88rem; }
.kv dt { color:#9d90a3; } .kv dd { margin:0; color:#efe5f3; overflow-wrap:anywhere; }
.actions-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.actions-row .btn { min-height:42px; padding:0 18px; }
.restriction-card { padding:18px; border-radius:12px; border:1px solid rgba(255,147,165,.35); background:linear-gradient(180deg,rgba(255,127,146,.08),rgba(255,127,146,.01)); margin:12px 0; }
.restriction-card h3 { margin:0 0 6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.char-count { text-align:right; font-size:.72rem; color:#8f8394; }

/* ---- responsive header & navigation ---- */
@media (max-width:900px) {
  .primary-nav { overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg,#000 85%,transparent); }
  .primary-nav::-webkit-scrollbar { display:none; }
  .nav-link { flex:0 0 auto; }
}
@media (max-width:650px) {
  .header-tools { gap:8px; }
  .header-tools .btn, .header-tools .user-chip { min-height:38px; }
  .qr-wrap { grid-template-columns:1fr; justify-items:center; }
  .recovery-grid { grid-template-columns:1fr; }
  .kv { grid-template-columns:1fr; gap:2px; }
  .kv dd { margin-bottom:8px; }
  .auth-card { padding:18px; border-radius:12px; }
  .device-code span { font-size:1.5rem; letter-spacing:.12em; }
  .sec-list li { flex-direction:column; align-items:flex-start; }
}