/* ==========================================================================
   Marberx Admin — design system
   Primary #5B4CF0 · Sidebar #0F172A · Background #F8FAFC
   Deliberately single-theme (light content, dark rail) per spec.
   ========================================================================== */

:root{
  color-scheme: light;

  --primary:#5B4CF0;
  --primary-dark:#4638d6;
  --primary-soft:#EEECFE;
  --primary-line:#CFC9FA;

  --sidebar:#0F172A;
  --sidebar-2:#1B2438;
  --sidebar-line:#26314A;
  --sidebar-txt:#94A3B8;
  --sidebar-txt-on:#FFFFFF;

  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --raised:#F8FAFC;
  --line:#E7EAF0;
  --line-soft:#F0F2F6;

  --text:#0F172A;
  --muted:#5B6478;
  --faint:#8B94A7;

  --success:#16A34A; --success-soft:#E8F6EC; --success-line:#B3E0C2;
  --warning:#F59E0B; --warning-soft:#FEF4E2; --warning-line:#F6DBA5;
  --danger:#EF4444;  --danger-soft:#FDECEC;  --danger-line:#F7BFBF;
  --info:#0EA5E9;    --info-soft:#E4F5FD;    --info-line:#A9DDF5;
  --gray-soft:#F1F3F7; --gray-line:#DFE3EA;

  --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px;
  --sh-sm:0 1px 2px rgba(15,23,42,.06);
  --sh:0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sh-lg:0 10px 30px -10px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.05);
  --sh-modal:0 24px 60px -12px rgba(15,23,42,.34);

  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
/* Any element given a display value would otherwise beat the UA's
   [hidden]{display:none}. Toggle visibility with el.hidden and trust this. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--primary); text-decoration:none}
.mono{font-family:var(--mono); font-variant-ligatures:none}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

.ic{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round; flex:none; display:block}
.ic-sm{width:15px; height:15px}

/* ================= layout ================= */
.layout{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh}
.sidebar{background:var(--sidebar); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto}
.main{min-width:0; display:flex; flex-direction:column}

@media (max-width:1024px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed; z-index:60; width:236px; transform:translateX(-100%); transition:transform .18s ease}
  .sidebar.open{transform:none; box-shadow:var(--sh-modal)}
}

/* ================= sidebar ================= */
.brand{display:flex; align-items:center; gap:11px; padding:18px 18px 16px}
.brand-mark{width:32px; height:32px; border-radius:9px; flex:none;
  background:linear-gradient(140deg,#7B6DFF,#4638d6); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:15px}
.brand-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.brand-txt b{color:var(--sidebar-txt-on); font-size:13px; letter-spacing:.09em; font-weight:700}
.brand-txt span{color:var(--sidebar-txt); font-size:11.5px}

.nav{padding:4px 10px 20px; display:flex; flex-direction:column; gap:2px}
.nav-label{padding:16px 8px 6px; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:#64748B; font-weight:600}
.nav-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r);
  color:var(--sidebar-txt); font-size:13.5px; font-weight:500; width:100%; text-align:left}
.nav-item:hover{background:var(--sidebar-2); color:#E2E8F0}
.nav-item.on{background:var(--primary); color:#fff}
.nav-item .count{margin-left:auto; font-family:var(--mono); font-size:11px; opacity:.75}

.side-foot{margin-top:auto; margin:auto 12px 16px; padding:12px 13px; background:var(--sidebar-2);
  border:1px solid var(--sidebar-line); border-radius:var(--r-lg)}
.side-foot-k{font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:#64748B; font-weight:600}
.side-foot-v{font-family:var(--mono); font-size:18px; color:#fff; margin-top:3px}
.side-foot-s{font-size:11px; color:var(--sidebar-txt); margin-top:1px}

/* ================= topbar ================= */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 26px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30}
.topbar-l h1{font-size:19px}
.topbar-l p{font-size:13px; color:var(--muted); margin-top:2px}
.topbar-r{display:flex; align-items:center; gap:10px}

.gsearch{position:relative; display:flex; align-items:center}
.gsearch .ic{position:absolute; left:10px; color:var(--faint); pointer-events:none}
.gsearch input{width:290px; padding:8px 12px 8px 34px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--raised); font-size:13px}
.gsearch input:focus{outline:none; border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3px var(--primary-soft)}
@media (max-width:820px){ .gsearch input{width:170px} }
.gsearch-results{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); z-index:40;
  max-height:340px; overflow-y:auto; padding:6px; min-width:320px}
.gsr-group{font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
  font-weight:600; padding:8px 10px 4px}
.gsr{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r); width:100%; text-align:left}
.gsr:hover{background:var(--primary-soft)}
.gsr b{font-weight:500; font-size:13.5px}
.gsr span{margin-left:auto; font-size:11.5px; color:var(--faint); font-family:var(--mono)}
.gsr-empty{padding:14px; text-align:center; color:var(--faint); font-size:13px}

.icon-btn{position:relative; width:36px; height:36px; border-radius:var(--r); display:grid;
  place-items:center; color:var(--muted); border:1px solid var(--line); background:var(--surface)}
.icon-btn:hover{background:var(--raised); color:var(--text)}
.dot-badge{position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
  background:var(--danger); border:2px solid var(--surface)}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-size:12.5px; font-weight:600; flex:none}

