/* WorkBox website: same violet-tinted ink and accent as the extension */
:root { --bg:#100d1a; --bg2:#161320; --card:#17141f; --text:#f0f0ff; --body:#bdb8d6; --muted:#8a85a8; --line:rgba(178,155,216,.14); --accent:#7c3aed; --accent-l:#a78bfa; --accent-sub:rgba(124,58,237,.14); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; color:var(--body); font:15.5px/1.75 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding:0 20px 56px;
  background:radial-gradient(900px 420px at 50% -120px,rgba(124,58,237,.22),transparent 70%),var(--bg); background-attachment:fixed; min-height:100vh; }
main { max-width:720px; margin:0 auto; padding-top:44px; }

.topbar { position:sticky; top:0; z-index:5; margin:0 -20px; background:rgba(16,13,26,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar-in { max-width:980px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.logo { display:inline-flex; align-items:center; gap:10px; color:var(--text); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:13px; }
.logo img { border-radius:7px; display:block; }
.logo:hover { text-decoration:none; color:var(--accent-l); }
.links { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.links a, .langs a { color:var(--muted); font-size:13px; padding:5px 10px; border-radius:8px; }
.links a:hover, .langs a:hover { color:var(--text); background:var(--accent-sub); text-decoration:none; }
.links a.on { color:var(--text); background:var(--accent-sub); }
.langs { display:flex; gap:2px; border:1px solid var(--line); border-radius:10px; padding:2px; }
.langs a { padding:3px 9px; font-size:12px; }
.langs a.on { background:var(--accent); color:#fff; }

h1 { font-size:34px; line-height:1.2; font-weight:700; letter-spacing:-.015em; color:var(--text); margin:0 0 8px; }
.meta { color:var(--muted); font-size:13px; margin:0 0 28px; }
.lead { font-size:16px; color:var(--text); margin:0 0 10px; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; }
h2 { font-size:18px; font-weight:650; color:var(--text); margin:40px 0 10px; padding-top:22px; border-top:1px solid var(--line); }
h2:first-of-type { border-top:0; }
h3 { color:var(--accent-l); }
p { margin:0 0 13px; }
ul { margin:0 0 14px; padding-left:20px; }
li { margin:6px 0; }
li::marker { color:var(--accent-l); }
strong { color:var(--text); font-weight:600; }
code { font:12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--accent-l); background:var(--accent-sub); border-radius:5px; padding:2px 6px; }
a { color:var(--accent-l); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:rgba(124,58,237,.45); }

/* guide */
.toc a { background:var(--card); }
.toc a:hover { background:var(--accent-sub); }
.tool { background:var(--card); border:1px solid var(--line) !important; border-radius:14px; padding:20px 22px !important; margin-top:18px !important; }
.tool h2 { border:0; padding:0; margin:0 0 4px !important; display:flex; align-items:center; gap:10px; }
.ti { width:26px; height:26px; flex:none; border-radius:8px; background:var(--accent-sub); position:relative; }
.ti::after { content:''; position:absolute; inset:4px; background:var(--accent-l); -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.note { color:var(--muted); }
/* changelog */
.version { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-top:18px !important; }
.version h2 { border:0; padding:0; }

footer { margin-top:56px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
footer nav a { color:var(--muted); }
footer nav a:hover { color:var(--accent-l); }
footer nav a + a { margin-left:18px; }
.copy { margin:14px 0 0; font-size:12px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:26px 0; }
.cards a { display:block; padding:16px 18px; background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--text); font-weight:600; }
.cards a small { display:block; font-weight:400; color:var(--muted); margin-top:2px; }
.cards a:hover { border-color:rgba(167,139,250,.5); text-decoration:none; transform:translateY(-1px); }

.copy-md { position:fixed; bottom:20px; right:20px; z-index:6; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 13px; border:1px solid var(--line); border-radius:12px; background:var(--bg2); color:var(--body); font:13px system-ui,sans-serif; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.4); }
.copy-md:hover, .copy-md.ok { color:var(--text); border-color:rgba(167,139,250,.55); }
.copy-md-ico { width:18px; height:18px; background-color:currentColor; -webkit-mask:url('assets/icons/copy.svg') center/contain no-repeat; mask:url('assets/icons/copy.svg') center/contain no-repeat; }
.copy-md-done:empty { display:none; }
@media (max-width:620px) { h1 { font-size:27px; } .links { order:3; flex-basis:100%; } .langs { margin-left:auto; } .tool,.version { padding:16px 16px !important; } }