/* Liquid-glass theme for the customer site. Loaded after app.css by layouts/public.php and layouts/app.php only,
   so the admin panel keeps its own look. System fonts only: font CDNs are blocked or slow in mainland China.
   Everything here must leave the page usable when glass.js or GSAP is missing. */
html.glass {
    --bg: #000;
    --surface: #1a1230;
    --surface-2: #231940;
    --text: #f4f0ff;
    --muted: #aaa1c8;
    --border: rgba(226, 214, 255, .13);
    --primary: #a78bfa;
    --primary-dark: #8b5cf6;
    --primary-soft: rgba(139, 92, 246, .2);
    --brand-1: #8b5cf6;
    --brand-2: #e879a8;
    --danger: #fb7185;
    --success: #5eead4;
    --warning: #fcd34d;
    --radius: 24px;
    --radius-sm: 14px;
    --spring: cubic-bezier(.2, .9, .24, 1.12);
    --glide: cubic-bezier(.22, .8, .2, 1);
    --glass-blur: 26px;
    --glass-fill: linear-gradient(150deg, rgba(255, 255, 255, .115), rgba(255, 255, 255, .04) 42%, rgba(167, 139, 250, .075));
    --glass-depth:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        inset 1px 0 0 rgba(255, 255, 255, .07),
        inset 0 -1px 0 rgba(10, 2, 30, .5),
        inset 0 0 26px rgba(205, 180, 255, .05),
        0 2px 4px rgba(6, 1, 20, .3),
        0 28px 56px -22px rgba(6, 1, 22, .85);
    background: var(--bg);
    color-scheme: dark;
    scroll-behavior: smooth;
}
html.glass body { background: transparent; overflow-x: clip; }
html.glass [hidden] { display: none !important; }
html.glass a { color: #c7b4ff; }
html.glass :focus-visible { outline: 2px solid #d7c8ff; outline-offset: 2px; }
html.glass ::selection { background: rgba(167, 139, 250, .45); }
html.glass h1, html.glass h2, html.glass h3 { letter-spacing: -.018em; font-weight: 650; }
html.glass :lang(zh) h1, html.glass :lang(zh) h2 { letter-spacing: 0; }
html.glass * { scrollbar-width: thin; scrollbar-color: rgba(200, 180, 255, .28) transparent; }

/* Ambient light: cheap radial gradients instead of blur filters, and a little grain against banding */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #000; }
.orb { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.orb-a { width: 62vmax; height: 62vmax; left: -16vmax; top: -22vmax; background: radial-gradient(closest-side, rgba(124, 58, 237, .13), rgba(124, 58, 237, 0)); animation: drift-a 34s ease-in-out infinite alternate; }
.orb-b { width: 52vmax; height: 52vmax; right: -14vmax; top: 12vh; background: radial-gradient(closest-side, rgba(217, 70, 160, .07), rgba(217, 70, 160, 0)); animation: drift-b 42s ease-in-out infinite alternate; }
.orb-c { width: 58vmax; height: 58vmax; left: 22vw; bottom: -36vmax; background: radial-gradient(closest-side, rgba(79, 70, 229, .09), rgba(79, 70, 229, 0)); animation: drift-c 38s ease-in-out infinite alternate; }
.grain { position: absolute; inset: 0; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift-a { to { transform: translate3d(12vw, 9vh, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(-10vw, 14vh, 0) scale(.92); } }
@keyframes drift-c { to { transform: translate3d(-14vw, -10vh, 0) scale(1.08); } }
.glass-defs { position: absolute; width: 0; height: 0; }

/* The glass material */
.card, .sidebar, .topbar, .pubbar-inner, .auth-card, .mesh, .slab {
    background: var(--glass-fill);
    border: 1px solid rgba(232, 222, 255, .1);
    box-shadow: var(--glass-depth);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%);
}
/* Rim light: a 1px gradient ring brightest at the corner nearest the pointer. Sheen: soft reflection under the pointer. */
.card::before, .sidebar::before, .topbar::before, .pubbar-inner::before, .mesh::before, .slab::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, .78), rgba(216, 190, 255, .24) 38%, rgba(255, 255, 255, .05) 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card::after, .mesh::after, .slab::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--glide);
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 65%);
}
.card:hover::after, .mesh:hover::after, .slab:hover::after { opacity: 1; }
.card, .pubbar-inner, .mesh, .slab { position: relative; }
html.glass .order-panel, html.glass .character-stage { position: sticky; }
.card { padding: 24px; border-radius: var(--radius); }
.card > * { position: relative; }
a.card.stat { transition: border-color .3s, box-shadow .4s var(--glide); }
a.card.stat:hover { border-color: rgba(232, 222, 255, .1); box-shadow: var(--glass-depth), 0 0 0 1px rgba(167, 139, 250, .25), 0 22px 60px -18px rgba(124, 58, 237, .5); }
html.glass a.card.stat, html.glass a.slab { color: var(--text); }
/* A panel with an open menu must paint above the panels after it */
.card:has(details[open] .row-menu-items), .card:has(.row-menu[open]), .table-wrap:has(.row-menu[open]) { z-index: 20; }

