/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("a7b981f6ba38e7bf.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("bd5120c57a95403d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("4a2d33da6b5025e7.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("03b5e56e60e82891.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("b3d5d03c562e6458.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("222cec08210a4db3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("feae572128550f62.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9d8db2e8ccd97233.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("bcedb9e2e5283c1b.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("326a88b4ddbbf132.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("06ad36000cd89dec.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("4f27206c4b1caf8b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("feae572128550f62.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("9d8db2e8ccd97233.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("bcedb9e2e5283c1b.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("326a88b4ddbbf132.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("06ad36000cd89dec.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4f27206c4b1caf8b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("52c90339c9dcf962.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b49699f24b923b38.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c92bcfc912116404.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ea9f8c07f71c430a.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("b00d2063a60eb292.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("e7d0d08b1ced5e6c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("a6b67407d97c301c.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("85a99df0c205bf71.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("dcd4cf87ae721dd0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("f2be76ae232b1282.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d9a9ec34038e8f43.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("be9eae3d1d9f4fbd.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { color-scheme: light; --bg: #f8fafc; --bg-grid: rgba(15, 23, 42, .045); --surface: #f1f5f9; --card: #ffffff; --card-hover: #eef2ff; --panel: var(--card); --bg-elev: #eef2ff; --bg-elevated: #ffffff; --border: #d7e0eb; --border-muted: #e6edf5; --text: #0f172a; --text-muted: #475569; --text-dim: #64748b; --text-primary: var(--text); --text-secondary: var(--text-muted); --muted: var(--text-muted); --selection-bg: #c4b5fd; --selection-text: #1e1b4b; --accent: #7c3aed; --accent-rgb: 124, 58, 237; --accent-dim: rgba(124, 58, 237, .12); --accent-glow: rgba(124, 58, 237, .22); --accent-border: rgba(124, 58, 237, .35); --accent-contrast: #ffffff; --green: #16a34a; --green-dim: rgba(22, 163, 74, .11); --red: #dc2626; --red-dim: rgba(220, 38, 38, .1); --blue: #0284c7; --blue-rgb: 2, 132, 199; --blue-dim: rgba(2, 132, 199, .12); --blue-glow: rgba(2, 132, 199, .2); --blue-contrast: #f8fafc; --orange: #ea580c; --orange-dim: rgba(234, 88, 12, .1); --warning: #9333ea; --warning-dim: rgba(147, 51, 234, .12); --warning-border: rgba(147, 51, 234, .32); --notice: var(--blue); --notice-dim: var(--blue-dim); --notice-border: rgba(2, 132, 199, .3); --success: var(--green); --danger: var(--red); --accent-green: var(--green); --header-bg: rgba(255, 255, 255, .88); --mobile-menu-bg: rgba(255, 255, 255, .97); --modal-backdrop: rgba(15, 23, 42, .36); --row-subtle: rgba(15, 23, 42, .03); --row-hover: rgba(15, 23, 42, .06); --row-active: rgba(15, 23, 42, .1); --touchpad-glow: rgba(2, 132, 199, .07); --shadow-soft: rgba(15, 23, 42, .1); --shadow-strong: rgba(15, 23, 42, .18); --surface-highlight: rgba(255, 255, 255, .82); --editor-active-line: rgba(124, 58, 237, .08); --editor-active-line-soft: rgba(124, 58, 237, .045); --editor-selection: rgba(124, 58, 237, .22); --mono: "JetBrains Mono", "Fira Code", monospace; --sans: "Rajdhani", system-ui, sans-serif; --radius: 3px; --radius-lg: 6px; --transition: .15s ease; }
:root[data-theme="dark"] { color-scheme: dark; --bg: #09090b; --bg-grid: rgba(255, 255, 255, .025); --surface: #111115; --card: #18181b; --card-hover: #1f1f25; --panel: var(--card); --bg-elev: #1f1f25; --bg-elevated: #18181b; --border: #27272a; --border-muted: #1e1e21; --text: #f4f4f5; --text-muted: #a1a1aa; --text-dim: #8b8b95; --selection-bg: #a78bfa; --selection-text: #09090b; --accent: #a78bfa; --accent-rgb: 167, 139, 250; --accent-dim: rgba(167, 139, 250, .14); --accent-glow: rgba(167, 139, 250, .26); --accent-border: rgba(167, 139, 250, .35); --accent-contrast: #09090b; --green: #4ade80; --green-dim: rgba(74, 222, 128, .1); --red: #f87171; --red-dim: rgba(248, 113, 113, .1); --blue: #38bdf8; --blue-rgb: 56, 189, 248; --blue-dim: rgba(56, 189, 248, .12); --blue-glow: rgba(56, 189, 248, .22); --blue-contrast: #06121f; --orange: #fb923c; --orange-dim: rgba(251, 146, 60, .12); --warning: #c084fc; --warning-dim: rgba(192, 132, 252, .13); --warning-border: rgba(192, 132, 252, .34); --notice: var(--blue); --notice-dim: var(--blue-dim); --notice-border: rgba(56, 189, 248, .3); --header-bg: rgba(9, 9, 11, .92); --mobile-menu-bg: rgba(9, 9, 11, .97); --modal-backdrop: rgba(9, 9, 11, .72); --row-subtle: rgba(255, 255, 255, .02); --row-hover: rgba(255, 255, 255, .045); --row-active: rgba(255, 255, 255, .1); --touchpad-glow: rgba(255, 255, 255, .03); --shadow-soft: rgba(0, 0, 0, .3); --shadow-strong: rgba(0, 0, 0, .5); --surface-highlight: rgba(255, 255, 255, .03); --editor-active-line: rgba(167, 139, 250, .08); --editor-active-line-soft: rgba(167, 139, 250, .045); --editor-selection: rgba(167, 139, 250, .24); }
*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }
html, body { height: 100%; overflow-x: hidden; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.5; background-color: var(--bg); background-image: radial-gradient(var(--bg-grid) 1px,transparent 1px); background-size: 28px 28px; color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; }
::selection { background: var(--selection-bg); color: var(--selection-text); text-shadow: none; }
#root { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--sans); font-weight: 600; letter-spacing: 0.04em; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; background: none; }
body.public-site { background-color: rgb(255, 255, 255); background-image: none; color: rgb(17, 17, 17); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; font-weight: 400; letter-spacing: normal; }
body.public-site a { color: rgb(13, 110, 253); text-decoration: underline; }
body.public-site h1, body.public-site h2, body.public-site h3 { font-weight: 600; letter-spacing: -0.01em; }
@keyframes pulse-dot { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
@keyframes pulse-glow { 
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: transparent 0px 0px 0px 6px; }
}
@keyframes fade-in { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes slide-in { 
  0% { opacity: 0; transform: translate(-12px); }
  100% { opacity: 1; transform: translate(0px); }
}
@keyframes ring-flash { 
  0% { background: var(--accent); }
  40% { background: var(--red); box-shadow: 0 0 20px var(--red); }
  100% { background: var(--border); }
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(63, 63, 70); }
.layout { display: flex; flex-direction: column; min-height: 100vh; max-width: 100vw; overflow-x: hidden; }
.header { position: sticky; top: 0px; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0px 24px; height: 52px; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-muted); }
.header-left { display: flex; align-items: center; gap: 24px; }
.header-logo { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.header-logo-mark { width: 20px; height: 20px; background: var(--accent); border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.header-logo-mark svg { width: 12px; height: 12px; fill: var(--accent-contrast); }
.header-nav { display: flex; align-items: center; gap: 2px; }
.nav-link { padding: 5px 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-radius: var(--radius); transition: color var(--transition),background var(--transition); }
.nav-link:hover, .nav-link.active { color: var(--text); background: var(--card); }
.nav-link.active { color: var(--accent); }
.nav-plus { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-muted); border-radius: var(--radius); transition: color var(--transition),background var(--transition); }
.nav-plus:hover, .nav-plus.active { color: var(--text); background: var(--card); }
button.nav-link, button.nav-plus { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; font: inherit; cursor: pointer; }
.nav-plus.active { color: var(--accent); }
.space-picker { position: relative; }
.space-picker-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; min-height: 44px; background: transparent; border: 0px; border-radius: 10px; color: var(--text); cursor: pointer; font-family: inherit; text-align: left; transition: background 0.12s; }
.space-picker-trigger:hover { background: var(--card-hover, rgba(255, 255, 255, .06)); }
.space-picker-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.space-picker-trigger.is-open { background: var(--card-hover, rgba(255, 255, 255, .08)); }
.space-picker-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: rgb(255, 255, 255); letter-spacing: 0px; text-transform: none; flex: 0 0 auto; }
.space-picker-title { display: flex; flex-direction: column; min-width: 0px; line-height: 1.15; }
.space-picker-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.space-picker-sub { font-size: 11px; margin-top: 1px; color: var(--text-muted); text-transform: lowercase; letter-spacing: 0.01em; }
.space-picker-chevron { opacity: 0.5; flex: 0 0 auto; transition: transform 0.16s, opacity 0.12s; }
.space-picker-trigger:hover .space-picker-chevron { opacity: 0.85; }
.space-picker-trigger.is-open .space-picker-chevron { transform: rotate(180deg); opacity: 1; }
.space-picker-menu { position: absolute; top: calc(100% + 6px); left: 0px; min-width: 280px; max-width: 360px; background: var(--card, #1a1a1d); border-radius: 12px; box-shadow: 0 1px 2px var(--shadow-soft),0 8px 28px var(--shadow-strong); z-index: 100; overflow: hidden; padding: 6px; animation: 0.14s ease 0s 1 normal none running space-picker-fade; }
@keyframes space-picker-fade { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.space-picker-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 10px; background: transparent; border: 0px; border-radius: 8px; color: var(--text); cursor: pointer; font-family: inherit; text-align: left; transition: background 0.1s; }
.space-picker-item:hover { background: var(--card-hover, rgba(255, 255, 255, .06)); }
.space-picker-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.space-picker-item.is-active { background: rgba(var(--accent-rgb, 180, 140, 40),.14); }
.space-picker-item.is-active .space-picker-item-check { color: var(--accent); }
.space-picker-item-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); flex: 0 0 auto; }
.space-picker-item-avatar-neutral { background: var(--card-hover, rgba(255, 255, 255, .1)); color: var(--text-muted); }
.space-picker-item-body { display: flex; flex-direction: column; min-width: 0px; flex: 1 1 auto; }
.space-picker-item-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-picker-item-meta { font-size: 11px; margin-top: 2px; color: var(--text-muted); text-transform: lowercase; letter-spacing: 0.02em; }
.space-picker-item-check { flex: 0 0 auto; color: var(--text-muted); }
.space-picker-divider { height: 1px; margin: 6px 4px; background: var(--border, rgba(255, 255, 255, .08)); }
.space-picker-item-personal .space-picker-item-name { font-weight: 500; }
.space-picker-empty { padding: 14px 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
@media (max-width: 720px) {
  .space-picker-name { max-width: 180px; font-size: 14px; }
  .space-picker-sub { display: none; }
  .space-picker-trigger { padding: 6px 8px; gap: 8px; }
  .space-picker-avatar { width: 24px; height: 24px; font-size: 11px; }
  .space-picker-menu { min-width: min(320px, -32px + 100vw); }
}
.scope-picker { position: relative; }
.scope-picker-trigger, .scope-picker-menu, .scope-picker-item, .scope-picker-item-name, .scope-picker-item-sub, .scope-picker-empty, .scope-picker-chevron { display: revert; }
.header-right { display: flex; align-items: center; gap: 16px; }
.nav-hamburger { display: none; align-items: center; justify-content: center; padding: 6px; color: var(--text-muted); border-radius: var(--radius); transition: color var(--transition),background var(--transition); }
.nav-hamburger:hover { color: var(--text); background: var(--card); }
.mobile-menu { display: none; }
@media (max-width: 767px) {
  .header-nav { display: none; }
  .nav-hamburger { display: flex; }
  .header-right .header-user { display: none; }
  .mobile-menu { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0px; right: 0px; z-index: 99; background: var(--mobile-menu-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 8px 12px 12px; gap: 2px; }
  .mobile-menu .nav-link { display: block; padding: 13px 12px; font-size: 15px; letter-spacing: 0.06em; border-radius: var(--radius); border-bottom: 1px solid var(--border-muted); }
  .mobile-menu .nav-link:last-of-type { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
  .mobile-menu-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
  .mobile-menu-email { font-size: 12px; color: var(--text-muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
}
.gateway-badge { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gateway-badge.online { border-color: rgba(74, 222, 128, 0.3); color: var(--green); }
.gateway-badge.offline { border-color: rgba(248, 113, 113, 0.25); color: var(--red); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.status-dot.pulse { animation: 2s ease-in-out 0s infinite normal none running pulse-dot; }
.ws-indicator { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--mono); color: var(--text-dim); }
.ws-indicator.connected { color: var(--green); }
.ws-indicator.disconnected { color: var(--red); }
.main { flex: 1 1 0%; padding: 28px 24px; max-width: 1400px; width: 100%; margin: 0px auto; }
.page-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-muted); }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; }
.page-subtitle { font-size: 13px; font-weight: 500; color: var(--text-muted); font-family: var(--mono); }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.device-card { background: var(--card); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: background var(--transition),border-color var(--transition),transform var(--transition); animation: 0.3s ease 0s 1 normal both running fade-in; }
.device-card:hover { background: var(--card-hover); transform: translateY(-1px); }
.device-card.online { border-left-color: var(--accent); }
.device-card.offline { border-left-color: var(--border); opacity: 0.7; }
.device-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.device-card-info { flex: 1 1 0%; min-width: 0px; }
.device-label { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.device-mac { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.08em; }
.device-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.device-type-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; background: var(--surface); color: var(--text-muted); }
.device-room { font-size: 11px; color: var(--text-dim); font-weight: 500; }
.device-status-badge { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.device-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.device-status-dot.online { background: var(--green); animation: 2.4s ease-in-out 0s infinite normal none running pulse-dot; }
.device-status-dot.offline { background: var(--text-dim); }
.device-status-text { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.device-status-text.online { color: var(--green); }
.device-status-text.offline { color: var(--text-dim); }
.device-last-seen { font-family: var(--mono); font-size: 10px; color: var(--text-dim); text-align: right; }
.device-channels { display: flex; flex-direction: column; gap: 6px; }
.switch-state { font-size: 32px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; }
.switch-state.on { color: var(--accent); }
.switch-state.off { color: var(--text-dim); }
.toggle-group { display: flex; flex-direction: column; gap: 10px; }
.toggle-row { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.toggle-label { font-size: 11px; font-family: var(--mono); font-weight: 600; letter-spacing: 0.1em; color: var(--text-dim); min-width: 32px; }
.toggle-track { width: 52px; height: 28px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); position: relative; transition: background var(--transition),border-color var(--transition); flex-shrink: 0; }
.toggle-track.on { background: var(--accent-dim); border-color: var(--accent); }
.toggle-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--text-dim); position: absolute; top: 2px; left: 2px; transition: transform 0.2s, background 0.2s, box-shadow 0.2s; }
.toggle-track.on .toggle-thumb { transform: translate(24px); background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.toggle-row:hover .toggle-track { border-color: var(--text-muted); }
.toggle-row:hover .toggle-track.on { border-color: var(--accent); }
.toggle-state { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; font-family: var(--mono); }
.toggle-state.on { color: var(--accent); }
.toggle-state.off { color: var(--text-dim); }
.sensor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sensor-reading { display: flex; flex-direction: column; }
.sensor-value { font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1; color: var(--text); }
.sensor-value.large { font-size: 28px; }
.sensor-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
.sensor-bme-row { display: flex; align-items: flex-end; gap: 16px; }
.sensor-aux-row { display: flex; align-items: flex-end; gap: 16px; padding-top: 6px; border-top: 1px solid var(--border-muted); }
.sensor-reading { display: flex; flex-direction: column; gap: 2px; }
.sensor-reading--primary { flex: 0 0 auto; }
.sensor-value--temp { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; transition: color 0.6s; }
.sensor-value--secondary { font-family: var(--mono); font-size: 20px; font-weight: 400; line-height: 1; color: var(--text); }
.sensor-value--aux { font-family: var(--mono); font-size: 16px; font-weight: 400; line-height: 1; color: var(--text-muted); }
.sensor-unit { font-size: 0.62em; font-weight: 400; color: var(--text-dim); margin-left: 1px; }
.chart-day-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chart-day-btn { font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all var(--transition); }
.chart-day-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.chart-day-btn:disabled { opacity: 0.3; cursor: default; }
.chart-day-label { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.sensor-chart-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.sensor-chart-tab { padding: 5px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); transition: all var(--transition); }
.sensor-chart-tab:hover { color: var(--tab-color, var(--accent)); border-color: var(--tab-color, var(--accent)); background: color-mix(in srgb,var(--tab-color, var(--accent)) 10%,transparent); }
.sensor-chart-tab.active { color: var(--tab-color, var(--accent)); border-color: var(--tab-color, var(--accent)); background: color-mix(in srgb,var(--tab-color, var(--accent)) 12%,transparent); }
.smooth-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; flex-shrink: 0; }
.smooth-toggle-track { width: 32px; height: 18px; border-radius: 9px; background: var(--border); position: relative; transition: background 0.15s; }
.smooth-toggle-track.on { background: var(--accent); }
.smooth-toggle-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); position: absolute; top: 2px; left: 2px; transition: transform 0.15s, background 0.15s; }
.smooth-toggle-track.on .smooth-toggle-thumb { transform: translate(14px); background: var(--accent-contrast); }
.smooth-toggle-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.sensor-chart-summary { display: flex; gap: 24px; padding: 8px 0px 12px; }
.sensor-chart-stat { display: flex; flex-direction: column; gap: 2px; }
.sensor-chart-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.sensor-chart-stat-value { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--text); }
.blind-state { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.blind-state.up { color: var(--blue); }
.blind-state.down { color: var(--orange); }
.blind-state.idle { color: var(--text-muted); }
.thermo-temps { display: flex; align-items: baseline; gap: 10px; }
.thermo-current { font-family: var(--mono); font-size: 32px; font-weight: 500; line-height: 1; }
.thermo-arrow { font-size: 16px; color: var(--text-dim); }
.thermo-target { font-family: var(--mono); font-size: 18px; color: var(--text-muted); }
.thermo-state { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.thermo-state.heating { color: var(--orange); }
.thermo-state.cooling { color: var(--blue); }
.thermo-state.idle { color: var(--text-dim); }
.doorbell-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background 0.4s, box-shadow 0.4s; }
.doorbell-icon.ringing { animation: 0.8s ease 0s 1 normal forwards running ring-flash; }
.doorbell-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.group-card { cursor: default; }
.group-endpoints { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.group-blind-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); background: var(--row-subtle); }
.group-blind-row:hover { background: var(--row-hover); }
.group-row-left { display: flex; align-items: center; gap: 6px; flex: 1 1 0%; min-width: 0px; }
.group-row-label { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-current-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; transition: background 0.2s; }
.group-current-dot.active { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.group-blind-state { font-size: 10px; font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; width: 36px; text-align: center; flex-shrink: 0; }
.group-blind-state.up { color: var(--blue); }
.group-blind-state.down { color: var(--orange); }
.group-blind-state.idle { color: var(--text-dim); }
.group-blind-btns { display: flex; gap: 4px; flex-shrink: 0; }
.group-blind-btn { width: 28px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 10px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.group-blind-btn:hover { background: var(--row-hover); color: var(--text); border-color: var(--text-muted); }
.group-blind-btn:active { background: var(--row-active); }
.group-blind-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.group-blind-btn.stop:hover { color: var(--red); border-color: var(--red); background: var(--red-dim); }
.group-divider { height: 1px; background: var(--border-muted); margin: 8px 0px; }
.group-switches { display: flex; flex-direction: column; gap: 2px; }
.group-switch-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); background: var(--row-subtle); cursor: pointer; }
.group-switch-row:hover { background: var(--row-hover); }
.group-switch-row .group-row-label { flex: 1 1 0%; }
.group-others { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.group-other-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius); cursor: pointer; color: var(--text-muted); font-size: 12px; }
.group-other-row:hover { background: var(--row-hover); color: var(--text); }
.group-other-arrow { margin-left: auto; color: var(--text-dim); }
.cmd-panel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cmd-panel-dual { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cmd-panel-row { display: flex; align-items: center; gap: 6px; }
.cmd-ch-label { font-size: 10px; font-family: var(--mono); font-weight: 700; letter-spacing: 0.1em; color: var(--text-dim); min-width: 28px; }
.cmd-btn { padding: 7px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: all var(--transition); }
.cmd-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.cmd-btn:active { transform: scale(0.97); }
.cmd-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.cmd-btn.primary:hover { border-color: var(--accent); color: var(--accent-contrast); background: var(--accent); }
.channel-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.channel-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--border-muted); }
.channel-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-muted); vertical-align: middle; }
.channel-table tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.channel-name { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.channel-value { font-family: var(--mono); font-size: 13px; color: var(--text); font-weight: 500; }
.channel-value.on { color: var(--accent); }
.channel-value.off { color: var(--text-dim); }
.channel-value.true { color: var(--green); }
.channel-value.false { color: var(--text-dim); }
.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .header { padding: 0px 12px; height: 48px; }
  .header-left { gap: 12px; }
  .header-logo { font-size: 12px; gap: 6px; }
  .header-logo-mark { width: 16px; height: 16px; }
  .header-logo-mark svg { width: 10px; height: 10px; }
  .header-right { gap: 8px; }
  .gateway-badge, .ws-indicator { font-size: 10px; gap: 4px; }
  .status-dot { width: 5px; height: 5px; }
  .main { padding: 16px 10px; }
  .page-heading { flex-direction: column; gap: 4px; margin-bottom: 16px; padding-bottom: 12px; }
  .page-title { font-size: 18px; }
  .device-grid { grid-template-columns: 1fr; gap: 10px; }
  .device-card { padding: 12px; }
  .device-card-header { gap: 8px; }
  .device-label { font-size: 16px; }
  .device-mac { font-size: 9px; }
  .switch-state { font-size: 24px; }
  .cmd-panel { gap: 6px; }
  .cmd-btn { padding: 10px 14px; font-size: 12px; min-height: 42px; }
  .cmd-panel-dual { gap: 8px; }
  .cmd-panel-row { gap: 4px; }
  .detail-card { padding: 14px; }
  .detail-header { margin-bottom: 16px; }
  .detail-title { font-size: 18px; }
  .detail-mac { font-size: 10px; }
  .back-btn { font-size: 12px; padding: 6px 10px; }
  .channel-table th, .channel-table td { padding: 6px 4px; font-size: 11px; }
  .event-row { font-size: 11px; gap: 6px; }
  .chart-day-nav { margin-bottom: 8px; }
  .chart-day-btn { padding: 6px 10px; font-size: 11px; }
  .chart-day-label { font-size: 12px; }
  .sensor-chart-tabs { gap: 4px; }
  .sensor-chart-tab { padding: 5px 10px; font-size: 11px; }
  .sensor-chart-summary { gap: 12px; }
  .sensor-chart-stat-value { font-size: 14px; }
  .gateway-log { max-height: 250px; }
  .gateway-log-line { font-size: 10px; }
  .settings-placeholder { padding: 24px; }
  .toast { font-size: 12px; padding: 10px 16px; }
  .load-more-btn { font-size: 12px; }
}
.detail-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.detail-card-title { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-muted); }
.back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 20px; padding: 5px 0px; transition: color var(--transition); }
.back-btn:hover { color: var(--text); }
.detail-header { margin-bottom: 20px; }
.detail-title { font-size: 26px; font-weight: 700; letter-spacing: 0.02em; }
.detail-mac { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.event-list { display: flex; flex-direction: column; gap: 1px; }
.event-row { display: grid; grid-template-columns: 1fr 100px 80px; gap: 8px; padding: 7px 0px; border-bottom: 1px solid var(--border-muted); font-size: 12px; animation: 0.2s ease 0s 1 normal both running slide-in; }
.event-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.event-time { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.event-channel { font-family: var(--mono); color: var(--text-muted); }
.event-value { font-family: var(--mono); font-weight: 500; text-align: right; }
.load-more-btn { display: block; width: 100%; margin-top: 12px; padding: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); background: transparent; transition: all var(--transition); }
.load-more-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: var(--text-dim); gap: 8px; }
.empty-state-icon { font-size: 36px; opacity: 0.4; }
.empty-state-text { font-size: 14px; font-weight: 500; }
.empty-state-hint { font-family: var(--mono); font-size: 12px; color: var(--text-dim); opacity: 0.6; }
.settings-placeholder { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; text-align: center; color: var(--text-muted); }
.settings-placeholder p { font-family: var(--mono); font-size: 12px; margin-top: 8px; color: var(--text-dim); }
.settings-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; margin-top: 16px; }
.settings-card h2 { margin: 0px 0px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.settings-card .muted { margin: 0px 0px 8px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.settings-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.settings-spaces { margin: 0px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.settings-spaces li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--row-subtle); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.settings-space-name { font-weight: 600; }
.settings-space-meta { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.settings-space-gateways { margin-bottom: 20px; }
.settings-space-gateways:last-child { margin-bottom: 0px; }
.settings-space-gateways-title { margin: 0px 0px 8px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.settings-gateway-list { margin: 0px 0px 12px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.settings-gateway-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--row-subtle); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.settings-gateway-name { font-weight: 600; flex: 1 1 0%; }
.settings-gateway-meta { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.settings-gateway-status { font-size: 11px; font-family: var(--mono); padding: 2px 6px; border-radius: 4px; }
.settings-gateway-status.online { background: rgba(0, 200, 100, 0.12); color: var(--green, #3ecf8e); }
.settings-gateway-status.offline { background: rgba(255, 80, 80, 0.1); color: var(--red, #f66); }
.settings-gateway-revoke { font-size: 11px; padding: 3px 8px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); cursor: pointer; }
.settings-gateway-revoke:hover { border-color: var(--red, #f66); color: var(--red, #f66); }
.settings-gateway-revoke:disabled { opacity: 0.5; cursor: not-allowed; }
.settings-gateway-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.settings-input { flex: 1 1 0%; min-width: 200px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; }
.settings-input:focus { outline: none; border-color: var(--accent, #6c8ebf); }
.settings-btn { padding: 6px 14px; background: var(--accent, #6c8ebf); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--radius); color: var(--accent-contrast); font-size: 13px; cursor: pointer; }
.settings-btn:hover { opacity: 0.85; }
.settings-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.settings-error { width: 100%; margin: 4px 0px 0px; font-size: 12px; color: var(--red, #f66); }
.settings-credentials-box { width: 100%; margin-top: 10px; padding: 12px 16px; background: rgba(0, 200, 100, 0.06); border: 1px solid rgba(0, 200, 100, 0.2); border-radius: var(--radius); font-size: 12px; }
.settings-credentials-box p { margin: 0px 0px 8px; }
.settings-credentials-table { border-collapse: collapse; width: 100%; }
.settings-credentials-table td { padding: 3px 8px 3px 0px; font-size: 12px; vertical-align: top; }
.settings-credentials-table td:first-child { color: var(--text-dim); white-space: nowrap; padding-right: 12px; }
.settings-credentials-table code { font-family: var(--mono); font-size: 11px; word-break: break-all; }
.gateway-log-hint { font-size: 12px; font-family: var(--mono); color: var(--text-dim); margin-bottom: 12px; }
.gateway-log-hint code { background: var(--surface); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.gateway-log { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.gateway-log-line { display: flex; gap: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.6; padding: 2px 6px; border-radius: 3px; }
.gateway-log-line:nth-child(2n+1) { background: var(--surface); }
.gateway-log-time { color: var(--text-dim); flex-shrink: 0; }
.gateway-log-msg { color: var(--text-secondary); word-break: break-all; }
.gateway-log-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.gateway-log-filter select { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 3px; font-family: var(--mono); font-size: 11px; padding: 3px 6px; min-width: 280px; }
.gateway-log-filter-sep { color: var(--text-dim); opacity: 0.5; }
.gateway-log-filter-label { color: var(--text-dim); }
.gateway-log-level-toggle { background: transparent; border: 1px solid var(--border); border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 3px 8px; cursor: pointer; color: var(--text-dim); opacity: 0.5; transition: opacity 0.1s, border-color 0.1s, color 0.1s; }
.gateway-log-level-toggle:hover { opacity: 0.85; }
.gateway-log-level-toggle.on { opacity: 1; }
.gateway-log-level-toggle.level-info.on { color: rgb(96, 165, 250); border-color: rgb(96, 165, 250); }
.gateway-log-level-toggle.level-warn.on { color: var(--warning); border-color: var(--warning); }
.gateway-log-level-toggle.level-error.on { color: rgb(248, 113, 113); border-color: rgb(248, 113, 113); }
.gateway-log-level-count { opacity: 0.65; font-weight: 400; margin-left: 2px; }
.gateway-log-filter-clear { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; font-family: var(--mono); font-size: 10px; padding: 3px 8px; cursor: pointer; }
.gateway-log-filter-clear:hover { color: var(--text-primary); border-color: var(--text-dim); }
.gateway-log-empty { text-align: center; color: var(--text-dim); font-family: var(--mono); font-size: 12px; padding: 24px; }
.device-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; overflow: hidden; transition: border-color 0.1s, color 0.1s; }
.device-chip-body { background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--text-dim); font: inherit; letter-spacing: inherit; padding: 3px 6px 3px 8px; cursor: pointer; }
.device-chip-x { background: transparent; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-top-style: none; border-right-style: none; border-bottom-style: none; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-image: initial; border-left: 1px solid var(--border); color: var(--text-dim); font-family: var(--mono); font-size: 12px; line-height: 1; font-weight: 700; padding: 0px 6px; cursor: pointer; }
.device-chip-x:hover { color: rgb(248, 113, 113); }
.device-chip.on { border-color: rgb(74, 222, 128); }
.device-chip.on .device-chip-body { color: rgb(74, 222, 128); }
.device-chip.on .device-chip-x { border-left-color: rgb(74, 222, 128); }
.device-chip.off .device-chip-body { text-decoration: line-through; opacity: 0.6; }
.device-chip-suffix { opacity: 0.65; font-weight: 400; }
.device-add-select { background: var(--surface); color: var(--text-primary); border: 1px dashed var(--border); border-radius: 3px; font-family: var(--mono); font-size: 10px; padding: 3px 6px; min-width: 180px; cursor: pointer; }
.device-add-select:disabled { cursor: default; opacity: 0.5; }
.gateway-log-source { flex-shrink: 0; font-weight: 700; font-size: 9px; letter-spacing: 0.5px; width: 28px; text-align: center; opacity: 0.7; }
.gateway-log-source.source-gateway { color: var(--text-dim); }
.gateway-log-source.source-app { color: rgb(163, 230, 53); }
.gateway-log-source.source-device { color: rgb(96, 165, 250); }
.gateway-log-level { flex-shrink: 0; font-weight: 700; font-size: 9px; letter-spacing: 0.5px; width: 38px; text-align: center; }
.gateway-log-level.level-info { color: rgb(96, 165, 250); }
.gateway-log-level.level-warn { color: var(--warning); }
.gateway-log-level.level-error { color: rgb(248, 113, 113); }
.gateway-log-line.level-warn { background: var(--warning-dim); }
.gateway-log-line.level-error { background: rgba(248, 113, 113, 0.1); }
.gateway-log-line.level-error:nth-child(2n+1), .gateway-log-line.level-warn:nth-child(2n+1) { background: rgba(248, 113, 113, 0.1); }
.gateway-log-line.level-warn:nth-child(2n+1) { background: var(--warning-dim); }
.api-section { margin-bottom: 24px; }
.api-section-title { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.api-endpoint { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 8px; cursor: pointer; transition: border-color var(--transition); }
.api-endpoint:hover { border-color: var(--text-muted); }
.api-endpoint-header { display: flex; align-items: center; gap: 10px; }
.api-method { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 8px; border-radius: 3px; color: rgb(9, 9, 11); flex-shrink: 0; }
.api-path { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); }
.api-desc { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.api-detail { margin-top: 12px; }
.api-block { margin-top: 10px; }
.api-block-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.api-block code, .api-block pre { font-family: var(--mono); font-size: 11px; color: var(--text-muted); background: var(--surface); padding: 8px 10px; border-radius: var(--radius); display: block; overflow-x: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.loading { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--text-dim); font-family: var(--mono); font-size: 12px; gap: 8px; }
.spinner { width: 14px; height: 14px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--accent); border-radius: 50%; animation: 0.6s linear 0s infinite normal none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 10px 16px; background: var(--card); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--accent); border-radius: var(--radius); font-size: 13px; font-weight: 600; animation: 0.2s ease 0s 1 normal both running fade-in; pointer-events: all; }
.toast.error { border-left-color: var(--red); color: var(--red); }
.toast.success { border-left-color: var(--green); color: var(--green); }
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-form { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; animation: 0.3s ease 0s 1 normal both running fade-in; }
.login-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 8px; }
.login-title { font-size: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.login-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.login-input { padding: 10px 12px; font-family: var(--mono); font-size: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); outline: none; transition: border-color var(--transition); }
.login-input:focus { border-color: var(--accent); }
.login-btn { margin-top: 4px; padding: 10px 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast); cursor: pointer; transition: opacity var(--transition); }
.login-btn:hover:not(:disabled) { opacity: 0.9; }
.login-btn:disabled { opacity: 0.5; cursor: default; }
.login-error { padding: 8px 12px; font-family: var(--mono); font-size: 12px; color: var(--red); background: var(--red-dim); border: 1px solid rgba(248, 113, 113, 0.25); border-radius: var(--radius); }
.login-info { padding: 8px 12px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); background: var(--row-subtle); border: 1px solid var(--border); border-radius: var(--radius); }
.login-foot { margin-top: 4px; font-size: 12px; color: var(--text-dim); text-align: center; }
.login-link { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.login-link:hover { color: var(--accent, #fff); }
.login-linkbtn { background: transparent; border: 0px; padding: 0px; font: inherit; cursor: pointer; }
.login-linkbtn:disabled { opacity: 0.5; cursor: default; }
.google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgb(255, 255, 255); color: rgb(31, 31, 31); border: 1px solid var(--border); margin-top: 4px; }
.google-btn:hover:not(:disabled) { background: rgb(245, 245, 245); color: rgb(31, 31, 31); }
.google-mark { width: 16px; height: 16px; flex: 0 0 16px; }
.verify-banner { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-family: var(--mono); font-size: 12px; color: var(--notice); background: var(--notice-dim); border-bottom: 1px solid var(--notice-border); }
.verify-banner-text { font-weight: 600; }
.verify-banner-link { color: var(--notice); text-decoration: underline; text-underline-offset: 2px; }
.verify-banner-btn { background: transparent; border: 0px; padding: 0px; font: inherit; cursor: pointer; }
.verify-banner-btn:disabled { opacity: 0.5; cursor: default; }
.verify-banner-info { color: var(--text-dim); }
.verify-banner-error { color: var(--red); }
.space-billing-banner { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 12px; border-radius: 6px; font-size: 13px; color: var(--warning); background: var(--warning-dim); border: 1px solid var(--warning-border); }
.space-billing-banner.frozen { color: var(--red); background: rgba(220, 80, 80, 0.1); border-color: rgba(220, 80, 80, 0.35); }
.space-billing-banner-icon { flex: 0 0 auto; }
.space-billing-banner-text { line-height: 1.4; }
.android-banner { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-family: var(--mono); font-size: 12px; color: rgb(168, 216, 168); background: rgba(74, 222, 128, 0.07); border-bottom: 1px solid rgba(74, 222, 128, 0.2); }
.android-banner-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; }
.android-banner-text { flex: 1 1 0%; }
.android-banner-btn { color: var(--green); text-decoration: underline; text-underline-offset: 2px; font: inherit; cursor: pointer; white-space: nowrap; }
.android-banner-close { background: transparent; border: 0px; padding: 0px 2px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 11px; color: var(--text-muted); cursor: pointer; line-height: 1; }
.android-banner-close:hover { color: var(--text); }
.install-banner { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-family: var(--mono); font-size: 12px; color: var(--accent); background: var(--accent-dim); border-bottom: 1px solid var(--accent-border); }
.install-banner-text { flex: 1 1 0%; }
.install-banner-btn { background: var(--accent); color: var(--accent-contrast); border: 0px; padding: 4px 10px; border-radius: 4px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.install-banner-btn:hover { opacity: 0.9; }
.install-banner-close { background: transparent; border: 0px; padding: 0px 2px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 11px; color: var(--text-muted); cursor: pointer; line-height: 1; }
.install-banner-close:hover { color: var(--text); }
.content-source-badge { font-size: 11px; font-family: var(--mono); color: var(--text-dim); background: var(--card); border: 1px solid var(--border); padding: 6px 10px; border-radius: 4px; margin-bottom: 12px; }
.content-source-badge.auto { border-color: var(--accent-border); background: var(--accent-dim); color: var(--accent); }
.invite-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.invite-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.invite-logo-mark { width: 32px; height: 32px; margin-bottom: 4px; }
.invite-logo-mark svg { width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.invite-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0px; }
.invite-meta { font-size: 14px; color: var(--text-muted); margin: 0px; line-height: 1.6; }
.invite-hint { font-size: 12px; color: var(--text-dim); font-family: var(--mono); margin: 0px; }
.invite-actions { display: flex; gap: 10px; margin-top: 8px; width: 100%; flex-direction: column; }
.access-gate { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.access-gate-code { display: flex; flex-direction: column; gap: 8px; }
.access-gate-label { font-size: 13px; color: var(--muted, #888); }
.access-gate-input { font-size: 24px; letter-spacing: 8px; text-align: center; padding: 10px 12px; border: 1px solid var(--border, #ccc); border-radius: 8px; background: var(--bg, #fff); color: inherit; }
.access-gate-error { color: var(--danger, #c0392b); font-size: 13px; margin: 0px; }
.invite-btn-primary { background: var(--accent); color: var(--accent-contrast); border: 0px; border-radius: var(--radius); padding: 10px 20px; font: 600 14px var(--sans); cursor: pointer; transition: opacity var(--transition); }
.invite-btn-primary:hover { opacity: 0.85; }
.invite-btn-primary:disabled { opacity: 0.5; cursor: default; }
.invite-btn-secondary { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 20px; font: 500 14px var(--sans); cursor: pointer; transition: border-color var(--transition); }
.invite-btn-secondary:hover { border-color: var(--text-muted); }
.gate-page { min-height: calc(-56px + 100vh); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.gate-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 16px; }
.gate-logo-mark { width: 28px; height: 28px; }
.gate-logo-mark svg { width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.gate-title { font-size: 20px; font-weight: 700; margin: 0px; }
.gate-meta { font-size: 13px; color: var(--text-muted); margin: 0px; }
.gate-invite-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gate-invite-row { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.gate-invite-row--done { opacity: 0.6; }
.gate-invite-info { flex: 1 1 0%; display: flex; flex-direction: column; gap: 2px; }
.gate-invite-space { font-weight: 600; font-size: 14px; }
.gate-invite-role { font-size: 11px; color: var(--accent); font-family: var(--mono); }
.gate-invite-by { font-size: 11px; color: var(--text-muted); }
.gate-invite-actions { display: flex; gap: 6px; }
.gate-btn-accept { background: var(--green-dim); color: var(--green); border: 1px solid rgba(74, 222, 128, 0.3); border-radius: var(--radius); padding: 6px 12px; font: 600 12px var(--sans); cursor: pointer; }
.gate-btn-accept:hover { background: rgba(74, 222, 128, 0.2); }
.gate-btn-reject { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; font: 500 12px var(--sans); cursor: pointer; }
.gate-invite-done { font-size: 12px; font-family: var(--mono); white-space: nowrap; }
.gate-invite-done--accepted { color: var(--green); }
.gate-invite-done--rejected { color: var(--text-muted); }
.gate-btn-continue { background: var(--accent); color: var(--accent-contrast); border: 0px; border-radius: var(--radius); padding: 11px 24px; font: 700 14px var(--sans); cursor: pointer; margin-top: 8px; transition: opacity var(--transition); }
.gate-btn-continue:disabled { opacity: 0.35; cursor: default; }
.settings-members { display: flex; flex-direction: column; gap: 12px; }
.settings-members-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0px; }
.settings-members-subtitle { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 4px 0px 0px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.settings-member-list, .settings-invite-list, .settings-pending-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.settings-member-row, .settings-invite-row, .settings-pending-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-muted); border-radius: var(--radius); font-size: 13px; }
.settings-member-email, .settings-invite-email, .settings-pending-space { flex: 1 1 0%; }
.settings-invite-expiry { font-size: 11px; font-family: var(--mono); }
.settings-member-role { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 2px; }
.settings-member-role--owner { color: var(--accent); background: var(--accent-dim); }
.settings-member-role--resident { color: var(--blue); background: var(--blue-dim); }
.settings-member-remove, .settings-invite-cancel { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); padding: 3px 8px; font: 12px var(--sans); color: var(--text-muted); cursor: pointer; }
.settings-member-remove:hover, .settings-invite-cancel:hover { border-color: var(--red); color: var(--red); }
.settings-invite-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.settings-select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; color: var(--text); font: 14px var(--sans); cursor: pointer; }
.settings-select:focus { outline: none; border-color: var(--accent); }
.settings-success { color: var(--green); font-size: 12px; font-family: var(--mono); margin: 0px; }
.settings-pending-actions { display: flex; gap: 6px; }
.settings-btn--accept { background: var(--green-dim); color: var(--green); border-color: rgba(74, 222, 128, 0.3); }
.settings-btn--reject { background: transparent; color: var(--text-muted); }
.onboarding-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: var(--bg); }
.onboarding-card { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 18px; padding: 32px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.onboarding-card h1 { margin: 0px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.onboarding-card h2 { margin: 0px 0px 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.onboarding-card p { margin: 0px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.onboarding-header { display: flex; align-items: center; gap: 12px; }
.onboarding-verified { font-family: var(--mono); font-size: 11px; color: rgb(110, 231, 167); background: rgba(110, 231, 167, 0.08); border: 1px solid rgba(110, 231, 167, 0.25); padding: 2px 8px; border-radius: 999px; }
.onboarding-unverified { font-family: var(--mono); font-size: 11px; color: var(--notice); background: var(--notice-dim); border: 1px solid var(--notice-border); padding: 2px 8px; border-radius: 999px; }
.onboarding-lede { font-size: 13px; line-height: 1.6; color: var(--text); }
.onboarding-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.onboarding-option { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--row-subtle); }
.onboarding-btn { align-self: flex-start; text-decoration: none; text-align: center; display: inline-block; }
.onboarding-foot { margin-top: 8px; font-size: 12px; color: var(--text-dim); text-align: center; }
@media (max-width: 600px) {
  .onboarding-options { grid-template-columns: 1fr; }
}
.admin-page { padding: 24px 32px; max-width: 1200px; margin: 0px auto; display: flex; flex-direction: column; gap: 24px; }
.admin-title { margin: 0px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.admin-section { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.admin-section h2 { margin: 0px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.admin-form { display: flex; flex-direction: column; gap: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.admin-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.admin-count { margin-left: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.admin-mono { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.admin-empty { font-size: 13px; color: var(--text-dim); }
.admin-role-select { font-size: 12px; padding: 4px 8px; width: auto; }
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.admin-btn { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: var(--radius); cursor: pointer; }
.admin-btn:hover:not(:disabled) { background: var(--row-hover); }
.admin-btn:disabled { opacity: 0.5; cursor: default; }
.admin-btn-danger { border-color: rgba(248, 113, 113, 0.4); color: var(--red); }
.admin-btn-danger:hover:not(:disabled) { background: var(--red-dim); }
.admin-row-deleted td { opacity: 0.5; }
.header-user { display: flex; align-items: center; gap: 10px; }
.header-email { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.logout-btn { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; cursor: pointer; transition: all var(--transition); }
.logout-btn:hover { color: var(--red); border-color: var(--red); background: var(--red-dim); }
@media (max-width: 600px) {
  .login-form { padding: 24px 20px; }
  .header-email { display: none; }
}
.account-menu-trigger .space-picker-name { max-width: 180px; font-size: 13px; font-weight: 600; }
.account-menu .account-menu-menu { left: auto; right: 0px; min-width: 240px; }
.account-menu-head { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px 10px; }
.account-menu-head-avatar { color: rgb(255, 255, 255); flex: 0 0 auto; }
.account-menu-identity { display: flex; flex-direction: column; min-width: 0px; gap: 1px; }
.account-menu-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu-email { font-size: 11px; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu-link { min-height: 40px; }
.account-menu-logout:hover { background: var(--red-dim); }
.account-menu-logout:hover .space-picker-item-name { color: var(--red); }
.settings-profile-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-profile-label { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 96px; }
.settings-profile-row .settings-input { flex: 1 1 220px; }
.settings-profile-email { margin-top: 10px; font-size: 12px; font-family: var(--mono); }
.schedule-list { display: flex; flex-direction: column; gap: 8px; }
.schedule-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; background: var(--card); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; animation: 0.2s ease 0s 1 normal both running fade-in; transition: background var(--transition),border-color var(--transition); }
.schedule-row:hover { background: var(--card-hover); }
.schedule-row.enabled { border-left-color: var(--accent); }
.schedule-row.disabled { opacity: 0.55; }
.schedule-main { min-width: 0px; }
.schedule-name { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-meta { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.schedule-meta code { background: var(--surface); color: var(--text-muted); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.schedule-target { color: var(--text-muted); }
.schedule-sep { color: var(--border); }
.schedule-when { text-align: right; min-width: 160px; }
.schedule-when-primary { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: 0.02em; }
.schedule-when-secondary { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.schedule-actions { display: flex; gap: 6px; flex-shrink: 0; }
.schedule-actions .cmd-btn { padding: 5px 12px; font-size: 11px; }
@media (max-width: 700px) {
  .schedule-row { grid-template-columns: auto 1fr; grid-template-areas: "toggle main" "when when" "actions actions"; gap: 10px; padding: 12px; }
  .schedule-row > .toggle-track { grid-area: toggle; }
  .schedule-main { grid-area: main; }
  .schedule-when { grid-area: when; text-align: left; min-width: 0px; }
  .schedule-actions { grid-area: actions; justify-content: flex-end; }
}
.modal-backdrop { position: fixed; inset: 0px; background: var(--modal-backdrop); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px 24px; overflow-y: auto; animation: 0.15s ease 0s 1 normal both running fade-in; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 480px; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; animation: 0.2s ease 0s 1 normal both running fade-in; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--border-muted); }
.modal-close { font-size: 22px; font-weight: 400; line-height: 1; color: var(--text-dim); padding: 0px 8px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; transition: color var(--transition); }
.modal-close:hover { color: var(--text); }
.schedule-form { display: flex; flex-direction: column; gap: 14px; }
.schedule-form-row { display: flex; gap: 12px; }
.schedule-mode-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.schedule-mode-tab { flex: 1 1 0%; min-width: 70px; padding: 7px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--sans); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: all var(--transition); cursor: pointer; }
.schedule-mode-tab:hover { color: var(--accent); border-color: var(--accent); }
.schedule-mode-tab.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.schedule-days-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.schedule-day-btn { flex: 1 1 0%; min-width: 44px; padding: 7px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: all var(--transition); cursor: pointer; }
.schedule-day-btn:hover { color: var(--accent); border-color: var(--accent); }
.schedule-day-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.schedule-enable-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; user-select: none; }
.schedule-enable-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.schedule-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-muted); }
select.login-input { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
@media (max-width: 600px) {
  .modal { padding: 16px; max-width: 100%; }
  .schedule-form-row { flex-direction: column; gap: 10px; }
  .schedule-day-btn { min-width: 36px; padding: 6px 4px; }
}
.params-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.params-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.param-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 0px; border-bottom: 1px solid var(--border-muted); }
.param-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.param-label { font-size: 12px; font-weight: 600; color: var(--text); }
.param-control { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.param-error { grid-column: 1 / -1; font-size: 11px; color: rgb(248, 113, 113); font-family: var(--mono); padding: 2px 0px; }
.param-pending { font-size: 11px; color: var(--text-muted); }
.param-meta { font-size: 10px; color: var(--text-dim); font-family: var(--mono); }
.param-value-mono { min-width: 3.5em; text-align: right; color: var(--accent); }
.param-control input[type="range"] { width: 110px; accent-color: var(--accent); }
.param-step { width: 22px; height: 22px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); border-radius: 4px; font-family: var(--mono); font-size: 13px; line-height: 1; cursor: pointer; transition: all var(--transition); }
.param-step:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.param-step:disabled { opacity: 0.4; cursor: not-allowed; }
.param-step--save { width: auto; padding: 0px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--accent); border-color: var(--accent); }
.param-control input[type="number"], .param-control input[type="text"] { width: 80px; padding: 4px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 12px; text-align: right; }
.param-control input[type="text"] { width: 140px; text-align: left; }
.param-control input:focus { outline: none; border-color: var(--accent); }
.param-control select { padding: 4px 22px 4px 8px; background-attachment: ; background-origin: ; background-clip: ; background-color: ; border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 12px; cursor: pointer; appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.param-control select:focus { outline: none; border-color: var(--accent); }
.param-trigger { padding: 4px 14px; border: 1px solid var(--accent); background: var(--accent-dim); color: var(--accent); border-radius: 4px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); }
.param-trigger:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.param-trigger:disabled { opacity: 0.4; cursor: not-allowed; }
.tile-params { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-muted); }
.tile-params .param-row { padding: 3px 0px; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.tile-params .param-label { font-size: 11px; color: var(--text-muted); }
.detail-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0px 12px; border-bottom: 1px solid var(--border-muted); padding-bottom: 12px; }
.detail-tab { padding: 8px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--sans); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: all var(--transition); cursor: pointer; }
.detail-tab:hover { color: var(--accent); border-color: var(--accent); }
.detail-tab.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.detail-tab-panel { display: flex; flex-direction: column; gap: 16px; }
.admin-shell-panel .main { padding: 0px; margin: 0px; max-width: none; }
.admin-shell-panel .admin-title, .admin-shell-panel .page-heading > h1.page-title { display: none; }
.lua-ide { display: flex; flex-direction: column; height: calc(-280px + 100vh); min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.lua-ide-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border-muted); }
.lua-ide-play { padding: 5px 14px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast); border-radius: 4px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: all var(--transition); }
.lua-ide-play:hover:not(:disabled) { filter: brightness(1.1); }
.lua-ide-play:disabled { opacity: 0.5; cursor: not-allowed; }
.lua-ide-reset { padding: 4px 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); border-radius: 4px; font-family: var(--mono); font-size: 11px; cursor: pointer; transition: all var(--transition); }
.lua-ide-reset:hover { color: var(--accent); border-color: var(--accent); }
.lua-ide-status { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.lua-ide-compiler { padding: 4px 22px 4px 8px; background-attachment: ; background-origin: ; background-clip: ; background-color: ; border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 11px; cursor: pointer; appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.lua-ide-compiler:focus { outline: none; border-color: var(--accent); }
.lua-ide-compiler:disabled { opacity: 0.5; cursor: not-allowed; }
.lua-ide-cm, .lua-ide-cm > .cm-editor, .lua-ide .cm-editor { flex: 1 1 0%; min-height: 0px; height: 100%; background: var(--bg); outline: none !important; }
.lua-ide .cm-editor.cm-focused { outline: none !important; }
.hid-touchpad-wrap { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 360px; }
.hid-touchpad-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hid-pill { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
.hid-pill.on { color: rgb(74, 222, 128); border-color: rgba(74, 222, 128, 0.267); }
.hid-pill.off { color: var(--text-dim); }
.hid-panic { margin-left: auto; font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(248, 113, 113, 0.267); background: transparent; color: rgb(248, 113, 113); cursor: pointer; }
.hid-panic:hover { background: rgba(248, 113, 113, 0.094); }
.hid-touchpad-surface { flex: 1 1 0%; min-height: 320px; background: radial-gradient(circle at 50% 50%,var(--touchpad-glow),transparent 70%),var(--bg-elevated); border: 1px dashed var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; cursor: grab; user-select: none; touch-action: none; outline: none; transition: border-color 0.12s; }
.hid-touchpad-surface:focus-visible { border-color: var(--accent); border-style: solid; }
.hid-touchpad-surface:active { cursor: grabbing; }
.hid-touchpad-hint { color: var(--text-muted); font-size: 13px; line-height: 1.6; font-family: var(--mono); pointer-events: none; }
.hid-test-panel { display: flex; flex-direction: column; gap: 16px; }
.hid-test-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hid-test-section { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; }
.hid-test-section-title { color: var(--text-muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.hid-test-row { display: flex; gap: 6px; align-items: center; }
.hid-test-row.wrap { flex-wrap: wrap; }
.hid-test-input { flex: 1 1 0%; min-width: 200px; font-family: var(--mono); font-size: 13px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); outline: none; }
.hid-test-input:focus { border-color: var(--accent); }
.hid-test-btn { font-family: var(--mono); font-size: 11px; padding: 5px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; transition: border-color 80ms, color 80ms, background 80ms; }
.hid-test-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hid-test-btn:active:not(:disabled) { background: var(--bg-elevated); }
.hid-test-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hid-test-btn.primary { border-color: var(--accent); color: var(--accent-contrast); background: var(--accent); font-weight: 600; }
.hid-test-btn.primary:hover:not(:disabled) { filter: brightness(1.1); }
.hid-test-empty { color: var(--text-dim); font-family: var(--mono); font-size: 11px; font-style: italic; }
.hid-test-log { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.hid-test-log li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; padding: 4px 8px; font-family: var(--mono); font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; align-items: center; }
.hid-test-log li.ok { border-color: rgba(74, 222, 128, 0.267); }
.hid-test-log li.fail { border-color: rgba(248, 113, 113, 0.533); background: rgba(248, 113, 113, 0.067); }
.hid-test-log .mark { font-size: 12px; font-weight: 700; }
.hid-test-log li.ok .mark { color: rgb(74, 222, 128); }
.hid-test-log li.fail .mark { color: rgb(248, 113, 113); }
.hid-test-log .label { color: var(--text); }
.hid-test-log .rtt { color: var(--text-muted); }
.hid-test-log .detail { grid-column: 2 / 4; color: var(--text-dim); font-size: 10px; }
.hid-touch-modal-backdrop { position: fixed; inset: 0px; background: var(--modal-backdrop); display: flex; align-items: center; justify-content: center; z-index: 9000; backdrop-filter: blur(2px); }
.hid-touch-modal { background: var(--bg-elevated); border: 1px solid var(--accent-border); border-radius: 14px; padding: 24px 28px; max-width: 420px; width: calc(-32px + 100vw); font-family: var(--mono); text-align: center; box-shadow: 0 30px 80px var(--shadow-strong); }
.hid-touch-modal-icon { font-size: 40px; margin-bottom: 8px; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.hid-touch-modal-title { font-size: 18px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.hid-touch-modal-reason { font-size: 13px; color: var(--text); margin-bottom: 14px; line-height: 1.5; }
.hid-touch-modal-instruction { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.hid-touch-modal-instruction strong { color: var(--text); font-weight: 600; }
.hid-touch-modal-progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.hid-touch-modal-progress-bar { height: 100%; background: linear-gradient(90deg,var(--accent),var(--blue)); transition: width 0.24s linear; }
.hid-touch-modal-meta { font-size: 10px; color: var(--text-dim); margin-bottom: 14px; }
.hid-touch-modal-meta code { font-family: var(--mono); background: var(--bg); padding: 1px 6px; border-radius: 3px; }
.hid-touch-modal-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-family: var(--mono); font-size: 11px; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.hid-touch-modal-cancel:hover { background: var(--bg); }
.landing { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); overflow-x: hidden; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0px auto; padding: 20px 24px; }
.landing-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.landing-brand-mark { width: 26px; height: 26px; color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-glow)); }
.landing-brand-mark svg { width: 100%; height: 100%; fill: currentcolor; }
.landing-brand-word { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; color: var(--text); font-weight: 600; }
.landing-nav-links { display: flex; align-items: center; gap: 22px; }
.landing-nav-link { color: var(--text-muted); text-decoration: none; font-size: 14px; letter-spacing: 0.02em; transition: color var(--transition); }
.landing-nav-link:hover { color: var(--text); }
@media (max-width: 900px) {
  .landing-nav { align-items: flex-start; gap: 16px; }
  .landing-nav-links { flex-wrap: wrap; justify-content: flex-end; gap: 12px 16px; }
}
.landing-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-contrast); font-family: var(--sans); font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 18px; font-size: 14px; transition: transform var(--transition),box-shadow var(--transition),background var(--transition); }
.landing-btn:hover { box-shadow: 0 0 24px var(--accent-glow); transform: translateY(-1px); }
.landing-btn-sm { padding: 7px 14px; font-size: 13px; }
.landing-btn-lg { padding: 13px 26px; font-size: 15px; }
.landing-btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.landing-btn-ghost:hover { border-color: var(--accent); box-shadow: none; background: var(--accent-dim); }
.landing-hero { max-width: 900px; margin: 0px auto; padding: 90px 24px 70px; text-align: center; background: radial-gradient(60% 60% at 50% 0%,var(--accent-dim),transparent 70%); }
.landing-hero-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.28em; color: var(--accent); margin-bottom: 20px; }
.landing-hero-title { font-size: clamp(38px, 7vw, 68px); line-height: 1.03; font-weight: 700; letter-spacing: -0.01em; margin: 0px 0px 22px; }
.landing-accent { color: var(--accent); }
.landing-hero-sub { font-size: clamp(16px, 2.3vw, 19px); font-weight: 500; line-height: 1.6; color: var(--text-muted); max-width: 620px; margin: 0px auto 34px; }
.landing-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.landing-hero-note { margin-top: 26px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }
.landing-hero-biz { display: inline-block; margin-top: 18px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; padding: 0px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; color: var(--blue, #60a5fa); transition: opacity 0.15s; }
.landing-hero-biz:hover { opacity: 0.75; text-decoration: underline; }
.landing-offer { display: flex; flex-direction: column; align-items: center; padding: 30px 24px 70px; }
.landing-offer .landing-section-title { margin-bottom: 16px; }
.landing-offer-intro { max-width: 620px; text-align: center; color: var(--text-muted); font-size: 15px; font-weight: 500; line-height: 1.6; margin: 0px auto 32px; }
.landing-offer-intro strong { color: var(--accent); }
.landing-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 36px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; }
.landing-tab { appearance: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; color: var(--text-muted); font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background var(--transition),color var(--transition); }
.landing-tab:hover { color: var(--text); }
.landing-tab.is-active { background: var(--accent); color: var(--accent-contrast); }
.landing-business { width: 100%; max-width: 1120px; }
.landing-business .landing-partners-sub { text-align: center; max-width: 720px; margin: 0px auto 40px; }
.landing-apps-section { padding: 24px 24px 60px; }
.landing-apps { width: 100%; max-width: 900px; margin: 0px auto; text-align: center; }
.landing-apps-eyebrow { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.landing-apps-title { font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0px auto; max-width: 640px; }
.landing-apps-stage { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(24px, 6vw, 72px); margin-top: 46px; }
.landing-apps-stage::before { content: ""; position: absolute; inset: -4% 6% 14%; z-index: -1; background: radial-gradient(46% 55% at 50% 40%,var(--accent-dim),transparent 70%); pointer-events: none; }
.landing-app { flex: 0 1 300px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.landing-app-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.landing-app-name { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--text); }
.landing-app-role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.landing-app-body { font-size: 13.5px; font-weight: 500; line-height: 1.6; color: var(--text-muted); margin: 8px 0px 0px; max-width: 300px; }
.app-phone { width: min(200px, 62vw); padding: 7px; margin-bottom: 22px; border-radius: 30px; background: linear-gradient(160deg,var(--card-hover),var(--surface)); border: 1px solid var(--border); box-shadow: 0 28px 66px var(--shadow-strong),inset 0 1px 0 var(--surface-highlight),0 0 56px var(--accent-glow); transition: transform var(--transition),box-shadow var(--transition); }
.app-phone-left { transform: rotate(-4deg); }
.app-phone-right { transform: rotate(4deg); }
.app-phone-left:hover, .app-phone-right:hover { transform: translateY(-8px) rotate(0deg); box-shadow: 0 38px 82px var(--shadow-strong),inset 0 1px 0 var(--surface-highlight),0 0 84px var(--accent-glow); }
.app-phone-screen { position: relative; aspect-ratio: 9 / 19; overflow: hidden; border-radius: 24px; padding: 24px 12px 14px; background: linear-gradient(180deg,var(--surface),var(--card)); display: flex; flex-direction: column; gap: 9px; }
.app-phone-screen::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translate(-50%); width: 46px; height: 5px; border-radius: 3px; background: var(--border); }
.ui-head { display: flex; align-items: center; gap: 8px; }
.ui-brand { width: 15px; height: 15px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); flex: 0 0 auto; }
.ui-line { height: 7px; border-radius: 4px; background: var(--card-hover); flex: 1 1 0%; }
.ui-line-sm { flex: 0 0 42%; }
.ui-chart { border-radius: 12px; background: var(--card); border: 1px solid var(--border-muted); padding: 10px; }
.ui-chart svg { width: 100%; height: 42px; display: block; }
.ui-chart polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--accent-glow)); }
.ui-tile { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--border-muted); }
.ui-toggle { width: 26px; height: 15px; border-radius: 999px; background: var(--card-hover); flex: 0 0 auto; position: relative; }
.ui-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-dim); transition: none; }
.ui-toggle.is-on { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.ui-toggle.is-on::after { left: 13px; background: rgb(255, 255, 255); }
.ui-chip { width: 34px; height: 14px; border-radius: 999px; background: var(--accent-dim); flex: 0 0 auto; }
.ui-search { height: 15px; border-radius: 999px; background: var(--card); border: 1px solid var(--border-muted); flex: 0 0 auto; }
.ui-map { position: relative; flex: 1 1 0%; min-height: 120px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-muted); background: radial-gradient(circle at 30% 28%,var(--accent-dim),transparent 45%),linear-gradient(180deg,var(--card),var(--surface)); }
.ui-map::before { content: ""; position: absolute; inset: 0px; background-image: linear-gradient(var(--border-muted) 1px,transparent 1px),linear-gradient(90deg,var(--border-muted) 1px,transparent 1px); background-size: 22px 22px; opacity: 0.3; }
.ui-pin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); }
.ui-pin.is-active { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim),0 0 12px var(--accent-glow); }
.ui-pin-1 { top: 24%; left: 28%; }
.ui-pin-2 { top: 50%; left: 56%; }
.ui-pin-3 { top: 36%; left: 74%; }
.ui-sheet { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--border-muted); flex: 0 0 auto; }
.ui-round { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); flex: 0 0 auto; }
.ui-sheet-lines { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0%; }
@media (prefers-reduced-motion: reduce) {
  .app-phone-left:hover, .app-phone-right:hover { transform: rotate(0deg); }
}
.landing-offer-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; width: 100%; max-width: 960px; }
.landing-offer-grid > .landing-offer-card { flex: 1 1 380px; max-width: 460px; }
.landing-offer-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.landing-offer-card-business { border-color: var(--blue-dim); }
.landing-offer-card-business:hover, .landing-offer-card-business { box-shadow: 0 0 60px var(--shadow-strong),inset 0 1px 0 var(--blue-dim); }
.landing-offer-tag-alt { background: var(--blue); color: var(--blue-contrast); }
.landing-offer-amount-sm { font-size: 34px; letter-spacing: 0px; }
.landing-offer-card { position: relative; width: 100%; max-width: 460px; background: linear-gradient(180deg,var(--card),var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 30px 30px; text-align: center; box-shadow: 0 0 60px var(--shadow-strong),inset 0 1px 0 var(--surface-highlight); }
.landing-offer-tag { position: absolute; top: -11px; left: 50%; transform: translate(-50%); background: var(--accent); color: var(--accent-contrast); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.landing-offer-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 6px; }
.landing-offer-amount { font-size: 56px; font-weight: 700; letter-spacing: -0.02em; }
.landing-offer-per { color: var(--text-muted); font-size: 16px; }
.landing-offer-line { color: var(--text-muted); font-size: 15px; font-weight: 500; line-height: 1.5; margin: 0px auto 20px; max-width: 340px; }
.landing-offer-list { list-style: none; padding: 0px; margin: 0px 0px 26px; text-align: left; display: inline-block; }
.landing-offer-list li { position: relative; padding: 7px 0px 7px 26px; color: var(--text); font-size: 14px; border-bottom: 1px solid var(--border-muted); }
.landing-offer-list li:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.landing-offer-list li::before { content: "›"; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }
.landing-offer-btn { width: 100%; }
.landing-offer-fine { margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.landing-offer-card-free { background: var(--surface); box-shadow: 0 0 40px var(--shadow-soft),inset 0 1px 0 var(--surface-highlight); }
.landing-offer-tag-free { background: var(--card-hover); color: var(--text-muted); border: 1px solid var(--border); }
.landing-offer-card-free .landing-offer-list li::before { color: var(--text-muted); }
.landing-offer-card-business { border-color: var(--blue-dim); box-shadow: 0 0 60px var(--shadow-strong),inset 0 1px 0 var(--blue-dim); }
.landing-offer-tag-alt { background: var(--blue); color: var(--blue-contrast); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
.landing-offer-card-business .landing-offer-list li::before { color: var(--blue); }
.landing-offer-grid-3 { max-width: 1120px; }
.landing-offer-grid-3 > .landing-offer-card { flex: 1 1 300px; max-width: 380px; }
.landing-offer-card-featured { border-color: var(--accent-border); }
.landing-business-detail { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--border); }
.landing-offer { position: relative; isolation: isolate; }
.landing-offer::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: radial-gradient(120% 55% at 50% 10%,var(--accent-dim),transparent 62%); pointer-events: none; }
.landing-offer-card { transition: transform var(--transition),box-shadow var(--transition),border-color var(--transition); }
.landing-offer-card:hover { transform: translateY(-4px); border-color: var(--accent-border); }
.landing-offer-card-featured { border-color: var(--accent); background: linear-gradient(180deg,var(--accent-dim),transparent 42%),linear-gradient(180deg,var(--card),var(--surface)); box-shadow: 0 0 0 1px var(--accent-border),0 18px 60px var(--shadow-strong),0 0 70px var(--accent-glow); }
.landing-offer-card-featured:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--accent),0 26px 72px var(--shadow-strong),0 0 92px var(--accent-glow); }
.landing-offer-card-featured .landing-offer-tag { background: linear-gradient(90deg,var(--accent),var(--blue)); box-shadow: 0 4px 18px var(--accent-glow); padding: 5px 16px; }
.landing-offer-card-featured .landing-offer-amount { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.landing-offer-card-featured .landing-offer-list li::before { content: "✓"; left: 3px; font-size: 12px; }
@media (min-width: 1000px) {
  .landing-offer-grid-3 > .landing-offer-card-featured { z-index: 1; transform: scale(1.045); }
  .landing-offer-grid-3 > .landing-offer-card-featured:hover { transform: scale(1.045) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-offer-card, .landing-offer-card:hover, .landing-offer-card-featured:hover, .landing-offer-grid-3 > .landing-offer-card-featured, .landing-offer-grid-3 > .landing-offer-card-featured:hover { transform: none; }
}
.landing-partners { max-width: 1120px; margin: 0px auto; padding: 60px 24px 40px; border-top: 1px solid var(--border); }
.landing-partners-head { max-width: 720px; margin: 0px auto 40px; text-align: center; }
.landing-partners-head .landing-section-title { margin-bottom: 16px; }
.landing-partners-sub { color: var(--text-muted); font-size: 16px; font-weight: 500; line-height: 1.65; margin: 0px; }
.landing-partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.landing-partner-cap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; transition: border-color var(--transition),transform var(--transition); }
.landing-partner-cap:hover { border-color: var(--accent); transform: translateY(-2px); }
.landing-partner-cap-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent); background: var(--accent-dim); border-radius: var(--radius); margin-bottom: 14px; }
.landing-partner-cap-title { font-size: 16px; font-weight: 600; margin: 0px 0px 6px; }
.landing-partner-cap-body { font-size: 13.5px; font-weight: 500; line-height: 1.6; color: var(--text-muted); margin: 0px; }
.landing-verticals { text-align: center; margin: 44px auto 8px; max-width: 900px; }
.landing-verticals-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
.landing-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.landing-chip { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--text); background: var(--card); transition: border-color var(--transition),color var(--transition); }
.landing-chip:hover { border-color: var(--accent); color: var(--accent); }
.landing-partners .landing-hero-cta { margin-top: 40px; }
.landing-features > .landing-partners-sub { text-align: center; max-width: 720px; margin: -24px auto 42px; }
.landing-engage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; max-width: 900px; margin: 0px auto; }
.landing-engage-card { position: relative; background: linear-gradient(180deg,var(--card),var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px; transition: transform var(--transition),box-shadow var(--transition),border-color var(--transition); }
.landing-engage-card:hover { transform: translateY(-4px); }
.landing-engage-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 23px; border-radius: var(--radius); margin-bottom: 18px; }
.landing-engage-title { font-size: 20px; font-weight: 600; margin: 0px 0px 10px; }
.landing-engage-body { font-size: 14.5px; font-weight: 500; line-height: 1.65; color: var(--text-muted); margin: 0px; }
.landing-engage-card-hosted { border-color: var(--accent-border); box-shadow: 0 0 50px var(--shadow-strong),inset 0 1px 0 var(--surface-highlight); }
.landing-engage-card-hosted:hover { border-color: var(--accent); box-shadow: 0 14px 60px var(--shadow-strong),0 0 64px var(--accent-glow); }
.landing-engage-card-hosted .landing-engage-icon { color: var(--accent); background: var(--accent-dim); }
.landing-engage-card-partner { border-color: var(--accent-border); box-shadow: 0 0 50px var(--shadow-strong),inset 0 1px 0 var(--surface-highlight); }
.landing-engage-card-partner:hover { border-color: var(--accent); box-shadow: 0 14px 60px var(--shadow-strong),0 0 64px var(--accent-glow); }
.landing-engage-card-partner .landing-engage-icon { color: var(--accent); background: var(--accent-dim); }
.landing-partners { position: relative; isolation: isolate; }
.landing-partners::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: radial-gradient(90% 40% at 50% 0%,var(--accent-dim),transparent 60%); pointer-events: none; }
.landing-partner-cap { background: linear-gradient(180deg,var(--card),var(--surface)); box-shadow: 0 0 28px var(--shadow-soft); }
.landing-partner-cap:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 44px var(--shadow-strong),0 0 44px var(--accent-glow); }
.landing-section-eyebrow { display: block; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.landing-eyebrow-num { color: var(--accent); margin-right: 10px; }
.landing-band { position: relative; isolation: isolate; }
.landing-band::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0px -100vmax); }
.landing-stack-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 48px auto 0px; max-width: 700px; }
.stack-node { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 104px; padding: 18px; border-radius: var(--radius-lg); background: linear-gradient(180deg,var(--card),var(--surface)); border: 1px solid var(--border); box-shadow: 0 10px 30px var(--shadow-soft); }
.stack-node-core { border-color: var(--accent-border); box-shadow: 0 14px 44px var(--shadow-strong),0 0 46px var(--accent-glow); }
.stack-node-glyph { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 21px; color: var(--accent); background: var(--accent-dim); border-radius: 12px; }
.stack-node-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text); }
.stack-link { position: relative; flex: 0 0 32px; height: 2px; margin: 0px -1px; background: linear-gradient(90deg,var(--accent-dim),var(--accent),var(--accent-dim)); }
.stack-link::after { content: ""; position: absolute; top: 50%; left: 0px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: 2.2s linear 0s infinite normal none running stack-flow; }
@keyframes stack-flow { 
  0% { left: 0px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (max-width: 560px) {
  .landing-stack-flow { flex-direction: column; gap: 12px; }
  .stack-link { display: none; }
}
.landing-layer { position: relative; }
.landing-layer-step { position: absolute; top: 16px; right: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); opacity: 0.55; }
.landing.reveal-armed .landing-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s, transform 0.6s; }
.landing.reveal-armed .landing-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stack-link::after { animation: auto ease 0s 1 normal none running none; opacity: 0; }
  .landing.reveal-armed .landing-reveal { opacity: 1; transform: none; }
}
.landing-section-title { text-align: center; font-size: clamp(26px, 4vw, 36px); font-weight: 700; margin: 0px 0px 44px; }
.landing-features { max-width: 1120px; margin: 0px auto; padding: 40px 24px 70px; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.landing-feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; transition: border-color var(--transition),transform var(--transition); }
.landing-feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.landing-feature-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--accent); background: var(--accent-dim); border-radius: var(--radius); margin-bottom: 16px; }
.landing-feature-title { font-size: 18px; font-weight: 600; margin: 0px 0px 8px; }
.landing-feature-body { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--text-muted); margin: 0px; }
.landing-final { text-align: center; padding: 70px 24px 90px; background: radial-gradient(70% 100% at 50% 100%,var(--accent-dim),transparent 70%); }
.landing-final-title { font-size: clamp(26px, 5vw, 40px); font-weight: 700; margin: 0px 0px 12px; }
.landing-final-sub { color: var(--text-muted); font-size: 17px; margin: 0px 0px 30px; }
.landing-footer { max-width: 1120px; margin: 0px auto; padding: 56px 24px 28px; border-top: 1px solid var(--border); }
.landing-footer-main { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; padding-bottom: 40px; }
.landing-footer-brand-block { max-width: 300px; }
.landing-footer-brand-block .landing-brand { margin-bottom: 14px; }
.landing-footer-tagline { color: var(--text-muted); font-size: 13.5px; font-weight: 500; line-height: 1.6; margin: 0px 0px 14px; }
.landing-footer-email { font-family: var(--mono); font-size: 13px; color: var(--text); transition: color var(--transition); }
.landing-footer-email:hover { color: var(--accent); }
.landing-footer-col { display: flex; flex-direction: column; gap: 10px; }
.landing-footer-heading { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.landing-footer-col a { color: var(--text-muted); font-size: 14px; transition: color var(--transition); }
.landing-footer-col a:hover { color: var(--text); }
.landing-footer-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border); }
.landing-footer-copy { color: var(--text-dim); font-size: 13px; }
.landing-footer-meta { display: flex; gap: 18px; align-items: center; }
.landing-footer-meta span { color: var(--text-dim); font-size: 13px; }
.landing-footer-meta a { color: var(--text-dim); font-size: 13px; transition: color var(--transition); }
.landing-footer-meta a:hover { color: var(--accent); }
.landing-footer-links { display: flex; gap: 20px; }
@media (max-width: 860px) {
  .landing-footer-main { grid-template-columns: 1fr 1fr; gap: 28px; }
  .landing-footer-brand-block { grid-column: 1 / -1; max-width: none; }
}
.landing-legal { max-width: 760px; margin: 0px auto; padding: 56px 24px 40px; }
.landing-legal h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 700; margin: 0px 0px 10px; }
.landing-legal h2 { font-size: 20px; font-weight: 600; margin: 32px 0px 10px; }
.landing-legal p, .landing-legal li { color: var(--text-muted); font-weight: 500; line-height: 1.7; font-size: 15px; }
.landing-legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.landing-legal li strong, .landing-legal p strong { color: var(--text); }
.landing-legal a { color: var(--accent); }
.landing-legal a:hover { text-decoration: underline; }
.landing-legal-lead { margin-bottom: 8px; color: var(--text) !important; font-size: 17px !important; }
.landing-legal-updated { font-family: var(--mono); font-size: 12px; color: var(--text-dim) !important; margin: 0px 0px 24px !important; }
.landing-legal-note { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 14px 16px; color: var(--text-dim); font-size: 13px; line-height: 1.6; margin-bottom: 28px; }
.landing-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.landing-contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; }
.landing-contact-card a { display: block; font-family: var(--mono); font-size: 15px; color: var(--accent); margin: 6px 0px 8px; }
.landing-contact-card p { font-size: 13.5px; margin: 0px; }
.offer-hero { max-width: 980px; margin: 0px auto; padding: 72px 24px 52px; text-align: center; background: radial-gradient(60% 70% at 50% 0%,var(--blue-dim),transparent 72%); }
.offer-hero-compact { padding-bottom: 34px; }
.offer-title { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; font-weight: 700; margin: 0px 0px 22px; }
.offer-subtitle { max-width: 720px; margin: 0px auto 32px; color: var(--text-muted); font-size: clamp(16px, 2.2vw, 19px); font-weight: 500; line-height: 1.65; }
.offer-index-count, .offer-detail-pilot { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font-family: var(--mono); font-size: 12px; line-height: 1.5; padding: 8px 12px; }
.offer-detail-pilot { margin: -10px auto 28px; }
.offer-section { max-width: 1120px; margin: 0px auto; padding: 22px 24px 38px; }
.offer-two-column, .offer-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.offer-category-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.offer-category-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--text-muted); font-size: 13px; font-weight: 600; line-height: 1.25; padding: 8px 12px; transition: border-color var(--transition),color var(--transition),background var(--transition); }
.offer-category-chip:hover { border-color: var(--blue); background: var(--card-hover); color: var(--text); }
.offer-category-chip strong { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: var(--radius); background: var(--blue-dim); color: var(--blue); font-family: var(--mono); font-size: 11px; }
.offer-category-section { scroll-margin-top: 72px; }
.offer-category-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; padding-bottom: 14px; }
.offer-category-heading h2 { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; margin: 0px; }
.offer-category-heading span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font-family: var(--mono); font-size: 13px; }
.offer-card-link { color: inherit; text-decoration: none; }
.offer-card, .offer-panel { height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; transition: border-color var(--transition),transform var(--transition); }
.offer-card:hover, .offer-panel:hover { border-color: var(--blue); transform: translateY(-2px); }
.offer-card-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.offer-card h2, .offer-card h3, .offer-panel h2 { font-size: 20px; line-height: 1.3; margin: 0px 0px 10px; }
.offer-card p, .offer-panel p { color: var(--text-muted); font-size: 14px; font-weight: 500; line-height: 1.65; margin: 0px 0px 16px; }
.offer-card-pilot { border: 1px solid var(--border-muted); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.45; margin: 0px 0px 16px; padding: 10px 12px; }
.offer-card ul, .offer-check-list { list-style: none; padding: 0px; margin: 0px; display: flex; flex-direction: column; gap: 10px; }
.offer-card li, .offer-check-list li { position: relative; padding-left: 24px; color: var(--text); font-size: 14px; line-height: 1.55; }
.offer-card li::before, .offer-check-list li::before { content: "›"; position: absolute; left: 6px; color: var(--blue); font-weight: 700; }
.offer-panel-accent { border-color: var(--blue-dim); background: linear-gradient(180deg,var(--card),var(--surface)); }
.offer-note { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-muted); font-size: 14px; font-weight: 500; line-height: 1.7; padding: 18px 20px; }
@media (max-width: 640px) {
  .landing-nav-links { gap: 14px; }
  .landing-nav-link[href="#engage"], .landing-nav-link[href="#messaging"], .landing-nav-link[href="#capabilities"], .landing-nav-link[href="#stack"], .landing-nav-link[href="#contact"], .landing-nav-link[href="#features"], .landing-nav-link[href="#pricing"], .landing-nav-link[href="#partners"] { display: none; }
  .offer-category-heading { align-items: flex-start; flex-direction: column; }
  .offer-category-chip { width: 100%; justify-content: space-between; }
}
.docs-root { --docs-sidebar: 244px; --docs-toc: 208px; --docs-gap: 44px; --docs-measure: 764px; --docs-nav-h: 65px; }
.docs-nav { position: sticky; top: 0px; z-index: 20; max-width: none; padding: 16px 28px; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-muted); }
.docs-nav-tag { margin-left: 10px; padding: 2px 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-dim); }
.docs-menu-btn { display: none; align-items: center; gap: 7px; padding: 7px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.docs-menu-btn:hover { color: var(--text); border-color: var(--accent-border); }
.docs-shell { display: grid; grid-template-columns: var(--docs-sidebar) minmax(0,1fr) var(--docs-toc); gap: var(--docs-gap); max-width: 1400px; margin: 0px auto; padding: 40px 28px 88px; align-items: start; }
.docs-sidebar { position: sticky; top: calc(var(--docs-nav-h) + 24px); max-height: calc(100vh - var(--docs-nav-h) - 48px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.docs-search { position: relative; margin-bottom: 26px; }
.docs-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; color: var(--text-dim); pointer-events: none; }
.docs-search-input { width: 100%; padding: 8px 10px 8px 32px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition),box-shadow var(--transition); }
.docs-search-input::placeholder { color: var(--text-dim); }
.docs-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.docs-sidebar-heading { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.docs-sidebar-section { margin-bottom: 26px; }
.docs-sidebar-link { display: block; padding: 5px 0px 5px 12px; margin-left: -1px; border-left: 1px solid var(--border); color: var(--text-muted); font-size: 15px; font-weight: 500; text-decoration: none; transition: color var(--transition),border-color var(--transition); }
.docs-sidebar-link:hover { color: var(--text); border-left-color: var(--text-dim); }
.docs-sidebar-link.is-active { color: var(--accent); font-weight: 600; border-left-color: var(--accent); }
.docs-search-results { display: flex; flex-direction: column; gap: 2px; }
.docs-search-hit { display: block; padding: 9px 11px; border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; transition: background var(--transition),border-color var(--transition); }
.docs-search-hit:hover { background: var(--row-hover); border-color: var(--border-muted); }
.docs-search-hit-title { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.docs-search-hit-context { display: block; margin-top: 2px; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.docs-main { min-width: 0px; }
.docs-article { max-width: var(--docs-measure); }
.docs-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-dim); }
.docs-eyebrow { color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; }
.docs-meta-sep { opacity: 0.5; }
.docs-body { font-size: 17px; line-height: 1.75; letter-spacing: 0.006em; color: var(--text-muted); }
.docs-body > :first-child { margin-top: 0px; }
.docs-body h1 { margin: 0px 0px 20px; font-size: clamp(31px, 4.4vw, 41px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); }
.docs-body h2 { margin: 56px 0px 16px; padding-top: 22px; font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--text); border-top: 1px solid var(--border-muted); }
.docs-body h3 { margin: 34px 0px 12px; font-size: 19px; font-weight: 600; color: var(--text); }
.docs-body h4 { margin: 26px 0px 10px; font-size: 16px; font-weight: 600; color: var(--text); }
.docs-anchor { margin-left: 9px; color: var(--text-dim); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity var(--transition),color var(--transition); }
.docs-body :is(h1, h2, h3, h4):hover .docs-anchor, .docs-anchor:focus-visible { opacity: 1; }
.docs-anchor:hover { color: var(--accent); }
.docs-body p { margin: 0px 0px 18px; }
.docs-body .docs-lead { font-size: 19px; line-height: 1.65; color: var(--text); }
.docs-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-border); transition: border-color var(--transition),background var(--transition); }
.docs-body a:hover { border-bottom-color: var(--accent); background: var(--accent-dim); }
.docs-body a.docs-anchor, .docs-body .docs-toc-link { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.docs-body a.docs-link-external::after { content: "↗"; display: inline-block; margin-left: 3px; font-size: 0.8em; opacity: 0.7; }
.docs-body :is(ul, ol) { margin: 0px 0px 18px; padding-left: 24px; }
.docs-body li { margin-bottom: 7px; }
.docs-body li::marker { color: var(--text-dim); }
.docs-body ul.contains-task-list { padding-left: 2px; list-style: none; }
.docs-body li.task-list-item { display: flex; align-items: flex-start; gap: 9px; }
.docs-body .task-list-item-checkbox { margin-top: 7px; accent-color: var(--accent); flex: 0 0 auto; }
.docs-body .task-list-item-label { cursor: default; }
.docs-body :is(ul, ol) :is(ul, ol) { margin: 7px 0px 0px; }
.docs-body strong { color: var(--text); font-weight: 600; }
.docs-body blockquote { margin: 0px 0px 20px; padding: 2px 0px 2px 18px; border-left: 2px solid var(--accent-border); color: var(--text-muted); font-style: italic; }
.docs-body blockquote p:last-child { margin-bottom: 0px; }
.docs-body hr { margin: 42px 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-top: 1px solid var(--border); }
.docs-body :not(pre) > code { padding: 2px 5px; font-family: var(--mono); font-size: 0.855em; color: var(--text); background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: var(--radius); word-break: break-word; }
.docs-body mark { padding: 1px 3px; color: var(--text); background: var(--warning-dim); border-radius: 2px; }
.docs-body ins { text-decoration: none; border-bottom: 2px solid var(--green); }
.docs-body abbr { text-decoration-style: dotted; text-underline-offset: 3px; cursor: help; }
.docs-body :is(sub, sup) { font-size: 0.72em; }
.docs-body dl { margin: 0px 0px 22px; }
.docs-body dt { margin-top: 16px; color: var(--text); font-weight: 600; font-size: 16px; }
.docs-body dd { margin: 5px 0px 0px; padding-left: 16px; border-left: 1px solid var(--border); }
.docs-table-scroll { margin: 0px 0px 22px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.docs-table-scroll table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.docs-table-scroll th { padding: 10px 14px; text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); background: var(--surface); border-bottom: 1px solid var(--border); white-space: nowrap; }
.docs-table-scroll td { padding: 10px 14px; border-bottom: 1px solid var(--border-muted); vertical-align: top; }
.docs-table-scroll tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.docs-table-scroll tbody tr:hover { background: var(--row-subtle); }
.docs-code-block { position: relative; margin: 0px 0px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.docs-code-title { padding: 8px 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-muted); background: var(--bg-elev); border-bottom: 1px solid var(--border); }
.docs-code-scroll { overflow-x: auto; }
.docs-code-block pre { margin: 0px; padding: 15px 16px; font-family: var(--mono); font-size: 13.5px; line-height: 1.65; tab-size: 2; background: transparent !important; }
.docs-code-block code { font-family: var(--mono); }
.docs-body .shiki, .docs-body .shiki span { color: var(--shiki-light); background-color: transparent; }
:root[data-theme="dark"] .docs-body .shiki, :root[data-theme="dark"] .docs-body .shiki span { color: var(--shiki-dark); }
.docs-body pre.docs-code-plain { margin: 0px; padding: 15px 16px; color: var(--text-muted); background: transparent; font-family: var(--mono); font-size: 13.5px; line-height: 1.65; white-space: pre; }
.docs-code-block .line { display: inline-block; width: 100%; }
.docs-line-highlight { background: color-mix(in srgb,var(--accent) 19%,transparent); box-shadow: inset 2px 0 0 var(--accent); margin: 0px -16px; padding: 0px 16px; width: calc(100% + 32px) !important; }
.docs-code-numbered code { counter-reset: docs-line 0; }
.docs-code-numbered .line::before { counter-increment: docs-line 1; content: counter(docs-line); display: inline-block; width: 1.9em; margin-right: 1.1em; text-align: right; color: var(--text-dim); opacity: 0.65; user-select: none; }
.docs-copy { position: absolute; top: 8px; right: 8px; padding: 4px 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; opacity: 0; transition: opacity var(--transition),color var(--transition),border-color var(--transition); }
.docs-code-block:hover .docs-copy, .docs-copy:focus-visible { opacity: 1; }
.docs-copy:hover { color: var(--text); border-color: var(--accent-border); }
.docs-copy.is-copied { color: var(--green); border-color: var(--green); opacity: 1; }
.docs-code-title ~ .docs-code-scroll + .docs-copy, .docs-code-block:has(.docs-code-title) .docs-copy { top: 40px; }
.docs-codegroup { margin: 0px 0px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.docs-codegroup-tabs { display: flex; overflow-x: auto; background: var(--bg-elev); border-bottom: 1px solid var(--border); }
.docs-tab { padding: 9px 15px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-dim); background: transparent; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: initial; cursor: pointer; white-space: nowrap; transition: color var(--transition),border-color var(--transition); }
.docs-tab:hover { color: var(--text); }
.docs-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.docs-codegroup-panel { display: none; }
.docs-codegroup-panel.is-active { display: block; }
.docs-codegroup .docs-code-block { margin: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; background: transparent; }
.docs-admonition { --docs-adm: var(--notice); --docs-adm-dim: var(--notice-dim); position: relative; margin: 0px 0px 22px; padding: 15px 18px 15px 17px; background: var(--docs-adm-dim); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--docs-adm); border-radius: var(--radius); font-size: 16px; }
.docs-admonition-title { margin: 0px 0px 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--docs-adm); }
.docs-admonition > p:last-child { margin-bottom: 0px; }
.docs-admonition :is(pre, .docs-code-block, .docs-codegroup) { margin-top: 12px; margin-bottom: 0px; }
.docs-admonition-note { --docs-adm: var(--text-muted); --docs-adm-dim: var(--row-subtle); }
.docs-admonition-info { --docs-adm: var(--blue); --docs-adm-dim: var(--blue-dim); }
.docs-admonition-tip { --docs-adm: var(--accent); --docs-adm-dim: var(--accent-dim); }
.docs-admonition-success { --docs-adm: var(--green); --docs-adm-dim: var(--green-dim); }
.docs-admonition-warning, .docs-admonition-caution { --docs-adm: var(--orange); --docs-adm-dim: var(--orange-dim); }
.docs-admonition-danger { --docs-adm: var(--red); --docs-adm-dim: var(--red-dim); }
.docs-details { margin: 0px 0px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.docs-details > summary { padding: 11px 16px; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; transition: background var(--transition); }
.docs-details > summary::-webkit-details-marker { display: none; }
.docs-details > summary::before { content: "▸"; display: inline-block; margin-right: 9px; color: var(--accent); transition: transform var(--transition); }
.docs-details[open] > summary::before { transform: rotate(90deg); }
.docs-details > summary:hover { background: var(--row-hover); }
.docs-details-body { padding: 4px 16px 14px; border-top: 1px solid var(--border-muted); }
.docs-details-body > :last-child { margin-bottom: 0px; }
.docs-api { margin: 0px 0px 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.docs-api-head { display: flex; align-items: center; gap: 11px; padding: 11px 15px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.docs-api-method { padding: 3px 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; border-radius: var(--radius); color: var(--accent-contrast); background: var(--text-dim); }
.docs-api-method-get { background: var(--blue); color: var(--blue-contrast); }
.docs-api-method-post, .docs-api-method-put, .docs-api-method-patch { background: var(--green); color: var(--bg); }
.docs-api-method-delete { background: var(--red); color: var(--bg); }
.docs-api-path { font-family: var(--mono); font-size: 13.5px; color: var(--text); word-break: break-all; background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 0px !important; }
.docs-api-body { padding: 13px 15px; font-size: 15.5px; }
.docs-api-body > :last-child { margin-bottom: 0px; }
.docs-body figure { margin: 0px 0px 22px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: center; }
.docs-body figure img { max-width: 100%; height: auto; }
.docs-body figcaption { margin-top: 11px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--text-dim); }
.docs-mermaid { overflow-x: auto; }
.docs-mermaid svg { max-width: 100%; height: auto; }
.docs-mermaid svg :is(text, .nodeLabel, .edgeLabel, .titleText) { font-family: var(--sans) !important; }
.docs-mermaid-error { margin: 0px 0px 10px; font-family: var(--mono); font-size: 12px; color: var(--red); text-align: left; }
.docs-body .katex-display { margin: 22px 0px; padding: 4px 0px; overflow: auto hidden; }
.docs-body .footnotes { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 15px; }
.docs-body .footnotes-list { padding-left: 20px; }
.docs-body .footnote-backref { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; margin-left: 5px; }
.docs-body .footnote-ref a { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; font-family: var(--mono); font-size: 0.8em; }
.docs-toc { position: sticky; top: calc(var(--docs-nav-h) + 24px); max-height: calc(100vh - var(--docs-nav-h) - 48px); overflow-y: auto; scrollbar-width: thin; }
.docs-toc-link { display: block; padding: 4px 0px 4px 12px; border-left: 1px solid var(--border); color: var(--text-dim); font-size: 13px; line-height: 1.45; text-decoration: none; transition: color var(--transition),border-color var(--transition); }
.docs-toc-link:hover { color: var(--text); }
.docs-toc-link.is-active { color: var(--accent); border-left-color: var(--accent); }
.docs-toc-d3 { padding-left: 24px; font-size: 12.5px; }
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--border); }
.docs-pager-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--transition),background var(--transition); }
.docs-pager-link:hover { border-color: var(--accent-border); background: var(--card-hover); }
.docs-pager-next { text-align: right; }
.docs-pager-dir { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.docs-pager-title { color: var(--text); font-size: 16px; font-weight: 600; }
.docs-skeleton { display: flex; flex-direction: column; gap: 14px; max-width: var(--docs-measure); }
.docs-skeleton-line { height: 15px; border-radius: var(--radius); background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 200% 100%; animation: 1.4s ease-in-out 0s infinite normal none running docs-shimmer; }
.docs-skeleton-title { height: 34px; width: 55%; margin-bottom: 12px; }
.docs-skeleton-short { width: 68%; }
@keyframes docs-shimmer { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-skeleton-line { animation: auto ease 0s 1 normal none running none; }
}
.docs-error { max-width: 520px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.docs-error-title { margin: 0px 0px 8px; font-size: 20px; font-weight: 600; color: var(--text); }
.docs-error-body { margin: 0px 0px 18px; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); word-break: break-word; }
@media (max-width: 1180px) {
  .docs-shell { grid-template-columns: var(--docs-sidebar) minmax(0,1fr); --docs-gap: 34px; }
  .docs-toc { display: none; }
}
@media (max-width: 860px) {
  .docs-nav { padding: 14px 18px; }
  .docs-nav .landing-brand-word { white-space: nowrap; }
  .docs-nav-tag, .docs-nav-wide { display: none; }
  .docs-menu-btn { display: inline-flex; }
  .docs-shell { grid-template-columns: minmax(0px, 1fr); padding: 24px 18px 64px; }
  .docs-sidebar { display: none; position: static; max-height: none; padding: 16px; margin-bottom: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .docs-sidebar.is-open { display: block; }
  .docs-body { font-size: 16.5px; }
  .docs-body h2 { margin-top: 40px; font-size: 23px; }
  .docs-pager { grid-template-columns: minmax(0px, 1fr); }
  .docs-copy { opacity: 1; }
}