/* ============ TokenPress — Command Center (light) shared kit ============ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

/* monochrome professional icons — inherit currentColor */
.msym{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;vertical-align:middle;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.banner .ic .msym{font-size:19px}
.nav .item .ic .msym{font-size:19px}
.proposal .pic .msym{font-size:22px}
.event .ed .msym{font-size:15px}
.account .gear .msym{font-size:17px}
.tl-title .pset .msym{font-size:13px;margin-right:1px}
.metric .name .msym,.section .h .t .msym{font-size:16px}

:root{
  --paper:#f3efe5; --paper-2:#eae4d5; --surface:#fbf9f2;
  --ink:#15211b; --ink-soft:#3c4b43; --sage:#7e9789;
  --pine:#1e4034; --pine-hover:#16332a; --moss:#2e5e4e;
  --gold:#c8983a; --gold-soft:#e7c988; --on-pine:#fbf9f2;
  --line:rgba(30,64,52,.16); --line-2:rgba(30,64,52,.10);
  --go-bg:rgba(46,94,78,.14); --go-fg:#1e4034;
  --wait-bg:rgba(200,152,58,.18); --wait-fg:#8a6516;
  --bad-bg:rgba(168,67,52,.12); --bad-fg:#a84334;
  --green:#3f9d6f;
  --shadow:0 1px 2px rgba(21,33,27,.06),0 12px 32px -12px rgba(21,33,27,.18);
  --shadow-lg:0 2px 4px rgba(21,33,27,.08),0 30px 60px -22px rgba(21,33,27,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Hanken Grotesk",sans-serif;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.45;overflow:hidden}
.serif{font-family:"Fraunces",serif}
.mono{font-family:"JetBrains Mono",monospace}
a{color:inherit}

/* ---- shell ---- */
.app{display:grid;grid-template-columns:248px 1fr 320px;height:100vh}
.app.no-right{grid-template-columns:248px 1fr}

/* ---- left rail ---- */
.left{background:var(--surface);border-right:1px solid var(--line-2);padding:16px 14px;display:flex;flex-direction:column;position:relative;min-height:0}
.brand{display:flex;align-items:center;gap:10px;margin:4px 6px 18px}
.brand .tp{width:30px;height:30px;border-radius:9px;background:var(--pine);color:var(--on-pine);
  font-family:"Fraunces",serif;font-weight:700;display:grid;place-items:center;font-size:.85rem}
.brand .nm{font-family:"Fraunces",serif;font-size:1.05rem;font-weight:600}
.sw-btn{display:flex;align-items:center;gap:11px;width:100%;background:var(--paper);border:1px solid var(--line-2);
  border-radius:13px;padding:11px 12px;cursor:pointer;text-align:left;transition:.15s}
.sw-btn:hover{border-color:var(--moss)}
.sw-btn .mk{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#1e4034,#2e5e4e);
  color:#fff;display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:600;font-size:.85rem;flex-shrink:0;position:relative}
.sw-btn .mk .live{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid var(--surface)}
.sw-btn .meta{flex:1;min-width:0}
.sw-btn .meta .t{font-family:"Fraunces",serif;font-size:1.02rem;font-weight:600;line-height:1.1}
.sw-btn .meta .u{font-size:.7rem;color:var(--sage)}
.sw-btn .ch{color:var(--sage);font-size:.8rem}

.tl-title{font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);margin:22px 6px 12px;display:flex;align-items:center;justify-content:space-between}
.tl-title .pset{display:flex;align-items:center;gap:4px;color:var(--moss);cursor:pointer;text-transform:none;letter-spacing:0;font-size:.66rem}

.timeline{position:relative;padding-left:6px}
.tnode{display:flex;gap:13px;padding-bottom:18px;position:relative;cursor:pointer}
.tnode::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line-2)}
.tnode:last-child::before{display:none}
.tnode .dot{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:.64rem;font-weight:700;font-family:"JetBrains Mono",monospace;z-index:1}
.tnode.done .dot{background:var(--pine);color:var(--on-pine)}
.tnode.now .dot{background:var(--gold);color:var(--pine);box-shadow:0 0 0 4px rgba(200,152,58,.2)}
.tnode.next .dot{background:var(--paper-2);color:var(--sage);border:1px solid var(--line)}
.tnode .meta .l{font-size:.88rem;font-weight:600}
.tnode.next .meta .l{color:var(--ink-soft)}
.tnode .meta .s{font-size:.72rem;color:var(--sage)}
.tnode.now .meta .l{color:var(--ink)}

.left .sp{flex:1}
.cta{width:100%;font-family:inherit;font-size:.85rem;font-weight:600;border-radius:12px;padding:12px;
  border:none;cursor:pointer;transition:.15s;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:7px}
.cta.primary{background:var(--pine);color:var(--on-pine)} .cta.primary:hover{background:var(--pine-hover)}
.cta.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)} .cta.ghost:hover{border-color:var(--moss)}

