/* ==========================================================================
   FRANKCAS LTD — Commissioning Booking Platform
   Design tokens shared with the FRANKCAS Purchase Order app
   ========================================================================== */
:root{
  --o-red:#EB3B27; --o-mid:#E28628; --o-yel:#D8CF26;
  --navy:#393283;  --ink:#221F1F;   --ink-2:#1B1A2E;
  --brand:#E2701F; --brand-soft:#FDF1E8;
  --brand-grad:linear-gradient(90deg,#EB3B27 0%,#E28628 55%,#D8CF26 100%);
  --bg:#F4F5F8; --surface:#FFFFFF; --surface-2:#FAFBFC;
  --line:#E4E7EC; --line-2:#EFF1F4;
  --tx:#1A1D23; --tx-2:#5A6472; --tx-3:#8C95A3;
  --ok:#0E9F6E;   --ok-bg:#E6F6F0;
  --warn:#B45309; --warn-bg:#FEF3E2;
  --dngr:#DC2626; --dngr-bg:#FEECEC;
  --info:#3730A3; --info-bg:#EEEDFA;
  --r:12px; --r-sm:8px; --r-lg:18px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 4px 14px rgba(16,24,40,.07);
  --sh-3:0 18px 46px rgba(16,24,40,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--tx);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none !important}
img{max-width:100%}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;background:#F1F3F6;padding:2px 6px;border-radius:5px}
code.wrap{word-break:break-all}
h1{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.25;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2{font-size:16px;font-weight:700}
h3{font-size:14.5px;font-weight:700}
.muted{color:var(--tx-2)} .tiny{font-size:12px} .center{text-align:center} .nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px}
.up{text-transform:uppercase}
.row{display:flex;gap:10px;align-items:center} .row.wrap{flex-wrap:wrap}
.mt{margin-top:18px} .mb{margin-bottom:18px} .mt-s{margin-top:10px}
.txt-warn{color:var(--warn)} .txt-err{color:var(--dngr)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
svg{width:16px;height:16px;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--tx);font-weight:600;font-size:13.5px;cursor:pointer;
  transition:.15s;white-space:nowrap;box-shadow:var(--sh-1);text-decoration:none !important;line-height:1.3}
.btn:hover{background:var(--surface-2);border-color:#D3D8E0}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.btn-primary:hover{background:#2A2846;border-color:#2A2846}
.btn-brand{background:linear-gradient(135deg,#E8531F,#E28628);border-color:transparent;color:#fff}
.btn-brand:hover{filter:brightness(1.06);background:linear-gradient(135deg,#E8531F,#E28628)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-ok:hover{background:#0B8A5F;border-color:#0B8A5F}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--tx-2)}
.btn-ghost:hover{background:#EDF0F4;color:var(--tx)}
.btn-ghost.on-dark{color:#C9C8DA}.btn-ghost.on-dark:hover{background:rgba(255,255,255,.08);color:#fff}
.btn-danger{color:var(--dngr);border-color:#F3C9C9;background:#fff}
.btn-danger:hover{background:var(--dngr-bg)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:7px}
.btn-sm svg{width:14px;height:14px}
.btn-lg{padding:13px 22px;font-size:15px;border-radius:10px}
.btn-icon{padding:8px}
.btn-block{width:100%}
details > summary{list-style:none}
details > summary::-webkit-details-marker{display:none}
details[open] > summary{opacity:.7}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label{font-size:12px;font-weight:600;color:var(--tx-2);letter-spacing:.01em}
.req{color:var(--o-red)} .optl{font-weight:500;color:var(--tx-3);font-size:11px;margin-left:3px}
.inp{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;transition:.15s;font-size:14.5px}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(226,112,31,.14)}
.inp[readonly]{background:#F3F5F7;color:var(--tx-2)}
textarea.inp{resize:vertical;min-height:70px;line-height:1.5}
select.inp{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
.inp.file{padding:8px}
.inp.up{text-transform:uppercase}
.has-err .inp,.inp.bad{border-color:var(--dngr);background:#FFFBFB}
.ferr{color:var(--dngr);font-size:12.5px;font-weight:500}
.ferr-info{color:var(--info);font-size:12.5px;background:var(--info-bg);padding:8px 10px;border-radius:8px;display:flex;gap:6px;align-items:flex-start}
.ferr-info svg{margin-top:2px}
.hint{font-size:12px;color:var(--tx-3)}
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13.5px;user-select:none;line-height:1.4}
.chk input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;flex:none;margin-top:1px}
.chk.inline{display:inline-flex}
.chk.big{font-size:14.5px;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface-2);margin-top:16px}
.chk.big input{width:20px;height:20px}
.chk.big.has-err{border-color:var(--dngr)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .span2,.form-grid .sec{grid-column:1/-1}
.sec{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-2);padding-top:6px;border-top:1px solid var(--line-2);margin-top:4px}
.sec:first-child{border-top:0;padding-top:0;margin-top:0}
.sec small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--tx-3);margin-left:6px}
.stack-form{display:flex;flex-direction:column;gap:14px}
.inline{display:inline}
.inline-form{display:flex;gap:8px;flex-wrap:wrap}
.inline-form .inp{flex:1 1 160px;width:auto}
.divider{display:flex;align-items:center;gap:10px;color:var(--tx-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

/* ---------- alerts ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:13.5px;border:1px solid transparent}
.alert svg{margin-top:2px;width:18px;height:18px}
.alert-ok{background:var(--ok-bg);color:#065F46;border-color:#BDE8D6}
.alert-error{background:var(--dngr-bg);color:#991B1B;border-color:#F6CACA}
.alert-info{background:var(--info-bg);color:var(--info);border-color:#D6D3F3}
.alert-warn{background:var(--warn-bg);color:#92400E;border-color:#F7DDB0}
.alert a{color:inherit;text-decoration:underline;font-weight:600}
.alert.slim{padding:8px 12px;margin-bottom:8px}
.alert .inline .btn{margin-left:8px}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h3{flex:1}
.card-b{padding:18px}
.card-b.bt{border-top:1px solid var(--line-2)}
.card-f{padding:14px 18px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.badge::before{content:'';width:6px;height:6px;border-radius:99px;background:currentColor}
.b-pending{background:var(--warn-bg);color:var(--warn)}
.b-confirmed{background:var(--ok-bg);color:var(--ok)}
.b-completed{background:#EEF0F3;color:#475467}
.b-declined,.b-cancelled{background:var(--dngr-bg);color:var(--dngr)}
.pill{display:inline-block;padding:2px 8px;border-radius:6px;background:#EEF0F3;color:var(--tx-2);font-size:11.5px;font-weight:600;white-space:nowrap}
.empty{padding:44px 20px;text-align:center;color:var(--tx-3)}
.empty.sm{padding:26px 16px}
.empty svg{width:38px;height:38px;opacity:.35;margin-bottom:10px}
.empty h4{font-size:14px;color:var(--tx-2);margin-bottom:3px;font-weight:600}

/* ---------- top bar ---------- */
.topbar{background:var(--ink-2);color:#fff;position:sticky;top:0;z-index:50}
.topbar-in{max-width:1240px;margin:0 auto;padding:0 20px;height:62px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none !important;flex:none}
.brand img{height:34px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-weight:800;letter-spacing:.14em;font-size:15px}
.brand-sub{font-size:11px;color:#A9A7C2;letter-spacing:.02em}
.mainnav{display:flex;align-items:center;gap:4px;flex:1}
.mainnav > a{display:flex;align-items:center;gap:7px;color:#C9C8DA;padding:8px 12px;border-radius:8px;font-weight:600;font-size:13.5px;text-decoration:none !important;position:relative}
.mainnav > a:hover{background:rgba(255,255,255,.07);color:#fff}
.mainnav > a.on{background:rgba(255,255,255,.11);color:#fff}
.mainnav > a.on::after{content:'';position:absolute;left:12px;right:12px;bottom:-11px;height:3px;border-radius:3px;background:var(--brand-grad)}
.count{background:var(--o-red);color:#fff;font-size:11px;border-radius:99px;padding:1px 7px;font-weight:700}
.nav-user{margin-left:auto;display:flex;align-items:center;gap:10px}
.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;color:#fff;text-decoration:none !important}
.who strong{font-size:13px}.who small{color:#A9A7C2;font-size:11.5px}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
.brandbar{height:4px;background:var(--brand-grad)}

/* ---------- page ---------- */
main{flex:1}
.page-in{max-width:1240px;margin:0 auto;padding:26px 20px 40px}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-title p{margin-top:4px}
.crumbs{font-size:12.5px;color:var(--tx-3);margin-bottom:6px}
.foot{text-align:center;color:var(--tx-3);font-size:12px;padding:20px}
.foot a{color:var(--tx-3)}
.grid{display:grid;gap:18px}
.two-col{grid-template-columns:1fr 1fr}
.detail-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.side{display:flex;flex-direction:column}

/* ---------- guest / auth ---------- */
.guest{display:grid;place-items:center;padding:24px 16px;min-height:100vh;
  background:radial-gradient(1100px 620px at 10% -10%,rgba(226,134,40,.22),transparent 60%),
             radial-gradient(900px 560px at 100% 100%,rgba(57,50,131,.30),transparent 60%),#14131F}
.guest > .alert{max-width:420px;width:100%;margin:0 auto 14px}
.auth-wrap{width:100%;max-width:420px}
.auth-card{background:#fff;border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(0,0,0,.42);overflow:hidden}
.auth-wrap:has(.auth-card.wide){max-width:760px}
.auth-top{padding:30px 32px 20px;text-align:center}
.auth-top img{height:96px;margin-bottom:14px}
.auth-top h1{font-size:18px;justify-content:center}
.auth-top p{font-size:13px;color:var(--tx-2);margin-top:5px}
.auth-body{padding:0 32px 30px;display:flex;flex-direction:column;gap:14px}
.auth-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600}
.auth-foot{text-align:center;color:#8F8DA8;font-size:12px;margin-top:16px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12.5px}
.check{display:flex;gap:7px;align-items:center}
.check span{font-weight:800}
.check.ok span{color:var(--ok)} .check.bad{color:var(--dngr)}

/* ---------- client booking list ---------- */
.blist{display:flex;flex-direction:column}
.bcard{display:flex;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2);color:var(--tx);text-decoration:none !important;transition:background .12s}
.bcard:last-child{border-bottom:0}
.bcard:hover{background:#FBFAF7}
.bdate{flex:none;width:56px;border-radius:10px;border:1px solid var(--line);text-align:center;overflow:hidden;background:#fff}
.bdate .m{display:block;background:var(--ink-2);color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 0}
.bdate .d{display:block;font-size:21px;font-weight:800;line-height:1.25}
.bdate .w{display:block;font-size:10.5px;color:var(--tx-3);padding-bottom:3px}
.bmain{flex:1;min-width:0}
.bt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.bgo{color:var(--tx-3)}

/* detail list */
.dl{display:grid;grid-template-columns:150px 1fr;gap:0;font-size:14px}
.dl dt{color:var(--tx-2);font-size:12.5px;font-weight:600;padding:9px 12px 9px 0;border-bottom:1px solid var(--line-2)}
.dl dd{padding:9px 0;border-bottom:1px solid var(--line-2);min-width:0;overflow-wrap:anywhere}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:0}
.dl.compact{grid-template-columns:110px 1fr;font-size:13px}
.files{display:flex;flex-direction:column;gap:6px}
.filelink{display:inline-flex;gap:7px;align-items:center;font-weight:600}
.filelink small{color:var(--tx-3);font-weight:500}

/* cancel */
.cancel-card{border-color:#F3C9C9;margin-bottom:18px}
.cancel-card h3{margin-bottom:12px;font-size:16px}
.feebox{display:flex;gap:14px;align-items:center;background:var(--dngr-bg);border-radius:10px;padding:14px;margin-bottom:14px;color:#7F1D1D}
.fee{font-size:30px;font-weight:800;color:var(--dngr);flex:none}

/* ---------- admin ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-1);color:var(--tx);text-decoration:none !important;display:flex;flex-direction:column}
a.kpi:hover{border-color:#D3D8E0;box-shadow:var(--sh-2)}
.kpi.hot{border-color:#F5C9A6;background:linear-gradient(180deg,#FFF8F2,#fff)}
.k-n{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.k-n.sm{font-size:22px}
.kpi.hot .k-n{color:var(--brand)}
.k-l{color:var(--tx-2);font-size:12.5px;font-weight:600;margin-top:2px}
.mlist{display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line-2)}
.mrow:last-child{border-bottom:0}
.mrow-main{display:flex;gap:12px;align-items:center;flex:1;min-width:0;color:var(--tx);text-decoration:none !important}
.mdate{flex:none;min-width:88px;font-weight:700;font-size:13px}
.mdate small{color:var(--tx-3);font-weight:600}
.mtxt{min-width:0;display:flex;flex-direction:column;font-size:13.5px}
.mtxt small{font-size:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs a{padding:9px 14px;font-weight:600;color:var(--tx-2);border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none !important;font-size:13.5px}
.tabs a:hover{color:var(--tx)}
.tabs a.on{color:var(--tx);border-bottom-color:var(--brand)}
.filters{display:flex;gap:12px;align-items:flex-end;padding:14px 16px;margin-bottom:16px;flex-wrap:wrap}
.filters .field{flex:0 1 170px}
.filters .field.grow{flex:1 1 240px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tr.clickable{cursor:pointer}
table.tbl tr.clickable:hover{background:#FBFAF7}
.act-card{border-color:#F5C9A6;box-shadow:0 0 0 3px rgba(226,112,31,.08)}
.eng-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.dot{width:10px;height:10px;border-radius:99px;background:#D0D5DD;margin-top:5px;flex:none}
.dot.on{background:var(--ok)}
.log{max-height:360px;overflow:auto}
.log-row{display:flex;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line-2);font-size:13px}
.log-t{color:var(--tx-3);flex:none;width:130px;font-size:12px}
.hot-card{border-color:#F5C9A6}
.areq{display:flex;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line-2);align-items:flex-start;flex-wrap:wrap}
.areq:last-child{border-bottom:0}
.req-info{flex:1 1 260px}
.req-form{display:flex;flex-direction:column;gap:8px;flex:0 1 320px}
.urow{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.urow.tight{padding:10px 0}
.eng-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.eng-form .inp{flex:1 1 150px;width:auto;padding:8px 10px;font-size:13.5px}
.policy-preview{background:var(--warn-bg);border-radius:8px;padding:12px 14px;color:#92400E}
.copy{display:flex;gap:8px;align-items:center;background:#F1F3F6;border-radius:8px;padding:8px}
.copy code{flex:1;background:none;word-break:break-all;font-size:12px}

/* admin month calendar */
.legend-row{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--tx-2);margin-bottom:10px;align-items:center}
.legend-row span{display:inline-flex;gap:6px;align-items:center}
.acal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--line);gap:1px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.acal-dow{background:var(--surface-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3);padding:8px 10px}
.acal-day{background:#fff;min-height:112px;padding:6px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.acal-day.other{background:#FAFBFC}.acal-day.other .acal-n span:first-child{color:#C4CAD3}
.acal-day.wknd,.acal-day.hol{background:repeating-linear-gradient(135deg,#FAFBFC,#FAFBFC 6px,#F3F4F7 6px,#F3F4F7 12px)}
.acal-day.today .acal-n span:first-child{background:var(--brand);color:#fff;border-radius:99px;padding:0 7px}
.acal-n{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px}
.open{font-size:10px;font-weight:800;color:var(--ok);background:var(--ok-bg);border-radius:4px;padding:0 5px;letter-spacing:.06em}
.acal-eng{display:flex;gap:3px;flex-wrap:wrap}
.eng-chip{display:inline-grid;place-items:center;min-width:22px;height:18px;padding:0 4px;border-radius:5px;font-size:10px;font-weight:800;background:#EEF0F3;color:var(--tx-2)}
.eng-chip.busy{background:#3C3A55;color:#fff}
.acal-bk{display:block;font-size:11.5px;font-weight:600;padding:3px 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none !important}
.acal-bk small{font-weight:800;opacity:.75}
.acal-bk.c{background:var(--ok-bg);color:#065F46;border-left:3px solid var(--ok)}
.acal-bk.p{background:var(--warn-bg);color:#92400E;border-left:3px dashed var(--warn)}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px}
.lg.bk-c{background:var(--ok-bg);border-left:3px solid var(--ok)}
.lg.bk-p{background:var(--warn-bg);border-left:3px dashed var(--warn)}
.lg.av{background:#E6F6F0;border:1px solid #A7DFC8}
.lg.un{background:#F1F2F5;border:1px solid #E1E4EA}
.lg.se{background:var(--brand)}

/* ---------- booking form ---------- */
.book-form{display:flex;flex-direction:column;gap:18px}
.step-h{display:flex;gap:14px;align-items:flex-start;padding:18px 18px 0}
.step-h .num{flex:none;width:30px;height:30px;border-radius:99px;background:var(--ink-2);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.step-h p{font-size:13px;margin-top:2px}
.opt-grid{display:grid;gap:12px}
.opt-grid.two{grid-template-columns:1fr 1fr}
.opt-grid.three{grid-template-columns:repeat(3,1fr)}
.opt-grid.pk{margin-top:14px}
.opt{position:relative;display:flex;flex-direction:column;gap:5px;padding:14px 16px 14px 44px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:#fff;transition:.15s}
.opt:hover{border-color:#D3D8E0;background:var(--surface-2)}
.opt input{position:absolute;left:16px;top:16px;width:18px;height:18px;accent-color:var(--brand)}
.opt.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(226,112,31,.12)}
.opt-t{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:7px}
.opt-d{color:var(--tx-2);font-size:12.5px;line-height:1.45}
.opt .pill{align-self:flex-start;margin-top:2px}
.medal{width:12px;height:12px;border-radius:99px;display:inline-block}
.pkg-gold .medal{background:linear-gradient(135deg,#F6D365,#D4A017)}
.pkg-silver .medal{background:linear-gradient(135deg,#E5E7EB,#9CA3AF)}
.pkg-bronze .medal{background:linear-gradient(135deg,#E7B48A,#A0522D)}

.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.cal{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-h strong{font-size:15px}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--tx-3);text-transform:uppercase;padding:4px 0}
.cd{height:46px;border-radius:9px;border:0;background:#F1F2F5;color:#A3AAB6;font-weight:700;font-size:14px;display:grid;place-items:center;position:relative;cursor:default;transition:.12s}
.cd.blank{background:transparent}
.cd.off{background:transparent;color:#C4CAD3;font-weight:500}
.cd.un{background:#F1F2F5;color:#A3AAB6;text-decoration:line-through;text-decoration-color:#C4CAD3}
.cd.av{background:#E6F6F0;color:#065F46;cursor:pointer;box-shadow:inset 0 0 0 1px #A7DFC8}
.cd.av:hover{background:#CFF0E2}
.cd.inrange{background:#FBD9BF;color:#7C2D12;box-shadow:none}
.cd.inrange.skip{background:#FDF1E8;color:#C08A63}
.cd.sel,.cd.start,.cd.end{background:var(--brand) !important;color:#fff !important;box-shadow:0 3px 10px rgba(226,112,31,.35)}
.cd.today::after{content:'';position:absolute;bottom:5px;width:4px;height:4px;border-radius:99px;background:currentColor}
.cd.loading{opacity:.4}
.cal-legend{display:flex;gap:14px;justify-content:center;font-size:12px;color:var(--tx-2);margin-top:10px;flex-wrap:wrap}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-side{display:flex;flex-direction:column;gap:14px}
.sel-box{border:1.5px dashed var(--line);border-radius:12px;padding:14px;min-height:96px}
.sel-box.has{border-style:solid;border-color:var(--brand);background:var(--brand-soft)}
.sel-box.bad{border-style:solid;border-color:var(--dngr);background:var(--dngr-bg)}
.sel-empty{color:var(--tx-3);font-size:13px}
.sel-title{font-weight:800;font-size:16px}
.sel-days{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.sel-days span{background:#fff;border-radius:6px;padding:2px 7px;font-size:12px;font-weight:600;border:1px solid #F5C9A6}
.sel-clear{margin-top:8px;font-size:12.5px;font-weight:600;background:none;border:0;color:var(--brand);cursor:pointer;padding:0}
.terms-card{border-color:#F5C9A6}
.policy{display:flex;gap:14px;background:var(--warn-bg);border-radius:12px;padding:16px;color:#78350F}
.policy-ic{flex:none;width:40px;height:40px;border-radius:99px;background:#FDE3B5;display:grid;place-items:center;color:var(--warn)}
.policy-ic svg{width:22px;height:22px}
.policy h3{font-size:15px;margin-bottom:4px;color:#78350F}
.tiers{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.tiers li{background:#fff;border-radius:8px;padding:6px 10px;font-size:13px;border:1px solid #F7DDB0}
.tiers strong{color:var(--dngr);font-size:15px}
.submit-row{display:flex;gap:14px;align-items:center;margin-top:16px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  .detail-grid,.two-col{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .cal-wrap{grid-template-columns:1fr}
}
@media (max-width: 860px){
  .nav-toggle{display:block}
  .mainnav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--ink-2);flex-direction:column;align-items:stretch;padding:8px 12px 14px;box-shadow:0 14px 30px rgba(0,0,0,.3)}
  .mainnav.open{display:flex}
  .mainnav > a{padding:12px}
  .mainnav > a.on::after{display:none}
  .nav-user{margin:8px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);justify-content:space-between}
  .who{align-items:flex-start}
}
@media (max-width: 640px){
  body{font-size:14.5px}
  .page-in{padding:18px 14px 30px}
  h1{font-size:21px}
  .form-grid,.opt-grid.two,.opt-grid.three,.checks{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
  .dl dt{border-bottom:0;padding-bottom:0}
  .bcard{padding:12px 14px}
  .mrow{padding:10px 14px;flex-wrap:wrap}
  .mdate{min-width:70px}
  .acal{display:flex;flex-direction:column}
  .acal-dow{display:none}
  .acal-day{min-height:0}
  .acal-n .dn{font-size:0}
  .acal-n .dn::before{content:attr(data-dow);font-size:13px}
  .acal-day.other,.acal-day.wknd:not(:has(.acal-bk)){display:none}
  
  .auth-top{padding:24px 22px 16px}.auth-body{padding:0 22px 24px}
  .brand-sub{display:none}
  .cd{height:40px;font-size:13.5px}
  .page-title .btn{width:100%}
  .submit-row .btn{width:100%}
}
@media print{
  .topbar,.foot,.btn,.tabs,.filters,.side form,details{display:none !important}
  body{background:#fff}
}