/* ================= view ================= */
.view{padding:22px 26px 60px; display:flex; flex-direction:column; gap:18px; min-width:0}
@media (max-width:640px){ .view{padding:16px 14px 46px} .topbar{padding:12px 14px} }

.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap}
.section-head h2{font-size:16px}
.section-head p{font-size:13px; color:var(--muted); margin-top:2px}

/* ================= buttons ================= */
.btn{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-size:13px; font-weight:500; white-space:nowrap; box-shadow:var(--sh-sm)}
.btn:hover{background:var(--raised); border-color:var(--gray-line)}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-dark); border-color:var(--primary-dark)}
.btn-danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn-danger:hover{filter:brightness(.94)}
.btn-ghost{border-color:transparent; box-shadow:none; background:none; color:var(--muted)}
.btn-ghost:hover{background:var(--gray-soft); color:var(--text)}
.btn-sm{padding:5px 9px; font-size:12.5px}
.btn:disabled{opacity:.5; cursor:not-allowed}

.row-actions{display:flex; gap:2px; justify-content:flex-end}
.act{width:29px; height:29px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--faint)}
.act:hover{background:var(--gray-soft); color:var(--text)}
.act.danger:hover{background:var(--danger-soft); color:var(--danger)}

/* ================= cards ================= */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); min-width:0}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.card-head h3{font-size:14.5px}
.card-head p{font-size:12.5px; color:var(--muted); margin-top:2px}
.card-body{padding:16px}
.card-body.tight{padding:0}

/* stat cards */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:12px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 15px; box-shadow:var(--sh); display:flex; gap:12px; align-items:flex-start}
.stat-ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:var(--primary-soft); color:var(--primary)}
.stat-ic.g{background:var(--success-soft); color:var(--success)}
.stat-ic.o{background:var(--warning-soft); color:var(--warning)}
.stat-ic.b{background:var(--info-soft); color:var(--info)}
.stat-k{font-size:11.5px; color:var(--muted); font-weight:500}
.stat-v{font-size:24px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.2}

.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px}
.grid-side{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start}
@media (max-width:1180px){ .grid-side{grid-template-columns:1fr} }

/* ================= toolbar ================= */
.toolbar{display:flex; align-items:center; gap:9px; padding:12px 16px;
  border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.toolbar .search{position:relative; flex:1; min-width:180px; max-width:320px; display:flex; align-items:center}
.toolbar .search .ic{position:absolute; left:9px; color:var(--faint); pointer-events:none}
.toolbar .search input{width:100%; padding:7px 11px 7px 31px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--raised); font-size:13px}
.toolbar .search input:focus{outline:none; border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3px var(--primary-soft)}
.toolbar select{padding:7px 10px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); font-size:13px; color:var(--text)}
.toolbar .spacer{flex:1}

