:root{
  --ink:#15130F;--ink2:#2b2822;--ink3:#4a463e;--ivory:#FBFAF7;--paper:#FFFFFF;--sand:#F4F0E8;--line:#E9E4DA;--line2:#F1EDE5;
  --muted:#7a746a;--soft:#a9a194;--gold:#C2AE85;--gold2:#E3D6BD;--goldbg:#F7F2E8;--golddeep:#8a744b;
  --bar:linear-gradient(90deg,#B7A88F 0%,#C9B89C 12%,#D7C7AD 24%,#E2D3BA 36%,#F4EAD6 48%,#F4EAD6 52%,#E5D7BF 64%,#D6C8B0 76%,#C6B496 88%,#B6A78E 100%);
  --ok:#4f7a4a;--okbg:#ebf1e6;--warn:#a06a1f;--warnbg:#f8efdd;--blue:#46637a;--bluebg:#e7eef3;
  --serif:'DM Serif Display',Georgia,serif;--sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --sh1:0 1px 2px rgba(21,19,15,.05);--sh2:0 1px 2px rgba(21,19,15,.04),0 12px 32px rgba(21,19,15,.07);--sh3:0 24px 64px rgba(21,19,15,.18);
  --r:12px;--side:236px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.55 var(--sans);color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums lining-nums}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.eb{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--golddeep);font-weight:600}
.muted{color:var(--muted)}.small{font-size:12.5px}.tiny{font-size:11.5px}

