/* =====================================================================
   STEPWISE design system — technical / engineering aesthetic
   (light surfaces, hairline rules, monospace micro-labels, ink + blue)
   ===================================================================== */
:root{
  --bg:#DCE0E3; --bg2:#E8EBED; --ink:#171B1E; --muted:#5A6268; --line:#C3C9CD;
  --accent:#2C50C8; --accent-dk:#2343AE; --amber:#D6973C; --card:#FFFFFF; --ok:#2E8B57;
  --danger:#B23A3A; --dark:#14181B; --dark2:#1C2126;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- nav ---------- */
.topnav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 30px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:50;
}
.brand{font:800 20px/1 var(--mono);letter-spacing:.1em;color:var(--ink);display:flex;align-items:center;gap:9px}
.brand:hover{text-decoration:none}
.brandmark{height:30px;width:auto;flex:none;display:block}
.brand-sub{font:700 13px/1 var(--mono);letter-spacing:.01em;color:var(--accent)}
.navlinks{display:flex;align-items:center;gap:6px}
.navlinks > a{
  font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--muted);
  padding:10px 15px;border-radius:10px;
}
.navlinks > a:hover{color:var(--ink);background:#F2F4F5;text-decoration:none}
.navlinks > a.on{color:var(--ink);background:#EDF1FB}

/* user / organization menu (dropdown) */
.navmenu{position:relative;margin-left:6px}
.navtrigger{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:7px 13px 7px 8px;cursor:pointer;font:inherit;transition:border-color .15s}
.navtrigger:hover{border-color:var(--ink)}
.navavatar{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font:700 13px var(--mono)}
.navname{font-weight:700;font-size:14.5px;color:var(--ink);max-width:200px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.navtick{color:var(--ok)}
.navchev{color:var(--muted);font-size:11px;transition:transform .15s}
.navtrigger[aria-expanded="true"] .navchev{transform:rotate(180deg)}
.navdrop{position:absolute;right:0;top:calc(100% + 9px);min-width:210px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 54px -18px rgba(23,27,30,.4);
  padding:7px;display:none;flex-direction:column;z-index:60}
.navdrop.show{display:flex}
.navdrop a,.navdrop button{display:flex;align-items:center;gap:9px;text-align:left;border:none;
  background:none;width:100%;font-weight:600;font-size:14px;color:var(--ink);padding:11px 12px;
  border-radius:9px;cursor:pointer;text-decoration:none}
.navdrop a:hover,.navdrop button:hover{background:#F2F4F5;text-decoration:none}
.navdrop .sep{height:1px;background:var(--line);margin:5px 4px}
@media (max-width:760px){
  .topnav{padding:12px 16px}
  .brand{font-size:17px;gap:7px}
  .brand-sub{display:none}
  .navname{display:none}
  .navlinks{gap:3px}
  .navlinks > a{padding:9px 10px;font-size:13.5px;white-space:nowrap}
  .navlinks > a[href="api-docs.html"]{display:none}
}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:34px 22px 80px}
.wrap.narrow{max-width:560px}
.eyebrow{font:600 10px/1 var(--mono);letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
h1.page{font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.06}
.pagesub{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5;max-width:60ch}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:28px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;
  color:var(--ink);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .15s;text-decoration:none}
.btn:hover{border-color:var(--ink);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dk)}
.btn.danger{color:var(--danger);border-color:#E2C2C2}
.btn.danger:hover{border-color:var(--danger)}
.btn.sm{padding:7px 11px;font-size:11.5px;border-radius:8px}
.btn:disabled{opacity:.4;cursor:default}
.btn.ghost{background:transparent}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.grid{display:grid;gap:14px}
.grid.cols3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid.cols2{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}

/* ---------- forms ---------- */
label.f{display:block;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 6px}
input.f,textarea.f,select.f{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 12px;
  font-size:13.5px;font-family:inherit;outline:none;background:#fff;color:var(--ink)}
input.f:focus,textarea.f:focus,select.f:focus{border-color:var(--accent)}
textarea.f{resize:vertical;min-height:64px;line-height:1.45}
.formerr{margin-top:12px;font-size:12.5px;color:var(--danger);background:#F7E9E9;
  border:1px solid #E2C2C2;border-radius:8px;padding:9px 11px;display:none}
.formerr.show{display:block}

/* ---------- chips / badges ---------- */
.chip{display:inline-block;font:600 10px/1 var(--mono);color:var(--ink);background:#F2F4F5;
  border:1px solid var(--line);border-radius:6px;padding:6px 8px;white-space:nowrap}
.tagchip{display:inline-block;font:600 10px/1 var(--mono);letter-spacing:.04em;color:var(--accent);
  background:#EDF1FB;border:1px solid #C9D4F0;border-radius:999px;padding:6px 10px;cursor:pointer;
  text-transform:uppercase}
.tagchip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.badge{display:inline-block;font:700 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  border-radius:6px;padding:5px 8px;border:1px solid transparent}
.badge.draft{background:#F2F4F5;color:var(--muted);border-color:var(--line)}
.badge.processing{background:#FBEFD9;color:#7A4A12;border-color:#E8CFA0}
.badge.review{background:#EDF1FB;color:var(--accent);border-color:#C9D4F0}
.badge.published{background:#EEF7F1;color:var(--ok);border-color:#BFE0CC}
.badge.archived{background:#F2F4F5;color:#9AA0A6;border-color:var(--line)}

/* ---------- table ---------- */
table.sw{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
table.sw{display:block;overflow-x:auto}
table.sw thead th{font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);background:#FAFBFB}
table.sw td{padding:13px 14px;border-bottom:1px solid #EDEFF1;font-size:13px;vertical-align:middle;white-space:nowrap}
table.sw tr:last-child td{border-bottom:none}
table.sw td .sub{display:block;font:500 10.5px var(--mono);color:var(--muted);margin-top:3px;white-space:nowrap}
.rowactions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:200;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600;border-radius:999px;
  padding:11px 20px;opacity:0;pointer-events:none;transition:all .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- public footer ---------- */
.legalbar{border-top:1px solid var(--line);padding:26px 22px 44px;color:var(--muted);
  font-size:12.5px;text-align:center;background:rgba(255,255,255,.38)}
.legalbar a{font-weight:700;color:var(--muted);margin:0 7px}
.legalbar a:hover{color:var(--ink)}

/* ---------- catalog cards ---------- */
.mcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.mcard:hover{box-shadow:0 14px 38px -16px rgba(23,27,30,.3);transform:translateY(-2px)}
.mthumb{height:140px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EDF0F2,#DDE2E5);border-bottom:1px solid var(--line);position:relative}
.mthumb svg{opacity:.85}
.mthumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mthumb .steps-n{position:absolute;top:10px;right:12px;font:600 9.5px/1 var(--mono);
  letter-spacing:.1em;color:var(--muted);background:rgba(255,255,255,.8);border:1px solid var(--line);
  border-radius:999px;padding:5px 9px}
.mbody{padding:15px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.mname{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.morg{font:600 10px/1 var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.mtags{display:flex;flex-wrap:wrap;gap:5px}
.mfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;
  border-top:1px solid #EDEFF1}
.mviews{font:600 10.5px/1 var(--mono);color:var(--muted);letter-spacing:.04em}

/* ---------- misc ---------- */
.empty{border:1px dashed var(--line);border-radius:14px;padding:42px 20px;text-align:center;
  color:var(--muted);font-size:13.5px;background:rgba(255,255,255,.5)}
.hr{border:none;border-top:1px solid var(--line);margin:26px 0}
.kbd{font:600 11px var(--mono);background:#F2F4F5;border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.note{font-size:12px;color:var(--muted);line-height:1.5}
.mono{font-family:var(--mono)}

@media (max-width:640px){
  .wrap{padding:24px 14px 60px}
  .topnav{padding:12px 14px}
  .navorg{display:none}
}