/* ============================================================
   Kindling Ops — Service Tickets. Design tokens from handoff.
   Display: Bricolage Grotesque · Body: Hanken Grotesk
   ============================================================ */
:root{
  --green:#16482B; --green-deep:#15291F; --green-mid:#20543A;
  --lime:#C3E834; --lime-soft:#DFF2A6; --lime-ink:#0E3B24;
  --bg:#EFEADD; --panel:#F6F2E9; --card:#fff;
  --bd:#E9E3D4; --bd2:#E4DECE; --hair:#F1EDE2;
  --ink:#15291F; --body:#5C6B62; --muted:#9AA69C; --muted2:#7C8A80;
  --on-dark:#F3EFE4; --on-dark2:#B9C7BD;
  --font:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --display:'Bricolage Grotesque',var(--font);
  --shadow-card:0 4px 16px rgba(0,0,0,.07);
  --shadow-lg:0 26px 60px rgba(0,0,0,.34);
  --shadow-modal:0 40px 90px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px}
::selection{background:var(--green);color:#fff}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:inherit;text-decoration:none}
.kd-scroll::-webkit-scrollbar{width:9px;height:9px}
.kd-scroll::-webkit-scrollbar-thumb{background:rgba(20,40,30,.16);border-radius:20px}
.kd-scroll::-webkit-scrollbar-track{background:transparent}
.disp{font-family:var(--display)}
.muted{color:var(--muted2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:11px;font-weight:700;font-size:14px;transition:all .14s;white-space:nowrap}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:#0f3a22}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-lime:hover{filter:brightness(.97)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--bd2)}
.btn-ghost:hover{border-color:var(--green)}
.btn-dark{background:var(--on-dark);color:var(--green-deep)}
.btn-sm{height:34px;padding:0 13px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.ic{display:inline-flex;vertical-align:middle;flex-shrink:0}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px}
.badge{display:grid;place-items:center;border-radius:9px;color:#fff;font-weight:700;font-size:12px;flex-shrink:0}
.avatar{display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;flex-shrink:0}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px}
.status-pill .dot{width:7px;height:7px;border-radius:50%}

/* ============================================================
   APP SHELL
   ============================================================ */
.shell{display:grid;grid-template-columns:252px 1fr;height:100vh;min-width:0}
.main{min-width:0}
.sidebar{background:var(--green-deep);color:var(--on-dark2);display:flex;flex-direction:column;padding:18px 14px;height:100vh;position:sticky;top:0}
.side-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px}
.side-brand img{width:34px;height:34px;object-fit:contain}
.side-brand .wm{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;color:#fff}
.side-brand .wm span{color:var(--lime)}

.switcher{margin:6px 0 8px}
.switcher .sw-lbl{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#6f8377;padding:8px 10px 6px}
.sw-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;color:var(--on-dark2);font-size:13.5px;font-weight:500;text-align:left;transition:background .12s}
.sw-item:hover{background:rgba(255,255,255,.05);color:#fff}
.sw-item.active{background:rgba(195,232,52,.16);color:#fff}
.sw-item .badge{width:26px;height:26px;font-size:10.5px;border-radius:8px}
.sw-item .cnt{margin-left:auto;font-size:11.5px;font-weight:700;color:#8fa295;background:rgba(255,255,255,.06);padding:1px 8px;border-radius:20px}

.side-nav{margin-top:6px;flex:1;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:10px;color:var(--on-dark2);font-weight:600;font-size:14px;text-align:left;transition:background .12s;margin-bottom:2px}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:rgba(195,232,52,.20);color:var(--on-dark)}
.nav-item.active .nav-dot{background:var(--lime)}
.nav-dot{width:7px;height:7px;border-radius:50%;background:transparent;margin-left:auto}
.nav-item .cnt{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.08);padding:1px 8px;border-radius:20px}

.side-id{border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:8px}
.id-chip{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px}
.id-chip .avatar{width:34px;height:34px;font-size:13px}
.id-chip .nm{color:#fff;font-weight:600;font-size:13px}
.id-chip .rl{color:#7f9387;font-size:11.5px}
.id-chip .out{margin-left:auto;color:#8fa295;padding:6px;border-radius:8px}
.id-chip .out:hover{color:#fff;background:rgba(255,255,255,.06)}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{background:var(--panel);border-bottom:1px solid var(--bd);padding:16px 28px;display:flex;align-items:center;gap:16px;flex-shrink:0}
.topbar h1{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0}
.topbar .sub{color:var(--body);font-size:13px;margin-top:2px}
.topbar .spacer{flex:1}
.seg{display:inline-flex;background:#EAE4D5;border-radius:10px;padding:3px;gap:2px}
.seg button{padding:6px 14px;border-radius:8px;font-weight:600;font-size:13px;color:var(--body)}
.seg button.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.content{flex:1;overflow-y:auto;padding:22px 28px 40px}

/* ---------- stat row ---------- */
.stat-row{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:12px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:16px 18px;text-align:left;transition:all .14s;cursor:pointer}
.stat:hover{border-color:var(--green);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.stat.active{border-color:var(--green);box-shadow:0 0 0 2px rgba(22,72,43,.12)}
.stat .k{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--body)}
.stat .k .dot{width:8px;height:8px;border-radius:50%}
.stat .v{font-family:var(--display);font-weight:800;font-size:30px;color:var(--ink);line-height:1;margin-top:8px}

.filter-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bd2);border-radius:20px;padding:6px 8px 6px 14px;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:16px}
.filter-chip .x{width:20px;height:20px;border-radius:50%;background:var(--hair);display:grid;place-items:center;color:var(--body)}
.filter-chip .x:hover{background:#e6ddc8}

/* ---------- board ---------- */
.board{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:14px;align-items:start}
.col-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 2px}
.col-head .lbl{font-weight:700;font-size:13px}
.col-head .n{font-size:11.5px;font-weight:700;color:var(--body);background:#fff;border:1px solid var(--bd);padding:1px 8px;border-radius:20px}
.col-body{display:flex;flex-direction:column;gap:10px}
.tcard{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;cursor:pointer;transition:all .14s;text-align:left;width:100%}
.tcard:hover{border-color:var(--green);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.tcard .code{font-size:11px;font-weight:700;color:var(--muted2);font-family:var(--display)}
.tcard .tt{font-weight:700;font-size:14px;color:var(--ink);margin:6px 0 0;line-height:1.35}
.tcard .row{display:flex;align-items:center;gap:8px;margin-top:11px}
.tcard .store{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--body);font-weight:600}
.tcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding-top:11px;border-top:1px solid var(--hair)}
.tcard .assignee{font-size:11.5px;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.sla{font-size:11.5px;font-weight:700}
.empty-col{border:1.5px dashed var(--bd2);border-radius:12px;padding:18px;text-align:center;color:var(--muted);font-size:12.5px}

/* ---------- list ---------- */
.tbl-wrap{background:var(--card);border:1px solid var(--bd);border-radius:16px;overflow:hidden}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;padding:14px 16px;background:#FBF8F0;border-bottom:1px solid var(--bd)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--hair);vertical-align:middle;font-size:13.5px}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:#FBF8F0}
.tbl .code{font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--muted2)}
.tbl .t-title{font-weight:700;color:var(--ink)}
.tbl .t-store{font-size:12px;color:var(--body);margin-top:2px}

/* ---------- empty ---------- */
.empty{text-align:center;padding:70px 20px;color:var(--body)}
.empty .eico{width:60px;height:60px;margin:0 auto 14px;border-radius:18px;background:#fff;border:1px solid var(--bd);display:grid;place-items:center;color:var(--muted2)}
.empty h3{color:var(--ink);margin:0 0 6px;font-family:var(--display);font-weight:700}

/* ============================================================
   DRAWER (right slide-over)
   ============================================================ */
.drawer-overlay{position:fixed;inset:0;background:rgba(15,25,20,.4);backdrop-filter:blur(2px);z-index:100000;animation:fade .15s ease}
.drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(1180px,96vw);background:var(--bg);box-shadow:var(--shadow-lg);z-index:100001;display:flex;flex-direction:column;overflow-x:hidden;animation:slidein .22s cubic-bezier(.4,0,.2,1)}
.drawer-topbar{position:relative;background:var(--card);border-bottom:1px solid var(--bd);padding:16px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.drawer-topbar .x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--body)}
.drawer-topbar .x:hover{background:var(--hair)}
.drawer-topbar .tb-main{min-width:0;flex:1;padding-right:40px}
.drawer-topbar .code{font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--muted2)}
.drawer-topbar h2{font-family:var(--display);font-weight:700;font-size:19px;margin:3px 0 0;line-height:1.25}
.drawer-topbar .meta{display:flex;flex-wrap:wrap;gap:8px}
.drawer-cols{flex:1;display:flex;min-height:0}
.drawer-left{width:38%;max-width:420px;min-width:280px;overflow-y:auto;padding:20px 22px;border-right:1px solid var(--bd);background:var(--card)}
.drawer-right{flex:1;min-width:0;display:flex;flex-direction:column}
.drawer.chat-max .drawer-left{display:none}
.drawer-grid{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13px}
.drawer-grid .k{color:var(--body)}
.drawer-grid .v{font-weight:600;color:var(--ink)}
.drawer-desc{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.55;color:#333;white-space:pre-wrap;margin-top:14px}
.hq-controls{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd)}
.hq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hq-grid label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);font-weight:700}
.hq-grid select{width:100%;border:1px solid var(--bd2);border-radius:9px;padding:9px 10px;background:#fff;color:var(--ink);font-weight:600;font-size:13px;outline:none}
.hq-grid select:focus{border-color:var(--green)}
.hq-actions{display:flex;gap:8px;margin-top:12px}
.hq-actions .btn{flex:1}
.drawer-tabs{display:flex;align-items:center;gap:4px;padding:0 22px;background:var(--card);border-bottom:1px solid var(--bd)}
.drawer-tab{padding:12px 4px;margin-right:16px;font-weight:700;font-size:13.5px;color:var(--body);border-bottom:2px solid transparent}
.drawer-tab.active{color:var(--green);border-bottom-color:var(--green)}
.chat-max-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;color:var(--body);padding:6px 12px;border:1px solid var(--bd2);border-radius:8px}
.chat-max-btn:hover{background:var(--hair);color:var(--ink)}
.drawer-body{flex:1;overflow-y:auto;padding:22px 26px}

/* chat */
.chat{display:flex;flex-direction:column;gap:14px;max-width:900px;margin:0 auto}
.msg{display:flex;gap:10px;max-width:min(88%,620px)}
.msg .avatar{width:30px;height:30px;font-size:11px}
.msg .bubble{background:var(--card);border:1px solid var(--bd);border-radius:4px 14px 14px 14px;padding:9px 13px;font-size:13.5px;line-height:1.5}
.msg .who{font-size:11.5px;font-weight:700;margin-bottom:3px}
.msg .tm{font-size:10.5px;color:var(--muted);margin-top:4px}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg.me .bubble{background:var(--green);color:#fff;border-color:var(--green);border-radius:14px 4px 14px 14px}
.msg.me .who{color:#cfe0d4}
.msg.vendor .bubble{background:#F0EAF7;border-color:#e3d8ef}
.composer{border-top:1px solid var(--bd);background:var(--card);padding:14px 26px;display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;border:1px solid var(--bd2);border-radius:12px;padding:11px 14px;resize:none;min-height:58px;line-height:1.5;font-size:14px;font-family:inherit;outline:none}
.composer textarea:focus{border-color:var(--green)}
.send-btn{height:44px;min-width:44px;padding:0 14px;flex:none;align-self:flex-end}

/* activity */
.tl-item{display:flex;gap:11px;margin-bottom:16px}
.tl-item .avatar{width:30px;height:30px;font-size:11px}
.tl-item .who{font-weight:700;font-size:13px}
.tl-item .tm{font-size:11px;color:var(--muted)}
.tl-item .tx{font-size:13.5px;color:#333;margin-top:4px;line-height:1.5}
.att-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--bd);border-radius:9px;padding:7px 11px;font-size:12px;color:var(--body);font-weight:600}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(15,25,20,.5);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:100010;padding:24px;animation:fade .15s ease}
.modal{background:var(--bg);border-radius:18px;box-shadow:var(--shadow-modal);width:100%;max-width:520px;max-height:92vh;overflow:auto;animation:pop .18s ease}
.modal-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--bd);background:var(--card)}
.modal-head h3{font-family:var(--display);font-weight:700;font-size:18px;margin:0}
.modal-head .x{margin-left:auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--body)}
.modal-head .x:hover{background:var(--hair)}
.modal-body{padding:20px 22px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--bd);background:var(--card);position:sticky;bottom:0}
.field{margin-bottom:15px}
.field label{display:block;font-weight:700;font-size:12.5px;margin-bottom:7px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--bd2);border-radius:11px;padding:12px 14px;background:#fff;outline:none;color:var(--ink)}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green)}
.chip-pick{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 13px;border-radius:20px;border:1px solid var(--bd2);font-size:13px;font-weight:600;color:var(--body);background:#fff}
.chip.on{border-color:var(--green);background:var(--lime-soft);color:var(--green)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.confirm-check{display:flex;gap:11px;align-items:flex-start;background:var(--lime-soft);border:1px solid #cfe89a;border-radius:12px;padding:14px;cursor:pointer;margin-top:2px}
.confirm-check input{margin-top:2px;width:18px;height:18px;flex-shrink:0;accent-color:var(--green);cursor:pointer}
.confirm-check span{font-size:13px;line-height:1.5;color:var(--lime-ink);font-weight:600}

/* ---------- toast ---------- */
.toast-stack{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px;z-index:100030}
.toast{display:flex;gap:11px;align-items:center;background:var(--green-deep);color:#fff;padding:13px 16px;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.3);max-width:340px;font-weight:600;font-size:13.5px;animation:slidein .25s ease}
.toast .ti{color:var(--lime)}

@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}}
.hide{display:none!important}

/* ---------- drawer controls: resolve / reopen ---------- */
.ctrl-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);font-weight:700;margin-bottom:8px}
.resolve-box{margin-top:14px;background:#E4F1E9;border:1px solid #c9e4d3;border-radius:12px;padding:12px 14px}
.resolve-box .rb-head{display:flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px;color:#2E8B57}
.resolve-box .rb-note{font-size:13.5px;color:#2f4a3a;margin-top:6px;line-height:1.5}
.reopen-box{margin-top:12px;background:#F8EFD9;border:1px solid #ecdcb0;border-radius:12px;padding:12px 14px}
.reopen-box .rb-head{display:flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px;color:#B7791F}
.reopen-box .rb-note{font-size:13.5px;color:#5a4a2a;margin-top:6px;line-height:1.5}
.confirm-banner{margin-top:14px;background:var(--lime-soft);border:1px solid #cfe89a;border-radius:12px;padding:14px}
.confirm-banner .cb-msg{font-weight:700;font-size:13.5px;color:var(--lime-ink);margin-bottom:10px}
.confirm-banner .cb-actions{display:flex;gap:8px}

/* ---------- mobile menu button (hidden on desktop) ---------- */
.hamburger{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--bd2);background:#fff;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0}
.kst-scrim{display:none}

/* (responsive @media queries live at the very end of this file so they
    override every base rule, including the landing-page styles below) */

/* ============================================================
   LANDING / LOGIN
   ============================================================ */
.landing{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.land-nav{display:flex;align-items:center;gap:12px;padding:20px 40px;max-width:1180px;margin:0 auto;width:100%}
.land-nav img{width:34px;height:34px}
.land-nav .wm{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--green-deep)}
.land-nav .wm span{color:var(--green)}
.land-nav .spacer{flex:1}
.land-hero{max-width:1180px;margin:0 auto;width:100%;padding:40px 40px 30px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.land-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--lime-soft);color:var(--lime-ink);font-weight:700;font-size:12.5px;padding:6px 13px;border-radius:20px;margin-bottom:20px}
.land-hero h1{font-family:var(--display);font-weight:800;font-size:52px;line-height:1.03;letter-spacing:-.025em;color:var(--green-deep);margin:0 0 18px}
.land-hero h1 em{font-style:normal;color:var(--green);position:relative}
.land-hero p.lead{font-size:17px;line-height:1.55;color:var(--body);max-width:460px;margin:0 0 26px}
.land-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-lg{height:52px;padding:0 26px;font-size:15px;border-radius:13px}
.land-hero .trust{margin-top:22px;color:var(--muted2);font-size:12.5px;display:flex;align-items:center;gap:8px}

.login-card{background:var(--card);border:1px solid var(--bd);border-radius:22px;box-shadow:var(--shadow-card);padding:30px}
.login-card h2{font-family:var(--display);font-weight:700;font-size:22px;margin:0 0 4px}
.login-card .sub{color:var(--body);font-size:13.5px;margin-bottom:20px}
.role-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#EEE9DB;border-radius:13px;padding:5px;margin-bottom:18px}
.role-toggle button{padding:11px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--body)}
.role-toggle button.on{background:#fff;color:var(--green);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.feat-strip{background:var(--green-deep);color:var(--on-dark)}
.feat-wrap{max-width:1180px;margin:0 auto;padding:54px 40px}
.feat-wrap h3{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--lime);margin:0 0 6px}
.feat-wrap h2{font-family:var(--display);font-weight:700;font-size:30px;color:#fff;margin:0 0 30px;max-width:560px;line-height:1.15}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px}
.feat-card .fi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;color:#fff}
.feat-card h4{font-family:var(--display);font-weight:700;font-size:16px;color:#fff;margin:0 0 6px}
.feat-card p{font-size:13px;line-height:1.5;color:var(--on-dark2);margin:0}
.land-foot{max-width:1180px;margin:0 auto;width:100%;padding:26px 40px;color:var(--muted2);font-size:12.5px;display:flex;align-items:center;gap:10px}

/* ============================================================
   ATTACHMENTS / MEDIA
   ============================================================ */
.uploader{border:1.5px dashed var(--bd2);border-radius:13px;padding:18px;text-align:center;color:var(--body);cursor:pointer;transition:all .14s;background:#fff}
.uploader:hover{border-color:var(--green);background:#FBFBF6}
.uploader .up-ic{width:40px;height:40px;border-radius:11px;background:var(--lime-soft);color:var(--lime-ink);display:grid;place-items:center;margin:0 auto 10px}
.uploader b{color:var(--green);font-weight:700}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.thumb{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;border:1px solid var(--bd);background:#EEE9DB;cursor:pointer}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .vlabel{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,25,20,.4);color:#fff}
.thumb .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(15,25,20,.7);color:#fff;display:grid;place-items:center;z-index:2}
.thumb .rm:hover{background:#C4442E}
.files-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.file-card{border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;transition:all .14s}
.file-card:hover{border-color:var(--green);box-shadow:var(--shadow-card)}
.file-card .media{aspect-ratio:4/3;background:#EEE9DB;position:relative}
.file-card .media img,.file-card .media video{width:100%;height:100%;object-fit:cover}
.file-card .media .vlabel{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,25,20,.35);color:#fff}
.file-card .fn{padding:8px 10px;font-size:11.5px;font-weight:600;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* document / data-file attachments (Excel, PDF, etc.) */
.filethumb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#EEE9DB;color:var(--green);padding:6px}
.filethumb .fic{color:var(--green);opacity:.9;line-height:0}
.filethumb .fext{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--green);background:var(--lime);padding:2px 7px;border-radius:5px}
/* layered confirm popup (Website / Order issues) — stronger backdrop so the modal beneath is fully dimmed */
.slack-check-overlay{background:rgba(15,25,20,.72)}
/* head-office delete controls on chat bubbles + file cards */
.msg .bubble{position:relative}
.msg-del{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--bd);color:#C4442E;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s;box-shadow:0 1px 4px rgba(15,25,20,.15);z-index:2}
.msg:hover .msg-del,.msg-del:focus{opacity:1}
.msg-del:hover{background:#C4442E;color:#fff;border-color:#C4442E}
@media (hover:none){.msg-del{opacity:1}}
/* vertical files list — each row shows who uploaded the file, like the chat thread */
.files-list{display:flex;flex-direction:column;gap:13px}
.file-row{display:flex;gap:9px;align-items:flex-start}
.file-row .fr-body{flex:1;min-width:0}
.fr-meta{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.fr-meta .who{font-size:11.5px;font-weight:700;color:var(--ink)}
.fr-meta .tm{font-size:10.5px;color:var(--muted)}
.fr-card{position:relative;display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:9px 38px 9px 11px;cursor:pointer;transition:all .14s}
.fr-card:hover{border-color:var(--green);box-shadow:var(--shadow-card)}
.fr-thumb{width:44px;height:44px;flex:none;border-radius:9px;overflow:hidden;background:#EEE9DB;position:relative;display:grid;place-items:center;color:var(--green)}
.fr-thumb img,.fr-thumb video{width:100%;height:100%;object-fit:cover}
.fr-thumb .vlabel{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,25,20,.4);color:#fff}
.fr-name{font-size:12.5px;font-weight:600;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.file-del{position:absolute;top:50%;right:9px;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--bd);color:#C4442E;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(15,25,20,.15);z-index:2}
.file-del:hover{background:#C4442E;color:#fff;border-color:#C4442E}
/* store management (head office) */
.store-card .store-edit{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid var(--bd);color:var(--body);display:grid;place-items:center;cursor:pointer;z-index:2}
.store-card .store-edit:hover{border-color:var(--green);color:var(--green)}
.store-card.is-inactive{opacity:.62}
.store-preview{display:flex;align-items:center;gap:12px;background:#F6F2E8;border:1px solid var(--bd);border-radius:12px;padding:12px 14px;margin-bottom:15px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:38px}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.swatch.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}
/* multi-assignee picker — full-width chip row under the status/priority/category grid */
.assign-field{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2);font-weight:700}
.assign-field .muted{text-transform:none;letter-spacing:0}
.assign-field .chip-pick{text-transform:none;letter-spacing:0;margin-top:2px}
/* label maker */
.lm-wrap{display:flex;flex-direction:column;gap:16px;max-width:1000px}
.lm-card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px 20px}
.lm-card h3{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--ink)}
.lm-card p{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--body)}
.lm-ok{color:var(--green);font-weight:600;display:flex;align-items:center;gap:6px}
.lm-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.lm-start{font-size:12px;font-weight:600;color:var(--body);display:inline-flex;align-items:center;gap:8px}
.lm-start select,.lm-search-row input{border:1px solid var(--bd2);border-radius:9px;padding:8px 10px;background:#fff;font-size:13px;color:var(--ink);outline:none;font-family:inherit}
.lm-start select:focus,.lm-search-row input:focus{border-color:var(--green)}
.lm-filters{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.lm-classes{font-size:12.5px;color:var(--body);line-height:2}
.lm-classchk{display:inline-flex;align-items:center;gap:5px;margin-right:10px;white-space:nowrap;cursor:pointer}
.lm-search-row{display:flex;align-items:center;gap:12px}
.lm-search-row input{width:280px;max-width:60%}
.lm-lists{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lm-pane{display:flex;flex-direction:column;gap:8px}
.lm-pane-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted2)}
.lm-lists select{width:100%;border:1px solid var(--bd);border-radius:10px;background:#fff;font-size:12px;font-family:inherit;padding:4px;color:var(--ink)}
.lm-midbtns{display:flex;gap:8px;flex-wrap:wrap}
.lm-gen{margin-top:16px}
@media (max-width:720px){.lm-lists{grid-template-columns:1fr}.lm-search-row input{max-width:100%}}

.viewer-overlay{position:fixed;inset:0;background:rgba(10,16,12,.88);display:grid;place-items:center;z-index:100020;padding:40px;animation:fade .15s ease}
.viewer-overlay img,.viewer-overlay video{max-width:90vw;max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.viewer-overlay .vclose{position:fixed;top:22px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.viewer-overlay .vclose:hover{background:rgba(255,255,255,.22)}

.clip-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--bd2);background:#fff;display:grid;place-items:center;color:var(--body);flex-shrink:0}
.clip-btn:hover{border-color:var(--green);color:var(--green)}

/* ============================================================
   RESPONSIVE — tablet & phone  (kept last so it overrides everything)
   ============================================================ */
@media (max-width:820px){
  html,body{overflow-x:hidden}
  .shell{grid-template-columns:1fr;min-width:0}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:274px;transform:translateX(-100%);transition:transform .22s ease;z-index:100050;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .kst-scrim{display:block;position:fixed;inset:0;background:rgba(15,25,20,.45);z-index:100049;animation:fade .15s ease}
  .main{width:100%;min-width:0}
  .hamburger{display:inline-flex}
  .topbar{padding:12px 14px;gap:10px;flex-wrap:wrap}
  .topbar h1{font-size:19px}
  .topbar .sub{font-size:12px}
  .content{padding:16px 14px 44px}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .board{grid-template-columns:1fr;gap:16px}
  #tk-search{width:150px!important}
  .drawer{width:100vw;max-width:100vw}
  .drawer-topbar{padding:14px 16px;gap:8px}
  .drawer-topbar .tb-main{flex:1 1 100%;padding-right:36px}
  .drawer-topbar .meta{flex:1 1 100%}
  .drawer-cols{flex-direction:column}
  .drawer-left{width:auto;max-width:none;min-width:0;max-height:34vh;padding:16px;border-right:none;border-bottom:1px solid var(--bd)}
  .drawer-desc{max-width:100%}
  .drawer-body{padding:16px}
  .drawer-tabs{padding:0 16px}
  .composer{padding:12px 16px}
  .tbl-wrap{overflow-x:auto}
  .tbl{min-width:640px}
  .modal{max-width:100%}
  /* landing */
  .land-nav{padding:16px 20px}
  .land-hero{grid-template-columns:1fr;gap:24px;padding:20px 20px 8px}
  .land-hero h1{font-size:34px}
  .land-hero p.lead{font-size:15px}
  .login-card{width:100%}
  .feat-wrap{padding:36px 20px}
  .feat-wrap h2{font-size:24px}
  .feat-grid{grid-template-columns:1fr}
  .land-foot{padding:20px}
}
@media (max-width:420px){
  .stat-row{grid-template-columns:1fr 1fr;gap:8px}
  .stat .v{font-size:24px}
  .land-hero h1{font-size:30px}
}