/* Layout: dark ink sidebar + paper work surface; pipeline is a horizontal board of the site's process stages */
:root{
  --bg:#f5f4ef; --surface:#ffffff; --surface-2:#edf1ea; --ink:#12333d; --muted:#5a6d70; --line:#d7ded6;
  --accent:#285f4e; --accent-soft:#dfeae3; --accent-ink:#ffffff; --gold:#9c7533; --gold-soft:#f3ead8;
  --good:#2c7a4e; --good-soft:#e1f0e6; --warn:#a85a17; --warn-soft:#f8e9da; --bad:#a33a2c; --bad-soft:#f6e1dd;
  --side:#12333d; --side-fg:#dfe9e5; --side-muted:#8fa9a6; --side-active:#1d4552;
  --f-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-ui:"IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --shadow:0 1px 2px rgba(18,51,61,.06), 0 4px 14px rgba(18,51,61,.06);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e1a1e; --surface:#14252a; --surface-2:#1a2f35; --ink:#e3ebe8; --muted:#94a9a7; --line:#29404a;
  --accent:#74bb9e; --accent-soft:#1d3a33; --accent-ink:#0e1a1e; --gold:#d6ab61; --gold-soft:#33291a;
  --good:#7cc79a; --good-soft:#1b3427; --warn:#e5a066; --warn-soft:#3a2a1b; --bad:#ec8675; --bad-soft:#3d2320;
  --side:#0a1417; --side-fg:#dfe9e5; --side-muted:#7f9896; --side-active:#173038;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0e1a1e; --surface:#14252a; --surface-2:#1a2f35; --ink:#e3ebe8; --muted:#94a9a7; --line:#29404a;
  --accent:#74bb9e; --accent-soft:#1d3a33; --accent-ink:#0e1a1e; --gold:#d6ab61; --gold-soft:#33291a;
  --good:#7cc79a; --good-soft:#1b3427; --warn:#e5a066; --warn-soft:#3a2a1b; --bad:#ec8675; --bad-soft:#3d2320;
  --side:#0a1417; --side-fg:#dfe9e5; --side-muted:#7f9896; --side-active:#173038;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25); color-scheme:dark }

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:14px; line-height:1.5}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
h1,h2,h3{margin:0; text-wrap:balance}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ---------- Login ---------- */
.login{min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr}
.login-brand{background:var(--side); color:var(--side-fg); padding-block:56px; padding-left:max(40px, env(safe-area-inset-left,0px)); padding-right:40px; display:flex; flex-direction:column; justify-content:space-between; gap:40px}
.mono-mark{display:inline-grid; place-items:center; width:44px; height:44px; border:1.5px solid var(--side-fg); border-radius:3px; font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:.02em}
.login-brand h1{font-family:var(--f-display); font-size:clamp(30px,4vw,46px); line-height:1.08; font-weight:700; max-width:14ch; margin-top:28px}
.login-brand p{color:var(--side-muted); max-width:44ch; margin:16px 0 0}
.stage-strip{display:flex; flex-wrap:wrap; gap:6px; font-size:12px}
.stage-strip span{border:1px solid #2d5764; border-radius:2px; padding:3px 8px; color:var(--side-fg)}
.login-panel{display:grid; place-items:center; padding-block:40px; padding-left:24px; padding-right:max(24px, env(safe-area-inset-right,0px))}
.login-card{width:100%; max-width:380px; display:grid; gap:18px}
.login-card h2{font-family:var(--f-display); font-size:26px}
.login-card .muted{color:var(--muted); margin:0}
.gbtn{display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--surface); border-radius:6px; text-align:left; box-shadow:var(--shadow)}
.gbtn:hover{border-color:var(--accent)}
.gbtn .who{display:grid; line-height:1.3}
.gbtn .who small{color:var(--muted)}
.gdot{width:22px; height:22px; flex:none}
.login-note{font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px}


