:root { color-scheme: light; --ink:#17251f; --muted:#617069; --line:#dce3dd; --paper:#fff; --accent:#245b40; --lime:#dbf19b; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:#f2f5f1; line-height:1.65; }
* { box-sizing:border-box; }
body { margin:0; }
header,main,footer { width:min(100% - 64px,1160px); margin-inline:auto; }
header { display:flex; justify-content:space-between; align-items:center; padding:24px 0; gap:24px; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-weight:750; text-decoration:none; letter-spacing:-.04em; font-size:1.15rem; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; background:var(--ink); color:var(--lime); border-radius:9px; font-size:1.1rem; font-weight:750; letter-spacing:0; }
header nav { display:flex; align-items:center; gap:26px; font-size:.85rem; }
header nav a { text-decoration:none; font-weight:600; }
.workspace-label { color:var(--muted); }
.nav-admin { border:1px solid var(--line); border-radius:8px; padding:7px 14px; background:var(--paper); }
.nav-admin span { margin-left:12px; }
.intro { position:relative; overflow:hidden; border-radius:20px; padding:48px; margin:12px 0 20px; background:var(--ink); color:#f8fff3; }
.intro::after { content:""; position:absolute; width:300px; height:300px; right:-60px; top:-100px; border:1px solid #677d5a; border-radius:50%; box-shadow:0 0 0 42px #ffffff05,0 0 0 84px #ffffff04; pointer-events:none; }
.intro-index { position:absolute; right:48px; bottom:42px; color:var(--lime); font-size:.85rem; letter-spacing:.12em; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:750; color:var(--muted); margin:0 0 18px; }
.intro .eyebrow { color:var(--lime); }
h1 { font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.08; letter-spacing:-.055em; margin:14px 0 20px; font-weight:650; }
.intro h1 { position:relative; z-index:1; }
.intro p:last-child { color:#c2d0c5; margin-bottom:0; }
h2 { font-size:1.4rem; letter-spacing:-.035em; line-height:1.3; margin:0 0 16px; font-weight:650; }
h3 { font-size:1rem; margin:0 0 18px; letter-spacing:-.02em; }
p { margin:12px 0; }
.jump-links { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; margin-bottom:28px; }
.jump-links a { text-decoration:none; color:var(--ink); padding:16px 20px; font-size:.85rem; font-weight:600; }
.jump-links a + a { border-left:1px solid var(--line); }
.jump-links a:hover { background:#edf4e5; }
.jump-links span { color:var(--muted); margin-right:12px; font-size:.75rem; }
aside { padding:24px 28px; border:1px solid #d4dfc2; background:#e9efdf; border-radius:12px; }
aside h2 { font-size:.95rem; margin-bottom:9px; }
aside p { margin:6px 0; font-size:.9rem; max-width:100ch; }
.before { padding:36px 0 40px; }
ul,ol { padding-left:22px; margin:12px 0; }
li + li { margin-top:9px; }
.before ul { display:grid; grid-template-columns:1fr 1fr; column-gap:44px; row-gap:14px; list-style:none; padding:0; font-size:.9rem; }
.before li { position:relative; margin:0; padding-left:26px; }
.before li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.step { display:grid; grid-template-columns:64px minmax(0,1fr); gap:24px; padding:36px 0; border-top:1px solid var(--line); }
.number { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; font-size:.8rem; font-weight:650; color:var(--muted); background:var(--paper); font-variant-numeric:tabular-nums; }
.step h2,.extra h2 { scroll-margin-top:24px; }
.clients { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0 0; }
article { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:24px; min-width:0; box-shadow:0 3px 12px #17251f03; }
article p { margin:16px 0 0; color:var(--muted); font-size:.85rem; }
pre { background:#18241f; color:#e9f5df; border-radius:8px; padding:20px; margin:0; overflow-x:auto; font-size:.8rem; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
code { font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:.9em; }
pre code { font-size:inherit; }
p > code { background:#e2e9dc; border-radius:4px; padding:3px 6px; }
blockquote { background:var(--paper); border:1px solid var(--line); border-left:3px solid #8ca56a; border-radius:0 8px 8px 0; margin:16px 0; padding:18px 22px; max-width:82ch; font-size:.95rem; }
.extra { border-top:1px solid var(--line); padding:36px 0 36px 88px; }
dl { display:grid; grid-template-columns:190px minmax(0,1fr); gap:14px 24px; font-size:.9rem; }
dt { font-weight:650; }
dd { margin:0; color:var(--muted); }
footer { border-top:1px solid var(--line); padding:28px 0 36px; color:var(--muted); font-size:.75rem; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; }
footer nav { display:flex; flex-wrap:wrap; gap:20px; }
:focus-visible { outline:3px solid #65882f; outline-offset:4px; }
.skip { position:absolute; top:-100px; left:20px; padding:12px; background:var(--paper); z-index:10; }
.skip:focus { top:12px; }
.app-page { min-height:100vh; display:flex; flex-direction:column; }
.app-page header { border-bottom:1px solid var(--line); }
.app-main { flex:1; padding-block:52px 72px; }
.app-main h1 { font-size:clamp(2.2rem,4vw,3rem); }
.login-card { max-width:480px; padding:36px; margin:24px auto; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 10px 40px #17251f06; }
.login-card p { color:var(--muted); font-size:.95rem; }
.login-card .button { margin-top:14px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; border:1px solid var(--accent); border-radius:8px; padding:11px 18px; background:var(--accent); color:#fff; font-family:inherit; font-size:.85rem; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap; }
.button:hover { background:#173e2b; }
.button.secondary { background:var(--paper); color:var(--ink); border-color:var(--line); }
.button.secondary:hover { background:#edf3e8; }
.sign-in-options { display:grid; gap:10px; margin-top:24px; }
.sign-in-options .button { margin:0; justify-content:space-between; }
.admin-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.admin-heading h1 { margin-bottom:4px; }
.account-label { color:var(--muted); margin:8px 0 32px; font-size:.85rem; overflow-wrap:anywhere; }
.admin-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:24px; align-items:start; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.panel-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid var(--line); }
.panel-heading h2 { font-size:1rem; margin:0; }
.badge { background:#edf5e5; color:#335c22; border-radius:30px; padding:4px 10px; font-size:.68rem; white-space:nowrap; }
.warning { background:#fff4d8; color:#785310; }
.email-form { padding:26px 28px; }
label { display:block; font-size:.8rem; font-weight:650; margin-bottom:8px; }
.input-row { display:flex; gap:10px; }
input[type=email] { width:100%; min-width:0; border:1px solid #bccbbf; background:#fafcf9; border-radius:8px; padding:12px 14px; font:inherit; font-size:.9rem; color:var(--ink); }
input::placeholder { color:#87948b; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:.85rem; }
th { background:#f6f8f4; color:var(--muted); font-size:.7rem; font-weight:600; padding:12px 28px; border-block:1px solid var(--line); white-space:nowrap; }
td { padding:18px 28px; border-bottom:1px solid #edf0e9; }
tr:last-child td { border-bottom:0; }
td:last-child { text-align:right; }
.email-cell { overflow-wrap:anywhere; }
.text-button { border:0; background:none; font:inherit; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; }
.danger { color:#a03c32; }
.empty-state { text-align:center!important; color:var(--muted); padding:40px 24px; }
.access-note { background:var(--paper); border-color:var(--line); padding:24px; }
.access-note h2 { margin-bottom:14px; }
.access-note p { font-size:.8rem; color:var(--muted); margin-top:14px; }
.domain { display:block; font-size:.8rem; font-weight:600; margin-bottom:6px; }
hr { border:0; border-top:1px solid var(--line); margin:24px 0; }
.notice { margin:20px 28px 0; background:#edf5e5; border-radius:6px; color:#335c22; padding:10px 12px; font-size:.8rem; }
.notice.error { color:#9b2e28; background:#fff0ec; }
.notice.warning { color:#785310; background:#fff4d8; margin-top:0; margin-bottom:24px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:900px) {
  .clients { grid-template-columns:1fr; }
  .admin-layout { grid-template-columns:1fr; }
  .intro-index { display:none; }
}
@media (max-width:600px) {
  header,main,footer { width:calc(100% - 32px); }
  header { padding:20px 0; gap:12px; }
  header nav { gap:14px; font-size:.8rem; }
  .brand { font-size:1rem; gap:8px; }
  .workspace-label { display:none; }
  .intro { padding:32px 24px; border-radius:14px; }
  .intro p:last-child { font-size:.9rem; }
  .jump-links { grid-template-columns:1fr 1fr; }
  .jump-links a { padding:13px 14px; font-size:.75rem; }
  .jump-links a:nth-child(3) { border-left:0; }
  .jump-links a:nth-child(n+3) { border-top:1px solid var(--line); }
  .before ul { grid-template-columns:1fr; }
  aside,article { padding:20px; }
  .step { grid-template-columns:30px minmax(0,1fr); gap:12px; }
  .number { width:28px; height:28px; font-size:.65rem; }
  .step h2 { font-size:1.2rem; }
  .extra { padding-left:0; }
  dl { grid-template-columns:1fr; gap:4px; }
  dd { margin-bottom:14px; }
  .app-main { padding-block:32px 48px; }
  .login-card { padding:24px; }
  .admin-heading { align-items:start; }
  .admin-heading h1 { font-size:2rem; }
  .admin-heading .button { padding:8px 12px; }
  .panel-heading { flex-wrap:wrap; padding:20px; gap:10px; }
  .email-form { padding:20px; }
  .input-row { flex-direction:column; }
  th,td { padding:14px 16px; }
  .notice { margin-inline:20px; }
}
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
@media print {
  body { background:white; }
  header,main,footer { width:100%; }
  .intro { background:#eee; color:#000; padding:24px; }
  .intro .eyebrow,.intro p:last-child { color:#333; }
  .intro::after,.intro-index,.jump-links,.nav-admin { display:none; }
  pre { background:#eee; color:#000; }
  article,blockquote,aside { break-inside:avoid; }
}