/* shell */
.app{display:flex;height:100vh;height:100dvh}
.side{width:var(--side);flex:none;background:linear-gradient(180deg,#F8F4EC,#F3EDE2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 14px 16px;position:relative}
.side:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--bar)}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 26px}
.mono{width:40px;height:40px;border-radius:50%;background:var(--ink);display:grid;place-items:center;font:400 13px var(--serif);color:var(--gold);letter-spacing:.06em;box-shadow:0 0 0 1px #fff,0 0 0 2px var(--gold2)}
.brand b{display:block;font:400 19px/1.1 var(--serif)}
.brand span{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--golddeep);font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border-radius:10px;color:var(--ink3);font-weight:500;font-size:13.5px;text-align:left}
.nav button:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.nav button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh1),0 0 0 1px var(--line)}
.nav button .ct{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
.side .grow{flex:1}
.joined{border-top:1px solid var(--line);padding:14px 8px 4px;display:flex;flex-direction:column;gap:9px}
.joined a{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink3);text-decoration:none}
.joined a:hover{color:var(--ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.dot.off{background:var(--soft)}.dot.busy{background:var(--gold)}
.syncline{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);padding:12px 8px 0}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:22px 28px 14px;flex-wrap:wrap}
.top h1{font:400 30px/1 var(--serif);margin:0;letter-spacing:-.02em;margin-right:auto}
.top h1 em{color:var(--golddeep)}
.search{position:relative;width:280px}
.search svg{position:absolute;left:12px;top:12px;color:var(--soft)}
.search input{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px 0 36px;font-size:13.5px}
.search input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold2);border-color:var(--gold)}
.sel{height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 30px 0 12px;font-size:13px;font-weight:500;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a746a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;font-weight:600;font-size:13px;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn.dark{background:var(--ink);color:#F4EAD6}.btn.dark:hover{background:#2b2822}
.btn.line{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn.line:hover{border-color:var(--gold)}
.btn.ghost{color:var(--ink3)}.btn.ghost:hover{background:var(--sand)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 28px 16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh1)}
.kpi .l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .v{font:400 26px/1.15 var(--serif);margin-top:6px}
.kpi .s{font-size:11.5px;color:var(--muted);margin-top:2px}

/* board */
.boardwrap{flex:1;min-height:0;overflow:auto;padding:2px 28px 24px}
.board{display:flex;gap:12px;min-height:100%;align-items:flex-start}
.col{width:272px;flex:none;background:var(--sand);border-radius:14px;display:flex;flex-direction:column;max-height:100%}
.col.drop{outline:2px dashed var(--gold);outline-offset:-2px}
.colh{padding:12px 14px 10px;display:flex;align-items:baseline;gap:8px;position:sticky;top:0}
.colh b{font-size:12.5px;font-weight:600}
.colh .n{font-size:11.5px;color:var(--muted);font-weight:600}
.colh .sum{margin-left:auto;font-size:11.5px;color:var(--ink3);font-weight:600}
.colh .ix{width:20px;height:20px;border-radius:6px;background:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--golddeep);box-shadow:var(--sh1)}
.cards{padding:0 8px 10px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.card{background:#fff;border-radius:11px;padding:12px 12px 10px;box-shadow:var(--sh1),0 0 0 1px rgba(21,19,15,.05);cursor:pointer;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 0 0 1px var(--gold2),0 8px 20px rgba(21,19,15,.08)}
.card.sel{box-shadow:0 0 0 2px var(--gold),0 8px 20px rgba(21,19,15,.08)}
.card .nm{font-weight:600;font-size:13.5px;line-height:1.3;display:flex;gap:6px;align-items:flex-start}
.card .nm .star{color:var(--gold);margin-left:auto}
.card .sub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .row{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}
.thumb{height:84px;border-radius:8px;overflow:hidden;margin:-2px -2px 10px;background:var(--sand);position:relative}
.thumb iframe{width:1280px;height:720px;border:0;transform:scale(.205);transform-origin:0 0;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--sand);color:var(--ink3);white-space:nowrap}
.pill svg{width:12px;height:12px}
.pill.gold{background:var(--goldbg);color:var(--golddeep)}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.warn{background:var(--warnbg);color:var(--warn)}
.pill.blue{background:var(--bluebg);color:var(--blue)}
.card .val{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink3)}
.next{margin-top:10px;width:100%;height:32px;border-radius:8px;border:1px solid var(--line);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);background:#fff}
.next:hover{background:var(--ink);color:#F4EAD6;border-color:var(--ink)}
.next.busy{pointer-events:none;color:var(--muted)}
.more{margin:2px 0 4px;height:34px;border-radius:9px;font-size:12px;font-weight:600;color:var(--ink3);background:rgba(255,255,255,.6)}
.more:hover{background:#fff}
.empty{font-size:12px;color:var(--soft);text-align:center;padding:18px 8px}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(21,19,15,.22);opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);background:var(--ivory);z-index:21;box-shadow:var(--sh3);transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dh{padding:20px 24px 16px;border-bottom:1px solid var(--line);background:#fff;position:relative}
.dh:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--bar)}
.dh .x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.dh .x:hover{background:var(--sand);color:var(--ink)}
.dh h2{font:400 28px/1.1 var(--serif);margin:6px 48px 4px 0;letter-spacing:-.015em}
.dh .meta{font-size:12.5px;color:var(--muted)}
.track{display:flex;gap:4px;margin-top:16px}
.track i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.track i.done{background:var(--gold)}.track i.now{background:var(--ink)}
.tracklbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px;font-weight:500}
.tracklbl b{color:var(--ink);font-weight:600}
.dacts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.dacts .btn.dark{flex:1;min-width:200px;height:44px;font-size:13.5px}
.db{flex:1;overflow:auto;padding:18px 24px 40px;display:flex;flex-direction:column;gap:14px}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh1)}
.ph{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line2)}
.ph b{font-size:13px;font-weight:600}
.ph .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.pb{padding:14px 16px}
.seg{display:inline-flex;background:var(--sand);border-radius:8px;padding:2px}
.seg button{height:26px;padding:0 10px;border-radius:6px;font-size:11.5px;font-weight:600;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh1)}
.frame{background:var(--sand);display:grid;place-items:center;padding:14px;border-radius:0 0 14px 14px;overflow:hidden}
.frame .dev{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(21,19,15,.12);position:relative}
.frame.desk .dev{width:100%;aspect-ratio:16/10}
.frame.desk iframe{width:1440px;height:900px;border:0;transform-origin:0 0}
.frame.phone .dev{width:248px;height:500px;border-radius:30px;border:7px solid var(--ink)}
.frame.phone iframe{width:390px;height:787px;border:0;transform:scale(.6);transform-origin:0 0}
.noprev{padding:30px 20px;text-align:center}
.noprev h4{font:400 20px var(--serif);margin:0 0 4px}
.draft label{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 6px}
.draft .subj{font-weight:600;font-size:13.5px;margin-bottom:12px}
.draft textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--ivory);font-size:13.5px;line-height:1.6;resize:vertical;min-height:150px}
.draft textarea.dm{min-height:84px}
.draft .acts{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 18px}
.linkrow{display:flex;gap:6px;flex-wrap:wrap}
.linkrow a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line);font-size:12px;font-weight:600;text-decoration:none;background:#fff}
.linkrow a:hover{border-color:var(--gold)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:5px;letter-spacing:.02em}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a746a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important;background-size:14px!important;padding-right:32px!important}
.field input,.field select,.field textarea{width:100%;height:38px;border:1px solid var(--line);border-radius:9px;padding:0 11px;background:#fff;font-size:13.5px}
.field textarea{height:auto;min-height:80px;padding:10px 11px;resize:vertical}
.toggle{display:flex;align-items:center;gap:10px;height:38px;font-size:13px;font-weight:500}
.sw{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;flex:none}
.sw:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh1);transition:transform .15s}
.sw.on{background:var(--ink)}.sw.on:after{transform:translateX(16px)}
.sig{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2)}
.sig div{background:#fff;padding:12px 16px}
.sig b{display:block;font:400 22px/1.1 var(--serif)}
.sig span{font-size:11px;color:var(--muted);font-weight:500}
.facts{display:grid;grid-template-columns:110px 1fr;gap:7px 12px;font-size:13px}
.facts dt{color:var(--muted)}.facts dd{margin:0;word-break:break-word}
.tl{display:flex;flex-direction:column}
.tl div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13px}
.tl div:last-child{border:0}
.tl time{color:var(--muted);font-size:11.5px;white-space:nowrap;width:86px;flex:none;padding-top:1px}

