html,body{margin:0;padding:0;background:transparent;overflow:hidden;}*{box-sizing:border-box;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--ink:#1C1410; --t2:rgba(28,20,16,0.72); --t3:rgba(28,20,16,0.48);
--t4:rgba(28,20,16,0.32); --t5:rgba(28,20,16,0.16);
--or:#C04010; --or-b:#D94F1A; --gr:#1A5C34; --rd:#B52424;
--paper:#FDF8E8; --cream:#FAF4EE; --sans:'Inter',-apple-system,sans-serif;
}
html,body{background:#1A1A18;font-family:var(--sans);-webkit-font-smoothing:antialiased}
.page{padding:40px 24px 88px;display:flex;flex-direction:column;align-items:center;gap:20px}
/* captions */
.cap{width:100%;max-width:1280px;padding:28px 4px 8px}
.cap .cn{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(28,20,16,0.38)}
.cap h2{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-top:5px}
/* frame */
.frame{width:100%;max-width:1280px;border-radius:0;overflow:hidden;
box-shadow:0 0 0 0.5px rgba(28,20,16,0.14),0 48px 96px rgba(28,20,16,0.20)}
.chrome{background:#1A1A18;padding:10px 16px;display:flex;align-items:center;gap:14px;
border-bottom:0.5px solid rgba(255,255,255,0.05)}
.cdots{display:flex;gap:6px}.cdot{width:11px;height:11px;border-radius:50%}
.curl{flex:1;max-width:380px;margin:0 auto;background:rgba(255,255,255,0.06);
border-radius:5px;padding:5px 0;font-size:10px;color:rgba(255,255,255,0.28);text-align:center}
/* canvas base */
.app{display:flex;position:relative;overflow:hidden;height:800px}
.app-bg{background:var(--cream)}
.tunnel,.bloom{display:block}
/* blobs - different heat map position per screen */
.blob{position:absolute;pointer-events:none;z-index:0;will-change:transform;opacity:0.46}
.app.hero .blob{opacity:1}
canvas.grain{position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;z-index:1;opacity:0.26;mix-blend-mode:soft-light}
@keyframes ksh-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(217,79,26,0.40)}
50%{box-shadow:0 0 0 5px rgba(217,79,26,0)}
}
.pulse{animation:ksh-pulse 2.4s ease-in-out infinite}
/* wordmark SVG helper */
.wm-svg{display:block}
/* -- SHARED SIDEBAR -- */
.sb{width:240px;flex-shrink:0;background:rgba(250,244,236,0.86);
border-right:0.5px solid rgba(28,20,16,0.16);
display:flex;flex-direction:column;position:relative;z-index:5}
.sb-brand{padding:22px 22px 20px;border-bottom:0.5px solid rgba(28,20,16,0.12)}
.sb-back{display:flex;align-items:center;gap:7px;padding:10px 18px;
border-bottom:0.5px solid rgba(28,20,16,0.10);font-size:11.5px;
font-weight:500;color:var(--t3);cursor:pointer}
.sb-ctr{padding:11px 18px 13px;border-bottom:0.5px solid rgba(28,20,16,0.10)}
.sb-ctr-lbl{font-size:9px;font-weight:500;letter-spacing:0.11em;text-transform:uppercase;
color:var(--t4);display:block;margin-bottom:4px;font-variant-numeric:tabular-nums}
.sb-ctr-name{font-size:12.5px;font-weight:600;color:var(--t2);line-height:1.4;letter-spacing:-0.01em}
.sb-ctr-id{font-size:9px;color:var(--t4);margin-top:3px;letter-spacing:0.05em;font-variant-numeric:tabular-nums}
.sb-nav{flex:1;padding:12px 12px;display:flex;flex-direction:column;gap:2px}
.ni{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;
font-size:13px;color:var(--t3);cursor:pointer;letter-spacing:-0.01em;transition:background .15s,color .15s}
.ni:hover{background:rgba(28,20,16,0.04);color:var(--t2)}
.ni.on{background:rgba(28,20,16,0.08);color:var(--ink);font-weight:600}
.sb-foot{padding:14px 18px;border-top:0.5px solid rgba(28,20,16,0.12);
display:flex;align-items:center;gap:10px}
.uav{width:30px;height:30px;border-radius:50%;background:rgba(28,20,16,0.07);
border:0.5px solid rgba(28,20,16,0.14);display:flex;align-items:center;
justify-content:center;font-size:10px;font-weight:600;color:var(--t2);flex-shrink:0}
.uname{font-size:12px;font-weight:600;color:var(--t2)}
.urole{font-size:9px;color:var(--t4);letter-spacing:0.08em;text-transform:uppercase;margin-top:1px}
/* shell nav sidebar (different from workspace nav) */
.sb-shell .sb-nav .ni.on{background:rgba(28,20,16,0.08)}
/* -- STATE STRIP -- */
.main{flex:1;overflow-y:auto;position:relative;z-index:2;display:flex;flex-direction:column}
.strip{display:grid;grid-template-columns:repeat(4,1fr);flex-shrink:0;
background:rgba(250,244,236,0.86);border-bottom:0.5px solid rgba(28,20,16,0.15)}
.strip.action .sc:last-child .sv{color:var(--or);font-weight:600}
.sc{padding:14px 22px;border-right:0.5px solid rgba(28,20,16,0.10)}
.sc:last-child{border-right:none}
.sk{font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
color:var(--t4);display:block;margin-bottom:4px}
.sv{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
display:flex;align-items:center;gap:7px}
.sv.or{color:var(--or)}.sv.dim{color:var(--t3);font-weight:400}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--or-b);flex-shrink:0}
/* -- CONTENT -- */
.content{padding:32px 40px 48px;width:100%;max-width:920px;margin:0 auto;position:relative;z-index:2}
.eye{font-size:10px;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;
color:var(--t4);display:block;margin-bottom:9px;font-variant-numeric:tabular-nums}
h1.title{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;line-height:1.15;margin-bottom:6px}
.subline{font-size:13px;color:var(--t3);line-height:1.65;margin-bottom:24px}
.subline strong{color:var(--t2);font-weight:500}
/* -- CARDS -- */
.card{background:#fff;border-radius:16px;overflow:hidden;border:0.5px solid rgba(28,20,16,0.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(28,20,16,0.04),0 12px 32px rgba(28,20,16,0.08);
margin-bottom:12px}
.card:last-child,.cols .card{margin-bottom:0}
.paper-card{background:var(--paper);border-radius:16px;overflow:hidden;
border:0.5px solid rgba(28,20,16,0.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 1px 2px rgba(28,20,16,0.04),0 12px 32px rgba(28,20,16,0.08)}
.cols{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;align-items:stretch}
/* -- SHARED COMPONENTS -- */
.lbl{font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
color:var(--t4);display:flex;align-items:center;gap:7px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
white-space:nowrap;font-variant-numeric:tabular-nums}
.chip .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.or{color:var(--or);background:rgba(217,79,26,0.10);border:0.5px solid rgba(217,79,26,0.26)}
.chip.gr{color:var(--gr);background:rgba(26,92,52,0.10);border:0.5px solid rgba(26,92,52,0.24)}
.chip.dm{color:var(--t4);background:rgba(28,20,16,0.05);border:0.5px solid rgba(28,20,16,0.11)}
.chip.rd{color:var(--rd);background:rgba(181,36,36,0.09);border:0.5px solid rgba(181,36,36,0.22)}
.led{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.led .k{font-size:12px;color:var(--t3);white-space:nowrap}
.led .fill{flex:1;border-bottom:1.5px dotted rgba(28,20,16,0.15);transform:translateY(-4px)}
.led .v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.led .v .sm{font-size:9.5px;color:var(--t4);margin-left:7px;letter-spacing:0.04em;font-weight:500}
.led.tot{border-top:1px solid rgba(28,20,16,0.10);margin-top:4px;padding-top:10px}
.led.tot .k{font-weight:600;color:var(--t2)}.led.tot .fill{border-bottom:none}
.led.sm .k{font-size:11px}.led.sm .v{font-size:12px}
.dot8{display:inline-block;width:7px;height:7px;border-radius:2.5px;margin-right:8px}
.btn{padding:12px 20px;border-radius:10px;font-family:var(--sans);font-size:13px;
font-weight:500;letter-spacing:-0.01em;cursor:pointer;border:none;display:flex;
align-items:center;justify-content:center;gap:7px}
.btn-ink{background:var(--ink);color:rgba(255,242,220,0.96)}
.btn-out{background:rgba(255,255,255,0.55);color:var(--ink);
border:0.5px solid rgba(28,20,16,0.16);backdrop-filter:blur(10px)}
.btn-rd{background:rgba(181,36,36,0.08);color:var(--rd);border:0.5px solid rgba(181,36,36,0.20)}
.btn-row{display:flex;gap:8px}
.btn-row .btn-ink{flex:2}.btn-row .btn-out{flex:1}
/* -- MONEY MAP -- */
.mm{padding:20px 26px 22px}
.mm-hero{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.mm-hero .s{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mm-hero .n{font-size:42px;font-weight:700;color:var(--ink);letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.mm-hero .ctx{font-size:12px;font-weight:500;color:var(--or);margin-left:6px;align-self:center}
.mm-legend{display:flex;gap:20px;flex-wrap:wrap;padding:12px 0 2px}
.mli{display:inline-flex;align-items:center;font-size:12px;color:var(--t3)}
.mli b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:5px}
.bar{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px;margin:15px 0 7px}
.seg{border-radius:4px}
.seg.g{background:var(--gr)}
.seg.a{background:linear-gradient(180deg,#D4521E 0%,#C04010 100%);box-shadow:0 1px 8px rgba(217,79,26,0.40)}
.seg.d{background:rgba(28,20,16,0.10)}
/* -- MILESTONES (state-driven) -- */
.m-head{padding:15px 22px 10px;border-bottom:0.5px solid rgba(28,20,16,0.07);
display:flex;align-items:center;justify-content:space-between}
.m-head h3{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.m-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:6px}
.mrow{border-radius:10px;padding:13px 14px;display:grid;
grid-template-columns:1fr auto auto;gap:12px;align-items:center;cursor:pointer}
.mrow.live{background:rgba(217,79,26,0.05);border:0.5px solid rgba(217,79,26,0.20);
box-shadow:0 2px 12px rgba(217,79,26,0.10)}
.mrow.locked{background:rgba(28,20,16,0.025);border:0.5px solid rgba(28,20,16,0.08);opacity:0.52}
.mt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.mt b.dn{font-weight:500;color:var(--t2)}
.mt b.lk{font-weight:500;color:var(--t3)}
.mt span{display:block;font-size:11px;color:var(--t3);margin-top:2px}
.mt span.wait{color:var(--or)}
.wprog{display:flex;align-items:center;gap:4px;margin-top:6px}
.wt{height:4px;border-radius:2px;background:rgba(28,20,16,0.10);flex:1}
.wt.on{background:var(--or-b)}
.wlbl{font-size:8.5px;font-weight:600;letter-spacing:0.07em;color:var(--t4);
white-space:nowrap;font-variant-numeric:tabular-nums}
.mamt{font-size:12px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* -- ACTIVITY -- */
.a-head{display:flex;justify-content:space-between;align-items:center;
padding:15px 20px 12px;border-bottom:1px dashed rgba(28,20,16,0.14)}
.a-list{position:relative;padding:6px 20px 16px}
.a-list::before{content:'';position:absolute;left:26.5px;top:18px;bottom:22px;
border-left:1.5px dashed rgba(28,20,16,0.16)}
.arow{display:grid;grid-template-columns:14px 86px 1fr;gap:11px;padding:9px 0}
.adot{width:9px;height:9px;border-radius:50%;margin-top:3px;
border:2px solid var(--paper);position:relative;z-index:1;justify-self:center}
.adot.or{background:var(--or)}.adot.gr{background:var(--gr)}.adot.nu{background:rgba(28,20,16,0.30)}
.arow .at{font-size:9.5px;color:var(--t4);padding-top:2px;letter-spacing:0.03em;font-variant-numeric:tabular-nums}
.arow .ad{font-size:11px;color:var(--t2);line-height:1.55}
/* -- SCREEN 2: MILESTONE REVIEW -- */
.proof-card-body{padding:22px 26px 18px}
.proof-row{display:flex;align-items:center;gap:12px;padding:11px 14px;
background:rgba(28,20,16,0.03);border-radius:10px;border:0.5px solid rgba(28,20,16,0.09);margin-bottom:16px}
.proof-icon{width:36px;height:36px;background:rgba(28,20,16,0.06);border-radius:8px;
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.proof-name{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.proof-note{font-size:10.5px;color:var(--t4);margin-top:2px}
.proof-action{margin-left:auto;font-size:11px;font-weight:500;color:var(--or);
padding:5px 12px;border-radius:6px;background:rgba(217,79,26,0.08);
border:0.5px solid rgba(217,79,26,0.22)}
.criteria{display:flex;flex-direction:column;gap:0;margin-bottom:2px}
.crit-lbl{font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
color:var(--t4);display:block;margin-bottom:10px}
.cr{display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:0.5px solid rgba(28,20,16,0.06);font-size:12.5px;color:var(--t2)}
.cr:last-child{border-bottom:none}
.cbox{width:16px;height:16px;border-radius:5px;border:1.5px solid rgba(28,20,16,0.20);
flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cbox.checked{background:var(--gr);border-color:var(--gr)}
.review-footer{padding:18px 26px 22px;border-top:0.5px solid rgba(28,20,16,0.08)}
.countdown{display:flex;align-items:center;gap:10px;margin-bottom:16px;
padding:11px 14px;background:rgba(217,79,26,0.04);border-radius:9px;
border:0.5px solid rgba(217,79,26,0.14)}
.cd-label{font-size:11px;color:var(--or);font-weight:500;flex:1}
.cd-ticks{display:flex;gap:4px;align-items:center}
.ct{height:4px;width:28px;border-radius:2px;background:rgba(28,20,16,0.10)}
.ct.on{background:var(--or-b)}
.cd-sub{font-size:9.5px;color:var(--t4);margin-left:8px;font-variant-numeric:tabular-nums}
/* -- SCREEN 3: INVITE -- */
.invite-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;
gap:52px;align-items:start;padding:52px 64px 60px;max-width:1280px;margin:0 auto}
.invite-brand{display:flex;align-items:center;gap:9px;margin-bottom:40px;grid-column:1/-1}
.t-eye{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
color:var(--or-b);display:block;margin-bottom:12px;font-variant-numeric:tabular-nums}
.t-h1{font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.06;margin-bottom:14px}
.t-body{font-size:13px;color:var(--t3);line-height:1.70;margin-bottom:26px;max-width:400px}
.t-body strong{color:var(--t2);font-weight:500}
.sender-row{display:flex;align-items:center;gap:11px;padding:13px 16px;
border-radius:16px;background:#FFFFFF;border:0.5px solid rgba(28,20,16,0.12);
box-shadow:0 1px 2px rgba(28,20,16,0.04),0 8px 24px rgba(28,20,16,0.07);margin-bottom:14px}
.sender-info{flex:1}
.sender-info .sn{font-size:13px;font-weight:600;color:var(--ink)}
.sender-info .sm{font-size:10px;color:var(--t3);margin-top:2px}
.badge{font-size:9px;font-weight:600;color:var(--gr);background:rgba(26,92,52,0.10);
border:0.5px solid rgba(26,92,52,0.25);padding:3px 8px;border-radius:999px}
.doc-paper{background:var(--paper);border:0.5px solid rgba(28,20,16,0.12);border-radius:16px;
overflow:hidden;box-shadow:0 1px 2px rgba(28,20,16,0.05),0 12px 32px rgba(28,20,16,0.10);
position:relative;margin-bottom:14px}
.doc-head{display:flex;justify-content:space-between;align-items:center;
padding:12px 20px;border-bottom:1px dashed rgba(28,20,16,0.16)}
.doc-title{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-0.025em;
line-height:1.2;padding:18px 20px 4px}
.doc-sub{font-size:11px;color:var(--t3);padding:0 20px 12px;line-height:1.6}
.doc-led{padding:4px 20px 12px}
.doc-foot{padding:11px 20px 14px;border-top:1px dashed rgba(28,20,16,0.14);
font-size:10.5px;color:var(--t3);line-height:1.65}
.stamp-wait{position:absolute;top:16px;right:18px;width:84px;height:84px;
border:1.5px dashed rgba(192,68,0,0.35);border-radius:50%;
display:flex;align-items:center;justify-content:center;transform:rotate(9deg)}
.stamp-wait span{font-size:7.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
color:rgba(192,68,0,0.52);text-align:center;line-height:1.7}
.howlist{display:flex;flex-direction:column}
.how{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;
border-top:1px solid rgba(28,20,16,0.09)}
.how .fn{font-size:10px;color:var(--or-b);letter-spacing:0.08em;font-variant-numeric:tabular-nums;padding-top:2px}
.how b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;margin-bottom:2px}
.how p{font-size:11px;color:var(--t3);line-height:1.6}
.cta-stack{display:flex;flex-direction:column;gap:8px}
.cta-stack .btn-ink{width:100%;padding:13px;font-size:14px;font-weight:600}
.t-fn{font-size:9.5px;color:var(--t4);letter-spacing:0.05em;text-align:center;
margin-top:10px;line-height:1.7;font-variant-numeric:tabular-nums}
/* -- SCREEN 4: RELEASE -- */
.release-wrap{position:relative;z-index:2;padding:50px 64px 58px;
display:flex;flex-direction:column;align-items:center}
.release-brand{display:flex;align-items:center;gap:9px;margin-bottom:42px;align-self:flex-start}
.r-col{max-width:560px;width:100%;text-align:center}
.seal{display:inline-block;transform:rotate(-8deg);
filter:drop-shadow(0 8px 24px rgba(217,79,26,0.36));margin-bottom:18px}
.r-eye{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
color:var(--t4);display:block;text-align:center;margin-bottom:14px;font-variant-numeric:tabular-nums}
.r-amt{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-bottom:8px}
.r-amt .s{font-size:32px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.r-amt .n{font-size:76px;font-weight:700;color:var(--ink);letter-spacing:-0.045em;line-height:0.94;font-variant-numeric:tabular-nums}
.r-line{font-size:20px;font-weight:600;color:var(--t2);letter-spacing:-0.02em;margin-bottom:7px}
.r-sub{font-size:12.5px;color:var(--t3);line-height:1.65;margin-bottom:22px;
max-width:440px;margin-left:auto;margin-right:auto}
.r-sub strong{color:var(--t2);font-weight:500}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;text-align:left}
.tw{padding:14px 18px 16px}
.r-record{font-size:9.5px;color:var(--t4);letter-spacing:0.06em;margin-bottom:20px;
line-height:1.8;font-variant-numeric:tabular-nums}
.r-next{background:#FFFFFF;
border:0.5px solid rgba(28,20,16,0.12);border-radius:16px;box-shadow:0 1px 2px rgba(28,20,16,0.04),0 8px 24px rgba(28,20,16,0.07);padding:13px 18px;
display:flex;align-items:center;gap:14px;margin-bottom:14px;text-align:left}
.r-next .nx{flex:1}
.r-next b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.r-next span{font-size:11px;color:var(--t3);margin-top:2px;display:block}
/* -- SCREEN 5: CONTRACTS LIST -- */
.shell-top{background:rgba(250,244,236,0.86);border-bottom:0.5px solid rgba(28,20,16,0.15);
padding:16px 28px;display:flex;align-items:center;gap:16px;flex-shrink:0;position:relative;z-index:5}
.shell-search{flex:1;max-width:320px;background:rgba(28,20,16,0.05);
border:0.5px solid rgba(28,20,16,0.10);border-radius:8px;
padding:8px 14px;font-size:13px;color:var(--t3);display:flex;align-items:center;gap:8px}
.shell-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.new-contract{background:var(--ink);color:rgba(255,242,220,0.96);padding:8px 16px;
border-radius:8px;font-size:12.5px;font-weight:500;cursor:pointer}
.shell-main{flex:1;overflow-y:auto;position:relative;z-index:2}
.shell-content{padding:28px 40px 48px;max-width:920px;margin:0 auto;position:relative;z-index:2}
.list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.list-head h1{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-0.025em}
.tabs{display:flex;gap:2px;margin-bottom:20px;padding:3px;
background:rgba(28,20,16,0.05);border-radius:12px;width:fit-content}
.tab{padding:6px 16px;border-radius:9px;font-size:12px;font-weight:500;color:var(--t3);cursor:pointer}
.tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(28,20,16,0.10)}
.clist{display:flex;flex-direction:column;gap:10px}
.ccard{background:#fff;border-radius:16px;padding:18px 22px;
border:0.5px solid rgba(28,20,16,0.12);cursor:pointer;
box-shadow:0 1px 2px rgba(28,20,16,0.04),0 6px 20px rgba(28,20,16,0.06);
display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
transition:box-shadow .15s}
.ccard:hover{box-shadow:0 2px 4px rgba(28,20,16,0.06),0 10px 28px rgba(28,20,16,0.10)}
.ccard.active-card{border-color:rgba(217,79,26,0.18);background:rgba(255,252,248,1)}
.cc-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.cc-name{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.cc-parties{font-size:11.5px;color:var(--t3)}
.cc-parties strong{color:var(--t2);font-weight:500}
.cc-meta{display:flex;align-items:center;gap:14px;margin-top:6px}
.cc-time{font-size:10px;color:var(--t4);letter-spacing:0.03em;font-variant-numeric:tabular-nums}
.cc-right{text-align:right}
.cc-amount{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.025em;
font-variant-numeric:tabular-nums;display:block;margin-bottom:6px}
.cc-progress{width:80px;height:4px;background:rgba(28,20,16,0.08);border-radius:2px;margin-left:auto;
display:flex;gap:2px;overflow:hidden}
.ccp{height:100%;border-radius:2px}
.cc-prog-fill{height:100%;border-radius:2px}
.empty-state{text-align:center;padding:48px 20px}
.empty-state .es-icon{width:44px;height:44px;border-radius:12px;background:rgba(28,20,16,0.05);
margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.empty-state p{font-size:13px;color:var(--t3);line-height:1.6}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--ink:#1C1410; --t2:rgba(28,20,16,0.72); --t3:rgba(28,20,16,0.48);
--t4:rgba(28,20,16,0.32); --t5:rgba(28,20,16,0.16);
--or:#C04010; --or-b:#D94F1A; --gr:#1A5C34; --rd:#B52424;
--paper:#FDF8E8; --cream:#FAF4EE; --sans:'Inter',-apple-system,sans-serif;
}
html,body{background:#1A1A18;font-family:var(--sans);-webkit-font-smoothing:antialiased}
.page{padding:40px 24px 88px;display:flex;flex-direction:column;align-items:center;gap:20px}
.cap{width:100%;max-width:1280px;padding:28px 4px 8px}
.cap .cn{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(28,20,16,0.38)}
.cap h2{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-top:5px}
.frame{width:100%;max-width:1280px;border-radius:0;overflow:hidden;
box-shadow:0 0 0 0.5px rgba(28,20,16,0.14),0 48px 96px rgba(28,20,16,0.20)}
.chrome{background:#1A1A18;padding:10px 16px;display:flex;align-items:center;gap:14px;border-bottom:0.5px solid rgba(255,255,255,0.05)}
.cdots{display:flex;gap:6px}.cdot{width:11px;height:11px;border-radius:50%}
.curl{flex:1;max-width:380px;margin:0 auto;background:rgba(255,255,255,0.06);border-radius:5px;padding:5px 0;font-size:10px;color:rgba(255,255,255,0.28);text-align:center}
.app{display:flex;position:relative;overflow:hidden;height:800px;background:var(--cream)}
.blob{position:absolute;pointer-events:none;z-index:0;will-change:transform;opacity:0.46}
.app.hero .blob{opacity:1}
canvas.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0.26;mix-blend-mode:soft-light}
@keyframes ksh-pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,79,26,0.40)}50%{box-shadow:0 0 0 5px rgba(217,79,26,0)}}
.pulse{animation:ksh-pulse 2.4s ease-in-out infinite}
/* sidebar */
.sb{width:240px;flex-shrink:0;background:rgba(250,244,236,0.86);border-right:0.5px solid rgba(28,20,16,0.16);display:flex;flex-direction:column;position:relative;z-index:5}
.sb-brand{padding:22px 22px 20px;border-bottom:0.5px solid rgba(28,20,16,0.12)}
.sb-nav{flex:1;padding:12px;display:flex;flex-direction:column;gap:2px}
.ni{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:13px;color:var(--t3);cursor:pointer;letter-spacing:-0.01em;transition:background .15s,color .15s}
.ni:hover{background:rgba(28,20,16,0.04);color:var(--t2)}
.ni.on{background:rgba(28,20,16,0.08);color:var(--ink);font-weight:600}
.sb-foot{padding:14px 18px;border-top:0.5px solid rgba(28,20,16,0.12);display:flex;align-items:center;gap:10px}
.uav{width:30px;height:30px;border-radius:50%;background:rgba(28,20,16,0.07);border:0.5px solid rgba(28,20,16,0.14);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--t2);flex-shrink:0}
.uname{font-size:12px;font-weight:600;color:var(--t2)}
.urole{font-size:9px;color:var(--t4);letter-spacing:0.08em;text-transform:uppercase;margin-top:1px}
/* strip */
.main{flex:1;overflow-y:auto;position:relative;z-index:2;display:flex;flex-direction:column}
.strip{display:grid;grid-template-columns:repeat(4,1fr);flex-shrink:0;background:rgba(250,244,236,0.86);border-bottom:0.5px solid rgba(28,20,16,0.15)}
.sc{padding:14px 22px;border-right:0.5px solid rgba(28,20,16,0.10)}
.sc:last-child{border-right:none}
.sk{font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4);display:block;margin-bottom:4px}
.sv{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.sv.or{color:var(--or)}.sv.dim{color:var(--t3);font-weight:400}.sv.rd{color:var(--rd)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--or-b);flex-shrink:0}
/* content */
.content{padding:30px 40px 44px;width:100%;max-width:920px;margin:0 auto;position:relative;z-index:2}
.eye{font-size:10px;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;color:var(--t4);display:block;margin-bottom:9px;font-variant-numeric:tabular-nums}
h1.title{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;line-height:1.15;margin-bottom:6px}
.subline{font-size:13px;color:var(--t3);line-height:1.65;margin-bottom:20px;max-width:620px}
.subline strong{color:var(--t2);font-weight:500}
/* cards */
.card{background:#fff;border-radius:16px;overflow:hidden;border:0.5px solid rgba(28,20,16,0.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(28,20,16,0.04),0 12px 32px rgba(28,20,16,0.08);margin-bottom:12px}
.card:last-child{margin-bottom:0}
.paper-card{background:var(--paper);border-radius:16px;overflow:hidden;border:0.5px solid rgba(28,20,16,0.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 1px 2px rgba(28,20,16,0.04),0 12px 32px rgba(28,20,16,0.08)}
.cols{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;align-items:stretch}
.lbl{font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4);display:flex;align-items:center;gap:7px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.or{color:var(--or);background:rgba(217,79,26,0.10);border:0.5px solid rgba(217,79,26,0.26)}
.chip.gr{color:var(--gr);background:rgba(26,92,52,0.10);border:0.5px solid rgba(26,92,52,0.24)}
.chip.dm{color:var(--t4);background:rgba(28,20,16,0.05);border:0.5px solid rgba(28,20,16,0.11)}
.chip.rd{color:var(--rd);background:rgba(181,36,36,0.09);border:0.5px solid rgba(181,36,36,0.22)}
.led{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.led .k{font-size:12px;color:var(--t3);white-space:nowrap}
.led .fill{flex:1;border-bottom:1.5px dotted rgba(28,20,16,0.15);transform:translateY(-4px)}
.led .v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.led.sm .k{font-size:11px}.led.sm .v{font-size:12px}
.led.tot{border-top:1px solid rgba(28,20,16,0.10);margin-top:4px;padding-top:10px}
.led.tot .k{font-weight:600;color:var(--t2)}.led.tot .fill{border-bottom:none}
.btn{padding:12px 20px;border-radius:10px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-0.01em;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-ink{background:var(--ink);color:rgba(255,242,220,0.96)}
.btn-out{background:rgba(255,255,255,0.55);color:var(--ink);border:0.5px solid rgba(28,20,16,0.16);backdrop-filter:blur(10px)}
.btn-rd{background:var(--rd);color:#FFF3EC}
.btn-row{display:flex;gap:8px}
.fn-note{font-size:10.5px;color:var(--t4);text-align:center;line-height:1.7;font-variant-numeric:tabular-nums}
/* -- 06 HOME -- */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.stat{background:#fff;border-radius:16px;border:0.5px solid rgba(28,20,16,0.12);padding:16px 20px;
box-shadow:0 1px 2px rgba(28,20,16,0.04),0 8px 24px rgba(28,20,16,0.06)}
.stat .sa{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-0.035em;font-variant-numeric:tabular-nums;margin:7px 0 3px}
.stat .ss{font-size:10.5px;color:var(--t3)}
.att-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
padding:14px 18px;border-radius:12px;background:rgba(217,79,26,0.05);
border:0.5px solid rgba(217,79,26,0.20);box-shadow:0 2px 12px rgba(217,79,26,0.08);cursor:pointer;margin:10px 14px}
.att-row .at-t b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.att-row .at-t span{display:block;font-size:11px;color:var(--or);margin-top:2px}
.att-quiet{margin:10px 14px 14px;padding:13px 18px;border-radius:12px;background:rgba(28,20,16,0.025);
border:0.5px solid rgba(28,20,16,0.08);font-size:12px;color:var(--t3)}
.h-act .arow{grid-template-columns:14px 92px 1fr}
/* activity shared */
.a-head{display:flex;justify-content:space-between;align-items:center;padding:15px 20px 12px;border-bottom:1px dashed rgba(28,20,16,0.14)}
.a-list{position:relative;padding:6px 20px 16px}
.a-list::before{content:'';position:absolute;left:26.5px;top:18px;bottom:22px;border-left:1.5px dashed rgba(28,20,16,0.16)}
.arow{display:grid;grid-template-columns:14px 86px 1fr;gap:11px;padding:9px 0}
.adot{width:9px;height:9px;border-radius:50%;margin-top:3px;border:2px solid var(--paper);position:relative;z-index:1;justify-self:center}
.adot.w{border-color:#fff}
.adot.or{background:var(--or)}.adot.gr{background:var(--gr)}.adot.nu{background:rgba(28,20,16,0.30)}.adot.rd{background:var(--rd)}
.arow .at{font-size:9.5px;color:var(--t4);padding-top:2px;letter-spacing:0.03em;font-variant-numeric:tabular-nums}
.arow .ad{font-size:11px;color:var(--t2);line-height:1.55}
/* -- 07 CREATE (tunnel) -- */
.tunnel{display:block}
.t-wrap{position:relative;z-index:2;padding:44px 64px 56px;max-width:1280px;margin:0 auto}
.t-brand{margin-bottom:30px}
.stepper{display:flex;align-items:center;gap:0;margin-bottom:26px;flex-wrap:wrap;row-gap:10px}
.step{display:flex;align-items:center;gap:7px}
.step .sd{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
.step.done .sd{background:var(--gr);color:#fff}
.step.on .sd{background:var(--or-b);color:#fff}
.step.todo .sd{background:rgba(28,20,16,0.07);color:var(--t4);border:0.5px solid rgba(28,20,16,0.14)}
.step .sl{font-size:11px;font-weight:500;color:var(--t3)}
.step.on .sl{color:var(--ink);font-weight:600}
.step-line{width:22px;height:1.5px;background:rgba(28,20,16,0.14);margin:0 8px}
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start}
.t-h{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;margin-bottom:5px}
.t-sub{font-size:12.5px;color:var(--t3);line-height:1.6;margin-bottom:18px}
.m-edit{background:#fff;border-radius:14px;border:0.5px solid rgba(28,20,16,0.12);padding:14px 16px;margin-bottom:8px;
display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center}
.m-edit .mn{font-size:10px;color:var(--t4);font-variant-numeric:tabular-nums}
.m-edit b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.m-edit span{display:block;font-size:10.5px;color:var(--t3);margin-top:2px}
.m-edit .ma{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.m-add{border:1.5px dashed rgba(28,20,16,0.20);border-radius:14px;padding:12px;text-align:center;
font-size:12px;font-weight:500;color:var(--t3);cursor:pointer;margin-bottom:14px}
.run-tot{display:flex;justify-content:space-between;align-items:baseline;padding:12px 4px 0;
border-top:1px solid rgba(28,20,16,0.10)}
.run-tot .k{font-size:12px;color:var(--t3)}
.run-tot .v{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.prev-tag{font-size:9.5px;font-weight:500;letter-spacing:0.10em;text-transform:uppercase;color:var(--t4);
display:block;text-align:center;margin-bottom:10px}
.doc-paper{background:var(--paper);border:0.5px solid rgba(28,20,16,0.12);border-radius:16px;overflow:hidden;
box-shadow:0 1px 2px rgba(28,20,16,0.05),0 12px 32px rgba(28,20,16,0.10);position:relative}
.doc-head{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px dashed rgba(28,20,16,0.16)}
.doc-title{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.025em;line-height:1.2;padding:16px 20px 4px}
.doc-sub{font-size:11px;color:var(--t3);padding:0 20px 12px;line-height:1.6}
.doc-led{padding:4px 20px 12px}
.doc-foot{padding:11px 20px 14px;border-top:1px dashed rgba(28,20,16,0.14);font-size:10.5px;color:var(--t3);line-height:1.65}
/* -- 08 TERMS -- */
.terms-sec{padding:14px 22px;border-bottom:1px dashed rgba(28,20,16,0.13)}
.terms-sec:last-child{border-bottom:none}
.terms-sec h4{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:-0.01em}
.terms-sec p{font-size:11.5px;color:var(--t2);line-height:1.65}
.terms-sec p em{font-style:normal;color:var(--or);font-weight:500}
.stamp-wait{position:absolute;top:16px;right:18px;width:84px;height:84px;border:1.5px dashed rgba(192,68,0,0.35);border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(9deg)}
.stamp-wait span{font-size:7.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:rgba(192,68,0,0.52);text-align:center;line-height:1.7}
.sticky-side{position:sticky;top:20px}
/* -- 09 FUNDING -- */
.custody{display:flex;align-items:stretch;gap:0;margin:20px 0 18px}
.cnode{flex:1;background:#fff;border:0.5px solid rgba(28,20,16,0.12);border-radius:14px;padding:15px 16px;text-align:center;
box-shadow:0 1px 2px rgba(28,20,16,0.04),0 8px 24px rgba(28,20,16,0.06)}
.cnode.hot{border-color:rgba(217,79,26,0.32);background:rgba(255,251,246,1);box-shadow:0 2px 14px rgba(217,79,26,0.12)}
.cnode .cn-l{font-size:9px;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;color:var(--t4);display:block;margin-bottom:5px}
.cnode b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.cnode span{display:block;font-size:10px;color:var(--t3);margin-top:3px;line-height:1.5}
.cnode.hot .cn-l{color:var(--or)}
.carrow{display:flex;align-items:center;padding:0 8px;color:var(--t4)}
.fund-amt{display:flex;align-items:baseline;gap:5px;margin-bottom:4px}
.fund-amt .s{font-size:24px;font-weight:700;color:var(--ink)}
.fund-amt .n{font-size:48px;font-weight:700;color:var(--ink);letter-spacing:-0.045em;line-height:1;font-variant-numeric:tabular-nums}
.pay-method{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#fff;border:0.5px solid rgba(28,20,16,0.12);border-radius:14px;margin-bottom:16px}
.pm-icon{width:34px;height:34px;border-radius:9px;background:rgba(28,20,16,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700;color:var(--t2)}
.pm-name{font-size:13px;font-weight:600;color:var(--ink)}
.pm-sub{font-size:10.5px;color:var(--t4);margin-top:1px}
.pm-change{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--t3);cursor:pointer}
/* -- 10 SUBMIT -- */
.upzone{border:1.5px dashed rgba(28,20,16,0.20);border-radius:14px;padding:16px 18px;margin-bottom:10px}
.upzone.lockzone{background:var(--paper);border-color:rgba(28,20,16,0.22)}
.uz-head{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.uz-head b{font-size:13px;font-weight:600;color:var(--ink)}
.uz-sub{font-size:11px;color:var(--t3);line-height:1.55;margin-bottom:10px}
.frow{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;border:0.5px solid rgba(28,20,16,0.10);border-radius:10px}
.frow+.frow{margin-top:6px}
.f-ic{width:28px;height:28px;border-radius:7px;background:rgba(28,20,16,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.f-n{font-size:12px;font-weight:500;color:var(--ink)}
.f-m{font-size:9.5px;color:var(--t4);margin-top:1px;font-variant-numeric:tabular-nums}
.f-x{margin-left:auto;color:var(--t4);font-size:14px;cursor:pointer}
/* -- 13 ISSUE -- */
.freeze-note{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;background:rgba(181,36,36,0.05);
border:0.5px solid rgba(181,36,36,0.20);border-radius:12px;margin-bottom:16px}
.freeze-note p{font-size:12px;color:var(--rd);line-height:1.6}
.freeze-note p strong{font-weight:600}
.radio-row{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border:0.5px solid rgba(28,20,16,0.12);
border-radius:12px;margin-bottom:8px;cursor:pointer;background:#fff}
.radio-row.sel{border-color:rgba(181,36,36,0.35);background:rgba(181,36,36,0.03)}
.rdo{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(28,20,16,0.25);flex-shrink:0;margin-top:1px;
display:flex;align-items:center;justify-content:center}
.radio-row.sel .rdo{border-color:var(--rd)}
.radio-row.sel .rdo::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--rd)}
.radio-row b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.radio-row span{display:block;font-size:10.5px;color:var(--t3);margin-top:2px;line-height:1.5}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.s3{padding:11px 13px;background:rgba(28,20,16,0.03);border:0.5px solid rgba(28,20,16,0.09);border-radius:11px}
.s3 .fn{font-size:9.5px;color:var(--rd);letter-spacing:0.08em;font-variant-numeric:tabular-nums;display:block;margin-bottom:4px;font-weight:600}
.s3 b{display:block;font-size:11px;font-weight:600;color:var(--ink);margin-bottom:2px}
.s3 p{font-size:9.5px;color:var(--t3);line-height:1.5}
/* -- 14 VAULT -- */
.v-sec{border-bottom:0.5px solid rgba(28,20,16,0.07)}
.v-sec:last-child{border-bottom:none}
.v-head{display:flex;align-items:center;gap:10px;padding:13px 22px 10px}
.v-head b{font-size:12.5px;font-weight:600;color:var(--ink)}
.v-files{padding:0 22px 14px;display:flex;flex-direction:column;gap:6px}
.v-empty{padding:0 22px 14px;font-size:11px;color:var(--t4)}
.dl-btn{margin-left:auto;font-size:11px;font-weight:500;color:rgba(255,242,220,0.96);background:var(--ink);
padding:6px 13px;border-radius:7px;cursor:pointer}
.prev-chip{margin-left:auto;font-size:9px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;
color:var(--t4);background:rgba(28,20,16,0.05);border:0.5px solid rgba(28,20,16,0.11);padding:5px 10px;border-radius:999px}
.own-line{padding:12px 22px 16px;font-size:9.5px;color:var(--t4);letter-spacing:0.05em;line-height:1.8;font-variant-numeric:tabular-nums;border-top:1px dashed rgba(28,20,16,0.13)}
/* -- 15 ACTIVITY FULL -- */
.filters{display:flex;gap:6px;margin-bottom:14px}
.fchip{padding:6px 14px;border-radius:999px;font-size:11px;font-weight:500;color:var(--t3);
background:rgba(28,20,16,0.05);border:0.5px solid rgba(28,20,16,0.10);cursor:pointer}
.fchip.on{background:var(--ink);color:rgba(255,242,220,0.96);border-color:var(--ink)}
.day-head{font-size:9.5px;font-weight:600;letter-spacing:0.11em;text-transform:uppercase;color:var(--t4);
padding:13px 20px 6px;font-variant-numeric:tabular-nums}
.permanote{padding:12px 20px 15px;border-top:1px dashed rgba(28,20,16,0.13);font-size:10px;color:var(--t4);line-height:1.7;text-align:center}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--ink:#1C1410; --t2:rgba(28,20,16,0.72); --t3:rgba(28,20,16,0.48);
--t4:rgba(28,20,16,0.32); --t5:rgba(28,20,16,0.16);
--or:#C04010; --or-b:#D94F1A; --gr:#1A5C34; --rd:#B52424;
--paper:#FDF8E8; --cream:#FAF4EE; --sans:'Inter',-apple-system,sans-serif;
}
html,body{background:#1A1A18;font-family:var(--sans);-webkit-font-smoothing:antialiased}
.page{padding:40px 24px 88px;display:flex;flex-direction:column;align-items:center;gap:20px}
.cap{width:100%;max-width:1280px;padding:28px 4px 8px}
.cap .cn{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(28,20,16,0.38)}
.cap h2{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-top:5px}
.frame{width:100%;max-width:1280px;border-radius:0;overflow:hidden;box-shadow:0 0 0 0.5px rgba(28,20,16,0.14),0 48px 96px rgba(28,20,16,0.20)}
.chrome{background:#1A1A18;padding:10px 16px;display:flex;align-items:center;gap:14px;border-bottom:0.5px solid rgba(255,255,255,0.05)}
.cdots{display:flex;gap:6px}.cdot{width:11px;height:11px;border-radius:50%}
.curl{flex:1;max-width:380px;margin:0 auto;background:rgba(255,255,255,0.06);border-radius:5px;padding:5px 0;font-size:10px;color:rgba(255,255,255,0.28);text-align:center}
.app{display:flex;position:relative;overflow:hidden;height:800px;background:var(--cream)}
.tunnel{display:block}
.blob{position:absolute;pointer-events:none;z-index:0;will-change:transform;opacity:0.46}
.app.hero .blob{opacity:1}
canvas.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0.26;mix-blend-mode:soft-light}
@keyframes ksh-pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,79,26,0.40)}50%{box-shadow:0 0 0 5px rgba(217,79,26,0)}}
.pulse{animation:ksh-pulse 2.4s ease-in-out infinite}
@keyframes ksh-pulse-rd{0%,100%{box-shadow:0 0 0 0 rgba(181,36,36,0.35)}50%{box-shadow:0 0 0 5px rgba(181,36,36,0)}}
.pulse-rd{animation:ksh-pulse-rd 2.4s ease-in-out infinite}
.sb{width:240px;flex-shrink:0;background:rgba(250,244,236,0.86);border-right:0.5px solid rgba(28,20,16,0.16);display:flex;flex-direction:column;position:relative;z-index:5}
.sb-brand{padding:22px 22px 20px;border-bottom:0.5px solid rgba(28,20,16,0.12)}
.sb-nav{flex:1;padding:12px;display:flex;flex-direction:column;gap:2px}
.ni{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:13px;color:var(--t3);cursor:pointer;letter-spacing:-0.01em;transition:background .15s,color .15s}
.ni:hover{background:rgba(28,20,16,0.04);color:var(--t2)}
.ni.on{background:rgba(28,20,16,0.08);color:var(--ink);font-weight:600}
.nbadge{margin-left:auto;font-size:9px;font-weight:600;color:#fff;background:var(--or-b);border-radius:999px;padding:2px 7px;font-variant-numeric:tabular-nums}
.sb-foot{padding:14px 18px;border-top:0.5px solid rgba(28,20,16,0.12);display:flex;align-items:center;gap:10px}
.uav{width:30px;height:30px;border-radius:50%;background:rgba(28,20,16,0.07);border:0.5px solid rgba(28,20,16,0.14);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--t2);flex-shrink:0}
.uname{font-size:12px;font-weight:600;color:var(--t2)}
.urole{font-size:9px;color:var(--t4);letter-spacing:0.08em;text-transform:uppercase;margin-top:1px}
.main{flex:1;overflow-y:auto;position:relative;z-index:2;display:flex;flex-direction:column}
.strip{display:grid;grid-template-columns:repeat(4,1fr);flex-shrink:0;background:rgba(250,244,236,0.86);border-bottom:0.5px solid rgba(28,20,16,0.15)}
.sc{padding:14px 22px;border-right:0.5px solid rgba(28,20,16,0.10)}
.sc:last-child{border-right:none}
.sk{font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4);display:block;margin-bottom:4px}
.sv{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.sv.or{color:var(--or)}.sv.dim{color:var(--t3);font-weight:400}.sv.rd{color:var(--rd)}.sv.gr{color:var(--gr)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--or-b);flex-shrink:0}
.live-dot.rd{background:var(--rd)}
.content{padding:30px 40px 44px;width:100%;max-width:920px;margin:0 auto;position:relative;z-index:2}
.eye{font-size:10px;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;color:var(--t4);display:block;margin-bottom:9px;font-variant-numeric:tabular-nums}
h1.title{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;line-height:1.15;margin-bottom:6px}
.subline{font-size:13px;color:var(--t3);line-height:1.65;margin-bottom:20px;max-width:620px}
.subline strong{color:var(--t2);font-weight:500}
.card{background:#fff;border-radius:16px;overflow:hidden;border:0.5px solid rgba(28,20,16,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(28,20,16,0.04),0 12px 32px rgba(28,20,16,0.08);margin-bottom:12px}
.card:last-child{margin-bottom:0}
.paper-card{background:var(--paper);border-radius:16px;overflow:hidden;border:0.5px solid rgba(28,20,16,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 1px 2px rgba(28,20,16,0.04),0 12px 32px rgba(28,20,16,0.08)}
.lbl{font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4);display:flex;align-items:center;gap:7px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.or{color:var(--or);background:rgba(217,79,26,0.10);border:0.5px solid rgba(217,79,26,0.26)}
.chip.gr{color:var(--gr);background:rgba(26,92,52,0.10);border:0.5px solid rgba(26,92,52,0.24)}
.chip.dm{color:var(--t4);background:rgba(28,20,16,0.05);border:0.5px solid rgba(28,20,16,0.11)}
.chip.rd{color:var(--rd);background:rgba(181,36,36,0.09);border:0.5px solid rgba(181,36,36,0.22)}
.led{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.led .k{font-size:12px;color:var(--t3);white-space:nowrap}
.led .fill{flex:1;border-bottom:1.5px dotted rgba(28,20,16,0.15);transform:translateY(-4px)}
.led .v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.led.sm .k{font-size:11px}.led.sm .v{font-size:12px}
.led.tot{border-top:1px solid rgba(28,20,16,0.10);margin-top:4px;padding-top:10px}
.led.tot .k{font-weight:600;color:var(--t2)}.led.tot .fill{border-bottom:none}
.btn{padding:12px 20px;border-radius:10px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-0.01em;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-ink{background:var(--ink);color:rgba(255,242,220,0.96)}
.btn-out{background:rgba(255,255,255,0.55);color:var(--ink);border:0.5px solid rgba(28,20,16,0.16);backdrop-filter:blur(10px)}
.btn-rd{background:var(--rd);color:#FFF3EC}
.btn-row{display:flex;gap:8px}
.fn-note{font-size:10.5px;color:var(--t4);text-align:center;line-height:1.7;font-variant-numeric:tabular-nums}
.t-wrap{position:relative;z-index:2;padding:44px 64px 56px;max-width:1280px;margin:0 auto}
.t-brand{margin-bottom:30px}
/* file rows */
.frow{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;border:0.5px solid rgba(28,20,16,0.10);border-radius:10px}
.frow+.frow{margin-top:6px}
.f-ic{width:28px;height:28px;border-radius:7px;background:rgba(28,20,16,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.f-n{font-size:12px;font-weight:500;color:var(--ink)}
.f-m{font-size:9.5px;color:var(--t4);margin-top:1px;font-variant-numeric:tabular-nums}
/* criteria ref (16) */
.cr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:0.5px solid rgba(28,20,16,0.06);font-size:12.5px;color:var(--t2)}
.cr:last-child{border-bottom:none}
.cbox{width:16px;height:16px;border-radius:5px;border:1.5px solid rgba(28,20,16,0.20);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cbox.flag{background:rgba(181,36,36,0.08);border-color:rgba(181,36,36,0.45)}
.note-box{border:0.5px solid rgba(28,20,16,0.14);border-radius:12px;padding:13px 16px;font-size:12.5px;color:var(--t2);line-height:1.65;background:rgba(28,20,16,0.015);margin-bottom:14px}
.note-box .ph{color:var(--t4)}
.once-note{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;background:rgba(217,79,26,0.05);border:0.5px solid rgba(217,79,26,0.20);border-radius:12px;margin-bottom:14px}
.once-note p{font-size:12px;color:var(--or);line-height:1.6}
.once-note p strong{font-weight:600}
/* paused window (17) */
.win-paused{display:flex;align-items:center;gap:12px;padding:13px 16px;background:rgba(28,20,16,0.03);border:0.5px solid rgba(28,20,16,0.10);border-radius:12px;margin-bottom:16px}
.wp-ticks{display:flex;gap:4px;align-items:center}
.wpt{width:26px;height:4px;border-radius:2px;background:rgba(28,20,16,0.10)}
.wpt.on{background:rgba(28,20,16,0.28)}
/* quote card (17) */
.quote{background:var(--paper);border:0.5px solid rgba(28,20,16,0.12);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.quote .qh{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.quote .qh b{font-size:11.5px;font-weight:600;color:var(--ink)}
.quote .qh span{font-size:9.5px;color:var(--t4);font-variant-numeric:tabular-nums}
.quote p{font-size:12.5px;color:var(--t2);line-height:1.65}
/* dispute (18) */
.clock48{display:flex;align-items:center;gap:12px;padding:13px 16px;background:rgba(181,36,36,0.05);border:0.5px solid rgba(181,36,36,0.20);border-radius:12px;margin-bottom:16px}
.clock48 .ck-t{flex:1}
.clock48 b{display:block;font-size:12.5px;font-weight:600;color:var(--rd)}
.clock48 span{display:block;font-size:10.5px;color:var(--t3);margin-top:2px}
.ev-zone{border:1.5px dashed rgba(28,20,16,0.20);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.ev-zone .uz-head{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.ev-zone .uz-head b{font-size:13px;font-weight:600;color:var(--ink)}
.ev-zone .uz-sub{font-size:11px;color:var(--t3);line-height:1.55;margin-bottom:10px}
.side-state{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.ss-box{padding:11px 14px;border-radius:11px;border:0.5px solid rgba(28,20,16,0.10);background:rgba(28,20,16,0.025)}
.ss-box b{display:block;font-size:11px;font-weight:600;color:var(--ink);margin-bottom:2px}
.ss-box span{font-size:10px;color:var(--t3)}
.ss-box.done{background:rgba(26,92,52,0.05);border-color:rgba(26,92,52,0.18)}
/* notifications (20) */
.nrow{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:start;padding:13px 20px;border-bottom:0.5px solid rgba(28,20,16,0.06);cursor:pointer}
.nrow:last-child{border-bottom:none}
.nrow.unread{background:rgba(217,79,26,0.035)}
.ndot{width:8px;height:8px;border-radius:50%;margin-top:4px}
.ndot.or{background:var(--or)}.ndot.gr{background:var(--gr)}.ndot.nu{background:rgba(28,20,16,0.25)}.ndot.rd{background:var(--rd)}
.nrow b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.nrow b .ctag{font-weight:500;color:var(--t4);font-size:10px;margin-left:7px;letter-spacing:0.04em}
.nrow p{font-size:11px;color:var(--t3);margin-top:2px;line-height:1.5}
.nrow .nt{font-size:9.5px;color:var(--t4);white-space:nowrap;padding-top:3px;font-variant-numeric:tabular-nums}
.mark-read{font-size:11px;font-weight:500;color:var(--t3);cursor:pointer}
/* payments (21) */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.stat{background:#fff;border-radius:16px;border:0.5px solid rgba(28,20,16,0.12);padding:16px 20px;box-shadow:0 1px 2px rgba(28,20,16,0.04),0 8px 24px rgba(28,20,16,0.06)}
.stat .sa{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-0.035em;font-variant-numeric:tabular-nums;margin:7px 0 3px}
.stat .ss{font-size:10.5px;color:var(--t3)}
.transit{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:15px 20px;background:rgba(217,79,26,0.05);border:0.5px solid rgba(217,79,26,0.20);border-radius:12px;margin:10px 14px 14px;box-shadow:0 2px 12px rgba(217,79,26,0.08)}
.transit b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.transit span{display:block;font-size:11px;color:var(--or);margin-top:2px}
.t-steps{display:flex;align-items:center;gap:6px}
.t-node{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(28,20,16,0.20);background:#fff}
.t-node.done{background:var(--gr);border-color:var(--gr)}
.t-node.now{background:var(--or-b);border-color:var(--or-b)}
.t-link{width:22px;height:1.5px;background:rgba(28,20,16,0.14)}
.t-link.done{background:var(--gr)}
.prow{display:grid;grid-template-columns:86px 1fr auto;gap:12px;padding:10px 20px;border-bottom:1px dashed rgba(28,20,16,0.10);align-items:baseline}
.prow:last-child{border-bottom:none}
.prow .pt{font-size:9.5px;color:var(--t4);letter-spacing:0.03em;font-variant-numeric:tabular-nums}
.prow .pd{font-size:11.5px;color:var(--t2)}
.prow .pa{font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.prow .pa.gr{color:var(--gr)}
/* profile (22) */
.prof-head{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:0.5px solid rgba(28,20,16,0.08)}
.pav{width:56px;height:56px;border-radius:50%;background:rgba(28,20,16,0.07);border:0.5px solid rgba(28,20,16,0.14);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;color:var(--t2);flex-shrink:0}
.prof-head .pn{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;display:flex;align-items:center;gap:9px}
.prof-head .pm{font-size:11.5px;color:var(--t3);margin-top:3px}
.badge{font-size:9px;font-weight:600;color:var(--gr);background:rgba(26,92,52,0.10);border:0.5px solid rgba(26,92,52,0.25);padding:3px 8px;border-radius:999px}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:0.5px solid rgba(28,20,16,0.08)}
.pstat{padding:14px 20px;border-right:0.5px solid rgba(28,20,16,0.07)}
.pstat:last-child{border-right:none}
.pstat .pv{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;margin:5px 0 2px}
.pstat .ps{font-size:10px;color:var(--t3)}
/* amendment (23) */
.m-edit{background:#fff;border-radius:14px;border:0.5px solid rgba(28,20,16,0.12);padding:14px 16px;margin-bottom:8px;display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center}
.m-edit.lockrow{background:rgba(28,20,16,0.025);opacity:0.6}
.m-edit .mn{font-size:10px;color:var(--t4);font-variant-numeric:tabular-nums}
.m-edit b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.m-edit span{display:block;font-size:10.5px;color:var(--t3);margin-top:2px}
.m-edit .ma{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.delta{font-size:10px;font-weight:600;color:var(--or);font-variant-numeric:tabular-nums}
/* completed (25) */
.done-hero{text-align:center;padding:6px 0 4px}
.done-hero .da{font-size:54px;font-weight:700;color:var(--ink);letter-spacing:-0.045em;line-height:1;font-variant-numeric:tabular-nums}
.done-hero .ds{font-size:22px;font-weight:700;color:var(--ink)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--ink:#1C1410; --t2:rgba(28,20,16,0.72); --t3:rgba(28,20,16,0.48);
--t4:rgba(28,20,16,0.32); --t5:rgba(28,20,16,0.16);
--or:#C04010; --or-b:#D94F1A; --gr:#1A5C34; --rd:#B52424;
--paper:#FDF8E8; --cream:#FAF4EE; --sans:'Inter',-apple-system,sans-serif;
}
html,body{background:#1A1A18;font-family:var(--sans);-webkit-font-smoothing:antialiased}
.page{padding:40px 24px 88px;display:flex;flex-direction:column;align-items:center;gap:20px}
.cap{width:100%;max-width:1280px;padding:28px 4px 8px}
.cap .cn{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(28,20,16,0.38)}
.cap h2{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-top:5px}
.frame{width:100%;max-width:1280px;border-radius:0;overflow:hidden;box-shadow:0 0 0 0.5px rgba(28,20,16,0.14),0 48px 96px rgba(28,20,16,0.20)}
.chrome{background:#1A1A18;padding:10px 16px;display:flex;align-items:center;gap:14px;border-bottom:0.5px solid rgba(255,255,255,0.05)}
.cdots{display:flex;gap:6px}.cdot{width:11px;height:11px;border-radius:50%}
.curl{flex:1;max-width:380px;margin:0 auto;background:rgba(255,255,255,0.06);border-radius:5px;padding:5px 0;font-size:10px;color:rgba(255,255,255,0.28);text-align:center}
.app{display:flex;position:relative;overflow:hidden;height:800px;background:var(--cream)}
.tunnel{display:block}
.blob{position:absolute;pointer-events:none;z-index:0;will-change:transform;opacity:0.46}
.app.hero .blob{opacity:1}
canvas.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0.26;mix-blend-mode:soft-light}
@keyframes ksh-pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,79,26,0.40)}50%{box-shadow:0 0 0 5px rgba(217,79,26,0)}}
.pulse{animation:ksh-pulse 2.4s ease-in-out infinite}
.sb{width:240px;flex-shrink:0;background:rgba(250,244,236,0.86);border-right:0.5px solid rgba(28,20,16,0.16);display:flex;flex-direction:column;position:relative;z-index:5}
.sb-brand{padding:22px 22px 20px;border-bottom:0.5px solid rgba(28,20,16,0.12)}
.sb-nav{flex:1;padding:12px;display:flex;flex-direction:column;gap:2px}
.ni{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:13px;color:var(--t3);cursor:pointer;letter-spacing:-0.01em}
.ni:hover{background:rgba(28,20,16,0.04);color:var(--t2)}
.ni.on{background:rgba(28,20,16,0.08);color:var(--ink);font-weight:600}
.sb-foot{padding:14px 18px;border-top:0.5px solid rgba(28,20,16,0.12);display:flex;align-items:center;gap:10px}
.uav{width:30px;height:30px;border-radius:50%;background:rgba(28,20,16,0.07);border:0.5px solid rgba(28,20,16,0.14);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--t2);flex-shrink:0}
.uname{font-size:12px;font-weight:600;color:var(--t2)}
.urole{font-size:9px;color:var(--t4);letter-spacing:0.08em;text-transform:uppercase;margin-top:1px}
.main{flex:1;overflow-y:auto;position:relative;z-index:2;display:flex;flex-direction:column}
.content{padding:30px 40px 44px;width:100%;max-width:920px;margin:0 auto;position:relative;z-index:2}
.eye{font-size:10px;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;color:var(--t4);display:block;margin-bottom:9px;font-variant-numeric:tabular-nums}
h1.title{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;line-height:1.15;margin-bottom:6px}
.subline{font-size:13px;color:var(--t3);line-height:1.65;margin-bottom:20px;max-width:620px}
.subline strong{color:var(--t2);font-weight:500}
.card{background:#fff;border-radius:16px;overflow:hidden;border:0.5px solid rgba(28,20,16,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(28,20,16,0.04),0 12px 32px rgba(28,20,16,0.08);margin-bottom:12px}
.card:last-child{margin-bottom:0}
.paper-card{background:var(--paper);border-radius:16px;overflow:hidden;border:0.5px solid rgba(28,20,16,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 1px 2px rgba(28,20,16,0.04),0 12px 32px rgba(28,20,16,0.08)}
.lbl{font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--t4);display:flex;align-items:center;gap:7px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.or{color:var(--or);background:rgba(217,79,26,0.10);border:0.5px solid rgba(217,79,26,0.26)}
.chip.gr{color:var(--gr);background:rgba(26,92,52,0.10);border:0.5px solid rgba(26,92,52,0.24)}
.chip.dm{color:var(--t4);background:rgba(28,20,16,0.05);border:0.5px solid rgba(28,20,16,0.11)}
.led{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.led .k{font-size:12px;color:var(--t3);white-space:nowrap}
.led .fill{flex:1;border-bottom:1.5px dotted rgba(28,20,16,0.15);transform:translateY(-4px)}
.led .v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.led.sm .k{font-size:11px}.led.sm .v{font-size:12px}
.led.tot{border-top:1px solid rgba(28,20,16,0.10);margin-top:4px;padding-top:10px}
.led.tot .k{font-weight:600;color:var(--t2)}.led.tot .fill{border-bottom:none}
.btn{padding:12px 20px;border-radius:10px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-0.01em;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-ink{background:var(--ink);color:rgba(255,242,220,0.96)}
.btn-out{background:rgba(255,255,255,0.55);color:var(--ink);border:0.5px solid rgba(28,20,16,0.16);backdrop-filter:blur(10px)}
.btn-gr{background:var(--gr);color:#EAF7EE}
.btn-row{display:flex;gap:8px}
.fn-note{font-size:10.5px;color:var(--t4);text-align:center;line-height:1.7;font-variant-numeric:tabular-nums}
.t-wrap{position:relative;z-index:2;padding:40px 64px 52px;max-width:1280px;margin:0 auto}
.t-brand{margin-bottom:26px}
/* inputs */
.field{margin-bottom:14px}
.field label{font-size:10px;font-weight:500;letter-spacing:0.10em;text-transform:uppercase;color:var(--t4);display:block;margin-bottom:7px}
.inp{width:100%;background:#fff;border:0.5px solid rgba(28,20,16,0.16);border-radius:11px;padding:12px 14px;font-family:var(--sans);font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:9px}
.inp.filled{font-weight:500}
.inp .pre{color:var(--t4);font-weight:500;border-right:0.5px solid rgba(28,20,16,0.14);padding-right:9px}
.inp .ph{color:var(--t4)}
.inp.focus{border-color:rgba(217,79,26,0.40);box-shadow:0 0 0 3px rgba(217,79,26,0.10)}
/* stepper */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:24px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:7px}
.step .sd{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;font-variant-numeric:tabular-nums}
.step.done .sd{background:var(--gr);color:#fff}
.step.on .sd{background:var(--or-b);color:#fff}
.step.todo .sd{background:rgba(28,20,16,0.07);color:var(--t4);border:0.5px solid rgba(28,20,16,0.14)}
.step .sl{font-size:11px;font-weight:500;color:var(--t3)}
.step.on .sl{color:var(--ink);font-weight:600}
.step-line{width:22px;height:1.5px;background:rgba(28,20,16,0.14);margin:0 8px}
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start}
.t-h{font-size:23px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;margin-bottom:5px}
.t-sub{font-size:12.5px;color:var(--t3);line-height:1.6;margin-bottom:18px}
.prev-tag{font-size:9.5px;font-weight:500;letter-spacing:0.10em;text-transform:uppercase;color:var(--t4);display:block;text-align:center;margin-bottom:10px}
.doc-paper{background:var(--paper);border:0.5px solid rgba(28,20,16,0.12);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(28,20,16,0.05),0 12px 32px rgba(28,20,16,0.10);position:relative}
.doc-head{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px dashed rgba(28,20,16,0.16)}
.doc-title{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.025em;line-height:1.2;padding:16px 20px 4px}
.doc-sub{font-size:11px;color:var(--t3);padding:0 20px 12px;line-height:1.6}
.doc-led{padding:4px 20px 12px}
.doc-foot{padding:11px 20px 14px;border-top:1px dashed rgba(28,20,16,0.14);font-size:10.5px;color:var(--t3);line-height:1.65}
.doc-sec{padding:11px 20px;border-bottom:1px dashed rgba(28,20,16,0.13)}
.doc-sec h5{font-size:10px;font-weight:600;color:var(--ink);letter-spacing:0.02em;margin-bottom:5px;text-transform:uppercase}
.doc-sec p{font-size:11px;color:var(--t2);line-height:1.6}
.doc-sec .inc{color:var(--gr);font-weight:500}.doc-sec .exc{color:var(--rd);font-weight:500}
/* list-add rows */
.add-row{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border:0.5px solid rgba(28,20,16,0.12);border-radius:11px;margin-bottom:7px;font-size:13px;color:var(--ink)}
.add-row .gx{color:var(--gr)}.add-row .rx{color:var(--rd)}
.add-row .rm{margin-left:auto;color:var(--t4);cursor:pointer}
.add-new{border:1.5px dashed rgba(28,20,16,0.20);border-radius:11px;padding:11px;text-align:center;font-size:12px;font-weight:500;color:var(--t3);cursor:pointer;margin-bottom:6px}
.add-new.gr{border-color:rgba(26,92,52,0.30);color:var(--gr)}
.add-new.rd{border-color:rgba(181,36,36,0.28);color:var(--rd)}
/* criteria builder */
.mtab{display:flex;gap:2px;padding:3px;background:rgba(28,20,16,0.05);border-radius:11px;width:fit-content;margin-bottom:16px}
.mtab .mt{padding:7px 15px;border-radius:8px;font-size:11.5px;font-weight:500;color:var(--t3);cursor:pointer;font-variant-numeric:tabular-nums}
.mtab .mt.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(28,20,16,0.10)}
.crit-add{display:flex;align-items:center;gap:11px;padding:11px 14px;border:0.5px solid rgba(28,20,16,0.12);border-radius:11px;margin-bottom:7px;background:#fff}
.crit-add .cbx{width:17px;height:17px;border-radius:5px;border:1.5px solid rgba(28,20,16,0.22);flex-shrink:0}
.crit-add input,.crit-add .ct{flex:1;font-size:12.5px;color:var(--ink);border:none;background:none}
/* terms cards (32) */
.term-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:15px 18px;border:0.5px solid rgba(28,20,16,0.12);border-radius:13px;margin-bottom:9px;background:#fff}
.term-card .tc-t b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.term-card .tc-t span{display:block;font-size:11px;color:var(--t3);margin-top:3px;line-height:1.5}
.stepn{display:flex;align-items:center;gap:0;border:0.5px solid rgba(28,20,16,0.14);border-radius:9px;overflow:hidden}
.stepn b{font-size:14px;font-weight:700;color:var(--ink);padding:7px 14px;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}
.stepn .pm{width:30px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(28,20,16,0.04);color:var(--t3);cursor:pointer;font-size:15px}
.tog{width:40px;height:23px;border-radius:999px;background:rgba(28,20,16,0.15);position:relative;cursor:pointer;flex-shrink:0}
.tog.on{background:var(--gr)}
.tog.locked{background:var(--gr);opacity:0.5;cursor:not-allowed}
.tog::after{content:'';position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.tog.on::after,.tog.locked::after{left:18px}
/* whatsapp send (33) */
.wa-prev{background:#fff;border:0.5px solid rgba(28,20,16,0.12);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.wa-bub{background:#DCF8C6;border-radius:12px 12px 12px 3px;padding:11px 13px;font-size:12px;color:#1a3d1a;line-height:1.55;max-width:280px;position:relative}
.wa-bub .lnk{color:#0a6ebd;word-break:break-all}
.wa-meta{font-size:9.5px;color:var(--t4);margin-top:7px;text-align:right}
/* phone frames (26,27) */
.phone-ground{display:flex;flex:1;justify-content:center;align-items:center;gap:40px;height:100%;position:relative;z-index:2;flex-wrap:wrap;padding:30px}
.phone{width:340px;background:#0E0E0C;border-radius:46px;padding:9px;box-shadow:0 30px 70px rgba(28,20,16,0.30),0 0 0 1px rgba(28,20,16,0.20)}
.phone-scr{background:var(--cream);border-radius:38px;overflow:hidden;height:710px;position:relative;display:flex;flex-direction:column}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:15px 24px 0;font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;flex-shrink:0;position:relative;z-index:3}
.ph-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:108px;height:26px;background:#0E0E0C;border-radius:0 0 16px 16px;z-index:4}
.ph-body{flex:1;padding:36px 26px 26px;position:relative;z-index:2;display:flex;flex-direction:column}
.ph-blob{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:38px}
.ph-cap{font-size:9px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(28,20,16,0.40);text-align:center;margin-top:14px;font-variant-numeric:tabular-nums}
.otp-row{display:flex;gap:9px;justify-content:center;margin:6px 0 18px}
.otp-box{width:42px;height:52px;border-radius:12px;border:0.5px solid rgba(28,20,16,0.18);background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.otp-box.filled{border-color:rgba(217,79,26,0.40)}
.otp-box.cursor{border-color:rgba(217,79,26,0.55);box-shadow:0 0 0 3px rgba(217,79,26,0.10)}
.intent-card{background:#fff;border:0.5px solid rgba(28,20,16,0.14);border-radius:16px;padding:18px;display:flex;align-items:center;gap:14px;margin-bottom:11px;cursor:pointer;box-shadow:0 1px 2px rgba(28,20,16,0.04),0 8px 20px rgba(28,20,16,0.05)}
.intent-card.sel{border-color:rgba(217,79,26,0.32);background:rgba(255,251,246,1);box-shadow:0 2px 14px rgba(217,79,26,0.10)}
.ic-ic{width:42px;height:42px;border-radius:12px;background:rgba(217,79,26,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.intent-card b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.intent-card span{display:block;font-size:11px;color:var(--t3);margin-top:2px;line-height:1.45}
/* diff (35) */
.diff-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.diff-col{border-radius:13px;padding:14px 16px;border:0.5px solid rgba(28,20,16,0.12)}
.diff-col.old{background:rgba(28,20,16,0.025)}
.diff-col.new{background:rgba(217,79,26,0.04);border-color:rgba(217,79,26,0.22)}
.diff-col .dh{font-size:9px;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;color:var(--t4);margin-bottom:9px}
.diff-col.new .dh{color:var(--or)}
.diff-col b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.diff-col .da{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.diff-col .strike{text-decoration:line-through;color:var(--t4)}
.diff-col p{font-size:11px;color:var(--t3);line-height:1.55;margin-top:4px}
/* resolution (36) */
.res-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.res-box{padding:16px 18px;border-radius:14px;text-align:center}
.res-box.toak{background:rgba(26,92,52,0.06);border:0.5px solid rgba(26,92,52,0.20)}
.res-box.tora{background:rgba(28,20,16,0.03);border:0.5px solid rgba(28,20,16,0.12)}
.res-box .rl{font-size:9.5px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--t4);margin-bottom:7px}
.res-box .rn{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-0.035em;font-variant-numeric:tabular-nums}
.res-box .rw{font-size:11px;color:var(--t3);margin-top:4px}
.res-box.toak .rl{color:var(--gr)}
/* notif prefs (37) */
.pref-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:15px 20px;border-bottom:0.5px solid rgba(28,20,16,0.07)}
.pref-row:last-child{border-bottom:none}
.pref-row b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.pref-row span{display:block;font-size:11px;color:var(--t3);margin-top:3px;line-height:1.5}
.pref-lock{font-size:9px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--gr);display:flex;align-items:center;gap:5px}
.seg2{display:flex;gap:2px;padding:3px;background:rgba(28,20,16,0.05);border-radius:9px}
.seg2 .s2{padding:6px 13px;border-radius:6px;font-size:11px;font-weight:500;color:var(--t3);cursor:pointer}
.seg2 .s2.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(28,20,16,0.10)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===================== UNIFIED COMPONENTS - canonical, overrides all earlier defs ===================== */
.btn{padding:12px 20px;border-radius:10px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:-0.01em;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease}
.btn:active{transform:translateY(0.5px)}
.btn-ink{background:var(--ink);color:rgba(255,242,220,0.96);border:none;box-shadow:0 1px 2px rgba(28,20,16,0.10),0 4px 14px rgba(28,20,16,0.14)}
.btn-ink:hover{box-shadow:0 2px 4px rgba(28,20,16,0.12),0 8px 22px rgba(28,20,16,0.22)}
.btn-out{background:#FFFFFF;color:var(--ink);border:0.5px solid rgba(28,20,16,0.18);backdrop-filter:none;box-shadow:0 1px 2px rgba(28,20,16,0.05)}
.btn-out:hover{border-color:rgba(28,20,16,0.30);background:#FFFFFF;box-shadow:0 2px 6px rgba(28,20,16,0.08)}
.btn-gr{background:var(--gr);color:#EAF7EE;border:none;box-shadow:0 1px 2px rgba(26,92,52,0.18),0 4px 14px rgba(26,92,52,0.18)}
.btn-gr:hover{background:#17522e;box-shadow:0 2px 6px rgba(26,92,52,0.22),0 8px 22px rgba(26,92,52,0.24)}
.btn-rd{background:var(--rd);color:#FFF3EC;border:none;box-shadow:0 1px 2px rgba(181,36,36,0.18),0 4px 14px rgba(181,36,36,0.20)}
.btn-rd:hover{background:#a31f1f;box-shadow:0 2px 6px rgba(181,36,36,0.22),0 8px 22px rgba(181,36,36,0.26)}
.btn-rd-soft{background:rgba(181,36,36,0.07);color:var(--rd);border:0.5px solid rgba(181,36,36,0.22);box-shadow:none}
.btn-rd-soft:hover{background:rgba(181,36,36,0.12);border-color:rgba(181,36,36,0.32)}
.btn-row{display:flex;gap:8px}
/* toggle - three unambiguous states: OFF (grey), ON (green), LOCKED (green + padlock, immutable) */
.tog{width:40px;height:23px;border-radius:999px;background:rgba(28,20,16,0.22);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;opacity:1}
.tog::after{content:'';position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,0.25)}
.tog.on{background:var(--gr);opacity:1}
.tog.on::after{left:18px}
.tog.locked{background:var(--gr);opacity:1;cursor:not-allowed;pointer-events:none}
.tog.locked::after{left:18px}
.tog.locked::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:9px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Crect x='2' y='6' width='8' height='6.6' rx='1.4' fill='white'/%3E%3Cpath d='M3.6 6V4.4a2.4 2.4 0 0 1 4.8 0V6' fill='none' stroke='white' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center/contain;opacity:0.95}
/* stepper - single canonical */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:26px;flex-wrap:wrap;row-gap:10px}
.step{display:flex;align-items:center;gap:7px}
.step .sd{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;font-variant-numeric:tabular-nums}
.step.done .sd{background:var(--gr);color:#fff}
.step.on .sd{background:var(--or-b);color:#fff}
.step.todo .sd{background:rgba(28,20,16,0.07);color:var(--t4);border:0.5px solid rgba(28,20,16,0.14)}
.step .sl{font-size:11px;font-weight:500;color:var(--t3)}
.step.on .sl{color:var(--ink);font-weight:600}
.step-line{width:22px;height:1.5px;background:rgba(28,20,16,0.14);margin:0 8px}
/* flow/tunnel top bar - gives every in-task flow screen a way out */
.flow-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.flow-exit{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.72);border:0.5px solid rgba(28,20,16,0.16);border-radius:9px;padding:7px 13px;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;box-shadow:0 1px 2px rgba(28,20,16,0.04);transition:border-color .12s,color .12s}
.flow-exit:hover{border-color:rgba(28,20,16,0.30);color:var(--ink)}
/* journey scaffolding */
.journey-cover{max-width:1280px;margin:0 auto;padding:24px 6px 4px}
.journey-cover .jc-eye{font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--or-b);font-variant-numeric:tabular-nums}
.journey-cover h1{font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;margin-top:11px;line-height:1.08}
.journey-cover p{font-size:14px;color:var(--t3);margin-top:10px;max-width:640px;line-height:1.65}
.journey-section{width:100%;max-width:1280px;margin:34px auto 0;padding:30px 6px 4px;border-top:1px solid rgba(28,20,16,0.12);display:flex;align-items:baseline;gap:14px}
.journey-section .num{font-size:12px;font-weight:700;color:var(--or-b);font-variant-numeric:tabular-nums;flex-shrink:0;padding-top:2px}
.journey-section .jt h2{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.journey-section .jt p{font-size:12.5px;color:var(--t3);margin-top:3px;line-height:1.55}
/* ===== walkthrough navigator (portfolio-only) ===== */
.page > .cap{scroll-margin-top:20px}
.nav-pill{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:2px;background:rgba(28,20,16,0.93);backdrop-filter:blur(10px);border-radius:999px;padding:5px 7px;box-shadow:0 10px 34px rgba(28,20,16,0.34),inset 0 0.5px 0 rgba(255,255,255,0.08)}
.nav-btn{width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:rgba(255,242,220,0.94);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
.nav-btn:hover{background:rgba(255,255,255,0.13)}
.nav-btn:disabled{opacity:0.3;cursor:default}
.nav-count{font-family:var(--sans);font-size:12px;color:rgba(255,242,220,0.66);padding:0 11px;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:0.01em}
.nav-count b{color:rgba(255,242,220,0.98);font-weight:600}
.nav-edge{position:fixed;top:50%;transform:translateY(-50%);z-index:9998;width:46px;height:46px;border-radius:50%;border:0.5px solid rgba(28,20,16,0.12);background:rgba(255,255,255,0.82);backdrop-filter:blur(6px);color:var(--ink);font-size:21px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(28,20,16,0.14);transition:opacity .15s,background .12s,transform .12s}
.nav-edge:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.nav-edge-l{left:18px}.nav-edge-r{right:18px}
.nav-hint{position:fixed;bottom:64px;left:50%;transform:translateX(-50%);z-index:9999;font-family:var(--sans);font-size:11px;color:var(--t4);background:rgba(250,244,236,0.9);backdrop-filter:blur(6px);padding:5px 12px;border-radius:999px;border:0.5px solid rgba(28,20,16,0.10);transition:opacity .5s;pointer-events:none}
@media(max-width:1100px){.nav-edge{display:none}}
/* normalize: frame fills iframe, no outer margin */.frame{margin:0 !important;}