/* Workbench design tokens r11 — blog cold-black + Obsidian shell */
:root,
:root[data-theme="dark"]{
  --bg:#08080c;
  --bg-elev:#0d0d14;
  --panel:#ffffff08;
  --panel2:#ffffff0a;
  --panel-solid:#0d0d14;
  --panel-elev:#12121a;
  --line:#ffffff14;
  --line-strong:#ffffff24;
  --line-soft:#ffffff0f;
  --text:#e8e8ef;
  --muted:#ffffff8c;
  --muted-strong:#ffffffa3;
  --acc:#6ee7b7;
  --acc2:#34d399;
  --acc-strong:#a7f3d0;
  --acc-dim:rgba(110,231,183,.14);
  --violet:#818cf8;
  --violet2:#a5b4fc;
  --violet-dim:rgba(129,140,248,.14);
  --ok:#6ee7b7;
  --ok-dim:rgba(52,211,153,.12);
  --warn:#f5a524;
  --danger:#ff6b7a;
  --danger-dim:rgba(255,107,122,.14);
  --chip:#ffffff0a;
  --input-bg:#08080c;
  --shadow:0 4px 18px rgba(0,0,0,.18);
  --shadow-lg:0 10px 28px rgba(0,0,0,.28);
  --glow-mint:0 0 20px rgba(52,211,153,.08);
  --glow-violet:0 0 20px rgba(129,140,248,.06);
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --font:Inter,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --serif:Georgia,"Noto Serif SC","Songti SC","SimSun",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:28px;
  --space-6:40px;
  --touch:40px;
  --ribbon:44px;
  --tree:248px;
  --meta:236px;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#f2f5f3;
  --bg-elev:#fbfdfc;
  --panel:#ffffffcc;
  --panel2:#fbfdfc;
  --panel-solid:#ffffff;
  --panel-elev:#ffffff;
  --line:#17211d18;
  --line-strong:#17211d28;
  --line-soft:#17211d12;
  --text:#17211d;
  --muted:#637069;
  --muted-strong:#3f4a45;
  --acc:#167a59;
  --acc2:#0e5f45;
  --acc-strong:#0e5f45;
  --acc-dim:rgba(22,122,89,.1);
  --violet:#5e62a9;
  --violet2:#5e62a9;
  --violet-dim:rgba(94,98,169,.1);
  --ok:#167a59;
  --ok-dim:rgba(22,122,89,.1);
  --warn:#b45309;
  --danger:#dc2626;
  --danger-dim:rgba(220,38,38,.1);
  --chip:#e7ece9;
  --input-bg:#ffffff;
  --shadow:0 2px 10px rgba(38,55,47,.05);
  --shadow-lg:0 6px 18px rgba(38,55,47,.07);
  --glow-mint:none;
  --glow-violet:none;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s,color .25s;
}
body::before{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(58% 42% at 50% 0%, rgba(52,211,153,.03), transparent 62%),
    radial-gradient(48% 36% at 92% 8%, rgba(129,140,248,.025), transparent 58%);
  opacity:.9;
}
:root[data-theme="light"] body::before{
  background:
    radial-gradient(58% 42% at 50% 0%, rgba(22,122,89,.025), transparent 62%),
    radial-gradient(48% 36% at 92% 8%, rgba(94,98,169,.02), transparent 58%);
}
body > *{position:relative; z-index:1}

button,input,textarea,select{font:inherit}
button{
  border:0; border-radius:var(--radius-sm); padding:9px 14px; font-size:13px; font-weight:600;
  cursor:pointer;
  background:var(--acc-dim); color:var(--acc-strong);
  border:1px solid rgba(110,231,183,.28);
  min-height:var(--touch);
  box-shadow:none;
  transition:filter .15s, opacity .15s, transform .1s, border-color .15s, background .15s, color .15s;
}
:root[data-theme="light"] button{
  background:var(--acc-dim); color:var(--acc);
  border-color:rgba(22,122,89,.28);
}
button:hover{filter:brightness(1.08); border-color:rgba(110,231,183,.5)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45; cursor:not-allowed; transform:none}
button.ghost{
  background:transparent; color:var(--muted); border:1px solid var(--line);
  min-height:36px; padding:7px 12px; font-size:13px; font-weight:500;
}
button.ghost:hover{background:var(--chip); border-color:var(--line-strong); color:var(--text); filter:none}
button.danger{
  background:var(--danger-dim); color:var(--danger); border:1px solid rgba(255,107,122,.3);
  min-height:36px; padding:7px 12px; font-size:13px;
}
button.secondary{
  background:transparent; color:var(--text); border:1px solid var(--line);
}
button.loading{position:relative; color:transparent !important; pointer-events:none}
button.loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.25); border-top-color:var(--acc); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

input,textarea,select{
  background:var(--input-bg); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:11px 12px; font-size:13px; outline:none;
  transition:border .15s, box-shadow .15s; min-width:0; width:100%;
  min-height:var(--touch);
}
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
  border-color:var(--line-strong); background:#fff;
}
textarea{min-height:88px; resize:vertical; line-height:1.5}
input:focus,textarea:focus,select:focus{
  border-color:rgba(110,231,183,.45); box-shadow:0 0 0 3px var(--acc-dim);
}
input::placeholder,textarea::placeholder{color:var(--muted)}