/* revenue */
.page{flex:1;overflow:auto;padding:4px 28px 40px}
.rgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;margin-top:2px}
.chart{padding:8px 18px 18px}
.brow{display:grid;grid-template-columns:150px 1fr 120px;gap:14px;align-items:center;height:42px;position:relative}
.brow .bl{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bl small{color:var(--muted);font-weight:600;margin-left:4px}
.brow .bt{height:18px;position:relative}
.brow .bt i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--ink);transition:width .4s}
.brow .bt:before{content:'';position:absolute;left:0;top:-6px;bottom:-6px;width:1px;background:var(--line)}
.brow .bt i.w{background:var(--gold);top:4px;bottom:4px;opacity:1}
.brow .bv{text-align:right;font-size:12.5px;font-weight:600}
.brow .bv small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.brow:hover{background:var(--line2);border-radius:8px}
.axis{display:grid;grid-template-columns:150px 1fr 120px;gap:14px;font-size:11px;color:var(--muted);padding-top:6px;border-top:1px solid var(--line2);margin-top:6px}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--ink3);padding:12px 18px 0}
.legend i{display:inline-block;width:12px;height:8px;border-radius:2px;background:var(--ink);margin-right:6px}
.legend i.w{background:var(--gold)}
.tip{position:fixed;z-index:40;background:var(--ink);color:#F4EAD6;font-size:12px;padding:8px 10px;border-radius:8px;pointer-events:none;box-shadow:var(--sh2);display:none;line-height:1.5}
.tip b{color:#fff}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 16px;border-bottom:1px solid var(--line)}
table.t td{padding:11px 16px;border-bottom:1px solid var(--line2)}
table.t tr:last-child td{border:0}
table.t td.r,table.t th.r{text-align:right}
table.t tr.click{cursor:pointer}table.t tr.click:hover td{background:var(--ivory)}

/* toast, modal */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#F4EAD6;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:500;opacity:0;transition:all .2s;z-index:50;box-shadow:var(--sh2);max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:30;background:rgba(21,19,15,.3);padding:16px}
.modal.on{display:grid}
.modal .box{background:#fff;border-radius:16px;width:min(480px,100%);padding:22px;box-shadow:var(--sh3)}
.modal h3{font:400 22px var(--serif);margin:0 0 4px}
.locked{display:grid;place-items:center;height:100%;text-align:center;padding:30px}
.locked h2{font:400 30px var(--serif);margin:16px 0 6px}

/* phone */
.tabbar,.chips,.mhead{display:none}
@media (max-width:860px){
  body{overflow:auto}
  .side{display:none}
  .app{height:auto;min-height:100dvh}
  .main{padding-bottom:80px}
  .top{padding:14px 16px 10px;position:sticky;top:0;z-index:5;background:rgba(251,250,247,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .top h1{font-size:26px}
  .top .search{order:5;width:100%}
  .top .hideph{display:none}
  .kpis{grid-template-columns:1fr 1fr;padding:0 16px 12px;gap:8px}
  .kpi{padding:10px 12px}.kpi .v{font-size:21px;margin-top:2px}.kpi .s{display:none}.kpi .l{letter-spacing:.1em;font-size:9.5px}
  .ph .r .tiny{display:none}
  .chips{display:flex;gap:6px;overflow-x:auto;padding:2px 16px 12px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none;height:34px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink3);display:flex;gap:6px;align-items:center}
  .chips button span{color:var(--muted);font-weight:600}
  .chips button.on{background:var(--ink);color:#F4EAD6;border-color:var(--ink)}
  .chips button.on span{color:var(--gold)}
  .boardwrap{padding:0 16px 20px;overflow:visible}
  .board{display:block}
  .col{width:auto;background:none;max-height:none;display:none}
  .col.mob{display:flex}
  .col .colh{display:none}
  .cards{padding:0;overflow:visible;gap:10px}
  .thumb{height:120px}.thumb iframe{transform:scale(.29)}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:10}
  .tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--muted);padding:6px 0}
  .tabbar button svg{width:20px;height:20px}
  .tabbar button.on{color:var(--ink)}
  .drawer{width:100vw;border-radius:0}
  .dh{padding:16px 16px 14px}.dh h2{font-size:24px}
  .db{padding:14px 12px 60px}
  .grid2{grid-template-columns:1fr}
  .page{padding:4px 16px 30px;overflow:visible}
  .rgrid{grid-template-columns:1fr}
  .brow{grid-template-columns:1fr auto;grid-template-areas:'l v' 'b b';height:auto;padding:8px 2px;gap:6px 10px}
  .brow .bl{grid-area:l}.brow .bv{grid-area:v}.brow .bt{grid-area:b;height:14px}
  .brow .bv small{display:inline;margin-left:6px}
  .axis{grid-template-columns:1fr}.axis span:empty{display:none}
  .sig b{font-size:19px}
  .frame.desk iframe{width:1280px;height:800px}
}