/* Store management console design system.
   Neutral, dense, accessible. One primary colour; status is conveyed by badges, not decoration. */
:root{
  --bg:#f4f5f7;--surface:#fff;--border:#e3e6eb;--border-strong:#cdd2da;
  --text:#14181f;--muted:#5b6575;--subtle:#8a93a3;
  --primary:#2457d6;--primary-hover:#1c46b0;--primary-soft:#eaf0fd;
  --side:#10151f;--side-text:#aab3c2;--side-active:#1b2332;
  --success:#0f7b4b;--success-bg:#e5f6ee;--warning:#8a5a00;--warning-bg:#fff4dc;--danger:#b42318;--danger-bg:#fdecea;--info:#1d56a8;--info-bg:#e8f1fc;--neutral-bg:#eef0f3;
  --radius:10px;--radius-sm:7px;--shadow:0 1px 2px rgba(16,24,40,.05);--shadow-lg:0 12px 32px rgba(16,24,40,.16);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i-sm{width:15px;height:15px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:6px;z-index:100}.skip:focus{left:8px}

/* ---------- shell ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:var(--side);color:var(--side-text);display:flex;flex-direction:column;z-index:40;transition:transform .2s}
.side-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px;color:#fff;text-decoration:none!important}
.side-logo{width:36px;height:36px;border-radius:9px;background:#2a3446;display:grid;place-items:center;font-weight:700;overflow:hidden;flex:none}
.side-logo img{width:100%;height:100%;object-fit:cover}
.side-brand strong{display:block;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:158px}
.side-brand small{display:block;font-size:11px;color:var(--side-text)}
.side-nav{flex:1;overflow-y:auto;padding:6px 10px 14px}
.side-caption{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6f7a8c;padding:16px 10px 6px}
.side-link{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;color:var(--side-text);font-weight:500;text-decoration:none!important;margin-bottom:2px}
.side-link:hover{background:#171e2b;color:#fff}
.side-link[aria-current=page]{background:var(--side-active);color:#fff;box-shadow:inset 3px 0 0 #6b93ff}
.side-link .count{margin-left:auto;background:#2f6bff;color:#fff;border-radius:999px;font-size:11px;font-weight:600;padding:1px 8px;min-width:22px;text-align:center}
.side-foot{padding:12px;border-top:1px solid #1d2535}
.side-user{display:flex;align-items:center;gap:10px;padding:6px 6px 10px}
.avatar{width:34px;height:34px;border-radius:50%;background:#2f6bff;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.side-user strong{display:block;color:#fff;font-size:13px;line-height:1.2;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user small{font-size:11px}
.side-signout{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:0;color:var(--side-text);padding:8px 10px;border-radius:8px;cursor:pointer}
.side-signout:hover{background:#171e2b;color:#fff}
.main{margin-left:252px;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:60px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 28px}
.top-title{font-weight:600;font-size:15px}
.crumbs{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.crumbs a{color:var(--muted)}.crumbs .i{width:14px;height:14px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{display:none;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:#fff;place-items:center;cursor:pointer}
.content{width:100%;max-width:1280px;margin:0 auto;padding:28px;flex:1}
.scrim{display:none}

/* ---------- page header ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:24px;line-height:1.25;font-weight:650;letter-spacing:-.015em}
.page-head p{color:var(--muted);margin-top:4px;max-width:62ch}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-weight:500;margin-bottom:10px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:#fff;color:var(--text);font-weight:550;cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:#f7f8fa}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}
.btn-danger{color:var(--danger);border-color:#f0c2bd}.btn-danger:hover{background:var(--danger-bg)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}.btn-ghost:hover{background:var(--neutral-bg)}
.btn-sm{height:32px;padding:0 11px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card+.card,.card+.grid,.grid+.card,.alert+.card{margin-top:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.card-head h2{font-size:15px;font-weight:600}
.card-head p{color:var(--muted);font-size:13px;margin-top:2px}
.card-body{padding:20px}
.card-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:#fafbfc;border-radius:0 0 var(--radius) var(--radius)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-main{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.grid>.card+.card{margin-top:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);display:block;color:inherit;text-decoration:none!important;transition:border-color .12s,box-shadow .12s}
a.stat:hover{border-color:var(--border-strong);box-shadow:0 2px 8px rgba(16,24,40,.08)}
.stat-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:500}
.stat-value{font-size:28px;font-weight:650;letter-spacing:-.02em;margin:6px 0 2px;line-height:1.1}
.stat-hint{font-size:12px;color:var(--subtle)}

/* ---------- badges / alerts ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--neutral-bg);color:#3b4453;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.badge-success{background:var(--success-bg);color:var(--success)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-info{background:var(--info-bg);color:var(--info)}
.badge-plain::before{display:none}
.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);border:1px solid;margin-bottom:18px;font-size:14px}
.alert .i{margin-top:2px}
.alert-success{background:var(--success-bg);border-color:#bfe6d3;color:#0b5a38}
.alert-error{background:var(--danger-bg);border-color:#f3c8c3;color:#8a1b12}
.alert-info{background:var(--info-bg);border-color:#c9dcf5;color:#174a92}
.alert-warning{background:var(--warning-bg);border-color:#f1dca3;color:#6d4700}
.alert-close{margin-left:auto;background:none;border:0;cursor:pointer;color:inherit;opacity:.7}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{position:sticky;top:0;text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 16px;background:#fafbfc;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid #eef0f3;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfd}
.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{white-space:nowrap}
.cell-title{font-weight:600}
.cell-sub{display:block;color:var(--muted);font-size:12px}
.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--neutral-bg);border:1px solid var(--border)}
.item-cell{display:flex;align-items:center;gap:12px}

/* ---------- toolbar / tabs / pagination ---------- */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--border)}
.search{position:relative;flex:1;min-width:220px;max-width:420px}
.search .i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--subtle)}
.search input{padding-left:36px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto}
.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;color:var(--muted);font-weight:550;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none!important;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab[aria-current=page]{color:var(--primary);border-color:var(--primary)}
.pager{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
.pager-btns{display:flex;gap:8px}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:16px}
.field>span:first-child,.label{display:block;font-size:13px;font-weight:550;margin-bottom:6px}
.opt{color:var(--subtle);font-weight:400}
.input,.select,.textarea,input[type=text],input[type=number],input[type=tel],input[type=date],input[type=url],input:not([type]),select{width:100%;height:38px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 12px;background:#fff;transition:border-color .12s,box-shadow .12s}
input[type=file]{width:100%;padding:7px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:#fafbfc;font-size:13px}
input:hover,select:hover{border-color:#aab1bd}
input:focus,select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(36,87,214,.16)}
.hint{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-all{grid-column:1/-1}
.check{display:flex;align-items:center;gap:10px;font-weight:500;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--primary);margin:0}
.prefix{position:relative}.prefix>b{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:500}.prefix input{padding-left:26px}
.savebar{position:sticky;bottom:0;margin-top:20px;display:flex;justify-content:flex-end;gap:10px;padding:14px 0;background:linear-gradient(transparent,var(--bg) 40%)}

/* ---------- misc ---------- */
.empty{text-align:center;padding:52px 24px;color:var(--muted)}
.empty .empty-icon{width:46px;height:46px;border-radius:12px;background:var(--neutral-bg);display:grid;place-items:center;margin:0 auto 14px;color:var(--muted)}
.empty h3{color:var(--text);font-size:16px;font-weight:600;margin-bottom:4px}
.kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px 16px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500;word-break:break-word}
.summary-row{display:flex;justify-content:space-between;padding:6px 0}
.summary-row.total{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;font-weight:650;font-size:16px}
.status-toggle{display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--subtle)}.dot-on{background:#1fa971;box-shadow:0 0 0 3px rgba(31,169,113,.2)}
.progress{height:6px;background:var(--neutral-bg);border-radius:999px;overflow:hidden;margin:10px 0 14px}.progress>i{display:block;height:100%;background:var(--primary);border-radius:inherit}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #f0f2f5}
.checklist li:first-child{border-top:0}
.tick{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;flex:none;color:#fff}
.tick .i{width:12px;height:12px;stroke-width:3}
.done .tick{background:var(--success);border-color:var(--success)}
.done span:not(.tick){color:var(--muted);text-decoration:line-through}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.02em}
.code-chip{display:inline-block;padding:3px 8px;border-radius:6px;border:1px dashed var(--border-strong);background:#f8f9fb;font-weight:600}
.tenant-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--side-text)}