.field{display:grid; gap:5px}
.field label{font-size:12.5px; font-weight:600}
.field input{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:10px 12px; width:100%}
.field input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.err{color:var(--bad); font-size:12.5px; min-height:1em; margin:0}
.steps{display:flex; gap:8px; font-size:11.5px; color:var(--muted)}
.steps span{display:flex; align-items:center; gap:6px}
.steps i{font-style:normal; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); font-size:10.5px}
.steps .on{color:var(--ink); font-weight:600}
.steps .on i{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.acct{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--line); background:var(--surface); border-radius:6px}
.acct:hover:not([disabled]){border-color:var(--accent)}
.acct[disabled]{opacity:.55; cursor:not-allowed}
.acct .who{display:grid; line-height:1.3; flex:1; min-width:0}
.acct .who small{color:var(--muted); overflow-wrap:anywhere}
.linkbtn{background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-size:13px}
.quick{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--muted); align-items:center}
@media (max-width:760px){  }
/* ---------- App shell ---------- */
.app{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100%}
.side{background:var(--side); color:var(--side-fg); display:flex; flex-direction:column; gap:22px; padding-block:22px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:16px; position:sticky; top:0; height:100vh}
.side-brand{display:flex; align-items:center; gap:10px; padding-inline:6px}
.side-brand b{font-family:var(--f-display); font-size:17px; line-height:1.15; display:block}
.side-brand small{color:var(--side-muted); font-size:11px; letter-spacing:.04em}
.nav{display:grid; gap:2px}
.nav a{display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--side-fg); text-decoration:none; padding:8px 10px; border-radius:5px; font-weight:500}
.nav a:hover{background:var(--side-active)}
.nav a.on{background:var(--side-active); box-shadow:inset 2px 0 0 var(--gold)}
.nav .count{font-family:var(--f-mono); font-size:11px; background:var(--gold); color:#14252a; border-radius:9px; padding:0 7px}
.side-foot{margin-top:auto; display:grid; gap:10px; border-top:1px solid #2a4c57; padding-top:14px}
.me{display:flex; align-items:center; gap:10px}
.me small{display:block; color:var(--side-muted); font-size:11px}
.side-foot .links{display:flex; gap:12px; font-size:12px}
.side-foot button{background:none; border:0; padding:0; color:var(--side-muted); text-decoration:underline; text-underline-offset:3px}
.av{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:11px; font-weight:600; flex:none; letter-spacing:.02em}
.av.K{background:#c9dfd5; color:#12333d}
.av.P{background:#ead8b5; color:#3d2c0f}
.av.web{background:var(--surface-2); color:var(--muted); border:1px dashed var(--line)}
.av.sm{width:22px; height:22px; font-size:9.5px}

.main{min-width:0; display:flex; flex-direction:column}
.banner{background:var(--gold-soft); color:var(--ink); font-size:12px; padding-block:6px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); border-bottom:1px solid var(--line)}
.page{padding-block:26px 48px; padding-left:max(28px, env(safe-area-inset-left,0px)); padding-right:max(28px, env(safe-area-inset-right,0px)); display:grid; gap:22px; min-width:0}
.page-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px}
.page-head h1{font-family:var(--f-display); font-size:30px; line-height:1.15}
.eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600}
.crumb{font-size:13px; color:var(--muted)}
.crumb a{text-decoration:none}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:8px; min-width:0}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.panel-h h2{font-size:14px; font-weight:600}
.panel-b{padding:14px 16px}
.grid2{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:18px; align-items:start}
.stack{display:grid; gap:18px; min-width:0}

.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:grid; gap:4px}
.kpi .v{font-family:var(--f-display); font-size:28px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.kpi .l{font-size:12px; color:var(--muted)}
.kpi .d{font-size:12px; color:var(--good)}

.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:7px 12px; font-weight:500; font-size:13px; white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sm{padding:4px 9px; font-size:12px}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--surface)}
.seg button{border:0; background:none; padding:6px 12px; font-size:13px}
.seg button.on{background:var(--accent-soft); color:var(--accent); font-weight:600}

.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); white-space:nowrap}
.pill.good{background:var(--good-soft); color:var(--good)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.bad{background:var(--bad-soft); color:var(--bad)}
.pill.acc{background:var(--accent-soft); color:var(--accent)}
.pill.gold{background:var(--gold-soft); color:var(--gold)}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block}

