/* ===== Admin looks (chosen on Home → Look). "classic" = the plain Shopify-style look. ===== */
body[data-look] { --display: inherit; --body: inherit; --a1: #3ef0ff; --a2: #8b5cff; --a3: #ff4fd8; --glow: 1; }
body[data-look="nebula"]   { --bg: #05060a; --bg2: #0a0d16; --a1: #3ef0ff; --a2: #8b5cff; --a3: #ff4fd8; --ink: #e9ecff; --muted: #a3abc9; --faint: #6b7394; --lineHue: #8ca0ff; --glass: rgba(18,22,36,.66); --field: rgba(0,0,0,.3); --on: #05060a; --display: "Space Grotesk", sans-serif; --body: Inter, sans-serif; }
body[data-look="obsidian"] { --bg: #070605; --bg2: #100d0a; --a1: #f3dfb0; --a2: #e8c172; --a3: #b8863b; --ink: #f4ede1; --muted: #bfb19b; --faint: #7f735f; --lineHue: #e8c172; --glass: rgba(24,20,15,.72); --field: rgba(0,0,0,.32); --on: #1a1206; --display: "Cormorant Garamond", serif; --body: Manrope, sans-serif; }
body[data-look="aurora"]   { --bg: #03100f; --bg2: #071a18; --a1: #b6ff5a; --a2: #5dffd0; --a3: #2fb8ff; --ink: #e6fff8; --muted: #9ecdc2; --faint: #5f8a80; --lineHue: #5dffd0; --glass: rgba(10,30,28,.6); --field: rgba(0,0,0,.28); --on: #03100f; --display: Sora, sans-serif; --body: Manrope, sans-serif; }
body[data-look="synth"]    { --bg: #0b0414; --bg2: #14082a; --a1: #ffd23c; --a2: #ff3d8b; --a3: #a64dff; --ink: #ffeefe; --muted: #d2a7d6; --faint: #8a6390; --lineHue: #ff3d8b; --glass: rgba(30,10,46,.64); --field: rgba(0,0,0,.3); --on: #1a0620; --display: "Chakra Petch", sans-serif; --body: Inter, sans-serif; }
body[data-look="hud"]      { --bg: #020807; --bg2: #04110e; --a1: #00ff9c; --a2: #00c2ff; --a3: #00ff9c; --ink: #d8ffef; --muted: #86c4ad; --faint: #4e7c6b; --lineHue: #00ff9c; --glass: rgba(2,22,16,.74); --field: rgba(0,0,0,.4); --on: #021008; --display: Orbitron, sans-serif; --body: Inter, sans-serif; }
body[data-look="arctic"]   { --bg: #eef2f8; --bg2: #ffffff; --a1: #3a7bff; --a2: #9b5cff; --a3: #20d3c2; --ink: #0d1222; --muted: #4b5675; --faint: #7c86a3; --lineHue: #3a4a6b; --glass: rgba(255,255,255,.72); --field: rgba(255,255,255,.85); --on: #ffffff; --display: Sora, sans-serif; --body: Inter, sans-serif; --glow: .45; }

/* shared cinematic layer for every look except classic */
body[data-look]:not([data-look="classic"]) {
  --panel: var(--glass); --soft: color-mix(in srgb, var(--lineHue) 7%, transparent);
  --line: color-mix(in srgb, var(--lineHue) 16%, transparent); --accent: var(--a2); --accent-ink: var(--on);
  --ok-bg: color-mix(in srgb, #6dffb0 12%, transparent); --ok: #6dffb0; --off-bg: color-mix(in srgb, var(--lineHue) 8%, transparent); --bad: #ff6b88;
  --grad: linear-gradient(120deg, var(--a1), var(--a2) 55%, var(--a3));
  background: var(--bg); color: var(--ink); font-family: var(--body);
}
body[data-look="arctic"] { --ok: #0f8a55; --ok-bg: rgba(15,138,85,.1); --bad: #c62d4a; }
body[data-look]:not([data-look="classic"])::before { content: ""; position: fixed; inset: -10%; z-index: -2; pointer-events: none; opacity: var(--glow);
  background: radial-gradient(40% 35% at 12% 8%, color-mix(in srgb, var(--a1) 16%, transparent), transparent 70%),
    radial-gradient(35% 30% at 88% 18%, color-mix(in srgb, var(--a2) 20%, transparent), transparent 70%),
    radial-gradient(45% 35% at 60% 100%, color-mix(in srgb, var(--a3) 12%, transparent), transparent 70%); }
body[data-look]:not([data-look="classic"])::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--lineHue) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--lineHue) 6%, transparent) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 75%); }
body[data-look]:not([data-look="classic"]) .card { background: var(--glass); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 16px; }
body[data-look="arctic"] .card { box-shadow: 0 18px 50px rgba(40,60,120,.12); }
body[data-look]:not([data-look="classic"]) .h, body[data-look]:not([data-look="classic"]) h1, body[data-look]:not([data-look="classic"]) h2,
body[data-look]:not([data-look="classic"]) .dr-title, body[data-look]:not([data-look="classic"]) .stat strong, body[data-look]:not([data-look="classic"]) .ed-top strong { font-family: var(--display); letter-spacing: .01em; }
body[data-look]:not([data-look="classic"]) .muted, body[data-look]:not([data-look="classic"]) .f-h { color: var(--muted); }
body[data-look]:not([data-look="classic"]) .f-l, body[data-look]:not([data-look="classic"]) .table th, body[data-look]:not([data-look="classic"]) .vhead,
body[data-look]:not([data-look="classic"]) .stat > span, body[data-look]:not([data-look="classic"]) .kicker { font-family: var(--display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
body[data-look]:not([data-look="classic"]) .stat strong { font-size: 26px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* controls */
body[data-look]:not([data-look="classic"]) input, body[data-look]:not([data-look="classic"]) select, body[data-look]:not([data-look="classic"]) textarea { background: var(--field); color: var(--ink); border: 1px solid color-mix(in srgb, var(--lineHue) 26%, transparent); border-radius: 10px; }
body[data-look]:not([data-look="classic"]) input:focus, body[data-look]:not([data-look="classic"]) select:focus, body[data-look]:not([data-look="classic"]) textarea:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 18%, transparent); }
body[data-look]:not([data-look="classic"]) select option { background: var(--bg2); color: var(--ink); }
body[data-look]:not([data-look="classic"]) input[type=checkbox], body[data-look]:not([data-look="classic"]) input[type=radio] { accent-color: var(--a2); }
body[data-look]:not([data-look="classic"]) button { color: var(--ink); border-radius: 10px; }
body[data-look]:not([data-look="classic"]) button.ghost, body[data-look]:not([data-look="classic"]) .icon.box, body[data-look]:not([data-look="classic"]) .otools .icon { background: color-mix(in srgb, var(--lineHue) 5%, transparent); border: 1px solid color-mix(in srgb, var(--lineHue) 26%, transparent); box-shadow: none; transition: border-color .2s, box-shadow .2s; }
body[data-look]:not([data-look="classic"]) button.ghost:hover, body[data-look]:not([data-look="classic"]) .icon.box:hover, body[data-look]:not([data-look="classic"]) .otools .icon:hover { border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 14%, transparent); }
body[data-look]:not([data-look="classic"]) button.primary, body[data-look]:not([data-look="classic"]) .seg-b.on, body[data-look]:not([data-look="classic"]) .pg.on { background: var(--grad); color: var(--on); border: 0; font-weight: 600; box-shadow: 0 6px 26px color-mix(in srgb, var(--a2) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
body[data-look]:not([data-look="classic"]) .danger, body[data-look]:not([data-look="classic"]) .icon.danger { color: var(--bad); }
body[data-look]:not([data-look="classic"]) .link.blue { color: var(--a1); }
/* tabs */
body[data-look]:not([data-look="classic"]) .tabs { border-color: var(--line); }
body[data-look]:not([data-look="classic"]) .tab { color: var(--faint); font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; background: none; border: 0; }
body[data-look]:not([data-look="classic"]) .tab.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--a1); text-shadow: 0 0 14px color-mix(in srgb, var(--a1) 60%, transparent); }
body[data-look]:not([data-look="classic"]) .subtabs { background: color-mix(in srgb, var(--lineHue) 4%, transparent); }
/* tables become floating rows */
body[data-look]:not([data-look="classic"]) .table { border-collapse: separate; border-spacing: 0 8px; }
body[data-look]:not([data-look="classic"]) .table th { background: none; }
body[data-look]:not([data-look="classic"]) .table td { background: color-mix(in srgb, var(--lineHue) 4%, transparent); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body[data-look]:not([data-look="classic"]) .table td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
body[data-look]:not([data-look="classic"]) .table td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
body[data-look]:not([data-look="classic"]) .table tr:hover td { background: color-mix(in srgb, var(--a1) 7%, transparent); border-color: color-mix(in srgb, var(--a1) 30%, transparent); }
/* status pills glow */
body[data-look]:not([data-look="classic"]) .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-family: var(--display); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; }
body[data-look]:not([data-look="classic"]) .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
body[data-look]:not([data-look="classic"]) .pill.on { border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
body[data-look]:not([data-look="classic"]) .pill.off { border: 1px solid var(--line); color: var(--faint); }
/* rows, drawer, modal, misc */
body[data-look]:not([data-look="classic"]) .orow, body[data-look]:not([data-look="classic"]) .val, body[data-look]:not([data-look="classic"]) .vtable, body[data-look]:not([data-look="classic"]) .vrow { background: color-mix(in srgb, var(--lineHue) 3%, transparent); border-color: var(--line); box-shadow: none; }
body[data-look]:not([data-look="classic"]) .orow { border: 1px solid var(--line); }
body[data-look]:not([data-look="classic"]) .orow:hover { border-color: color-mix(in srgb, var(--a1) 35%, transparent); }
body[data-look]:not([data-look="classic"]) .oicon { background: color-mix(in srgb, var(--a2) 18%, transparent); color: var(--ink); }
body[data-look]:not([data-look="classic"]) .drawer, body[data-look]:not([data-look="classic"]) .modal { background: color-mix(in srgb, var(--bg2) 94%, transparent); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.5); backdrop-filter: blur(18px); }
body[data-look]:not([data-look="classic"]) .modal-head, body[data-look]:not([data-look="classic"]) .modal-foot, body[data-look]:not([data-look="classic"]) .dr-head { border-color: var(--line); }
body[data-look]:not([data-look="classic"]) .dash { border-top-color: var(--line); }
body[data-look]:not([data-look="classic"]) .sub::before { background: var(--grad); }
body[data-look]:not([data-look="classic"]) .seg, body[data-look]:not([data-look="classic"]) .chips, body[data-look]:not([data-look="classic"]) .colorin, body[data-look]:not([data-look="classic"]) .unitin, body[data-look]:not([data-look="classic"]) .inl { background: var(--field); border-color: color-mix(in srgb, var(--lineHue) 26%, transparent); }
body[data-look]:not([data-look="classic"]) .seg-b { background: transparent; color: var(--faint); border-color: var(--line); }
body[data-look]:not([data-look="classic"]) .chip, body[data-look]:not([data-look="classic"]) .chip-t, body[data-look]:not([data-look="classic"]) .tag, body[data-look]:not([data-look="classic"]) .faq, body[data-look]:not([data-look="classic"]) .rule, body[data-look]:not([data-look="classic"]) .bulk { background: color-mix(in srgb, var(--lineHue) 6%, transparent); border-color: var(--line); color: var(--ink); }
body[data-look]:not([data-look="classic"]) .chip-t.on { box-shadow: 0 0 0 1px var(--a1); }
body[data-look]:not([data-look="classic"]) .notice { background: linear-gradient(90deg, rgba(255,207,92,.12), transparent); color: var(--ink); box-shadow: 0 0 0 1px rgba(255,207,92,.35) inset; }
body[data-look]:not([data-look="classic"]) .add-wrap { border-color: color-mix(in srgb, var(--lineHue) 26%, transparent); }
body[data-look]:not([data-look="classic"]) .busy, body[data-look]:not([data-look="classic"]) .toast { background: var(--grad); color: var(--on); }
body[data-look]:not([data-look="classic"]) .fdrop { border-color: color-mix(in srgb, var(--lineHue) 30%, transparent); }
body[data-look]:not([data-look="classic"]) .rte-bar { background: color-mix(in srgb, var(--lineHue) 6%, transparent); border-color: var(--line); }
body[data-look]:not([data-look="classic"]) .rte, body[data-look]:not([data-look="classic"]) .rte-area { background: var(--field); border-color: var(--line); }
body[data-look]:not([data-look="classic"]) .rte-btn { color: var(--ink); }
/* storefront previews stay true to the shop: a white "product page" framed with a glow */
body[data-look]:not([data-look="classic"]) .pv-product { box-shadow: 0 0 0 1px var(--line), 0 0 40px color-mix(in srgb, var(--a2) 16%, transparent); border-radius: 14px; }
/* HUD: clipped corners */
body[data-look="hud"] .card { border-radius: 4px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
body[data-look="hud"] button, body[data-look="hud"] input, body[data-look="hud"] select { border-radius: 3px; }
/* the picker on Home */
.lookpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lookbtn { display: grid; gap: 6px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-weight: 400; color: inherit; }
.lookbtn .lk-sw { height: 46px; border-radius: 8px; position: relative; overflow: hidden; }
.lookbtn .lk-sw::after { content: ""; position: absolute; left: 10px; right: 30%; bottom: 10px; height: 8px; border-radius: 4px; background: var(--lk-grad); }
.lookbtn b { font-weight: 600; font-size: 13px; }
.lookbtn small { color: var(--muted); font-size: 11.5px; }
.lookbtn[aria-pressed="true"] { border-color: var(--a1, #303030); box-shadow: 0 0 0 2px var(--a1, #303030); }
.home-hero { padding: 0.25rem 0.25rem 0; }
.hero-h { margin: 0; font-size: 26px; font-weight: 600; }
.hero-g { background: var(--grad, linear-gradient(90deg, #303030, #616161)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero p { margin: 0.25rem 0 0; }