.account{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line-2);
  border-radius:13px;padding:9px 11px;cursor:pointer;transition:.15s}
.account:hover{border-color:var(--moss)}
.account .av{width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--pine);
  display:grid;place-items:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.account .who{flex:1;min-width:0}
.account .who .n{font-size:.82rem;font-weight:600;line-height:1.1}
.account .who .e{font-size:.68rem;color:var(--sage);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account .gear{color:var(--sage);font-size:.9rem}

/* left nav (maintenance mode) */
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav .item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;font-size:.86rem;font-weight:500;color:var(--ink-soft)}
.nav .item .ic{width:18px;text-align:center;font-size:.95rem}
.nav .item:hover{background:var(--paper)}
.nav .item.on{background:var(--pine);color:var(--on-pine);font-weight:600}
.nav .item .badge{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.58rem;background:var(--gold-soft);color:var(--pine);padding:2px 7px;border-radius:999px}
.nav .item.on .badge{background:rgba(255,255,255,.2);color:#fff}
.nav .sect{font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin:14px 11px 6px}

/* ---- center ---- */
.center{display:flex;flex-direction:column;min-width:0;background:
  radial-gradient(circle at 50% -10%,rgba(46,94,78,.06),transparent 55%),var(--paper)}
.c-top{display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--line-2);background:var(--surface)}
.c-title{font-family:"Fraunces",serif;font-size:1.25rem;font-weight:600}
.c-title small{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:.74rem;font-weight:400;color:var(--sage)}
.pagepick{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line-2);
  padding:7px 13px;border-radius:10px;font-size:.82rem;font-weight:600;cursor:pointer}
.pagepick .ch{color:var(--sage)}
.seg{margin-left:auto;display:flex;gap:4px;background:var(--paper);padding:4px;border-radius:11px;border:1px solid var(--line-2)}
.seg .s{font-size:.74rem;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--ink-soft)}
.seg .s.on{background:var(--pine);color:var(--on-pine)}
.canvas{flex:1;overflow:auto;padding:24px 26px}
.canvas.center-x{display:flex;justify-content:center}
.wrap{width:100%;max-width:720px;margin:0 auto}

/* fake browser frame */
.frame{background:#fff;color:#15211b;border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;
  width:100%;height:fit-content;position:relative;border:1px solid var(--line-2)}