/* lists */
.rows{display:grid}
.row{display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .grow{flex:1; min-width:0}
.row .t{font-weight:500}
.row .s{color:var(--muted); font-size:12.5px}
.row a.t{color:var(--ink); text-decoration:none}
.row a.t:hover{color:var(--accent); text-decoration:underline}
.task input{margin-top:3px; accent-color:var(--accent); width:16px; height:16px}
.task.done .t{text-decoration:line-through; color:var(--muted)}

.feed-ico{width:28px; height:28px; border-radius:6px; display:grid; place-items:center; background:var(--surface-2); color:var(--accent); flex:none}
.feed-ico svg{width:15px; height:15px}

/* table */
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:640px}
th{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td a{color:var(--ink); font-weight:500; text-decoration:none}
td a:hover{color:var(--accent); text-decoration:underline}
td .s{color:var(--muted); font-size:12.5px}
.r{text-align:right}

.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.search{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:7px 11px; min-width:0; width:240px; max-width:100%}

/* pipeline board */
.board-wrap{min-width:0}
.board{display:grid; gap:10px}
.col{background:var(--surface-2); border-radius:8px; display:grid; grid-template-columns:200px minmax(0,1fr); align-items:stretch; min-width:0}
.col-h{padding:12px 14px; display:grid; gap:3px; align-content:start; border-right:1px solid var(--line)}
.col-h .n{display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:600; font-size:13.5px}
.col-h .n span.c{font-family:var(--f-mono); font-size:12px; font-weight:600; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:0 8px}
.col-h .sum{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.col-h .step{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.col-b{padding:10px; display:flex; gap:10px; overflow-x:auto; align-items:stretch; min-width:0; min-height:96px}
.col-b .card{flex:0 0 232px; width:232px; min-width:0}
.col-b .lane-empty{align-self:center; color:var(--muted); font-size:12.5px; padding-inline:6px}
.col.over{outline:2px dashed var(--accent); outline-offset:-3px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:10px 11px; display:grid; gap:6px; align-content:start; cursor:grab; box-shadow:var(--shadow)}
.card:hover{border-color:var(--accent)}
.card.dragging{opacity:.45}
.card .ttl{font-weight:600; line-height:1.3; color:var(--ink); text-decoration:none}
.card .sub{font-size:12px; color:var(--muted)}
.card .meta{display:flex; align-items:center; justify-content:space-between; gap:6px}
.card .val{font-family:var(--f-mono); font-size:12.5px}
.col.closed{background:transparent; border:1px dashed var(--line)}

/* deal page */
.stepper{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.stepper button{border:0; background:var(--surface-2); color:var(--muted); padding:8px 6px 7px; font-size:11.5px; text-align:left; border-top:3px solid var(--line); line-height:1.25; border-radius:0 0 4px 4px}
.stepper button.done{border-top-color:var(--accent); color:var(--ink)}
.stepper button.cur{border-top-color:var(--gold); background:var(--gold-soft); color:var(--ink); font-weight:600}
.stepper button:hover{color:var(--ink)}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.fact{background:var(--surface); padding:11px 14px; display:grid; gap:2px}
.fact .k{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em}
.fact .v{font-family:var(--f-mono); font-size:14.5px; font-variant-numeric:tabular-nums}
.fact .v.txt{font-family:var(--f-ui)}

.logform{display:grid; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.logform .types{display:flex; flex-wrap:wrap; gap:6px}
.logform .types button{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:3px 10px; font-size:12px}
.logform .types button.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600}
.logform textarea{width:100%; min-height:62px; border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:var(--surface); resize:vertical}
.logform .act{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted)}

.doc-ico{width:30px; height:36px; border:1px solid var(--line); border-radius:3px; display:grid; place-items:end center; padding-bottom:3px; font-family:var(--f-mono); font-size:8.5px; font-weight:500; color:var(--muted); background:var(--surface); flex:none; position:relative}
.doc-ico::before{content:""; position:absolute; top:-1px; right:-1px; width:9px; height:9px; background:var(--surface-2); border-left:1px solid var(--line); border-bottom:1px solid var(--line)}
.dropzone{margin:12px 16px 14px; border:1.5px dashed var(--line); border-radius:7px; padding:12px; text-align:center; font-size:12.5px; color:var(--muted)}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:4px 11px; font-size:12.5px}
.chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}

.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; min-width:0; overflow-wrap:anywhere}

