:root{
  --accent:#DC143C; --accent2:#B57EDC; --bg:#0A0A0E; --panel:#15151B;
  --fg:#F2EDE1; --muted:#9CA0A8; --line:#26262E;
  --heading:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --nav-h:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:clamp(15px,0.5vw + 13.8px,17px);line-height:1.7;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* Primary nav: a softened charcoal by default on every page (no transparency),
   so the Kiosk and every other page present the same bar. It settles into a
   dark, dusty whitish-pink once the page is scrolled. */
header.site{position:sticky;top:0;z-index:20;height:var(--nav-h);background:#1e1e25;border-bottom:1px solid rgba(255,255,255,.10);
  transition:background .25s,border-color .25s,backdrop-filter .25s}
header.site.scrolled{background:#8a6a74;backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;height:100%;
  max-width:1080px;margin:0 auto;padding:8px 20px}
.brand{display:flex;align-items:center}
.brand img{height:34px;width:auto;display:block}
.brand .brand-square{display:none}
@media (max-width:560px){.brand .brand-wide{display:none}.brand .brand-square{display:block}}
.nav ul{list-style:none;display:flex;gap:5px;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.nav a{color:#fff;background:rgba(128,128,128,.18);padding:6px 12px;border-radius:9px;font-size:.88rem;
  font-weight:600;transition:color .15s,background .15s}
.nav a:hover{color:#3fdd78;background:rgba(168,198,57,.3);text-decoration:none}
.nav a[aria-current=page]{color:#e8b923;background:rgba(184,148,220,.34)}
.nav .brand{background:none;padding:0;border-radius:0}
.nav .brand:hover{background:none}
:root[data-user-mode="light"] header.site:not(.scrolled) .nav a{color:#1c1c1c;background:rgba(0,0,0,.07)}
:root[data-user-mode="light"] header.site:not(.scrolled) .nav a:hover{color:#15803d}
:root[data-user-mode="light"] header.site:not(.scrolled) .nav a[aria-current=page]{color:#a16207}
.burger{display:none;background:rgba(128,128,128,.18);border:1px solid rgba(255,255,255,.25);
  border-radius:10px;color:#fff;padding:8px 10px;font-size:1rem;cursor:pointer}
/* Account badge (studio nav, signed in): greeting + role, then the avatar. */
.nav-auth{display:flex;align-items:center}
.nav-auth[hidden]{display:none}
.nav .nav-me{display:inline-flex;align-items:center;gap:10px;padding:4px 5px 4px 13px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  color:#fff;font:inherit;font-weight:600;cursor:pointer;line-height:1.15}
.nav .nav-me:hover{border-color:var(--accent);background:rgba(168,198,57,.18)}
.nav-who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.nav-greet{font-size:.86rem;font-weight:600;color:#fff;white-space:nowrap}
.nav-pos{font-size:.66rem;color:rgba(255,255,255,.62);letter-spacing:.08em;text-transform:uppercase}
.nav-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:inline-flex;
  align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.nav-av img{width:100%;height:100%;object-fit:cover;display:block}
.nav-av-init{font-size:.76rem;font-weight:700;color:#fff;letter-spacing:.02em}
/* Dropdowns: the signed-out Register item opens on hover/focus, the profile
   badge opens on click. */
.nav-drop-hover,.nav-drop-click{position:relative}
.nav-sub{position:absolute;top:calc(100% + 6px);left:0;min-width:168px;z-index:40;
  background:#0d0c14;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:6px;
  display:none;flex-direction:column;gap:2px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.nav-drop-hover:focus-within .nav-sub{display:flex}
.nav-sub.open{display:flex}
.nav-sub-right{left:auto;right:0}
.nav-sub a,.nav-sub button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
  background:none;border:0;color:#fff;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.nav-sub a:hover,.nav-sub button:hover{background:rgba(168,198,57,.22);text-decoration:none}
/* Request: Support / Services / Roadmap / About centre-justified. The rule is a
   fixed-width block, and forms keep their width but fold their fields inward. */
body.page-about main,body.page-support main,body.page-services main,body.page-roadmap main{text-align:center}
body.page-support main .contact,body.page-services main .contact{text-align:center}
[style*="text-align:center"] .rule,.hero-center .rule{margin-left:auto;margin-right:auto}
/* The Kiosk catalog carries no heading, so close the gap above its toolbar. */
section.kiosk-catalog{padding-top:clamp(12px,2.4vw,24px)}
/* Readability over the illustrated backgrounds. */
body.page-about h2,body.page-about h3,body.page-support h2,body.page-support h3,
body.page-account h1,body.page-account h2,body.page-account h3{text-shadow:0 2px 16px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.7)}
/* The Desk hero: same glass treatment plus explicit heading/sub text colors so
   "The Desk" and its lede stay crisp against the page background. */
.desk-hero{background:rgba(10,13,20,.70);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:clamp(24px,3.4vw,40px);margin:26px auto;max-width:64rem;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.desk-hero h1,.desk-hero .lede{color:#f3efe6;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.desk-hero .rule{margin-left:auto;margin-right:auto}
.hprice{font-size:1.9rem;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.hprice small{font-size:.95rem;font-weight:600;color:var(--muted)}
body.page-about .lede,body.page-support .lede,body.page-account .lede{text-shadow:0 1px 12px rgba(0,0,0,.85)}
/* Copy sits on a glass panel so the background art stays vivid around it. */
body.page-about main section .wrap,body.page-support main section .wrap,body.page-account main section .wrap{
  background:rgba(10,13,20,.58);border:1px solid rgba(255,255,255,.10);border-radius:20px;
  padding:clamp(22px,3.2vw,38px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
body.page-about main section,body.page-support main section,body.page-account main section{border-top:0}
/* Footer sits at the bottom of the viewport even when a page is short (the
   gated Journal is the case that showed the problem). */
main{flex:1 0 auto;min-height:60vh}
.hero{padding:clamp(64px,12vw,140px) 0 clamp(48px,8vw,90px)}
.kicker{font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
h1{font-family:var(--heading);font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.06;margin:0 0 20px;font-weight:700}
.serif h1{font-weight:400}
.lede{color:var(--muted);font-size:clamp(1.05rem,2.4vw,1.3rem);max-width:44rem;margin:0 0 30px}
.rule{width:64px;height:3px;border:0;background:var(--accent);margin:0 0 28px}
.rule-full{width:100%;margin:0 0 28px}
.hero-center{text-align:center}
.hero-center .lede{margin-left:auto;margin-right:auto}
.about-body{text-align:center;max-width:60rem;margin:0 auto;padding:0 0 30px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btns[hidden]{display:none}
/* Frutiger Aero Dashboard skin (glassy sky-blue tiles, light sheen) */
.msx-aero{background:linear-gradient(160deg,#e8f4fc 0%,#cfe7f6 45%,#f2faff 100%);border:1px solid rgba(255,255,255,.6);border-radius:16px;padding:10px;box-shadow:0 10px 30px rgba(10,60,120,.14)}
.msx-aero .mod-kpi>div{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.88));border:1px solid rgba(120,170,210,.45);border-radius:12px;box-shadow:0 6px 18px rgba(20,80,140,.10)}
.msx-aero .mod-kpi .kick{color:#0b3452;letter-spacing:.06em;font-weight:700}
.msx-aero .mod-kpi .val{color:#08283e;font-weight:800}
.msx-aero .mod-kpi .sub,.msx-aero .note{color:#12506e !important}
.msx-aero .mod-panel{background:rgba(255,255,255,.96);border:1px solid rgba(120,170,210,.45);border-radius:12px;box-shadow:0 5px 14px rgba(20,80,140,.10)}
.msx-aero .mod-panel h3{color:#0b3452;font-weight:800}
.msx-aero .mod-row,.msx-aero .b,.msx-aero b,.msx-aero span{color:#0e3d5c}
.msx-aero a{color:#0a5f8a;font-weight:600}
@media (prefers-reduced-motion:reduce){.msx-aero .mod-kpi>div,.msx-aero .mod-panel{backdrop-filter:none}}
/* Support + About center-justification */
body.page-support .wrap.hero .rule,body.page-about .wrap.hero .rule{margin:0 auto;width:min(52rem,100%)}
body.page-support .wrap.hero .lede{text-align:center;margin-left:auto;margin-right:auto}
body.page-about .wrap.hero .lede{margin:0 auto;text-align:center}
body.page-support .contact{max-width:460px;margin:0 auto;text-align:center}
body.page-support .contact>div{margin-left:auto;margin-right:auto}
body.page-support .contact label{display:block;text-align:center}
body.page-support .contact input,body.page-support .contact select,body.page-support .contact textarea{width:100%;box-sizing:border-box}
body.page-support .contact button.btn{margin-left:auto;margin-right:auto}
body.page-support altcha-widget{display:block;text-align:center}
body.page-support [data-faq-search]{display:block;margin:0 auto 14px;max-width:440px}
/* Terminal Settings — collapsible sections */
.msx-ide .set-sec{margin:12px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02)}
.msx-ide .set-sec>summary{font-weight:800;padding:10px 14px;cursor:pointer;color:var(--ide-fg2);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));list-style:none;display:flex;align-items:center;gap:8px}
.msx-ide .set-sec>summary::-webkit-details-marker{display:none}
.msx-ide .set-sec>summary:before{content:'+';flex:none;width:16px;text-align:center;color:var(--ide-accent)}
.msx-ide .set-sec[open]>summary:before{content:'-'}
.msx-ide .set-sec>summary:hover{background:rgba(255,255,255,.08)}
.msx-ide .set-sec-body{padding:2px 14px 12px}
body.page-support .contact [data-altcha],body.page-support .contact altcha-widget div div{margin-left:auto !important;margin-right:auto !important}
body.page-support .contact altcha-widget{width:100%;max-width:340px;margin:12px auto 0;display:block}
body.page-support .contact altcha-widget .altcha-box,body.page-support .contact altcha-widget .altcha-label,body.page-support .contact altcha-widget .altcha-footer{align-items:center;text-align:center}
body.page-support [data-faq-search]{width:100%;max-width:440px;box-sizing:border-box}
body.page-support .faq-search-row{max-width:none;padding:0;display:block}
body.page-support section .wrap{max-width:none}
body.page-support p,body.page-support ul,body.page-support form,body.page-support h2,body.page-support h3,body.page-support details{text-align:center}
body.page-support .list{list-style-position:inside}
/* A centred section should have centred buttons — .btns is flex, so text-align
   on the parent has no effect without this. */
[style*="text-align:center"] .btns{justify-content:center}
.btn{display:inline-block;padding:12px 20px;border-radius:12px;border:1px solid var(--accent);
  color:var(--bg);background:var(--accent);font-weight:600;font-size:.95rem}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
section{padding:clamp(40px,7vw,72px) 0;border-top:1px solid var(--line)}
section h2{font-family:var(--heading);font-size:clamp(1.5rem,3.3vw,2.1rem);margin:0 0 8px;font-weight:700}
.serif section h2{font-weight:400}
section .sub{color:var(--muted);margin:0 0 32px;max-width:46rem}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.card h3{margin:0 0 8px;font-size:1.1rem;font-family:var(--heading)}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card a.more{display:inline-block;margin-top:14px;font-size:.9rem}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:4px 10px;margin-bottom:14px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.list li{padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--muted)}
.list li b{color:var(--fg);font-weight:600}
.pill{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font-size:.85rem;margin:4px 6px 0 0}
.product-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.showmore{grid-column:1/-1;display:flex;justify-content:center;margin:2px 0 8px}
.tag.cond{font-weight:700;letter-spacing:.06em}
.tag.cond.c-new{color:#4ade80;border-color:#4ade80}
.tag.cond.c-perfect{color:#4ade80;border-color:#4ade80}
.tag.cond.c-good{color:#38bdf8;border-color:#38bdf8}
.tag.cond.c-average{color:#fbbf24;border-color:#fbbf24}
.tag.cond.c-poor{color:#fb923c;border-color:#fb923c}
.tag.cond.c-bad{color:#f87171;border-color:#f87171}
.skel .skel-img{aspect-ratio:3/4;background:var(--line);border-radius:0;animation:pulse 1.4s ease-in-out infinite}
.skel-line{height:12px;border-radius:6px;background:var(--line);margin-bottom:8px;animation:pulse 1.4s ease-in-out infinite}
.skel-line.w70{width:70%}.skel-line.w40{width:40%}.skel-line.w90{width:90%}.skel-line.w50{width:50%}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.empty-state{grid-column:1/-1;text-align:center;padding:36px 16px}
.empty-state .sub{margin:0 0 16px}
.shop-summary{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin:0 0 14px;color:var(--muted);font-size:.9rem}
.shop-summary .ss-count{font-weight:700;color:var(--fg)}
.shop-summary .ss-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 10px;font-size:.82rem}
.shop-summary .ss-chip button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0}
.shop-summary .ss-chip button:hover{color:var(--accent)}
.shop-summary .ss-clear{background:none;border:0;color:var(--accent);cursor:pointer;font-size:.85rem;font-weight:600;text-decoration:underline}
.shelf-jump{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin:14px 0 6px}
.shelf-jump-label{font-size:.85rem;color:var(--muted);font-weight:600}
.shelf-jump .chip{cursor:pointer}
.shelf-jump .chip:hover{border-color:var(--accent);color:var(--accent)}
.featured-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:12px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory}
.featured-track::-webkit-scrollbar{height:8px}
.featured-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.featured-card{scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,border-color .15s ease}
.featured-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.featured-card .fc-img{aspect-ratio:3/4;background:var(--bg);display:block;width:100%;object-fit:cover}
.featured-card .fc-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.featured-card .fc-title{font-size:.88rem;font-weight:600;color:var(--fg);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.featured-card .fc-price{font-weight:700;font-size:1rem;margin-top:auto}
.featured-card .fc-price s{color:var(--muted);font-weight:400;font-size:.85rem}
.product{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* Long catalogs: let the browser skip off-screen cards (big scroll + paint win). */
.product{content-visibility:auto;contain-intrinsic-size:auto 420px}
.product:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(0,0,0,.45);border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.product .p-media{position:relative}
.product .p-img{display:block;aspect-ratio:3/4;background:var(--bg);border-bottom:1px solid var(--line);overflow:hidden}
.product .p-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.product:hover .p-img img{transform:scale(1.05)}
.product .p-img-ph{display:flex;align-items:center;justify-content:center;height:100%;font-size:3rem;font-weight:700;color:var(--muted);background:var(--bg)}
.product .p-wish{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:1.05rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s,transform .15s,background .15s;z-index:2}
.product .p-wish:hover{transform:scale(1.12);color:var(--accent);border-color:var(--accent)}
.product .p-wish.on{color:#e0245e;border-color:#e0245e;background:color-mix(in srgb,#e0245e 12%,var(--panel))}
.product .p-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.product h3{margin:0;font-size:1rem;font-family:var(--heading);line-height:1.35}
.product h3 a{color:var(--fg)}
.product .creator,.product .cat{margin:0;color:var(--muted);font-size:.85rem}
.product .price{font-weight:700;font-size:1.35rem;margin-top:2px}
.product .stock{font-size:.85rem;font-weight:600}
.product .stock.in{color:#4ade80}
.product .stock.low{color:#fbbf24}
.product .stock.out{color:#f87171}
.product .plink{font-size:.82rem}
.product .row{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:8px}
.product .btn-add{width:100%;margin-top:8px}
.qty{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:4px 8px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:4px 10px;font-size:.85rem;cursor:pointer}
/* ---- Roadmap: chronological newspaper timeline ---- */
.rm-dayhead{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;border-top:3px solid var(--fg);border-bottom:1px solid var(--line);padding:8px 0;margin:0 0 14px;font-weight:700}
.rm-day{margin:0 0 30px}
.rm-entry{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 12px}
.rm-entry.rm-pinned{border-color:var(--accent)}
.rm-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* ---- Chronicles: public blog grid ---- */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-width:72rem;margin:0 auto}
.ch-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
/* ---- Desk: services control panel ---- */
.desk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;max-width:76rem;margin:0 auto}
.desk-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.desk-card b{font-size:.98rem}
.desk-card .note{line-height:1.45}
.desk-domains{max-width:76rem;margin:24px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.desk-panel{max-width:76rem;margin:12px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.desk-panel h2{text-align:center}
body.page-desk .desk-card{text-align:center;align-items:center}
body.page-desk .desk-card .tag{align-self:center !important}
body.page-services .desk-card{text-align:center;align-items:center}
body.page-services .desk-card .tag{align-self:center !important}
.chip.sel{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
/* The staff gate replaces the page; the subscriber gate renders inside the
   page's own content area (see initJournal), so <main> must stay visible. */
body[data-page-gate="staff"] main,body[data-page-gate="member"] main{display:none}
body[data-page-gate="staff"].gate-open main,body[data-page-gate="member"].gate-open main{display:block}
:root[data-user-mode="light"]{--bg:#F4EFE4;--panel:#FFFFFF;--fg:#141419;--muted:#5b5f66;--line:#e4ded2}
body[data-density="compact"]{font-size:14px}
body[data-density="relaxed"]{font-size:18px}
.qty button{background:none;border:0;color:var(--fg);font-size:1rem;cursor:pointer;padding:0 6px}
.qty button:disabled,.cl-qty button:disabled{opacity:.35;cursor:not-allowed}
/* ---- POS / register ---- */
.pos-wrap{display:flex;flex-direction:column;gap:12px}
.pos-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.pos-top .pill{display:inline-flex;gap:6px;align-items:center;font-size:.82rem}
.pos-register{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:14px;align-items:start}
@media(max-width:900px){.pos-register{grid-template-columns:1fr}}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:54vh;overflow:auto;padding:2px}
.pos-tile{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--fg);font:inherit}
.pos-tile:hover{border-color:var(--accent)}
.pos-tile:disabled{opacity:.45;cursor:not-allowed}
.pos-tile b{font-size:.86rem;line-height:1.2}
.pos-ticket{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pos-lines{list-style:none;margin:0;padding:0;max-height:32vh;overflow:auto}
.pos-lines li{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.85rem}
.pos-totalrow{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;padding:2px 0}
.pos-grand{display:flex;justify-content:space-between;font-size:1.5rem;font-weight:700;border-top:2px solid var(--line);padding-top:8px;margin-top:4px}
.pos-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pos-keypad button{padding:10px 0;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer}
.pos-keypad button:hover{border-color:var(--accent)}
.pos-tenderbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pos-tenderbtns button{padding:9px 0}
/* ---- Office calendars (Schedules / Timecards) ---- */
.pos-cal-wrap{overflow-x:auto;margin:0 0 12px}
.pos-cal{width:100%;border-collapse:separate;border-spacing:6px}
.pos-cal th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:2px 4px}
.pos-cal-week{white-space:nowrap;font-weight:600;color:var(--fg)}
.pos-cal-cell{vertical-align:top;min-width:94px;height:66px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;cursor:pointer}
.pos-cal-cell:hover{border-color:var(--accent)}
.pos-cal-cell.has{background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.pos-cal-date{display:block;font-size:.72rem;color:var(--muted)}
.pos-cal-shift{display:block;font-size:.72rem;background:rgba(90,140,255,.18);border-radius:6px;padding:1px 5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-cal-shift.pub{background:rgba(76,175,80,.2)}
.pos-cal-total{white-space:nowrap;font-weight:700;padding:0 4px}
.shop-toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.shop-toolbar select{background:var(--panel);color:var(--fg);border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;font:inherit;font-size:.85rem;cursor:pointer}
/* Floating Shopping Bag — always docked bottom-right; ghost/cloud glass */
.bag-dock{position:fixed;right:16px;bottom:16px;z-index:46;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.bag-dock>*{pointer-events:auto}
.bag-fab{position:relative;display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(150deg,rgba(30,26,44,.92),color-mix(in srgb,var(--accent2) 42%,rgba(20,18,30,.9)) 55%,color-mix(in srgb,var(--accent) 48%,rgba(20,18,30,.9)));
  color:#fff;border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:10px 16px 10px 14px;
  font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 14px 40px -16px color-mix(in srgb,var(--accent) 80%,transparent),0 0 26px -8px color-mix(in srgb,var(--accent2) 60%,transparent),0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .18s ease,box-shadow .18s ease}
.bag-fab:hover{transform:translateY(-2px)}
.bag-fab .bag-ico{width:18px;height:18px;flex:none}
.bag-fab .bag-count{background:#fff;color:var(--bg);border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;padding:0 5px}
.cart-drawer{position:relative;width:min(390px,calc(100vw - 32px));
  height:min(78vh,640px);display:none;flex-direction:column;overflow:hidden;
  background:linear-gradient(155deg,rgba(15,14,22,.96),rgba(24,20,36,.95) 52%,color-mix(in srgb,var(--accent) 16%,rgba(15,14,22,.96)));
  border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:15px;z-index:40;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.72),0 0 46px -14px color-mix(in srgb,var(--accent2) 55%,transparent),0 0 0 1px rgba(255,255,255,.06) inset}
.cart-drawer.open{display:flex;animation:bagIn .22s ease}
@keyframes bagIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cart-drawer.open{animation:none}.bag-fab{transition:none}}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.cart-head h3{font-size:.92rem;margin:0}
.cart-headbtns{display:flex;gap:5px;flex:none}
.cart-headbtns button{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:#fff;
  width:26px;height:26px;border-radius:8px;cursor:pointer;font:inherit;font-size:1.05rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.cart-headbtns button:hover{background:rgba(255,255,255,.22)}
.cart-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.cart-tab{flex:1 1 auto;padding:7px 6px;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap}
.cart-tab.on{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.cart-panels{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.cart-panel{display:none;flex:1;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-gutter:stable}
.cart-drawer{scrollbar-gutter:stable}
.cart-panel.on{display:block}
.cart-drawer ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:14px}
.cart-drawer li{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--muted)}
.cart-drawer li b{color:var(--fg)}
.cart-thumb{width:40px;height:54px;border-radius:7px;object-fit:cover;flex:none;border:1px solid var(--line)}
.cart-thumb-ph{display:flex;align-items:center;justify-content:center;width:40px;height:54px;border-radius:7px;background:rgba(255,255,255,.06);color:var(--muted);font-weight:700;flex:none}
.cart-line{display:flex;gap:9px;align-items:center;justify-content:space-between;padding:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px}
.cart-line>*{min-width:0}
.cart-line .cl-meta{overflow:hidden;overflow-wrap:anywhere}
/* Account panels: centre the section headings and lede. */
[data-balance-panel],[data-domains-panel]{text-align:center}
[data-domains-panel] .sub,[data-balance-panel] .sub{margin-left:auto;margin-right:auto}
[data-apanel] h2{text-align:center}
body.page-account [data-apanel="profile"],body.page-account [data-apanel="subscription"]{text-align:center}
body.page-account [data-apanel="profile"] .mod-toolbar,body.page-account [data-apanel="subscription"] .mod-toolbar{justify-content:center}
.cart-line .cl-info{flex:1;min-width:0}
.cart-line .cl-title{font-weight:600;color:var(--fg);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-line .cl-meta{font-size:.78rem;color:var(--muted)}
.cart-line .cl-ctl{display:flex;align-items:center;gap:8px;white-space:nowrap}
.cart-line .cl-qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cart-line .cl-qty button{background:none;border:0;color:var(--fg);font-size:1rem;cursor:pointer;padding:2px 8px}
.cart-line .cl-qty button:hover{background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
.cart-line .cl-qty span{min-width:24px;text-align:center}
.cart-line .cl-total{font-weight:700;color:var(--fg)}
.cart-remove{background:none;border:0;color:var(--muted);font-size:1.25rem;cursor:pointer;padding:2px 8px;border-radius:8px;line-height:1}
.cart-remove:hover{color:#e0245e}
.auth-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:clamp(40px,8vw,80px) 0}
.auth-solo{display:flex;justify-content:center;padding:clamp(40px,8vw,80px) 0}
.auth-solo .auth-form{max-width:640px;width:100%}
/* Glassy, ethereal registration panel (crimson + lavender + black + grey + white) */
.auth-glass{position:relative;overflow:hidden;color:var(--fg);
  background:linear-gradient(150deg,rgba(220,20,60,.12),rgba(181,126,220,.12) 45%,rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);border-radius:22px;
  box-shadow:0 30px 80px -30px rgba(220,20,60,.55),0 0 0 1px rgba(255,255,255,.05) inset,0 0 70px -14px rgba(181,126,220,.40) inset}
.auth-halo{position:absolute;left:-20%;right:-20%;top:-45%;height:70%;pointer-events:none;filter:blur(22px);opacity:.9;
  background:radial-gradient(60% 100% at 50% 0,rgba(181,126,220,.38),transparent 70%),radial-gradient(50% 100% at 22% 0,rgba(220,20,60,.32),transparent 70%);
  animation:halo 9s ease-in-out infinite alternate}
@keyframes halo{from{transform:translateY(-8px)}to{transform:translateY(10px)}}
.auth-glass form{position:relative;z-index:1}
.auth-glass h2{text-align:center}
.reg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:4px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.reg-tab{flex:1 1 auto;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);
  font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap}
.reg-tab:hover{color:var(--fg)}
.reg-tab[aria-selected="true"]{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 26px -14px rgba(220,20,60,.8)}
.reg-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.phone-row{display:flex;gap:8px}
.phone-row .cc-select{flex:none;max-width:40%;min-width:118px}
.auth-form .contact select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--fg);font:inherit;font-size:.95rem}
.auth-center .auth-aside,.auth-center .auth-form h2{text-align:center}
.auth-center .auth-aside .list{display:inline-block;text-align:left}
/* Login: single centered column, heading above the form */
.auth-login .auth-form{max-width:460px}
.auth-title{font-size:clamp(1.8rem,4vw,2.6rem);text-align:center;margin:0 0 6px;font-family:var(--heading);line-height:1.15}
.auth-login .auth-sub{text-align:center;margin:0 0 22px}
.auth-login .auth-form h2{text-align:center}
.auth-login .contact label{text-align:center}
.auth-login .sub{text-align:center}
.auth-login .contact .btn{width:100%}
@media(max-width:760px){.phone-row{flex-direction:column}.phone-row .cc-select{max-width:none}}
@media(prefers-reduced-motion:reduce){.auth-halo{animation:none}}
.auth-aside h1{font-size:clamp(2rem,4.5vw,3.2rem);margin:0 0 16px}
.auth-aside .lede{margin:0 0 24px}
.auth-aside .list li{border-left:3px solid var(--accent)}
.auth-form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px}
.auth-form h2{margin:0 0 16px}
.auth-form .contact>div{margin-bottom:14px}
.auth-form .contact label{display:block;margin-bottom:6px;font-size:.9rem;color:var(--muted)}
.auth-form .contact input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit}
.auth-form .contact .btn{width:100%}
.auth-form [data-login-hint]:empty{margin:0}
.auth-form .sub{margin-top:16px}
.auth-form fieldset.auth-group{border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 14px;min-width:0}
.auth-form fieldset.auth-group legend{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 8px}
.auth-form fieldset.auth-group>div:last-child{margin-bottom:0}
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:66px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;padding:4px 8px}
.pw-toggle:hover{color:var(--accent)}
@media(max-width:760px){.auth-split{grid-template-columns:1fr;gap:24px}.auth-form{padding:20px}}
.cart-panel h4{font-size:.95rem}
.was{color:var(--muted);font-weight:400;font-size:.82em}
.sale-tag{background:rgba(229,72,77,.16);color:#ff8589}
[data-shop-filters] button,[data-shop-genres] button,[data-shop-quick] button{background:transparent;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;font:inherit;font-size:.8rem;cursor:pointer}
[data-shop-filters] button[aria-pressed=true],[data-shop-genres] button[aria-pressed=true],[data-shop-quick] button[aria-pressed=true]{color:var(--fg);border-color:var(--accent)}
.announce{display:flex;gap:10px;align-items:center;justify-content:center;text-align:center;
  background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:10px 14px;font-size:.92rem}
.announce a{color:var(--fg);font-weight:700}
.announce button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;padding:0 4px}
.cart-thumb{width:52px;height:52px;min-width:52px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:var(--bg)}
.cart-thumb-ph{display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;color:var(--muted)}
.product .cart-thumb{width:100%;height:120px;border-radius:0;border:0;border-bottom:1px solid var(--line)}
@media (max-width:640px){
  .cart-tab{font-size:.8rem;padding:8px 4px}
}
.co-overlay{position:fixed;inset:0;background:rgba(8,6,14,.72);backdrop-filter:blur(3px);z-index:60;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px}
.co-overlay.open{display:flex}
.co-modal{width:min(680px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;position:relative;margin:auto}
.co-modal .co-close{position:absolute;top:10px;right:10px;z-index:2}
.co-modal h3{margin:0 0 10px}
#co-mount{min-height:120px}
#co-mount .Loading,.co-loading{padding:34px;text-align:center;color:var(--muted)}
.cart-total{display:flex;justify-content:space-between;font-weight:700;margin:8px 0}
.coupon-row{display:flex;gap:8px;margin:5px 0}
.coupon-row input{flex:1;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg);font:inherit;font-size:.85rem}
[data-cart-panel=billing] input,[data-cart-panel=billing] select{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit}
.cart-panel label.note{display:block}
.kiosk-head{text-align:center;position:relative;overflow:hidden;margin:14px auto 0;border-radius:18px;
  padding:clamp(30px,5.5vw,64px) 20px;
  background-image:linear-gradient(rgba(10,10,14,.56),rgba(10,10,14,.76)),url('/assets/library.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 64px -34px color-mix(in srgb,var(--accent) 75%,transparent)}
.kiosk-kicker{font-size:.92rem;letter-spacing:.3em;margin-bottom:10px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.kiosk-rule{margin:0 auto 16px}
.kiosk-lede{margin-left:auto;margin-right:auto;color:rgba(255,255,255,.9);text-shadow:0 2px 14px rgba(0,0,0,.75)}
.kiosk-btns{justify-content:center}
/* Kiosk hero CTA: crimson by default, purple on hover. */
.kiosk-btns .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.kiosk-btns .btn:hover,.kiosk-btns .btn:focus-visible{background:var(--accent2);border-color:var(--accent2);color:#fff}
.kiosk-catalog{border-top:0}
/* Per-page header art. Same full-bleed treatment as the Kiosk head so the image
   runs behind the header elements from edge to edge, with a dark wash for legibility. */
body.page-index .kiosk-head{background-image:linear-gradient(rgba(10,10,14,.56),rgba(10,10,14,.76)),url('/assets/library-hero.jpg')}
/* Full-bleed header art. Like the Kiosk, it starts at the top of the viewport
   (behind the sticky nav) rather than below it — the negative margin pulls the
   art up by the nav height and the padding puts the copy back where it was. */
body.page-about .hero,body.page-support .hero,body.page-journal .hero,body.page-account .hero{
  max-width:none;margin-left:0;margin-right:0;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  padding-top:calc(var(--nav-h) + clamp(64px,12vw,140px));
  padding-left:max(24px,calc((100% - 1080px) / 2 + 24px));
  padding-right:max(24px,calc((100% - 1080px) / 2 + 24px));
  background-size:cover;background-position:center;background-repeat:no-repeat}
body.page-about .hero{background-image:linear-gradient(rgba(10,10,14,.60),rgba(10,10,14,.74)),url('/assets/about-hero.jpg')}
body.page-support .hero{background-image:linear-gradient(rgba(10,10,14,.60),rgba(10,10,14,.74)),url('/assets/support-hero.jpg')}
body.page-journal .hero{background-image:linear-gradient(rgba(10,10,14,.52),rgba(10,10,14,.70)),url('/assets/community-bg.jpg')}
body.page-account .hero{background-image:linear-gradient(rgba(10,10,14,.60),rgba(10,10,14,.74)),url('/assets/account-hero.jpg')}
body.page-account .hero .kicker,body.page-account .hero h1,body.page-account .hero .lede{color:#fff}
body.page-about .hero .kicker,body.page-support .hero .kicker,body.page-journal .hero .kicker,
body.page-about .hero h1,body.page-support .hero h1,body.page-journal .hero h1,
body.page-about .hero .lede,body.page-support .hero .lede,body.page-journal .hero .lede{color:#fff}
.kiosk-title{font-size:clamp(1.5rem,3.2vw,2.2rem);text-align:center;margin:0 0 14px}
/* Kiosk: the hero art sits behind the nav; the nav stays mostly clear over the
   art, then fades to opaque deep crimson once the hero scrolls away. */
body.kiosk-page header.site{transition:background .55s ease,backdrop-filter .55s ease,box-shadow .55s ease}
body.kiosk-page header.site.scrolled{box-shadow:0 12px 32px -20px rgba(0,0,0,.75)}
/* Kiosk hero art is full-bleed: the .wrap max-width/centring is dropped so the
   background image reaches both screen edges at every viewport width. The
   background is `cover` (see .kiosk-head) so it scales without distortion and
   simply crops; the padding keeps the hero copy inside the usual 1080px column. */
body.kiosk-page .kiosk-head{margin-top:calc(-1 * var(--nav-h));border-radius:0;border:0;box-shadow:none;
  max-width:none;margin-left:0;margin-right:0;
  padding-left:max(24px,calc((100% - 1080px) / 2 + 24px));
  padding-right:max(24px,calc((100% - 1080px) / 2 + 24px));
  padding-top:calc(var(--nav-h) + clamp(30px,5.5vw,64px));background-attachment:scroll}
/* Ad space fills the page's content column. It is NOT taken to full viewport
   width: the banner is 3:1, so at true screen width it renders ~640px tall on a
   1920px display. Capping to the column keeps the whole artwork visible — no crop,
   no distortion — at a sensible height, and sits tight under its label. */
.ad-slot{display:flex;flex-direction:column;align-items:center;gap:3px;margin:12px auto;
  max-width:1080px;width:100%;min-height:0}
.ad-slot[hidden]{display:none}
.ad-slot .ad-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.7}
/* display:block (not flex) — as a flex item the image could not shrink below its
   1080px intrinsic width (min-width:auto), so it overflowed and was clipped. */
.ad-slot .ad-body{width:100%;display:block;min-height:0;overflow:hidden}
.ad-slot .ad-body:empty{display:none}
/* Placeholder banner, shown in the reserved ad space until AdSense serves an ad.
   AdSense stamps data-ad-status="filled" on the <ins> once it fills, which hides
   the image automatically — so the placeholder never sits under a live ad. */
.ad-slot .ad-placeholder{display:block;width:100%;max-width:100%;height:auto;min-width:0;
  background:var(--panel)}
/* Hide the placeholder the moment AdSense actually fills (the <ins> is now the
   placeholder's following sibling, so this uses :has() rather than ~). */
.ad-slot .ad-body:has(ins.adsbygoogle[data-ad-status="filled"]) .ad-placeholder{display:none}
/* An unfilled AdSense unit still reserves height, which left a large gap under
   the banner. While it is not filled the unit is layered exactly over the
   placeholder: it keeps a real box (so AdSense can still measure and fill it)
   but contributes no height of its own. Once it reports filled it returns to
   normal flow and the placeholder above it disappears. */
.ad-slot .ad-body{position:relative}
.ad-slot .ad-body ins.adsbygoogle{position:absolute;inset:0;width:auto;max-width:none;min-width:0;z-index:2}
.ad-slot .ad-body:has(ins.adsbygoogle[data-ad-status="filled"]) ins.adsbygoogle{position:static;inset:auto}
.ad-slot ins.adsbygoogle{display:block;width:100%;min-width:300px;max-width:728px}
.ad-slot ins.adsbygoogle iframe,.ad-slot .ad-body iframe{max-width:100% !important}
body[data-adfree="1"] .ad-slot{display:none !important}
/* Keep auto-placed ads from covering app chrome or causing overlap */
ins.adsbygoogle{margin-left:auto;margin-right:auto}
.cart-drawer,.co-overlay,.term-shell,.term-topbar,.term-navbar{position:relative;z-index:40}
@media(max-width:760px){.ad-slot{margin:16px auto;max-width:100%;padding:0 4px}}
.term-shell{--tbg:#0d0c14;--tsurf:#16142a;--tline:#2c2748;--tsub:#9a90c0;
  --bg:#0d0c14;--panel:#16142a;--line:#2c2748;--fg:#f2edf7;--muted:#9a90c0;
  background:var(--bg);color:var(--fg);min-height:100vh;display:flex;flex-direction:column;
  margin:0;padding:0;font-size:16px}
.term-shell .wrap{max-width:1240px}
.term-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:10px 18px;background:rgba(13,12,20,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--tline)}
.term-logo{display:inline-flex;align-items:center;flex:none}
.term-logo img{height:34px;width:auto;display:block}
.term-spacer{flex:1;min-width:8px}
.term-hint{margin:0;padding:9px 18px 0;color:var(--tsub);font-size:.82rem}
/* Profile menu in the terminal bar */
.term-usermenu{position:relative;display:inline-flex}
.term-usermenu-list{position:absolute;right:0;top:calc(100% + 8px);min-width:168px;z-index:60;
  display:flex;flex-direction:column;background:var(--tsurf);border:1px solid var(--tline);
  border-radius:12px;padding:6px;box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
.term-usermenu-list[hidden]{display:none}
.term-usermenu-list a,.term-usermenu-list button{display:block;width:100%;text-align:left;
  background:none;border:0;color:var(--fg);font:inherit;font-size:.9rem;padding:9px 12px;
  border-radius:9px;cursor:pointer;text-decoration:none}
.term-usermenu-list a:hover,.term-usermenu-list button:hover{background:rgba(255,255,255,.08)}
/* Access-denied screen (non-staff): no nav/footer, everything centred. */
body.term-denied{background:#000}
.denied-wrap{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;overflow:hidden}
.denied-static{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.30;pointer-events:none}
.denied-inner{position:relative;z-index:1;max-width:760px}
.denied-inner h1{color:#e11d2b;font-size:clamp(2rem,6vw,3.6rem);line-height:1.1;margin:0 0 18px}
.denied-rule{width:120px;height:3px;border:0;background:#e11d2b;margin:0 auto 22px}
.denied-inner p{color:#f2edf7;font-size:clamp(1rem,2.2vw,1.2rem);margin:0}
.term-who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.18;min-width:0;text-align:right}
.term-greet{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.term-pos{font-size:.72rem;color:var(--tsub);white-space:nowrap}
.term-search{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:10px;border:1px solid var(--tline);
  background:var(--tsurf);color:var(--muted);cursor:pointer;font:inherit;font-size:.86rem;flex:none}
.term-search svg{width:15px;height:15px}
.term-search:hover{color:var(--fg);border-color:var(--accent)}
.term-search kbd{font:inherit;font-size:.7rem;color:var(--muted);background:var(--bg);border:1px solid var(--tline);
  border-radius:6px;padding:1px 6px}
.term-user{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;overflow:hidden;
  border:0;padding:0;cursor:pointer;box-sizing:border-box;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;font-size:.82rem;text-decoration:none;flex:none}
.term-user img{width:100%;height:100%;object-fit:cover;display:block}
.term-user:hover{text-decoration:none;filter:brightness(1.08)}
.term-navbar{position:sticky;top:57px;z-index:39;display:flex;gap:22px;flex-wrap:wrap;align-items:stretch;
  padding:9px 18px;background:rgba(13,12,20,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--tline)}
.term-navbar-mob{display:none}
.term-group{display:flex;align-items:center;gap:8px}
.term-glabel{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.7;
  padding-right:4px}
.term-gtabs{display:flex;gap:4px;flex-wrap:wrap}
.term-body{flex:1;padding:20px;max-width:1240px;width:100%;margin:0 auto}
.term-body .mod-panel{margin:0 0 16px}
/* Staff Terminal per-menu backgrounds: each menu tints its own image behind the
   content. Panels become slightly translucent so the image reads through while
   the dark veil keeps text legible. */
.term-shell.term-bg{background-image:linear-gradient(rgba(13,12,20,.72),rgba(13,12,20,.88)),var(--term-bg,none);
  background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:fixed}
.term-shell.term-bg .term-body{--tsurf:rgba(22,20,42,.78);--panel:rgba(22,20,42,.78);--bg:rgba(13,12,20,.78);
  --tline:rgba(44,40,72,.55);--line:rgba(44,40,72,.55)}
/* Persistent Office sub-menu. It sits outside [data-tabbody] so it survives
   navigation to the Admin panels (Members/Roles/Reviews/Returns/Inbox/
   Moderation), which are their own top-level tabs. Columns and rows. */
.term-officebar{max-width:1240px;width:100%;margin:0 auto;padding:12px 20px 0}
.term-officebar[hidden]{display:none}
.term-obgroup{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px}
.term-oblabel{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-width:56px}
.term-obgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px;flex:1;min-width:240px}
.term-obtn{background:rgba(128,128,128,.14);border:1px solid var(--line);color:var(--fg);border-radius:9px;
  padding:8px 12px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;text-align:center}
.term-obtn:hover{border-color:var(--accent)}
.term-obtn.on{background:rgba(184,148,220,.30);border-color:var(--accent);color:#fff}
/* Designer panels (Workspace / Appearance / Pages / Environment / Preview).
   These used to render as a flat run of <h2> + .contact blocks, which read as
   legacy. Sections are now cards with a rule and a proper field grid. */
[data-dpanel]{text-align:left}
[data-dpanel]>h2{font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);font-weight:700}
[data-dpanel]>h2:first-child{margin-top:0}
[data-appear] .contact,[data-appear] .mod-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px 18px;background:color-mix(in srgb,var(--fg) 4%,transparent);border:1px solid var(--line);
  border-radius:14px;padding:16px;margin:0 0 14px}
[data-appear] .contact>div,[data-appear] .mod-grid2>div{display:flex;flex-direction:column;gap:4px;min-width:0}
[data-appear] label{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
[data-appear] input:not([type=color]):not([type=checkbox]),[data-appear] textarea,[data-appear] select{
  width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit}
[data-appear] input[type=color]{width:100%;height:44px;padding:2px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);cursor:pointer}
[data-appear] .shop-toolbar{gap:10px;align-items:stretch}
[data-appear] .shop-toolbar>label{display:flex;flex-direction:column;gap:4px;min-width:86px}
[data-appear] textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.5}
[data-appear] .btns{justify-content:center}
[data-appear] .fav-prev{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:1.5rem;overflow:hidden;line-height:1}
[data-appear] .fav-prev img{width:100%;height:100%;object-fit:contain}
.mail-vars{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0 0 14px;font-size:.78rem}
.mail-vars .mail-vars-g{flex:1 1 100%;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;margin-top:6px}
.mail-vars code{background:var(--tsurf);border:1px solid var(--tline);border-radius:6px;padding:1px 7px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--fg)}
.term-cmd{position:fixed;inset:0;background:rgba(8,6,14,.7);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.term-cmd[hidden]{display:none}
.term-cmd-box{width:100%;max-width:560px;background:var(--tsurf);border:1px solid var(--tline);border-radius:14px;
  box-shadow:0 24px 70px -20px rgba(0,0,0,.7);overflow:hidden;display:flex;flex-direction:column}
.term-cmd-box input{width:100%;padding:15px 16px;border:0;border-bottom:1px solid var(--tline);background:transparent;
  color:var(--fg);font:inherit;font-size:1rem;outline:none}
.term-cmd-box input::placeholder{color:var(--muted)}
.term-cmd-list{max-height:50vh;overflow-y:auto;padding:6px}
.term-cmd-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:9px;
  background:transparent;color:var(--fg);cursor:pointer;font:inherit;font-size:.92rem}
.term-cmd-item:hover,.term-cmd-item.sel{background:rgba(220,20,60,.14)}
.term-cmd-item .ti{width:16px;height:16px;color:var(--accent);flex:none;opacity:.9}
.term-cmd-item .hint{color:var(--muted);font-size:.78rem;margin-left:auto}
.term-cmd-empty{padding:16px;color:var(--muted);font-size:.88rem;text-align:center}
.term-cmd-group{padding:10px 12px 4px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.term-cmd-item span:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.term-page header.site,body.term-page footer.site{display:none}
body.term-page main{min-height:100vh;padding:0}
@media(max-width:900px){
  .term-search span{display:none}
  .term-greet{max-width:52vw}
}
@media(max-width:760px){
  .term-topbar{padding:9px 13px;gap:9px}
  .term-logo img{height:23px}
  .term-navbar-desk{display:none}
  .term-navbar-mob{display:flex;position:static;gap:6px;padding:8px 13px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .term-navbar-mob::-webkit-scrollbar{display:none}
  .term-body{padding:14px}
}
.mod-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:1040px;margin:0 auto;padding:20px 24px 6px}
.mod-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid transparent;color:var(--muted);background:transparent;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s}
.mod-tab .ti{width:15px;height:15px;flex:none;opacity:.8}
.mod-tab:hover{color:var(--fg);background:var(--tsurf);transform:translateY(-1px)}
.mod-tab[aria-selected=true]{background:var(--tsurf);color:var(--fg);border-color:var(--tline);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 18px -12px var(--accent)}
.mod-tab[aria-selected=true] .ti{opacity:1;color:var(--accent)}
.mod-tab .tab-badge{background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;min-width:18px;height:18px;
  border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
.mod-tab .tab-badge[hidden]{display:none}
.mod-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:760px){.mod-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:16px 16px 6px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .mod-tab{flex:none;white-space:nowrap}
  .mod-tabs::-webkit-scrollbar{height:5px}
  .mod-tabs::-webkit-scrollbar-thumb{background:var(--tline);border-radius:999px}
  .mod-grid2{grid-template-columns:1fr}
  .mod-row{flex-wrap:wrap;gap:8px}
  .mod-row>span{min-width:0}
  .mod-row .mod-tabbtn{white-space:normal}
  .mod-panel{padding:14px 14px}
  .term-head{padding:40px 0 24px}
  .mod-toolbar{flex-wrap:wrap}}
.mod-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:18px 0}
.mod-kpi>div{background:var(--tsurf);border:1px solid var(--tline);border-radius:14px;padding:16px 18px}
.mod-kpi .kick{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mod-kpi .val{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px}
.mod-kpi .sub{font-size:.85rem;color:var(--muted);margin:0}
.mod-panel{background:var(--tsurf);border:1px solid var(--tline);border-radius:14px;padding:18px 20px;margin:16px 0}
.mod-panel h2,.mod-panel h3{font-size:1.02rem;margin:0 0 12px;font-weight:700}
.mod-grid2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mod-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--tline);font-size:.93rem}
.mod-row:last-child{border-bottom:0}
.mod-bar{height:6px;background:var(--tline);border-radius:999px;margin-top:6px;overflow:hidden}
.mod-bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.mod-tabbtn{padding:6px 12px;border-radius:9px;border:1px solid var(--tline);background:transparent;color:var(--muted);cursor:pointer;font-size:.8rem;font-weight:600;white-space:nowrap;transition:all .15s}
.mod-tabbtn:hover{color:var(--fg);border-color:var(--accent)}
.mod-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
.mod-toolbar input,.mod-toolbar select{background:var(--bg);border:1px solid var(--tline);border-radius:10px;padding:9px 13px;color:var(--fg);font:inherit;font-size:.9rem}
.mod-empty{color:var(--muted);font-size:.9rem;padding:26px 0;text-align:center}
.mod-subtab{display:inline-flex;gap:4px;border:1px solid var(--tline);border-radius:11px;padding:3px;background:var(--bg)}
.mod-subtab .mod-tabbtn{border:0}
.mod-subtab .mod-tabbtn[aria-selected="true"]{background:var(--accent);color:var(--bg);border-radius:8px}
/* ---- Designer IDE (IntelliJ-style) -------------------------------------- */
.msx-ide{--ide-bg:#1e1f22;--ide-surf:#2b2d30;--ide-surf2:#313438;--ide-line:#393b40;--ide-line2:#43454a;
  --ide-fg:#bcbec4;--ide-fg2:#dfdfdf;--ide-muted:#787c85;--ide-accent:#cc7832;--ide-blue:#3574f0;--ide-green:#499c54;
  --ide-red:#db5c5c;--ide-yellow:#e0b64a;
  background:var(--ide-bg);color:var(--ide-fg);border:1px solid var(--ide-line);border-radius:14px;overflow:hidden;
  margin:6px 0 22px;font-size:.9rem}
.msx-ide .ide-titlebar{display:flex;align-items:center;gap:12px;padding:9px 14px;background:var(--ide-surf);border-bottom:1px solid var(--ide-line)}
.msx-ide .ide-titlecenter{display:flex;align-items:center;gap:12px;flex:1 1 auto;justify-content:center}
.msx-ide .ide-brand{font-weight:700;color:var(--ide-fg2);letter-spacing:.01em}
.msx-ide .ide-brand i{color:var(--ide-accent);font-style:normal}
.msx-ide .ide-ver{font-size:.78rem;color:var(--ide-muted)}
.msx-ide .ide-badge{font-size:.7rem;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:999px;border:1px solid var(--ide-line2);color:var(--ide-yellow)}
.msx-ide .ide-badge.pro{color:var(--ide-green);border-color:rgba(73,156,84,.5)}
.msx-ide .ide-sp{flex:1}
.msx-ide .ide-link{color:var(--ide-blue);cursor:pointer}
.msx-ide .ide-toolbar{display:flex;gap:8px;align-items:center;padding:7px 14px;background:var(--ide-surf2);border-bottom:1px solid var(--ide-line);flex-wrap:wrap}
.msx-ide .ide-workflow{display:flex;gap:8px;align-items:center;padding:6px 14px;background:linear-gradient(90deg,rgba(53,116,240,.10),transparent 60%);border-bottom:1px solid var(--ide-line);flex-wrap:wrap}
.msx-ide .wf-steps{display:flex;gap:0;align-items:center;flex-wrap:wrap}
.msx-ide .wf-step{font-size:.68rem;letter-spacing:.04em;padding:3px 9px;border:1px solid var(--ide-line2);border-right:0;color:var(--ide-mutedx);background:var(--ide-bg)}
.msx-ide .wf-step:first-child{border-radius:6px 0 0 6px}
.msx-ide .wf-step:last-child{border-right:1px solid var(--ide-line2);border-radius:0 6px 6px 0}
.msx-ide .wf-step.done{color:var(--ide-green,#3fb950);border-color:rgba(63,185,80,.45)}
.msx-ide .wf-step.now{color:#fff;background:var(--ide-accent,#3574f0);border-color:var(--ide-accent,#3574f0);font-weight:700}
.msx-ide .wf-ver{font-size:.72rem;color:var(--ide-mutedx)}
.msx-ide .wf-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.msx-ide .wf-note{font-size:.72rem;color:var(--ide-yellow)}
.msx-ide .wf-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.msx-ide .wf-card{background:var(--ide-surf2);border:1px solid var(--ide-line2);border-radius:12px;max-width:860px;width:100%;max-height:82vh;overflow:auto;padding:16px}
.msx-ide .wf-card h3{margin:0 0 10px;font-size:.95rem}
.msx-ide .wf-row{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--ide-line);font-size:.78rem}
.msx-ide .wf-row:last-child{border-bottom:0}
.msx-ide .wf-tag{font-size:.64rem;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:999px;border:1px solid var(--ide-line2)}
.msx-ide .wf-tag.t-draft{color:var(--ide-yellow)}.msx-ide .wf-tag.t-draft_approved{color:#7cc4ff}
.msx-ide .wf-tag.t-development{color:#b48cff}.msx-ide .wf-tag.t-development_approved{color:#e8a0ff}
.msx-ide .wf-tag.t-production{color:var(--ide-green,#3fb950)}.msx-ide .wf-tag.t-superseded{color:var(--ide-mutedx)}
.msx-ide .wf-muted{color:var(--ide-mutedx);font-size:.72rem}
.msx-ide .ide-tbtn{padding:4px 11px;border-radius:7px;border:1px solid var(--ide-line2);background:transparent;color:var(--ide-fg);font-weight:600;font-size:.78rem;cursor:pointer;white-space:nowrap}
.msx-ide .ide-tbtn:hover{border-color:var(--ide-blue);color:#fff;background:rgba(53,116,240,.16)}
.msx-ide .ide-tbtn[disabled]{opacity:.45;cursor:default}
.msx-ide .ide-tbtn.run{border-color:rgba(73,156,84,.55);color:#7dbb87}
.msx-ide .ide-tbtn.run:hover{background:rgba(73,156,84,.14);color:#a8d8ae}
.msx-ide .ide-toolstrip{display:flex;gap:4px;padding:6px 10px;background:var(--ide-surf);border-bottom:1px solid var(--ide-line);overflow-x:auto}
.msx-ide .ide-toolstrip .mod-tab{border-radius:7px;padding:6px 14px;font-size:.82rem;border:1px solid transparent;background:transparent;color:var(--ide-muted)}
.msx-ide .ide-toolstrip .mod-tab:hover{color:var(--ide-fg2);background:var(--ide-surf2)}
.msx-ide .ide-toolstrip .mod-tab[aria-selected=true]{background:var(--ide-bg);color:var(--ide-fg2);border-color:var(--ide-line);box-shadow:none;transform:none}
.msx-ide .ide-body{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:560px}
.msx-ide .ide-body.ide-noproj{grid-template-columns:minmax(0,1fr)}
.msx-ide .ide-body.ide-noproj .ide-projectpane{display:none}
@media(max-width:900px){.msx-ide .ide-body{grid-template-columns:1fr}}
.msx-ide .ide-projectpane{background:var(--ide-bg);border-right:1px solid var(--ide-line);padding:8px 0 18px;overflow:auto;max-height:860px}
.msx-ide .ide-pane-title{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ide-muted);padding:4px 14px 8px}
.msx-ide .ide-tree{font-size:.85em}
.msx-ide .tgroup>summary{list-style:none;cursor:pointer;padding:3px 10px;color:var(--ide-fg);display:flex;align-items:center;gap:6px;font-weight:600}
.msx-ide .tgroup>summary::-webkit-details-marker{display:none}
.msx-ide .tgroup>summary:before{content:"⮞";color:var(--ide-muted)}
.msx-ide .tgroup[open]>summary:before{content:"⮟"}
.msx-ide .ide-empty{text-align:center;padding:42px 16px;border:1px dashed var(--ide-line2);border-radius:12px;background:var(--ide-surf)}
.msx-ide .ide-empty-t{font-size:1.05rem;color:var(--ide-fg2);margin:0 0 14px;font-weight:600}
.msx-ide .ide-builder{display:flex;flex-direction:column;gap:10px}
.msx-ide [hidden]{display:none!important}
.msx-ide .pb-tabs{display:flex;gap:6px;flex-wrap:wrap}
.msx-ide .pb-tab{padding:5px 12px;border:1px solid var(--ide-line2);border-radius:8px;background:transparent;color:var(--ide-fg);cursor:pointer;font-size:.8rem}
.msx-ide .pb-tab.on{border-color:var(--ide-accent);color:#fff;background:rgba(53,116,240,.18)}
.msx-ide .pb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.msx-ide .pb-palette{display:flex;gap:6px;flex-wrap:wrap}
.msx-ide .pb-canvas{display:grid;grid-template-columns:repeat(120,12px);grid-auto-rows:12px;grid-auto-flow:row;width:1440px;max-width:none;min-height:360px;border:1px solid var(--ide-line2);border-radius:10px;background:var(--ide-bg);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px;overflow:visible;position:relative}
.msx-ide .pb-canvas.pb-laptop{grid-template-columns:repeat(100,12px);width:1200px}
.msx-ide .pb-canvas.pb-tablet{grid-template-columns:repeat(69,12px);width:828px;min-height:520px}
.msx-ide .pb-canvas.pb-mobile{grid-template-columns:repeat(33,12px);width:396px;min-height:640px;border-radius:20px}
.msx-ide .pb-guide{position:absolute;background:#ff4fa3;z-index:9998;pointer-events:none;display:none}
.msx-ide .pb-guide.v{top:0;bottom:0;width:1px}
.msx-ide .pb-guide.h{left:0;right:0;height:1px}
.msx-ide .pb-drop-line{position:absolute;left:0;right:0;height:3px;background:var(--ide-accent);z-index:9999;pointer-events:none;display:none;border-radius:2px;box-shadow:0 0 6px rgba(53,116,240,.8)}
.msx-ide .pb-block.pb-drag-src{opacity:.4}
.msx-ide .pb-block.sel{border-color:var(--ide-accent);box-shadow:0 0 0 2px rgba(53,116,240,.35)}
.msx-ide .pb-secvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.msx-ide .pb-secoverlay{position:absolute;inset:0;z-index:1;pointer-events:none}
.msx-ide .pb-layers{display:flex;flex-direction:column;gap:3px;border:1px solid var(--ide-line);border-radius:8px;padding:5px;max-height:170px;overflow:auto;min-width:240px}
.msx-ide .pb-layers .lrow{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ide-fg);cursor:pointer;padding:2px 5px;border-radius:5px}
.msx-ide .pb-layers .lrow:hover,.msx-ide .pb-layers .lrow.on{background:rgba(53,116,240,.20)}
.msx-ide .pb-layers .lrow .lz{margin-left:auto;color:var(--ide-muted);font-size:.64rem}
.msx-ide .pb-layers .lrow button{border:0;background:transparent;color:var(--ide-muted);cursor:pointer;font-size:.64rem;padding:0 2px}
.msx-ide .home-wrap{max-width:1120px;padding:6px 2px 24px}
.msx-ide .home-head h2{margin:0 0 2px}
.msx-ide .home-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;margin:14px 0}
@media(max-width:900px){.msx-ide .home-grid{grid-template-columns:1fr}}
.msx-ide .home-card{border:1px solid var(--ide-line);border-radius:10px;padding:14px;background:var(--ide-surf)}
.msx-ide .home-card h3{margin:0 0 4px;font-size:.95rem}
.msx-ide .home-card p{margin:0 0 10px;color:var(--ide-muted);font-size:.78rem}
.msx-ide .home-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.msx-ide .home-tool{border:1px solid var(--ide-line);border-radius:8px;padding:9px;background:var(--ide-bg)}
.msx-ide .home-tool b{display:block;font-size:.8rem}
.msx-ide .home-tool span{font-size:.69rem;color:var(--ide-muted)}
.msx-ide .home-recents{width:100%;border-collapse:collapse;font-size:.77rem}
.msx-ide .home-recents th{text-align:left;color:var(--ide-muted);font-weight:600;font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--ide-line)}
.msx-ide .home-recents td{padding:7px 8px;border-bottom:1px solid var(--ide-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.msx-ide .home-recents tbody tr{cursor:pointer}
.msx-ide .home-recents tbody tr:hover td{background:rgba(53,116,240,.12)}
.msx-ide .home-empty{color:var(--ide-muted);font-size:.78rem;padding:12px 4px}
.msx-ide .doc-toolbar{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:6px 0 8px;border-bottom:1px solid var(--ide-line);margin-bottom:8px}
.msx-ide .doc-toolbar button{border:1px solid var(--ide-line2);background:transparent;color:var(--ide-fg);border-radius:6px;cursor:pointer;font-size:.72rem;padding:3px 7px}
.msx-ide .doc-toolbar button:hover{border-color:var(--ide-accent)}
.msx-ide .doc-toolbar .doc-sep{width:1px;height:18px;background:var(--ide-line);margin:0 4px}
.msx-ide .doc-body{min-height:46vh;max-height:60vh;overflow:auto;background:#fff;color:#1a1a1a;padding:30px 38px;border-radius:8px;font-family:Georgia,'Times New Roman',serif;line-height:1.7;font-size:16px;outline:none}
.msx-ide .doc-body:focus{box-shadow:0 0 0 2px rgba(53,116,240,.35)}
.msx-ide .doc-body h1{font-size:2rem;margin:.2em 0 .4em}
.msx-ide .doc-body h2{font-size:1.5rem;margin:.6em 0 .3em}
.msx-ide .doc-body h3{font-size:1.2rem;margin:.6em 0 .3em}
.msx-ide .doc-body blockquote{border-left:3px solid #c9c9c9;margin:.6em 0;padding:.1em 0 .1em 14px;color:#555}
.msx-ide .doc-body a{color:#1a56db}
.msx-ide .doc-body ul,.msx-ide .doc-body ol{padding-left:1.4em}
.msx-ide .doc-source{width:100%;min-height:46vh;max-height:60vh;background:var(--ide-bg);color:var(--ide-fg);border:1px solid var(--ide-line2);border-radius:8px;padding:12px;font-family:ui-monospace,Menlo,monospace;font-size:.82rem;line-height:1.6}
.msx-ide .doc-status{display:flex;gap:14px;align-items:center;color:var(--ide-muted);font-size:.72rem;margin-top:8px}
.msx-ide .img-stage{display:block;overflow:auto;max-height:60vh;text-align:center;background:#111;border-radius:8px;padding:8px;min-height:200px}
.msx-ide .img-stage canvas{display:inline-block;vertical-align:top;max-width:none;max-height:none;border-radius:4px;cursor:crosshair;touch-action:none}
.msx-ide .img-layerchip.on{border-color:var(--ide-accent);color:#fff;background:rgba(53,116,240,.24)}
.msx-ide .tnode.drag-src{opacity:.4}
.msx-ide details.tgroup.drop{outline:2px solid var(--ide-accent);outline-offset:2px;border-radius:6px}
.msx-ide .img-tool.on{border-color:var(--ide-accent);color:#fff;background:rgba(53,116,240,.24)}
.msx-ide .img-palettebar{gap:6px}
.msx-ide .img-swatch{width:22px;height:22px;padding:0;border-radius:5px;border:1px solid var(--ide-line2);cursor:pointer}
.msx-ide .img-swatch:hover{outline:2px solid var(--ide-accent)}
.msx-ide .img-controls input[type=color]{width:34px;height:24px;padding:0;border:1px solid var(--ide-line2);border-radius:4px;background:transparent}
.msx-ide .img-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.msx-ide .img-controls label{font-size:.72rem;color:var(--ide-muted);display:flex;align-items:center;gap:4px}
.msx-ide .img-controls input[type=number]{width:74px}
.msx-ide .img-controls input[type=range]{width:110px}
.msx-ide .vid-stage{background:#000;border-radius:8px;padding:6px;display:flex;justify-content:center}
.msx-ide .vid-stage video{max-width:100%;max-height:44vh;border-radius:4px}
.msx-ide .vid-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.msx-ide .vid-controls label{font-size:.72rem;color:var(--ide-muted);display:flex;align-items:center;gap:4px}
.msx-ide .vid-controls input[type=number]{width:82px}
.msx-ide .vid-controls input[type=range]{width:150px}
.msx-ide .vid-progress{height:4px;background:var(--ide-line);border-radius:2px;overflow:hidden;margin-top:6px}
.msx-ide .vid-progress span{display:block;height:100%;width:0;background:var(--ide-accent);transition:width .15s linear}
.msx-ide .aud-wave{width:100%;height:130px;background:#111;border-radius:8px;display:block}
.msx-ide .aud-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.msx-ide .aud-controls label{font-size:.72rem;color:var(--ide-muted);display:flex;align-items:center;gap:4px}
.msx-ide .aud-controls input[type=number]{width:82px}
.msx-ide .aud-controls input[type=range]{width:130px}
.msx-ide .pb-tab[draggable="true"]{cursor:grab}
.msx-ide .pb-canvas.pb-drop{border-color:var(--ide-accent);box-shadow:0 0 0 2px rgba(53,116,240,.25)}
.msx-ide .pb-block{position:relative;border:1px solid var(--ide-line2);border-radius:8px;background:var(--ide-surf2);padding:6px;min-width:0;min-height:0;cursor:grab;user-select:none;overflow:hidden;color:var(--ide-fg)}
.msx-ide .ide-builder{overflow-x:auto}
.msx-ide .pb-block:hover{border-color:var(--ide-accent)}
.msx-ide .pb-block .pb-h{display:flex;gap:4px;align-items:center;font-size:.66rem;color:var(--ide-muted);margin-bottom:3px;white-space:nowrap}
.msx-ide .pb-block .pb-h button{border:0;background:transparent;color:var(--ide-muted);cursor:pointer;font-size:.7rem;padding:0 2px}
.msx-ide .pb-block .pb-rz{position:absolute;right:0;bottom:0;width:12px;height:12px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--ide-muted) 50%)}
.msx-ide .pb-live{max-height:130px;overflow:hidden;position:relative;font-size:.72rem}
.msx-ide .pb-live img{max-width:100%;height:auto}
.msx-ide .pb-live h1,.msx-ide .pb-live h2,.msx-ide .pb-live h3{font-size:.95rem;margin:2px 0}
.msx-ide .pb-live p{margin:2px 0}
.msx-ide .pb-ph{display:flex;align-items:center;gap:8px;font-size:.7rem;color:var(--ide-muted);padding:8px;border:1px dashed var(--ide-line2);border-radius:6px}
.msx-ide .pb-ph button{border:1px solid var(--ide-line2);background:transparent;color:var(--ide-accent);border-radius:6px;cursor:pointer;font-size:.68rem;padding:1px 7px}
.msx-ide .tnode{display:flex;align-items:center;gap:7px;padding:2px 10px 2px 26px;cursor:pointer;color:var(--ide-fg);white-space:nowrap}
.msx-ide .tnode:hover{background:var(--ide-surf)}
.msx-ide .tnode.on{background:rgba(53,116,240,.22);color:#fff}
.msx-ide .tnode .ic{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}
.msx-ide .tic{display:block;fill:currentColor}
.msx-ide .tgroup summary .tic{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:5px}
.msx-ide .tnode.dir{cursor:pointer;padding-left:12px;color:var(--ide-fg2);font-weight:600}
.msx-ide .tnode.muted{color:var(--ide-muted);cursor:default}
.msx-ide .tnote{padding:8px 14px;color:var(--ide-muted);font-size:.78rem}
.msx-ide .ide-main{display:flex;flex-direction:column;min-width:0;background:var(--ide-surf)}
.msx-ide .ide-content{flex:1;min-width:0;padding:14px 18px 20px;overflow:auto;max-height:820px}
.msx-ide .ide-content h2{color:var(--ide-fg2)}
.msx-ide .ide-content h3{color:var(--ide-fg2)}
.msx-ide .ide-content p,.msx-ide .ide-content li{color:var(--ide-fg)}
.msx-ide .ide-content .note{color:var(--ide-muted)}
.msx-ide .ide-content a{color:var(--ide-blue)}
.msx-ide .ide-content input,.msx-ide .ide-content select,.msx-ide .ide-content textarea{background:var(--ide-bg)!important;border-color:var(--ide-line2)!important;color:var(--ide-fg2)!important}
.msx-ide .ide-content .contact input,.msx-ide .ide-content .contact textarea,.msx-ide .ide-content .shop-toolbar input{border-radius:9px}
.msx-ide .ide-content .mod-panel{background:var(--ide-surf2);border-color:var(--ide-line)}
.msx-ide .ide-content .mod-row{border-color:var(--ide-line)}
.msx-ide .ide-etabs{display:flex;gap:2px;background:var(--ide-surf);border-bottom:1px solid var(--ide-line);padding:0 8px;overflow-x:auto}
.msx-ide .ide-etab{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;font-size:.8rem;font-weight:600;color:var(--ide-muted);border:0;border-right:1px solid var(--ide-line);background:transparent;cursor:pointer;white-space:nowrap}
.msx-ide .ide-etab:hover{color:var(--ide-fg2);background:var(--ide-surf2)}
.msx-ide .ide-etab.on{color:var(--ide-fg2);background:var(--ide-content, var(--ide-surf2))}
.msx-ide .ide-etab .dirty{width:7px;height:7px;border-radius:50%;background:var(--ide-yellow);flex:none}
.msx-ide .ide-etab .x{opacity:0;border:0;background:transparent;color:var(--ide-muted);cursor:pointer;font-size:.75rem;padding:0 2px}
.msx-ide .ide-etab:hover .x{opacity:1}
.msx-ide .ide-run{border-top:1px solid var(--ide-line);background:var(--ide-bg)}
.msx-ide .ide-runhead{display:flex;align-items:center;gap:10px;padding:6px 14px;border-bottom:1px solid var(--ide-line)}
.msx-ide .ide-runhead b{font-size:.8rem;color:var(--ide-fg2)}
.msx-ide .ide-runout{margin:0;max-height:260px;overflow:auto;padding:10px 14px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#a9b7c6;white-space:pre-wrap;word-break:break-word}
.msx-ide .ide-run.min .ide-runout,
.msx-ide .ide-run.min [data-iderunname],
.msx-ide .ide-run.min [data-iderunstate],
.msx-ide .ide-run.min [data-iderunhint],
.msx-ide .ide-run.min [data-iderunclear],
.msx-ide .ide-run.min [data-iderunclose],
.msx-ide .ide-run.min .ide-sp{display:none}
.msx-ide .ide-run [data-iderunrestore]{display:none}
.msx-ide .ide-run.min [data-iderunrestore]{display:inline-block}
.msx-ide .ide-statusbar{display:flex;gap:16px;align-items:center;padding:5px 14px;background:var(--ide-surf);border-top:1px solid var(--ide-line);font-size:.74rem;color:var(--ide-muted);flex-wrap:wrap}
.msx-ide .ide-statusbar .ok{color:var(--ide-green)}
.msx-ide .ide-statusbar .warn{color:var(--ide-yellow)}
.msx-ide .ide-statusbar span[data-idefile]{color:var(--ide-accent)}
.msx-ide .CodeMirror{height:auto;min-height:420px;font:13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1px solid var(--ide-line2);border-radius:10px}
.msx-ide .CodeMirror-gutters{background:var(--ide-surf2);border-right:1px solid var(--ide-line)}
.msx-ide .CodeMirror-linenumber{color:#606366}
.msx-ide .cm-s-darcula.CodeMirror{background:#2b2b2b;color:#a9b7c6}
.msx-ide .CodeMirror-foldgutter-open:after,.msx-ide .CodeMirror-foldgutter-folded:after{color:#8a9099}
.msx-ide .CodeMirror-foldgutter{width:1.1em}
.msx-ide .code-fallback{width:100%;min-height:420px;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;border-radius:10px;border:1px solid var(--ide-line2);background:var(--ide-bg);color:#a9b7c6;padding:12px}
.msx-ide .ide-ctx{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--ide-surf);border-bottom:1px solid var(--ide-line);padding:6px 14px}
.msx-ide .ide-crumb{font-size:.78rem;color:var(--ide-muted)}
.msx-ide .ide-crumb b{color:var(--ide-fg2)}
.msx-ide .ide-chip{font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid var(--ide-line2);color:var(--ide-yellow)}
/* deeper IntelliJ surface for everything inside the IDE */
.msx-ide h1,.msx-ide h2,.msx-ide h3,.msx-ide h4{color:var(--ide-fg2)}
.msx-ide .btn{background:var(--ide-blue);border-color:transparent;color:#fff;border-radius:8px}
.msx-ide .btn:hover{background:#4280f2;transform:none;box-shadow:none}
.msx-ide .btn.ghost{background:transparent;color:var(--ide-fg);border-color:var(--ide-line2)}
.msx-ide .btn.ghost:hover{border-color:var(--ide-blue);color:#fff;background:rgba(53,116,240,.12);transform:none}
.msx-ide .mod-tabbtn{border-color:var(--ide-line2);color:var(--ide-fg);background:transparent;border-radius:7px}
.msx-ide .mod-tabbtn:hover{background:var(--ide-surf2);border-color:var(--ide-blue);color:#fff}
.msx-ide .tag{background:var(--ide-surf2);border:1px solid var(--ide-line2);color:var(--ide-yellow)}
.msx-ide .contact label,.msx-ide label.note{color:var(--ide-muted)}
.msx-ide .contact{display:block}
.msx-ide .contact>div{margin-bottom:12px}
.msx-ide input[type="color"]{height:32px;width:56px;padding:2px;border-radius:8px;background:var(--ide-bg);border:1px solid var(--ide-line2);cursor:pointer}
.msx-ide input[type="checkbox"]{accent-color:var(--ide-blue)}
.msx-ide select{background-color:var(--ide-bg);color:var(--ide-fg2);border-color:var(--ide-line2);border-radius:8px}
.msx-ide ::-webkit-scrollbar{width:10px;height:10px}
.msx-ide ::-webkit-scrollbar-track{background:transparent}
.msx-ide ::-webkit-scrollbar-thumb{background:var(--ide-line2);border-radius:6px;border:2px solid var(--ide-bg)}
.msx-ide ::-webkit-scrollbar-thumb:hover{background:#565a60}
.msx-ide{scrollbar-color:var(--ide-line2) transparent;scrollbar-width:thin}
#msx-modal-host{position:fixed;inset:0;z-index:2147483000;display:block;margin:0;border:0;border-radius:0;overflow:visible;background:transparent;font-size:.9rem;pointer-events:none;scrollbar-color:var(--ide-line2) transparent;scrollbar-width:thin}
#msx-modal-host .wf-modal{pointer-events:auto}
.msx-ide .ide-filter{width:calc(100% - 20px);margin:2px 10px 8px;background:var(--ide-bg);border:1px solid var(--ide-line2);color:var(--ide-fg2);border-radius:8px;padding:6px 10px;font-size:.8rem}
.msx-ide .ide-pagefilter{display:flex;gap:4px;padding:0 10px 6px;flex-wrap:wrap}
.msx-ide .ide-pagefilter button{font-size:.63rem;padding:2px 8px;border:1px solid var(--ide-line2);border-radius:999px;background:transparent;color:var(--ide-muted);cursor:pointer}
.msx-ide .ide-pagefilter button.on{border-color:var(--ide-accent);color:#fff;background:rgba(53,116,240,.22)}
.msx-ide .ide-filter:focus{outline:none;border-color:var(--ide-blue);box-shadow:0 0 0 2px rgba(53,116,240,.25)}
/* Notepad++-style editor strip + Dolphin-style Explorer tree */
.msx-ide .ide-toolstrip{justify-content:center}
.msx-ide .ide-toolstrip .mod-tab{flex:none;min-width:130px;text-align:center}
.msx-ide .ide-etabs{flex-wrap:wrap}
.msx-ide .ide-crumbs{flex:none}
.msx-ide .ide-sp{flex:1 1 12px}
.msx-ide .CodeMirror-hidden{display:none !important}
.msx-ide .ide-tree{padding:4px}
.msx-ide .ide-tree .tnode{border-radius:6px;padding:3px 8px 3px 12px;display:flex;gap:6px;align-items:center}
.msx-ide .ide-tree .tnode:hover{background:rgba(255,255,255,.07)}
.msx-ide .ide-tree .tnode.on{background:rgba(168,198,55,.18)}
.msx-ide .CodeMirror{height:auto;border-top:1px solid #43454a}
.msx-ide .CodeMirror-gutters{background:#2b2d30;border-right:1px solid #43454a}
.msx-ide .ide-crumbs{width:100%;font-size:.74rem;color:var(--ide-muted);padding:3px 10px;border-top:1px solid var(--ide-line);letter-spacing:.01em}
.msx-ide .ide-swatch b,.msx-ide .ide-swatch span{display:inline-block}
.msx-ide .list{background:transparent}
.msx-ide .list li{border-bottom:1px solid var(--ide-line)}
.msx-ide .mod-empty{color:var(--ide-muted)}
.msx-ide .mod-kpi>div{background:var(--ide-surf2);border-color:var(--ide-line)}
.msx-ide .shop-toolbar{gap:8px}
.msx-ide .ide-content a.mod-tabbtn{background:transparent}
.msx-ide details.tgroup summary{color:var(--ide-fg)}
.msx-ide .tnode.dir:hover,.msx-ide .tgroup>summary:hover{background:var(--ide-surf)}
.msx-ide .stock{border-radius:8px}
.msx-ide .stock.in{background:rgba(73,156,84,.18);color:#9fd4a7}
.msx-ide .stock.low{background:rgba(224,182,74,.15);color:var(--ide-yellow)}
.msx-ide .stock.out{background:rgba(219,92,92,.14);color:var(--ide-red)}
.msx-ide .ide-tcnt{margin-left:6px;color:var(--ide-accent);font-size:.66rem;opacity:.85}
.msx-ide .ide-tclose{margin-left:8px;color:var(--ide-muted);font-size:.72rem;line-height:1;padding:1px 5px;border-radius:5px;cursor:pointer;display:inline-block}
.msx-ide .ide-etab:hover .ide-tclose{color:#ff8589}
.msx-ide .ide-tclose:hover{background:rgba(219,92,92,.22);color:#ff8589}
.msx-ide .ide-mutedx{color:var(--ide-muted)}
.msx-ide .ide-ctxmenu{position:fixed;z-index:2147483000;min-width:210px;background:#2b2d30;border:1px solid #515154;border-radius:8px;padding:4px;box-shadow:0 12px 32px rgba(0,0,0,.55);font-size:.82rem}
.msx-ide .ide-ctxmenu .cmi{padding:6px 14px;border-radius:6px;cursor:pointer;color:#dfdfdf;white-space:nowrap}
.msx-ide .ide-ctxmenu .cmi:hover{background:rgba(103,141,255,.22)}
.msx-ide .id-a{color:#9fd4a7}
.msx-ide .id-d{color:#ff8589}
.msx-ide .id-g{color:var(--ide-muted);opacity:.85}
.msx-ide .ide-projectpane{resize:horizontal;min-width:200px;max-width:520px}
.msx-ide .ide-run{resize:vertical;min-height:110px;overflow:auto}
.mod-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:12px 0}
/* Kiosk search mode. Domains mode keeps the search box and the toolbar chrome
   but hides everything that only makes sense for products, so the domain
   lookup is the whole output rather than a panel under a "no matches" grid. */
[data-shop].mode-domains .filters>.shop-toolbar,
[data-shop].mode-domains [data-shop-filters],
[data-shop].mode-domains [data-shop-genres],
[data-shop].mode-domains .shop-summary,
[data-shop].mode-domains [data-products],
[data-shop].mode-domains [data-search-suggest],
[data-shop].mode-domains [data-announce]{display:none!important}
.mod-pcard{background:var(--tsurf);border:1px solid var(--tline);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mod-pcard .thumb{width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:rgba(127,127,127,.12);border:1px solid var(--tline);display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--muted)}
.mod-pcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mod-fieldset{border:1px solid var(--tline);border-radius:12px;padding:12px 14px;margin:0 0 14px}
.mod-fieldset legend{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 8px;font-weight:700}
.mod-fieldset>.mod-grid2{margin:0}
.d-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--accent);color:var(--bg);
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100;max-width:90vw}
.d-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
[data-bid]{cursor:grab;transition:box-shadow .15s,opacity .15s}
[data-bid].dragging{opacity:.4;box-shadow:0 0 0 2px var(--accent)}
[data-bid]:hover{border-color:var(--accent)}
.cart-drawer{transition:transform .2s ease,opacity .2s ease}
.btn{transition:filter .15s,transform .1s}
.btn:active{transform:scale(.97)}
@media(max-width:760px){
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .bag-dock{right:10px;bottom:10px;gap:8px}
  .cart-drawer{width:calc(100vw - 20px);height:min(82vh,600px)}
  .bag-fab .bag-label{display:none}
  .shop-toolbar input[type=search]{max-width:none}
}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filters button{background:transparent;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;cursor:pointer;font-size:.85rem}
.filters button[aria-pressed=true]{color:var(--fg);background:var(--panel);border-color:var(--accent)}
.kiosk-toolbar{position:sticky;top:var(--nav-h);z-index:18;background:var(--bg);border-bottom:1px solid var(--line);
  padding:7px 14px 8px}
.kiosk-toolbar .filters{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:center;margin:0 auto;max-width:none;width:100%}
.search-wrap{position:relative;flex:1 1 100%;max-width:620px;margin:0 auto}
.search-input{width:100%;padding:9px 44px 9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
  color:var(--fg);font:inherit;font-size:.92rem;text-align:center}
.search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 20px 44px -18px rgba(0,0,0,.5);z-index:40;overflow:hidden;text-align:left;max-height:340px;overflow-y:auto}
.search-suggest button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:10px 14px;color:var(--fg);cursor:pointer;font:inherit;font-size:.92rem}
.search-suggest button:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.search-suggest button.sel{background:color-mix(in srgb,var(--accent) 16%,var(--panel))}
.search-suggest button:last-child{border-bottom:0}
.search-suggest .s-thumb{width:30px;height:40px;border-radius:4px;object-fit:cover;flex:none;background:var(--bg)}
.search-suggest .s-meta{font-size:.78rem;color:var(--muted)}
[data-shop-filters],[data-shop-genres]{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
[data-shop-genres]{display:none;margin-top:6px}
[data-shop-genres].open{display:flex}
[data-announce]{width:100%;margin-top:10px}
[data-shop-status]{display:block;width:100%;text-align:center;margin-top:8px}
.kiosk-search-note{text-align:center;margin:14px 0 2px;color:var(--muted);font-size:1.05rem}
.qv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
.qv-overlay.open{display:flex}
.qv-modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;max-width:860px;width:100%;
  max-height:88vh;overflow:auto;display:flex;flex-direction:column;position:relative}
.qv-modal .qv-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--fg);cursor:pointer;font-size:1.1rem;z-index:2}
.qv-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.qv-media{background:var(--bg);min-height:280px}
.qv-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4}
.qv-media .p-img-ph{aspect-ratio:3/4;font-size:4rem}
.qv-info{padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.qv-info h2{margin:0;font-size:1.35rem;font-family:var(--heading);line-height:1.25}
@media(max-width:640px){.qv-body{grid-template-columns:1fr}.qv-media{min-height:200px}.qv-media img{aspect-ratio:4/3}}
/* The conversation pane is capped (not the whole layout), so a long conversation
   scrolls inside .agira-log while the input row stays directly beneath it and
   never gets pushed off-screen. */
.agira-layout{--ag-crimson:#c2185b;--ag-lavender:#9b7bd0;--ag-black:#0d0c14;--ag-grey:#8a8a93;--ag-eggshell:#f4efe4;display:flex;min-height:60vh;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.agira-side{width:236px;flex:none;background:var(--ag-black);color:var(--ag-eggshell);padding:12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.agira-side h3{margin:2px 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ag-grey)}
.agira-new{background:linear-gradient(135deg,var(--ag-crimson),var(--ag-lavender));color:#fff;border:0;border-radius:10px;padding:9px 12px;font-weight:700;cursor:pointer;width:100%}
.agira-conv{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.85rem;color:#c9c4d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.agira-conv:hover{background:rgba(155,123,208,.16)}
.agira-conv.on{background:rgba(194,24,91,.26);color:#fff}
.agira-conv .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.agira-conv .x{opacity:.55;color:var(--ag-grey);border:0;background:none;cursor:pointer;font-size:1rem;padding:0 2px}
.agira-conv:hover .x{opacity:1}
.agira-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.agira-side-foot button{background:none;border:1px solid rgba(138,138,147,.4);color:var(--ag-grey);border-radius:8px;padding:7px 10px;cursor:pointer;font-size:.82rem;text-align:left}
.agira-side-foot button:hover{color:var(--ag-eggshell);border-color:var(--ag-lavender)}
.agira-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--panel)}
.agira-topbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.agira-topbar select{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 10px;color:var(--fg);font:inherit;font-size:.85rem;max-width:230px}
.agira-log{flex:1 1 auto;min-height:220px;max-height:calc(100vh - 430px);overflow-y:auto;overscroll-behavior:contain;padding:16px;background:var(--bg)}
/* "Thoughts" — collapsible reasoning block above each AGIRA reply. */
.agira-thought{margin:0 0 8px;border:1px dashed var(--line);border-radius:9px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.agira-thought>summary{cursor:pointer;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px;list-style:none}
.agira-thought>summary::-webkit-details-marker{display:none}
.agira-thought>summary::before{content:"\25b8 ";display:inline-block;transition:transform .15s}
.agira-thought[open]>summary::before{transform:rotate(90deg)}
.agira-thought .agira-thought-body{padding:0 12px 10px;font-size:.85rem;line-height:1.5;color:var(--muted);white-space:pre-wrap}
.agira-msg .agira-media{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.agira-msg .agira-media img,.agira-msg .agira-media video{max-width:min(420px,100%);max-height:320px;border-radius:10px;border:1px solid var(--line);display:block;background:#000}
.agira-msg .agira-media audio{width:min(420px,100%)}
.agira-msg .agira-media .cap{font-size:.74rem;color:var(--muted)}
.agira-msg{margin:10px 0;display:flex;flex-direction:column}
.agira-msg.user{align-items:flex-end}
.agira-msg .who{font-size:.72rem;color:var(--muted);margin-bottom:2px}
.agira-bubble{max-width:86%;padding:9px 13px;border-radius:12px;font-size:.95rem;line-height:1.55;white-space:pre-wrap}
.agira-bubble pre.code{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:8px 0;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;line-height:1.45}
.agira-bubble pre.code code{background:none;border:0;padding:0;font-size:inherit}
.agira-bubble code.ic{background:rgba(127,127,127,.18);border-radius:5px;padding:1px 5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em}
.agira-bubble h4,.agira-bubble h5{margin:10px 0 4px;font-family:var(--heading);line-height:1.3;font-size:1.05rem}
.agira-bubble b{font-weight:700}
.agira-bubble ul,.agira-bubble ol{margin:6px 0;padding-left:18px}
.agira-msg.user .agira-bubble{background:linear-gradient(135deg,var(--ag-crimson),#8e3f8f);color:#fff;border-top-right-radius:4px}
.agira-msg.agira .agira-bubble{background:var(--panel);border:1px solid var(--line);border-top-left-radius:4px}
.agira-listen{background:none;border:0;cursor:pointer;font-size:.85rem;padding:0 3px;opacity:.55;line-height:1;vertical-align:baseline}
.agira-listen:hover{opacity:1}
.agira-listen:disabled{opacity:.35;cursor:wait}
.agira-msg .meta{font-size:.72rem;color:var(--muted);margin-top:3px}
.agira-inputrow{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.agira-inputrow input{flex:1;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit}
.agira-inputrow button{background:linear-gradient(135deg,var(--ag-crimson),var(--ag-lavender));color:#fff;border:0;border-radius:10px;padding:0 18px;font-weight:700;cursor:pointer}
.agira-inputrow button.agira-attach{background:none;border:1px solid var(--line);color:var(--muted);padding:0 12px;font-size:1rem}
.agira-inputrow button.agira-attach:hover{color:var(--fg);border-color:var(--accent)}
.agira-inputrow button.agira-mic.rec{background:rgba(229,72,77,.18);border-color:#e5484d;color:#ff8589;animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{0%,100%{opacity:1}50%{opacity:.45}}
.agira-attachrow{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px 0}
.agira-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;border:1px solid var(--line);background:var(--bg);font-size:.78rem;color:var(--fg)}
.agira-chip img{width:26px;height:26px;object-fit:cover;border-radius:5px;display:block}
.agira-chip .xc{cursor:pointer;color:var(--muted);border:0;background:none;font-size:.9rem;padding:0 2px;line-height:1}
.agira-chip .xc:hover{color:var(--fg)}
.agira-bubble .agira-att{display:flex;gap:8px;align-items:flex-start;margin-top:6px;font-size:.8rem;color:var(--muted)}
.agira-bubble .agira-att img{max-width:220px;max-height:160px;border-radius:8px;border:1px solid var(--line);display:block}
.agira-bubble .agira-att .fname{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem}
.agira-stats{display:flex;gap:12px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.agira-modal{--ag-crimson:#c2185b;--ag-lavender:#9b7bd0;position:fixed;inset:0;background:rgba(10,8,18,.62);display:flex;align-items:center;justify-content:center;z-index:90;padding:20px}
.agira-modal[hidden]{display:none}
.agira-settings{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:11px}
.agira-settings h4{margin:0;font-size:1.02rem}
.agira-settings label{font-size:.84rem;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.agira-settings label.row{flex-direction:row;align-items:center;gap:8px;color:var(--fg)}
.agira-settings input[type=number]{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--fg);font:inherit;font-size:.9rem}
.agira-settings .btns{display:flex;gap:8px;justify-content:flex-end}
.agira-settings .btns button{padding:8px 16px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;font:inherit;font-size:.85rem;font-weight:600}
.agira-settings .btns button:first-child{background:linear-gradient(135deg,var(--ag-crimson),var(--ag-lavender));color:#fff;border:0}
@media(max-width:760px){.agira-layout{flex-direction:column}.agira-side{width:100%;flex:none;flex-direction:column;max-height:none;padding:10px}.agira-side h3{margin:8px 0 4px;font-size:.8rem}[data-convlist]{display:flex;flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:4px}.agira-conv{flex:none;max-width:200px}.agira-side-foot{margin-top:8px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}.agira-side-foot button{flex:none}.agira-conv .x{opacity:.8}.agira-topbar{flex-direction:column;align-items:stretch}.agira-inputrow button{padding:0 14px}}
form.contact{display:grid;gap:14px;max-width:560px}
form.contact label:not(altcha-widget *){font-size:.85rem;color:var(--muted);display:block;margin-bottom:6px}
form.contact input:not(altcha-widget *),form.contact textarea:not(altcha-widget *){width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit}
form.contact textarea:not(altcha-widget *){min-height:140px;resize:vertical}
/* ALTCHA proof-of-work widget — colours themed to the studio palette.
   NB: the generic `input`/`label` rules above (and the footer/theme overrides
   below) are scoped with :not(altcha-widget *) so they never restyle the
   widget's own checkbox/label, and --altcha-max-width is left at its default
   so the widget keeps its natural 320px width inside grids/flex rows. */
altcha-widget{display:block;max-width:100%;
  --altcha-color-primary:var(--accent);--altcha-color-primary-content:#fff;
  --altcha-color-success:var(--accent);--altcha-color-success-content:#fff;
  --altcha-border-radius:12px;--altcha-color-base:var(--panel);--altcha-color-base-content:var(--fg)}
footer.site altcha-widget{--altcha-color-base:#fff;--altcha-color-base-content:#000}
.note{font-size:.85rem;color:var(--muted)}
footer.site{background:#fff;color:#000;border-top:1px solid #e5e5e5;padding:40px 0;font-size:.85rem}
footer.site .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer.site a{color:#000;text-decoration:underline}
footer.site .newsletter{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;max-width:640px;margin-left:auto;margin-right:auto}
footer.site .newsletter input:not(altcha-widget *){flex:1;min-width:220px;padding:10px 14px;border-radius:10px;border:1px solid #ccc;background:#fff;color:#000;font:inherit}
footer.site .newsletter .note{color:#444}
@media(max-width:760px){
  .burger{display:block}
  .nav{flex-wrap:nowrap;position:relative;gap:10px}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;width:100%;
    flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;
    background:#100e18;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
    padding:12px;z-index:60;box-shadow:0 24px 46px -22px rgba(0,0,0,.85)}
  .nav.open ul{display:flex}
  .nav a{font-size:.9rem;padding:8px 14px;background:rgba(255,255,255,.12)}
  header.site{background:#1e1e25}
  body.kiosk-page header.site{background:#1e1e25}
  body.kiosk-page .kiosk-head{margin-top:0;padding-top:clamp(26px,5.5vw,64px)}
}
/* ===== Ethereal glass theme — every page EXCEPT the Staff Terminal =====
   Glows + tints derive from each family's --accent/--accent2, so every
   Monsireaux domain picks up its own palette automatically. */
body:not(.term-page){position:relative}
body:not(.term-page)::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(58% 44% at 50% -6%,color-mix(in srgb,var(--accent2) 30%,transparent),transparent 62%),
    radial-gradient(44% 36% at 8% 4%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),
    radial-gradient(52% 44% at 94% 104%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 62%)}
body:not(.term-page)::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.6;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 26%,transparent 72%,color-mix(in srgb,var(--accent2) 9%,transparent))}
/* Astronomical starfield — sits above the colour blobs, behind all content */
#starfield{position:fixed;inset:0;z-index:-1;pointer-events:none}
@media(prefers-reduced-motion:reduce){#starfield{display:none}}
/* Slim themed scrollbars (replace the chunky OS default) */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,transparent) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 42%,transparent);border-radius:999px;
  border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 68%,transparent);background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}
/* Blur is the biggest GPU cost — keep it on a FEW large surfaces only. */
body:not(.term-page) .card,
body:not(.term-page) .mod-panel,
body:not(.term-page) .auth-form{
  background:linear-gradient(152deg,rgba(255,255,255,.08),color-mix(in srgb,var(--accent2) 7%,transparent) 48%,color-mix(in srgb,var(--accent) 6%,transparent));
  -webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 22px 55px -30px color-mix(in srgb,var(--accent) 60%,transparent),0 0 0 1px rgba(255,255,255,.045) inset}
/* Lighter glass for the many small items (no backdrop-filter = far cheaper). */
body:not(.term-page) .list li,
body:not(.term-page) .product,
body:not(.term-page) .pill,
body:not(.term-page) .featured-card{
  background:linear-gradient(152deg,rgba(24,22,34,.74),color-mix(in srgb,var(--accent2) 8%,rgba(20,18,28,.74)) 50%,color-mix(in srgb,var(--accent) 7%,rgba(20,18,28,.74)));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 16px 40px -28px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 1px rgba(255,255,255,.04) inset}
body:not(.term-page) .card:hover,
body:not(.term-page) .product:hover{border-color:color-mix(in srgb,var(--accent2) 55%,transparent);
  box-shadow:0 26px 62px -30px color-mix(in srgb,var(--accent2) 60%,transparent),0 0 0 1px rgba(255,255,255,.05) inset}
body:not(.term-page) section{border-top-color:rgba(255,255,255,.07)}
body:not(.term-page) .kiosk-toolbar{background:rgba(10,10,14,.62);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.10)}
body:not(.term-page) .auth-form{position:relative;overflow:hidden}
body:not(.term-page) .auth-form::before{content:"";position:absolute;left:-20%;right:-20%;top:-45%;height:70%;
  pointer-events:none;filter:blur(22px);opacity:.9;z-index:0;animation:halo 9s ease-in-out infinite alternate;
  background:radial-gradient(60% 100% at 50% 0,color-mix(in srgb,var(--accent2) 34%,transparent),transparent 70%),
    radial-gradient(50% 100% at 22% 0,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%)}
body:not(.term-page) .auth-form>*{position:relative;z-index:1}
body:not(.term-page) form.contact input:not(altcha-widget *),
body:not(.term-page) form.contact textarea:not(altcha-widget *),
body:not(.term-page) .auth-form .contact select,
body:not(.term-page) .mod-toolbar input,
body:not(.term-page) .mod-toolbar select{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
:root[data-user-mode="light"] body:not(.term-page)::before{opacity:.5}
:root[data-user-mode="light"] body:not(.term-page) .card,
:root[data-user-mode="light"] body:not(.term-page) .list li,
:root[data-user-mode="light"] body:not(.term-page) .product,
:root[data-user-mode="light"] body:not(.term-page) .mod-panel,
:root[data-user-mode="light"] body:not(.term-page) .auth-form{
  background:linear-gradient(152deg,rgba(255,255,255,.78),color-mix(in srgb,var(--accent2) 10%,transparent) 55%,color-mix(in srgb,var(--accent) 7%,transparent));
  border-color:rgba(0,0,0,.08);
  box-shadow:0 20px 50px -32px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.6) inset}
@media(prefers-reduced-motion:reduce){body:not(.term-page) .auth-form::before{animation:none}}
/* Mobile performance: backdrop-filter is very costly on phones — drop it and use
   heavier solid backgrounds so surfaces stay legible without blur. */
@media(max-width:760px){
  body:not(.term-page) .card,body:not(.term-page) .mod-panel,body:not(.term-page) .auth-form,
  .cart-drawer,.bag-fab,.kiosk-toolbar,.search-suggest,.co-modal{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  body:not(.term-page) .card,body:not(.term-page) .mod-panel,body:not(.term-page) .auth-form{
    background:linear-gradient(152deg,rgba(24,22,34,.9),color-mix(in srgb,var(--accent2) 8%,rgba(20,18,28,.9)) 50%,color-mix(in srgb,var(--accent) 7%,rgba(20,18,28,.9)))}
  .cart-drawer{background:linear-gradient(155deg,rgba(15,14,22,.99),rgba(24,20,36,.98) 52%,color-mix(in srgb,var(--accent) 16%,rgba(15,14,22,.99)))}
}
/* Responsive scaling: images never overflow; fluid wrap; no horizontal scroll */
img{max-width:100%}
.wrap{width:100%}
@media(max-width:480px){.wrap{padding:0 15px}}
/* sections */
.wrap{max-width:1000px}
body{font-size:12px}