/* =====================================================================
   SALONEX — ultra-premium MAXIMALISM skin. Loaded after app.css.
   Crimson from the brand mark, layered patterns, bold type, hard shadows.
   Every corner is capped at 6px. Novva Inc.
   ===================================================================== */
@font-face { font-family: "Anton"; src: url("../fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Syne"; src: url("../fonts/syne-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Syne"; src: url("../fonts/syne-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
:root {
  --crimson: #e10a23; --crimson-deep: #a50010; --rose: #ff4f8b; --blush: #ffd6e0; --gold: #ffc23d; --champagne: #f6e3b4;
  --plum: #5b1a6b; --orchid: #c77dff; --teal: #00b3a4; --mint: #9af0d8; --sky: #9cc9ff; --ink-0: #120a0d; --paper: #fbf5ee;
  --bg: var(--paper); --surface: #fffdf9; --surface-2: #fff7ef; --ink: #160b0f; --ink-2: #5a4a50; --ink-3: #8a7a80;
  --line: #160b0f; --line-2: #ecdcd4; --accent: var(--crimson); --accent-ink: #fff; --accent-soft: rgba(225,10,35,.09);
  --ok: #0a8f5a; --warn: #b85d00; --bad: #c4001a; --ok-soft: rgba(10,143,90,.12); --warn-soft: rgba(184,93,0,.12); --bad-soft: rgba(196,0,26,.1);
  --glass: rgba(255,250,244,.86); --glass-line: rgba(22,11,15,.9);
  --shadow: 5px 5px 0 var(--ink); --shadow-lg: 10px 10px 0 var(--ink); --hard: 4px 4px 0 var(--ink);
  --r: 6px;
  --hd: "Anton", Impact, "Arial Narrow", sans-serif; --dsp: "Syne", var(--f);
  --stripes: repeating-linear-gradient(45deg, rgba(22,11,15,.07) 0 3px, transparent 3px 13px);
  --dots: radial-gradient(rgba(22,11,15,.16) 1.1px, transparent 1.3px) 0 0 / 18px 18px;
  --candy: repeating-linear-gradient(90deg, var(--crimson) 0 26px, var(--gold) 26px 52px, var(--rose) 52px 78px, var(--teal) 78px 104px, var(--orchid) 104px 130px);
  --silk: linear-gradient(120deg, #ffe7ec 0%, #fff3d6 35%, #f1e4ff 70%, #dcf7f1 100%);
}
:root[data-theme="dark"] {
  --bg: #120a0d; --surface: #1d1216; --surface-2: #24161b; --ink: #fff2f4; --ink-2: #d1b8bf; --ink-3: #a58d94; --line: #fff2f4; --line-2: #3a2a30;
  --accent: #ff2b47; --accent-soft: rgba(255,43,71,.16); --glass: rgba(29,18,22,.9); --glass-line: rgba(255,242,244,.9);
  --shadow: 5px 5px 0 #000; --shadow-lg: 10px 10px 0 #000; --hard: 4px 4px 0 #000;
  --stripes: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 13px); --dots: radial-gradient(rgba(255,255,255,.12) 1.1px, transparent 1.3px) 0 0 / 18px 18px;
  --silk: linear-gradient(120deg, #2a1218 0%, #2b2010 35%, #22142c 70%, #10241f 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #120a0d; --surface: #1d1216; --surface-2: #24161b; --ink: #fff2f4; --ink-2: #d1b8bf; --ink-3: #a58d94; --line: #fff2f4; --line-2: #3a2a30;
  --accent: #ff2b47; --accent-soft: rgba(255,43,71,.16); --glass: rgba(29,18,22,.9); --glass-line: rgba(255,242,244,.9);
  --shadow: 5px 5px 0 #000; --shadow-lg: 10px 10px 0 #000; --hard: 4px 4px 0 #000;
  --stripes: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 13px); --dots: radial-gradient(rgba(255,255,255,.12) 1.1px, transparent 1.3px) 0 0 / 18px 18px;
  --silk: linear-gradient(120deg, #2a1218 0%, #2b2010 35%, #22142c 70%, #10241f 100%);
} }
body { background: radial-gradient(circle at 92% 4%, rgba(255,194,61,.28) 0 180px, transparent 181px), radial-gradient(circle at 4% 96%, rgba(255,79,139,.20) 0 220px, transparent 221px), var(--dots), var(--bg); background-attachment: fixed; letter-spacing: 0; }

/* ---------- type ---------- */
h1, h2, .page-head h2, .card .hd h3, .kpi .v, .modal h2, .modal .hd h3 { font-family: var(--hd); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.page-head h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: .95; margin: 0; text-shadow: 3px 3px 0 var(--blush); }
:root[data-theme="dark"] .page-head h2 { text-shadow: 3px 3px 0 var(--crimson-deep); }
.page-head p { font-weight: 600; color: var(--ink-2); }
.card .hd h3 { font-size: 18px; }

/* ---------- shell: crimson rail with stripes, candy line under the nav ---------- */
.rail { background: var(--crimson) !important; background-image: var(--stripes) !important; border-right: 3px solid var(--ink-0) !important; }
.rail a.ri { color: #fff !important; border: 2px solid transparent; }
.rail a.ri:hover { background: rgba(0,0,0,.18) !important; border-color: #fff; }
.rail a.ri.on, .rail a.ri.active, .rail a.ri[aria-current] { background: var(--gold) !important; color: #000 !important; border-color: #000 !important; box-shadow: 3px 3px 0 #000; }
.rail .tip { background: #000 !important; color: #fff !important; font-weight: 700; border: 2px solid var(--gold); }
.rail .logo-mark, .rail .brand img { filter: drop-shadow(2px 2px 0 #000); }
.nav { background: var(--glass) !important; border-bottom: 3px solid var(--line) !important; position: relative; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 6px; background: var(--candy); border-bottom: 2px solid var(--ink-0); pointer-events: none; z-index: 3; }
.nav .search input { border: 2px solid var(--line) !important; background: var(--surface) !important; box-shadow: var(--hard); font-weight: 600; }

/* ---------- surfaces ---------- */
.card { border: 2.5px solid var(--line) !important; box-shadow: var(--shadow) !important; background: var(--surface); }
.card .hd { border-bottom: 2.5px solid var(--line) !important; background: var(--stripes), var(--surface-2); }
.kpi { position: relative; overflow: hidden; }
.grid > .kpi:nth-child(5n+1), .kpis > .kpi:nth-child(5n+1) { background: var(--blush) !important; }
.grid > .kpi:nth-child(5n+2), .kpis > .kpi:nth-child(5n+2) { background: var(--champagne) !important; }
.grid > .kpi:nth-child(5n+3), .kpis > .kpi:nth-child(5n+3) { background: var(--mint) !important; }
.grid > .kpi:nth-child(5n+4), .kpis > .kpi:nth-child(5n+4) { background: var(--sky) !important; }
.grid > .kpi:nth-child(5n), .kpis > .kpi:nth-child(5n) { background: #e8d5ff !important; }
:root[data-theme="dark"] .grid > .kpi { background: var(--surface) !important; }
.kpi::after { content: ""; position: absolute; inset: 0; background: var(--stripes); pointer-events: none; }
.kpi .v { font-size: 30px; line-height: 1; color: #160b0f; }
:root[data-theme="dark"] .kpi .v { color: var(--ink); }
.kpi .l { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: #160b0f; }
:root[data-theme="dark"] .kpi .l { color: var(--ink-2); }

/* ---------- controls ---------- */
.btn { border: 2.5px solid var(--line) !important; box-shadow: var(--hard); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; transition: transform .1s, box-shadow .1s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); text-decoration: none; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.btn.primary { background: var(--crimson) !important; color: #fff !important; }
.btn.gold { background: var(--gold) !important; color: #000 !important; }
.btn.ghost { box-shadow: none; border-color: transparent !important; text-transform: none; letter-spacing: 0; }
.btn.ghost:hover { border-color: var(--line) !important; box-shadow: var(--hard); }
.btn.danger { background: var(--bad) !important; color: #fff !important; }
.in, select.in, textarea.in { border: 2px solid var(--line) !important; background: var(--surface) !important; font-weight: 600; }
.in:focus { box-shadow: 3px 3px 0 var(--crimson) !important; outline: none; background: #fffaf0 !important; }
:root[data-theme="dark"] .in:focus { background: var(--surface-2) !important; }
.seg, .tabs { border: 2.5px solid var(--line) !important; box-shadow: var(--hard); background: var(--surface) !important; }
.seg button.on, .tabs button.on, .seg .on, .tabs .on { background: var(--ink) !important; color: var(--bg) !important; }
.pill, .badge { border: 2px solid var(--line); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.chip-sx { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 2px solid var(--line); border-radius: var(--r); font-weight: 800; font-size: 11px; background: var(--surface); }

/* ---------- tables ---------- */
.tbl th { background: var(--ink) !important; color: var(--bg) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.tbl tbody tr:nth-child(even) td { background: var(--surface-2); }
.tbl tbody tr:hover td { background: var(--accent-soft) !important; }
.tbl-wrap { border: 2.5px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

/* ---------- modals and toasts ---------- */
.modal { border: 3px solid var(--line) !important; box-shadow: 12px 12px 0 var(--crimson), 12px 12px 0 3px var(--line) !important; }
.modal .hd { background: var(--stripes), var(--gold) !important; border-bottom: 3px solid var(--line) !important; color: #000; }
.modal-bg { background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px) 0 0 / 16px 16px, rgba(18,10,13,.72) !important; }
.toast { border: 2.5px solid var(--line) !important; box-shadow: var(--shadow) !important; }

/* ---------- maximal decorations used by SALONEX pages ---------- */
.sx-hero { position: relative; overflow: hidden; border: 3px solid var(--line); border-radius: var(--r); box-shadow: 10px 10px 0 var(--crimson), 10px 10px 0 3px var(--line); background: var(--silk); padding: 26px 28px; }
.sx-hero::before { content: ""; position: absolute; inset: 0; background: var(--stripes); pointer-events: none; }
.sx-hero h1 { margin: 0; font-family: var(--hd); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4.6vw, 64px); line-height: .9; position: relative; }
.sx-hero h1 .blk { display: inline-block; background: var(--crimson); color: #fff; padding: 0 .12em; border: 3px solid var(--line); box-shadow: 5px 5px 0 var(--line); transform: rotate(-1.5deg); }
.sx-hero h1 .blk.gold { background: var(--gold); color: #000; transform: rotate(1deg); }
.sx-sticker { position: absolute; display: grid; place-items: center; text-align: center; width: 104px; height: 104px; filter: drop-shadow(4px 4px 0 var(--ink-0)); animation: sx-spin 24s linear infinite; pointer-events: none; z-index: 2; }
.sx-sticker b { display: grid; place-items: center; width: 100%; height: 100%; padding: 16%; background: var(--gold); color: #000; font: 400 14px/1 var(--hd); text-transform: uppercase;
  clip-path: polygon(50% 0,61% 13%,77% 6%,79% 22%,95% 25%,88% 40%,100% 50%,88% 60%,95% 75%,79% 78%,77% 94%,61% 87%,50% 100%,39% 87%,23% 94%,21% 78%,5% 75%,12% 60%,0 50%,12% 40%,5% 25%,21% 22%,23% 6%,39% 13%); }
@keyframes sx-spin { to { transform: rotate(360deg); } }
.sx-ticker { overflow: hidden; background: var(--ink-0); color: #fff; border: 3px solid var(--ink-0); border-radius: var(--r); box-shadow: 0 5px 0 var(--crimson); }
.sx-ticker .tr { display: flex; width: max-content; animation: sx-marq 40s linear infinite; }
.sx-ticker span { display: flex; align-items: center; gap: 18px; padding: 9px 18px; white-space: nowrap; font: 400 17px/1 var(--hd); text-transform: uppercase; letter-spacing: .02em; }
.sx-ticker span i { font-style: normal; color: var(--gold); }
@keyframes sx-marq { to { transform: translateX(-50%); } }
.sx-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 2.5px solid var(--line); border-radius: var(--r); background: var(--gold); color: #000; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; box-shadow: 3px 3px 0 var(--line); transform: rotate(-1.5deg); }
.sx-swatch { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 3px; vertical-align: -1px; }
.sx-photo { border: 3px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); object-fit: cover; background: var(--stripes), var(--surface-2); }
.sx-avatar { width: 40px; height: 40px; border: 2.5px solid var(--line); border-radius: var(--r); object-fit: cover; background: var(--blush); display: grid; place-items: center; font: 400 17px/1 var(--hd); color: var(--crimson-deep); flex: none; }
.avatar { border-radius: var(--r) !important; border: 2px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .sx-sticker, .sx-ticker .tr { animation: none; } }
@media (max-width: 900px) { .sx-sticker { display: none; } .sx-hero { box-shadow: 6px 6px 0 var(--crimson), 6px 6px 0 3px var(--line); } }
/* catalogue cards */
.sx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.sx-card { border: 2.5px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s; display: flex; flex-direction: column; }
.sx-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--crimson), 8px 8px 0 2.5px var(--line); }
.sx-card-img { position: relative; height: 150px; background: var(--stripes), var(--silk); background-size: cover; background-position: center; border-bottom: 2.5px solid var(--line); display: grid; place-items: center; }
.sx-card-img [data-lucide] { width: 44px; height: 44px; color: var(--crimson); }
.sx-card:nth-child(4n+2) .sx-card-img:not([style*="url"]) { background: var(--stripes), var(--champagne); }
.sx-card:nth-child(4n+3) .sx-card-img:not([style*="url"]) { background: var(--stripes), var(--mint); }
.sx-card:nth-child(4n) .sx-card-img:not([style*="url"]) { background: var(--stripes), #e8d5ff; }
.sx-card-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sx-card-b h4 { margin: 0; font: 400 20px/1 var(--hd); text-transform: uppercase; }
.sx-card-b p { margin: 0; color: var(--ink-2); }
.sx-sec { margin: 14px 0 8px; font: 400 15px/1 var(--hd); text-transform: uppercase; letter-spacing: .03em; display: inline-block; padding: 4px 8px; background: var(--ink); color: var(--bg); border-radius: var(--r); }
/* appointment diary */
.sx-cal { border: 2.5px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); background: var(--surface); overflow: auto; max-height: calc(100vh - 230px); }
.sx-cal-head { display: grid; grid-template-columns: 64px repeat(var(--cols), minmax(150px, 1fr)); position: sticky; top: 0; z-index: 3; background: var(--ink); color: var(--bg); min-width: calc(64px + var(--cols) * 150px); }
.sx-cal-head > div { padding: 9px 10px; font-weight: 900; border-left: 1px solid rgba(255,255,255,.15); }
.sx-cal-head .muted { color: rgba(255,255,255,.65) !important; font-weight: 600; }
.sx-cal-body { position: relative; display: grid; grid-template-columns: 64px repeat(var(--cols), minmax(150px, 1fr)); min-width: calc(64px + var(--cols) * 150px); }
.sx-cal-times { position: relative; border-right: 2px solid var(--line); background: var(--surface-2); }
.sx-cal-times div { position: absolute; left: 0; right: 0; padding: 2px 8px; font-weight: 800; font-size: 11px; border-top: 1px solid var(--line-2); }
.sx-cal-col { position: relative; border-left: 1px solid var(--line-2); }
.sx-slot { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-2); cursor: pointer; }
.sx-slot:hover { background: var(--accent-soft); }
.sx-appt { position: absolute; left: 4px; right: 4px; z-index: 2; padding: 4px 7px; border: 2px solid var(--line); border-left: 6px solid var(--c); border-radius: var(--r); background: var(--surface); box-shadow: 3px 3px 0 var(--line); overflow: hidden; cursor: pointer; font-size: 11.5px; line-height: 1.25; display: flex; flex-direction: column; gap: 2px; }
.sx-appt:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--crimson); z-index: 4; }
.sx-appt b { font-weight: 900; } .sx-appt span { color: var(--ink-2); font-weight: 600; }
.sx-appt i { align-self: flex-start; font-style: normal; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.sx-appt.off { opacity: .45; text-decoration: line-through; }
/* AI studio */
.sx-studio { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.4fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .sx-studio { grid-template-columns: 1fr; } }
.sx-ph { position: relative; aspect-ratio: 3 / 4; border: 2.5px solid var(--line); border-radius: var(--r); background: var(--stripes), var(--silk); overflow: hidden; display: grid; place-items: center; }
.sx-ph img, .sx-ph video { width: 100%; height: 100%; object-fit: cover; }
.sx-ph .empty [data-lucide] { width: 40px; height: 40px; color: var(--crimson); }
.sx-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 360px; overflow: auto; padding: 4px 6px 8px 2px; }
.sx-opt { text-align: left; border: 2.5px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 9px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; box-shadow: 3px 3px 0 var(--line); font: inherit; color: var(--ink); }
.sx-opt img { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; margin-bottom: 4px; }
.sx-opt b { font: 400 15px/1.05 var(--hd); text-transform: uppercase; } .sx-opt span { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.sx-opt:hover { transform: translate(-1px, -1px); } .sx-opt.on { background: var(--crimson); color: #fff; } .sx-opt.on span { color: #ffe1e6; }
.sx-opt.sug { box-shadow: 3px 3px 0 var(--gold), 3px 3px 0 2.5px var(--line); }
.sx-analysis { border: 2.5px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--stripes), var(--champagne); color: #160b0f; }
#sMic.rec { background: var(--crimson) !important; color: #fff !important; animation: sx-pulse 1s infinite; }
@keyframes sx-pulse { 50% { box-shadow: 0 0 0 6px rgba(225,10,35,.25); } }
.sx-wait { display: grid; place-items: center; gap: 8px; padding: 40px; text-align: center; }
.sx-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sx-ba { border: 2.5px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.sx-ba.fav { box-shadow: 6px 6px 0 var(--gold), 6px 6px 0 2.5px var(--line); }
.sx-ba-wrap { position: relative; aspect-ratio: 2 / 3; overflow: hidden; }
.sx-ba-wrap > img, .sx-ba-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-ba-after { position: absolute; top: 0; bottom: 0; right: 0; left: auto; overflow: hidden; border-left: 3px solid #fff; }
.sx-ba-after img { left: auto; right: 0; width: auto; min-width: 100%; height: 100%; }
.sx-ba-wrap input[type=range] { position: absolute; left: 6px; right: 6px; bottom: 8px; width: calc(100% - 12px); }
.sx-ba-l, .sx-ba-r { position: absolute; top: 8px; padding: 2px 8px; background: rgba(0,0,0,.65); color: #fff; font-weight: 800; font-size: 11px; border-radius: 4px; }
.sx-ba-l { left: 8px; } .sx-ba-r { right: 8px; }
.spin { display: inline-block; width: 16px; height: 16px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 3px; animation: sx-spin .8s linear infinite; vertical-align: -3px; margin-right: 6px; }
/* dashboard */
.sx-dash { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
@media (max-width: 1000px) { .sx-dash { grid-template-columns: 1fr; } }
.sx-next { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 2px dashed var(--line-2); color: var(--ink); text-decoration: none !important; }
.sx-next > b { font: 400 22px/1 var(--hd); min-width: 64px; }
.sx-next > span { flex: 1; }
.sx-next > i { font-style: normal; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; border: 2px solid var(--line); }
.sx-alert { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border: 2.5px solid var(--line); border-left: 8px solid var(--c); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none !important; box-shadow: 3px 3px 0 var(--line); font-weight: 700; }
.sx-alert span { flex: 1; } .sx-alert b { font: 400 26px/1 var(--hd); }
.sx-alert:hover { transform: translate(-1px, -1px); }
#chart svg { color: var(--ink); }
/* POS */
.sx-tile { position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px; border: 2.5px solid var(--line) !important; border-top: 7px solid var(--c) !important; border-radius: var(--r) !important; background: var(--surface) !important; box-shadow: 3px 3px 0 var(--line); cursor: pointer; font: inherit; color: var(--ink); min-height: 118px; }
.sx-tile:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--c), 5px 5px 0 2.5px var(--line); }
.sx-tile img { width: 100%; height: 64px; object-fit: cover; border-radius: 4px; }
.sx-tile .sx-tile-ic { display: grid; place-items: center; height: 44px; background: var(--stripes), var(--silk); border-radius: 4px; }
.sx-tile .sx-tile-ic [data-lucide] { color: var(--c); width: 26px; height: 26px; }
.sx-tile b { font-weight: 800; line-height: 1.2; } .sx-tile span { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.sx-tile em { font: 400 18px/1 var(--hd); font-style: normal; margin-top: auto; }
.sx-tile.out { opacity: .45; }
.sx-cust { margin: 8px 12px 0; padding: 9px 10px; border: 2.5px solid var(--line); border-radius: var(--r); background: var(--stripes), var(--champagne); color: #160b0f; }
.sx-cust .muted { color: #5a4a50 !important; }
.sx-allergy { margin-top: 6px; padding: 5px 8px; background: var(--bad); color: #fff; font-weight: 800; border-radius: 4px; font-size: 12px; }
.sx-stf { height: 28px !important; font-size: 12px; margin-top: 4px; max-width: 190px; padding: 0 6px; }
.sx-line[data-k="redeem"], .sx-line[data-k="memfree"] { background: var(--ok-soft); }
/* landing / sign-in */
.sx-auth .art.sx-land { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 12%, rgba(255,194,61,.55) 0 150px, transparent 151px), radial-gradient(circle at 10% 88%, rgba(255,79,139,.4) 0 210px, transparent 211px), var(--stripes), var(--silk); border-right: 4px solid var(--ink-0); display: flex; flex-direction: column; justify-content: space-between; color: #160b0f; }
.sx-land-in { position: relative; padding: 44px 48px 20px; }
.sx-land-brand { display: flex; align-items: center; gap: 12px; font: 400 30px/1 var(--hd); letter-spacing: .03em; }
.sx-land-brand img { width: 58px; height: 58px; filter: drop-shadow(3px 3px 0 #160b0f); }
.sx-land h1 { font: 400 clamp(46px, 5.4vw, 92px)/.9 var(--hd); text-transform: uppercase; margin: 34px 0 18px; text-shadow: 4px 4px 0 var(--blush); }
.sx-land h1 .blk { display: inline-block; background: var(--crimson); color: #fff; padding: 0 .12em; border: 3px solid #160b0f; box-shadow: 6px 6px 0 #160b0f; transform: rotate(-1.5deg); margin: .05em 0; text-shadow: none; }
.sx-land h1 .blk.gold { background: var(--gold); color: #000; transform: rotate(1deg); }
.sx-land p { font-size: 17px; font-weight: 700; max-width: 560px; }
.sx-land-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; max-width: 720px; }
.sx-land-grid > div { border: 2.5px solid #160b0f; border-radius: var(--r); background: #fffdf9; padding: 12px; box-shadow: 4px 4px 0 #160b0f; display: flex; flex-direction: column; gap: 3px; }
.sx-land-grid > div:nth-child(3n+1) { transform: rotate(-.8deg); } .sx-land-grid > div:nth-child(3n) { transform: rotate(.8deg); }
.sx-land-grid [data-lucide] { color: var(--crimson); width: 24px; height: 24px; }
.sx-land-grid b { font: 400 17px/1 var(--hd); text-transform: uppercase; } .sx-land-grid span { font-size: 12px; font-weight: 600; color: #5a4a50; }
.sx-land-tick { margin: 0 -6px 26px; border-radius: 0; transform: rotate(-1.4deg); }
.sx-auth .form { background: var(--dots), var(--bg); }
.sx-auth .form .box { border: 3px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 30px; box-shadow: 10px 10px 0 var(--crimson), 10px 10px 0 3px var(--line); }
.sx-auth .splash-mark b { font: 400 26px/1 var(--hd); text-transform: uppercase; }
.sx-auth h1, .sx-auth .form h2 { font-family: var(--hd); font-weight: 400; text-transform: uppercase; }
@media (max-width: 1100px) { .sx-land-grid { grid-template-columns: repeat(2, 1fr); } }