/* dl-security.v1.css — domainless.fun/security ("Sign-in & recovery").
 * Platform tokens only (--bg --card --text --bright --dim --accent
 * --accent-text --border --danger, themed by base.v1.css and the paid-theme
 * emitters), so it reads correctly in light, dark and every purchased theme.
 * No dark-era hardcoded palette: see the 2026-06-16 light-default flip. */
.sec-page{max-width:680px;margin:0 auto;padding:22px 16px 72px;color:var(--text);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}
.sec-page *{box-sizing:border-box}
.sec-head h1{font-size:26px;line-height:1.2;margin:4px 0 4px;color:var(--bright);letter-spacing:-.01em}
.sec-head{margin-bottom:16px}
.sec-dim{color:var(--dim);margin:0 0 12px}
.sec-small{font-size:13px;color:var(--dim);margin:6px 0 0}
.sec-mono{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.94em;overflow-wrap:anywhere}
.sec-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 18px 16px;margin:0 0 14px}
.sec-card h2{font-size:17px;margin:0 0 6px;color:var(--bright)}
.sec-center{text-align:center;padding:28px 20px}
.sec-center .sec-btn{min-width:180px}
.sec-status{border-radius:14px;padding:14px 16px;margin:0 0 14px;border:1px solid var(--border)}
.sec-status p{margin:0}
.sec-status p+p{margin-top:6px}
.sec-good{background:rgba(80,200,120,.12);border-color:rgba(80,200,120,.4)}
.sec-warn{background:rgba(214,160,40,.13);border-color:rgba(214,160,40,.45)}
.sec-bad{background:rgba(214,66,66,.11);border-color:rgba(214,66,66,.42)}
.sec-status>p:first-child{color:var(--bright);font-weight:600}
.sec-line{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sec-line b{color:var(--bright);font-size:16px}
.sec-list{list-style:none;margin:6px 0 12px;padding:0}
.sec-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--border)}
.sec-item:first-child{border-top:0}
.sec-what{min-width:0;flex:1 1 220px}
.sec-what b{color:var(--bright)}
.sec-empty{color:var(--dim);font-style:italic;margin:4px 0 12px}
.sec-row-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.sec-actions{margin-top:6px}
.sec-line .sec-btn,.sec-row-btns .sec-btn,.sec-add .sec-btn{flex:none;white-space:nowrap}
.sec-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--bright);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.sec-btn:hover{border-color:var(--accent)}
.sec-btn[disabled]{opacity:.6;cursor:default}
/* An unavailable action reads as plain text in an outline, not a faded
   gold button: still legible, clearly not pressable. */
.sec-primary[disabled]{opacity:1;background:transparent;border-color:var(--border);color:var(--dim);filter:none}
.sec-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-label,#12100a)}
.sec-primary:hover{filter:brightness(1.05)}
.sec-danger{color:var(--danger,#c0392b)}
html[data-theme="dark"] .sec-danger{color:#ff9b9b}
.sec-link{background:0;border:0;padding:6px 2px;font:inherit;font-size:14px;color:var(--accent-text,var(--accent));cursor:pointer;text-decoration:underline;min-height:36px}
a.sec-link{display:inline;padding:0;min-height:0}
.sec-badge{display:inline-block;font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;vertical-align:1px}
.sec-badge-ok{background:rgba(80,200,120,.16);color:#1d6b3c}
.sec-badge-wait{background:rgba(214,160,40,.18);color:#6a4c08}
html[data-theme="dark"] .sec-badge-ok{color:#86dfae}
html[data-theme="dark"] .sec-badge-wait{color:#f0d38a}
.sec-add{display:flex;gap:8px;margin-top:4px}
.sec-add input,.sec-field input{flex:1;min-width:0;width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--bright);font:inherit;font-size:16px}
.sec-add input:focus,.sec-field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint,rgba(184,145,30,.2))}
.sec-field{display:block;margin:10px 0}
.sec-field span{display:block;font-size:13px;font-weight:600;color:var(--dim);margin-bottom:5px}
.sec-code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace!important;letter-spacing:.3em;text-align:center;font-size:20px!important;max-width:220px}
.sec-codebox{width:100%;padding:4px 0 2px}
.sec-setup{margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}
.sec-steps{margin:0 0 10px;padding-left:20px}
.sec-steps li{margin:4px 0}
.sec-qr{display:flex;justify-content:center;margin:10px 0}
.sec-qr svg{background:#fff;border-radius:10px;padding:6px;border:1px solid var(--border);width:196px;height:196px}
.sec-key{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:6px 0 10px}
.sec-key code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:.06em;color:var(--bright);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 10px;word-break:break-all;text-align:center}
.sec-codes{columns:2;column-gap:18px;margin:10px 0 12px;padding:12px 14px 12px 34px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--bright);font-size:16px;line-height:1.9}
.sec-err{background:rgba(214,66,66,.11);border:1px solid rgba(214,66,66,.4);color:var(--danger,#c0392b);border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:14px}
html[data-theme="dark"] .sec-err{color:#ff9b9b}
.sec-ok{background:rgba(80,200,120,.12);border:1px solid rgba(80,200,120,.4);color:var(--bright);border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:14px}
.sec-hint{margin-top:10px}
.sec-foot{text-align:center;margin-top:20px}
.sec-scrim{position:fixed;inset:0;z-index:2147483000;background:rgba(8,8,12,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.sec-dialog{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:20px;width:100%;max-width:380px;box-shadow:0 24px 64px rgba(0,0,0,.35)}
.sec-dialog h2{margin:0 0 6px;font-size:18px;color:var(--bright)}
@media (max-width:480px){
  .sec-head h1{font-size:23px}
  .sec-card{padding:16px 14px 14px}
  .sec-line{flex-direction:column;align-items:stretch}
  .sec-line .sec-btn{width:100%}
  .sec-add{flex-direction:column}
  .sec-add .sec-btn{width:100%}
  .sec-row-btns{justify-content:flex-start}
  .sec-codes{columns:1}
}

/* Password card (2026-10-08) */
.sec-pwform{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.sec-hidden-user{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sec-warnline{margin:0 0 12px;padding:8px 12px;border-radius:10px;border:1px solid var(--warn,#b8861e);background:var(--warn-tint,rgba(184,134,30,.10));color:var(--bright)}
.sec-inline-err{margin:0}
.sec-inline-err[hidden]{display:none}