/* ================= table ================= */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px}
thead th{text-align:left; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line);
  white-space:nowrap; background:var(--raised); position:relative}
thead th.sortable{cursor:pointer; user-select:none}
thead th.sortable:hover{color:var(--text)}
thead th .arrow{opacity:.55; margin-left:4px; font-size:9px}
tbody td{padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--raised)}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}
td.nowrap{white-space:nowrap}
.cell-main{font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px}
.cell-sub{font-size:11.5px; color:var(--faint); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px}

/* List tables carry many columns — let them scroll rather than crush the
   name column. Dashboard mini-tables (inside .card-body) keep flowing. */
.card > .table-wrap table{min-width:1020px}
.empty{padding:44px 20px; text-align:center; color:var(--faint)}
.empty b{display:block; color:var(--muted); font-weight:500; margin-bottom:4px; font-size:14px}

/* ================= badges ================= */
.badge{display:inline-flex; align-items:center; gap:5px; padding:2.5px 8px; border-radius:20px;
  font-size:11.5px; font-weight:500; border:1px solid transparent; white-space:nowrap; line-height:1.45}
.b-gray{background:var(--gray-soft); color:var(--muted); border-color:var(--gray-line)}
.b-green{background:var(--success-soft); color:var(--success); border-color:var(--success-line)}
.b-orange{background:var(--warning-soft); color:#B77405; border-color:var(--warning-line)}
.b-red{background:var(--danger-soft); color:#C42B2B; border-color:var(--danger-line)}
.b-purple{background:var(--primary-soft); color:var(--primary); border-color:var(--primary-line)}
.b-blue{background:var(--info-soft); color:#0B7FB4; border-color:var(--info-line)}
.chips{display:flex; flex-wrap:wrap; gap:4px}

/* ================= forms ================= */
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:620px){ .form-grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field.full{grid-column:1/-1}
.field > label{font-size:12px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px}
.field .req{color:var(--danger)}
.field input[type=text], .field input[type=number], .field input[type=date],
.field input[type=time], .field input[type=url], .field select, .field textarea{
  width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); font-size:13.5px}
.field textarea{resize:vertical; min-height:74px; line-height:1.55}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft)}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--danger); background:var(--danger-soft)}
.field .hint{font-size:11.5px; color:var(--faint)}
.field .err{font-size:11.5px; color:var(--danger); font-weight:500}
.field .tech{font-size:11px; color:var(--faint); font-family:var(--mono)}

.form-section{border-top:1px solid var(--line-soft); padding-top:16px; margin-top:4px}
.form-section:first-child{border-top:0; padding-top:0; margin-top:0}
.form-section > h4{font-size:13px; margin-bottom:3px}
.form-section > .sub{font-size:12px; color:var(--muted); margin-bottom:13px}

/* tooltip */
.tip{position:relative; display:inline-grid; place-items:center; width:15px; height:15px;
  border-radius:50%; background:var(--gray-soft); border:1px solid var(--gray-line);
  color:var(--faint); font-size:10px; font-weight:700; cursor:help; flex:none}
.tip:hover{background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary)}
.tip .tip-body{position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  background:var(--sidebar); color:#E2E8F0; font-size:11.5px; font-weight:400; line-height:1.5;
  padding:8px 10px; border-radius:var(--r); width:230px; box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transition:opacity .12s; z-index:70; text-align:left; pointer-events:none}