/* Brand */
html.glass .brand { color: var(--text); font-weight: 650; }
html.glass .logo { border-radius: 12px; background: linear-gradient(150deg, #b794ff, #7c3aed 58%, #d6609f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(50, 10, 110, .45), 0 6px 16px -4px rgba(124, 58, 237, .7); text-shadow: 0 1px 2px rgba(40, 8, 90, .5); }

/* Floating public header */
html.glass .pubbar { position: sticky; top: 12px; z-index: 30; margin-top: 12px; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.glass .pubbar-inner { background: linear-gradient(150deg, rgba(38, 30, 58, .82), rgba(14, 10, 24, .86)); width: calc(100% - 32px); max-width: 1168px; min-height: 60px; padding: 8px 10px 8px 16px; border-radius: 22px; }
html.glass .nav { position: relative; gap: 6px; }
html.glass .nav > a:not(.btn) { padding: 7px 14px; border-radius: 12px; color: var(--text); transition: background .3s var(--glide), transform .4s var(--spring); }
html.glass .nav > a:not(.btn):hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
html.glass .nav-toggle, html.glass .nav-close { border-color: var(--border); background: rgba(255, 255, 255, .06); border-radius: 12px; color: var(--text); }

/* App shell: floating sidebar and top bar */
html.glass .shell { grid-template-columns: 262px minmax(0, 1fr); }
html.glass .sidebar { top: 14px; height: calc(100vh - 28px); margin: 14px 0 14px 14px; padding: 18px 12px; border-radius: 26px; color: var(--muted); }
html.glass .sidebar .brand { color: var(--text); }
html.glass .sidebar nav { position: relative; }
html.glass .sidebar nav a { position: relative; z-index: 1; color: var(--muted); border-radius: 13px; transition: color .25s; }
html.glass .sidebar nav a .icon { transition: transform .5s var(--spring); }
html.glass .sidebar nav a:hover { background: rgba(255, 255, 255, .055); color: var(--text); }
html.glass .sidebar nav a:hover .icon { transform: translateX(2px) scale(1.08); }
html.glass .sidebar nav a.active { background: linear-gradient(120deg, rgba(167, 139, 250, .27), rgba(232, 121, 168, .1)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -10px rgba(124, 58, 237, .8); }
html.glass .sidebar nav a.active .icon { color: #d6c6ff; }
/* With JS one glass bead slides between items instead of each item lighting up on its own */
html.glass .sidebar nav.has-bead a:hover, html.glass .sidebar nav.has-bead a.active { background: none; box-shadow: none; }
.nav-bead { position: absolute; left: 0; right: 0; top: 0; z-index: 0; border-radius: 13px; pointer-events: none; background: linear-gradient(120deg, rgba(167, 139, 250, .3), rgba(232, 121, 168, .11)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(20, 5, 50, .4), 0 8px 22px -10px rgba(124, 58, 237, .85); }
html.glass .topbar { background: linear-gradient(150deg, rgba(38, 30, 58, .82), rgba(14, 10, 24, .86)); top: 14px; z-index: 20; min-height: 60px; margin: 14px 14px 0; padding: 0 12px 0 18px; border-radius: 22px; }
html.glass .content { max-width: 1320px; padding: 20px 14px 48px; }
html.glass .balance { background: rgba(167, 139, 250, .16); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .45s var(--spring), background .3s; }
html.glass .balance:hover { filter: none; background: rgba(167, 139, 250, .25); transform: translateY(-1px); }
html.glass .icon-link:hover { background: rgba(255, 255, 255, .08); }
html.glass .badge { background: #e8548f; border-color: #1a1230; }
html.glass .username { color: var(--text); }

/* Buttons: flat pearl keys, no gradients or glow. A hard lower edge makes them physical keys that press down. On hover,
   flat ink floods in from where the pointer entered (--bx/--by, set by glass.js; the centre without it). All of it lives
   on the element and its pseudo-elements, because app.js rewrites button text directly. */
html.glass .btn {
    --face: #f2eefb; --label: #140a26; --edge: #a99ccc; --ink: #6a38f2; --ink-label: #fff; --ink-edge: #3c1ca6; --depth: 3px;
    position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: 11px; font-weight: 620; letter-spacing: -.006em; text-shadow: none;
    color: var(--label); background: var(--face); filter: none;
    box-shadow: 0 var(--depth) 0 var(--edge);
    transition: color .28s var(--glide), background-color .28s, box-shadow .16s var(--glide), transform .16s var(--glide), opacity .2s;
}
html.glass .btn-sm { --depth: 2px; border-radius: 9px; }
html.glass .btn-lg { --depth: 4px; border-radius: 13px; }
html.glass .btn::before {
    content: ""; position: absolute; z-index: -1; left: var(--bx, 50%); top: var(--by, 50%); width: 230%; aspect-ratio: 1; border-radius: 50%;
    background: var(--ink); transform: translate(-50%, -50%) scale(0); transition: transform .6s cubic-bezier(.2, .75, .2, 1); pointer-events: none;
}
html.glass .btn::after { content: none; }
html.glass .btn .icon { transition: transform .45s var(--spring); }
html.glass .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html.glass .btn:active { transform: translateY(var(--depth)); box-shadow: 0 0 0 var(--edge); }
html.glass .btn:hover { background: var(--face); filter: none; text-decoration: none; color: var(--label); box-shadow: 0 var(--depth) 0 var(--edge); }
html.glass .btn:active:hover { box-shadow: 0 0 0 var(--edge); }
@media (hover: hover) {
    html.glass .btn:not([disabled]):hover { color: var(--ink-label); box-shadow: 0 var(--depth) 0 var(--ink-edge); }
    html.glass .btn:not([disabled]):active:hover { box-shadow: 0 0 0 var(--ink-edge); }
    html.glass .btn:not([disabled]):hover::before { transform: translate(-50%, -50%) scale(1); }
    html.glass .btn:not([disabled]):hover .icon { transform: translateX(3px); }
}
html.glass .btn[disabled] { opacity: .42; transform: none; box-shadow: none; }
/* Secondary: an empty outline that fills with pearl */
html.glass .btn-outline, html.glass .btn-ghost, html.glass .btn-outline:hover, html.glass .btn-ghost:hover {
    --label: var(--text); --ink: #f2eefb; --ink-label: #140a26; --depth: 0px; background: transparent; box-shadow: inset 0 0 0 1px rgba(242, 238, 251, .3);
}
html.glass .btn-outline:not([disabled]):hover, html.glass .btn-ghost:not([disabled]):hover, html.glass .btn-outline:not([disabled]):active:hover, html.glass .btn-ghost:not([disabled]):active:hover { box-shadow: inset 0 0 0 1px #f2eefb; }
html.glass .btn-outline:active, html.glass .btn-ghost:active { transform: scale(.98); }
html.glass .btn-danger, html.glass .btn-danger:hover { --label: #ff9db0; --ink: #d92f5b; --ink-label: #fff; --depth: 0px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 157, 176, .5); }
html.glass .btn-danger:not([disabled]):hover, html.glass .btn-danger:not([disabled]):active:hover { box-shadow: inset 0 0 0 1px #d92f5b; }
html.glass button.link { color: #c7b4ff; }
/* In the catalog a column of solid keys would shout, so each row's key stays an outline until that row is hovered */
html.glass .svc-cards .btn-sm { --face: transparent; --label: var(--text); --depth: 0px; box-shadow: inset 0 0 0 1px rgba(242, 238, 251, .3); }
html.glass .svc-cards .btn-sm:not([disabled]):hover { box-shadow: none; }
html.glass .svc-cards tr:hover .btn-sm { --face: #f2eefb; --label: #140a26; box-shadow: none; }

/* Fields */
html.glass .input {
    border-radius: var(--radius-sm); border: 1px solid rgba(232, 222, 255, .14); color: var(--text);
    background-color: rgba(12, 6, 28, .42);
    box-shadow: inset 0 2px 5px rgba(5, 0, 18, .45), inset 0 -1px 0 rgba(255, 255, 255, .06);
    transition: border-color .25s, box-shadow .3s var(--glide), background-color .25s;
}
html.glass .input::placeholder { color: #8d84ab; }
html.glass .input:hover { border-color: rgba(232, 222, 255, .26); }
html.glass .input:focus { border-color: rgba(190, 165, 255, .85); background-color: rgba(12, 6, 28, .58); box-shadow: inset 0 2px 5px rgba(5, 0, 18, .45), 0 0 0 4px rgba(167, 139, 250, .17), 0 8px 26px -10px rgba(139, 92, 246, .7); }
html.glass select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c7b4ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html.glass select.input option { background: #1a1230; color: var(--text); }
html.glass input[type="checkbox"], html.glass input[type="radio"] { accent-color: #9f7cff; }
html.glass input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 40px #1f1538 inset; caret-color: var(--text); }

/* Glass dropdown (glass.js builds it on top of the native select, which stays in the form) */
.gsel { position: relative; flex: 1; min-width: 140px; width: 100%; }
.gsel > select.gsel-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.gsel-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.gsel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsel-btn svg { flex-shrink: 0; color: #c7b4ff; transition: transform .45s var(--spring); }
.gsel-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.gsel-panel {
    position: fixed; z-index: 90; max-height: min(340px, 50vh); overflow-y: auto; padding: 6px; border-radius: 18px; margin: 0; list-style: none; transform-origin: 50% 0;
    background: linear-gradient(155deg, rgba(58, 40, 104, .84), rgba(28, 18, 56, .9)); border: 1px solid rgba(232, 222, 255, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 30px 70px -20px rgba(4, 0, 16, .95);
    -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
}
.gsel-panel li { padding: 8px 12px; border-radius: 11px; cursor: pointer; color: var(--text); font-size: .94rem; }
.gsel-panel li.is-focus { background: rgba(255, 255, 255, .1); }
.gsel-panel li[aria-selected="true"] { background: linear-gradient(120deg, rgba(167, 139, 250, .38), rgba(232, 121, 168, .14)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.gsel-panel li[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Tables */
html.glass .table-wrap { border-radius: var(--radius); background: var(--glass-fill); border: 1px solid rgba(232, 222, 255, .12); box-shadow: var(--glass-depth); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%); backdrop-filter: blur(var(--glass-blur)) saturate(165%); }
html.glass .card .table-wrap { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.glass .table thead th { background: rgba(255, 255, 255, .045); color: var(--muted); }
html.glass .table tbody tr:hover td { background: rgba(255, 255, 255, .045); }
html.glass .table td, html.glass .table th { border-bottom-color: rgba(232, 222, 255, .08); }
html.glass .category-row td { background: rgba(167, 139, 250, .1); }
html.glass tr.current td { background: var(--primary-soft); }
html.glass pre, html.glass .copy-row code { background: rgba(10, 5, 24, .5); border-color: var(--border); }

/* Small parts */
html.glass .tag { background: rgba(167, 139, 250, .17); color: #dccfff; border-radius: 999px; }
html.glass .tag.muted { background: rgba(255, 255, 255, .07); color: var(--muted); }
html.glass .status { background: rgba(255, 255, 255, .08); color: var(--muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
html.glass .status-completed, html.glass .status-paid, html.glass .status-answered, html.glass .status-resolved { background: rgba(45, 212, 191, .15); color: #7ff0dc; }
html.glass .status-partial, html.glass .status-customer_reply, html.glass .status-awaiting_customer { background: rgba(251, 191, 36, .14); color: #fcd978; }
html.glass .status-canceled, html.glass .status-failed, html.glass .status-expired, html.glass .status-rejected, html.glass .status-error, html.glass .status-fail { background: rgba(251, 113, 133, .15); color: #fda4b4; }
html.glass .status-in_progress, html.glass .status-processing, html.glass .status-open, html.glass .status-awaiting_support { background: rgba(167, 139, 250, .2); color: #d6c8ff; }
html.glass .alert { border-radius: 16px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
html.glass .alert-success { background: rgba(45, 212, 191, .13); border-color: rgba(94, 234, 212, .3); color: #a7f5e6; }
html.glass .alert-error { background: rgba(251, 113, 133, .14); border-color: rgba(251, 113, 133, .36); color: #fecdd6; }
html.glass .alert-info { background: rgba(167, 139, 250, .15); border-color: rgba(167, 139, 250, .36); color: #e2d8ff; }
html.glass .alert-warning { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .3); color: #fde9a8; }
html.glass .level-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
html.glass .level-bronze { background: rgba(217, 140, 80, .17); color: #f3bd8e; border-color: rgba(217, 140, 80, .45); }
html.glass .level-silver { background: rgba(220, 220, 240, .13); color: #e3e3f2; border-color: rgba(220, 220, 240, .4); }
html.glass .level-gold { background: rgba(250, 204, 21, .14); color: #fde582; border-color: rgba(250, 204, 21, .45); }
html.glass .progress { background: rgba(8, 3, 22, .55); border-color: rgba(232, 222, 255, .1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
html.glass .progress span { background: linear-gradient(90deg, #8b5cf6, #d57bd8); box-shadow: 0 0 10px rgba(167, 139, 250, .55); border-radius: inherit; }
html.glass .list-item, html.glass .faq details { border-bottom-color: rgba(232, 222, 255, .09); }
html.glass .message { background: var(--glass-fill); border-color: rgba(232, 222, 255, .12); border-radius: 20px; box-shadow: var(--glass-depth); }
html.glass .message.mine { background: linear-gradient(150deg, rgba(167, 139, 250, .26), rgba(167, 139, 250, .1)); }
html.glass .message.staff { border-left-color: #c7b4ff; }
html.glass .steps .step, html.glass .feature-icon { background: linear-gradient(150deg, rgba(190, 165, 255, .36), rgba(124, 58, 237, .16)); color: #e8dfff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 5px rgba(40, 8, 90, .35), 0 10px 20px -10px rgba(124, 58, 237, .9); border-radius: 14px; }
html.glass .lang-switch summary { border-radius: 12px; background: rgba(255, 255, 255, .07); border-color: rgba(232, 222, 255, .15); transition: background .25s; }
html.glass .lang-switch summary:hover { background: rgba(255, 255, 255, .13); }
html.glass .lang-menu, html.glass .row-menu-items { background: #241a42; border-color: rgba(232, 222, 255, .2); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 26px 60px -18px rgba(4, 0, 16, .95); transform-origin: 90% 0; animation: pop-open .42s var(--spring); }
html.glass .lang-menu { z-index: 40; }
html.glass .lang-menu a, html.glass .row-menu-items a, html.glass .row-menu-items button.link { border-radius: 10px; }
html.glass .lang-menu a.active, html.glass .lang-menu a:hover, html.glass .row-menu-items a:hover, html.glass .row-menu-items button.link:hover { background: rgba(255, 255, 255, .1); }
@keyframes pop-open { from { opacity: 0; transform: perspective(600px) translateY(-8px) rotateX(-14deg) scale(.95); } }
html.glass .footer { background: none; border-top: 0; }
html.glass .footer-inner { padding: 24px 28px; border-radius: 26px; background: var(--glass-fill); box-shadow: var(--glass-depth); }
html.glass .main-public { padding-top: 12px; }
html.glass .auth-card { margin-top: 7vh; padding: 36px; border-radius: 30px; }
html.glass .tabs { position: relative; padding: 4px; border-radius: 16px; background: rgba(10, 5, 24, .38); border-color: rgba(232, 222, 255, .12); box-shadow: inset 0 2px 5px rgba(5, 0, 18, .4); }
html.glass .tabs a { position: relative; z-index: 1; border-radius: 12px; transition: color .25s; }
html.glass .tabs a.active { color: #140a26; background: #f2eefb; box-shadow: none; }
html.glass .tabs.has-bead a.active { background: none; box-shadow: none; color: #140a26; }
.tabs .nav-bead { right: auto; bottom: auto; border-radius: 12px; background: #f2eefb; box-shadow: none; }
.error-page h1 { background: linear-gradient(135deg, #e4d8ff, #a78bfa 60%, #e879a8) !important; -webkit-background-clip: text !important; background-clip: text !important; }

/* FAQ, panels */
html.glass .faq summary { transition: color .25s; }
html.glass .faq summary:hover { color: #d7c8ff; }
html.glass .faq summary::after { transition: transform .5s var(--spring); }
html.glass .faq details[open] summary::after { transform: rotate(180deg); }

/* Homepage: hero */
.gl-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 28px; min-height: calc(100vh - 110px); padding: 26px 0 40px; }
html.glass .eyebrow { padding: 6px 14px; color: #e0d4ff; background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.gl-title { margin: 20px 0; font-size: clamp(2.5rem, 5.5vw, 5.1rem); line-height: 1.03; font-weight: 680; letter-spacing: -.04em; overflow-wrap: break-word; background: linear-gradient(176deg, #fff 22%, #dccdff 62%, #b596f7 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.glass :lang(ru) .gl-title { font-size: clamp(2.2rem, 4.4vw, 4.1rem); }
html.glass :lang(zh) .gl-title { letter-spacing: .005em; line-height: 1.14; }
html.glass .lead { max-width: 560px; margin: 0 0 30px; color: #c4bbdd; opacity: 1; font-size: 1.1rem; }
.gl-ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 30px; color: var(--muted); font-size: .9rem; }
.gl-ticks span { display: inline-flex; align-items: center; gap: 7px; }
.gl-ticks .icon { color: #c7b4ff; }
.gl-stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin: 0 auto; perspective: 1200px; }
.gl-sphere { position: absolute; inset: -6%; width: 112%; height: 112%; pointer-events: none; background: radial-gradient(closest-side, rgba(124, 58, 237, .12) 20%, rgba(124, 58, 237, 0) 100%); }
.stage-layer { position: absolute; will-change: transform; }
.layer-a { left: -3%; top: 13%; }
.layer-b { right: -3%; top: 40%; }
.layer-c { left: 12%; bottom: 7%; }
.mesh { width: clamp(148px, 15vw, 196px); padding: 18px 20px; border-radius: 24px; transform-style: preserve-3d; color: #fff; -webkit-backdrop-filter: blur(9px) saturate(170%); backdrop-filter: blur(9px) saturate(170%); }
.mesh span { position: relative; display: block; font-size: .82rem; font-weight: 500; opacity: .86; }
.mesh strong { position: relative; display: block; margin-top: 18px; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mesh-violet { background: radial-gradient(120% 110% at 90% 0%, rgba(120, 90, 255, .72), transparent 62%), radial-gradient(100% 120% at 0% 100%, rgba(186, 104, 240, .44), transparent 60%), rgba(36, 22, 80, .35); }
.mesh-rose { background: radial-gradient(120% 110% at 100% 100%, rgba(236, 110, 170, .6), transparent 62%), radial-gradient(100% 120% at 0% 0%, rgba(134, 92, 246, .55), transparent 60%), rgba(40, 18, 70, .35); }
/* The light tile from the reference. Dark text; the tint stays pale enough to hold 4.5:1. */
.mesh-pearl { color: #22123f; background: radial-gradient(90% 90% at 0% 0%, rgba(255, 255, 255, .95), transparent 70%), radial-gradient(100% 100% at 100% 15%, rgba(243, 205, 240, .95), transparent 72%), radial-gradient(110% 100% at 45% 100%, rgba(208, 192, 255, .95), transparent 75%), rgba(236, 226, 255, .82); box-shadow: inset 0 1px 0 #fff, inset 0 -8px 16px rgba(150, 110, 230, .2), 0 30px 60px -20px rgba(140, 90, 240, .55); }
.mesh-pearl span { opacity: 1; color: #3f2c63; }

/* Homepage: standing glass slabs */
.gl-rack-section { padding-bottom: 28px; }
.rack { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 20px 6px; list-style: none; perspective: 1300px; perspective-origin: 50% 40%; }
.rack-item { min-width: 0; }
.rack-item:nth-child(1) { --ry: 22deg; --tz: -30px; }
.rack-item:nth-child(2) { --ry: 13deg; --tz: -10px; }
.rack-item:nth-child(3) { --ry: 5deg; --tz: 0px; }
.rack-item:nth-child(4) { --ry: -5deg; --tz: 0px; }
.rack-item:nth-child(5) { --ry: -13deg; --tz: -10px; }
.rack-item:nth-child(6) { --ry: -22deg; --tz: -30px; }
.slab {
    display: flex; flex-direction: column; align-items: flex-start; height: 100%; min-height: 228px; padding: 18px 16px; border-radius: 24px; overflow: hidden; text-decoration: none;
    transform: rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
    background: linear-gradient(160deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .04) 38%, color-mix(in srgb, var(--tint) 13%, transparent));
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .34), inset -1px -1px 0 rgba(255, 255, 255, .08), inset 0 -22px 34px -24px color-mix(in srgb, var(--tint) 60%, transparent), 3px 3px 0 -1px rgba(226, 214, 255, .08), 0 34px 56px -24px rgba(5, 0, 20, .9);
    transition: transform .85s var(--spring), box-shadow .6s var(--glide), background .6s var(--glide);
    -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
}
.slab:hover { text-decoration: none; }
.slab:hover, .slab:focus-visible, .slab.is-lit { transform: rotateY(0deg) translateY(-12px) translateZ(46px); background: linear-gradient(160deg, rgba(255, 255, 255, .28), color-mix(in srgb, var(--tint) 24%, transparent) 46%, color-mix(in srgb, var(--tint) 36%, transparent)); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), inset -1px -1px 0 rgba(255, 255, 255, .18), inset 0 -26px 36px -22px color-mix(in srgb, var(--tint) 85%, transparent), 0 40px 60px -22px color-mix(in srgb, var(--tint) 45%, #05001a); }
.slab-glyph { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: auto; border-radius: 21px; background: radial-gradient(90% 80% at 30% 15%, rgba(255, 255, 255, .34), transparent 60%), color-mix(in srgb, var(--tint) 34%, rgba(30, 16, 60, .55)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -5px 10px rgba(16, 4, 44, .42), 0 14px 22px -10px color-mix(in srgb, var(--tint) 65%, #05001a); transition: transform .85s var(--spring); }
.slab:hover .slab-glyph, .slab.is-lit .slab-glyph { transform: translateY(-3px) scale(1.06); }
.slab-glyph svg { overflow: visible; }
.slab-name { position: relative; margin-top: 26px; font-size: 1.04rem; font-weight: 640; }
.slab-meta { position: relative; color: #c6bddd; font-size: .82rem; }

/* Homepage: the slabs as a rotating ring (glass.js adds .is-ring; without it they stay the grid above). Items are placed
   per frame in 3D, so no backdrop blur here: back cards show through the front ones, as they would through real glass. */
.gl-rack-section:has(.is-ring) { perspective: 1250px; perspective-origin: 50% 46%; }
.rack.is-ring { display: block; position: relative; height: 380px; padding: 0; margin: 10px 0 0; perspective: none; transform-style: preserve-3d; touch-action: pan-y; cursor: grab; }
.is-ring .rack-item { position: absolute; top: 28px; left: 50%; width: clamp(190px, 18vw, 240px); height: 310px; transform-style: preserve-3d; will-change: transform, opacity; }
.is-ring .slab { min-height: 0; padding: 22px 20px; border-radius: 28px; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .03) 40%, color-mix(in srgb, var(--tint) 15%, transparent)), rgba(22, 12, 46, .42); }
.is-ring .slab:hover { transform: none; }
.is-ring .slab.is-lit, .is-ring .slab.is-lit:hover, .is-ring .slab:focus-visible { transform: translateY(-8px) translateZ(34px);
    background: linear-gradient(160deg, rgba(255, 255, 255, .3), color-mix(in srgb, var(--tint) 24%, transparent) 46%, color-mix(in srgb, var(--tint) 40%, transparent)), rgba(30, 16, 62, .55); }
.is-ring .slab > * { transition: opacity .45s var(--glide), transform .85s var(--spring); }
.is-ring .is-back .slab > * { opacity: 0; }
.is-ring .slab-glyph { width: 82px; height: 82px; border-radius: 25px; }
.is-ring .slab-glyph svg { width: 52px; height: 52px; }
.is-ring .slab-name { font-size: 1.28rem; }
.is-ring .slab-meta { font-size: .88rem; }
.ring-dots { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.ring-dots button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.ring-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: rgba(226, 214, 255, .28); transition: width .6s var(--spring), background .3s; }
.ring-dots button:hover::before { background: rgba(226, 214, 255, .6); }
.ring-dots button.active::before { width: 22px; background: linear-gradient(90deg, #b794ff, #e0a0d8); box-shadow: 0 0 10px rgba(167, 139, 250, .7); }
@media (max-width: 860px) {
    .rack.is-ring { height: 280px; }
    .is-ring .rack-item { top: 18px; width: 164px; height: 232px; }
    .is-ring .slab { padding: 16px; border-radius: 22px; }
    .is-ring .slab-glyph { width: 62px; height: 62px; border-radius: 19px; }
    .is-ring .slab-glyph svg { width: 38px; height: 38px; }
    .is-ring .slab-name { font-size: 1.05rem; margin-top: 14px; }
}

/* Ambient motion. Floats use the separate `translate` property, so they add to GSAP's transforms instead of fighting them. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.scene-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.rise-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.rise-part { display: inline-block; }
/* A light that travels round the rim */
.mesh:hover::before, .is-ring .slab.is-lit::before, .feature:hover::before, .stat:hover::before, .steps > .card:hover::before {
    background: conic-gradient(from var(--spin), rgba(255, 255, 255, 0) 0 62%, rgba(226, 208, 255, .55) 78%, #fff 88%, rgba(255, 196, 232, .6) 93%, rgba(255, 255, 255, 0) 100%), radial-gradient(420px circle at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, .5), rgba(216, 190, 255, .18) 40%, rgba(255, 255, 255, .05) 72%);
    animation: rim-spin 6s linear infinite;
}
.feature:hover::before, .stat:hover::before, .steps > .card:hover::before { animation-duration: 2.6s; }
@keyframes rim-spin { to { --spin: 360deg; } }
/* A diagonal glint as a card arrives */
html.glass .card.glint::after { opacity: 1; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, 0) 62%) no-repeat; background-size: 260% 100%; animation: glint 1.4s var(--glide) both; }
@keyframes glint { from { background-position: 120% 0; } to { background-position: -30% 0; } }
/* Everything drifts on its own rhythm; a hovered card holds still */
@media (hover: hover) {
    .feature, .steps > .card, .stats .stat { animation: drift-card 7s ease-in-out infinite alternate; }
    .grid > :nth-child(2).feature, .steps > .card:nth-of-type(2), .stats .stat:nth-child(2) { animation-delay: -2.4s; animation-duration: 8.2s; }
    .grid > :nth-child(3).feature, .steps > .card:nth-of-type(3), .stats .stat:nth-child(3) { animation-delay: -4.6s; animation-duration: 6.4s; }
    .grid > :nth-child(4).feature, .steps > .card:nth-of-type(4), .stats .stat:nth-child(4) { animation-delay: -1.2s; animation-duration: 9s; }
    .feature:hover, .steps > .card:hover, .stats .stat:hover { animation-play-state: paused; }
}
/* Drifting cards skip the backdrop blur: on black it's nearly invisible, and re-blurring moving glass every frame is the costliest thing here */
.feature, .steps > .card, .stats .stat { -webkit-backdrop-filter: none; backdrop-filter: none; }
@keyframes drift-card { from { translate: 0 3px; } to { translate: 0 -4px; } }
.home-avatar { animation: bob 6s ease-in-out infinite alternate; }
.is-ring .slab.is-lit .slab-glyph, .feature-icon { animation: bob 3.4s ease-in-out infinite alternate; }
.feature:nth-child(2) .feature-icon { animation-delay: -1s; }
.feature:nth-child(3) .feature-icon { animation-delay: -2s; }
.feature:nth-child(4) .feature-icon { animation-delay: -2.8s; }
@keyframes bob { from { translate: 0 2px; } to { translate: 0 -4px; } }
/* Small signals */
html.glass .badge::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 1px solid #e8548f; animation: ping 2.4s var(--glide) infinite; pointer-events: none; }
@keyframes ping { from { transform: scale(1); opacity: .9; } 70%, to { transform: scale(1.9); opacity: 0; } }
html.glass .alert { animation: alert-in .8s var(--spring) both; }
@keyframes alert-in { from { opacity: 0; transform: perspective(700px) translateY(-14px) rotateX(-16deg); } }
html.glass .progress span { position: relative; overflow: hidden; }
html.glass .progress span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); transform: translateX(-100%); animation: run 3.2s var(--glide) infinite; }
@keyframes run { 60%, to { transform: translateX(100%); } }
/* "How it works" line */
html.glass .steps { position: relative; padding-top: 26px; }
.steps-line { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: rgba(226, 214, 255, .1); overflow: hidden; }
.steps-line i { display: block; height: 100%; background: #f2eefb; transform-origin: 0 50%; }
html.glass .steps .step { transition: background .4s, color .3s, transform .7s var(--spring), box-shadow .4s; }
html.glass .steps .step.on { background: #f2eefb; color: #140a26; box-shadow: 0 3px 0 #a99ccc; transform: scale(1.1); }
@media (max-width: 860px) { .steps-line { display: none; } html.glass .steps { padding-top: 0; } }

/* Service catalog */
html.glass .page-head .input[type="search"] { max-width: 340px; }
.cat-pills { display: flex; gap: 8px; margin: 0 0 18px; padding: 6px 2px 12px; overflow-x: auto; scrollbar-width: none; }
.cat-pills::-webkit-scrollbar { display: none; }
html.glass .cat-pills a { flex-shrink: 0; padding: 9px 16px; border-radius: 15px; color: #d6cdf0; font-size: .92rem; font-weight: 520; white-space: nowrap; text-decoration: none; background: linear-gradient(170deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035)); border: 1px solid rgba(232, 222, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 20px -14px rgba(5, 0, 20, .95); transition: transform .5s var(--spring), background .35s, color .25s, box-shadow .35s; }
html.glass .cat-pills a:hover { transform: translateY(-2px); color: #fff; }
html.glass .cat-pills a.active { color: #140a26; border-color: #f2eefb; background: #f2eefb; box-shadow: none; }
/* The services table keeps its markup (app.js filters its rows); each row is laid out as a card. Solid-tint cards, no
   backdrop blur: the catalog can run to hundreds of rows. */
html.glass .svc-cards { overflow: visible; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.svc-cards .table, .svc-cards thead, .svc-cards tbody { display: block; }
.svc-cards thead tr { padding: 0 8px; }
.svc-cards tr { display: grid; grid-template-columns: 62px minmax(0, 1fr) 104px 132px minmax(0, 228px) 84px; align-items: center; column-gap: 12px; }
html.glass .svc-cards thead th { display: block; padding: 4px 8px 10px; background: none; border: 0; }
html.glass .svc-cards td { display: block; padding: 6px 8px; background: none !important; border: 0; min-width: 0; }
.svc-cards tbody tr:not(.category-row) { margin-bottom: 8px; padding: 8px; border-radius: 18px; background: linear-gradient(150deg, rgba(255, 255, 255, .082), rgba(255, 255, 255, .026)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 0 0 1px rgba(232, 222, 255, .065), 0 14px 26px -22px rgba(5, 0, 20, .95); content-visibility: auto; contain-intrinsic-size: auto 66px; transition: transform .55s var(--spring), background .3s, box-shadow .35s; }
.svc-cards tbody tr:not(.category-row):hover { transform: translateY(-2px) scale(1.004); background: linear-gradient(150deg, rgba(167, 139, 250, .17), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(200, 180, 255, .17), 0 20px 34px -22px rgba(124, 58, 237, .95); }
.svc-cards .category-row { display: block; scroll-margin-top: 92px; }
html.glass .svc-cards .category-row td { display: block; padding: 22px 8px 10px; font-size: 1.1rem; font-weight: 650; color: #efe9ff; }
.svc-cards .svc-price { font-size: 1.06rem; font-weight: 680; color: #fff; font-variant-numeric: tabular-nums; }
.svc-cards details summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.cat-off { display: none !important; }

/* Order page */
html.glass .catalog { padding: 16px; }
html.glass .svc-list { border-top-color: rgba(232, 222, 255, .1); scrollbar-gutter: stable; }
html.glass .svc-cat { background: #1f1639; border-radius: 10px; margin: 6px 0 4px; padding: 7px 10px; color: #e2d8ff; z-index: 2; }
html.glass .svc-item { margin: 3px 2px; padding: 10px; border: 0; border-radius: 13px; transition: background .25s, box-shadow .3s var(--glide), transform .5s var(--spring); }
html.glass .svc-item:hover, html.glass .svc-item:focus { background: rgba(255, 255, 255, .065); transform: translateX(2px); }
html.glass .svc-item:focus-visible { outline: 2px solid #d7c8ff; outline-offset: -2px; }
html.glass .svc-item.selected { background: linear-gradient(115deg, rgba(167, 139, 250, .3), rgba(232, 121, 168, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(200, 180, 255, .2), 0 10px 22px -14px rgba(124, 58, 237, .9); }
html.glass .svc-rate { color: #fff; }
html.glass .fav { transition: transform .5s var(--spring); }
html.glass .fav:hover { transform: scale(1.25); }
html.glass .fav.on { color: #f2a7cb; }
html.glass .order-panel { top: 88px; }
html.glass .order-panel .table { margin: 10px 0; }
html.glass .charge { padding: 14px 16px; border-radius: 16px; background: rgba(10, 5, 24, .4); box-shadow: inset 0 2px 5px rgba(5, 0, 18, .4), inset 0 -1px 0 rgba(255, 255, 255, .06); }
html.glass .charge strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; color: #fff; }
#f-fields { display: flex; flex-direction: column; gap: 16px; }

/* Customer dashboard: mesh tiles as in the reference */
html.glass .home-hero { background: radial-gradient(620px 320px at 0% 0%, rgba(139, 92, 246, .26), transparent 70%), radial-gradient(520px 300px at 100% 100%, rgba(232, 121, 168, .13), transparent 70%), var(--glass-fill); }
html.glass .home-avatar .avatar-svg { border-color: rgba(255, 255, 255, .22); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 44px -14px rgba(124, 58, 237, .75); }
.home-hero + .grid.stats .stat, .home-hero ~ .alert + .grid.stats .stat { min-height: 116px; }
.home-hero + .stats .stat:nth-child(1), .home-hero ~ .alert + .stats .stat:nth-child(1) { background: radial-gradient(120% 120% at 90% 0%, rgba(120, 90, 255, .55), transparent 62%), radial-gradient(100% 120% at 0% 100%, rgba(186, 104, 240, .28), transparent 60%), rgba(36, 22, 80, .3); }
.home-hero + .stats .stat:nth-child(2), .home-hero ~ .alert + .stats .stat:nth-child(2) { background: radial-gradient(90% 90% at 0% 0%, rgba(255, 255, 255, .95), transparent 70%), radial-gradient(100% 100% at 100% 15%, rgba(243, 205, 240, .95), transparent 72%), radial-gradient(110% 100% at 45% 100%, rgba(208, 192, 255, .95), transparent 75%), rgba(236, 226, 255, .82); }
.home-hero + .stats .stat:nth-child(2) strong, .home-hero ~ .alert + .stats .stat:nth-child(2) strong { color: #22123f; }
.home-hero + .stats .stat:nth-child(2) span, .home-hero ~ .alert + .stats .stat:nth-child(2) span { color: #3f2c63; }
.home-hero + .stats .stat:nth-child(3), .home-hero ~ .alert + .stats .stat:nth-child(3) { background: radial-gradient(120% 120% at 100% 100%, rgba(236, 110, 170, .42), transparent 62%), radial-gradient(100% 120% at 0% 0%, rgba(134, 92, 246, .42), transparent 60%), rgba(40, 18, 70, .3); }
.home-hero + .stats .stat:nth-child(4), .home-hero ~ .alert + .stats .stat:nth-child(4) { background: radial-gradient(120% 120% at 0% 100%, rgba(100, 110, 250, .46), transparent 62%), radial-gradient(100% 110% at 100% 0%, rgba(200, 130, 240, .3), transparent 60%), rgba(26, 20, 70, .3); }
html.glass .stat strong { font-size: 1.8rem; font-weight: 650; }

/* Slide-in panels */
@media (max-width: 860px) {
    html.glass { --glass-blur: 16px; }
    html.glass .shell { grid-template-columns: 1fr; }
    html.glass .sidebar { position: fixed; inset: 10px auto 10px 10px; top: 10px; height: auto; width: 280px; margin: 0; transform: translateX(calc(-100% - 20px)) rotateY(14deg); transform-origin: 0 50%; transition: transform .7s var(--spring); background: linear-gradient(150deg, rgba(58, 40, 104, .88), rgba(24, 15, 48, .92)); }
    html.glass .sidebar.open { transform: none; }
    html.glass .topbar { margin: 10px 10px 0; top: 10px; padding: 0 8px; }
    html.glass .content { padding: 16px 10px 40px; }
    html.glass .pubbar-inner { padding: 8px 8px 8px 14px; }
    html.glass .nav { padding-bottom: 6px; }
    html.glass .nav.open { display: flex; animation: pop-open .5s var(--spring); }
    html.glass .card { padding: 18px; }
    .gl-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 22px; }
    .gl-stage { max-width: 440px; }
    .gl-sphere { inset: 0; width: 100%; height: 100%; }
    html.glass .order-panel, html.glass .character-stage { position: static; }
    .layer-a { left: 0; }
    .layer-b { right: 0; }
    .rack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 6px 0; }
    .rack-item { --ry: 0deg !important; --tz: 0px !important; }
    .slab { min-height: 158px; padding: 12px; border-radius: 20px; }
    .slab-glyph { width: 52px; height: 52px; border-radius: 16px; }
    .slab-glyph svg { width: 32px; height: 32px; }
    .slab-name { margin-top: 14px; font-size: .92rem; }
    .slab:hover, .slab.is-lit { transform: translateY(-4px); }
    .svc-cards thead { display: none; }
    .svc-cards tr { grid-template-columns: auto minmax(0, 1fr) auto; }
    html.glass .svc-cards td { padding: 3px 6px; }
    .svc-cards tbody tr:not(.category-row) { contain-intrinsic-size: auto 140px; }
    .svc-cards td:nth-child(2) { grid-column: 2 / -1; }
    .svc-cards td:nth-child(5) { grid-column: 1 / -1; }
    .svc-cards td:nth-child(6) { grid-column: 3; grid-row: 2; }
    .svc-cards td:nth-child(3) { grid-column: 1 / 3; }
    .svc-cards td:nth-child(4) { grid-column: 1 / -1; color: var(--muted); font-size: .86rem; }
    html.glass .page-head .input[type="search"] { max-width: none; }
}
@media (max-width: 480px) {
    .mesh { width: 134px; padding: 13px 14px; border-radius: 19px; }
    .mesh span { font-size: .74rem; }
    .mesh strong { margin-top: 10px; font-size: 1.28rem; }
    html.glass .hero-actions .btn { flex: 1 1 100%; }
    html.glass .auth-card { padding: 26px 18px; }
}

/* Soft page changes between pages, where the browser supports them. The chrome and the light stay put. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .scene { view-transition-name: glass-scene; }
    .sidebar { view-transition-name: glass-sidebar; }
    .topbar { view-transition-name: glass-topbar; }
    .pubbar { view-transition-name: glass-pubbar; }
    ::view-transition-group(glass-scene), ::view-transition-group(glass-sidebar), ::view-transition-group(glass-topbar), ::view-transition-group(glass-pubbar) { animation: none; z-index: 2; }
    ::view-transition-old(glass-scene), ::view-transition-new(glass-scene), ::view-transition-old(glass-sidebar), ::view-transition-new(glass-sidebar), ::view-transition-old(glass-topbar), ::view-transition-new(glass-topbar), ::view-transition-old(glass-pubbar), ::view-transition-new(glass-pubbar) { animation-duration: .25s; }
    ::view-transition-group(glass-scene) { z-index: -1; }
    ::view-transition-old(root) { animation: glass-page-out .26s var(--glide, ease) both; }
    ::view-transition-new(root) { animation: glass-page-in .5s cubic-bezier(.22, .8, .2, 1) both; }
    @keyframes glass-page-out { to { opacity: 0; transform: perspective(1400px) translateZ(-34px); } }
    @keyframes glass-page-in { from { opacity: 0; transform: perspective(1400px) translateZ(34px); } }
}
@media (prefers-reduced-motion: reduce) {
    html.glass { scroll-behavior: auto; }
    html.glass *, html.glass *::before, html.glass *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .slab:hover, .slab.is-lit { transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.glass { --glass-fill: linear-gradient(150deg, #2a1f4a, #1a1230); }
}