/* charts */
.chart svg{display:block; width:100%; height:auto}
.chart text{fill:var(--muted); font-family:var(--f-ui); font-size:11px}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .area{fill:var(--accent); opacity:.14}
.chart .line{stroke:var(--accent); stroke-width:2; fill:none}
.chart .pt{fill:var(--accent)}
.chart .lbl-strong{fill:var(--ink); font-weight:600}
.hbar{display:grid; gap:9px}
.hbar .b{display:grid; grid-template-columns:150px minmax(0,1fr) 36px; gap:10px; align-items:center; font-size:13px}
.hbar .track{height:12px; background:var(--surface-2); border-radius:2px; overflow:hidden}
.hbar .fill{height:100%; background:var(--accent); border-radius:2px}
.hbar .fill.alt{background:var(--gold)}
.hbar .n{font-family:var(--f-mono); text-align:right; font-size:12.5px}
.funnel{display:grid; gap:6px}
.funnel .f{display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; align-items:center; font-size:13px}
.funnel .bar{height:26px; background:var(--accent-soft); border-left:3px solid var(--accent); display:flex; align-items:center; padding-inline:8px; font-family:var(--f-mono); font-size:12px; min-width:58px; border-radius:0 3px 3px 0}
.funnel .conv{font-size:11px; color:var(--muted); grid-column:2; margin-top:-4px}
.note{font-size:12px; color:var(--muted)}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:6px; font-size:13px; box-shadow:var(--shadow); max-width:calc(100% - 32px); z-index:50}
.empty{padding:20px 16px; color:var(--muted); font-size:13px}

@media (max-width: 1080px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .grid2{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 760px){
  .login{grid-template-columns:1fr}
  .login-brand{padding-block:32px; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding-block:10px; padding-right:max(16px, env(safe-area-inset-right,0px))}
  .side-brand small{display:none}
  .nav{display:flex; overflow-x:auto; order:3; width:100%; gap:4px}
  .nav a{white-space:nowrap; padding:6px 10px}
  .side-foot{margin:0 0 0 auto; border:0; padding:0}
  .side-foot .me div, .side-foot .links{display:none}
  .page{padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:18px 40px}
  .page-head h1{font-size:24px}
  .kpi .v{font-size:22px}
  .stepper{grid-template-columns:repeat(4,minmax(0,1fr))}
  .col{grid-template-columns:minmax(0,1fr)}
  .col-h{border-right:0; border-bottom:1px solid var(--line); padding:10px 12px}
  .hbar .b{grid-template-columns:110px minmax(0,1fr) 30px}
  .funnel .f{grid-template-columns:90px minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }
/* real-app additions */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.form-grid .wide{grid-column:1/-1}
.inp{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:8px 10px; width:100%; min-width:0}
.inp:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
textarea.inp{min-height:70px; resize:vertical}
.fl{display:grid; gap:4px; font-size:12px; color:var(--muted); font-weight:600}
.sel-mini{border:1px solid var(--line); background:var(--surface); border-radius:999px; font-size:11.5px; padding:2px 6px}
.iconbtn{background:none; border:0; color:var(--muted); padding:2px 4px; font-size:12px}
.iconbtn:hover{color:var(--bad)}
.loading{display:grid; place-items:center; min-height:60vh; color:var(--muted)}
.sample-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.copybox{display:flex; gap:6px; align-items:center; font-family:var(--f-mono); font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:6px 8px; overflow-wrap:anywhere}
.card a.ttl::after{content:""; position:absolute; inset:0}
.card{position:relative}
.card .av, .card .pill{position:relative; z-index:1}