.browser{display:flex;gap:5px;align-items:center;padding:10px 13px;background:#f1ede3;border-bottom:1px solid #e3ddcf}
.browser i{width:9px;height:9px;border-radius:50%;display:inline-block}
.browser i.r{background:#e0695f}.browser i.y{background:#e7b14a}.browser i.g{background:#5fae6f}
.browser .u{margin-left:8px;font-size:.66rem;color:#9aa49d;font-family:"JetBrains Mono",monospace}
.browser .u.secure{color:#5a8a72}
.hero{background:linear-gradient(135deg,#1e4034,#2e5e4e);color:#fff;padding:32px 26px}
.hero h1{font-family:"Fraunces",serif;font-size:1.45rem;font-weight:600}
.hero p{opacity:.85;margin-top:6px;font-size:.82rem}
.blk{padding:20px 26px}
.blk h2{font-family:"Fraunces",serif;font-size:1.05rem;margin-bottom:8px}
.blk p{color:#54635a;font-size:.8rem;line-height:1.6}
.blk .line{height:8px;border-radius:5px;background:#eae5d9;margin-bottom:7px}.blk .line.s{width:55%}
.editable{outline:2px dashed transparent;border-radius:5px;transition:.15s}
.editable:hover{outline-color:var(--gold);background:rgba(200,152,58,.08)}

/* banner */
.banner{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:12px 16px;border-radius:13px;
  background:linear-gradient(100deg,rgba(46,94,78,.12),rgba(200,152,58,.1));border:1px solid rgba(46,94,78,.2)}
.banner .ic{width:34px;height:34px;border-radius:9px;background:var(--pine);color:var(--on-pine);display:grid;place-items:center;font-size:1.05rem;flex-shrink:0}
.banner .tx{flex:1}.banner .tx .t{font-family:"Fraunces",serif;font-size:1rem;font-weight:600}
.banner .tx .s{font-size:.76rem;color:var(--ink-soft)}
.banner a{font-size:.8rem;font-weight:600;color:var(--moss);text-decoration:none;white-space:nowrap}

/* generic card / section */
.section{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.section > .h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.section > .h .t{font-family:"Fraunces",serif;font-size:1.15rem;font-weight:600}
.section > .h .t small{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:.76rem;font-weight:400;color:var(--sage)}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--moss);display:flex;align-items:center;gap:.5rem;margin-bottom:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--gold)}
.btn{font-family:inherit;font-size:.8rem;font-weight:600;border-radius:10px;padding:9px 15px;border:1px solid transparent;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--pine);color:var(--on-pine)}.btn.primary:hover{background:var(--pine-hover)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}.btn.ghost:hover{border-color:var(--moss)}
.btn.gold{background:var(--gold);color:var(--pine)}.btn.gold:hover{background:var(--gold-soft)}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:5px;font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.pill.go{background:var(--go-bg);color:var(--go-fg)} .pill.wait{background:var(--wait-bg);color:var(--wait-fg)} .pill.bad{background:var(--bad-bg);color:var(--bad-fg)} .pill.neutral{background:var(--paper-2);color:var(--ink-soft)}

/* SCORECARD — site health metrics */
.scorecard{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.metric{background:var(--paper);border:1px solid var(--line-2);border-radius:13px;padding:14px;text-align:center;position:relative}
.metric .ring{--v:70;--c:var(--gold);width:62px;height:62px;border-radius:50%;margin:0 auto 8px;
  background:conic-gradient(var(--c) calc(var(--v)*1%),var(--paper-2) 0);display:grid;place-items:center;position:relative}
.metric .ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--paper)}
.metric .ring .v{position:relative;z-index:1;font-family:"Fraunces",serif;font-weight:600;font-size:1.05rem}
.metric .name{font-size:.78rem;font-weight:600}
.metric .desc{font-size:.68rem;color:var(--sage)}
.metric .delta{font-family:"JetBrains Mono",monospace;font-size:.64rem;margin-top:5px;display:inline-block}
.metric .delta.up{color:var(--green)} .metric .delta.down{color:var(--bad-fg)}

/* CHECKLIST */
.checklist{display:flex;flex-direction:column;gap:2px}
.check{display:flex;align-items:flex-start;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line-2)}
.check:last-child{border-bottom:0}
.check .box{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;font-size:.7rem;font-weight:700;margin-top:1px}
.check.done .box{background:var(--pine);color:var(--on-pine)}
.check.warn .box{background:var(--wait-bg);color:var(--wait-fg)}
.check.todo .box{background:transparent;border:1.5px solid var(--line);color:transparent}
.check .ct{flex:1}
.check .ct .l{font-size:.88rem;font-weight:600}
.check .ct .d{font-size:.76rem;color:var(--sage);margin-top:1px}
.check .act{font-size:.76rem;font-weight:600;color:var(--moss);cursor:pointer;white-space:nowrap;align-self:center}

/* PROPOSAL / optimization card */
.proposal{display:flex;gap:14px;background:var(--paper);border:1px solid var(--line-2);border-radius:14px;padding:15px;margin-bottom:12px;align-items:center}
.proposal .pic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;flex-shrink:0}
.proposal .pic,.proposal .pic.seo,.proposal .pic.speed,.proposal .pic.design,.proposal .pic.a11y{background:rgba(46,94,78,.09);color:var(--moss)}
.proposal .pc{flex:1}
.proposal .pc .t{font-size:.92rem;font-weight:600}
.proposal .pc .d{font-size:.78rem;color:var(--ink-soft);margin-top:2px;line-height:1.45}
.proposal .pc .impact{font-family:"JetBrains Mono",monospace;font-size:.64rem;color:var(--green);margin-top:6px;display:inline-block}
.proposal .pa{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* page list (select) */
.pagelist{display:flex;flex-direction:column}
.prow{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line-2);font-size:.86rem}
.prow:last-child{border-bottom:0}
.prow .ck{width:19px;height:19px;border-radius:6px;flex-shrink:0;display:grid;place-items:center;font-size:.64rem;font-weight:700}
.prow .ck.on{background:var(--pine);color:var(--on-pine)} .prow .ck.off{border:1.5px solid var(--line)}
.prow .nm{flex:1;font-weight:500}
.prow .path{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--sage)}

/* compare split */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.compare .col .cap{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.8rem;font-weight:600}
.compare .col .cap .tag{font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.compare .col.before .cap .tag{background:var(--paper-2);color:var(--ink-soft)}
.compare .col.after .cap .tag{background:var(--go-bg);color:var(--go-fg)}

/* ---- right panel ---- */
.right{background:var(--surface);border-left:1px solid var(--line-2);display:flex;flex-direction:column;min-height:0}
.r-tabs{display:flex;padding:14px 16px 0;gap:18px;border-bottom:1px solid var(--line-2)}
.r-tab{font-size:.82rem;font-weight:600;padding:0 2px 12px;cursor:pointer;color:var(--sage);position:relative}
.r-tab.on{color:var(--ink)}
.r-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.feed{flex:1;overflow:auto;padding:16px}
.grp{font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin:4px 0 10px;display:flex;align-items:center;gap:8px}
.grp::after{content:"";flex:1;height:1px;background:var(--line-2)}
.card{background:var(--paper);border:1px solid var(--line-2);border-radius:12px;padding:12px;margin-bottom:10px;position:relative}
.card .tag{position:absolute;left:-8px;top:11px;width:20px;height:20px;border-radius:50% 50% 50% 2px;display:grid;place-items:center;font-size:.6rem;font-weight:700;font-family:"JetBrains Mono",monospace;color:#fff;border:2px solid var(--surface)}
.card.ai .tag{background:var(--gold)} .card.team .tag{background:var(--moss)}
.card .who{display:flex;justify-content:space-between;font-size:.7rem;color:var(--sage);margin-bottom:5px}
.card .who b{color:var(--ink);font-weight:600}
.card .on-el{font-size:.66rem;font-family:"JetBrains Mono",monospace;color:var(--moss);background:rgba(46,94,78,.08);padding:2px 7px;border-radius:6px;display:inline-block;margin-bottom:6px}
.card .txt{font-size:.83rem;color:var(--ink)}
.event{display:flex;gap:11px;margin-bottom:14px}
.event .ed{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:.72rem;color:#fff}
.event .ed.deploy{background:var(--pine)} .event .ed.ai{background:var(--gold)} .event .ed.edit{background:var(--moss)} .event .ed.sys{background:var(--sage)}
.event .et .l{font-size:.84rem;font-weight:600} .event .et .l b{font-weight:600;color:var(--moss)}
.event .et .s{font-size:.72rem;color:var(--sage)}
.runbar{padding:14px 16px;border-top:1px solid var(--line-2);background:var(--paper)}
.runbar .plan{font-size:.72rem;color:var(--ink-soft);margin-bottom:9px;line-height:1.5}.runbar .plan b{color:var(--wait-fg)}
.runbtn{width:100%;font-family:inherit;font-size:.84rem;font-weight:600;border:none;border-radius:11px;padding:11px;cursor:pointer;background:var(--pine);color:var(--on-pine);transition:.15s;display:flex;align-items:center;justify-content:center;gap:7px}
.runbtn:hover{background:var(--pine-hover)}