.msg{min-height:16px; font-size:12px; color:var(--ok)}
.msg.err{color:var(--danger)}
.msg.banner{
  display:none; margin-top:12px; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--danger-dim); border:1px solid rgba(255,107,122,.3); color:#ffd0d5;
}
:root[data-theme="light"] .msg.banner{color:#7f1d1d}
.msg.banner.show{display:block}
.msg.banner.ok{
  background:var(--ok-dim); border-color:rgba(52,211,153,.3); color:var(--acc-strong);
}
.hint{color:var(--muted); font-size:12px}
.tag{
  font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet2); background:transparent;
  border:1px solid rgba(129,140,248,.35); border-radius:999px; padding:2px 8px; white-space:nowrap;
}

.list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.list li{
  background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 12px; font-size:13px;
  transition:border-color .2s, background .2s;
}
.list li:hover{border-color:var(--line-strong); background:rgba(255,255,255,.03)}
:root[data-theme="light"] .list li:hover{background:rgba(255,255,255,.7)}
.list li .meta{color:var(--muted); font-size:12px; margin-top:4px}
.list li.empty,.empty-state{
  color:var(--muted); font-size:13px; text-align:center;
  padding:28px 12px; border:1px dashed var(--line); border-radius:var(--radius-sm);
  background:transparent;
}
.list li.empty{border-style:dashed; text-align:center; padding:22px 12px}
pre.md{
  margin:0; white-space:pre-wrap; word-break:break-word; background:rgba(0,0,0,.2);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; font-size:12px;
  max-height:220px; overflow:auto; color:var(--muted-strong); font-family:var(--mono);
}
:root[data-theme="light"] pre.md{background:#f4f7f5}
details.raw{margin-top:4px}
details.raw summary{cursor:pointer; color:var(--muted); font-size:12px; user-select:none; padding:4px 0; letter-spacing:.04em}
details.raw[open] summary{margin-bottom:8px}

.eyebrow{
  margin:0 0 6px;
  color:var(--violet);
  letter-spacing:.28em;
  text-transform:uppercase;
  font:500 10px/1.2 var(--mono);
}

.site-logo{
  margin:0; display:inline-flex; align-items:center; gap:11px;
  color:inherit; text-decoration:none; min-width:0;
}
.site-logo-mark{
  position:relative; width:42px; height:42px; flex-shrink:0;
  display:grid; place-items:center;
  border:1px solid rgba(22,122,89,.42);
  border-radius:12px 4px 12px 4px;
  background:linear-gradient(145deg,rgba(22,122,89,.12),rgba(251,253,252,.92));
  box-shadow:0 0 18px rgba(22,122,89,.08),inset 0 0 14px rgba(22,122,89,.05);
  transform:rotate(-3deg);
  transition:.35s cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"] .site-logo-mark{
  border-color:rgba(110,231,183,.42);
  background:linear-gradient(145deg,rgba(52,211,153,.15),rgba(4,12,8,.92));
  box-shadow:0 0 26px rgba(52,211,153,.16),inset 0 0 18px rgba(52,211,153,.07);
}
.site-logo-mark::before,.site-logo-mark::after{
  content:""; position:absolute; width:8px; height:8px; border-color:var(--acc);
}
.site-logo-mark::before{left:5px; top:5px; border-left:1px solid; border-top:1px solid}
.site-logo-mark::after{right:5px; bottom:5px; border-right:1px solid; border-bottom:1px solid}
.site-logo-mark i{
  position:absolute; right:-3px; top:-3px; width:7px; height:7px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 10px var(--acc2);
}
.site-logo-mark b{
  color:var(--text); font:700 20px/1 var(--mono);
  text-shadow:3px 3px 0 rgba(22,122,89,.18);
}
:root[data-theme="dark"] .site-logo-mark b{color:#ecfdf5; text-shadow:4px 4px 0 rgba(52,211,153,.24)}
.site-logo-type{display:grid; gap:3px; min-width:0}
.site-logo-type strong{
  font-size:13px; letter-spacing:.24em; line-height:1; font-weight:700;
}
.site-logo-type small{
  color:var(--acc); font:7px/1 var(--mono); letter-spacing:.22em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.site-logo:hover .site-logo-mark{
  transform:rotate(3deg) scale(1.05);
  border-color:var(--acc);
}
.site-logo:focus-visible{outline:2px solid var(--acc); outline-offset:4px; border-radius:8px}

.theme-toggle{
  border:1px solid var(--line);
  background:transparent;
  border-radius:999px;
  width:34px; height:34px; min-height:34px; padding:0;
  display:inline-grid; place-items:center;
  color:var(--muted); box-shadow:none; cursor:pointer;
}
.theme-toggle:hover{color:var(--text); border-color:var(--line-strong); filter:none; transform:none; background:var(--chip)}
.theme-toggle svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8}
.theme-icon--moon,:root[data-theme="dark"] .theme-icon--sun{display:none}
:root[data-theme="dark"] .theme-icon--moon{display:block}
:root[data-theme="light"] .theme-icon--sun{display:block}
:root[data-theme="light"] .theme-icon--moon{display:none}