.tip:hover .tip-body{opacity:1; visibility:visible}
.tip .tip-body code{font-family:var(--mono); color:#A5B4FC; font-size:11px}

/* checkbox groups */
.checkgroup{display:flex; flex-direction:column; gap:6px; border:1px solid var(--line);
  border-radius:var(--r); padding:9px; background:var(--raised); max-height:250px; overflow-y:auto}
.cgi{display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:var(--r-sm); cursor:pointer}
.cgi:hover{background:var(--surface)}
.cgi input{width:15px; height:15px; accent-color:var(--primary); flex:none; margin:0}
.cgi .nm{font-size:13px; font-weight:500}
.cgi .ct{margin-left:auto; font-size:11.5px; color:var(--faint); font-family:var(--mono)}
.cg-tools{display:flex; gap:6px; margin-bottom:7px}
.cg-summary{margin-top:7px; padding:8px 11px; background:var(--primary-soft);
  border:1px solid var(--primary-line); border-radius:var(--r); font-size:12.5px; color:var(--primary); font-weight:500}

/* image picker */
.imgpick{display:flex; gap:12px; align-items:flex-start}
.imgpick-prev{width:110px; aspect-ratio:16/9; border-radius:var(--r); border:1px dashed var(--gray-line);
  background:var(--raised); display:grid; place-items:center; color:var(--faint); overflow:hidden; flex:none}
.imgpick-prev.portrait{width:64px; aspect-ratio:9/16}
.imgpick-prev img{width:100%; height:100%; object-fit:cover}
.imgpick-side{display:flex; flex-direction:column; gap:6px; min-width:0; flex:1}
.imgpick-side input[type="url"]{width:100%; min-width:0}

/* ================= modal ================= */
.modal-root{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px;
  background:rgba(15,23,42,.45); backdrop-filter:blur(2px); overflow-y:auto}
.modal-root[hidden]{display:none !important}
.modal{background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-modal);
  width:100%; max-width:600px; max-height:calc(100vh - 44px); display:flex; flex-direction:column;
  animation:pop .16s ease-out}
.modal.wide{max-width:1020px}
.modal.narrow{max-width:420px}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.99)}to{opacity:1; transform:none}}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:18px 20px 14px; border-bottom:1px solid var(--line-soft)}
.modal-head h3{font-size:16.5px}
.modal-head p{font-size:12.5px; color:var(--muted); margin-top:3px}
.modal-body{padding:18px 20px; overflow-y:auto; flex:1}
.modal-foot{display:flex; justify-content:flex-end; gap:9px; padding:14px 20px;
  border-top:1px solid var(--line-soft); background:var(--raised);
  border-radius:0 0 var(--r-xl) var(--r-xl); flex-wrap:wrap}
.modal-foot .left{margin-right:auto}

/* ================= toast ================= */
.toast-root{position:fixed; bottom:20px; right:20px; z-index:200; display:flex;
  flex-direction:column; gap:9px; pointer-events:none}
.toast{display:flex; align-items:center; gap:10px; background:var(--sidebar); color:#fff;
  padding:11px 15px; border-radius:var(--r-lg); box-shadow:var(--sh-modal); font-size:13.5px;
  max-width:380px; animation:slide .2s ease-out; pointer-events:auto}
