
/* Layout: cream canvas, deep-green brand chrome, marigold accent. Customer pages sit in a 1120px column; vendor and ops get green top bars, ops adds a left rail. */
:root{
  --bg:#FBF7EF; --surface:#FFFFFF; --surface-2:#F4EDE0; --line:#E7DDCB; --ink:#1E2A23; --muted:#5F6B63;
  --brand:#0F4D32; --brand-ink:#0F4D32; --brand-soft:#E4EFE6; --on-brand:#FFFFFF;
  --chrome:#0E3B27; --on-chrome:#F3EFE4; --chrome-2:#195238;
  --gold:#E8A317; --gold-soft:#FBEFD3; --price:#C2410C;
  --good:#1F7A4A; --good-soft:#E3F2E8; --warn:#9A5806; --warn-soft:#FCEFD9; --bad:#B42318; --bad-soft:#FCE9E7;
  --info:#1D5FA8; --info-soft:#E5EEF9; --plum:#6B3FA0; --plum-soft:#EFE7FA;
  --shadow:0 1px 2px rgba(30,42,35,.05),0 8px 24px rgba(30,42,35,.06);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1511; --surface:#16201A; --surface-2:#1D2A22; --line:#2B3B31; --ink:#ECE6D8; --muted:#A3AFA6;
  --brand:#2A7A52; --brand-ink:#86D3AA; --brand-soft:#1C3328; --on-brand:#FFFFFF;
  --chrome:#0A2318; --on-chrome:#ECE6D8; --chrome-2:#14382A;
  --gold:#F0B43A; --gold-soft:#3A2E14; --price:#F59E5B;
  --good:#7FD3A3; --good-soft:#173326; --warn:#F4B860; --warn-soft:#3A2A12; --bad:#F59A8F; --bad-soft:#3D1C18;
  --info:#8DB8EE; --info-soft:#17283D; --plum:#C6A6F0; --plum-soft:#2A1F3B;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0E1511; --surface:#16201A; --surface-2:#1D2A22; --line:#2B3B31; --ink:#ECE6D8; --muted:#A3AFA6;
  --brand:#2A7A52; --brand-ink:#86D3AA; --brand-soft:#1C3328; --on-brand:#FFFFFF;
  --chrome:#0A2318; --on-chrome:#ECE6D8; --chrome-2:#14382A;
  --gold:#F0B43A; --gold-soft:#3A2E14; --price:#F59E5B;
  --good:#7FD3A3; --good-soft:#173326; --warn:#F4B860; --warn-soft:#3A2A12; --bad:#F59A8F; --bad-soft:#3D1C18;
  --info:#8DB8EE; --info-soft:#17283D; --plum:#C6A6F0; --plum-soft:#2A1F3B;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(30px,5vw,48px)} h2{font-size:clamp(23px,3vw,30px)} h3{font-size:19px}
p{margin:0}
a{color:var(--brand-ink)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.ic{flex:none;vertical-align:middle}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.muted{color:var(--muted)} .small{font-size:13px} .tiny{font-size:12px}
.num{font-variant-numeric:tabular-nums}
.price{color:var(--price);font-weight:700}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.sec{padding-block:44px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.sec-head p{color:var(--muted);margin-top:6px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}

/* demo strip */
.demo{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.5px}
.demo .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-block:6px}
.demo .roles{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.demo .roles button{border:0;background:transparent;border-radius:999px;padding:4px 12px;font-weight:600;font-size:12.5px;color:var(--muted)}
.demo .roles button.on{background:var(--brand);color:var(--on-brand)}
.demo .lnk{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:12.5px;padding:4px}

/* headers */
.hdr{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.hdr .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--brand-ink);font-family:var(--display);font-weight:700;font-size:23px;white-space:nowrap;border:0;background:none;padding:0}
.logo small{display:block;font-family:var(--ui);font-weight:500;font-size:10.5px;color:var(--muted);margin-top:-3px;letter-spacing:.01em}
.logo .tld{color:var(--gold)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav button{border:0;background:none;padding:8px 12px;border-radius:10px;font-weight:500;color:var(--ink)}
.nav button.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--gold-soft);color:var(--warn);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.hdr.dark{background:var(--chrome);border-color:var(--chrome);color:var(--on-chrome)}
.hdr.dark .logo{color:var(--on-chrome)} .hdr.dark .logo small{color:var(--on-chrome);opacity:.7}
.pill-tag{background:var(--chrome-2);color:var(--on-chrome);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
.hdr.dark select{background:var(--chrome-2);color:var(--on-chrome);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:7px 10px;max-width:220px}
@media (max-width:760px){.nav .hide-sm{display:none}.logo{font-size:20px}.hdr .wrap{gap:10px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 18px;font-weight:600;border:1.5px solid transparent;background:var(--brand);color:var(--on-brand);text-decoration:none;line-height:1.2;transition:transform .12s, filter .12s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.out{background:transparent;color:var(--brand-ink);border-color:var(--brand-ink)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.lg{padding:14px 22px;font-size:16px;border-radius:14px}
.btn.sm{padding:7px 12px;font-size:13.5px;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.link{border:0;background:none;color:var(--brand-ink);font-weight:600;padding:0;display:inline-flex;align-items:center;gap:4px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600;white-space:nowrap;line-height:1.3}
.t-good{background:var(--good-soft);color:var(--good)} .t-warn{background:var(--warn-soft);color:var(--warn)}
.t-bad{background:var(--bad-soft);color:var(--bad)} .t-info{background:var(--info-soft);color:var(--info)}
.t-plum{background:var(--plum-soft);color:var(--plum)} .t-muted{background:var(--surface-2);color:var(--muted)}
.t-gold{background:var(--gold-soft);color:var(--warn)}
.tag{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:3px 8px;font-size:12.5px;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:14px}
.meta span{display:inline-flex;align-items:center;gap:6px}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:18px} .pad-lg{padding:24px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* art tiles */
.art{position:relative;display:grid;place-items:center;color:rgba(255,255,255,.9);overflow:hidden;border-radius:12px;isolation:isolate;max-width:100%}
.art::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.35),transparent 40%),radial-gradient(circle at 85% 90%,rgba(255,220,150,.35),transparent 45%)}
.art.photo{background:var(--surface-2)}
.art.photo::before{display:none}
.art.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.avatar.photo-av{overflow:hidden;padding:0;background:var(--surface-2)}
.avatar.photo-av img{width:100%;height:100%;object-fit:cover;display:block}
.menu-banner .art{aspect-ratio:3.4;border-radius:16px;margin-bottom:18px}
@media (max-width:600px){.menu-banner .art{aspect-ratio:2.2}}
.dish.wimg{padding:0;overflow:hidden;flex-direction:column;gap:0}
.dish.wimg img{width:100%;aspect-ratio:1.35;object-fit:cover;display:block}
.dish .dr{display:flex;gap:10px;align-items:flex-start;width:100%}
.dish.wimg .dr{padding:10px}
.art.wm::after{content:"wellmanaged.in";position:absolute;font-family:var(--display);font-size:15px;color:rgba(255,255,255,.4);transform:rotate(-18deg);bottom:22%;right:8%;letter-spacing:.02em}
.a-wedding{background:linear-gradient(135deg,#6F1D2A,#B8411B 55%,#E8A317)}
.a-reception{background:linear-gradient(135deg,#3E2350,#9A3B6B 60%,#E8A06A)}
.a-birthday{background:linear-gradient(135deg,#C2577E,#F09A7A 60%,#FFD38A)}
.a-anniversary{background:linear-gradient(135deg,#7A1E3A,#C24A4A 55%,#E9B44C)}
.a-annaprashan{background:linear-gradient(135deg,#B45309,#E8A317 60%,#F5D06B)}
.a-corporate{background:linear-gradient(135deg,#1E3A4A,#2F6B6B 60%,#8FB8A8)}
.a-other{background:linear-gradient(135deg,#0F4D32,#3E8A5E 60%,#C9D88A)}
.a-hall{background:linear-gradient(135deg,#5B3A12,#B7832F 55%,#F1D08A)}
.a-lawn{background:linear-gradient(135deg,#1F4D2B,#4E8A3E 55%,#E7B9C6)}
.a-hotel{background:linear-gradient(135deg,#1D2B4A,#4A5A8A 55%,#D9B36A)}
.a-resort{background:linear-gradient(135deg,#0E4A4F,#2E8B83 55%,#F2D59B)}
.a-camera{background:linear-gradient(135deg,#232526,#5A4A3A 55%,#C9A36A)}
.a-makeup{background:linear-gradient(135deg,#8A2E4F,#D86C8C 55%,#F7C6A8)}
.a-decor{background:linear-gradient(135deg,#9B2C56,#E06A3A 55%,#F4C94F)}
.a-music{background:linear-gradient(135deg,#2B2366,#5F43A8 55%,#E59AC1)}
.a-catering{background:linear-gradient(135deg,#6B2E12,#B5652A 55%,#F0C27A)}
.a-transport{background:linear-gradient(135deg,#3A3A3A,#7A6A5A 55%,#E3C79A)}
.a-priest{background:linear-gradient(135deg,#8A3A0A,#D9731F 55%,#FAD27A)}
.a-invite{background:linear-gradient(135deg,#5A4A7A,#A889B8 55%,#F2DCC2)}

/* home */
.hero{padding-block:36px 28px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center}
.hero h1 em{color:var(--brand-ink);font-style:italic}
.hero p.lead{font-size:17px;color:var(--muted);max-width:44ch;margin-top:14px}
.hero .ctas{display:flex;flex-direction:column;gap:10px;max-width:340px;margin-top:22px}
.hero .ctas .btn{justify-content:space-between}
.assure{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:13px;color:var(--muted)}
.assure span{display:inline-flex;align-items:center;gap:6px}
.assure .ic{color:var(--gold)}
.hero-art{aspect-ratio:1.1;border-radius:48% 52% 14px 52%/52% 48% 14px 48%;width:100%}
.hero-art .ic{width:96px;height:96px;opacity:.85}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-art{aspect-ratio:1.8;border-radius:20px}}
.tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:0;overflow:hidden;text-align:center;font-weight:600;font-size:14px;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-2px);border-color:var(--brand-ink)}
.tile .art{border-radius:0;aspect-ratio:1.25}
.tile div.l{padding:8px 4px 10px}
.tile.on{border:2px solid var(--brand-ink);box-shadow:0 0 0 3px var(--brand-soft)}
.pkg .art{aspect-ratio:1.9;border-radius:var(--r) var(--r) 0 0}
.pkg .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pkg{display:flex;flex-direction:column;overflow:hidden;position:relative}
.badge-pop{position:absolute;top:10px;left:10px;background:var(--gold-soft);color:var(--warn);font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;display:inline-flex;gap:4px;align-items:center}
.band{background:var(--chrome);color:var(--on-chrome);border-radius:20px;padding:22px 26px;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:18px;align-items:center}
.band h3{color:var(--on-chrome)}
.band .stat{display:flex;gap:10px;align-items:center;border-left:1px solid rgba(255,255,255,.2);padding-left:18px}
.band .stat b{font-size:22px;display:block;line-height:1.1}
.band .stat .ic{color:var(--gold)}
@media (max-width:820px){.band{grid-template-columns:1fr 1fr}.band .stat{border-left:0;padding-left:0}}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:820px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.step4{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.step4 .circ{width:62px;height:62px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;position:relative}
.step4 .circ b{position:absolute;top:-4px;left:-4px;width:24px;height:24px;border-radius:50%;background:var(--price);color:#fff;font-size:12px;display:grid;place-items:center}
.faq details{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 16px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:"+";font-size:20px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:8px;color:var(--muted);max-width:70ch}
.foot{border-top:1px solid var(--line);margin-top:30px;padding-block:28px;font-size:13.5px;color:var(--muted)}
.foot .row button{border:0;background:none;color:var(--muted);padding:2px 0;text-decoration:underline}

/* builder */
.bld-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:18px 8px}
.stepper{display:flex;gap:0;overflow-x:auto;padding:6px 0 14px;scrollbar-width:thin}
.st{flex:1;min-width:74px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;border:0;background:none;padding:0 2px;font-size:12.5px;color:var(--muted)}
.st::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.st:first-child::before{display:none}
.st.done::before,.st.cur::before{background:var(--good)}
.st .dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;font-weight:700;position:relative;z-index:1;font-size:13px}
.st.done .dot{background:var(--good);border-color:var(--good);color:#fff}
.st.cur .dot{background:var(--chrome);border-color:var(--chrome);color:#fff}
.st.cur{color:var(--brand-ink);font-weight:700}
.bld-body{padding-bottom:170px}
@media (max-width:560px){.bld-top h2{font-size:19px!important}.bld-top .save-t{display:none}}
.bld-h{display:flex;flex-direction:column;gap:6px;margin:10px 0 18px}
.bld-h p{color:var(--muted)}
.summary-chip{display:flex;align-items:center;gap:12px;background:var(--brand-soft);border-radius:12px;padding:12px 14px;margin-bottom:18px;font-size:14px}
.opt3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:560px){.opt3{grid-template-columns:1fr}}
.opt{border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600;text-align:center;position:relative}
.opt .ic{color:var(--price)}
.opt.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.opt.on::after{content:"✓";position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.cbtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:500;font-size:14px}
.cbtn.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.filters select{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px}
.venue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;padding:12px;margin-bottom:14px}
.venue .art{aspect-ratio:1.45;position:relative}
.venue.on{border:2px solid var(--brand-ink)}
@media (max-width:600px){.venue{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:14px}
.field .hint{font-size:12.5px;color:var(--muted)}
.inp{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:11px 12px;width:100%;min-width:0}
.inp:focus{border-color:var(--brand-ink);outline:0;box-shadow:0 0 0 3px var(--brand-soft)}
textarea.inp{min-height:96px;resize:vertical}
.stepperN{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.stepperN button{border:0;background:none;width:44px;height:44px;font-size:20px;color:var(--brand-ink)}
.stepperN input{width:84px;text-align:center;border:0;border-inline:1px solid var(--line);height:44px;background:transparent;font-weight:700;font-size:17px}
.err{display:flex;gap:8px;align-items:center;background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:14px;font-weight:500}
.okbox{display:flex;gap:10px;align-items:flex-start;background:var(--good-soft);color:var(--good);border-radius:12px;padding:12px 14px;font-weight:500}
.warnbox{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:12px 14px;font-size:14px}
.infobox{display:flex;gap:10px;align-items:flex-start;background:var(--info-soft);color:var(--info);border-radius:12px;padding:12px 14px;font-size:14px}
/* menu */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--surface)}
.seg button{border:0;background:none;border-radius:9px;padding:9px 18px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.seg button.on{background:var(--brand);color:var(--on-brand)}
.ctabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.ctab{border:1.5px solid var(--line);background:var(--surface-2);border-radius:12px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:600;font-size:14px}
.ctab.on{border-color:var(--brand-ink);background:var(--surface)}
.ctab small{font-weight:500;color:var(--muted);font-size:12px}
.dishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dish{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;text-align:left;display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14px}
.dish.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.dish[disabled]{opacity:.45;cursor:not-allowed}
.box{width:18px;height:18px;border:1.5px solid var(--muted);border-radius:5px;flex:none;display:grid;place-items:center;margin-top:1px}
.dish.on .box{background:var(--brand);border-color:var(--brand);color:#fff}
.vm{width:14px;height:14px;border:1.5px solid;border-radius:3px;display:inline-grid;place-items:center;flex:none}
.vm::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.vm.veg{color:#1F8A3E} .vm.nv{color:#9B3412}
.addrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media (max-width:600px){.addrow{grid-template-columns:1fr}}
.toggles{display:flex;flex-direction:column;gap:8px}
.tgl{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;text-align:left;font-size:14px}
.tgl.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.costs{display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.costs .ln{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.costs .ln:last-child{border-bottom:0}
.costs .tot{font-weight:700;font-size:17px}
.aopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.aopt{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px}
.aopt.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.aopt b{font-size:14.5px}
/* price bar */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -8px 24px rgba(0,0,0,.06)}
.pbar .est{background:var(--chrome);color:var(--on-chrome)}
.pbar .est .wrap{display:flex;align-items:center;gap:16px;padding-block:10px;flex-wrap:wrap}
.pbar .est b{color:var(--gold);font-size:20px;display:block;line-height:1.2}
.pbar .est .inc{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;opacity:.9;border-left:1px solid rgba(255,255,255,.2);padding-left:16px}
@media (max-width:600px){.pbar .est .inc{display:none}}
.pbar .acts .wrap{display:flex;gap:12px;padding-block:10px}
.pbar .acts .btn{flex:1}
.pbar .acts .btn.ghost{flex:0 0 auto}
/* review */
.rv{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-bottom:1px solid var(--line)}
.rv:last-child{border-bottom:0}
.rv .row{justify-content:space-between}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 14px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500}
@media (max-width:520px){.kv{grid-template-columns:110px minmax(0,1fr)}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand)}
ol.next{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}

/* my events */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:16px 0}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 16px;font-weight:600;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.tabs button.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.ev{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;padding:16px;margin-bottom:14px}
.ev .art{aspect-ratio:1.25}
@media (max-width:620px){.ev{grid-template-columns:1fr}.ev .art{aspect-ratio:2.4}}
.ev h3{font-size:22px}
.count{display:flex;gap:16px;align-items:center;background:var(--brand-soft);border-radius:12px;padding:12px 16px;flex-wrap:wrap}
.count .big{font-family:var(--display);font-size:38px;font-weight:700;color:var(--brand-ink);line-height:1}
.mgr{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mgr .grow{min-width:170px}
.mgr .avatar{width:48px;height:48px;font-size:16px;background:var(--brand-soft);color:var(--brand-ink)}
.next-act{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:14px;width:100%;text-align:left;border:0}
button.next-act{cursor:pointer}
.sched{display:flex;flex-direction:column;gap:12px;position:relative}
.ms{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;font-size:14px}
.ms .bul{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;color:#fff;margin-top:1px}
.ms.paid .bul{background:var(--good);border-color:var(--good)}
.ms.next .bul{border-color:var(--gold)}
.ms.paid b{text-decoration:line-through;color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:720px){.split{grid-template-columns:1fr}}

/* quote + pay */
.qhead{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.qhead .art{aspect-ratio:1.1}
@media (max-width:520px){.qhead{grid-template-columns:96px minmax(0,1fr)}}
.qline{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.qline .ic{color:var(--price)}
.qline small{display:block;color:var(--muted);font-size:12.5px}
.qtot{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border-radius:12px;padding:14px 16px;font-weight:700;font-size:18px;margin-top:10px}
.bigsum{font-family:var(--display);font-size:clamp(30px,6vw,40px);font-weight:700;color:var(--brand-ink);line-height:1.1}
.mstep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.mstep>div{padding:14px 10px;text-align:center;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;align-items:center}
.mstep>div:last-child{border-right:0}
.mstep .n{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:700;margin-bottom:4px}
.mstep .cur{background:var(--brand-soft)} .mstep .cur .n{background:var(--brand);color:#fff;border-color:var(--brand)}
.mstep .pd .n{background:var(--good);color:#fff;border-color:var(--good)}
.methods{display:flex;flex-direction:column;gap:10px}
.method{display:grid;grid-template-columns:56px minmax(0,1fr) 22px;gap:12px;align-items:center;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;text-align:left}
.method.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted)}
.method.on .radio{border:6px solid var(--brand)}
.upi{font-weight:800;font-style:italic;letter-spacing:.02em;color:var(--brand-ink);font-size:17px}
.secure{display:flex;gap:12px;align-items:flex-start;background:var(--gold-soft);border-radius:12px;padding:14px;font-size:13.5px}
.secure .ic{color:var(--warn)}

/* vendor profile */
.pro-hero{aspect-ratio:2.8;border-radius:0 0 20px 20px}
@media (max-width:600px){.pro-hero{aspect-ratio:1.8}}
.pro-id{display:flex;gap:16px;align-items:flex-end;margin-top:-46px;padding-inline:8px;flex-wrap:wrap}
.pro-av{width:104px;height:104px;border-radius:50%;border:4px solid var(--bg);flex:none}
.verified{display:inline-flex;align-items:center;gap:4px;background:var(--brand-soft);color:var(--brand-ink);border-radius:8px;padding:3px 8px;font-size:12.5px;font-weight:600}
.ptabs{display:flex;gap:6px;overflow-x:auto;margin:18px 0;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.ptabs button{border:0;background:none;border-radius:999px;padding:8px 16px;font-weight:600;white-space:nowrap;flex:1}
.ptabs button.on{background:var(--brand);color:var(--on-brand)}
.port{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.port .art{aspect-ratio:1.3}
.ppk{border:1.5px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:8px;position:relative;text-align:left}
.ppk.on{border-color:var(--brand-ink);box-shadow:0 0 0 3px var(--brand-soft)}
.ppk .pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:#3A2600;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center}
.cal .dh{font-size:12px;color:var(--muted);font-weight:600;padding:4px 0}
.cal button{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 0;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.cal .ok{background:var(--surface)} .cal .lim{background:var(--good-soft);color:var(--good);border-color:transparent}
.cal .na{background:var(--bad-soft);color:var(--bad);border-color:transparent;cursor:not-allowed}
.cal .past{opacity:.35;cursor:not-allowed}
.cal .blk{background:var(--surface-2);color:var(--muted);text-decoration:line-through}
.cal .bk{background:var(--brand);color:#fff;border-color:var(--brand)}
.cal .sel{background:var(--chrome);color:#fff;border-color:var(--chrome)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.sticky-cta{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));margin-top:20px;z-index:5}
.rev{border-bottom:1px solid var(--line);padding:12px 0}
.rev:last-child{border-bottom:0}
.stars{color:var(--gold);letter-spacing:1px}

/* vendor portal */
.vhero{background:var(--chrome);color:var(--on-chrome);padding-block:22px 46px}
.vhero h1{font-size:clamp(24px,4vw,32px);color:var(--on-chrome)}
.vhero p{opacity:.85;margin-top:4px}
.vtabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px;margin-top:-28px;position:relative;box-shadow:var(--shadow);overflow-x:auto}
.vtabs button{border:0;background:none;border-radius:12px;padding:10px 14px;font-weight:600;display:inline-flex;gap:7px;align-items:center;white-space:nowrap;flex:1;justify-content:center}
.vtabs button.on{background:var(--brand);color:var(--on-brand)}
.cnt{background:var(--bad);color:#fff;border-radius:999px;font-size:11.5px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px}
.job{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:16px;margin-bottom:14px}
.job .art{aspect-ratio:1.2}
@media (max-width:620px){.job{grid-template-columns:1fr}.job .art{aspect-ratio:3}}
.brief{background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:14px;display:flex;gap:8px}
.brief .ic{color:var(--brand-ink);margin-top:2px}
.earn{font-size:14px} .earn b{color:var(--brand-ink)}

/* ops */
.ops-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 110px)}
.ops-side{background:var(--chrome);color:var(--on-chrome);padding:18px 12px;display:flex;flex-direction:column;gap:4px}
.ops-side button{border:0;background:none;color:var(--on-chrome);display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;font-weight:500;text-align:left;opacity:.85}
.ops-side button.on{background:var(--chrome-2);opacity:1;font-weight:600}
.ops-main{padding:24px max(16px,env(safe-area-inset-right,0px)) 60px 24px;min-width:0}
@media (max-width:860px){.ops-wrap{grid-template-columns:1fr}.ops-side{flex-direction:row;overflow-x:auto;padding:8px max(16px,env(safe-area-inset-left,0px))}.ops-side button{white-space:nowrap}.ops-main{padding:18px max(16px,env(safe-area-inset-right,0px)) 60px max(16px,env(safe-area-inset-left,0px))}}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{padding:14px 16px}
.kpi b{display:block;font-size:24px;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi span{font-size:12.5px;color:var(--muted)}
.pipe{display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--surface-2);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.col h4{margin:2px 4px 4px;font-size:13px;display:flex;justify-content:space-between}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:3px;font-size:13px}
.pc b{font-size:14px}
.pc:hover{border-color:var(--brand-ink)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:600;background:var(--surface-2);padding:10px 12px;white-space:nowrap}
td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
td.r,th.r{text-align:right}
.qb{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
@media (max-width:1100px){.qb{grid-template-columns:1fr}}
.qb select,.qb input.cell{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 8px;font-size:13.5px;min-width:0}
.qb select{max-width:180px}
.qb input.cell{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.qb .pct{display:inline-flex;align-items:center;gap:4px}
.qb .pct input{width:64px}
.svc{display:flex;gap:10px;align-items:flex-start;min-width:200px}
.svc .ic{color:var(--price);margin-top:2px}
.svc small{display:block;color:var(--muted);font-size:12px}
.ov{display:flex;flex-direction:column;gap:9px;font-size:14px}
.ov .ln{display:flex;justify-content:space-between;gap:8px}
.ov .gt{background:var(--good-soft);border-radius:10px;padding:12px;font-weight:700;font-size:17px;display:flex;justify-content:space-between}
.icon-btn{border:0;background:none;color:var(--muted);padding:6px;border-radius:8px}
.icon-btn:hover{background:var(--surface-2);color:var(--bad)}
.jobchips{display:flex;flex-wrap:wrap;gap:8px}
.jc{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px;background:var(--surface)}
.alert{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:14px;flex-wrap:wrap}

/* modal + toast */
.mback{position:fixed;inset:0;background:rgba(10,20,15,.5);z-index:60;display:grid;place-items:center;padding:16px}
.modal{background:var(--surface);border-radius:18px;max-width:460px;width:100%;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:90vh;overflow:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;background:var(--chrome);color:var(--on-chrome);padding:12px 18px;border-radius:12px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px);display:flex;gap:8px;align-items:center}
.toast.bad{background:var(--bad);color:#fff}
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--brand-soft);border-top-color:var(--brand);animation:spin .8s linear infinite;margin:10px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.starpick{display:flex;gap:6px}
.starpick button{border:0;background:none;font-size:30px;color:var(--line);padding:0}
.starpick button.on{color:var(--gold)}
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.art.photo .ic{display:none}
.boot{min-height:60vh;display:grid;place-items:center;text-align:center;color:var(--muted)}
body.wm-busy #app,body.wm-busy #modal{pointer-events:none;cursor:progress}
body.wm-busy::after{content:"";position:fixed;top:0;left:0;height:3px;width:40%;background:var(--gold);z-index:90;animation:wmbar 1s ease-in-out infinite}
@keyframes wmbar{0%{left:-40%}100%{left:100%}}
.acct{display:flex;align-items:center;gap:8px}
.acct a{font-weight:600;font-size:14px;text-decoration:none}
.hdr.dark .acct a,.hdr.dark .nav a{color:var(--on-chrome)}
.nav a.btn{color:var(--on-brand)}
.gate{max-width:520px;margin:40px auto;text-align:center;padding:28px}
.gate .row{justify-content:center;margin-top:16px}
.nav button,.acct a{white-space:nowrap}
@media (max-width:560px){.acct a{display:none}.acct a.btn{display:inline-flex}}
.foot .row a{color:var(--muted);font-size:13.5px;text-decoration:underline;padding:2px 0}
.btn.block{width:100%}
.foot .tiny a{color:inherit}
.foot button.logo{text-decoration:none}
.otp-inp{font-size:24px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.acct > button:not(.btn){border:0;background:none;color:inherit;font:inherit;font-weight:500;padding:6px 4px;cursor:pointer}
.nav .acct .btn{background:var(--brand);color:var(--on-brand);padding:8px 14px}.hdr.dark .nav .acct .btn{background:var(--gold,#E8A317);color:#2A1E00}
