/* KCS Projects V2 — designer app */
@font-face{font-family:"ITC Cheltenham Std";src:url(/assets/font-itc-cheltenham-std-300.f7b9ba61b9.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"ITC Cheltenham Std";src:url(/assets/font-itc-cheltenham-std-400.139b4b489a.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/font-figtree-400.8f98dd6429.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/font-figtree-500.953a6a4294.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/font-figtree-600.367d713287.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/font-figtree-700.7ec4f08d09.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ink:#35312e;--gray:#60605e;--mute:#8a8581;--terra:#af5a3c;--terra-dk:#964a30;--terra-lt:#f3e3da;--olive:#6d684e;--olive-lt:#e7e6da;
  --paper:#fcfaf6;--bg:#f5f3eb;--line:#e3ddcf;--line2:#ece7dc;--steel:#465561;--steel-lt:#eef1f3;--ok:#4d6b3c;--warn:#8a5a14;--bad:#9b2f1b;
  --r:10px;--sh:0 1px 2px rgba(53,49,46,.08),0 4px 14px rgba(53,49,46,.06)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Figtree,-apple-system,"Segoe UI",sans-serif;font-size:14px;color:var(--ink);background:var(--bg);letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}
.ch{font-family:"ITC Cheltenham Std",Georgia,serif;letter-spacing:.004em;font-weight:400}
.lbl{font-weight:700;font-size:11px;line-height:14px;letter-spacing:.11em;text-transform:uppercase;color:var(--olive)}
.num{font-variant-numeric:tabular-nums}
a{color:var(--steel)}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
[hidden]{display:none !important}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--paper)}
.btn.pri{background:var(--terra);border-color:var(--terra);color:#fff}.btn.pri:hover{background:var(--terra-dk)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--steel)}.btn.ghost:hover{background:rgba(70,85,97,.08)}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.btn.lg{height:44px;padding:0 20px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:default}
.btn svg{width:16px;height:16px;flex-shrink:0}
.link{background:none;border:0;padding:0;color:var(--steel);text-decoration:underline;cursor:pointer;font-weight:500}
.link.bad{color:var(--bad)}
input.in,select.in,textarea.in{width:100%;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
textarea.in{height:auto;min-height:72px;padding:9px 11px;line-height:1.45;resize:vertical}
input.in:focus,select.in:focus,textarea.in:focus{outline:2px solid rgba(70,85,97,.35);outline-offset:0;border-color:var(--steel)}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.fld>span{font-size:12.5px;font-weight:600;color:var(--gray)}
.fld .hint{font-size:12px;color:var(--mute);font-weight:500}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.money-in{position:relative}.money-in::before{content:"$";position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--gray);font-weight:600}
.money-in input{padding-left:22px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--olive-lt);color:#4d4936}
.chip.wait{background:var(--terra-lt);color:#8a3f26}.chip.done{background:#dfe8d6;color:#3b5230}.chip.muted{background:#ece9e2;color:var(--gray)}.chip.ok{background:var(--steel-lt);color:var(--steel)}

/* top bar */
.top{height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--ink);color:#f5f3eb;position:sticky;top:0;z-index:20}
.top .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;cursor:pointer;background:none;border:0;color:inherit;padding:0}
.top .brand img{width:28px;height:28px;border-radius:6px;display:block}
.top .grow{flex:1;min-width:0}
.top .pname{font-family:"ITC Cheltenham Std",Georgia,serif;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .save{font-size:12px;color:#bdb5a8;white-space:nowrap}
.top .btn{height:32px;background:transparent;border-color:#5d5650;color:#f5f3eb}
.top .btn:hover{background:rgba(255,255,255,.06)}
.top .btn.pri{background:var(--terra);border-color:var(--terra)}
.me{position:relative}
.me>button{display:flex;align-items:center;gap:8px;background:none;border:0;color:#f5f3eb;cursor:pointer;padding:4px 6px;border-radius:8px;font-weight:600}
.me>button:hover{background:rgba(255,255,255,.08)}
.av{width:28px;height:28px;border-radius:999px;background:var(--terra);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:6px;z-index:40}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;border-radius:7px;cursor:pointer;font-weight:500}
.menu button:hover{background:var(--bg)}
.menu hr{border:0;border-top:1px solid var(--line2);margin:5px 0}

/* library */
.page{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.page h1{font-size:30px;margin:0 0 4px}
.page .sub{color:var(--gray);margin:0 0 20px}
.lib-bar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.lib-bar .search{flex:1;min-width:220px}
.filters{display:flex;gap:6px}
.filters button{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:12.5px;cursor:pointer}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.list{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line2);cursor:pointer}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--paper)}
.lrow .t{font-weight:700;font-size:15px}
.lrow .m{color:var(--gray);font-size:12.5px;margin-top:2px}
.lrow .tot{font-weight:700;text-align:right;min-width:90px}
.lrow .acts{display:flex;gap:4px}
.empty-state{padding:56px 24px;text-align:center;color:var(--gray)}
.empty-state h2{font-size:24px;color:var(--ink);margin:0 0 8px}

/* project */
.proj{display:grid;grid-template-columns:minmax(0,1fr) 380px;height:calc(100vh - 56px)}
.work{display:flex;flex-direction:column;min-width:0;min-height:0}
.tabs{display:flex;gap:2px;padding:10px 16px 0;border-bottom:1px solid var(--line);background:var(--bg)}
.tabs button{height:38px;padding:0 16px;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;background:none;cursor:pointer;font-weight:600;color:var(--gray);display:flex;align-items:center;gap:8px}
.tabs button.on{background:#fff;border-color:var(--line);color:var(--ink);margin-bottom:-1px}
.tabs .badge{font-size:11px;font-weight:700;background:var(--olive-lt);color:#4d4936;border-radius:999px;padding:1px 7px}
.pane{flex:1;min-height:0;overflow:auto;background:#fff}
.pane.q{overflow:hidden}
.pane.q iframe{width:100%;height:100%;border:0;display:block}
.ro-band{padding:10px 16px;background:var(--terra-lt);color:#6d2f1b;font-weight:600;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* drawings */
.dr{padding:18px}
.dr-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.dr-bar .hint{color:var(--mute);font-size:12.5px}
.dr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dr-card{border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.dr-card.drag{opacity:.4}.dr-card.over{outline:2px dashed var(--terra);outline-offset:2px}
.dr-im{height:160px;background:#efeae0;display:flex;align-items:center;justify-content:center;cursor:zoom-in;position:relative}
.dr-im img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.dr-im .px{position:absolute;right:6px;bottom:6px;font-size:10.5px;font-weight:600;background:rgba(53,49,46,.7);color:#fff;border-radius:5px;padding:2px 6px}
.dr-im.busy{cursor:default;color:var(--gray);font-size:12.5px}
.dr-name{border:0;border-top:1px solid var(--line2);padding:9px 10px;background:#fff;font-weight:600;font-size:13px;width:100%}
.dr-name:focus{outline:2px solid rgba(70,85,97,.3)}
.dr-acts{display:flex;gap:2px;padding:4px 6px;background:#fff;border-top:1px solid var(--line2)}
.dr-acts button{flex:1;height:28px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--gray);font-size:13px}
.dr-acts button:hover{background:var(--bg);color:var(--ink)}
.drop-empty{border:2px dashed var(--line);border-radius:12px;padding:48px 20px;text-align:center;color:var(--gray);background:var(--paper)}
.drop-empty h3{font-size:21px;color:var(--ink);margin:0 0 6px}
.dropping::after{content:"Drop to add";position:fixed;inset:56px 0 0 0;background:rgba(175,90,60,.10);border:3px dashed var(--terra);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--terra);z-index:30;pointer-events:none}

/* details */
.det{max-width:640px;padding:22px}
.det h3{margin:0 0 14px;font-size:20px}
.close-res{border:1px solid var(--line);border-radius:8px;margin-top:6px;overflow:hidden;background:#fff}
.close-res button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line2);background:none;padding:9px 11px;cursor:pointer}
.close-res button:hover{background:var(--paper)}
.close-res small{color:var(--gray)}

/* customer panel */
.panel{border-left:1px solid var(--line);background:var(--paper);overflow:auto;padding:16px 16px 40px;display:flex;flex-direction:column;gap:14px}
.box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.stage-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.stage-h h3{margin:3px 0 0;font-size:21px}
.unsent{background:#fdf6ea;border:1px solid #e3b779;border-radius:10px;padding:10px 12px;font-size:13px;color:#6b4710;display:flex;gap:10px;align-items:center;justify-content:space-between}
.next .t{font-size:15.5px;font-weight:700;margin:4px 0 3px}
.next .why{font-size:12.5px;color:var(--gray);margin-bottom:10px}
.next .btn{width:100%}
.sees{border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;background:var(--paper)}
.sees .k{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra)}
.sees .h{font-family:"ITC Cheltenham Std",Georgia,serif;font-size:21px;margin:3px 0 2px}
.sees .a{font-family:"ITC Cheltenham Std",Georgia,serif;font-size:28px;font-weight:300}
.sees .b{display:inline-block;margin-top:8px;background:var(--terra);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:6px 10px}
.sees .pos{font-size:11.5px;color:var(--mute);margin-top:8px}
.linkrow{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.linkrow .btn{flex:1}
.moves{display:grid;grid-template-columns:1fr;gap:6px}
.moves .btn{justify-content:flex-start;height:38px}
.moves .btn small{margin-left:auto;color:var(--mute);font-weight:500}
.openreq{display:flex;justify-content:space-between;gap:10px;font-size:13px;align-items:center}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:6px 0;align-items:start}
.tl .dot{width:18px;height:18px;border-radius:999px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--mute);background:#fff;margin-top:1px}
.tl li.done .dot{background:var(--olive);border-color:var(--olive);color:#fff}
.tl li.now .dot{background:var(--terra);border-color:var(--terra);color:#fff;box-shadow:0 0 0 4px var(--terra-lt)}
.tl .nm{font-weight:600;font-size:13px}
.tl li.todo .nm{color:var(--gray);font-weight:500}
.tl li.opt.todo .nm{color:var(--mute)}
.tl .dt{font-size:12px;color:var(--gray)}
.ev{font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--line2);display:grid;grid-template-columns:62px 1fr;gap:8px}
.ev:last-child{border-bottom:0}
.ev .w{color:var(--mute)}
.ev .by{color:var(--mute)}
.pays .p{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line2);align-items:center}
.pays .p:last-child{border-bottom:0}
.pays .p.ref{color:var(--mute);text-decoration:line-through}
.sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}

/* dialogs */
.dlg-bg{position:fixed;inset:0;background:rgba(40,36,33,.45);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.dlg{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);width:100%;max-width:560px;display:flex;flex-direction:column}
.dlg.wide{max-width:1040px}
.dlg-h{padding:18px 20px 6px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dlg-h h2{margin:0;font-size:24px}
.dlg-h .x{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--gray);padding:2px 6px}
.dlg-b{padding:8px 20px 16px}
.dlg-f{padding:14px 20px;border-top:1px solid var(--line2);display:flex;justify-content:flex-end;gap:8px;align-items:center;flex-wrap:wrap}
.dlg-f .grow{flex:1;color:var(--bad);font-size:13px;font-weight:600}
.send-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:18px}
.opts{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.opt{display:grid;grid-template-columns:20px 1fr;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;align-items:start}
.opt:hover{background:var(--paper)}
.opt.on{border-color:var(--terra);background:#fdf8f5;box-shadow:0 0 0 1px var(--terra) inset}
.opt input{margin:2px 0 0;accent-color:var(--terra)}
.opt b{display:block;font-size:14px}
.opt small{color:var(--gray);font-size:12.5px}
.opt .extra{grid-column:2;margin-top:8px}
.meths{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;margin-top:6px}
.meths label{display:flex;gap:6px;align-items:center;cursor:pointer}
.meths input{accent-color:var(--terra)}
.chk{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer;margin:4px 0}
.chk input{accent-color:var(--terra)}
.prev-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}
.prev-wrap .ph{padding:8px 12px;font-size:12px;font-weight:600;color:var(--gray);border-bottom:1px solid var(--line);background:#fff;display:flex;justify-content:space-between}
.prev-wrap iframe{width:100%;height:560px;border:0;display:block;background:var(--bg)}
.note-box{background:var(--steel-lt);border-radius:9px;padding:10px 12px;font-size:13px;color:var(--steel);margin-bottom:12px}
.note-box.warn{background:#fdf6ea;color:#6b4710}
.sent-ok{text-align:center;padding:10px 0 4px}
.sent-ok h3{font-size:24px;margin:6px 0}
.linkbox{display:flex;gap:6px;margin:14px 0 4px}
.linkbox input{flex:1}

/* login */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}
.auth .card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:30px 28px;width:100%;max-width:400px}
.auth img{width:170px;display:block;margin:0 auto 18px}
.auth h1{font-size:25px;text-align:center;margin:0 0 4px}
.auth p{text-align:center;color:var(--gray);margin:0 0 18px}
.auth .btn{width:100%;height:42px}
.auth .err{color:var(--bad);font-size:13px;font-weight:600;min-height:18px;margin:4px 0 8px}

/* settings / team */
.set{max-width:760px}
.set .box{margin-bottom:16px;padding:18px}
.set h2{font-size:21px;margin:0 0 4px}
.set .d{color:var(--gray);font-size:13px;margin:0 0 14px}
.set .saved{font-size:12.5px;color:var(--ok);font-weight:600}
.team td,.team th{padding:10px 8px;border-bottom:1px solid var(--line2);text-align:left;font-size:13px}
.team{width:100%;border-collapse:collapse}
.team th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--olive)}

/* toast + viewer */
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:90;align-items:center}
.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.2);font-weight:600;font-size:13.5px;max-width:560px}
.toast.error{background:var(--bad)}
.viewer{position:fixed;inset:0;background:rgba(24,22,20,.96);z-index:70;display:flex;flex-direction:column;color:#f5f3eb}
.viewer .vb{display:flex;align-items:center;gap:10px;padding:10px 14px}
.viewer .vb .nm{flex:1}
.viewer .vs{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
.viewer img.full{max-width:none;max-height:none}
.viewer .btn{background:transparent;color:#f5f3eb;border-color:#5d5650}

@media (max-width:1100px){ .proj{grid-template-columns:minmax(0,1fr) 330px} }
@media (max-width:860px){
  .proj{display:flex;flex-direction:column;height:auto}
  .panel{border-left:0;border-bottom:1px solid var(--line);order:-1}
  .pane{min-height:70vh}
  .pane.q{height:80vh}
  .send-grid{grid-template-columns:1fr}
  .prev-wrap iframe{height:460px}
  .top .hide-sm{display:none}
}
@media (max-width:600px){
  .lrow{grid-template-columns:minmax(0,1fr) auto}
  .lrow .acts{display:none}
  .row2{grid-template-columns:1fr}
  .dlg-bg{padding:0}
  .dlg{border-radius:0;min-height:100vh}
  .dr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dr-im{height:120px}
}