/* upload / theme picker */
.upload{display:grid;gap:10px}
.upload-preview{max-width:100%;border-radius:10px;border:1px solid var(--border);background:var(--neutral-bg)}
.upload-logo{width:72px;height:72px;object-fit:cover}
.upload-hero{width:100%;aspect-ratio:16/7;object-fit:cover}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.theme-opt{position:relative;display:block}
.theme-opt input{position:absolute;opacity:0;width:1px;height:1px}
.theme-card{display:grid;gap:6px;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius);background:#fff;cursor:pointer;height:100%}
.theme-card small{color:var(--muted);font-size:12px;line-height:1.35}
.theme-swatch{display:flex;height:38px;border-radius:7px;overflow:hidden;border:1px solid var(--border)}
.theme-swatch i{flex:1}.theme-swatch i:nth-child(1){background:var(--t1)}.theme-swatch i:nth-child(2){background:var(--t2)}.theme-swatch i:nth-child(3){background:var(--t3)}
.theme-opt input:checked+.theme-card{border-color:var(--primary);box-shadow:0 0 0 3px rgba(36,87,214,.16)}
.theme-opt input:focus-visible+.theme-card{outline:2px solid var(--primary);outline-offset:2px}

/* inline editors (inventory / products / picking) */
.edit-row{display:grid;grid-template-columns:minmax(200px,1.6fr) repeat(3,minmax(90px,.7fr)) auto auto;gap:14px;align-items:end;padding:14px 20px;border-bottom:1px solid #eef0f3}
.edit-row:last-child{border-bottom:0}
.edit-row .field{margin:0}
.edit-row .field>span:first-child{font-size:12px;color:var(--muted);margin-bottom:4px}
.edit-name strong{display:block}.edit-name small{color:var(--muted)}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

/* dialog + toast */
dialog{border:0;border-radius:14px;padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(16,21,31,.5)}
.dialog-body{padding:22px}.dialog-body h3{font-size:17px;margin-bottom:6px}.dialog-body p{color:var(--muted)}
.dialog-foot{display:flex;justify-content:flex-end;gap:10px;padding:0 22px 20px}
.toasts{position:fixed;right:20px;top:72px;z-index:80;display:grid;gap:10px;width:min(380px,calc(100% - 40px))}
.toast{margin:0;box-shadow:var(--shadow-lg);background:#fff}
.toast.alert-success{background:#f2fbf6}.toast.alert-error{background:#fff6f5}

/* order detail extras */
.steps{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.order-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted)}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:#fff}
.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(24px,7vw,96px);max-width:620px;width:100%;margin:0 auto}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.auth-brand .side-logo{background:var(--side);color:#fff}
.auth-panel h1{font-size:28px;font-weight:650;letter-spacing:-.02em;margin-bottom:8px}
.auth-panel>p{color:var(--muted);margin-bottom:24px}
.auth-panel .btn{width:100%;height:44px}
.auth-aside{background:linear-gradient(150deg,#10151f,#1d2b4f);color:#dbe4f5;display:flex;flex-direction:column;justify-content:center;padding:64px clamp(32px,6vw,88px)}
.auth-aside h2{font-size:30px;line-height:1.2;letter-spacing:-.02em;color:#fff;margin-bottom:16px;max-width:18ch}
.auth-aside ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.auth-aside li{display:flex;gap:12px;align-items:flex-start}
.auth-aside li .i{color:#7da2ff;margin-top:3px}
.auth-foot{margin-top:28px;color:var(--subtle);font-size:12px}

/* ---------- responsive ---------- */
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-main{grid-template-columns:1fr}.edit-row{grid-template-columns:1fr 1fr 1fr}.edit-row .edit-name{grid-column:1/-1}}
@media(max-width:960px){
  .sidebar{transform:translateX(-100%)}
  body.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(16,21,31,.45);z-index:35}
  .main{margin-left:0}.icon-btn{display:grid}
  .topbar{padding:0 16px}.content{padding:20px 16px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}.auth-aside{display:none}
}
@media(max-width:640px){.form-grid,.form-grid-3{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.stat-value{font-size:24px}.kv{grid-template-columns:100px 1fr}.hide-sm{display:none}.top-actions .btn span{display:none}.edit-row{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.sidebar,.topbar,.page-actions,.savebar{display:none!important}.main{margin:0}body{background:#fff}.card{box-shadow:none}}
.seg{display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--neutral-bg,#eef0f4);margin-bottom:20px}
.seg a{flex:1;text-align:center;padding:8px 10px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted)}
.seg a.is-on{background:#fff;color:var(--text,#111);box-shadow:0 1px 3px rgb(0 0 0/.12)}

/* ---- team ---- */
.invite-link{display:flex;gap:8px}.invite-link input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--border,#d9dde4);border-radius:8px;background:#fff;font:12px ui-monospace,Consolas,monospace}
.section-title{font-size:16px;font-weight:650;margin:28px 0 12px}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.role-card{background:#fff;border:1px solid var(--border,#e3e6ec);border-radius:12px;padding:16px}
.role-card h3{margin:0 0 4px;font-size:14px}.role-card p{margin:0 0 10px;color:var(--muted);font-size:12.5px}
.role-card ul{margin:0;padding-left:16px;font-size:12.5px;display:grid;gap:3px}
.role-picker{border:0;padding:0;margin:8px 0 0;display:grid;gap:8px}.role-picker legend{padding:0;margin-bottom:6px}
.role-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border,#d9dde4);border-radius:10px;cursor:pointer}
.role-opt:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,#fff)}
.role-opt.is-off{opacity:.5;cursor:not-allowed}
.role-opt input{margin-top:3px}.role-opt small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.perm-list{display:grid;gap:12px;padding:12px;border:1px dashed var(--border,#d9dde4);border-radius:10px;margin-top:2px}
.perm-list[hidden]{display:none}
.perm-group{display:grid;gap:6px}
.perm-group .check{display:flex;gap:8px;align-items:flex-start}.perm-group .check small{display:block;color:var(--muted);font-size:12px}

/* ---- design page ---- */
.design{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start;max-width:1320px}
.design .savebar{grid-column:1/-1}
.design-side{position:sticky;top:76px}
.gallery-title{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:650}
.gallery-title:not(:first-child){margin-top:24px}
.layout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.layout-opt{position:relative;display:block}
.layout-opt input{position:absolute;opacity:0;width:1px;height:1px}
.layout-card{display:flex;flex-direction:column;height:100%;border:1.5px solid var(--border);border-radius:12px;background:#fff;overflow:hidden;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.layout-card:hover{border-color:#b9c3d8}
.layout-opt input:checked+.layout-card{border-color:var(--primary);box-shadow:0 0 0 3px rgba(36,87,214,.18)}
.layout-opt input:focus-visible+.layout-card{outline:2px solid var(--primary);outline-offset:2px}
.layout-mock{display:block;padding:10px;background:#eef0f4;border-bottom:1px solid var(--border)}
.layout-meta{display:grid;gap:3px;padding:12px 14px 14px;align-content:start}
.layout-meta strong{font-size:14px}.layout-meta .badge{justify-self:start}
.layout-meta small{color:var(--muted);font-size:12px;line-height:1.4}
.layout-meta em{font-style:normal;font-size:11.5px;color:var(--primary);font-weight:600;margin-top:2px}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.preset{display:grid;gap:7px;padding:9px;border:1.5px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;text-align:left;font:inherit}
.preset:hover{border-color:#b9c3d8}.preset.is-on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(36,87,214,.16)}
.preset strong{font-size:12.5px;font-weight:600}
.preset-strip{display:flex;height:30px;border-radius:6px;overflow:hidden;border:1px solid var(--border)}.preset-strip i{flex:1}
.color-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:8px}
.color-field{display:grid;gap:8px}.color-field>span:first-child{font-size:13px;font-weight:550}.color-field small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.color-input{display:flex;gap:8px}
.color-input input[type=color]{width:46px;height:40px;padding:3px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer}
.color-input input[type=text]{flex:1;min-width:0;height:40px;padding:0 10px;border:1px solid var(--border);border-radius:8px;font:13px ui-monospace,Consolas,monospace;text-transform:lowercase}
.contrast{margin:14px 0 0;font-size:13px;padding:9px 12px;border-radius:8px}
.contrast.is-ok{background:#e9f7ef;color:#1d6b3f}.contrast.is-bad{background:#fdecea;color:#a3271b}
.preview-stage{padding:14px;background:#eef0f4}
.preview-actions{padding:14px 18px 18px;display:grid;gap:8px}.preview-actions .hint{margin:0}

/* wireframe miniatures: sized in container units so they scale */
.layout-mock,.preview-stage{container-type:inline-size}
.mock{--b:var(--m-brand,#2457d6);--a:var(--m-accent,#f5b301);--s:var(--m-surface,#f4f5f8);display:grid;gap:3cqw;padding:3cqw;aspect-ratio:16/12.5;background:var(--s);border-radius:1.6cqw;overflow:hidden;box-shadow:0 1px 3px rgb(0 0 0/.14);align-content:start}
.mock i,.mock u,.mock s,.mock b{display:block;text-decoration:none}
.m-bar{display:flex;align-items:center;gap:2.4cqw;height:6cqw;padding:0 2cqw;border-radius:1.2cqw;background:rgb(255 255 255/.85)}
.m-logo{width:4cqw;height:4cqw;border-radius:1cqw;background:var(--b)}
.m-nav{display:flex;gap:1.6cqw;flex:1}.m-nav i{width:6cqw;height:1.2cqw;border-radius:1cqw;background:#0003}
.m-search{width:16cqw;height:3.4cqw;border-radius:3cqw;background:#0000001a}
.m-bag{width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--b)}
.mh-centered .m-bar{justify-content:space-between}.mh-centered .m-logo{order:2}.mh-centered .m-nav{order:1;flex:0}.mh-centered .m-search,.mh-centered .m-bag{order:3}
.mh-dark .m-bar{background:#14161a}.mh-dark .m-nav i{background:#fff6}.mh-dark .m-search{background:#fff2}.mh-dark .m-logo{background:var(--a)}.mh-dark .m-bag{background:var(--a)}
.mh-bar .m-bar{background:var(--b)}.mh-bar .m-logo{background:#fff}.mh-bar .m-nav i{background:#fff6}.mh-bar .m-search{flex:1;background:#fff}.mh-bar .m-nav{flex:0}.mh-bar .m-bag{background:var(--a)}
.m-hero{min-height:25cqw;border-radius:1.4cqw;overflow:hidden;position:relative}
.m-copy{display:grid;gap:1.6cqw;align-content:center}
.m-copy u{height:1.5cqw;width:70%;border-radius:1cqw;background:#0000002b}
.m-copy u.h{height:3.6cqw;width:90%;background:#000000c4;opacity:.8}.m-copy u.h.s{width:62%}
.m-copy s{width:15cqw;height:4cqw;border-radius:2cqw;background:var(--b);margin-top:1cqw}
.m-img{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:1.4cqw}.m-img i{border-radius:1.2cqw;background:linear-gradient(140deg,var(--b),var(--a))}.m-img i:first-child{grid-row:1/3}.m-img i:nth-child(2){opacity:.55}.m-img i:nth-child(3){opacity:.8;background:var(--a)}
.m-split{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:2cqw}.m-split.is-flip .m-copy{order:2}
.m-centered{display:grid;place-items:center;padding:3cqw;background:radial-gradient(60cqw 20cqw at 50% 0,color-mix(in srgb,var(--b) 16%,transparent),transparent)}
.m-centered .m-copy{justify-items:center;text-align:center;width:70%}.m-centered u.h{margin:0 auto}
.m-pill{display:block;height:4.4cqw;width:100%;border-radius:3cqw;background:#fff;box-shadow:0 1px 3px #0002}
.m-orb{position:absolute;border-radius:50%;width:12cqw;height:12cqw;background:var(--a)}.m-orb.l{left:4cqw;top:6cqw}.m-orb.r{right:4cqw;bottom:3cqw;background:var(--b);opacity:.8}
.m-searchy{display:grid;grid-template-columns:1.2fr .8fr;gap:3cqw;padding:2cqw;background:color-mix(in srgb,var(--b) 10%,transparent)}
.m-card{display:grid;gap:1.6cqw;padding:3cqw;background:#fff;border-radius:1.6cqw;align-content:center}.m-card u{height:1.4cqw;border-radius:1cqw;background:#0002;width:70%}.m-card u.h{height:3.4cqw;width:90%;background:#000a}
.m-chips{display:flex;gap:1cqw}.m-chips i{width:8cqw;height:3cqw;border-radius:2cqw;background:color-mix(in srgb,var(--b) 20%,#fff)}
.m-searchy .m-img{grid-template-columns:1fr;grid-template-rows:1fr}.m-searchy .m-img i{border-radius:50%}
.m-carousel{background:linear-gradient(100deg,#14161a,color-mix(in srgb,var(--b) 70%,#14161a));display:flex;align-items:flex-end;padding:3cqw}
.m-carousel .m-copy{width:50%}.m-carousel .m-copy u{background:#fff5}.m-carousel .m-copy u.h{background:#fff}.m-carousel .m-copy s{background:var(--a)}
.m-dots{position:absolute;left:3cqw;bottom:1.4cqw;display:flex;gap:1cqw}.m-dots i{width:4cqw;height:.7cqw;border-radius:1cqw;background:#fff6}.m-dots i:first-child{background:var(--a)}
.m-side{display:grid;grid-template-columns:.8fr 2fr .9fr;gap:1.6cqw}
.m-side:not(:has(.m-tiles)){grid-template-columns:.8fr 2.9fr}
.m-list{display:grid;gap:1.2cqw;padding:1.6cqw;background:#fff;border-radius:1.2cqw;align-content:start}.m-list i{height:1.5cqw;border-radius:1cqw;background:#0002}
.m-slide{background:linear-gradient(120deg,var(--b),color-mix(in srgb,var(--b) 50%,#000));border-radius:1.2cqw;padding:3cqw;display:grid;gap:2cqw;align-content:end}.m-slide u{height:3.4cqw;width:60%;border-radius:1cqw;background:#fff}.m-slide s{width:13cqw;height:3.6cqw;border-radius:1.4cqw;background:var(--a)}
.m-tiles{display:grid;gap:1.6cqw}.m-tiles i{border-radius:1.2cqw;background:var(--a)}.m-tiles i:last-child{background:color-mix(in srgb,var(--b) 25%,#fff)}
.m-mosaic{display:grid;grid-template-columns:.8fr 1.6fr;gap:3cqw;padding:2cqw}
.m-tilegrid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:1.4cqw}.m-tilegrid i{border-radius:1.2cqw;background:var(--b)}.m-tilegrid i:first-child{grid-row:1/3;background:linear-gradient(150deg,var(--b),var(--a))}.m-tilegrid i:nth-child(2){background:var(--a)}.m-tilegrid i:nth-child(3){background:color-mix(in srgb,var(--b) 60%,#000)}
.m-cats{display:flex;gap:2cqw;justify-content:center}.m-cats i{width:7.5cqw;height:7.5cqw;border-radius:50%;background:color-mix(in srgb,var(--b) 18%,#fff)}
.m-cats-tiles i{width:13cqw;height:8cqw;border-radius:1.4cqw}
.m-cats-pills i{width:11cqw;height:3.4cqw;border-radius:3cqw}.m-cats-pills i:first-child{background:var(--b)}
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}.m-grid.dense{grid-template-columns:repeat(5,1fr);gap:1.4cqw}
.m-grid b{display:grid;gap:1cqw;padding:1.2cqw;background:#fff;border-radius:1.2cqw}.m-grid b i{aspect-ratio:1;border-radius:.8cqw;background:color-mix(in srgb,var(--b) 14%,#fff)}.m-grid b u{height:1.2cqw;border-radius:1cqw;background:#0002;width:80%}.m-grid b u+u{width:40%;background:var(--b)}
.mc-tall .m-grid b{background:none;padding:0}.mc-tall .m-grid b i{aspect-ratio:3/4}
.mc-soft .m-grid b{border-radius:2.6cqw;box-shadow:0 1px 3px #0001}.mc-soft .m-grid b i{border-radius:2cqw}
.mc-overlay .m-grid b{background:none;padding:0}.mc-overlay .m-grid b i{aspect-ratio:4/5;background:#14161a}
@media(max-width:1100px){.design{grid-template-columns:1fr}.design-side{position:static;order:-1}}
.m-arch{grid-template-columns:1fr!important;grid-template-rows:1fr!important}.m-arch i{border-radius:999cqw 999cqw 1.4cqw 1.4cqw!important;grid-row:auto!important}
.m-rows{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw 5cqw}.m-rows b{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:1.4cqw 0;border-bottom:.4cqw dashed #0002}.m-rows u{height:1.5cqw;width:55%;border-radius:1cqw;background:#0003}.m-rows i{width:8cqw;height:3cqw;border-radius:.6cqw;border:.4cqw solid var(--b)}

/* concept mockups for custom designs */
.m-cal{display:grid;grid-template-columns:1.5fr 1fr;gap:3cqw;padding:2cqw;background:#fff;border-radius:1.4cqw}
.m-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.9cqw}.m-cal-grid i{aspect-ratio:1;border-radius:.8cqw;background:#0000000f}.m-cal-grid i.on{background:var(--b)}.m-cal-grid i.dot{background:color-mix(in srgb,var(--a) 70%,#fff)}
.m-slots{display:grid;gap:1.2cqw;align-content:start}.m-slots u{height:3.4cqw;border-radius:.8cqw;border:.4cqw solid #0002}.m-slots u.on{background:var(--b);border-color:var(--b)}.m-slots s{height:3.8cqw;border-radius:2cqw;background:var(--a);margin-top:.6cqw}
.m-team{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}.m-team b{display:grid;justify-items:center;gap:1cqw}.m-team i{width:9cqw;height:9cqw;border-radius:50%;background:linear-gradient(140deg,var(--b),var(--a))}.m-team u{height:1.3cqw;width:70%;border-radius:1cqw;background:#0003}
.m-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}.m-cards3 b{display:grid;gap:1.1cqw;padding:1.6cqw;background:#fff;border-radius:1.4cqw}.m-cards3 b i{height:9cqw;border-radius:1cqw;background:color-mix(in srgb,var(--b) 16%,#fff)}.m-cards3 b u{height:1.3cqw;width:80%;border-radius:1cqw;background:#0002}.m-cards3 b u+u{width:45%}
.m-price b{justify-items:center;text-align:center;padding:2.4cqw 1.6cqw}.m-price .big{height:3.6cqw;width:50%;background:#000a;border-radius:1cqw}.m-price s{width:70%;height:3.4cqw;border-radius:2cqw;background:var(--b)}.m-price .hot{outline:.5cqw solid var(--b);background:color-mix(in srgb,var(--b) 8%,#fff)}
.m-time{display:grid;gap:1.2cqw;padding:2cqw;background:#fff;border-radius:1.4cqw}.m-time b{display:grid;grid-template-columns:9cqw 1fr 11cqw;gap:2cqw;align-items:center}.m-time span{height:3cqw;border-radius:1cqw;background:color-mix(in srgb,var(--b) 18%,#fff)}.m-time u{height:1.5cqw;border-radius:1cqw;background:#0003;width:60%}.m-time s{height:3cqw;border-radius:2cqw;background:var(--a)}
.m-gal{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:9cqw;gap:1.4cqw}.m-gal i{border-radius:1cqw;background:linear-gradient(140deg,var(--b),var(--a))}.m-gal i:nth-child(1){grid-row:span 2}.m-gal i:nth-child(2){opacity:.6}.m-gal i:nth-child(3){background:var(--a)}.m-gal i:nth-child(4){opacity:.8}.m-gal i:nth-child(5){grid-column:span 2;background:color-mix(in srgb,var(--b) 70%,#000)}
.m-form{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;padding:2.4cqw;background:#fff;border-radius:1.4cqw}.m-form span{height:4cqw;border-radius:.8cqw;border:.4cqw solid #0002}.m-form .tall{grid-column:1/-1;height:8cqw}.m-form s{grid-column:1/-1;height:4cqw;width:30%;border-radius:2cqw;background:var(--b)}
.concept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.concept{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.concept .layout-mock{border-bottom:1px solid var(--border)}
.concept-body{display:grid;gap:8px;padding:16px;flex:1;align-content:start}
.concept-body h3{margin:0;font-size:16px}.concept-body p{margin:0;color:var(--muted);font-size:13px}
.concept-body ul{margin:4px 0 0;padding-left:18px;font-size:13px;display:grid;gap:2px}
.concept-body .best{font-size:12px;color:var(--primary);font-weight:600}
.concept-foot{padding:0 16px 16px}.concept-foot .btn{width:100%}
.ticket{display:grid;gap:6px;padding:14px 20px;border-top:1px solid var(--border)}.ticket:first-child{border-top:0}
.ticket-top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ticket .reply{padding:10px 12px;border-radius:8px;background:#eef3ff;font-size:13px}
.price-note{display:flex;gap:12px;align-items:flex-start}
.layout-card .layout-shot{display:block;aspect-ratio:1100/760;width:100%;object-fit:cover;object-position:top;background:#eef0f4}
.shot-wrap{position:relative;display:block}
.shot-wrap .mock{display:none}
.sample-modal{width:min(1200px,96vw);height:min(86vh,900px);padding:0;border:0;border-radius:12px;overflow:hidden}
.sample-modal::backdrop{background:rgba(10,14,25,.6)}
.sample-modal .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);font-weight:600}
.sample-modal iframe{width:100%;height:calc(100% - 52px);border:0;display:block}