@keyframes slide{from{opacity:0; transform:translateX(14px)}to{opacity:1; transform:none}}
.toast .ic{color:#4ADE80}
.toast.err .ic{color:#FCA5A5}
.toast.warn .ic{color:#FCD34D}

/* ================= app store preview ================= */
.as-preview{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.as-head{padding:10px 13px; border-bottom:1px solid var(--line-soft); background:var(--raised);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:600}
.as-body{padding:14px}
.ev-card{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(140deg,#3B2E7A,#151033); display:flex; flex-direction:column; justify-content:flex-end}
.ev-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ev-card .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,8,22,0) 34%,rgba(6,8,22,.88) 100%)}
.ev-card .ev-badge{position:absolute; top:10px; left:11px; z-index:2; background:rgba(255,255,255,.94);
  color:#0F172A; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3.5px 7px; border-radius:5px}
.ev-card .ev-txt{position:relative; z-index:2; padding:13px 14px}
.ev-card h4{color:#fff; font-size:16px; line-height:1.22}
.ev-card p{color:rgba(255,255,255,.84); font-size:12px; margin-top:3px; line-height:1.4}
.ev-meta{display:flex; flex-direction:column; gap:7px; margin-top:13px; font-size:12px; color:var(--muted)}
.ev-meta .r{display:flex; justify-content:space-between; gap:12px}
.ev-meta .r b{color:var(--text); font-weight:500; text-align:right; word-break:break-word}

/* phone preview (reading plan / offer) */
.phone{width:230px; margin:0 auto; border:9px solid #0F172A; border-radius:30px; overflow:hidden;
  background:#fff; box-shadow:var(--sh-lg)}
.phone-notch{height:20px; background:#0F172A; display:grid; place-items:center}
.phone-notch i{display:block; width:52px; height:4px; border-radius:3px; background:#334155}
.phone-body{padding:15px 14px 18px; min-height:320px; display:flex; flex-direction:column}
.pp-kicker{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); font-weight:700}
.pp-title{font-size:15px; font-weight:600; margin-top:4px; line-height:1.25}
.pp-day{font-size:11.5px; color:var(--faint); margin-top:2px}
.pp-h{font-size:19px; font-weight:700; margin-top:14px; letter-spacing:-.02em}
.pp-ref{font-size:12px; color:var(--primary); font-weight:600; margin-top:3px; font-family:var(--mono)}
.pp-txt{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.6}
.pp-lab{font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-top:12px}
.pp-cta{margin-top:auto; padding-top:16px}
.pp-btn{background:var(--primary); color:#fff; text-align:center; padding:10px; border-radius:10px;
  font-size:12.5px; font-weight:600}
.pp-offer{border:1px solid var(--primary-line); background:var(--primary-soft); border-radius:12px;
  padding:13px; text-align:center}
.pp-badge{display:inline-block; background:var(--warning); color:#fff; font-size:9px; font-weight:700;
  letter-spacing:.1em; padding:3px 7px; border-radius:5px; text-transform:uppercase}

/* ================= plan day builder ================= */
.day{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); margin-bottom:10px}
.day-head{display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--line-soft); background:var(--raised); border-radius:var(--r-lg) var(--r-lg) 0 0}
.day-n{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--primary);
  background:var(--primary-soft); border:1px solid var(--primary-line); padding:2px 8px; border-radius:20px}
.day-t{font-weight:500; font-size:13.5px}
.day-tools{margin-left:auto; display:flex; gap:2px}
.day-body{padding:13px}

/* ================= simulator ================= */
.sim-flow{display:flex; flex-direction:column; gap:0}
.sim-step{display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start;
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
.sim-step .n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary-soft); border:1px solid var(--primary-line); color:var(--primary);
  font-size:11px; font-weight:700; font-family:var(--mono)}
.sim-step.ok .n{background:var(--success-soft); border-color:var(--success-line); color:var(--success)}
.sim-step.bad .n{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger)}
.sim-step .t{font-size:13.5px; font-weight:500}
.sim-step .d{font-size:12.5px; color:var(--muted); margin-top:2px; word-break:break-word}
.sim-arm{width:2px; height:14px; background:var(--line); margin-left:26px}
.sim-result{padding:13px 15px; border-radius:var(--r-lg); font-size:13.5px; font-weight:500; margin-top:14px;
  display:flex; align-items:center; gap:9px}
.sim-result.ok{background:var(--success-soft); border:1px solid var(--success-line); color:var(--success)}
.sim-result.bad{background:var(--danger-soft); border:1px solid var(--danger-line); color:#C42B2B}
.sim-result.warn{background:var(--warning-soft); border:1px solid var(--warning-line); color:#B77405}

/* ================= misc ================= */
.kv{display:grid; grid-template-columns:150px minmax(0,1fr); gap:9px 16px; font-size:13.5px}
.kv dt{color:var(--muted); font-size:12.5px}
.kv dd{margin:0; font-weight:500; word-break:break-word}
.linkbox{display:flex; align-items:center; gap:8px; padding:8px 11px; background:var(--raised);
  border:1px solid var(--line); border-radius:var(--r); font-family:var(--mono); font-size:12px;
  color:var(--muted); overflow-x:auto}
.linkbox b{color:var(--primary); font-weight:500; white-space:nowrap}
.note{display:flex; gap:9px; padding:11px 13px; border-radius:var(--r); font-size:12.5px; line-height:1.5}
.note-info{background:var(--primary-soft); border:1px solid var(--primary-line); color:var(--primary)}
.note-warn{background:var(--warning-soft); border:1px solid var(--warning-line); color:#B77405}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); padding:0 16px; overflow-x:auto}
.tab{padding:11px 12px 9px; font-size:13.5px; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.on{color:var(--primary); border-bottom-color:var(--primary); font-weight:500}
.list-simple{display:flex; flex-direction:column}
.li{display:flex; align-items:center; gap:11px; padding:11px 16px; border-bottom:1px solid var(--line-soft)}
.li:last-child{border-bottom:0}
.li-ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:var(--gray-soft); color:var(--muted)}
.li-main{min-width:0; flex:1}
.li-main b{font-weight:500; font-size:13.5px; display:block}
.li-main span{font-size:11.5px; color:var(--faint)}
.li-time{font-size:11.5px; color:var(--faint); white-space:nowrap; font-family:var(--mono)}

/* ================= mobile menu ================= */
.menu-btn{display:none; flex:none}
.topbar-l{display:flex; align-items:center; gap:12px; min-width:0}
.sidebar-scrim{display:none}
@media (max-width:1024px){
  .menu-btn{display:grid}
  .sidebar-scrim{display:block; position:fixed; inset:0; z-index:55; background:rgba(15,23,42,.46)}
  .sidebar-scrim[hidden]{display:none !important}
}

/* ================= Marberx splash ================= */
.splash{
  position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  background:#0B1224; overflow:hidden; color:#fff;
}
.splash-orb{position:absolute; border-radius:50%; filter:blur(50px); pointer-events:none}
.splash-orb-a{width:340px; height:340px; background:rgba(91,76,240,.38); top:-80px; right:-40px}
.splash-orb-b{width:280px; height:280px; background:rgba(70,56,214,.28); bottom:-90px; left:-50px}
.splash-inner{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  animation:splash-rise .7s ease-out}
.splash-mark{
  width:76px; height:76px; border-radius:20px; margin-bottom:18px;
  background:linear-gradient(140deg,#7B6DFF,#4638d6); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:34px; letter-spacing:-.04em;
  box-shadow:0 18px 40px -12px rgba(91,76,240,.7), 0 0 0 8px rgba(91,76,240,.16);
  animation:splash-pulse 1.6s ease-in-out infinite}
.splash-brand{font-size:28px; font-weight:700; letter-spacing:.28em; margin-left:.28em}
.splash-sub{margin-top:8px; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:#94A3B8; font-weight:600}
.splash-bar{width:168px; height:3px; margin-top:26px; border-radius:99px; background:#1B2438; overflow:hidden}
.splash-bar i{display:block; height:100%; width:40%; border-radius:99px;
  background:linear-gradient(90deg,#7B6DFF,#5B4CF0); animation:splash-bar 1.15s ease-in-out infinite}
.splash-hint{margin-top:14px; font-size:12px; color:#64748B}
.splash-out{opacity:0; pointer-events:none; transition:opacity .55s ease}
@keyframes splash-rise{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
@keyframes splash-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.04)}}
@keyframes splash-bar{0%{transform:translateX(-120%)} 100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){
  .splash-inner,.splash-mark,.splash-bar i{animation:none}
}