/* Revio design system */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --teal:#155E63; --teal2:#1B7F8C; --teal3:#0E3D41; --mint:#3C9A8F;
  --bg:#F3F6F7; --card:#FFFFFF; --ink:#1F2430; --mut:#1E4A47;
  --line:#E4EAEA; --ok:#2E7D32; --bad:#C62828; --warn:#F9A825;
  /* Type scale: every text size in the product comes from these
     four steps. Changing one line here restyles the whole tool. */
  --fs-micro:.8rem;    /* badges, uppercase table headers */
  --fs-caption:.88rem; /* labels, table cells, metric captions */
  --fs-hint:.95rem;    /* every explanatory hint line */
  --fs-ui:.95rem;      /* buttons, selects, editors */
  --shadow:0 1px 2px rgba(15,43,45,.06), 0 8px 24px rgba(15,43,45,.07);
}
[data-theme="dark"] {
  --bg:#0F1B1C; --card:#152628; --ink:#E7EFEF; --mut:#BFE3DE;
  --line:#22393B; --shadow:0 1px 2px rgba(0,0,0,.4);
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; font-family:Inter,"Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--bg); display:flex; }

/* ---------- sidebar ---------- */
aside#side { width:232px; flex:none; min-height:100vh; color:#EAF4F4;
  background:linear-gradient(180deg,var(--teal3) 0%,var(--teal) 100%);
  display:flex; flex-direction:column; position:sticky; top:0;
  height:100vh; }
#side .logo { padding:22px 20px 14px; font-family:Georgia,serif;
  font-size:1.5rem; letter-spacing:.3px; }
#side .logo small { display:block; font-family:Inter,sans-serif;
  font-size:.68rem; opacity:.75; letter-spacing:.4px;
  text-transform:uppercase; margin-top:4px; }
#side nav { display:flex; flex-direction:column; gap:2px;
  padding:8px 10px; flex:1; overflow:auto; }
#side nav button { display:flex; align-items:center; gap:11px;
  width:100%; text-align:left; border:0; background:transparent;
  color:#D6E7E7; padding:10px 12px; border-radius:10px;
  font:inherit; font-size:.92rem; cursor:pointer;
  transition:background .15s; }
#side nav button i { width:18px; text-align:center; opacity:.9; }
#side nav button:hover { background:rgba(255,255,255,.08); }
#side nav button.active { background:rgba(255,255,255,.16);
  color:#fff; font-weight:600; }
#side .foot { padding:12px 16px; font-size:.75rem; opacity:.8;
  border-top:1px solid rgba(255,255,255,.12); }

/* ---------- content ---------- */
.content { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:14px;
  padding:14px 26px; background:var(--card);
  border-bottom:1px solid var(--line); position:sticky; top:0;
  z-index:20; }
.topbar h1 { margin:0; font-size:1.12rem; font-weight:700; }
.topbar .crumb { color:var(--mut); font-size:var(--fs-caption); }
.topbar .grow { flex:1; }
.userchip { display:flex; align-items:center; gap:9px;
  background:var(--bg); border:1px solid var(--line);
  padding:6px 12px; border-radius:22px; font-size:.85rem; }
.userchip .avatar { width:26px; height:26px; border-radius:50%;
  background:var(--teal); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:.8rem;
  font-weight:700; }
main { padding:24px 26px 60px; max-width:1220px; width:100%;
  margin:0 auto; }

/* ---------- cards & inputs ---------- */
.card { background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; margin-bottom:18px;
  box-shadow:var(--shadow); }
h2 { margin:0 0 12px; font-size:1rem; font-weight:700;
  color:var(--ink); display:flex; align-items:center; gap:8px; }
h2 i { color:var(--teal2); }
label { font-size:var(--fs-caption); color:var(--mut); display:block;
  margin:10px 0 4px; font-weight:500; }
input,textarea,select { width:100%; padding:10px 12px;
  border:1.5px solid var(--line); border-radius:10px; font:inherit;
  background:var(--card); color:var(--ink);
  transition:border .15s, box-shadow .15s; }
input:focus,textarea:focus,select:focus { outline:0;
  border-color:var(--teal2);
  box-shadow:0 0 0 3px rgba(27,127,140,.15); }
textarea { min-height:230px; line-height:1.5; }
button.b { background:linear-gradient(135deg,var(--teal2),var(--teal));
  color:#fff; border:0; padding:10px 18px; border-radius:10px;
  cursor:pointer; font:inherit; font-size:var(--fs-ui); font-weight:600;
  transition:transform .12s, box-shadow .12s; }
button.b:hover { transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(21,94,99,.3); }
button.b:disabled { opacity:.55; transform:none; box-shadow:none;
  cursor:default; }
