:root{
  --bg:#f6f5f2; --panel:#ffffff; --ink:#1d1b19; --ink2:#5b5752; --ink3:#8d8881; --line:#e6e3dd; --line2:#d6d2ca;
  --accent:#4b2e83; --accent-soft:#efe9f8; --danger:#b42318; --danger-soft:#fdecea; --ok:#1f7a4d; --ok-soft:#e5f4ec; --warn:#9a6700; --warn-soft:#fff4d6;
  --E:#7a3e9d; --E-soft:#f3e8f9; --S:#0f766e; --S-soft:#e0f3f1; --J:#b45309; --J-soft:#fdf0e1; --X:#475569; --X-soft:#eef1f5;
  --r:10px; --shadow:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
.app{display:flex;flex-direction:column;height:100vh}
header{display:flex;align-items:center;gap:20px;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.brand span{color:var(--accent)}
nav{display:flex;gap:2px}
nav a{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--ink2);font-weight:500}
nav a:hover{background:var(--bg)}
nav a.on{background:var(--accent-soft);color:var(--accent)}
nav a .ct{font-size:11px;background:var(--danger);color:#fff;border-radius:9px;padding:1px 6px;margin-left:5px}
.grow{flex:1}
.who{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.sync{font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink3)}
.dot.live{background:#22a06b}.dot.off{background:var(--danger)}
select,input[type=text],input[type=date],input[type=number],input[type=search],textarea{border:1px solid var(--line2);border-radius:8px;padding:6px 9px;background:#fff;min-width:0}
textarea{width:100%;resize:vertical}
select:focus,input:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.btn{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:6px 12px;font-weight:500}
.btn:hover{background:var(--bg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.small{padding:3px 9px;font-size:12px}
.btn.ghost{border-color:transparent;background:transparent}
.banner{padding:8px 20px;font-size:13px;background:var(--warn-soft);color:var(--warn);border-bottom:1px solid #f1e3b5;display:none}
.banner.show{display:block}
main{flex:1;overflow:hidden;display:flex}
.view{flex:1;overflow:auto;padding:16px 20px;display:none}
.view.on{display:block}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:4px 11px;font-size:13px;font-weight:500;color:var(--ink2)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.muted{color:var(--ink3)}
.small{font-size:12px}
/* owner badges */
.own{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.own::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.own.E{color:var(--E);background:var(--E-soft)}.own.S{color:var(--S);background:var(--S-soft)}.own.J{color:var(--J);background:var(--J-soft)}.own.X{color:var(--X);background:var(--X-soft)}
.own.open{color:var(--ink3);background:transparent;border:1px dashed var(--line2)}
.own.open::before{display:none}
/* board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;align-items:start;min-width:max-content}
.col{background:#efede8;border-radius:12px;padding:8px;min-height:120px;width:250px}
.col.drop{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.colh{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 8px;font-weight:600;font-size:13px}
.colh .n{color:var(--ink3);font-weight:500}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:9px 10px;margin-bottom:7px;box-shadow:var(--shadow);cursor:pointer;border-left:3px solid var(--line2)}
.card:hover{border-color:var(--line2)}
.card.E{border-left-color:var(--E)}.card.S{border-left-color:var(--S)}.card.J{border-left-color:var(--J)}.card.X{border-left-color:var(--X)}
.card .t{font-weight:600;line-height:1.3}
.card .p{font-size:12px;color:var(--ink2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .ns{font-size:12px;color:var(--ink2);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .f{display:flex;align-items:center;justify-content:space-between;margin-top:7px;gap:6px}
.due{font-size:11.5px;font-weight:600;color:var(--ink2)}
.due.over{color:var(--danger)}.due.today{color:var(--warn)}
.more{width:100%;margin-top:2px}
/* table */
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--ink2);font-weight:600;background:#faf9f7;position:sticky;top:0}
tr.row{cursor:pointer}
tr.row:hover td{background:#faf9f7}
.stage{font-size:12px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--bg);color:var(--ink2);white-space:nowrap}
.stage.won{background:var(--ok-soft);color:var(--ok)}.stage.lost{background:var(--danger-soft);color:var(--danger)}
.stage.meeting,.stage.proposal{background:var(--accent-soft);color:var(--accent)}
/* followups */
.fgroup{margin-bottom:22px}
.fgroup h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);margin:0 0 8px}
.fgroup h3.over{color:var(--danger)}
.frow{display:grid;grid-template-columns:110px 1fr 1.4fr 130px 110px;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:6px;cursor:pointer}
.frow:hover{border-color:var(--line2)}
/* team */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat .k{font-size:12px;color:var(--ink2);font-weight:500}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.note{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink2);font-size:13px;margin-top:14px}
/* drawer */
.scrim{position:fixed;inset:0;background:rgba(20,18,16,.25);display:none;z-index:20}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--panel);box-shadow:-8px 0 30px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .18s ease;z-index:21;display:flex;flex-direction:column}
.drawer.on{transform:none}
.dh{padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.dh h2{margin:0;font-size:19px;letter-spacing:-.01em}
.db{flex:1;overflow:auto;padding:16px 20px 30px}
.x{position:absolute;top:12px;right:14px;font-size:20px;line-height:1;border:0;background:transparent;color:var(--ink3);padding:6px}
.ownerbar{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:13px}
.ownerbar.E{background:var(--E-soft);color:var(--E)}.ownerbar.S{background:var(--S-soft);color:var(--S)}.ownerbar.J{background:var(--J-soft);color:var(--J)}.ownerbar.X{background:var(--X-soft);color:var(--X)}
.ownerbar.open{background:var(--bg);color:var(--ink2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.fld label{display:block;font-size:12px;color:var(--ink2);font-weight:500;margin-bottom:3px}
.fld select,.fld input{width:100%}
.sec{margin-top:20px}
.sec h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.kv{display:grid;grid-template-columns:120px 1fr;gap:4px 10px;font-size:13px}
.kv div:nth-child(odd){color:var(--ink3)}
.kv div{word-break:break-word}
.pre{white-space:pre-wrap;font-size:13px;background:#faf9f7;border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink2)}
.act{border-left:2px solid var(--line2);padding:2px 0 10px 12px;margin-left:4px;font-size:13px}
.act .m{font-size:12px;color:var(--ink3)}
.logf{display:grid;grid-template-columns:130px 130px 1fr;gap:8px;margin-bottom:8px}
.sib{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,18,16,.35);z-index:40}
.modal.on{display:flex}
.mbox{background:#fff;border-radius:14px;padding:20px 22px;width:min(460px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.2)}
.mbox h3{margin:0 0 8px;font-size:16px}
.mbox .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:9px;font-size:13px;opacity:0;transition:opacity .2s;z-index:50;pointer-events:none}
.toast.on{opacity:1}
.empty{padding:30px;text-align:center;color:var(--ink3)}

/* sign-in */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:60}
.gate[hidden]{display:none}
.gbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px;width:min(400px,92vw);box-shadow:var(--shadow)}
.gbox h1{font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
.gbox h1 span{color:var(--accent)}
.gbox p{color:var(--ink2);margin:0 0 16px}
.gbox input{width:100%;margin-bottom:10px;padding:9px 11px}
.gbox .btn{width:100%;padding:9px}
.gmsg{margin-top:12px;font-size:13px;color:var(--ink2)}
.gmsg.err{color:var(--danger)}

/* dropdowns: custom chevron with consistent right padding */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235b5752' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:12px 12px;
  cursor:pointer;
}
select::-ms-expand{display:none}

/* ---------- phones & small tablets ---------- */
.app{height:100vh;height:100dvh}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
@media (max-width: 760px){
  .hide-sm{display:none}
  body{font-size:15px}
  /* iOS zooms into inputs under 16px; keep them at 16 */
  input,select,textarea{font-size:16px}
  header{flex-wrap:wrap;gap:8px 10px;padding:10px 14px}
  .brand{order:1;font-size:16px}
  .grow{order:2}
  .sync{order:3}
  .who{order:4}
  .who #meName{display:none}
  #addBtn{order:2;padding:4px 10px;font-size:13px}
  .grow{display:none}
  .sync{margin-left:auto}
  .sync #syncTxt{display:none}
  nav{order:6;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -4px}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap;padding:7px 11px}
  .banner{padding:8px 14px}
  .view{padding:12px 14px}
  .toolbar{gap:8px}
  .toolbar input[type=search]{width:100%!important}
  .toolbar select{flex:1 1 45%}
  .chips{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}
  /* board: swipe between stage columns */
  .board{grid-auto-columns:84vw;scroll-snap-type:x mandatory;overflow-x:auto;min-width:0;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  #v-pipeline{overflow-x:hidden}
  .col{width:auto;scroll-snap-align:start}
  /* follow-ups: stack each row */
  .frow{grid-template-columns:1fr auto;grid-template-areas:"name due" "step step" "stage owner";gap:6px 10px}
  .frow>:nth-child(1){grid-area:due;justify-self:end}
  .frow>:nth-child(2){grid-area:name}
  .frow>:nth-child(3){grid-area:step}
  .frow>:nth-child(4){grid-area:stage;justify-self:start}
  .frow>:nth-child(5){grid-area:owner;justify-self:end}
  /* directory: keep name, owner, stage, claim */
  #v-directory th:nth-child(2),#v-directory td:nth-child(2),
  #v-directory th:nth-child(3),#v-directory td:nth-child(3),
  #v-directory th:nth-child(6),#v-directory td:nth-child(6){display:none}
  th,td{padding:8px}
  #v-directory td:first-child{min-width:170px;width:55%}
  #v-directory td:nth-child(5) .stage{white-space:normal}
  /* team summary */
  .stats{grid-template-columns:1fr 1fr;gap:8px}
  .stat{padding:10px 12px}
  .stat .v{font-size:21px}
  #tTable{min-width:520px}
  /* contact panel: full screen */
  .drawer{width:100vw}
  .dh{padding:14px 16px 10px}
  .db{padding:14px 16px 40px}
  .grid2{grid-template-columns:1fr}
  .logf{grid-template-columns:1fr 1fr}
  .logf>div{display:none}
  .kv{grid-template-columns:105px 1fr}
  .x{top:8px;right:8px;font-size:26px;padding:8px 12px}
  .mbox{padding:18px}
}

.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px;margin-bottom:4px;font-weight:600}
.gbtn[hidden]{display:none}
.gor{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:12px;margin:10px 0}
.gor[hidden]{display:none}
.gor::before,.gor::after{content:"";flex:1;height:1px;background:var(--line)}