:root{
    --ink:#15171a; --ink-2:#3c4046; --muted:#72767c; --faint:#9a9ea3;
    --bg:#f4f3ef; --panel:#fff; --line:#e4e2db; --line-2:#eeede8;
    --accent:#166b5e; --accent-soft:#e7f0ee; --accent-line:#bcd6d0;
    --warn:#9a5b12; --warn-soft:#fbf0e1;
    --danger:#a72c22; --danger-soft:#fbeceb;
    --sb:#171a1d; --sb-2:#22262a; --sb-ink:#d7d8d4;
    --shadow:0 1px 2px rgba(20,22,25,.06), 0 8px 24px -18px rgba(20,22,25,.4);
    --radius:10px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{font-family:"Inter Tight","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
  button{font:inherit;color:inherit;cursor:pointer}
  a{color:inherit}
  .app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
  /* ---------- sidebar ---------- */
  .sb{background:var(--sb);color:var(--sb-ink);padding:14px 10px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto}
  .brand{display:flex;align-items:center;gap:9px;padding:4px 8px 10px}
  .mark{width:24px;height:24px;border-radius:6px;background:#e8e5da;color:#171a1d;display:grid;place-items:center;font-weight:700;font-size:11px}
  .brand b{font-size:12.5px;color:#f2f1ec;font-weight:600}
  .brand span{display:block;font-size:9.5px;color:#8d918f;letter-spacing:.08em;text-transform:uppercase}
  .nav-label{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#7d817f;padding:0 10px 6px}
  .nav{display:flex;flex-direction:column;gap:1px}
  .nav a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;color:#c3c5c1;text-decoration:none;font-size:12.5px}
  .nav a:hover{background:#1e2225;color:#fff}
  .nav a.on{background:var(--sb-2);color:#fff;box-shadow:inset 0 0 0 1px #2c3135}
  .nav a .dot{width:6px;height:6px;border-radius:50%;background:#4b5150;flex:none}
  .nav a .cnt{margin-left:auto;font-size:10.5px;color:#8d918f;font-variant-numeric:tabular-nums}
  .sb-foot{margin-top:auto;border-top:1px solid #2a2e32;padding:10px 10px 12px;display:flex;gap:9px;align-items:center}
  .sb-foot .who{font-size:11.5px;color:#c3c5c1;line-height:1.25}
  .sb-foot .who small{display:block;color:#84898a;font-size:10px}
  /* ---------- shell ---------- */
  main{min-width:0;padding-bottom:50px}
  .topbar{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line);background:#fbfaf7;position:sticky;top:0;z-index:20}
  .crumb{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crumb b{color:var(--ink);font-weight:600}
  .grow{flex:1}
  .btn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 11px;font-size:12px;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .btn:hover{border-color:#cfccc2;background:#fdfcf9}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn.primary:hover{background:#12594e}
  .btn.ghost{background:transparent}
  .btn.sm{padding:4px 9px;font-size:11.5px}
  .btn[disabled]{opacity:.45;cursor:not-allowed}
  .av{width:22px;height:22px;border-radius:50%;background:#e6e3d8;color:#4b4a44;display:grid;place-items:center;font-size:9.5px;font-weight:600;border:1.5px solid #fff;flex:none}
  .av.s{width:18px;height:18px;font-size:8.5px}
  .stack{display:flex}.stack .av{margin-left:-6px}.stack .av:first-child{margin-left:0}
  .pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;padding:2px 7px;border-radius:20px;border:1px solid var(--line);color:var(--muted);background:#fff;white-space:nowrap}
  .pill.due{color:var(--warn);background:var(--warn-soft);border-color:#eeddc2}
  .pill.late{color:var(--danger);background:var(--danger-soft);border-color:#f0d3d0}
  .pill.none{color:var(--faint);border-style:dashed}
  .pill.ok{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
  .pill.ai{color:#4b4a44;background:#efeee7;border-color:#e0ded3}
  .tag{display:inline-flex;font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:#f2f1ea;border-radius:4px;padding:1px 5px}
  .code{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#3d3f42}
  .proto{position:fixed;right:12px;bottom:12px;z-index:60;background:#1b1e21;color:#d9dbd6;border-radius:20px;padding:6px 12px;font-size:10.5px;letter-spacing:.02em;box-shadow:0 6px 20px -8px rgba(0,0,0,.5);display:flex;gap:8px;align-items:center}
  .proto b{color:#fff;font-weight:600}
  /* ---------- generic ---------- */
  .hdr{padding:16px 20px 0}
  .hdr h1{margin:0;font-size:19px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .hdr .sub{color:var(--muted);font-size:12px;margin-top:3px}
  .tabs{display:flex;gap:2px;margin:12px 0 0;border-bottom:1px solid var(--line);overflow-x:auto}
  .tabs a{padding:7px 11px;font-size:12.5px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
  .tabs a.on{color:var(--ink);font-weight:600;border-color:var(--accent)}
  .tabs a .n{font-size:10.5px;color:var(--faint);margin-left:4px}
  .toolbar{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid var(--line);background:#fbfaf7;flex-wrap:wrap}
  .wrap{padding:14px 20px}
  .cardpanel{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
  .panel-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
  .panel-h h2{margin:0;font-size:13px;font-weight:600}
  .panel-h .sub{color:var(--muted);font-size:11.5px}
  .empty{padding:22px 14px;color:var(--faint);font-size:12px;text-align:center}
  /* ---------- board ---------- */
  .board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:10px;padding:14px 20px 6px;align-items:start;overflow-x:auto}
  .col{background:#eeece5;border:1px solid #e6e3da;border-radius:10px;padding:8px;min-height:120px}
  .col.over{background:#e7ece8;border-color:var(--accent-line)}
  .col-h{display:flex;align-items:center;gap:7px;padding:2px 4px 8px}
  .col-h .nm{font-size:12px;font-weight:600}
  .col-h .n{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
  .col-h .plus{margin-left:auto;border:0;background:transparent;color:var(--faint);font-size:15px;line-height:1;padding:0 2px}
  .col-h .plus:hover{color:var(--accent)}
  .st{width:7px;height:7px;border-radius:2px;flex:none}
  .st.backlog{background:#a6a9ad}.st.todo{background:#8e9bb3}.st.in_progress{background:#3f7f8f}
  .st.in_review{background:#a58a4e}.st.done{background:#4f7f5c}
  .card{background:#fff;border:1px solid #e7e5dd;border-radius:8px;padding:9px 10px;margin-bottom:7px;box-shadow:var(--shadow);cursor:grab}
  .card:active{cursor:grabbing}
  .card.dragging{opacity:.4}
  .card.done{background:#fcfcfa}
  .card.done .t{color:#5c6166}
  .card .t{font-size:12.5px;line-height:1.35;font-weight:500;color:#1b1e22}
  .card .meta{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
  .card .foot{display:flex;align-items:center;gap:7px;margin-top:7px;color:var(--faint);font-size:10.5px}
  .card .foot .sp{flex:1}
  .cm{display:inline-flex;align-items:center;gap:4px}
  .cm::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;display:inline-block;opacity:.4;margin-right:1px}
  .addrow{width:100%;text-align:left;color:var(--faint);font-size:11.5px;padding:5px 6px;border:0;background:transparent;border-radius:6px}
  .addrow:hover{background:#e6e3da;color:var(--ink-2)}
  .boardnote{margin:2px 20px 0;color:var(--muted);font-size:11.5px}
  /* ---------- lists ---------- */
  .grp{padding:10px 14px 4px;display:flex;align-items:center;gap:8px}
  .grp .lbl{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .grp .n{font-size:10px;color:var(--faint);background:#f1f0e9;border-radius:20px;padding:1px 6px}
  .grp .hint{font-size:10.5px;color:var(--faint);margin-left:auto}
  .grp.late .lbl{color:var(--danger)}
  .row{display:grid;grid-template-columns:20px 1fr 130px 100px 96px 40px;gap:9px;align-items:center;padding:8px 14px;border-top:1px solid var(--line-2);font-size:12.5px}
  .row:hover{background:#fbfaf7}
  .row .ttl{font-weight:500;text-align:left;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:7px;min-width:0}
  .row .ttl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cbox{width:14px;height:14px;border:1.4px solid #c8c6bd;border-radius:4px;background:#fff;padding:0;display:grid;place-items:center;color:#fff;font-size:9px}
  .cbox.done{background:var(--accent);border-color:var(--accent)}
  .row .cli{font-size:11.5px;color:var(--muted)}
  .row .due{font-size:11.5px;font-variant-numeric:tabular-nums}
  .row .due.late{color:var(--danger);font-weight:500}
  table{width:100%;border-collapse:collapse;font-size:12px}
  th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 14px;border-bottom:1px solid var(--line-2);background:#fbfaf7}
  td{padding:8px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
  tr:last-child td{border-bottom:0}
  .state{font-size:10.5px;font-weight:600;border-radius:4px;padding:2px 6px;display:inline-block}
  .state.ok{background:var(--accent-soft);color:#155c51}
  .state.fail{background:var(--danger-soft);color:#8e241b}
  .state.wait{background:var(--warn-soft);color:#8a5210}
  /* ---------- home ---------- */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
  .kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;box-shadow:var(--shadow)}
  .kpi .k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .kpi .v{font-size:25px;font-weight:600;letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums}
  .kpi .v small{font-size:12.5px;color:var(--faint);font-weight:500;margin-left:2px}
  .kpi .d{font-size:11px;margin-top:4px;color:var(--muted)}
  .kpi .d.good{color:#155c51}.kpi .d.bad{color:var(--danger)}
  .two{display:grid;grid-template-columns:1.25fr .95fr;gap:12px;align-items:start}
  .kpis.three{grid-template-columns:repeat(3,1fr)}
  .att{list-style:none;margin:0;padding:0}
  .att li{display:grid;grid-template-columns:112px 1fr auto;gap:10px;padding:9px 14px;border-top:1px solid var(--line-2);align-items:center;font-size:12.5px}
  .att li:first-child{border-top:0}
  .att .why{font-size:11px;color:var(--muted);margin-top:2px}
  .chat{background:#f6f5f0;padding:12px}
  .msg{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;box-shadow:var(--shadow)}
  .msg .mh{display:flex;gap:8px;align-items:center;margin-bottom:7px}
  .msg .mh b{font-size:12px}
  .msg .mh span{font-size:10.5px;color:var(--faint)}
  .msg h4{margin:0 0 5px;font-size:12.5px}
  .msg ul{margin:0;padding-left:16px}
  .msg li{margin:4px 0;font-size:12px;color:var(--ink-2)}
  .msg .od{color:var(--danger);font-weight:600}
  .lk{color:#1a5fa8;text-decoration:underline;text-underline-offset:2px}
  /* ---------- meeting ---------- */
  .split{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:start}
  .field{border-top:1px solid var(--line-2);padding:11px 14px}
  .field .lb{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:4px}
  .mom{font-size:12.5px;color:var(--ink-2);line-height:1.6;white-space:pre-line}
  .file{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px dashed var(--line-2);font-size:12px}
  .file:first-of-type{border-top:0}
  .pdf{width:22px;height:26px;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;font-size:8px;font-weight:700;color:#8e241b;background:#fdf7f6;flex:none}
  .draft{border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px 12px;margin-bottom:9px;box-shadow:var(--shadow)}
  .draft.flag{border-color:#e7c9a3;background:#fffdf8}
  .draft.approved{border-color:var(--accent-line);background:#f6fbf9}
  .draft.rejected{opacity:.55}
  .draft .dh{display:flex;gap:8px;align-items:flex-start}
  .draft .dt{font-size:12.5px;font-weight:600;line-height:1.35}
  .draft .cf{font-size:9.5px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:1px 6px;margin-left:auto;white-space:nowrap}
  .draft .fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
  .inp{border:1px solid var(--line);border-radius:6px;background:#fbfaf7;padding:4px 7px;font-size:11.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
  .inp select,.inp input{border:0;background:transparent;font:inherit;color:inherit;width:100%;padding:1px 0}
  .inp select:focus,.inp input:focus{outline:none}
  .inp.unset{border-color:#e0b884;background:#fff8ee;color:#8a5210}
  .inp .lb{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
  .quote{margin-top:9px;border-left:2px solid #dcd9cf;padding:2px 0 2px 9px;font-size:11px;color:var(--muted);font-style:italic}
  .acts{display:flex;gap:6px;margin-top:10px;align-items:center;flex-wrap:wrap}
  .acts .sp{flex:1}
  .rej{color:var(--muted);font-size:11.5px;border:0;background:transparent}
  .banner{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);border:1px solid #eeddc2;border-radius:9px;padding:10px 12px;font-size:11.5px;color:#6f4510;margin-bottom:12px}
  .banner.bad{background:var(--danger-soft);border-color:#f0d3d0;color:#7d241c}
  .banner.ok{background:var(--accent-soft);border-color:var(--accent-line);color:#124d44}
  /* ---------- drawer / modal ---------- */
  .overlay{position:fixed;inset:0;background:rgba(20,22,25,.35);z-index:40;display:none}
  .overlay.on{display:block}
  .drawer{position:fixed;top:0;right:0;width:min(430px,100%);height:100%;background:#fff;z-index:50;box-shadow:-12px 0 40px -20px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .18s ease;display:flex;flex-direction:column}
  .drawer.on{transform:none}
  .drawer-h{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start}
  .drawer-h h3{margin:0;font-size:14px;line-height:1.35;font-weight:600}
  .drawer-b{overflow-y:auto;padding:14px 16px;flex:1}
  .drawer-f{border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:8px}
  .lbl2{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:14px 0 5px}
  .lbl2:first-child{margin-top:0}
  .comment{padding:8px 0;border-top:1px solid var(--line-2);font-size:12px}
  .comment:first-child{border-top:0}
  .comment .who{font-weight:600;font-size:11.5px}
  .comment .when{color:var(--faint);font-size:10.5px;margin-left:6px}
  .audit{font-size:11px;color:var(--muted);padding:5px 0;border-top:1px dashed var(--line-2)}
  input[type=text],input[type=password],input[type=date],textarea,select{font:inherit;border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:#fff;width:100%;color:var(--ink)}
  input:focus,textarea:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent-line)}
  .frm{display:grid;gap:9px}
  .frm label{font-size:11px;color:var(--muted);font-weight:600}
  .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:56px;background:#1b1e21;color:#f0efe9;padding:9px 14px;border-radius:8px;font-size:12px;z-index:70;opacity:0;pointer-events:none;transition:opacity .2s;max-width:min(560px,90vw);text-align:center}
  .toast.on{opacity:1}
  /* ---------- auth ---------- */
  .auth{min-height:100vh;display:grid;place-items:center;background:#f4f3ef;padding:20px}
  .auth-card{width:min(380px,100%);background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 20px 60px -40px rgba(0,0,0,.5)}
  .auth-card .mark{width:32px;height:32px;font-size:13px;background:#171a1d;color:#f0efe9;margin-bottom:12px}
  .auth-card h1{margin:0 0 4px;font-size:17px}
  .auth-card p{margin:0 0 14px;color:var(--muted);font-size:11.5px}
  .hint-box{background:#f7f6f1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--muted);margin-top:10px}
  @media (max-width:1080px){
    .kpis{grid-template-columns:1fr 1fr}
    .two{grid-template-columns:1fr}
    .split{grid-template-columns:1fr}
  }
  @media (max-width:860px){
    .app{grid-template-columns:1fr}
    .topbar{padding-left:54px}
    .topbar .crumb{width:100%;order:-1}
    .hdr h1{font-size:17px}
    /* sidebar becomes a drawer reachable from the burger */
    .sb{position:fixed;top:0;left:0;bottom:0;width:252px;height:100vh;
        transform:translateX(-100%);transition:transform .18s ease;z-index:90;
        flex-direction:column;align-items:stretch;gap:18px;overflow-y:auto;padding:14px 10px}
    body.navopen .sb{transform:none}
    body.navopen .navscrim{display:block}
    .burger{display:grid}
    .sb .brand div{display:block}
    .sb .nav-label{display:block}
    .sb .nav{flex-direction:column;gap:2px}
    .sb .nav a{padding:7px 8px;white-space:normal}
    .nav a .cnt{display:inline-flex}
    .sb-foot{margin-top:auto;border-top:1px solid #2a2e32;padding:10px 10px 12px}
    .sb-foot .who{display:block}
    .board{grid-template-columns:repeat(5,minmax(230px,1fr))}
    .row{grid-template-columns:20px 1fr 88px;row-gap:4px}
    .row .cli,.row .cm{display:none}
    .drawer{width:100%}
  }

/* ---- mobile navigation ---- */
.burger{display:none;position:fixed;top:9px;left:10px;z-index:95;width:34px;height:34px;
        border:0;border-radius:9px;background:#171a1d;color:#fff;font-size:15px;line-height:1;
        place-items:center;cursor:pointer}
.navscrim{display:none;position:fixed;inset:0;background:rgba(20,20,18,.38);z-index:85}

/* ---- server-rendered additions (M1) ---- */
.error{background:#fbeceb;border:1px solid #f0d3d0;color:#7d241c;border-radius:8px;padding:8px 10px;font-size:12px;margin-bottom:8px}
.muted{color:#72767c;font-size:11.5px}
.stack-v{display:flex;flex-direction:column;gap:8px}
form.inline{display:inline}
select.sm,p.sm{font-size:11.5px;padding:3px 6px}
.board-scroll{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:10px;padding:14px 20px 6px;align-items:start;overflow-x:auto}
.card form{margin:6px 0 0}
.card select{width:100%;font-size:11px;padding:3px 5px;border-radius:6px;border:1px solid #e4e2db;background:#fbfaf7}

/* visible affordance for the task page (mobile has no hover) */
.card .t a{color:inherit;text-decoration:none}
.card .t a:hover{text-decoration:underline}
.cardlink{font-size:10.5px;color:#166b5e;text-decoration:none;border:1px solid #bcd6d0;
          background:#e7f0ee;border-radius:20px;padding:1px 7px;margin-left:6px;white-space:nowrap}
.cardlink:hover{background:#d7e9e5}

/* high priority is the one label that must shout */
.pill.hi{color:#a72c22;background:#fbeceb;border-color:#f0d3d0;font-weight:600}
.pill.hi::before{content:"";width:4px;height:4px;border-radius:50%;background:#a72c22;display:inline-block}

/* keep five columns inside the viewport on desktop; inputs must not force width */
.board{grid-template-columns:repeat(5,minmax(0,1fr))}
.col{min-width:0}
.col input,.col select,.col textarea,.col button{min-width:0;max-width:100%}
@media (max-width:860px){ .board{grid-template-columns:repeat(5,minmax(230px,1fr))} }

/* trello-style dragging */
.card{cursor:grab}
.card:active{cursor:grabbing}
.card.dragging{opacity:.35;transform:rotate(-1deg)}
.col.over{background:#e7ece8;border-color:#bcd6d0;box-shadow:inset 0 0 0 1px #bcd6d0}
/* drag is the desktop interaction; the dropdown is the touch fallback */
.card .moveform{display:none}
@media (hover:none){ .card .moveform{display:block} }

/* single buttons inside a stacked form should not stretch */
.frm > button{justify-self:start;width:max-content;min-width:0}
.frm > button.btn.primary{padding-left:18px;padding-right:18px}

/* password change lives with the account, not in the workspace nav */
.sb-foot .who a{color:#9aa3a0;text-decoration:none;border-bottom:1px dotted #4b5150}
.sb-foot .who a:hover{color:#fff}
.sb-foot a.av{text-decoration:none;border:0}

/* clear-action button: blue, unmistakable */
.btn.blue{background:#1a5fa8;border-color:#1a5fa8;color:#fff}
.btn.blue:hover{background:#164e8a;border-color:#164e8a;color:#fff}

/* ---------- admin area ---------- */
.admintabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:var(--shadow)}
.admintabs a{font-size:12px;padding:6px 11px;border-radius:7px;color:var(--muted);text-decoration:none}
.admintabs a:hover{background:#f6f5ef;color:var(--ink)}
.admintabs a.on{background:var(--ink);color:#fff;font-weight:500}
a.admincard{display:block;text-decoration:none;color:inherit;transition:border-color .12s}
a.admincard:hover{border-color:#cfccc2}

/* mobile fixes: the desktop defaults below the media query were winning */
@media (max-width:860px){
  .burger{display:grid}
  .toolbar{padding:10px 14px}
  .toolbar form[action^="/papan/"]{flex:1 1 100%;order:5}
  .toolbar .pill{display:none}
  .board{padding-left:14px;padding-right:14px}
  .wrap{padding:12px 14px}
  .hdr{padding-left:14px;padding-right:14px}
}

@media (max-width:860px){
  .hdr .sub{white-space:normal}
  .sb{padding-bottom:20px}
  .brand{align-items:center}
  .brand .mark{flex:0 0 26px;width:26px;height:26px;font-size:11px}
  .sb-foot{padding-bottom:16px}
}

@media (max-width:860px){
  /* the 24px mark renders as a blob at this size; the wordmark carries the brand */
  .brand .mark{display:none}
  .brand{padding:2px 8px 6px}
}

/* meeting filters */
.meetfilter{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;margin-bottom:12px;
            background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 8px;box-shadow:var(--shadow)}
.meetfilter input[type=text]{width:auto;flex:1 1 220px;min-width:160px;font-size:12px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:#fff}
.meetfilter select{width:auto;flex:0 0 auto;min-width:120px;font-size:12px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:#fff}
.meetfilter .btn{flex:0 0 auto}
@media (max-width:860px){
  .meetfilter{flex-wrap:wrap}
  .meetfilter input[type=text]{flex:1 1 100%}
  .meetfilter select{flex:1 1 calc(50% - 4px);min-width:0}
}

@media (max-width:860px){
  .kpis.three{grid-template-columns:1fr 1fr}
  .topbar{padding-right:14px}
  .topbar .btn{flex:0 0 auto}
}
@media (max-width:520px){
  .kpis.three{grid-template-columns:1fr}
}

/* ask-the-minutes strip on the meeting page */
.askstrip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;
          box-shadow:var(--shadow);margin-bottom:12px}
.askstrip form{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.askstrip input[type=text]{flex:1 1 auto;width:auto;font-size:12.5px;padding:8px 10px;
                           border:1px solid var(--line);border-radius:8px;background:#fff}
.askstrip .hint{font-size:11px;color:var(--faint);margin-top:6px}
@media (max-width:860px){ .askstrip form{flex-wrap:wrap} .askstrip input[type=text]{flex:1 1 100%} }

/* ---------- floating assistant ---------- */
.ai-fab{position:fixed;right:18px;bottom:18px;z-index:120;width:52px;height:52px;border:0;border-radius:50%;
        background:linear-gradient(135deg,#6d5efc,#b44bf0);color:#fff;display:grid;place-items:center;
        cursor:pointer;box-shadow:0 10px 24px -10px rgba(80,50,200,.7);gap:0}
.ai-fab .ai-dot{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(140,90,240,.5);
        animation:aiPulse 2.6s infinite}
.ai-fab .ai-txt{font-size:13px;font-weight:700;letter-spacing:.02em}
.ai-fab.hidden{display:none}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(140,90,240,.45)}70%{box-shadow:0 0 0 14px rgba(140,90,240,0)}100%{box-shadow:0 0 0 0 rgba(140,90,240,0)}}

.ai-panel{position:fixed;right:0;top:0;bottom:0;width:390px;max-width:100%;z-index:130;background:#fff;
        border-left:1px solid var(--line);box-shadow:-18px 0 40px -30px rgba(0,0,0,.5);
        display:flex;flex-direction:column;transform:translateX(102%);transition:transform .2s ease}
.ai-panel.on{transform:none}
.ai-head{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line-2)}
.ai-head b{font-size:13px;display:block}
.ai-head small{font-size:10.5px;color:var(--muted)}
.ai-head .ai-x{margin-left:auto;border:0;background:#f4f3ec;border-radius:8px;width:28px;height:28px;
        font-size:16px;line-height:1;color:var(--muted);cursor:pointer}
.ai-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fbfaf7}
.ai-msg{max-width:88%;font-size:12.5px;line-height:1.55;padding:9px 11px;border-radius:12px;white-space:pre-wrap}
.ai-msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.ai-msg.me{background:var(--ink);color:#f4f3ec;align-self:flex-end;border-bottom-right-radius:4px}
.ai-msg.err{border-color:#f0d3d0;background:#fbeceb;color:#8e241b}
.ai-msg.thinking{color:var(--faint);font-style:italic}
.ai-form{display:flex;gap:7px;padding:10px;border-top:1px solid var(--line-2);background:#fff}
.ai-form input[type=text]{flex:1;width:auto;font-size:12.5px;padding:9px 11px;border:1px solid var(--line);
        border-radius:9px;background:#fff}
.ai-form button{width:36px;height:36px;border:0;border-radius:9px;background:var(--ink);color:#fff;
        font-size:15px;cursor:pointer}
@media (max-width:520px){
  .ai-panel{width:100%}
  .ai-fab{right:14px;bottom:14px}
}

.ai-foot{padding:7px 12px 0;font-size:10.5px;color:var(--faint);background:#fff;border-top:1px solid var(--line-2)}
.ai-foot a{color:#166b5e}

/* language switcher */
.langsw{display:flex;gap:3px;margin-left:auto;align-self:flex-start}
.langsw a{font-size:10px;font-weight:600;letter-spacing:.04em;color:#84898a;text-decoration:none;
          border:1px solid #2f3337;border-radius:5px;padding:2px 5px;line-height:1.3}
.langsw a.on{background:#e8e5da;color:#171a1d;border-color:#e8e5da}
@media (max-width:860px){ .langsw{margin-left:0} }

/* keep the account block readable now that a language switch lives there */
.sb-foot{flex-wrap:wrap;row-gap:6px}
.sb-foot .langsw{order:-1;flex-basis:100%;margin:0}
.sb-foot .who{flex:1 1 auto;min-width:0}
.sb-foot .btn{flex:0 0 auto}

/* profile rows */
.prow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.prow:last-child{border-bottom:0}
.prow span{color:var(--muted)}
.prow b{font-weight:600;text-align:right}

/* admin people: edit fields on one line, actions beneath */
.rowedit form{display:flex;gap:5px;align-items:center;flex-wrap:nowrap}
.rowedit input[type=text]{width:110px;font-size:11px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}
.rowedit input[type=date]{width:122px;font-size:11px;padding:3px 5px;border:1px solid var(--line);border-radius:6px;background:#fff}
.rowedit select{width:auto;font-size:11px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}
.rowacts{display:flex;gap:6px;margin-top:6px;justify-content:flex-end}
@media (max-width:1180px){ .rowedit form{flex-wrap:wrap} }

/* home notifications */
.notiflist{display:flex;flex-direction:column}
.notifitem{display:flex;gap:12px;align-items:baseline;padding:9px 14px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink);text-decoration:none}
.notifitem:first-child{border-top:0}
.notifitem:hover{background:var(--hover,#fbfaf7)}
.notifitem .ntxt{flex:1;line-height:1.45}
.notifitem b{font-weight:600}
.notifitem .nwhen{color:var(--faint);font-size:11px;white-space:nowrap}
.notifitem.new{background:#f7f9fd}
.notifitem.new .ntxt::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#1a5fa8;margin-right:7px;vertical-align:middle}

/* notifications card, same shell as the score cards */
.notifbox{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  margin-bottom:14px;overflow:hidden}
.notifbox-h{display:flex;gap:10px;align-items:baseline;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.notifbox-h .k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.notifbox-h .sub{font-size:11.5px;color:var(--faint)}
.notifempty{padding:14px;font-size:12px;color:var(--muted)}
.notifitem:first-child{border-top:0}

/* card footer: keep the owner name, comment count and Edit on one line */
.card .foot{flex-wrap:nowrap;overflow:hidden}
.card .foot > span:not(.sp){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card .foot .cm{flex:0 0 auto}
.card .foot .cardlink{flex:0 0 auto}
.card .foot .av{flex:0 0 auto}

.card .meta .cm{font-size:11px;color:var(--muted)}
.card .meta .cm::before{background:#1a5fa8;opacity:.55}

/* labels */
.lchips{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.lchip{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.01em;padding:2px 7px;
  border-radius:999px;border:1px solid transparent;line-height:1.5;white-space:nowrap}
.lchip.c-slate{background:#eef0f3;color:#4a5568;border-color:#dfe3ea}
.lchip.c-blue{background:#e8f0fb;color:#1a5fa8;border-color:#cfe0f5}
.lchip.c-green{background:#e9f5ee;color:#1c6b45;border-color:#cfe7d9}
.lchip.c-amber{background:#fdf3e2;color:#8a5a12;border-color:#f0e0c4}
.lchip.c-red{background:#fdecea;color:#a3342b;border-color:#f4d6d2}
.lchip.c-purple{background:#f2ecfb;color:#5b3a9e;border-color:#e2d6f5}

/* checklist */
.clbar{height:6px;background:#ecebe6;border-radius:999px;overflow:hidden}
.clbar span{display:block;height:100%;background:#1a5fa8;border-radius:999px;transition:width .2s}
.cllist{display:flex;flex-direction:column;gap:2px}
.clitem{display:flex;align-items:center;gap:9px;padding:6px 2px;border-bottom:1px solid var(--line-2)}
.clitem:last-child{border-bottom:0}
.cldot{width:17px;height:17px;border-radius:5px;border:1.5px solid #c9c7bf;background:#fff;
  font-size:11px;line-height:1;color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;flex:0 0 auto}
.clitem.done .cldot{background:#1a5fa8;border-color:#1a5fa8}
.cltext{flex:1;font-size:12.5px}
.clitem.done .cltext{color:var(--faint);text-decoration:line-through}
.clx{border:0;background:transparent;color:var(--faint);font-size:15px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:5px}
.clx:hover{background:#fdf2f0;color:var(--danger)}
.card .meta .cm.full{color:#1c6b45}

/* client performance */
.picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.picker select{font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  background:#fff;min-width:230px;font-weight:600;width:auto}
.meta-line{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.meta-line b{color:var(--ink-2);font-weight:600}
.kpis.perf{grid-template-columns:repeat(4,1fr)}
.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:10px;font-size:12px;margin-bottom:14px}
.banner.bad{background:var(--danger-soft);border:1px solid #f0d4d1;color:#7d241c}
.banner.warn{background:var(--warn-soft);border:1px solid #efdcc0;color:#7d4a0f}
.banner.muted{background:#f4f3ef;border:1px solid var(--line);color:var(--ink-2)}
.two{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
.perftabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.perftab{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px;font-size:11.5px;
  color:var(--ink-2);text-decoration:none}
.perftab.on{background:#1a5fa8;border-color:#1a5fa8;color:#fff;font-weight:600}
.shot{display:block;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fbfaf7}
.shot img{display:block;width:100%;height:auto}
.perfempty{border:1px dashed #d8d6ce;border-radius:10px;padding:34px 20px;text-align:center;
  color:var(--muted);font-size:12px;background:#fbfaf7}
.perfempty b{display:block;color:var(--ink-2);font-size:13px;margin-bottom:4px}
.hist{list-style:none;margin:0;padding:0}
.hist li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:12px}
.hist li:last-child{border-bottom:0}
.hist .when{width:118px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hist .what{color:var(--muted);font-size:11.5px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:12px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{font-weight:600;text-align:right}
@media (max-width:980px){ .two{grid-template-columns:1fr} .kpis.perf{grid-template-columns:1fr 1fr} }

@media (max-width:760px){
  .topbar .pill{display:none}
  .picker select{min-width:0;width:100%}
  .meta-line{margin-left:0!important;width:100%}
  .kpis.perf{grid-template-columns:1fr 1fr}
}

.kpicap{font-size:11px;color:var(--faint);margin:-4px 0 8px;letter-spacing:.01em}

/* meeting view */
.plist{display:flex;flex-direction:column}
.pitem{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.pitem:last-child{border-bottom:0}
.mombody{white-space:pre-wrap;font-size:12.5px;line-height:1.6;max-height:460px;overflow:auto;
  background:#fbfaf7;border:1px solid var(--line-2);border-radius:9px;padding:12px 14px}

/* meetings list: the View button sits on the same row, right-aligned */
.att li{grid-template-columns:112px 1fr auto auto}
@media (max-width:760px){ .att li{grid-template-columns:auto 1fr auto;row-gap:6px} }

/* keep the floating assistant from covering the last row of a short list */
.wrap{padding-bottom:84px}

.notifitem .cli{color:var(--muted);font-weight:600}