/* Vikele DocSign - SignV3 theme. (c) Vikele Solutions. */
:root{
  --bg:#0f1220; --panel:#171a2b; --panel-2:#1e2236; --line:#2a2f49;
  --fg:#e7e9f3; --muted:#9aa1b5; --accent:#8f9bff; --accent-2:#c9a24a;
  --good:#3fbf7f; --good-bg:#12301f; --bad:#ff5c6c; --bad-bg:#301218;
  --warn:#e6b23a; --warn-bg:#302512; --radius:12px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font:16px/1.6 system-ui,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1{ font-size:22px; margin:4px 0 8px; }
hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }
code{ font:13px ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--panel-2); padding:2px 6px; border-radius:6px; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.nowrap{ white-space:nowrap; }

/* ---- layout ---- */
.wrap{ max-width:920px; margin:0 auto; padding:28px 20px 56px; }
.brand{ font-weight:700; font-size:22px; color:var(--accent); }
.brand span{ font:600 11px ui-monospace,monospace; letter-spacing:.18em; color:var(--accent-2); vertical-align:3px; margin-left:6px; }
.app-version{ text-align:center; color:var(--muted); font:11px ui-monospace,monospace; padding:24px; opacity:.7; }
.pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:6px 0 22px; flex-wrap:wrap; }
.ml{ font:600 11px ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); }

/* ---- top bar ---- */
.topbar{ display:flex; align-items:center; gap:6px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.topbar .wordmark{ font-weight:800; letter-spacing:.02em; color:var(--fg); margin-right:8px; }
.topbar .wordmark span{ font:600 10px ui-monospace,monospace; letter-spacing:.2em; color:var(--accent-2); vertical-align:2px; margin-left:5px; }
.topbar nav{ display:flex; gap:2px; flex-wrap:wrap; }
.topbar nav a{ color:var(--muted); padding:7px 12px; border-radius:8px; font-size:14px; }
.topbar nav a:hover{ color:var(--fg); background:var(--panel-2); text-decoration:none; }
.topbar nav a.on{ color:var(--fg); background:var(--panel-2); }
.topbar .sp{ flex:1 1 20px; }
.topbar .who{ color:var(--muted); font-size:14px; margin-right:8px; }

/* ---- buttons ---- */
.btn{ display:inline-block; border:1px solid var(--line); background:var(--panel-2); color:var(--fg);
  padding:10px 16px; border-radius:10px; font-size:15px; cursor:pointer; line-height:1.2; }
.btn:hover{ border-color:var(--accent); text-decoration:none; }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#0b0e1c; font-weight:600; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-quiet{ background:transparent; }
.btn-danger{ background:var(--bad-bg); border-color:var(--bad); color:#ffd7db; }
.btn-danger:hover{ border-color:var(--bad); filter:brightness(1.1); }
.btn-sm{ padding:6px 11px; font-size:13px; border-radius:8px; }

/* ---- forms ---- */
label{ display:block; margin:12px 0 4px; font-size:14px; color:var(--muted); }
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%; padding:11px 13px; background:var(--panel); color:var(--fg);
  border:1px solid var(--line); border-radius:10px; font-size:15px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); }
label input,label select{ margin-top:6px; }
.row2{ display:flex; gap:14px; }
.row2 label{ flex:1; }
.check{ display:flex; align-items:center; gap:9px; color:var(--fg); margin:14px 0; }
.check input{ width:auto; }
.code-input{ letter-spacing:.4em; text-align:center; font-family:ui-monospace,monospace; font-size:22px; }

/* ---- notes / flash ---- */
.note{ padding:11px 14px; border-radius:10px; margin:0 0 14px; border:1px solid var(--line); background:var(--panel); font-size:14px; }
.note.good{ background:var(--good-bg); border-color:var(--good); color:#c7f4dc; }
.note.bad{ background:var(--bad-bg); border-color:var(--bad); color:#ffd7db; }
.note.warn{ background:var(--warn-bg); border-color:var(--warn); color:#f4e3bd; }

/* ---- tables ---- */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table.grid{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
.grid th,.grid td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.grid th{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; background:var(--panel); }
.grid tr:last-child td{ border-bottom:0; }
.grid td.acts{ text-align:right; white-space:nowrap; }

/* ---- tags ---- */
.tag{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.tag.good{ background:var(--good-bg); border-color:var(--good); color:#c7f4dc; }
.tag.warn{ background:var(--warn-bg); border-color:var(--warn); color:#f4e3bd; }
.tag.plain{ color:var(--muted); }

/* ---- cards (home hub) ---- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:18px; }
.card{ display:block; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); color:var(--fg); }
.card:hover{ border-color:var(--accent); text-decoration:none; }
.card-t{ font-weight:600; margin-bottom:4px; }
.card-d{ color:var(--muted); font-size:14px; }

/* ---- setting cards (settings hub) ---- */
.settingcard{ display:block; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; color:var(--fg); }
.settingcard-t{ display:block; font-weight:600; }
.settingcard-t b{ display:block; margin-bottom:5px; }
.settingcard-b{ display:block; font-weight:400; color:var(--muted); font-size:14px; }
.settingcard-go{ display:block; margin-top:12px; color:var(--muted); }
a.settingcard:hover{ border-color:var(--accent); text-decoration:none; }

/* ---- panels used by account / security ---- */
.panel,.settingcard{ background:var(--panel); }
.steps{ margin:8px 0 0; padding-left:20px; color:var(--muted); font-size:14px; }
.steps li{ margin:6px 0; }
.codes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; margin:10px 0; }
.codes code{ display:block; text-align:center; padding:8px; font-size:15px; }
.qr-wrap{ display:flex; justify-content:center; padding:16px; background:#fff; border-radius:12px; width:max-content; margin:12px 0; }

/* ---- manual (rendered from MANUAL.md) ---- */
.manual{ max-width:760px; }
.manual h1{ font-size:26px; margin:0 0 4px; }
.manual h2{ font-size:19px; margin:30px 0 8px; padding-top:14px; border-top:1px solid var(--line); }
.manual h3{ font-size:15px; margin:20px 0 6px; color:var(--accent); }
.manual p{ margin:10px 0; }
.manual ul,.manual ol{ margin:10px 0; padding-left:22px; }
.manual li{ margin:5px 0; }
.manual hr{ margin:24px 0; }
.manual table.grid{ min-width:0; }
.manual a{ color:var(--accent); }

/* ---- pager ---- */
.pager{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }

/* ---- auth pages ---- */
body.auth{ display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:30px; }
.auth-card .brand{ margin-bottom:6px; }
.cf-turnstile{ margin:14px 0; }

/* ---- responsive ---- */
@media (max-width:640px){
  .row2{ flex-direction:column; gap:0; }
  .topbar{ gap:4px; }
  .topbar .who{ display:none; }
  .wrap{ padding:20px 16px 48px; }
}