button.b.sec { background:var(--card); color:var(--teal);
  border:1.5px solid var(--teal2); }
button.b.warn { background:linear-gradient(135deg,#c3641f,#b3541e); }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:end; }
.row > div { flex:1; min-width:170px; }

/* ---------- tables ---------- */
table { border-collapse:separate; border-spacing:0; width:100%;
  font-size:var(--fs-caption); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; }
th,td { padding:9px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
th { background:var(--bg); position:sticky; top:0; font-weight:600;
  color:var(--mut); font-size:var(--fs-micro); text-transform:uppercase;
  letter-spacing:.4px; }
tr:last-child td { border-bottom:0; }
tr:hover td { background:rgba(27,127,140,.05); }

/* ---------- widgets ---------- */
.badge { padding:3px 11px; border-radius:20px; font-size:var(--fs-micro);
  color:#fff; font-weight:600; }
.Approved { background:var(--ok); } .Needswork { background:var(--bad); }
.Toreview { background:#8fa0a0; }
.hint { font-size:var(--fs-hint); color:var(--mut); line-height:1.55; }
.err { color:var(--bad); } .ok { color:var(--ok); }
.subhint { font-size:var(--fs-caption); color:var(--mut);
  line-height:1.5; }
.txt-ink { color:var(--ink); }
::placeholder { color:var(--mut); opacity:.75; }
input:disabled, select:disabled, textarea:disabled {
  color:var(--mut); opacity:.75; }
.answer { white-space:pre-wrap; line-height:1.55; }
.rtl { direction:rtl; text-align:right; }
.dz { border:2px dashed var(--teal2); border-radius:14px;
  padding:26px; text-align:center; color:var(--mut);
  background:linear-gradient(180deg,rgba(27,127,140,.04),
  rgba(27,127,140,.01)); cursor:pointer; margin-top:6px;
  transition:background .15s, border-color .15s; font-size:.9rem; }
.dz:hover { background:rgba(27,127,140,.09); }
.dz i { display:block; font-size:1.5rem; color:var(--teal2);
  margin-bottom:8px; }
progress { width:100%; height:10px; appearance:none;
  border:0; border-radius:6px; overflow:hidden; background:var(--line); }
progress::-webkit-progress-bar { background:var(--line); }
progress::-webkit-progress-value {
  background:linear-gradient(90deg,var(--mint),var(--teal2)); }
.hidden { display:none !important; }
.metric { background:var(--card); border:1px solid var(--line);
  border-left:4px solid var(--teal2); border-radius:12px;
  padding:12px 16px; min-width:140px; box-shadow:var(--shadow); }
.metric b { display:block; font-size:1.45rem; color:var(--teal);
  font-weight:800; }
.metric span { font-size:var(--fs-caption); color:var(--mut);
  text-transform:uppercase; letter-spacing:.4px; }
.pathstep { display:flex; gap:12px; align-items:center;
  margin:9px 0; }
.pathstep .dot { width:26px; height:26px; border-radius:50%;
  background:var(--line); color:var(--mut); text-align:center;
  line-height:26px; font-size:.8rem; flex:none; font-weight:700; }
.pathstep.done .dot { background:var(--ok); color:#fff; }
.askitem { border-left:3px solid var(--teal2); padding:10px 14px;
  margin:12px 0; background:var(--bg); border-radius:0 10px 10px 0; }
.askitem .q { font-weight:600; margin-bottom:6px; }
.tabs { display:flex; gap:2px; border-bottom:1.5px solid var(--line);
  margin-bottom:16px; flex-wrap:wrap; }
.tabs button { border:0; background:transparent; padding:9px 14px;
  cursor:pointer; color:var(--mut); border-bottom:2.5px solid
  transparent; font:inherit; font-size:var(--fs-ui); }
.tabs button.active { color:var(--teal);
  border-bottom-color:var(--teal); font-weight:700; }
.console { background:#0d2224; color:#cfe3e3;
  font-family:Consolas,monospace; font-size:.8rem;
  border-radius:10px; padding:12px; min-height:80px;
  max-height:300px; overflow:auto; white-space:pre-wrap; }
.procstate { display:flex; align-items:center; gap:12px;
  font-size:.95rem; margin:10px 0; }
.procstate .spin { width:18px; height:18px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--teal2);
  animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
details summary { cursor:pointer; color:var(--mut);
  font-size:var(--fs-caption); margin:8px 0; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chips button { border:1.5px solid var(--line); background:var(--card);
  color:var(--ink); border-radius:16px; padding:5px 13px;
  cursor:pointer; font-size:var(--fs-caption); }
.chips button.on { background:var(--teal); color:#fff;
  border-color:var(--teal); }
.qrow { display:flex; gap:8px; align-items:center; margin:5px 0; }
.qrow input { flex:1; }
.qrow .qid { width:92px; flex:none; font-size:var(--fs-caption);
  color:var(--mut); }
canvas { max-width:100%; }

/* ---------- auth pages ---------- */
.auth-split { display:flex; width:100%; min-height:100vh; }
.auth-hero { flex:1.1; color:#EAF4F4; padding:7vh 6vw;
  background:linear-gradient(160deg,var(--teal3),var(--teal) 70%,
  var(--teal2)); display:flex; flex-direction:column;
  justify-content:center; }
.auth-hero .logo { font-family:Georgia,serif; font-size:2.6rem; }
.auth-hero p.tagline { font-size:1.05rem; opacity:.9;
  margin:10px 0 30px; }
.auth-hero ul { list-style:none; padding:0; margin:0; }
.auth-hero li { display:flex; gap:12px; align-items:start;
  margin:14px 0; font-size:.95rem; opacity:.95; }
.auth-hero li i { color:#9FD8CF; margin-top:3px; }
.auth-form { flex:1; display:flex; align-items:center;
  justify-content:center; padding:5vh 5vw; }
.auth-form .card { width:100%; max-width:400px; padding:30px; }
.center { text-align:center; }
a { color:var(--teal2); }
@media (max-width:860px) {
  .auth-hero { display:none; }
  aside#side { width:64px; }
  #side .logo, #side nav button span, #side .foot { display:none; }
}

.dz.ok { border-style:solid; border-color:var(--ok);
  color:var(--ok); background:rgba(46,125,50,.06); }
.dz.err { border-style:solid; border-color:var(--bad);
  color:var(--bad); background:rgba(198,40,40,.06); }
.dz.busy { border-color:var(--teal2); color:var(--teal2); }

.attn { background:rgba(249,168,37,.12); border:1px solid
  rgba(249,168,37,.5); border-radius:10px; padding:8px 12px;
  font-size:var(--fs-caption); margin:8px 0; }
.heat td { text-align:center; min-width:44px; }
.noteitem { border-left:3px solid var(--mint); padding:6px 10px;
  margin:6px 0; background:var(--bg); border-radius:0 8px 8px 0; }
.noteitem b { font-weight:600; }

#livebadge { color:#2E7D32; font-weight:700; }
details { border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; margin:8px 0; background:var(--card); }
details summary { color:var(--ink); font-size:.92rem; }
details pre { background:#0d2224; color:#cfe3e3; padding:10px;
  border-radius:8px; font-size:.8rem; overflow:auto; }
code { background:var(--bg); padding:1px 5px; border-radius:5px;
  font-size:.85em; }

.guide p, .guide li, .guide summary { color: var(--ink);
  font-size: .9rem; }
.guide summary { font-weight: 600; font-size: .95rem; }
.guide ul, .guide ol { padding-left: 22px; margin: 6px 0; }
.guide li { margin: 5px 0; line-height: 1.45; }

#sidefoot { color:#fff !important; opacity:1 !important;
  font-weight:600; font-size:.88rem; line-height:1.5; }
#sidefoot .credit-name { font-size:1.08rem; font-weight:700;
  color:#fff; }
#sidefoot .credit-mail { color:#E8F4F3; font-weight:600; }
.credit { color:#fff; font-weight:600; text-align:center;
  margin-top:18px; font-size:.95rem; }
.credit b { font-size:1.05rem; }

.vision { border-left:3px solid #7FD1C5; margin-top:24px;
  padding:12px 18px; background:rgba(255,255,255,.07);
  border-radius:0 12px 12px 0; max-width:520px; }
.vision p { color:#fff; font-style:italic; font-size:.98rem;
  line-height:1.55; margin:0; }
.vision .vision-by { font-style:normal; margin-top:10px;
  color:#E8F4F3; font-size:.92rem; }
.vision .vision-by b { color:#fff; font-size:1.05rem; }

/* v2.1 readability: hints darkened app-wide */
.hint { color: var(--mut); }

label, .hint { color: var(--ink); }
.advkey summary { font-weight:600; color: var(--ink); }
#resumebar { background:#FFF6E5; border:1px solid #F2C063;
  border-radius:12px; padding:12px 16px; margin-bottom:14px;
  color:var(--ink); font-size:.92rem; }
#resumebar .b { margin-left:8px; padding:6px 12px; }
[data-theme="dark"] #resumebar { background:#3A2F16;
  color:#F4EBDD; border-color:#8A6A2C; }

#homesub { border-left:4px solid var(--teal2); }
#homesub .b { margin-top:8px; }

.row.wrap { flex-wrap:wrap; }
.b.opt { background:transparent; color:var(--teal2);
  border:2px solid var(--teal2); }
.b.opt.on { background:var(--teal2); color:#fff; }