:root {
  --bg: #e9eef5;
  --surface: #f8fafc;
  --surface-2: #e3e9f1;
  --ink: #172033;
  --muted: #687386;
  --faint: #8c98aa;
  --line: #d3dce8;
  --line-strong: #bdcad9;
  --primary: #3569c8;
  --primary-strong: #2854a4;
  --primary-soft: #dce7f7;
  --accent: #eca84b;
  --danger: #d15454;
  --danger-soft: #fbe9e9;
  --success: #1f9d70;
  --shadow: 0 18px 60px rgba(30, 47, 72, .14);
  --radius: 12px;
  --sidebar: #101827;
  --sidebar-ink: #eef4ff;
  --font: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --speed: 180ms;
  --row-height: 48px;
}

body[data-theme="bright"] {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #edf2f8;
  --ink: #101828;
  --muted: #667085;
  --faint: #98a2b3;
  --line: #dce3ec;
  --line-strong: #c8d2df;
  --primary: #2f6fed;
  --primary-strong: #1e55c7;
  --primary-soft: #e5efff;
  --shadow: 0 18px 60px rgba(25, 47, 84, .12);
}

body[data-theme="midnight"] {
  --bg: #0b1220;
  --surface: #111b2d;
  --surface-2: #19253a;
  --ink: #edf3fc;
  --muted: #9caac0;
  --faint: #718198;
  --line: #25334a;
  --line-strong: #344761;
  --primary: #5d8ff0;
  --primary-strong: #8baff7;
  --primary-soft: #1c3158;
  --accent: #d6a15a;
  --danger: #ec7777;
  --danger-soft: #3b242c;
  --sidebar: #070d18;
  --sidebar-ink: #edf3fc;
  --shadow: 0 18px 60px rgba(0, 0, 0, .34);
}

body[data-theme="paper"] {
  --bg: #f7f3ec;
  --surface: #fffdf9;
  --surface-2: #f0ebe1;
  --ink: #201e19;
  --muted: #786f61;
  --faint: #a89e8e;
  --line: #e3ddd2;
  --line-strong: #cec5b7;
  --primary: #8b4f35;
  --primary-strong: #6b3b27;
  --primary-soft: #f1e3da;
  --accent: #b88740;
  --sidebar: #27231d;
  --sidebar-ink: #f7f1e9;
}

body[data-density="compact"] { --row-height: 40px; }
body[data-motion="off"] *, body[data-motion="off"] *::before, body[data-motion="off"] *::after { animation: none !important; transition: none !important; }
body[data-motion="off"] .login-sparks i { opacity: .62; transform: rotate(var(--spark-angle)) translateX(var(--spark-mid)) scaleX(.72); }

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; text-wrap: pretty; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select, input { outline: none; }
button:focus-visible, select:focus-visible, input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.is-hidden { display: none !important; }

/* Login */
.login-screen { --login-pointer-x: 36%; --login-pointer-y: 44%; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(410px, .8fr); background: radial-gradient(circle at 18% 18%, rgba(34, 104, 190, .12), transparent 30%), linear-gradient(135deg, #070d19 0%, #09111f 52%, #060c17 100%); color: #f4f8ff; position: relative; overflow: hidden; isolation: isolate; }
.login-aurora, .login-grid, .login-beam, #signal-canvas, .login-grain { position: absolute; pointer-events: none; }
.login-aurora { z-index: 0; inset: -24%; background: radial-gradient(circle at 28% 42%, rgba(42, 145, 255, .2), transparent 24%), radial-gradient(circle at 62% 26%, rgba(56, 112, 224, .13), transparent 20%), radial-gradient(circle at 68% 78%, rgba(255, 52, 82, .055), transparent 15%); filter: blur(42px); transform: translate3d(-2%, -1%, 0) scale(1.03); animation: login-aurora-drift 16s ease-in-out infinite alternate; }
.login-grid { z-index: 0; left: -12%; right: -12%; top: 45%; bottom: -48%; opacity: .2; background-image: linear-gradient(rgba(82, 164, 255, .24) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 164, 255, .2) 1px, transparent 1px); background-size: 72px 48px; transform: perspective(620px) rotateX(67deg) translateY(4%); transform-origin: center top; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 64%, transparent); animation: login-grid-flow 11s linear infinite; }
.login-beam { z-index: 1; top: -16%; bottom: -16%; left: -34%; width: 23%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(92, 190, 255, .045) 38%, rgba(172, 228, 255, .16) 50%, rgba(75, 154, 255, .045) 62%, transparent); filter: blur(2px); transform: skewX(-13deg); animation: login-beam-sweep 9s ease-in-out infinite; }
#signal-canvas { z-index: 2; inset: 0; width: 100%; height: 100%; opacity: .9; }
.login-grain { z-index: 3; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.login-brand { min-height: 100vh; padding: clamp(32px, 5vw, 78px); position: relative; z-index: 4; display: flex; flex-direction: column; }
.wordmark, .app-wordmark { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.wordmark-dot { width: 10px; height: 10px; border: 2px solid #59baff; display: inline-block; transform: rotate(45deg); box-shadow: inset 0 0 0 2px #080e1b, 0 0 14px rgba(89, 186, 255, .5); background: #59baff; animation: login-mark-breathe 3.2s ease-in-out infinite; }
.hero-copy { margin: auto 0; max-width: 720px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: #69c0ff; margin: 0 0 22px; }
.hero-copy h1 { margin: 0; font-size: clamp(46px, 6vw, 94px); line-height: .98; letter-spacing: -.065em; font-weight: 680; text-shadow: 0 0 42px rgba(74, 156, 255, .07); }
.hero-desc { max-width: 520px; margin: 32px 0 0; color: #9baac0; line-height: 1.8; font-size: 16px; }
.live-strip { width: min(100%, 520px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-top: 1px solid rgba(175, 205, 245, .18); padding-top: 22px; color: #a6b4c8; }
.live-strip strong { font-family: var(--mono); color: #f2f7ff; font-size: 19px; grid-row: span 2; }
.live-strip small { grid-column: 2; color: #65758e; }
.login-sparks { position: relative; width: 90px; height: 50px; grid-row: span 2; display: block; isolation: isolate; background: radial-gradient(circle at center, rgba(83, 200, 255, .18), rgba(53, 126, 235, .055) 28%, transparent 59%); filter: drop-shadow(0 0 10px rgba(62, 184, 255, .58)); animation: spark-float 2.8s ease-in-out infinite; }
.login-sparks::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 42% 58% 48% 52%; background: #f5fdff; box-shadow: 0 0 6px #fff, 0 0 15px #43c8ff, 0 0 28px rgba(50, 138, 255, .55), -6px 2px 12px rgba(255, 52, 76, .92); animation: electric-core .46s steps(2, end) infinite; }
.login-sparks::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 34px; height: 24px; margin: -12px -17px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.94) 0 7%, rgba(53,191,255,.72) 19%, rgba(255,45,71,.3) 43%, transparent 72%); filter: blur(2px); animation: electric-flare .72s steps(3, end) infinite; }
.login-sparks i { --spark-angle: 0deg; --spark-distance: 36px; --spark-mid: 15px; --spark-delay: 0s; --spark-duration: .82s; --spark-color: #4dccff; position: absolute; z-index: 3; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -1px; border-radius: 999px; transform-origin: 0 50%; color: var(--spark-color); background: linear-gradient(90deg, #fff 0 12%, currentColor 35% 76%, transparent); box-shadow: 0 0 4px currentColor, 0 0 10px color-mix(in srgb, currentColor 72%, transparent); opacity: 0; animation: electric-crackle var(--spark-duration) steps(2, end) var(--spark-delay) infinite; }
.login-sparks i:nth-child(1) { --spark-angle: -8deg; --spark-distance: 34px; --spark-mid: 14px; --spark-delay: -.13s; --spark-duration: .74s; }
.login-sparks i:nth-child(2) { --spark-angle: 31deg; --spark-distance: 29px; --spark-mid: 12px; --spark-delay: -.52s; --spark-duration: .91s; --spark-color: #ff3d58; }
.login-sparks i:nth-child(3) { --spark-angle: 67deg; --spark-distance: 25px; --spark-mid: 10px; --spark-delay: -.28s; --spark-duration: .67s; }
.login-sparks i:nth-child(4) { --spark-angle: 103deg; --spark-distance: 30px; --spark-mid: 12px; --spark-delay: -.71s; --spark-duration: .88s; --spark-color: #ff4d65; }
.login-sparks i:nth-child(5) { --spark-angle: 142deg; --spark-distance: 27px; --spark-mid: 11px; --spark-delay: -.37s; --spark-duration: .73s; }
.login-sparks i:nth-child(6) { --spark-angle: 178deg; --spark-distance: 35px; --spark-mid: 15px; --spark-delay: -.83s; --spark-duration: .96s; --spark-color: #ff334f; }
.login-sparks i:nth-child(7) { --spark-angle: 211deg; --spark-distance: 28px; --spark-mid: 12px; --spark-delay: -.18s; --spark-duration: .79s; }
.login-sparks i:nth-child(8) { --spark-angle: 244deg; --spark-distance: 24px; --spark-mid: 10px; --spark-delay: -.63s; --spark-duration: .69s; --spark-color: #ff536b; }
.login-sparks i:nth-child(9) { --spark-angle: 279deg; --spark-distance: 31px; --spark-mid: 13px; --spark-delay: -.46s; --spark-duration: .84s; }
.login-sparks i:nth-child(10) { --spark-angle: 309deg; --spark-distance: 28px; --spark-mid: 12px; --spark-delay: -.94s; --spark-duration: .77s; --spark-color: #ff3a56; }
.login-sparks i:nth-child(11) { --spark-angle: 337deg; --spark-distance: 35px; --spark-mid: 15px; --spark-delay: -.32s; --spark-duration: .99s; }
.login-sparks i:nth-child(12) { --spark-angle: 15deg; --spark-distance: 22px; --spark-mid: 9px; --spark-delay: -.76s; --spark-duration: .62s; --spark-color: #ff6175; }
.login-sparks.is-offline { filter: drop-shadow(0 0 9px rgba(255, 54, 77, .58)); }
.login-sparks.is-offline::before { box-shadow: 0 0 5px #fff, 0 0 12px #ff354f, -5px 2px 9px rgba(255, 139, 45, .72); }
.login-sparks.is-offline i:nth-child(odd) { --spark-color: #ff3b55; }
.login-sparks.is-offline i:nth-child(even) { --spark-color: #ff9138; }
@keyframes electric-crackle { 0%, 8%, 100% { transform: rotate(var(--spark-angle)) translateX(0) scaleX(.12); opacity: 0; } 10% { opacity: 1; } 24% { transform: rotate(var(--spark-angle)) translateX(var(--spark-mid)) scaleX(1.15); opacity: 1; } 39% { transform: rotate(var(--spark-angle)) translateX(var(--spark-distance)) scaleX(.35); opacity: 0; } 63% { transform: rotate(var(--spark-angle)) translateX(4px) scaleX(.55); opacity: 0; } 66% { opacity: .9; } 76% { transform: rotate(var(--spark-angle)) translateX(var(--spark-mid)) scaleX(.72); opacity: .6; } 84% { opacity: 0; } }
@keyframes electric-core { 0%, 100% { transform: scale(.74) rotate(-12deg); opacity: .65; } 24% { transform: scale(1.65) rotate(18deg); opacity: 1; } 54% { transform: scale(.95) rotate(-22deg); opacity: .78; } 76% { transform: scale(1.3) rotate(8deg); opacity: .94; } }
@keyframes electric-flare { 0%, 100% { transform: scale(.72) rotate(-8deg); opacity: .35; } 33% { transform: scale(1.25) rotate(10deg); opacity: .9; } 66% { transform: scale(.86) rotate(-16deg); opacity: .56; } }
@keyframes spark-float { 0%, 100% { transform: translateY(0) scale(.96); } 50% { transform: translateY(-2px) scale(1.04); } }
@keyframes login-aurora-drift { 0% { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(-2deg); opacity: .72; } 52% { opacity: 1; } 100% { transform: translate3d(4%, 3%, 0) scale(1.1) rotate(3deg); opacity: .78; } }
@keyframes login-grid-flow { from { background-position: 0 0, 0 0; } to { background-position: 0 96px, 72px 0; } }
@keyframes login-beam-sweep { 0%, 12% { left: -34%; opacity: 0; } 23% { opacity: .65; } 68% { opacity: .28; } 78%, 100% { left: 116%; opacity: 0; } }
@keyframes login-mark-breathe { 0%, 100% { box-shadow: inset 0 0 0 2px #080e1b, 0 0 9px rgba(89, 186, 255, .38); } 50% { box-shadow: inset 0 0 0 2px #080e1b, 0 0 22px rgba(89, 186, 255, .82), 0 0 36px rgba(47, 111, 237, .25); } }
.live-pulse, .sync-state i { width: 7px; height: 7px; border-radius: 50%; background: #46b8ff; box-shadow: 0 0 0 0 rgba(70, 184, 255, .45); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(70, 184, 255, 0); } }
.login-panel-wrap { min-height: 100vh; padding: clamp(24px, 5vw, 78px); display: grid; place-items: center; position: relative; z-index: 4; perspective: 1000px; }
.login-panel { width: min(100%, 440px); padding: clamp(30px, 4vw, 48px); background: linear-gradient(145deg, rgba(252, 255, 253, .975), rgba(242, 247, 246, .95)); color: #111714; border: 1px solid rgba(255, 255, 255, .5); border-radius: 18px; box-shadow: 0 35px 90px rgba(0, 0, 0, .32), 0 0 0 1px rgba(73, 169, 255, .08), 0 0 58px rgba(48, 125, 230, .08); backdrop-filter: blur(20px); position: relative; overflow: hidden; isolation: isolate; animation: login-panel-hover 7s ease-in-out infinite; }
.login-panel::before { content: ""; position: absolute; z-index: -1; left: -55%; top: -35%; width: 58%; height: 170%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .82), rgba(85, 178, 255, .14), transparent); transform: rotate(10deg); animation: login-panel-sheen 8s ease-in-out infinite; }
.login-panel::after { content: ""; position: absolute; z-index: -1; width: 230px; height: 230px; right: -130px; bottom: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(50, 122, 237, .14), transparent 67%); animation: login-panel-glow 5.5s ease-in-out infinite alternate; }
@keyframes login-panel-hover { 0%, 100% { transform: translateY(0); box-shadow: 0 35px 90px rgba(0, 0, 0, .32), 0 0 0 1px rgba(73, 169, 255, .08), 0 0 58px rgba(48, 125, 230, .08); } 50% { transform: translateY(-4px); box-shadow: 0 42px 105px rgba(0, 0, 0, .36), 0 0 0 1px rgba(73, 169, 255, .13), 0 0 72px rgba(48, 125, 230, .12); } }
@keyframes login-panel-sheen { 0%, 18% { transform: translateX(-40%) rotate(10deg); opacity: 0; } 32% { opacity: .5; } 53% { transform: translateX(360%) rotate(10deg); opacity: 0; } 100% { transform: translateX(360%) rotate(10deg); opacity: 0; } }
@keyframes login-panel-glow { from { transform: scale(.82); opacity: .42; } to { transform: scale(1.18); opacity: .86; } }
.panel-kicker { color: #2f6fed; font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.login-panel h2, .modal h3 { font-size: 28px; letter-spacing: -.04em; margin: 10px 0 8px; }
.login-panel > p { margin: 0 0 30px; color: #6f7a74; }
.field-label { display: block; color: inherit; font-size: 13px; font-weight: 650; margin: 18px 0 8px; }
.input-shell { display: flex; align-items: center; background: #fff; border: 1px solid #d9dfdb; border-radius: 9px; transition: border-color var(--speed), box-shadow var(--speed); }
.input-shell:focus-within { border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47,111,237,.11); }
.input-shell input { width: 100%; border: 0; background: transparent; padding: 12px 13px; min-height: 44px; color: #111714; }
.field-help { color: #89938d; font-size: 11px; margin-top: 6px; }
.password-shell input { width: auto; min-width: 0; flex: 1 1 auto; }
.password-shell .text-button { min-width: 2.5em; margin-right: 10px; flex: 0 0 auto; white-space: nowrap; writing-mode: horizontal-tb; }
.text-button, .link-button { border: 0; background: transparent; color: #2f6fed; cursor: pointer; padding: 4px; font-size: 12px; }
.captcha-row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.captcha { border: 1px solid #ccd6e4; border-radius: 9px; min-height: 46px; padding: 0; cursor: pointer; background: #eef3f9; color: #234b89; font-size: 11px; position: relative; overflow: hidden; }
.captcha img { width: 100%; height: 46px; display: block; object-fit: cover; user-select: none; }
.login-meta { display: flex; align-items: center; gap: 22px; margin: 17px 0 24px; }
.check-row { display: inline-flex; gap: 7px; align-items: center; color: #6d7872; font-size: 12px; cursor: pointer; user-select: none; }
.check-row input { width: 15px; height: 15px; margin: 0; accent-color: #2f6fed; cursor: pointer; }
.primary-button { border: 0; background: var(--primary); color: #fff; min-height: 42px; padding: 0 17px; border-radius: 9px; font-weight: 650; cursor: pointer; transition: transform var(--speed), background var(--speed), box-shadow var(--speed); }
.primary-button:hover { background: var(--primary-strong); transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 22%, transparent); }
.primary-button:active { transform: translateY(0); }
.login-submit { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #2f6fed; }
.login-submit.is-loading i { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-message { min-height: 18px; margin-top: 10px; color: #c54b47; font-size: 12px; text-align: center; }
.form-message.success-message { color: var(--success); }
.moderation-banner { margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); font-size: 12px; line-height: 1.6; }
.moderation-banner.is-rejected { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.demo-note { margin-top: 13px; text-align: center; color: #929b96; font-size: 11px; }

/* App shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); transition: grid-template-columns var(--speed); }
.app-shell.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.sidebar { height: 100vh; height: 100dvh; position: sticky; top: 0; background: var(--sidebar); color: var(--sidebar-ink); display: flex; flex-direction: column; overflow: hidden; }
.sidebar-top { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.app-wordmark { font-size: 14px; letter-spacing: .12em; white-space: nowrap; }
.icon-button { border: 0; background: rgba(255,255,255,.06); color: #aebbb4; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; }
.main-nav { min-height: 0; padding: 16px 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(116, 145, 179, .42) transparent; flex: 1; }
.main-nav::-webkit-scrollbar { width: 5px; }
.main-nav::-webkit-scrollbar-track { background: transparent; }
.main-nav::-webkit-scrollbar-thumb { border: 1px solid transparent; border-radius: 999px; background: rgba(116, 145, 179, .42); background-clip: padding-box; }
.main-nav::-webkit-scrollbar-thumb:hover { background: rgba(105, 189, 255, .62); background-clip: padding-box; }
.nav-label { color: #607169; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; padding: 18px 12px 8px; white-space: nowrap; }
.nav-item { width: 100%; min-height: 42px; border: 0; border-radius: 8px; display: flex; align-items: center; gap: 12px; padding: 0 11px; color: #93a49b; background: transparent; cursor: pointer; transition: background var(--speed), color var(--speed); white-space: nowrap; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #e6f0ea; }
.nav-item.is-active { color: #fff; background: rgba(70, 142, 255, .17); }
.nav-mark { font-family: var(--mono); font-size: 9px; color: #62746a; }
.nav-item.is-active .nav-mark { color: #69bdff; }
.nav-tree { margin: 2px 0 4px; padding: 5px; border-radius: 10px; }
.nav-tree.is-active { background: rgba(70, 142, 255, .07); }
.nav-tree-label { width: 100%; min-height: 36px; border: 0; display: flex; align-items: center; gap: 12px; padding: 0 7px; color: #b6c5bd; background: transparent; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.nav-tree-label:hover, .nav-tree-branch-toggle:hover { color: #e6f0ea; }
.nav-tree-content[hidden], .nav-tree-children[hidden] { display: none; }
.nav-tree-branch { display: grid; gap: 2px; margin-left: 18px; padding: 3px 0 2px 9px; border-left: 1px solid rgba(105, 189, 255, .2); }
.nav-tree-branch-toggle { width: 100%; min-height: 27px; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 7px; color: #71837a; background: transparent; font-size: 9px; letter-spacing: .06em; text-align: left; cursor: pointer; }
.nav-tree-children { display: grid; gap: 2px; }
.nav-tree-chevron { width: 11px; height: 11px; flex: 0 0 auto; opacity: .58; filter: invert(79%) sepia(8%) saturate(452%) hue-rotate(88deg) brightness(92%); transition: transform var(--speed), opacity var(--speed); }
.nav-tree-toggle[aria-expanded="true"] .nav-tree-chevron, .nav-tree-branch-toggle[aria-expanded="true"] .nav-tree-chevron { transform: rotate(90deg); opacity: .9; }
.nav-sub-item { min-height: 34px; gap: 9px; padding-left: 8px; font-size: 11px; }
.nav-sub-dot { width: 5px; height: 5px; border-radius: 50%; background: #62746a; }
.nav-sub-item.is-active .nav-sub-dot { background: #69bdff; box-shadow: 0 0 0 4px rgba(105, 189, 255, .1); }
.nav-badge { margin-left: auto; min-width: 18px; height: 18px; border-radius: 9px; background: #b58538; color: white; font-size: 10px; display: grid; place-items: center; }
.sidebar-account { flex: 0 0 auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-announcement-button { width: 100%; min-height: 48px; margin-bottom: 8px; position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(105, 189, 255, .22); border-radius: 10px; background: linear-gradient(135deg, rgba(70, 142, 255, .16), rgba(87, 126, 183, .06)); color: #dce9f8; text-align: left; cursor: pointer; }
.sidebar-announcement-button:hover { border-color: rgba(105, 189, 255, .5); background: rgba(70, 142, 255, .2); }
.sidebar-announcement-button:disabled { opacity: .55; cursor: default; }
.announcement-icon { width: 26px; height: 26px; border-radius: 8px; background: rgba(105, 189, 255, .15); position: relative; color: #69bdff; }
.announcement-icon::before { content: ''; position: absolute; left: 7px; top: 7px; width: 10px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px 2px 4px 4px; transform: skewY(-8deg); }
.announcement-icon::after { content: ''; position: absolute; left: 9px; bottom: 5px; width: 6px; height: 1.5px; background: currentColor; border-radius: 2px; }
.announcement-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: #2f6fed; color: #fff; font-size: 9px; }
.announcement-modal { width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden; border-radius: 16px; }
.announcement-modal #announcement-modal-content { min-height: 390px; padding: 30px 34px 24px; display: flex; flex-direction: column; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, var(--primary-soft)), var(--surface)); }
.announcement-header { display: flex; align-items: center; justify-content: space-between; margin-right: 34px; }
.announcement-kicker { color: var(--primary); font-family: var(--mono); font-size: 10px; letter-spacing: .16em; }
.announcement-position { color: var(--faint); font-family: var(--mono); font-size: 10px; }
.announcement-sender { display: flex; align-items: center; gap: 7px; margin-top: 28px; color: var(--muted); font-size: 11px; }
.announcement-sender small { padding-left: 7px; border-left: 1px solid var(--line); color: var(--faint); }
.announcement-sender-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.announcement-modal h3 { margin: 16px 0 14px; font-size: clamp(24px, 4vw, 32px); }
.announcement-body { flex: 1; max-height: min(42vh, 300px); overflow-y: auto; color: var(--ink); font-size: 14px; line-height: 1.85; white-space: normal; }
.announcement-footer { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 14px; margin-top: 25px; }
.announcement-arrow { width: 40px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 22px; cursor: pointer; }
.announcement-arrow:disabled { opacity: .35; cursor: default; }
.announcement-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.announcement-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; }
.announcement-dot.is-active { width: 22px; border-radius: 5px; background: var(--primary); }
.announcement-progress { height: 2px; margin-top: 17px; overflow: hidden; border-radius: 2px; background: var(--line); }
.announcement-progress i { display: block; width: 100%; height: 100%; background: var(--primary); transform-origin: left; animation: announcement-progress 5s linear both; }
@keyframes announcement-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .announcement-progress i { animation: none; } }
.sidebar-quick-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 9px; }
.sidebar-quick-tool { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid rgba(135, 169, 214, .16); border-radius: 10px; background: rgba(87, 126, 183, .08); color: #cbd8e8; text-align: left; cursor: pointer; transition: border-color var(--speed), background var(--speed), transform var(--speed); }
.sidebar-quick-tool:hover { border-color: rgba(103, 172, 255, .4); background: rgba(70, 142, 255, .15); transform: translateY(-1px); }
.sidebar-tool-icon { position: relative; width: 24px; height: 24px; display: block; border-radius: 7px; background: rgba(84, 156, 255, .14); color: #69bdff; }
.message-icon::before { content: ''; position: absolute; inset: 6px 5px 7px; border: 1.4px solid currentColor; border-radius: 3px; }
.message-icon::after { content: ''; position: absolute; left: 7px; top: 7px; width: 8px; height: 6px; border-left: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(-45deg); }
.calendar-icon::before { content: ''; position: absolute; inset: 6px 5px 5px; border: 1.4px solid currentColor; border-radius: 3px; }
.calendar-icon::after { content: ''; position: absolute; left: 8px; right: 8px; top: 10px; height: 1.4px; background: currentColor; box-shadow: -1px 4px 0 -0.2px currentColor, 3px 4px 0 -0.2px currentColor; }
.sidebar-tool-copy { min-width: 0; display: grid; gap: 3px; }
.sidebar-tool-copy strong { font-size: 10px; white-space: nowrap; }
.sidebar-tool-copy small { color: #71879e; font-size: 8px; white-space: nowrap; }
.profile-button { width: 100%; border: 0; background: transparent; color: inherit; display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer; border-radius: 9px; }
.profile-button:hover { background: rgba(255,255,255,.05); }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; padding: 2px; border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line)); border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 7%, transparent); }
.avatar-image { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; object-position: center; }
.profile-copy { min-width: 0; display: grid; text-align: left; }
.profile-copy strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.profile-copy small { color: #708279; font-size: 10px; margin-top: 3px; }
.profile-more { margin-left: auto; color: #64756c; }
.app-shell.sidebar-collapsed .app-wordmark span:last-child,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-item span:last-of-type,
.app-shell.sidebar-collapsed .profile-copy,
.app-shell.sidebar-collapsed .profile-more,
.app-shell.sidebar-collapsed .sidebar-tool-copy,
.app-shell.sidebar-collapsed .nav-badge { display: none; }
.app-shell.sidebar-collapsed .sidebar-quick-tools { grid-template-columns: 1fr; }
.app-shell.sidebar-collapsed .sidebar-announcement-button { min-height: 40px; grid-template-columns: 26px; justify-content: center; padding: 6px; }
.app-shell.sidebar-collapsed .announcement-count { position: absolute; transform: translate(14px, -13px); }
.app-shell.sidebar-collapsed .sidebar-quick-tool { min-height: 38px; grid-template-columns: 24px; justify-content: center; padding: 6px; }
.app-shell.sidebar-collapsed .nav-item { justify-content: center; }
.app-shell.sidebar-collapsed .nav-tree-label span:nth-child(2), .app-shell.sidebar-collapsed .nav-tree-branch-toggle, .app-shell.sidebar-collapsed .nav-tree-chevron { display: none; }
.app-shell.sidebar-collapsed .nav-tree { padding: 3px 0; }
.app-shell.sidebar-collapsed .nav-tree-label { justify-content: center; padding: 0; }
.app-shell.sidebar-collapsed .nav-tree-branch { margin: 0; padding: 0; border-left: 0; }
.app-shell.sidebar-collapsed .nav-sub-item { padding: 0; }
.app-shell.sidebar-collapsed .sidebar-top { padding: 0 10px; justify-content: center; }
.app-shell.sidebar-collapsed .collapse-button { position: absolute; top: 53px; transform: rotate(180deg); }

.workspace { min-width: 0; container: workspace / inline-size; }
.topbar { min-height: 72px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px clamp(20px, 3vw, 42px); }
.topbar h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.025em; }
.breadcrumb { color: var(--faint); font-size: 10px; letter-spacing: .06em; }
.topbar-query-status { position: absolute; left: 50%; top: 50%; max-width: min(52vw, 820px); min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; transform: translate(-50%, -50%); pointer-events: auto; }
.topbar-query-status[hidden] { display: none; }
.topbar-query-status::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--faint); }
.topbar-query-status.is-success::before { background: #35b979; }
.topbar-query-status.is-warning::before { background: #e0a72e; }
.topbar-query-status.is-error { color: var(--danger); }
.topbar-query-status.is-error::before { background: var(--danger); }
.topbar-query-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.sync-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.sync-state.is-ready i { background: #35b979; }
.sync-state.is-error i { background: var(--danger); animation: none; box-shadow: none; }
.sync-state.is-checking i { background: #e0a72e; }
.topbar-refresh { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color var(--speed), background var(--speed); }
.topbar-refresh:hover { color: var(--primary-strong); background: var(--primary-soft); }
.topbar-refresh svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar-refresh.is-loading svg { animation: refresh-spin .8s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
.appearance-button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 10px; transition: color var(--speed), border-color var(--speed), background var(--speed); }
.appearance-button:hover { color: var(--primary-strong); border-color: var(--line-strong); background: var(--primary-soft); }
.appearance-button i { width: 13px; height: 13px; border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--line)); border-radius: 50%; background: linear-gradient(90deg, var(--primary) 0 50%, var(--surface-2) 50% 100%); }
.role-preview { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); font-size: 11px; }
select { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); min-height: 34px; padding: 0 30px 0 10px; cursor: pointer; }
.notification-button { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; position: relative; cursor: pointer; }
.notification-button span { width: 11px; height: 12px; border: 1.5px solid var(--muted); border-radius: 6px 6px 3px 3px; display: block; margin: auto; }
.notification-button i { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: white; font-size: 9px; font-style: normal; display: grid; place-items: center; }
.notification-button i.is-hidden { display: none; }

textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 12px; resize: vertical; font: inherit; box-sizing: border-box; }
.notification-list, .recipient-list { display: grid; gap: 9px; max-height: 380px; overflow: auto; margin: 18px 0; }
.recipient-empty { display: grid; place-items: center; gap: 4px; min-height: 110px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); text-align: center; }
.recipient-empty strong { color: var(--ink); }
.recipient-empty span { font-size: 12px; }
.notification-row, .recipient-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.notification-row.is-unread { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.notification-row > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notification-row small, .recipient-row small { display: block; color: var(--muted); margin-top: 3px; }
.notification-row p { margin: 10px 0 0; white-space: pre-wrap; line-height: 1.65; }
.notification-drawer-layer { position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; }
.notification-drawer-layer.is-open { pointer-events: auto; visibility: visible; }
.notification-drawer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgb(9 18 31 / 24%); opacity: 0; transition: opacity 180ms ease; }
.notification-drawer-layer.is-open .notification-drawer-backdrop { opacity: 1; }
.notification-drawer { position: absolute; top: 0; right: 0; width: min(430px, calc(100vw - 28px)); height: 100%; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface); box-shadow: -18px 0 48px rgb(16 35 65 / 14%); transform: translateX(100%); transition: transform 220ms ease; overflow: hidden; }
.notification-drawer-layer.is-detail .notification-drawer { width: clamp(640px, 50vw, 920px); }
.notification-drawer-layer.is-open .notification-drawer { transform: translateX(0); }
.notification-drawer-head { min-height: 108px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 22px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.notification-drawer-head h3 { margin: 3px 0 4px; font-size: 20px; }
.notification-drawer-head small { color: var(--muted); font-size: 11px; }
.notification-drawer-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.notification-drawer-head-actions .small-button { min-height: 34px; }
.notification-drawer-close { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 20px; }
.notification-toolbar { display: grid; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.notification-date-filter, .notification-bulk-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.notification-date-filter label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.notification-date-filter input { min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.notification-bulk-actions { justify-content: space-between; }
.notification-bulk-actions label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.notification-drawer .notification-list { height: calc(100vh - 258px); display: grid; align-content: start; gap: 10px; padding: 16px; margin: 0; max-height: none; overflow-y: auto; }
.notification-drawer-layer:not(.is-managing) .notification-drawer .notification-list { height: calc(100vh - 210px); }
.notification-drawer .notification-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; box-shadow: none; cursor: pointer; transition: border-color var(--speed), background var(--speed), transform var(--speed); }
.notification-drawer .notification-row:not(.is-managing) { grid-template-columns: minmax(0, 1fr); }
.notification-drawer .notification-row:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateX(-2px); }
.notification-row-main { min-width: 0; }
.notification-row-main > div { display: grid; gap: 4px; }
.notification-row-main p { display: -webkit-box; margin: 9px 0 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); line-height: 1.55; }
.notification-open-hint { display: inline-block; margin-top: 8px; color: var(--primary); font-size: 9px; font-weight: 700; }
.notification-select { padding-top: 2px; }
.notification-row > .notification-actions, .notification-row > .notification-result, .notification-row > .notification-inline-error { grid-column: 2; }
.notification-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.notification-detail-head h3 { max-width: 100%; overflow-wrap: anywhere; }
.notification-back { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 25px; }
.notification-detail { height: calc(100vh - 108px); padding: 26px clamp(22px, 4vw, 48px); overflow-y: auto; }
.notification-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.notification-detail-meta span { padding: 6px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 9px; }
.notification-detail-content { min-height: 180px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; line-height: 1.85; }
.notification-detail-footer { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.notification-drawer-open { overflow: hidden; }
.notification-row > .notification-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.notification-result { width: fit-content; margin: 12px 0 0 auto; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 9%, var(--surface)); color: var(--danger); font-size: 11px; font-weight: 700; }
.notification-result.is-approved { background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); }
.notification-inline-error { margin-top: 8px; color: var(--danger); font-size: 11px; text-align: right; }
.recipient-row { display: flex; align-items: center; gap: 8px; padding-left: calc(10px + var(--recipient-depth, 0) * 14px) !important; }
.recipient-row-main { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; cursor: pointer; }
.recipient-row-main > span { min-width: 0; }
.recipient-row-main strong, .recipient-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-tree-toggle, .recipient-tree-toggle-placeholder { width: 22px; height: 22px; flex: 0 0 22px; }
.recipient-tree-toggle { display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.recipient-tree-toggle:hover { background: var(--primary-soft); color: var(--primary-strong); }
.recipient-tree-actions { display: inline-flex; align-items: center; gap: 6px; }
.recipient-tree-actions[hidden] { display: none; }
.recipient-toolbar { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.view-root { padding: 28px clamp(18px, 3vw, 42px) 56px; max-width: 1680px; margin: 0 auto; }
@supports (width: 1cqi) {
  .topbar { padding-inline: clamp(1rem, 2.5cqi, 2.625rem); }
  .view-root { padding-inline: clamp(1rem, 2.5cqi, 2.625rem); }
  .query-page .query-intro .search-shell { width: 100%; }
}
.view-root:has(.overview-page) { height: calc(100vh - 72px); padding-bottom: 24px; overflow: hidden; }
.view-root:has(.query-page) { height: calc(100vh - 72px); padding-top: 18px; padding-bottom: 16px; overflow: hidden; }
.view-root:has(.user-management-page) { height: calc(100vh - 72px); padding-top: 12px; padding-bottom: 12px; overflow: hidden; }
.user-management-page { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.user-management-page .page-intro { flex: 0 0 auto; margin-bottom: 14px; }
.user-management-page .data-card { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.user-management-page .table-scroll { min-height: 0; flex: 1; overflow-x: auto; overflow-y: hidden; }
.query-page { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.query-page .page-intro { margin-bottom: 10px; }
.query-page .page-intro.query-intro { display: grid; grid-template-columns: minmax(21rem, 30rem) minmax(0, 1fr); align-items: center; gap: .75rem; }
.query-page .query-intro .query-search-with-scope { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: start; gap: .5rem; }
.query-page .query-intro .search-shell { width: 100%; min-width: 0; }
.query-page .query-intro .filters { width: 100%; min-width: 0; display: grid; grid-template-columns: auto auto auto minmax(7.5rem, 1.1fr) minmax(11.5rem, .95fr) auto auto; gap: .45rem; }
.query-page .query-intro .filters > * { min-width: 0; }
.query-page .query-intro .filters .game-combobox, .query-page .query-intro .filters .date-filter-group { width: 100%; min-width: 0; }
.query-page .query-intro .filters .date-filter-group { display: grid; grid-template-columns: minmax(0, 1fr) 2.375rem; gap: .375rem; }
.query-page .query-intro .filters .date-control { width: 100%; min-width: 0; max-width: 100%; }
.query-page .query-intro .filters .single-date-button { width: 2.375rem; min-width: 2.375rem; }
.query-page .query-intro .tracking-link-button,
.query-page .query-intro .advanced-filter-button { padding-inline: .75rem; }
.overview-page .page-intro { display: grid; grid-template-columns: minmax(15rem, 1fr) auto; align-items: center; gap: 1rem; }
.overview-page .page-intro .filters { flex-wrap: nowrap; justify-content: flex-end; }
.overview-page .page-intro .game-combobox { width: clamp(12rem, 19vw, 17rem); min-width: 10rem; }
.overview-page .page-intro .date-filter-group { min-width: 10rem; }
.query-page .query-overview { min-height: 84px; margin-bottom: 10px; }
.query-page .query-revenue-block, .query-page .query-overview-group { padding-top: 11px; padding-bottom: 11px; }
.query-page .data-card { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.query-page .table-toolbar { flex: 0 0 auto; padding: 8px 14px; }
.query-page #event-table-wrap { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.query-page .table-scroll { min-height: 0; flex: 1; overflow: auto; }
.query-page .event-table {
  height: auto;
  --query-head-height: clamp(36px, 4.5vh, 42px);
}
.query-page .event-table.is-full-page { height: 100%; }
.query-page .event-table thead { height: var(--query-head-height); }
.query-page .event-table tbody tr { height: clamp(36px, calc((100vh - 410px) / 10), 64px); }
/* Let the table distribute the space below its header. Percentage row/cell
   heights include the header in Firefox and push the final row behind the pager. */
.query-page .event-table.is-full-page tbody tr { height: 36px; }
.query-page .event-table th { height: auto; padding-inline: clamp(8px, .8vw, 14px); font-size: clamp(10.5px, 1.3vh, 14px); line-height: 1.25; }
.query-page .event-table td { height: auto; padding-inline: clamp(8px, .8vw, 14px); font-size: clamp(11px, 1.35vh, 15px); line-height: 1.35; }
.query-page .event-table .status-pill { min-height: clamp(22px, 2.8vh, 26px); padding-inline: clamp(7px, .6vw, 10px); font-size: clamp(10px, 1.15vh, 13px); }
.query-page .event-avatar { width: clamp(22px, 2.8vh, 27px); height: clamp(22px, 2.8vh, 27px); flex-basis: clamp(22px, 2.8vh, 27px); }
.query-page .pagination { flex: 0 0 auto; min-height: 40px; padding: 5px 14px; }
.query-page .page-buttons button { width: 27px; height: 27px; }
.overview-page { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.overview-page .page-intro { margin-bottom: 12px; }
.overview-page .metrics-grid { margin: 0 0 12px; }
.overview-page .analytics-grid { min-height: 0; }
.overview-page .chart-card { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.overview-page .chart-wrap { flex: 1; min-height: 150px; }
.overview-page .side-analytics { min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.overview-page .mini-card { display: flex; flex-direction: column; min-height: 0; }
.overview-page .mini-card .analytics-empty { flex: 1; min-height: 0; }
.overview-page .mini-card .heatmap.has-empty-state { display: flex; flex: 1; min-height: 0; }
.overview-page .mini-card .heatmap.has-empty-state .analytics-empty { width: 100%; }
.overview-page .side-analytics { min-height: 0; grid-template-rows: 1fr 1fr; }
.overview-page .mini-card { min-height: 0; overflow: hidden; }
.overview-page .mini-card .heatmap:not(.has-empty-state) { flex: 1; min-height: 0; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.overview-page .mini-card .heat-cell { min-height: 0; aspect-ratio: auto; border-radius: 6px; }
.overview-page .mini-card .distribution-list { flex: 1; align-content: space-evenly; }
.overview-page .mini-card .distribution-row { min-height: 34px; }
body[data-motion="on"] .page-enter.is-navigation-entry { animation: page-in 240ms ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }

/* Search, filter and sort controls must remain visually stable while the result set updates. */
.search-shell, .search-shell input, .filters select, .toolbar select,
.game-page-actions input, .game-page-actions select, .query-sort-scope,
.query-sort-scope button { transition: none !important; animation: none !important; }

/* Generic page components */
.page-intro, .section-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px; }
.page-intro:not(:has(.page-intro-copy)) { justify-content: flex-end; }
.page-intro-copy { min-width: 0; max-width: 620px; }
.page-intro h3, .section-head h3 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.page-intro p, .section-head p { margin: 0; color: var(--muted); line-height: 1.6; }
.filters, .toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.filters button, .toolbar button, .page-intro button, .topbar-actions button { white-space: nowrap; }
.platform-control { min-width: 122px; }
.platform-filter-menu { position: relative; flex: 0 0 auto; }
.platform-filter-popover { position: absolute; z-index: 80; top: calc(100% + 8px); left: 50%; width: 172px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 30px rgba(24, 43, 75, .16); transform: translateX(-50%); }
.platform-filter-popover::before { content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--surface); transform: translateX(-50%) rotate(45deg); }
.platform-filter-popover > span { display: block; margin: 0 0 7px; color: var(--muted); font-size: 10px; }
.platform-filter-popover .platform-control { position: relative; z-index: 1; width: 100%; min-width: 0; }
.filter-control { min-width: 145px; }
.game-combobox { position: relative; width: 240px; min-width: 220px; }
.game-combobox-trigger { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); box-sizing: border-box; cursor: pointer; }
.game-combobox-trigger:hover, .game-combobox-trigger:focus-visible, .game-combobox-trigger[aria-expanded="true"] { border-color: var(--primary); box-shadow: none; outline: none; }
.game-combobox-trigger.is-loading:disabled { opacity: 1; cursor: wait; }
.game-combobox-trigger.is-loading .game-combobox-value { color: var(--primary-strong); }
.game-combobox-trigger.is-loading .game-combobox-chevron { animation: game-switch-pulse 900ms ease-in-out infinite; }
@keyframes game-switch-pulse { 50% { opacity: .3; } }
.game-combobox-value { min-width: 0; flex: 1; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.game-combobox-chevron { flex: 0 0 14px; width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform 160ms ease; }
.game-combobox-trigger[aria-expanded="true"] .game-combobox-chevron { transform: rotate(180deg); }
.game-options-popover { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max(100%, 238px); overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 18px 46px rgba(25, 37, 57, .18); }
.game-option-search-shell { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--surface-2) 58%, var(--surface)); color: var(--muted); box-sizing: border-box; transition: background var(--speed), color var(--speed); }
.game-option-search-shell:focus-within { background: var(--surface); color: var(--primary); box-shadow: none; }
.game-option-search-shell .search-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.game-option-search { width: 100%; min-width: 0; height: 30px; padding: 0; border: 0; outline: 0; appearance: none; -webkit-appearance: none; background: transparent; color: var(--ink); font: inherit; }
.game-option-search:focus, .game-option-search:focus-visible { outline: 0; box-shadow: none; }
.game-option-search::-webkit-search-decoration, .game-option-search::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.game-options-list { max-height: min(420px, calc(100dvh - 190px)); padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.game-options-list::-webkit-scrollbar { width: 5px; }
.game-options-list::-webkit-scrollbar-track { background: transparent; }
.game-options-list::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-strong); }
.game-option { width: 100%; min-height: 32px; display: flex; align-items: center; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.game-option:hover, .game-option:focus-visible, .game-option.is-selected { background: var(--primary-soft); color: var(--primary-strong); outline: none; }
.game-option span { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.game-options-empty, .game-no-match { padding: 13px 10px; color: var(--faint); font-size: 11px; text-align: center; }
.game-combobox.is-empty .game-combobox-trigger { color: var(--faint); background: var(--surface-2); cursor: not-allowed; }
.detail-field-hint { display: flex; align-items: center; gap: 6px; margin: 8px 14px 0; color: var(--faint); font-size: 9px; line-height: 1.5; }
.detail-field-hint::before { content: "i"; width: 14px; height: 14px; flex: 0 0 14px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font: 700 9px/1 var(--mono); }
.missing-detail-value { color: var(--faint); cursor: help; }
.overview-page.is-game-switching > :not(.page-intro), .query-page.is-game-switching > :not(.page-intro) { opacity: .42; pointer-events: none; }
.secondary-button.platform-filter-toggle { width: 38px; min-width: 38px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); box-shadow: none; }
.platform-filter-toggle svg, .single-date-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.refresh-data { width: 34px; height: 34px; min-width: 34px; padding: 0; display: inline-grid; place-items: center; align-self: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); box-shadow: none; cursor: pointer; }
.refresh-data:hover, .refresh-data:focus-visible { border: 0; background: var(--primary-soft); color: var(--primary-strong); box-shadow: none; outline: none; }
.refresh-data:disabled { cursor: wait; opacity: .7; }
.refresh-data svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 50%; }
.refresh-data.is-loading svg { animation: spin .7s linear infinite; }
.secondary-button.platform-filter-toggle:hover, .secondary-button.platform-filter-toggle.is-active { border: 0; background: transparent; color: var(--primary-strong); box-shadow: none; }
.display-manager-toolbar { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.display-manager-toolbar .search-shell { flex: 1; }
.display-manager-toolbar > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.display-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0; }
.display-bulk-actions > i { width: 1px; height: 24px; margin: 0 3px; background: var(--line); }
.display-manager-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.display-manager-row { display: grid; grid-template-columns: 20px minmax(180px, 1fr) 112px 120px 112px; align-items: center; gap: 12px; min-height: 46px; padding: 6px 13px; border-bottom: 1px solid var(--line); cursor: pointer; }
.display-manager-row:last-child { border-bottom: 0; }
.display-manager-row:hover { background: var(--surface-2); }
.display-game-identity { min-width: 0; display: grid; gap: 4px; }
.display-game-identity strong, .display-game-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-game-identity small { color: var(--muted); font: 9px/1.3 var(--mono); }
.display-scope-check { display: flex; align-items: center; gap: 7px; color: var(--ink); }
.display-scope-check em { font-size: 11px; font-style: normal; white-space: nowrap; }
.display-bulk-toggles { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.daily-modal-actions { align-items: center; }
.daily-footer-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.compact-check { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 2px; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.compact-check:has(input:checked) { color: var(--primary-strong); }
.compact-check input { width: 14px; height: 14px; margin: 0; }
.date-filter-group { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.date-control { min-width: 165px; }
.single-date-button { width: 38px; min-width: 38px; min-height: 38px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; transition: background var(--speed), border-color var(--speed), color var(--speed); }
.single-date-button:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.single-date-input { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.advanced-filter-button { display: inline-flex; align-items: center; gap: 7px; }
.advanced-filter-button.has-active-filter { border-color: var(--primary); color: var(--primary-strong); background: var(--primary-soft); }
.advanced-filter-grid #advanced-ad-type { height: 46px; min-height: 46px; }
.advanced-field-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 54px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.advanced-field-row > div { display: grid; gap: 4px; }
.advanced-field-row small { color: var(--muted); font-size: 10px; }
.tracking-link-button { white-space: nowrap; color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary) 28%, var(--line-strong)); background: color-mix(in srgb, var(--primary-soft) 52%, var(--surface)); }
.tracking-link-button:hover { background: var(--primary-soft); }
.filter-count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--primary); color: #fff; font: 700 10px/1 var(--mono); }
.field-selector-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.field-selector-item, .audience-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); cursor: pointer; }
.field-selector-item span { font-size: 12px; font-weight: 650; }
.field-selector-item.is-fixed { cursor: default; }
.field-selector-item.is-fixed span { color: var(--muted); }
.event-user-info { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 84px; text-align: center; }
.event-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
.daily-audience-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.audience-option > span { display: grid; gap: 3px; }
.audience-option strong { font-size: 12px; }
.audience-option small { color: var(--muted); font-size: 9px; line-height: 1.5; }
#daily-specific-recipients { transition: opacity var(--speed); }
#daily-specific-recipients.is-disabled { opacity: .45; }
.secondary-button, .ghost-button, .danger-button { min-height: 38px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 9px; padding: 0 14px; cursor: pointer; transition: background var(--speed), border-color var(--speed); }
.danger-outline-button { min-height: 38px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--line)); border-radius: 9px; background: var(--surface); color: var(--danger); cursor: pointer; transition: background var(--speed), border-color var(--speed); }
.danger-outline-button:hover { border-color: var(--danger); background: var(--danger-soft); }
.secondary-button:hover, .ghost-button:hover { background: var(--surface-2); border-color: var(--primary); }
.danger-button { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.danger-button:hover { background: var(--danger-soft); }
.small-button { min-height: 30px; padding: 0 10px; font-size: 11px; }
.metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(135px, 1fr)); gap: 12px; margin: 20px 0; }
.metric-card { container-type: inline-size; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; width: 60px; height: 2px; right: 17px; top: 21px; background: var(--primary-soft); }
.metric-card span { color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; max-width: 100%; margin: 13px 0 7px; overflow: hidden; font-size: clamp(20px, 2vw, 29px); font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.overview-page .metric-card:first-child strong, .overview-page .chart-reading strong { color: var(--ink); font-weight: 760; letter-spacing: -.035em; }
.overview-page .metric-card:first-child strong { font-size: clamp(23px, 2.15vw, 31px); }
.overview-page .metric-card:first-child strong.is-long { font-size: clamp(20px, 1.75vw, 26px); }
.overview-page .metric-card:first-child strong.is-very-long { font-size: clamp(17px, 1.45vw, 22px); }
.total-ecpm-card strong { font-size: clamp(17px, 1.45vw, 21px); letter-spacing: -.055em; white-space: nowrap; }
.metric-card small { color: var(--faint); font-size: 10px; }
.metric-card small.up { color: var(--success); }
.metric-card small.down { color: var(--danger); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.chart-card { padding: 20px; min-height: 380px; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 13px; }
.chart-head h4 { margin: 0 0 5px; font-size: 15px; }
.chart-head p { margin: 0; color: var(--muted); font-size: 11px; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.segmented button { border: 0; background: transparent; color: var(--muted); min-height: 28px; padding: 0 10px; border-radius: 6px; cursor: pointer; font-size: 11px; }
.segmented button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.chart-controls { display: flex; gap: 8px; align-items: center; }
.chart-reading { display: flex; align-items: flex-end; gap: 14px; padding: 2px 0 8px; }
.chart-reading > div { display: grid; gap: 3px; }
.chart-reading span { color: var(--muted); font-size: 10px; }
.chart-reading strong { overflow: hidden; font-family: var(--mono); font-size: clamp(17px, 1.7vw, 22px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.chart-reading small { color: var(--muted); font-size: 10px; padding-bottom: 3px; }
.chart-reading b { color: var(--success); }
.chart-wrap { height: 240px; position: relative; }
.chart-wrap canvas { width: 100%; height: 100%; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .85fr); gap: 12px; }
.side-analytics { display: grid; gap: 12px; }
.mini-card { padding: 18px; }
.mini-card h4 { margin: 0 0 4px; font-size: 13px; }
.mini-card > p { margin: 0 0 14px; color: var(--muted); font-size: 10px; }
.heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.heatmap.has-empty-state { display: block; }
.heat-cell { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--primary) var(--level), var(--surface-2)); display: grid; place-items: center; font-style: normal; }
.heat-cell { min-width: 0; padding: 0; border: 1px solid transparent; cursor: pointer; transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed); }
.heat-cell:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.heat-cell.is-readonly { cursor: default; }
.heat-cell.is-readonly:hover { transform: none; border-color: transparent; }
.heat-cell.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 0 0 1px rgba(255,255,255,.7); }
.heat-cell span { color: color-mix(in srgb, var(--ink) 76%, transparent); font: 600 10px/1 var(--mono); }
.heat-cell.is-light span { color: var(--ink); }
.heat-cell.is-strong span { color: color-mix(in srgb, white 92%, var(--ink)); }
.analytics-empty { min-height: 76px; display: grid; place-items: center; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--faint); font-size: 10px; text-align: center; }
.distribution-bar { display: flex; height: 8px; overflow: hidden; border-radius: 5px; margin: 5px 0 14px; background: var(--surface-2); }
.distribution-bar i { width: var(--share); background: var(--primary); }
.distribution-bar i:nth-child(2) { opacity: .62; }
.distribution-bar i:nth-child(3) { opacity: .28; }
.distribution-layout { min-height: 0; display: grid; grid-template-columns: minmax(112px, .78fr) minmax(150px, 1.22fr); align-items: center; gap: 18px; flex: 1; }
.distribution-donut { width: clamp(96px, 9vw, 126px); aspect-ratio: 1; margin: auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--primary) 0 var(--high-end), #7fa3df var(--high-end) var(--normal-end), #c3d5f1 var(--normal-end) 100%); box-shadow: 0 10px 28px rgba(53, 105, 200, .16); }
.distribution-donut::before { content: ''; grid-area: 1 / 1; width: 66%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.distribution-donut > div { position: relative; z-index: 1; grid-area: 1 / 1; display: grid; gap: 3px; text-align: center; }
.distribution-donut strong { color: var(--ink); font: 750 20px/1 var(--mono); }
.distribution-donut small { color: var(--muted); font-size: 8px; }
.distribution-list { display: grid; gap: 9px; }
.distribution-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; min-height: 38px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.distribution-row:last-child { border-bottom: 0; }
.distribution-row > span { display: flex; align-items: baseline; gap: 7px; }
.distribution-row strong { font-size: 11px; }
.distribution-row small { color: var(--muted); font-family: var(--mono); font-size: 9px; }
.distribution-row > div { display: grid; gap: 3px; text-align: right; }
.distribution-row b { font-family: var(--mono); font-size: 11px; }
.distribution-row em { color: var(--faint); font: 8px/1 var(--mono); font-style: normal; }
.distribution-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.distribution-dot.level-2 { opacity: .62; }
.distribution-dot.level-3 { opacity: .28; }
.data-section { margin-top: 12px; }
.data-card { overflow: hidden; }
.table-toolbar { padding: 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.query-search-with-scope { display: flex; align-items: center; gap: 10px; min-width: min(660px, 60vw); }
.query-search-with-scope .search-shell { flex: 1; }
.query-sort-scope { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); white-space: nowrap; }
.query-sort-scope button, .table-sort { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.query-sort-scope button { padding: 7px 11px; border-radius: 7px; }
.query-sort-scope button.is-active { color: var(--primary); background: var(--surface); box-shadow: 0 2px 8px rgba(28, 48, 84, .08); }
.table-sort { padding: 0; font: inherit; font-weight: 700; color: inherit; }
.table-sort span { margin-left: 4px; color: var(--muted); }
.table-sort.is-active { color: var(--primary); }
.search-shell { min-width: min(100%, 360px); flex: 1; max-width: 520px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); display: flex; align-items: center; }
.search-shell:focus-within { border-color: var(--primary); }
.search-shell::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; margin-left: 12px; background: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238191a9' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E"); }
.search-shell input { width: 100%; min-width: 0; min-height: 38px; border: 0; padding: 0 12px; appearance: none; -webkit-appearance: none; background: transparent; color: var(--ink); }
.search-shell input:focus, .search-shell input:focus-visible { outline: none; box-shadow: none; }
.search-shell input[type="search"]::-webkit-search-decoration, .search-shell input[type="search"]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 920px; }
th { height: 40px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 600; text-align: left; padding: 0 14px; white-space: nowrap; }
td { height: var(--row-height); border-top: 1px solid var(--line); padding: 0 14px; white-space: nowrap; font-size: 11px; }
.event-table th, .event-table td { text-align: center; }
tbody tr { cursor: pointer; transition: background var(--speed); }
tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 35%, transparent); }
.mono { font-family: var(--mono); }
.money { font-family: var(--mono); font-weight: 700; }
.money.low { color: var(--success); }
.money.medium { color: var(--primary); }
.money.high { color: var(--danger); }
.status-pill, .platform-pill, .field-pill { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 10px; }
.status-pill.success { background: var(--primary-soft); color: var(--primary-strong); }
.status-pill.warning { background: color-mix(in srgb, var(--accent) 17%, var(--surface)); color: #9c6b20; }
.status-pill.danger { background: var(--danger-soft); color: var(--danger); }
.sync-error-details { border: 0; font-family: inherit; cursor: pointer; }
.sync-error-details:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 16%, transparent); }
.pagination { padding: 13px 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; align-items: center; }
.page-buttons { display: flex; gap: 5px; }
.page-buttons button { width: 29px; height: 29px; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; cursor: pointer; }
.page-buttons button.is-active { background: var(--primary); color: white; border-color: var(--primary); }

/* Management pages */
.summary-strip { display: flex; gap: 30px; padding: 18px 20px; margin-bottom: 14px; }
.summary-strip span { color: var(--muted); font-size: 10px; display: block; margin-bottom: 6px; }
.summary-strip strong { font-family: var(--mono); font-size: 18px; }
.summary-strip-three > div { flex: 1; }
.query-overview { display: grid; grid-template-columns: minmax(230px, .82fr) minmax(340px, 1.12fr) minmax(440px, 1.45fr); min-height: 108px; margin-bottom: 14px; overflow: visible; }
.query-revenue-block { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 17px 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 55%, var(--surface)) 0%, var(--surface) 78%); border-radius: var(--radius) 0 0 var(--radius); }
.query-revenue-block::after { content: ''; position: absolute; right: 0; top: 20px; bottom: 20px; width: 1px; background: var(--line); }
.query-group-label { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .03em; }
.query-revenue-block strong { margin-top: 6px; color: var(--ink); font-family: var(--mono); font-size: clamp(22px, 1.8vw, 28px); line-height: 1.05; letter-spacing: -.04em; }
.query-revenue-block small { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 9px; }
.query-revenue-block small i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 11%, transparent); }
.query-overview-group { display: grid; align-content: center; gap: 12px; min-width: 0; padding: 16px 20px; }
.query-overview-group + .query-overview-group { border-left: 1px solid var(--line); }
.query-group-values { display: grid; min-width: 0; }
.query-group-values.two-values { grid-template-columns: 1.65fr .8fr; }
.query-group-values.three-values { grid-template-columns: repeat(3, 1fr); }
.query-group-values > div { min-width: 0; }
.query-group-values > div + div { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); }
.query-group-values span { display: block; margin-bottom: 5px; color: var(--faint); font-size: 9px; white-space: nowrap; }
.query-group-values strong { display: block; overflow: hidden; color: var(--ink); font-family: var(--mono); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.08; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.query-group-values small { display: block; margin-top: 5px; color: var(--faint); font-size: 8px; white-space: nowrap; }
.game-management-summary { display: grid; grid-template-columns: minmax(0, 1.25fr) 1px minmax(0, .9fr); gap: 22px; align-items: stretch; padding: 16px 20px; margin-bottom: 14px; }
.game-summary-group { display: grid; align-items: center; gap: 10px 22px; }
.game-summary-left { grid-template-columns: repeat(6, minmax(74px, 1fr)); }
.game-summary-right { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
.game-summary-group > div { min-width: 0; }
.game-summary-group span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.game-summary-group strong { display: block; overflow: hidden; color: var(--ink); font: 700 17px/1.15 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.game-summary-right strong { color: var(--primary-strong); }
.game-summary-divider { width: 1px; background: var(--line); }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.game-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; transition: border-color var(--speed), box-shadow var(--speed); }
.game-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 26px rgba(24, 39, 63, .07); }
.game-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.game-identity { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; }
.game-thumb { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; display: grid; place-items: center; color: white; background: var(--primary); font-weight: 750; }
.game-identity-copy { min-width: 0; }
.game-identity h4, .game-identity p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-identity h4 { margin: 2px 0 5px; font-size: 14px; }
.game-identity p { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 9px; }
.game-head-actions { min-width: 0; display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.game-head-actions .status-pill { max-width: 4.5rem; overflow: hidden; padding-inline: .45rem; text-overflow: ellipsis; white-space: nowrap; }
.game-card-sync-button { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.game-card-sync-button:hover { color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary) 24%, var(--line)); background: var(--primary-soft); }
.game-card-sync-button svg, .game-page-sync svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.game-card-sync-button.is-pending svg, .game-page-sync:disabled svg { animation: spin 1s linear infinite; }
.game-card-sync-button.is-success { color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
.game-card-sync-button.is-warning { color: #a16207; background: #fef9c3; }
.game-card-sync-button.is-error { color: var(--danger); background: var(--danger-soft); }
.game-menu { position: relative; }
.game-menu summary { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; color: var(--muted); cursor: pointer; list-style: none; transition: color var(--speed), background var(--speed), border-color var(--speed); }
.game-menu summary::-webkit-details-marker { display: none; }
.game-menu summary:hover, .game-menu[open] summary { color: var(--primary-strong); background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 18%, var(--line)); }
.game-menu summary span { margin-top: -6px; font-family: var(--mono); font-size: 14px; font-weight: 750; letter-spacing: 1px; }
.game-menu-popover { position: absolute; z-index: 20; top: 35px; right: 0; width: 222px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 18px 48px rgba(25, 37, 57, .18); transform-origin: top right; animation: menu-in 150ms ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.game-menu-item { width: 100%; display: grid; gap: 3px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; transition: background var(--speed), color var(--speed); }
.game-menu-item:hover { background: var(--surface-2); color: var(--primary-strong); }
.game-menu-item span { font-size: 11px; font-weight: 650; }
.game-menu-item small { color: var(--faint); font-size: 8px; font-weight: 400; }
.game-menu-item.danger-menu-item { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--danger); }
.game-menu-item.danger-menu-item:hover { background: var(--danger-soft); color: var(--danger); }
.game-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.game-stat { background: var(--surface-2); border-radius: 8px; padding: 10px; }
.game-stat span { color: var(--muted); font-size: 9px; display: block; margin-bottom: 5px; }
.game-stat strong { font-family: var(--mono); font-size: 13px; }
.game-card-sync-state { display: block; overflow: hidden; margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.game-card-sync-state.is-success { color: var(--success); }
.game-card-sync-state.is-warning { color: #a16207; }
.game-card-sync-state.is-error { color: var(--danger); }
.game-pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding: 12px 16px; color: var(--muted); font-size: 10px; }
.game-pagination .page-buttons { align-items: center; }
.game-pagination .page-buttons button:disabled { cursor: not-allowed; opacity: .42; }
.game-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: nowrap; }
.page-intro:has(.game-page-actions) .filters, .game-page-actions { width: 100%; }
.game-page-actions .compact-page-search { min-width: 250px; width: auto; flex: 1 1 340px; }
.game-page-actions select { min-width: 132px; }
.game-page-actions .primary-button, .game-page-actions .secondary-button { white-space: nowrap; }
.game-page-sync { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
@media (max-width: 1500px) {
  .game-page-sync { width: 40px; justify-content: center; padding: 0; }
  .game-page-sync span { display: none; }
}
.game-management-date { display: inline-flex; align-items: center; gap: 7px; }
.game-management-date svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.game-management-date.is-default { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.game-management-date.has-custom-range { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 8px 20px rgba(53, 105, 200, .18); }
.pagination-gap { display: inline-grid; width: 22px; place-items: center; color: var(--faint); }
.empty-state { padding: 70px 24px; text-align: center; color: var(--muted); }
.empty-state strong { color: var(--ink); display: block; font-size: 16px; margin-bottom: 8px; }
.permission-grid { display: grid; grid-template-columns: 280px 1fr; gap: 12px; min-height: min(610px, calc(100vh - 220px)); }
.role-list { min-height: 0; padding: 9px 9px 0; align-self: stretch; display: flex; flex-direction: column; }
.role-list-rows { flex: 1; }
.role-row-wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 7px; }
.role-row-wrap.is-managing { grid-template-columns: minmax(0, 1fr) auto; padding-right: 5px; border-bottom: 1px solid var(--line); }
.role-row-wrap.is-managing .role-row { min-width: 0; }
.role-system-lock { max-width: 76px; color: var(--faint); font-size: 8px; line-height: 1.35; text-align: center; }
.role-row { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: transparent; padding: 13px 12px; border-radius: 8px; cursor: pointer; text-align: left; }
.role-row:hover, .role-row.is-active { background: var(--surface-2); }
.role-row.is-system-owner { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 7px; border: 1px solid #d2aa4a; background: linear-gradient(128deg, #13110d 0%, #282011 58%, #4a3613 100%); color: #f8e8b4; box-shadow: 0 10px 26px rgba(87, 58, 10, .18), inset 0 0 0 1px rgba(255, 225, 139, .08); }
.role-row.is-system-owner::after { content: ''; position: absolute; z-index: -1; top: -80%; left: -35%; width: 28%; height: 260%; background: linear-gradient(90deg, transparent, rgba(255, 234, 168, .22), transparent); transform: rotate(18deg); transition: left 420ms ease; }
.role-row.is-system-owner:hover::after, .role-row.is-system-owner.is-active::after { left: 115%; }
.role-row.is-system-owner:hover, .role-row.is-system-owner.is-active { border-color: #f0cb69; background: linear-gradient(128deg, #19150e 0%, #352812 58%, #5a4114 100%); box-shadow: 0 12px 32px rgba(103, 71, 15, .24), 0 0 0 2px rgba(230, 185, 78, .12); }
.role-row.is-system-owner strong { color: #fff2c9; letter-spacing: .02em; }
.role-row.is-system-owner small { color: #cbb77c; }
.status-pill.owner-status { border: 1px solid rgba(242, 203, 99, .46); background: linear-gradient(135deg, #8b6518, #e0b94e); color: #fff4c6; box-shadow: 0 3px 10px rgba(120, 82, 12, .22); }
.role-row.is-disabled { opacity: .58; }
.role-row strong { display: block; font-size: 12px; }
.role-row small { color: var(--muted); font-size: 9px; }
.role-actions { display: flex; align-items: center; gap: 8px; }
.role-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.role-migration-panel { display: grid; gap: 8px; margin: 16px 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line)); border-radius: 10px; background: var(--danger-soft); }
.role-migration-panel strong { color: var(--danger); font-size: 12px; }
.role-migration-panel p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.role-migration-panel select { width: 100%; background: var(--surface); }
.role-search-shell { width: min(26vw, 310px); min-width: 220px; }
.role-sort-button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color var(--speed), background var(--speed); }
.role-sort-button:hover { color: var(--primary-strong); background: var(--primary-soft); }
.role-sort-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.permission-card { padding: 20px; }
.permission-card.is-system-owner-card { position: relative; overflow: hidden; border-color: #d8b459; background: linear-gradient(145deg, color-mix(in srgb, #fff8dc 30%, var(--surface)) 0%, var(--surface) 36%); box-shadow: inset 0 3px #d6a72c, 0 14px 42px rgba(111, 77, 16, .10); }
.permission-card.is-system-owner-card::after { content: ''; position: absolute; right: -90px; top: -120px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(229, 187, 77, .16), transparent 68%); pointer-events: none; }
.permission-card.is-system-owner-card .section-head h3 { color: #6f4f10; }
.gold-settings-button { min-height: 38px; padding: 0 15px; border: 1px solid #bc8d20; border-radius: 9px; background: linear-gradient(135deg, #f4d573 0%, #d8a82e 55%, #b77c12 100%); color: #342304; font-weight: 750; cursor: pointer; box-shadow: 0 7px 18px rgba(140, 94, 13, .18), inset 0 1px rgba(255,255,255,.55); transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed); }
.gold-settings-button:hover { border-color: #9a6810; transform: translateY(-1px); box-shadow: 0 9px 24px rgba(140, 94, 13, .25), inset 0 1px rgba(255,255,255,.65); }
.gold-settings-button:disabled { cursor: wait; opacity: .58; }
.owner-kicker { color: #9a701d; }
.retention-setting-card { margin-top: 18px; padding: 16px; border: 1px solid #ead18a; border-radius: 11px; background: #fff9e8; }
.retention-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }
.retention-facts span { padding: 9px; border: 1px solid #f0ddb0; border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 9px; text-align: center; }
.retention-facts strong { display: block; margin-top: 3px; color: #725319; font: 750 12px/1.2 var(--mono); }
.retention-warning { margin: 14px 0 0; color: #87631d; font-size: 10px; line-height: 1.7; }
@media (max-width: 560px) {
  .retention-facts { grid-template-columns: 1fr; }
}
.role-section-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.role-section-tabs button { min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.role-section-tabs button.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.role-section-panel.is-hidden { display: none; }
.permission-section { padding: 17px 0; border-top: 1px solid var(--line); }
.permission-section:first-of-type { border-top: 0; }
.user-table-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 130px 130px; }
.user-selection-bar { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--primary-soft) 34%, var(--surface)); }
.user-selection-bar label { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 10px; white-space: nowrap; }
.user-selection-bar > span { margin-left: auto; color: var(--muted); font-size: 10px; }
.selection-column { width: 38px; min-width: 38px; text-align: center !important; }
.role-default-restore-warning { display: grid; gap: 7px; margin: 16px 0 12px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.role-default-restore-warning strong { color: var(--ink); font-size: 12px; }
.role-default-restore-warning span { color: var(--muted); font-size: 10px; line-height: 1.65; }
.role-default-restore-users { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.role-default-restore-users span, .role-default-restore-users em { padding: 6px 8px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-style: normal; }
.hierarchy-indent { display: inline-block; width: calc(min(var(--depth), 5) * 12px); }
.compact-empty { padding: 30px 18px; }
.compact-pager { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.compact-pager .page-buttons { display: flex; align-items: center; gap: 5px; }
.compact-pager .page-buttons button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.compact-pager .page-buttons button.is-active { border-color: var(--primary); background: var(--primary); color: #fff; }
.recipient-picker { display: grid; gap: 10px; margin-top: 14px; }
.recipient-picker-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 120px auto auto auto auto; gap: 7px; align-items: center; }
.recipient-picker-toolbar .search-shell { min-width: 0; max-width: none; }
.recipient-picker-toolbar > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.paged-recipient-list { display: grid; align-content: start; grid-auto-rows: minmax(34px, auto); gap: 5px; min-height: 390px; margin: 0; overflow: visible; }
.paged-recipient-list .recipient-row { min-height: 34px; padding: 6px 10px; }
.permission-section h4 { margin: 0 0 12px; font-size: 12px; }
.permission-checks { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 9px; }
.permission-check { min-height: 38px; display: flex; gap: 8px; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 11px; }
.permission-check:has(input:checked) { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); color: var(--primary-strong); }
.permission-check.is-granted { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); color: var(--primary-strong); }
.permission-check.is-denied { color: var(--faint); background: var(--surface-2); }
.permission-note, .muted-copy { color: var(--muted); font-size: 10px; line-height: 1.65; }
.field-cloud { display: flex; gap: 7px; flex-wrap: wrap; }
.field-pill { cursor: pointer; border: 1px solid transparent; }
.field-pill.selected { background: var(--primary-soft); color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.audit-card { overflow: hidden; }
.audit-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 370px auto; gap: 12px; align-items: end; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.application-page-actions { display: flex; align-items: center; gap: 8px; }
.application-card { overflow: hidden; }
.application-toolbar { display: grid; grid-template-columns: minmax(230px, 1fr) 130px minmax(260px, auto) auto; align-items: center; gap: 10px; }
.application-toolbar .search-shell { min-width: 0; max-width: none; }
.application-date-range { min-height: 38px; display: grid; grid-template-columns: 18px minmax(116px, 1fr) 14px minmax(116px, 1fr); align-items: center; gap: 4px; padding: 0 8px 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--muted); transition: border-color var(--speed), background var(--speed), box-shadow var(--speed); }
.application-date-range:hover { border-color: color-mix(in srgb, var(--primary) 38%, var(--line-strong)); }
.application-date-range:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.application-date-range .date-range-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.application-date-range input { position: relative; width: 100%; min-width: 116px; min-height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: 600 11px/1 var(--mono); cursor: pointer; box-shadow: none !important; }
.application-date-range i { display: grid; place-items: center; color: var(--faint); font-style: normal; font-size: 12px; }
.application-date-range input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.application-list-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 16px; border-bottom: 1px solid var(--line); }
.application-list-head > span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.application-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.application-select-cell { width: 34px; text-align: center; }
.application-card td.mono > span, .application-card td.mono > small { display: block; }
.credential-verified { margin-top: 3px; color: var(--success); font: 8px/1.2 var(--sans); }
.credential-legacy { margin-top: 3px; color: var(--warning); font: 8px/1.2 var(--sans); }
.credential-review-note { margin: 14px 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--success) 25%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--success-soft) 72%, var(--surface)); color: var(--muted); font-size: 10px; line-height: 1.65; }
.audit-toolbar .search-shell { min-width: 0; max-width: none; }
.audit-date-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; }
.audit-date-range > i { height: 38px; display: grid; place-items: center; color: var(--faint); font: normal 10px/1 var(--mono); }
.audit-date-field { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 9px; cursor: pointer; }
.audit-date-field input[type="date"] { position: relative; width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; background: var(--surface); color: var(--ink); font: 600 11px/1 var(--mono); cursor: pointer; transition: border-color var(--speed), background var(--speed), box-shadow var(--speed); }
.audit-date-field input[type="date"]:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--line-strong)); background: var(--primary-soft); }
.audit-date-field input[type="date"]:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.audit-date-field input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.audit-list-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 10px; }
.audit-bulk-actions { display: flex; align-items: center; gap: 8px; }
.audit-cleanup-hint { color: var(--faint); }
.audit-timeline { min-height: calc(10 * 54px); display: grid; align-content: start; }
.audit-item { min-height: 54px; display: grid; grid-template-columns: 145px 32px minmax(0, 1fr); gap: 11px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.audit-item.is-cleanup { grid-template-columns: 22px 145px 32px minmax(0, 1fr) auto; }
.audit-select { display: grid; place-items: center; }
.audit-time { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.audit-dot { width: 29px; height: 29px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 9px; }
.audit-copy strong { display: block; font-size: 12px; margin-bottom: 5px; }
.audit-copy p { margin: 0; color: var(--muted); font-size: 10px; }

.authorization-workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; min-height: 0; }
.authorization-accounts, .authorization-games { min-width: 0; overflow: hidden; }
.authorization-pane-head, .authorization-user-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.authorization-pane-head > div, .authorization-user-head > div > div { display: grid; gap: 4px; }
.authorization-pane-head strong, .authorization-user-head strong { font-size: 13px; }
.authorization-pane-head small, .authorization-user-head small { color: var(--muted); font-size: 9px; }
.authorization-pane-head > span, .authorization-user-head > span { color: var(--primary-strong); font: 700 11px/1 var(--mono); }
.authorization-search { flex: 0 0 auto; width: auto; max-width: none; margin: 10px; }
.authorization-account-list { display: grid; align-content: start; }
.authorization-account-row { width: 100%; min-height: 50px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.authorization-account-row:hover, .authorization-account-row.is-active { background: var(--primary-soft); }
.authorization-account-row .avatar { width: 30px; height: 30px; }
.authorization-account-row > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.authorization-account-row strong, .authorization-account-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authorization-account-row strong { font-size: 11px; }
.authorization-account-row small { color: var(--muted); font-size: 8px; }
.authorization-account-row em { color: var(--faint); font: normal 9px/1 var(--mono); }
.authorization-user-head > div { display: flex; align-items: center; gap: 10px; }
.authorization-user-head .large-avatar { width: 38px; height: 38px; }
.authorization-game-toolbar { min-height: 54px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.authorization-game-toolbar .search-shell { min-width: 160px; max-width: none; flex: 1; }
.authorization-game-head, .authorization-game-row { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(6, 80px); align-items: center; gap: 8px; padding: 0 14px; }
.authorization-game-head { min-height: 40px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 650; }
.authorization-game-head > label { display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; cursor: pointer; }
.authorization-game-list { display: grid; align-content: start; }
.authorization-game-row { min-height: 48px; border-bottom: 1px solid var(--line); }
.authorization-game-row:hover { background: color-mix(in srgb, var(--primary-soft) 28%, transparent); }
.authorization-game-access { min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.authorization-game-access > span { min-width: 0; display: grid; gap: 5px; }
.authorization-game-access strong, .authorization-game-access small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authorization-game-access strong { font-size: 11px; }
.authorization-game-access small { color: var(--muted); font: 8px/1.2 var(--mono); }
.authorization-capability, .grant-capability { min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--ink); font-size: 10px; cursor: pointer; }
.authorization-capability.is-locked, .grant-capability.is-locked { color: var(--faint); }
.authorization-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); }
.authorization-footer .form-message { margin: 0; }

.authorization-pager { flex-shrink: 0; border-top: 1px solid var(--line); }
.authorization-pager .compact-pager { border-top: 0; flex-wrap: wrap; gap: 8px; }
.authorization-pager-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 0 12px 10px; color: var(--muted); font-size: 10px; }
.authorization-pager-tools form, .authorization-pager-tools label { display: flex; align-items: center; gap: 5px; }
.authorization-pager-tools input, .authorization-pager-tools select { height: 30px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; font: inherit; padding: 0 6px; }
.authorization-pager-tools input { width: 48px; }
.authorization-game-head { position: sticky; top: 0; z-index: 1; }
.authorization-game-head input, .authorization-capability input, .grant-capability input { flex-shrink: 0; }
@media (min-width: 761px) and (max-width: 1280px) {
  .authorization-game-head, .authorization-game-row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 14px; }
  .authorization-game-head > span:first-child, .authorization-game-access { grid-column: 1 / -1; }
  .authorization-capability, .authorization-game-head > label { justify-content: flex-start; }
}

@media (min-width: 1121px) {
  .view-root:has(.audit-page) { height: calc(100vh - 72px); padding-bottom: 24px; overflow: hidden; }
  .audit-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .audit-page .page-intro { margin-bottom: 12px; }
  .audit-card { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .audit-timeline { flex: 1; grid-template-rows: repeat(10, minmax(0, 1fr)); min-height: 0; }
  .audit-item { min-height: 0; }
  .view-root:has(.authorization-page) { height: calc(100vh - 72px); padding-bottom: 24px; overflow: hidden; }
  .authorization-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .authorization-page .page-intro { margin-bottom: 12px; }
  .authorization-workspace { flex: 1; }
  .authorization-accounts, .authorization-games { display: flex; flex-direction: column; min-height: 0; }
  .authorization-account-list { flex: 1; min-height: 0; overflow-y: auto; }
  .authorization-permissions-table { flex: 1; min-height: 0; overflow: auto; }
  .authorization-account-row, .authorization-game-row { min-height: 50px; flex-shrink: 0; }
}

/* Dialogs */
.modal { width: min(calc(100vw - 32px), 680px); border: 1px solid var(--line); padding: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 90px rgba(0,0,0,.28); }
.modal.wide-modal { width: min(calc(100vw - 32px), 980px); }
.modal.tracking-link-modal { width: min(calc(100vw - 32px), 760px); }
.tracking-link-modal #action-modal-content { max-height: calc(100dvh - 32px); overflow-y: auto; }
.tracking-link-guide { margin: 18px 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.tracking-link-guide > strong { display: block; margin-bottom: 8px; font-size: 12px; }
.tracking-link-guide ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.tracking-link-field { display: block; }
.tracking-link-field textarea { min-height: 118px; resize: none; color: var(--primary-strong); background: var(--surface-2); font: 10px/1.65 var(--mono); word-break: break-all; }
.tracking-link-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent); border-color: var(--primary); }
.tracking-link-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tracking-link-scope > div { min-height: 76px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.tracking-link-scope strong, .tracking-link-scope span { display: block; }
.tracking-link-scope strong { margin-bottom: 5px; font-size: 11px; }
.tracking-link-scope span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.tracking-link-privacy { margin: 12px 0 0; color: var(--faint); font-size: 9px; line-height: 1.6; }
.tracking-link-actions { align-items: center; }
.tracking-link-actions .form-message { flex: 1; margin: 0; text-align: left; color: var(--success); }
.modal.communication-modal { width: min(calc(100vw - 32px), 1080px); overflow: hidden; }
.modal.display-manager-modal, .modal.grant-modal { overflow: hidden; }
.display-manager-modal #action-modal-content, .grant-modal #action-modal-content { max-height: calc(100dvh - 32px); overflow: hidden; }
.grant-modal { width: min(calc(100vw - 32px), 1040px) !important; }
.grant-modal #action-modal-content { padding: 22px 28px; }
.grant-modal h3 { margin: 5px 0 0; }
.grant-modal .modal-desc { margin: 6px 42px 12px 0; }
.grant-toolbar { min-height: 48px; display: flex; align-items: center; gap: 8px; }
.grant-toolbar .search-shell { min-width: 0; max-width: none; }
.grant-toolbar > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.grant-list-head, .grant-user-row { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(6, 86px); align-items: center; gap: 8px; padding: 0 12px; }
.grant-list-head { min-height: 38px; border: 1px solid var(--line); border-radius: 9px 9px 0 0; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 650; }
.grant-list-head span:not(:first-child) { text-align: center; }
.grant-user-list { border: 1px solid var(--line); border-top: 0; max-height: min(50vh, 450px); overflow-y: auto; }
.grant-user-row { min-height: 46px; border-bottom: 1px solid var(--line); }
.grant-user-row:last-child { border-bottom: 0; }
.grant-user-row:hover { background: color-mix(in srgb, var(--primary-soft) 28%, transparent); }
.grant-account-access { min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.grant-account-access > span { min-width: 0; display: grid; gap: 4px; }
.grant-account-access strong, .grant-account-access small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grant-account-access strong { font-size: 11px; }
.grant-account-access small { color: var(--muted); font-size: 9px; }
.grant-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.grant-footer .modal-actions { margin: 0; padding: 0; border: 0; }
.grant-footer .form-message { margin: 0; }
.communication-modal #action-modal-content { max-height: calc(100dvh - 32px); padding: 22px 28px; overflow: hidden; display: flex; flex-direction: column; }
.communication-modal h3 { margin-top: 5px; }
.communication-modal .modal-desc { margin: 4px 42px 10px 0; }
.communication-modal .compact-compose-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }
.communication-modal .compact-compose-grid .full-span { grid-column: auto; }
.communication-modal .compact-compose-grid .field-label { margin-top: 4px; }
.communication-modal textarea { min-height: 46px; height: 46px; }
.communication-modal .recipient-picker { min-height: 0; margin-top: 10px; }
.communication-modal .recipient-picker-toolbar { display: flex; flex-wrap: wrap; }
.communication-modal .recipient-picker-toolbar .search-shell { flex: 1 1 280px; }
.communication-modal .paged-recipient-list { height: 235px; min-height: 235px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; }
.communication-modal .recipient-row { min-width: 0; }
.communication-modal .recipient-row-main > span { display: flex; align-items: baseline; gap: 8px; }
.communication-modal .recipient-row-main strong { flex: 0 1 auto; }
.communication-modal .recipient-row-main small { flex: 1 1 auto; min-width: 0; margin: 0; }
.communication-modal .modal-actions { margin-top: 10px; padding-top: 12px; }
.daily-reminder-modal #action-modal-content { box-sizing: border-box; height: min(46rem, calc(100dvh - 2rem)); }
.daily-reminder-modal #action-modal-content:has(#daily-specific-recipients[hidden]) { height: auto; }
.daily-reminder-modal .daily-audience-options { flex: 0 0 auto; margin-top: 8px; }
.daily-reminder-modal #daily-specific-recipients { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.daily-reminder-modal #daily-specific-recipients .recipient-picker { height: 100%; display: flex; flex-direction: column; }
.daily-reminder-modal #daily-specific-recipients .paged-recipient-list { min-height: 0; height: auto; flex: 1 1 auto; }
.daily-reminder-modal #daily-specific-recipients [id$="-pager"] { flex: 0 0 auto; }
.daily-reminder-modal #daily-message { flex: 0 0 auto; }
.daily-reminder-modal .daily-modal-actions { position: relative; z-index: 2; flex: 0 0 auto; margin: 10px -28px -22px; padding: 12px 28px 22px; background: var(--surface); box-shadow: 0 -10px 22px color-mix(in srgb, var(--surface) 92%, transparent); }
.daily-reminder-modal #daily-specific-recipients[hidden] { display: none; }
.modal::backdrop { background: rgba(8, 13, 11, .55); backdrop-filter: blur(3px); }
body:has(dialog[open]) { overflow: hidden; }
.display-manager-modal #display-manager-message:empty { display: none; }
.display-manager-modal .modal-actions { margin-top: 10px; }
.compact-modal { max-width: 440px; }
.modal form, #action-modal-content { padding: 28px; position: relative; }
.modal-close { position: absolute; right: 18px; top: 18px; width: 31px; height: 31px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; cursor: pointer; }
.modal-desc { color: var(--muted); line-height: 1.7; }
.full-button { width: 100%; margin-top: 20px; }
.profile-hero { display: flex; align-items: center; gap: 13px; margin: 24px 0; padding: 16px; border-radius: 10px; background: var(--surface-2); }
.large-avatar { width: 48px; height: 48px; }
.profile-hero div { display: grid; gap: 5px; }
.profile-hero small { color: var(--muted); }
.modal-list { border-top: 1px solid var(--line); }
.modal-list button { width: 100%; min-height: 46px; display: flex; justify-content: space-between; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
.danger-text-button { width: 100%; margin-top: 18px; min-height: 42px; border: 0; border-radius: 8px; background: var(--danger-soft); color: var(--danger); cursor: pointer; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.modal-grid .full-span { grid-column: 1 / -1; }
.management-editor-modal { width: min(calc(100vw - 32px), 1040px) !important; overflow: hidden; }
.management-editor-modal #action-modal-content { max-height: calc(100dvh - 32px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.management-editor-header { flex: 0 0 auto; padding: 24px 72px 16px 28px; }
.management-editor-header .panel-kicker { margin: 0 0 5px; }
.management-editor-header h3 { margin: 0; font-size: 20px; }
.management-editor-header > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.management-editor-tabs { flex: 0 0 auto; display: flex; gap: 4px; padding: 0 28px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); overflow-x: auto; scrollbar-width: none; }
.management-editor-tabs::-webkit-scrollbar { display: none; }
.management-editor-tabs button { position: relative; min-width: 96px; min-height: 43px; padding: 0 15px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.management-editor-tabs button::after { content: ''; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color 140ms ease; }
.management-editor-tabs button:hover { color: var(--ink); }
.management-editor-tabs button.is-active { color: var(--primary-strong); }
.management-editor-tabs button.is-active::after { background: var(--primary); }
.management-editor-body { flex: 1 1 auto; min-height: 0; padding: 20px 28px 24px; overflow-y: auto; overscroll-behavior: contain; }
.management-editor-panel[hidden] { display: none; }
.editor-surface { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.editor-surface + .editor-surface, .management-editor-panel > * + * { margin-top: 14px; }
.editor-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.editor-section-head h4 { margin: 0 0 5px; font-size: 12px; }
.editor-section-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.editor-empty-note { min-height: 180px; display: grid; place-content: center; gap: 7px; padding: 24px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.editor-empty-note strong { color: var(--ink); font-size: 12px; }
.editor-empty-note span { font-size: 10px; }
.management-editor-footer { flex: 0 0 auto; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 28px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, var(--surface-2)); }
.management-editor-footer .form-message { flex: 1 1 auto; min-width: 0; margin: 0; text-align: left; }
.management-editor-footer .modal-actions { flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
.role-identity-fields { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 12px; }
.account-profile-grid { gap: 3px 14px; }
.capability-editor-group + .capability-editor-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.capability-editor-group h5 { margin: 0 0 9px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.role-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.role-capability-card { min-height: 66px; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); cursor: pointer; }
.role-capability-card:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); background: var(--primary-soft); }
.role-capability-card input { margin-top: 3px; }
.role-capability-card span { display: grid; gap: 4px; min-width: 0; }
.role-capability-card strong { font-size: 11px; color: var(--ink); }
.role-capability-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.game-approval-quota-panel { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface)); }
.game-approval-quota-panel > div:first-child { display: grid; gap: 4px; min-width: 0; }
.game-approval-quota-panel strong { color: var(--ink); font-size: 11px; }
.game-approval-quota-panel small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.game-quota-controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.game-quota-controls .suffix-input { width: 150px; }
.quota-balance-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); font-size: 10px; font-weight: 700; white-space: nowrap; }
.quota-review-summary { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 12px 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 9px; background: var(--primary-soft); }
.quota-review-summary span, .quota-review-summary small { color: var(--muted); font-size: 9px; }
.quota-review-summary strong { color: var(--primary-strong); font-size: 13px; }
.quota-review-summary small { grid-column: 1 / -1; line-height: 1.5; }
.quota-review-summary.is-exhausted { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.quota-review-summary.is-exhausted strong { color: var(--danger); }
.permission-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.permission-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.permission-heading-actions .secondary-button { padding: 8px 11px; white-space: nowrap; }
.permission-section-heading h4 { margin-bottom: 5px; }
.permission-section-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.delegation-section { background: color-mix(in srgb, var(--primary-soft) 36%, transparent); }
.delegation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.delegation-card { min-height: 55px; display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
.delegation-card:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 32%, var(--line)); background: var(--primary-soft); }
.delegation-card.is-locked, .delegation-card:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.delegation-card input { margin-top: 3px; }
.delegation-card span { display: grid; gap: 3px; }
.delegation-card strong { font-size: 10px; }
.delegation-card small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.select-all-permissions { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--primary-strong); font-size: 10px; cursor: pointer; }
.role-assignment-sync-panel { margin: 12px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.role-assignment-sync-panel label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.role-assignment-sync-panel input { margin-top: 3px; }
.role-assignment-sync-panel span { display: grid; gap: 5px; }
.role-assignment-sync-panel strong { color: var(--ink); font-size: 11px; }
.role-assignment-sync-panel small { color: var(--muted); font-size: 9px; line-height: 1.6; }
.sub-account-limit-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.sub-account-limit-panel > div:first-child { display: grid; gap: 4px; min-width: 0; }
.sub-account-limit-panel strong { font-size: 11px; }
.sub-account-limit-panel small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.sub-account-limit-control { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sub-account-limit-control .compact-check { min-height: 38px; margin: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.sub-account-limit-control .suffix-input { width: 150px; margin: 0; background: var(--surface); }
.suffix-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.suffix-input span { padding-right: 10px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.sub-account-summary { margin: 13px 0 0; color: var(--muted); font-size: 10px; }
.user-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-permission-option span { display: grid; gap: 2px; }
.user-permission-option small { color: var(--faint); font-size: 8px; }
.user-permission-option.is-locked { opacity: .58; cursor: not-allowed; }
.modal-feedback-zone { min-height: 36px; display: grid; align-items: center; border-top: 1px solid var(--line); }
.modal-feedback-zone .form-message { margin: 0; }
.parent-lookup-panel { margin: 4px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.parent-quick-option { width: fit-content; margin: 8px 0 10px; background: var(--surface); cursor: pointer; }
.parent-lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.parent-lookup-row .input-shell { margin: 0; }
.selected-parent-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; margin-top: 10px; }
.parent-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 4px 5px 4px 10px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); font-size: 11px; }
.parent-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-chip button { display: grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 16px; }
.parent-chip button:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.parent-chip.is-pending { border-style: dashed; background: var(--surface); color: var(--muted); }
.parent-manage-toggle { display: inline-flex; align-items: center; gap: 5px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); font-size: 10px; cursor: pointer; }
.parent-manage-toggle span { overflow: visible; white-space: nowrap; }
.parent-manage-toggle input:disabled + span { opacity: .6; }
.readonly-platform { min-height: 44px; display: flex; align-items: center; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink); font-weight: 650; }
.parent-quick-option.is-required { color: var(--ink); cursor: default; }
.parent-empty { align-self: center; color: var(--faint); font-size: 11px; }
.parent-lookup-message { min-height: 16px; margin-top: 7px; color: var(--muted); font-size: 11px; }
.selection-panel { border: 1px solid var(--line); border-radius: 9px; margin-top: 10px; padding: 12px; max-height: 210px; overflow-y: auto; }
.selection-panel label { display: flex; align-items: center; gap: 9px; min-height: 34px; color: var(--muted); font-size: 11px; }
.grant-user-row > label { color: var(--ink); font-weight: 650; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); }
.readonly-field { background: var(--surface-2); }
.readonly-field input { color: var(--muted); cursor: not-allowed; }
.danger-kicker { color: var(--danger); }
.delete-impact { display: flex; justify-content: space-between; align-items: center; margin: 18px 0; padding: 13px 14px; border-radius: 9px; background: var(--danger-soft); color: var(--danger); }
.delete-impact span { font-size: 11px; }
.delete-impact strong { font-family: var(--mono); font-size: 12px; }
.sync-error-panel { display: grid; gap: 8px; margin-top: 18px; padding: 15px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)); border-radius: 10px; background: var(--danger-soft); }
.sync-error-panel span, .sync-error-panel small { color: var(--muted); font-size: 10px; }
.sync-error-panel strong { color: var(--danger); font: 600 11px/1.7 var(--mono); overflow-wrap: anywhere; }
.batch-grant-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; margin-top: 20px; }
.batch-grant-section { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.batch-section-head { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.batch-section-head > span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--mono); font-size: 10px; }
.batch-section-head > div, .batch-account-copy { display: grid; gap: 3px; }
.batch-section-head strong { font-size: 12px; }
.batch-section-head small, .batch-account-copy small, .game-choice small, .batch-permissions small { color: var(--muted); font-size: 9px; }
.game-choice-list { max-height: 430px; overflow-y: auto; padding: 7px; }
.game-choice { display: grid; grid-template-columns: 0 36px 1fr; align-items: center; gap: 9px; min-height: 58px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.game-choice:hover { background: var(--surface-2); }
.game-choice.is-selected { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 24%, var(--line)); }
.game-choice input { opacity: 0; width: 0; }
.game-choice .game-thumb { width: 34px; height: 34px; border-radius: 8px; }
.game-choice > span:last-child { display: grid; gap: 4px; min-width: 0; }
.game-choice strong { font-size: 11px; }
.batch-list-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.batch-list-toolbar .search-shell { min-width: 0; max-width: none; }
.batch-list-toolbar.is-narrow { display: grid; }
.batch-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.batch-toolbar-actions .link-button { white-space: nowrap; }
.batch-account-list { max-height: 286px; overflow-y: auto; }
.batch-account-row { display: grid; grid-template-columns: 18px 34px 1fr auto; align-items: center; gap: 9px; min-height: 58px; padding: 8px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.batch-account-row:hover { background: color-mix(in srgb, var(--primary-soft) 32%, transparent); }
.batch-account-row:has(input:checked) { background: color-mix(in srgb, var(--primary-soft) 62%, transparent); }
.batch-account-row.is-disabled { cursor: not-allowed; opacity: .55; background: var(--surface-2); }
.batch-account-row .avatar { width: 30px; height: 30px; }
.batch-account-copy strong { font-size: 11px; }
.batch-game-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 224px; padding: 10px; overflow-y: auto; }
.batch-game-row { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 58px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.batch-game-row:hover { border-color: var(--line-strong); background: var(--surface-2); }
.batch-game-row:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 34%, var(--line)); background: var(--primary-soft); }
.batch-game-row .game-thumb { width: 32px; height: 32px; border-radius: 8px; }
.batch-game-copy { display: grid; gap: 4px; min-width: 0; }
.batch-game-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.batch-game-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--mono); font-size: 8px; }
.batch-permissions { padding: 14px; }
.batch-permissions > div:first-child { display: grid; gap: 3px; margin-bottom: 10px; }
.batch-permissions .permission-checks { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.batch-grant-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 14px; border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 11px; }
.batch-grant-summary .modal-actions { margin: 0; padding: 0; border: 0; }
button:disabled { cursor: not-allowed; opacity: .45; transform: none !important; box-shadow: none !important; }

/* Douyin mini-game preview codes */
.ocean-consent-summary { display: grid; gap: 12px; margin-top: 14px; }
.ocean-consent-highlight { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)); border-radius: 10px; background: var(--primary-soft); }
.ocean-consent-highlight strong { color: var(--primary-strong); font-size: 12px; }
.ocean-consent-highlight span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.ocean-consent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ocean-consent-list > div { display: grid; align-content: start; gap: 4px; min-height: 76px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.ocean-consent-list b { color: var(--ink); font-size: 10px; }
.ocean-consent-list span { color: var(--muted); font-size: 9px; line-height: 1.65; }
.ocean-consent-legal { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid var(--primary); background: var(--surface-2); color: var(--muted); font-size: 9px; line-height: 1.65; }
.ocean-consent-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; color: var(--ink); font-size: 10px; font-weight: 650; line-height: 1.55; cursor: pointer; }
.ocean-consent-check input { flex: 0 0 auto; margin-top: 2px; }
.preview-quick-button { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); cursor: pointer; transition: border-color var(--speed), background var(--speed), box-shadow var(--speed); }
.preview-quick-button img { width: 17px; height: 17px; opacity: .68; filter: var(--icon-filter, none); }
.preview-quick-button:hover { border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); background: var(--primary-soft); box-shadow: 0 7px 18px rgba(53, 105, 200, .1); }
.preview-quick-button.is-valid { border-color: color-mix(in srgb, var(--success) 40%, var(--line)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.preview-quick-button.is-expired, .preview-quick-button.is-authorization_expired { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.game-card-preview-button { width: 29px; height: 29px; flex-basis: 29px; border-color: transparent; background: transparent; }
.game-card-preview-button img { width: 15px; height: 15px; }
.preview-management-page { min-width: 0; }
.preview-page-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.preview-page-header p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.preview-page-header-actions { display: flex; gap: 8px; }
.preview-config-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 11px 14px; border: 1px solid color-mix(in srgb, #c78a2f 28%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #e6a640 8%, var(--surface)); }
.preview-config-banner strong { font-size: 11px; }
.preview-config-banner span { color: var(--muted); font-size: 10px; }
.preview-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(140px, auto) minmax(310px, 1.15fr) repeat(2, minmax(130px, auto)); gap: 8px; align-items: center; padding: 10px; }
.preview-toolbar.without-scope { grid-template-columns: minmax(240px, 1fr) minmax(360px, 1.15fr) repeat(2, minmax(140px, auto)); }
.preview-toolbar select { width: 100%; min-width: 0; }
.preview-account-view-control { min-width: 0; display: grid; grid-template-columns: minmax(160px, 1fr) auto; align-items: center; gap: 8px; }
.preview-display-toggle { min-height: 40px; padding: 8px 14px; white-space: nowrap; }
.preview-display-toggle.is-active { border-color: var(--primary); color: var(--primary-strong); background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent); }
.preview-selection-bar { min-height: 40px; display: flex; align-items: center; gap: 16px; padding: 0 12px; color: var(--muted); font-size: 10px; }
.preview-selection-bar label { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 650; }
.preview-selection-bar span { margin-left: auto; }
.preview-selection-bar .compact-button { min-height: 32px; padding: 6px 12px; }
.preview-shared-tip strong { color: var(--ink); }
.preview-primary-mark, .preview-shared-mark { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.preview-shared-mark { color: #2958b8; background: #e7efff; }
.preview-share-security { display: grid; gap: 4px; margin: 12px 0; padding: 11px 14px; border: 1px solid #cbd9f2; border-radius: 12px; background: #f2f6fd; }
.preview-share-security span { color: var(--muted); line-height: 1.7; }
.preview-share-grid { grid-template-columns: 1.15fr .85fr; }
.preview-share-modal #action-modal-content { display: block; overflow-y: auto; }
.preview-share-modal [hidden] { display: none !important; }
.preview-share-modal:has(.preview-quick-step:not([hidden])) #action-modal-content { display: flex; overflow: hidden; }
.preview-quick-step { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.preview-share-modal:has(.preview-quick-step:not([hidden])) .modal-actions { position: static; flex-shrink: 0; margin: 12px 0 0; padding: 14px 0 0; box-shadow: none; }
.preview-quick-search { margin: 12px 0; min-width: 0; max-width: none; }
.preview-quick-head, .preview-quick-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 90px); gap: 10px; align-items: center; padding: 12px; }
.preview-quick-head { border: 1px solid var(--line); border-radius: 9px 9px 0 0; background: var(--surface-2); color: var(--muted); font-size: 10px; }
.preview-quick-head label, .preview-quick-capability { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.preview-quick-list { border: 1px solid var(--line); border-top: 0; }
.preview-quick-row + .preview-quick-row { border-top: 1px solid var(--line); }
.preview-quick-identity { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.preview-quick-identity small { color: var(--muted); }
.preview-quick-identity label { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.preview-quick-capability.is-locked { color: var(--muted); }
.preview-quick-blocked { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.preview-quick-blocked ul { margin: 8px 0 0; padding-left: 18px; max-height: 140px; overflow-y: auto; overflow-wrap: anywhere; }
.preview-quick-blocked li + li { margin-top: 6px; }
@media (max-width: 600px) {
  .preview-quick-head, .preview-quick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; }
  .preview-quick-head > span, .preview-quick-identity { grid-column: 1 / -1; }
  .preview-quick-head label, .preview-quick-capability { font-size: 10px; }
  .preview-quick-identity { grid-template-columns: minmax(0, 1fr) auto; }
  .preview-quick-identity small { grid-column: 1; }
  .preview-quick-identity label { grid-column: 2; grid-row: 1 / 3; }
}
.preview-share-modal .paged-recipient-list { height: auto; min-height: 0; max-height: 235px; overflow-y: auto; }
.preview-share-modal .modal-actions { position: sticky; z-index: 3; bottom: -16px; align-items: flex-end; margin: 12px -28px -16px; padding: 14px 28px 16px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 -10px 22px color-mix(in srgb, var(--surface) 90%, transparent); }
.preview-share-selection { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.preview-share-selection > div:first-child { display: grid; gap: 3px; }
.preview-share-selection > div:first-child span { color: var(--muted); }
.preview-share-games { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.preview-share-games span, .preview-share-games em { padding: 5px 9px; border-radius: 8px; color: #315075; background: #e8eff8; font-style: normal; }
.preview-share-record-toolbar { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.4fr) minmax(220px, 1fr); gap: 9px; margin-top: 16px; }
.preview-share-record-toolbar .search-shell { min-width: 0; }
.preview-share-record-selection { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.preview-share-record-selection label { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.preview-share-record-selection > span { margin-left: auto; color: var(--muted); }
.preview-share-records { display: grid; gap: 10px; min-height: 150px; margin-top: 12px; }
.preview-share-record { display: grid; grid-template-columns: auto minmax(190px, 1.25fr) minmax(170px, 1fr) minmax(145px, .8fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.preview-share-record-check { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.preview-share-record span { display: grid; gap: 4px; min-width: 0; }
.preview-share-record small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-table-card { overflow: hidden; }
.preview-table-card .table-scroll { min-height: 0; max-height: none; overflow: visible; }
.preview-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.preview-table th { height: 42px; padding: 0 8px; background: var(--surface-2); color: var(--muted); text-align: left; font-size: 9px; white-space: nowrap; }
.preview-table td { height: 58px; min-width: 0; padding: 8px; border-top: 1px solid var(--line); overflow: hidden; font-size: 10px; vertical-align: middle; }
.preview-table th:nth-child(1), .preview-table td:nth-child(1) { width: 3%; text-align: center; }
.preview-table th:nth-child(2), .preview-table td:nth-child(2) { width: 13%; }
.preview-table th:nth-child(3), .preview-table td:nth-child(3) { width: 10%; }
.preview-table th:nth-child(4), .preview-table td:nth-child(4) { width: 12%; }
.preview-table th:nth-child(5), .preview-table td:nth-child(5) { width: 15%; }
.preview-table th:nth-child(6), .preview-table td:nth-child(6) { width: 7%; }
.preview-table th:nth-child(7), .preview-table td:nth-child(7) { width: 8%; }
.preview-table th:nth-child(8), .preview-table td:nth-child(8) { width: 11%; }
.preview-table th:nth-child(9), .preview-table td:nth-child(9) { width: 8%; }
.preview-table th:nth-child(10), .preview-table td:nth-child(10) { width: 13%; }
.preview-table td > strong, .preview-table td > small { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-table td > strong { color: var(--ink); font-size: 10px; }
.preview-table td > small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.preview-row-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; white-space: nowrap; }
.preview-row-actions .link-button { flex: 0 0 auto; max-width: 100%; padding-inline: 2px; font-size: 10px; }
.preview-status-badge, .preview-primary-mark { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.preview-status-badge.is-valid { background: var(--success-soft); color: var(--success); }
.preview-status-badge.is-expired, .preview-status-badge.is-authorization_expired, .preview-status-badge.is-failed { background: var(--danger-soft); color: var(--danger); }
.preview-primary-mark { background: var(--primary-soft); color: var(--primary-strong); }
.preview-gallery { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.preview-gallery-grid { min-height: 430px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.preview-gallery-card { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(16, 24, 40, .04); }
.preview-gallery-card > header { min-height: 84px; display: grid; align-content: center; gap: 7px; padding: 12px 56px 10px 14px; border-bottom: 1px solid var(--line); }
.preview-gallery-card > header strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.preview-gallery-card > header small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.preview-card-meta-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.preview-card-meta-row > small { min-width: 0; flex: 1; }
.preview-owner-badge { position: relative; width: fit-content; max-width: 52%; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 0; border-radius: 999px; color: #315075; background: #e8eff8; font: 750 9px/1.2 var(--sans); white-space: nowrap; cursor: help; }
.preview-owner-badge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.preview-owner-badge.is-own { color: var(--success); background: var(--success-soft); }
.preview-owner-help { width: 13px; height: 13px; flex: 0 0 13px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 800 8px/1 var(--sans); font-style: normal; }
.preview-owner-badge::after { content: attr(data-tooltip); position: absolute; z-index: 8; top: calc(100% + 6px); right: 0; width: max-content; max-width: 240px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--ink); color: var(--surface); box-shadow: 0 8px 22px rgba(16, 24, 40, .18); font: 500 9px/1.45 var(--sans); text-align: left; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease; pointer-events: none; }
.preview-owner-badge:hover, .preview-owner-badge:focus-visible { box-shadow: inset 0 0 0 1px currentColor; outline: none; }
.preview-owner-badge:hover::after, .preview-owner-badge:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }
.preview-gallery-check { position: absolute; z-index: 1; top: 15px; right: 13px; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; cursor: pointer; }
.preview-gallery-image { min-height: 250px; display: grid; place-items: center; padding: 12px; background: #fff; }
.preview-gallery-image > img { width: 100%; height: 250px; object-fit: contain; }
.preview-gallery-empty { display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.preview-gallery-empty img { width: 42px; height: 42px; opacity: .25; }
.preview-gallery-empty strong { color: var(--ink); font-size: 11px; }
.preview-gallery-empty span { font-size: 9px; }
.preview-gallery-card > footer { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.preview-gallery-card > footer > span { display: grid; gap: 5px; min-width: 0; }
.preview-gallery-card > footer > span small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.preview-gallery-card > footer > div { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.preview-job-modal { width: min(calc(100vw - 32px), 980px); overflow: hidden; }
.preview-job-modal #action-modal-content { max-height: calc(100dvh - 32px); display: flex; flex-direction: column; padding: 24px 28px 22px; overflow: hidden; }
.preview-job-modal h3 { margin: 5px 0 0; }
.preview-job-modal .modal-desc { margin: 5px 42px 12px 0; }
.preview-job-confirm { min-height: 150px; display: grid; grid-template-columns: minmax(200px, .65fr) minmax(0, 1.35fr); align-items: center; gap: 18px; margin-top: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.preview-job-confirm > div:first-child { display: grid; gap: 7px; }
.preview-job-confirm > div:first-child strong { font-size: 18px; }
.preview-job-confirm > div:first-child span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.preview-job-confirm-games { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.preview-job-confirm-games span, .preview-job-confirm-games em { padding: 6px 9px; border-radius: 8px; color: #315075; background: #e8eff8; font-size: 9px; font-style: normal; }
.preview-job-overview { display: grid; grid-template-columns: minmax(180px, auto) minmax(160px, 1fr) 46px; align-items: center; gap: 14px; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.preview-job-summary { display: grid; gap: 4px; }
.preview-job-summary span { color: var(--muted); font-size: 9px; }
.preview-job-progress { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.preview-job-progress i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.preview-job-overview > b { color: var(--primary); font-size: 10px; text-align: right; }
.preview-job-overview .preview-job-progress { background: var(--surface); }
.preview-job-result-toolbar { min-height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 4px; color: var(--muted); font-size: 9px; }
.preview-job-result-toolbar label { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 650; }
.preview-job-result-toolbar > span { margin-left: auto; }
.preview-job-result-list { flex: 1; min-height: 302px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; padding: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.preview-job-result { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
.preview-job-result:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--primary-soft); }
.preview-job-result:has(input:disabled) { cursor: default; }
.preview-job-result > span { min-width: 0; display: grid; gap: 3px; }
.preview-job-result strong, .preview-job-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-job-result strong { font-size: 10px; }
.preview-job-result small { color: var(--muted); font-size: 8px; }
.preview-job-result .preview-job-error { color: var(--danger); }
.preview-job-result em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 700; }
.preview-job-result.is-success em { color: var(--success); }
.preview-job-result.is-failed em { color: var(--danger); }
.preview-job-waiting { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.preview-job-waiting strong { color: var(--ink); }
.preview-job-modal .compact-pager { min-height: 42px; }
.preview-job-modal .form-message { min-height: 18px; margin: 0; }
.preview-job-actions { flex-wrap: wrap; margin-top: 6px; padding-top: 12px; }
.preview-download-appid-option { min-height: 42px; padding: 0 8px; font-size: 10px; font-weight: 650; }
.preview-code-modal { width: min(calc(100vw - 32px), 820px); }
.preview-code-layout { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr); gap: 22px; align-items: center; margin-top: 18px; }
.preview-image-shell { min-height: 260px; display: grid; place-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.preview-image-shell img { width: min(100%, 260px); aspect-ratio: 1; object-fit: contain; }
.preview-code-details { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.preview-code-details > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 14px; background: var(--surface); }
.preview-code-details span { color: var(--muted); font-size: 10px; }
.preview-code-details strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.preview-empty-state { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 10px; margin-top: 18px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface-2); text-align: center; }
.preview-empty-state img { width: 44px; height: 44px; opacity: .28; }
.preview-empty-state strong { font-size: 16px; }
.preview-empty-state span { max-width: 520px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.preview-choice-list { display: grid; gap: 8px; max-height: 410px; margin-top: 18px; overflow-y: auto; }
.preview-binding-choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; cursor: pointer; }
.preview-binding-choice:hover, .preview-binding-choice.is-primary { border-color: color-mix(in srgb, var(--primary) 38%, var(--line)); background: var(--primary-soft); }
.preview-binding-choice span { display: grid; gap: 5px; min-width: 0; }
.preview-binding-choice small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.preview-binding-choice em { color: var(--primary); font-size: 9px; font-style: normal; white-space: nowrap; }
.preview-binding-modal { width: min(calc(100vw - 32px), 860px); }
.preview-binding-modal #action-modal-content { max-height: calc(100dvh - 32px); padding: 26px 30px 24px; overflow-y: auto; }
.preview-binding-modal h3 { margin-top: 7px; }
.preview-binding-desc { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; margin: 4px 42px 16px 0; }
.preview-binding-desc strong { max-width: 280px; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.preview-binding-desc span { color: var(--muted); font-size: 10px; }
.preview-binding-account { min-height: 66px; display: grid; grid-template-columns: 34px minmax(250px, 1.05fr) minmax(250px, .95fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--success) 24%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--success) 5%, var(--surface)); }
.preview-binding-account-status { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); font-size: 15px; font-weight: 750; }
.preview-binding-account-copy { display: grid; gap: 4px; min-width: 0; }
.preview-binding-account-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.preview-binding-account-copy span { color: var(--muted); font-size: 9px; }
.preview-binding-account-select { display: grid; grid-template-columns: auto minmax(190px, 1fr); align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }
.preview-binding-account-select select,
.preview-binding-account-select input { width: 100%; height: 42px; min-height: 42px; min-width: 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); outline: none; }
.preview-binding-account-select select:focus,
.preview-binding-account-select input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.preview-binding-advertiser-select { grid-template-columns: minmax(120px, auto) minmax(180px, 1fr); }
.preview-binding-advertiser-select em { color: var(--primary); font-size: 8px; font-style: normal; white-space: nowrap; }
.preview-binding-account-action { white-space: nowrap; }
.preview-binding-loading { min-height: 132px; display: grid; place-items: center; align-content: center; gap: 7px; margin-top: 14px; border: 1px dashed var(--line-strong); border-radius: 11px; background: var(--surface-2); text-align: center; }
.preview-binding-loading[hidden], .preview-binding-fields[hidden], .preview-binding-account-action[hidden] { display: none; }
.preview-binding-loading strong { font-size: 11px; }
.preview-binding-loading small { color: var(--muted); font-size: 9px; }
.preview-binding-spinner { width: 22px; height: 22px; margin-bottom: 2px; border: 2px solid color-mix(in srgb, var(--primary) 18%, var(--line)); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
.preview-binding-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.preview-binding-field { display: grid; gap: 8px; min-width: 0; }
.preview-binding-field > span { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 650; }
.preview-binding-field > span i { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 9px; font-style: normal; }
.preview-binding-field select { width: 100%; height: 44px; min-height: 44px; min-width: 0; }
.preview-binding-primary { grid-column: 1 / -1; margin: 1px 0 0; }
.preview-binding-empty { min-height: 180px; margin-top: 16px; }
.preview-binding-actions { margin-top: 16px; padding-top: 14px; }
.preview-binding-modal .form-message.success { color: var(--success); }
.preview-binding-modal .form-message.is-loading { color: var(--muted); }
.preview-binding-v2 { width: min(calc(100vw - 32px), 940px); }
.preview-binding-v2 #action-modal-content { max-height: min(860px, calc(100dvh - 32px)); padding: 28px 34px 24px; }
.preview-binding-v2 .preview-binding-account { min-height: 72px; }
.preview-binding-v2 .preview-binding-account-select { grid-template-columns: auto minmax(0, 1fr); }
.preview-binding-v2 .preview-binding-account-select select,
.preview-binding-v2 input,
.preview-binding-v2 select,
.preview-binding-v2 button.primary-button,
.preview-binding-v2 button.secondary-button { height: 44px; min-height: 44px; }
.preview-binding-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 16px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.preview-binding-mode-switch button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 650; cursor: pointer; }
.preview-binding-mode-switch button.is-active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(16, 24, 40, .08); }
.preview-binding-method { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 100px; margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.preview-binding-method[hidden] { display: none; }
.preview-binding-method-copy { display: grid; gap: 6px; }
.preview-binding-method-copy strong { color: var(--ink); font-size: 13px; }
.preview-binding-method-copy span,
.preview-binding-manual-actions > span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.preview-binding-manual-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.preview-binding-manual-grid label { display: grid; gap: 7px; min-width: 0; }
.preview-binding-manual-grid label > span { color: var(--ink); font-size: 10px; font-weight: 650; }
.preview-binding-manual-grid em { color: var(--primary); font-size: 8px; font-style: normal; font-weight: 600; }
.preview-binding-manual-grid input { width: 100%; min-width: 0; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); outline: none; }
.preview-binding-manual-grid input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.preview-binding-manual-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.preview-binding-v2 .preview-binding-loading { min-height: 112px; }
.preview-binding-result { display: grid; gap: 14px; margin-top: 14px; padding: 17px 18px; border: 1px solid color-mix(in srgb, var(--success) 28%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--success) 4%, var(--surface)); }
.preview-binding-result[hidden] { display: none; }
.preview-binding-recovery { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 15px 17px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.preview-binding-recovery[hidden] { display: none; }
.preview-binding-recovery > div:first-child { display: grid; gap: 5px; min-width: 0; }
.preview-binding-recovery strong { color: var(--ink); font-size: 11px; }
.preview-binding-recovery span { color: var(--muted); font-size: 9px; line-height: 1.6; }
.preview-binding-recovery-actions { display: flex; flex: 0 0 auto; gap: 9px; }
.preview-binding-result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.preview-binding-result-head > div { display: grid; gap: 4px; }
.preview-binding-result-head strong { color: var(--ink); font-size: 12px; }
.preview-binding-result-head span { color: var(--muted); font-size: 9px; }
.preview-binding-result-head select { width: min(100%, 510px); }
.preview-verified-target { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.preview-verified-target > div { display: grid; gap: 5px; min-width: 0; padding: 12px 14px; border-right: 1px solid var(--line); }
.preview-verified-target > div:last-child { border-right: 0; }
.preview-verified-target span { color: var(--muted); font-size: 9px; }
.preview-verified-target strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.preview-binding-v2 .preview-binding-primary { margin: 0; }
.preview-binding-v2 .modal-actions { position: sticky; z-index: 3; bottom: -24px; margin: 18px -34px -24px; padding: 16px 34px 24px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 -10px 22px color-mix(in srgb, var(--surface) 90%, transparent); }
.preview-resource-error { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; align-items: start; margin-top: 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--danger) 4%, var(--surface)); text-align: left; }
.preview-resource-error-icon { width: 30px; height: 30px; display: grid; place-items: center; grid-row: 1 / span 2; border-radius: 50%; background: var(--danger-soft); color: var(--danger); font-weight: 750; }
.preview-resource-error > div { display: grid; gap: 5px; }
.preview-resource-error strong { color: var(--ink); font-size: 12px; }
.preview-resource-error > div > span { color: var(--muted); font-size: 10px; line-height: 1.65; }
.preview-resource-error-actions { grid-column: 2; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; margin-top: 4px; }
.preview-resource-error-actions .secondary-button, .preview-resource-error-actions .primary-button { min-height: 36px; padding: 0 13px; }


/* Tweaks */
.tweaks-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 40; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); border-radius: 9px; min-height: 34px; padding: 0 12px; font-family: var(--mono); font-size: 10px; cursor: pointer; box-shadow: 0 8px 25px rgba(0,0,0,.12); }
.tweaks-panel { position: fixed; z-index: 41; right: 18px; bottom: 60px; width: 250px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.app-shell:not(.is-hidden) ~ .tweaks-toggle { display: none; }
.app-shell:not(.is-hidden) ~ .tweaks-panel { top: 76px; right: 28px; bottom: auto; }
.tweaks-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; font-family: var(--mono); }
.tweaks-head button { border: 0; background: transparent; cursor: pointer; }
.tweaks-panel > label { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.tweaks-panel select { width: 100%; }
.switch-row { grid-template-columns: 1fr auto !important; align-items: center; }
.modal-grid .switch-row > span { display: grid; gap: 3px; }
.modal-grid .switch-row > span small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }

@media (max-width: 1500px) {
  .game-page-actions .compact-page-search { min-width: 13rem; }
  .game-page-actions select { min-width: 10rem; }
}

@media (max-height: 800px) and (min-width: 821px) {
  .view-root:has(.game-management-page) { min-height: calc(100vh - 72px); height: auto; padding-top: 16px; padding-bottom: 18px; overflow: visible; }
  .game-management-page .page-intro { margin-bottom: 12px; }
  .game-management-page .game-management-summary { padding-top: 12px; padding-bottom: 12px; margin-bottom: 10px; }
  .game-management-page .game-pagination { margin-top: 10px; padding-top: 9px; padding-bottom: 9px; }
}

@media (max-height: 900px) and (min-width: 821px) {
  .sidebar-top { height: 62px; }
  .main-nav { padding-top: 8px; padding-bottom: 8px; }
  .nav-label { padding-top: 10px; padding-bottom: 5px; }
  .nav-item { min-height: 38px; }
  .sidebar-account { padding: 8px 10px; }
  .sidebar-announcement-button { min-height: 42px; margin-bottom: 6px; padding-top: 6px; padding-bottom: 6px; }
  .sidebar-quick-tools { gap: 6px; margin-bottom: 5px; }
  .sidebar-quick-tool { min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .profile-button { padding-top: 5px; padding-bottom: 5px; }
}

/* Responsive decisions follow the usable workspace, not the monitor width. */
@container workspace (max-width: 72rem) and (min-width: 66.001rem) {
  .query-page .page-intro.query-intro { grid-template-columns: minmax(18rem, 20rem) minmax(0, 1fr); }
  .query-page .query-intro .tracking-link-button,
  .query-page .query-intro .advanced-filter-button { padding-inline: .625rem; }
}

@container workspace (max-width: 66rem) {
  .query-page .page-intro.query-intro { grid-template-columns: 1fr; align-items: stretch; }
  .query-page .query-intro .query-search-with-scope { max-width: 30rem; }
  .query-page .page-intro .filters { justify-content: start; }
  .overview-page .page-intro { grid-template-columns: 1fr; align-items: stretch; }
  .overview-page .page-intro .filters { justify-content: flex-start; }
  .page-intro:has(.game-page-actions) { align-items: stretch; flex-direction: column; }
  .game-page-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .game-page-actions .compact-page-search { flex: 1 1 18rem; width: auto; }
  .game-page-actions select { flex: 1 1 10rem; min-width: 0; }
}

@container workspace (max-width: 66rem) {
  .query-overview { grid-template-columns: minmax(220px, .8fr) minmax(330px, 1.2fr); }
  .coverage-overview-group { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0 !important; }
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: 1fr; }
  .side-analytics { grid-template-columns: 1fr 1fr; }
}

@container workspace (max-width: 75rem) {
  .game-grid, .preview-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container workspace (max-width: 52rem) {
  .game-grid, .preview-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-toolbar, .preview-toolbar.without-scope { grid-template-columns: minmax(15rem, 1fr) minmax(15rem, 1fr); }
  .preview-toolbar .search-shell, .preview-account-view-control { grid-column: 1 / -1; }
  .preview-account-view-control { min-width: 0; }
}

@media (max-width: 1120px) {
  .view-root:has(.overview-page) { height: auto; overflow: visible; }
  .view-root:has(.query-page) { height: auto; overflow: visible; }
  .view-root:has(.user-management-page) { height: auto; overflow: visible; }
  .user-management-page { display: block; height: auto; }
  .query-page { display: block; height: auto; }
  .overview-page { display: block; }
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .query-overview { grid-template-columns: minmax(220px, .8fr) minmax(330px, 1.2fr); }
  .coverage-overview-group { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0 !important; }
  .game-management-summary { grid-template-columns: 1fr; gap: 14px; }
  .game-summary-divider { width: 100%; height: 1px; }
  .analytics-grid { grid-template-columns: 1fr; }
  .side-analytics { grid-template-columns: 1fr 1fr; }
  .game-page-actions { flex-wrap: wrap; }
  .view-root:has(.authorization-page) { height: auto; overflow: visible; }
  .authorization-page { display: block; height: auto; }
  .authorization-workspace { grid-template-columns: 1fr; }
  .authorization-account-list, .authorization-game-list { grid-template-rows: none; }
  .authorization-account-list { max-height: 280px; overflow-y: auto; }
  .preview-share-grid { grid-template-columns: 1fr; }
  .preview-share-modal .modal-actions { bottom: -14px; margin-right: -20px; margin-bottom: -14px; margin-left: -20px; padding: 14px 20px; }
  .preview-share-record { grid-template-columns: 1fr 1fr; }
  .preview-share-record-toolbar { grid-template-columns: 1fr 1fr; }
  .preview-share-record-toolbar .search-shell { grid-column: 1 / -1; grid-row: 1; }
}

@media (min-width: 1121px) {
  .query-page .page-intro .filters { flex: 0 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 7px; }
}

@media (min-width: 1121px) and (max-width: 1500px) {
  .query-page .page-intro .filters { justify-content: flex-start; }
}

@media (max-width: 820px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-brand { min-height: 40vh; padding-bottom: 20px; }
  .hero-copy { margin: auto 0 30px; }
  .hero-copy h1 { font-size: clamp(44px, 12vw, 72px); }
  .live-strip { display: none; }
  .login-panel-wrap { min-height: auto; padding-top: 0; padding-bottom: 36px; }
  .app-shell { grid-template-columns: 72px minmax(0, 1fr); }
  .app-wordmark span:last-child, .nav-label, .nav-item span:last-of-type, .profile-copy, .profile-more, .nav-badge, .sidebar-tool-copy { display: none; }
  .sidebar-quick-tools { grid-template-columns: 1fr; }
  .sidebar-quick-tool { min-height: 38px; grid-template-columns: 24px; justify-content: center; padding: 6px; }
  .nav-item { justify-content: center; }
  .sidebar-top { padding: 0 10px; justify-content: center; }
  .collapse-button { display: none; }
  .topbar { align-items: flex-start; }
  .sync-state, .role-preview > span, .appearance-button span { display: none; }
  .appearance-button { width: 34px; justify-content: center; padding: 0; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .game-grid { grid-template-columns: 1fr; }
  .game-summary-left { grid-template-columns: repeat(2, 1fr); }
  .permission-grid { grid-template-columns: 1fr; }
  .permission-checks { grid-template-columns: repeat(2, 1fr); }
  .sub-account-limit-control { grid-template-columns: 1fr; }
  .display-manager-row { grid-template-columns: 20px minmax(140px, 1fr) repeat(3, 98px); gap: 8px; }
  .recipient-picker-toolbar { grid-template-columns: 1fr 110px; }
  .recipient-picker-toolbar > button, .recipient-picker-toolbar > span { justify-self: start; }
  .user-table-toolbar { grid-template-columns: 1fr 1fr; }
  .user-table-toolbar .search-shell { grid-column: 1 / -1; }
  .audit-toolbar { grid-template-columns: 1fr 1fr; }
  .audit-toolbar .search-shell { grid-column: 1 / -1; }
  .audit-date-range { grid-column: 1 / -1; }
  .application-toolbar { grid-template-columns: 1fr 130px; }
  .application-toolbar .search-shell, .application-date-range { grid-column: 1 / -1; }
  .communication-modal .paged-recipient-list { grid-template-columns: 1fr; grid-template-rows: repeat(10, minmax(0, 1fr)); grid-auto-flow: row; height: 410px; min-height: 410px; }
  .authorization-game-head, .authorization-game-row, .grant-user-row { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; padding: 12px; gap: 8px; }
  .authorization-game-head > span:first-child, .authorization-game-access, .grant-account-access { grid-column: 1 / -1; }
  .grant-list-head { display: none; }
  .authorization-capability, .grant-capability { justify-content: flex-start; }
  .authorization-user-head, .authorization-footer { flex-wrap: wrap; }
  .grant-toolbar { flex-wrap: wrap; }
  .grant-toolbar .search-shell { flex-basis: 100%; }
  .grant-modal #action-modal-content { padding: 18px 14px; }
  .preview-job-result-list { grid-template-columns: 1fr; grid-template-rows: repeat(8, minmax(0, 1fr)); grid-auto-flow: row; max-height: 470px; overflow-y: auto; }
  .preview-job-overview { grid-template-columns: 1fr auto; }
  .preview-job-overview .preview-job-progress { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  .notification-drawer { width: 100%; }
  .notification-drawer-layer.is-detail .notification-drawer { width: 100%; }
  .notification-drawer-backdrop { display: none; }
  .app-shell { display: block; }
  .sidebar { width: 100%; height: 62px; position: fixed; top: auto; bottom: 0; left: 0; z-index: 30; display: block; }
  .sidebar-top, .sidebar-account, .nav-label { display: none; }
  .main-nav { display: flex; padding: 7px; overflow-x: auto; }
  .nav-item { min-width: 58px; width: auto; height: 48px; }
  .nav-item:nth-of-type(n+6) { display: none; }
  .workspace { padding-bottom: 65px; }
  .topbar { min-height: 62px; padding: 9px 14px; }
  .topbar-actions { gap: 6px; }
  .role-preview { padding-left: 0; border: 0; }
  .role-preview select { width: 105px; }
  .view-root { padding: 18px 12px 35px; }
  .page-intro, .section-head { align-items: flex-start; flex-direction: column; }
  .filters { width: 100%; }
  .filters select, .filters button { flex: 1; }
  .filters .platform-filter-toggle, .filters .single-date-button { flex: 0 0 38px; }
  .filters .game-combobox { flex: 1; width: auto; }
  .filters .date-filter-group { flex: 1; min-width: 205px; }
  .filters .date-filter-group .date-control { flex: 1; min-width: 0; width: 100%; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .preview-share-record { grid-template-columns: 1fr; }
  .preview-share-record-toolbar { grid-template-columns: 1fr; }
  .preview-share-record-toolbar .search-shell { grid-column: auto; grid-row: auto; }
  .preview-share-record-selection > span { width: 100%; margin-left: 0; }
  .preview-share-selection { grid-template-columns: 1fr; }
  .preview-share-games { justify-content: flex-start; }
  .query-overview { grid-template-columns: 1fr; }
  .query-revenue-block { border-radius: var(--radius) var(--radius) 0 0; }
  .query-revenue-block::after { top: auto; left: 16px; right: 16px; bottom: 0; width: auto; height: 1px; }
  .query-overview-group + .query-overview-group { border-top: 1px solid var(--line); border-left: 0; }
  .coverage-overview-group { grid-column: auto; }
  .query-group-values > div + div { margin-left: 12px; padding-left: 12px; }
  .metric-card { padding: 13px; }
  .metric-card strong { font-size: 18px; }
  .side-analytics { grid-template-columns: 1fr; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .query-search-with-scope { min-width: 0; width: 100%; flex-wrap: wrap; }
  .query-page .query-intro { align-items: stretch; }
  .query-page .query-intro .query-search-with-scope, .query-page .query-intro .search-shell { width: 100%; min-width: 0; }
  .platform-filter-popover { right: 0; left: auto; transform: none; }
  .platform-filter-popover::before { right: 15px; left: auto; transform: rotate(45deg); }
  .query-page .query-intro .filters { justify-content: flex-end; }
  .modal-grid { grid-template-columns: 1fr; }
  .ocean-consent-list { grid-template-columns: 1fr; }
  .ocean-consent-list > div { min-height: 0; }
  .preview-page-header { align-items: stretch; flex-direction: column; }
  .preview-page-header-actions > * { flex: 1; }
  .preview-toolbar { grid-template-columns: 1fr 1fr; }
  .preview-toolbar .search-shell { grid-column: 1 / -1; }
  .preview-account-view-control { min-width: 0; }
  .preview-gallery-grid { grid-template-columns: 1fr; }
  .preview-job-confirm { grid-template-columns: 1fr; }
  .preview-job-confirm-games { justify-content: flex-start; }
  .preview-job-result-toolbar { align-items: flex-start; flex-wrap: wrap; padding: 8px 2px; }
  .preview-job-result-toolbar > span { width: 100%; margin-left: 0; }
  .preview-code-layout { grid-template-columns: 1fr; }
  .preview-image-shell { min-height: 220px; }
  .tracking-link-scope { grid-template-columns: 1fr; }
  .tracking-link-actions { flex-wrap: wrap; }
  .tracking-link-actions .form-message { flex-basis: 100%; }
  .modal-grid .full-span { grid-column: auto; }
  .role-capability-grid { grid-template-columns: 1fr; }
  .delegation-grid, .user-capability-grid { grid-template-columns: 1fr; }
  .permission-section-heading { flex-direction: column; }
  .parent-lookup-row { grid-template-columns: 1fr; }
  .daily-audience-options, .field-selector-list { grid-template-columns: 1fr; }
  .batch-grant-layout { grid-template-columns: 1fr; }
  .batch-list-toolbar { flex-wrap: wrap; }
  .batch-list-toolbar .search-shell { flex-basis: 100%; }
  .batch-game-list { grid-template-columns: 1fr; }
  .batch-grant-summary { align-items: stretch; flex-direction: column; }
  .captcha-row { grid-template-columns: 1fr 105px; }
  .display-manager-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .display-manager-toolbar > span { align-self: flex-end; }
  .display-bulk-actions > i { display: none; }
  .display-bulk-toggles { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .display-manager-row { grid-template-columns: 20px minmax(0, 1fr); gap: 7px 10px; }
  .display-scope-check { grid-column: 2; }
  .role-page-actions { width: 100%; }
  .role-search-shell { min-width: 0; flex: 1; }
  .application-page-actions { width: 100%; justify-content: flex-end; }
  .application-toolbar { display: flex; flex-direction: column; align-items: stretch; }
  .application-date-range { display: grid; grid-template-columns: 18px 1fr auto 1fr; }
  .application-date-range input { min-width: 0; width: 100%; }
  .application-list-head { align-items: flex-start; flex-direction: column; }
  .application-bulk-actions { width: 100%; }
  .audit-list-head { align-items: flex-start; flex-direction: column; }
  .audit-bulk-actions { flex-wrap: wrap; }
  .audit-item { grid-template-columns: 32px minmax(0, 1fr); }
  .audit-item.is-cleanup { grid-template-columns: 22px 32px minmax(0, 1fr) auto; }
  .audit-item.is-cleanup .audit-time { grid-column: 3 / -1; grid-row: 2; }
  .audit-item:not(.is-cleanup) .audit-time { grid-column: 2 / -1; grid-row: 2; }
  .audit-toolbar { grid-template-columns: 1fr; }
  .audit-toolbar .search-shell { grid-column: auto; }
  .communication-modal #action-modal-content { overflow-y: auto; }
  .communication-modal .compact-compose-grid { grid-template-columns: 1fr; }
  .communication-modal .paged-recipient-list { height: 360px; min-height: 360px; }
  .daily-modal-actions { flex-wrap: wrap; }
  .daily-footer-options { width: 100%; justify-content: flex-end; order: -1; }
}

@media (max-width: 620px) {
  .nav-tree { display: contents; }
  .nav-tree-label, .nav-tree-branch-toggle { display: none; }
  .nav-tree-content[hidden], .nav-tree-children[hidden] { display: contents; }
  .nav-tree-content, .nav-tree-children { display: contents; }
  .nav-tree-branch { display: flex; margin: 0; padding: 0; border: 0; }
  .preview-toolbar { grid-template-columns: 1fr; }
  .preview-toolbar .search-shell { grid-column: auto; }
  .preview-account-view-control { grid-template-columns: minmax(0, 1fr) auto; }
  .preview-selection-bar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px 12px; }
  .preview-selection-bar span { margin-left: 0; }
  .preview-code-details > div { grid-template-columns: 78px 1fr; }
  .preview-binding-fields { grid-template-columns: 1fr; }
  .preview-binding-primary { grid-column: auto; }
  .preview-binding-account { grid-template-columns: 34px minmax(0, 1fr); }
  .preview-binding-account-action { grid-column: 2; justify-self: start; }
  .preview-binding-account-select { grid-template-columns: 1fr; gap: 5px; }
  .preview-binding-v2 #action-modal-content { padding: 24px 20px 20px; }
  .preview-binding-v2 .modal-actions { bottom: -20px; margin-right: -20px; margin-bottom: -20px; margin-left: -20px; padding: 14px 20px 20px; }
  .preview-binding-method { grid-template-columns: 1fr; }
  .preview-binding-recovery { align-items: stretch; flex-direction: column; }
  .preview-binding-recovery-actions { display: grid; grid-template-columns: 1fr; }
  .preview-binding-manual-grid,
  .preview-verified-target { grid-template-columns: 1fr; }
  .preview-binding-manual-actions,
  .preview-binding-result-head { align-items: stretch; flex-direction: column; }
  .preview-verified-target > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-verified-target > div:last-child { border-bottom: 0; }
}

@media (max-width: 820px) {
  .management-editor-modal { width: min(calc(100vw - 16px), 1040px) !important; }
  .management-editor-modal #action-modal-content { max-height: calc(100dvh - 16px); }
  .management-editor-header { padding: 20px 56px 13px 18px; }
  .management-editor-header h3 { font-size: 17px; }
  .management-editor-tabs { padding: 0 12px; }
  .management-editor-tabs button { min-width: 88px; min-height: 41px; padding: 0 11px; }
  .management-editor-body { padding: 16px 18px 20px; }
  .editor-surface { padding: 14px; }
  .role-identity-fields { grid-template-columns: 1fr; gap: 4px; }
  .sub-account-limit-panel, .game-approval-quota-panel { align-items: stretch; flex-direction: column; }
  .sub-account-limit-control, .game-quota-controls { width: 100%; }
  .sub-account-limit-control .suffix-input, .game-quota-controls .suffix-input { flex: 1 1 auto; width: auto; }
  .management-editor-footer { min-height: 62px; padding: 10px 18px; }
}

@media (max-width: 560px) {
  .management-editor-header > p:last-child { display: none; }
  .management-editor-tabs button { min-width: 82px; }
  .management-editor-body { padding: 12px; }
  .management-editor-footer { align-items: stretch; flex-direction: column; gap: 7px; padding: 10px 12px; }
  .management-editor-footer .form-message:empty { display: none; }
  .management-editor-footer .modal-actions { width: 100%; }
  .management-editor-footer .modal-actions button { flex: 1; }
  .permission-section-heading, .editor-section-head { gap: 10px; }
  .permission-heading-actions { justify-content: flex-start; }
}

/* Mobile login keeps only a static line treatment; continuous canvas, blur and spark effects are disabled. */
@media (max-width: 820px), (pointer: coarse) {
  #signal-canvas, .login-aurora, .login-grain { display: none !important; }
  .login-grid { animation: none !important; opacity: .1; background-size: 64px 44px; }
  .login-beam {
    animation: none !important;
    top: 31%;
    right: 10%;
    bottom: auto;
    left: 10%;
    width: auto;
    height: 1px;
    opacity: .28;
    background: linear-gradient(90deg, transparent, rgba(111, 201, 255, .7), transparent);
    filter: none;
    transform: none;
  }
  .login-panel {
    animation: none !important;
    background: linear-gradient(145deg, #fcfffd, #f2f7f6);
    backdrop-filter: none;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .26), 0 0 0 1px rgba(73, 169, 255, .08);
  }
  .login-panel::before, .login-panel::after { display: none !important; }
  .login-sparks { animation: none !important; filter: none; background: none; }
  .login-sparks::before { animation: none !important; box-shadow: 0 0 0 4px rgba(67, 200, 255, .12); }
  .login-sparks::after, .login-sparks i { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .login-sparks i { opacity: .62; transform: rotate(var(--spark-angle)) translateX(var(--spark-mid)) scaleX(.72); }
}

/* Phone layout: keep the page fluid and confine wide data to its own scroller. */
@media (max-width: 620px) {
  html, body { max-width: 100%; }
  body { min-width: 0; }
  .app-shell, .workspace, .view-root, .page-enter, .page-intro,
  .page-intro-copy, .filters, .card, .data-card, .table-scroll { min-width: 0; max-width: 100%; }
  .workspace { width: 100%; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .view-root {
    width: 100%;
    min-height: calc(100dvh - 62px);
    padding: 14px 10px calc(30px + env(safe-area-inset-bottom));
  }

  .topbar { min-height: 62px; align-items: center; gap: 8px; padding: 8px 10px; }
  .topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
  .topbar .breadcrumb, .topbar-query-status, .role-preview, .appearance-button { display: none !important; }
  .topbar h2 { margin: 0; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { min-width: 0; flex: 0 0 auto; gap: 2px; }
  .topbar-actions > button { flex: 0 0 34px; }

  .sidebar {
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .main-nav {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: stretch;
    gap: 3px;
    padding: 6px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-tree, .nav-tree-content, .nav-tree-branch, .nav-tree-children { display: contents !important; }
  .nav-tree-label, .nav-tree-branch-toggle { display: none !important; }
  .main-nav .nav-item,
  .main-nav .nav-item:nth-of-type(n+6) {
    width: auto;
    min-width: 68px;
    height: 52px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 4px 7px;
    scroll-snap-align: start;
  }
  .main-nav .nav-item.is-hidden { display: none !important; }
  .main-nav .nav-item .nav-mark,
  .main-nav .nav-item .nav-sub-dot { display: none; }
  .main-nav .nav-item span:last-of-type {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-intro { width: 100%; gap: 10px; margin-bottom: 12px; }
  .page-intro-copy { width: 100%; }
  .filters > *, .filters select, .filters button,
  .filter-control, .game-combobox, .date-control, .date-filter-group {
    min-width: 0;
    max-width: 100%;
  }
  .game-options-popover { width: min(100%, calc(100vw - 20px)); min-width: 0; }

  .overview-page .page-intro {
    display: block;
    width: 100%;
  }
  .overview-page .page-intro-copy { margin-bottom: 9px; }
  .overview-page .page-intro .filters {
    width: 100%;
    display: grid;
    grid-template-columns: 38px 38px minmax(0, 1fr) auto;
    gap: 7px;
  }
  .overview-page .overview-preview-button { grid-column: 1; grid-row: 1; }
  .overview-page .platform-filter-menu { grid-column: 2; grid-row: 1; }
  .overview-page .game-combobox { grid-column: 3 / -1; grid-row: 1; width: 100%; }
  .overview-page .date-filter-group { grid-column: 1 / 4; grid-row: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 38px; }
  .overview-page .query-data { grid-column: 4; grid-row: 2; width: auto; }

  .query-page .page-intro.query-intro { width: 100%; display: block; }
  .query-page .query-intro .query-search-with-scope {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-bottom: 8px;
  }
  .query-page .query-intro .query-sort-scope button { padding-inline: 9px; }
  .query-page .query-intro .filters {
    width: 100%;
    display: grid;
    grid-template-columns: 38px 38px minmax(0, 1fr);
    gap: 7px;
  }
  .query-page .query-preview-button { grid-column: 1; grid-row: 1; }
  .query-page .platform-filter-menu { grid-column: 2; grid-row: 1; }
  .query-page .tracking-link-button { grid-column: 3; grid-row: 1; width: 100%; }
  .query-page .game-combobox { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .query-page .date-filter-group { grid-column: 1 / -1; grid-row: 3; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 38px; }
  .query-page .advanced-filter-button { grid-column: 1 / 3; grid-row: 4; width: 100%; justify-content: center; }
  .query-page .query-data { grid-column: 3; grid-row: 4; width: 100%; }
  .query-page .data-card, .query-page #event-table-wrap, .query-page .table-scroll { width: 100%; }
  .query-page .table-scroll, .user-management-page .table-scroll,
  .preview-table-card .table-scroll, .application-page .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-width: 0; }
  .metric-card span, .metric-card small, .metric-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .analytics-grid, .side-analytics { display: grid; grid-template-columns: minmax(0, 1fr); }
  .chart-head { align-items: stretch; flex-direction: column; gap: 10px; }
  .chart-controls { width: 100%; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px; }
  .segmented { min-width: 0; }
  .segmented button { min-width: 0; padding-inline: 7px; white-space: nowrap; }
  .chart-range button { flex: 1 1 auto; }
  .chart-reading { align-items: flex-start; flex-direction: column; }
  .chart-reading small { margin-left: 0; }

  .game-management-page .page-intro:not(:has(.page-intro-copy)) { display: block; }
  .game-page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .game-page-actions > * { width: 100%; min-width: 0 !important; max-width: 100%; }
  .game-page-actions .compact-page-search { grid-column: 1 / -1; grid-row: 1; }
  .game-page-actions .game-page-sync { grid-column: 1; }
  .game-page-actions .game-management-date { grid-column: 2; }
  .game-page-actions .game-management-sort { grid-column: 1 / -1; }
  .game-management-summary { width: 100%; gap: 10px; padding: 12px; }
  .game-summary-group { min-width: 0; gap: 10px 8px; }
  .game-summary-left { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-summary-right { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-summary-group span { overflow: hidden; margin-bottom: 4px; text-overflow: ellipsis; }
  .game-summary-group strong { font-size: 14px; }
  .game-card { min-width: 0; padding: 13px; }
  .game-pagination, .pagination {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .game-pagination > span, .pagination > span { flex: 0 0 auto; white-space: nowrap; }
  .game-pagination .page-buttons, .pagination .page-buttons {
    width: 100%;
    justify-content: flex-end;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }
  .game-pagination .page-buttons::-webkit-scrollbar, .pagination .page-buttons::-webkit-scrollbar { display: none; }

  .preview-management-page, .preview-page-header, .preview-page-header-actions,
  .preview-toolbar, .preview-selection-bar, .preview-table-card { width: 100%; min-width: 0; max-width: 100%; }
  .preview-page-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-page-header-actions > * { width: 100%; min-width: 0; }
  .preview-toolbar, .preview-toolbar.without-scope {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
  }
  .preview-toolbar .search-shell, .preview-account-view-control { grid-column: 1 / -1; }
  .preview-account-view-control { width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
  .preview-account-view-control select, .preview-display-toggle,
  .preview-toolbar > select { width: 100%; min-width: 0; max-width: 100%; }
  .preview-selection-bar { align-items: stretch; }
  .preview-selection-bar label, .preview-selection-bar button, .preview-selection-bar span { max-width: 100%; }
  .preview-table-card { overflow: hidden; }
  .preview-table-card .table-scroll { width: 100%; overflow-x: auto; }
  .preview-table { width: 920px; min-width: 920px; table-layout: fixed; }

  .modal, .modal.wide-modal, .modal.tracking-link-modal, .modal.communication-modal,
  .management-editor-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px);
  }
  .modal form, #action-modal-content { max-width: 100%; padding: 20px 14px; overflow-x: hidden; overflow-y: auto; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > button { min-width: 0; flex: 1 1 8rem; }
  .recipient-picker-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; }
  .recipient-picker-toolbar .search-shell { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .display-manager-row { grid-template-columns: 20px minmax(0, 1fr); }

  .login-screen { display: block; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
  .login-brand { min-height: auto; padding: 24px 18px 14px; }
  .login-brand .hero-copy { margin: 28px 0 8px; }
  .login-brand .hero-copy h1 { font-size: clamp(36px, 12vw, 54px); }
  .login-brand .hero-copy p { font-size: 15px; }
  .login-panel-wrap { min-height: auto; padding: 8px 10px 28px; }
  .login-panel { width: 100%; padding: 24px 18px; }
  .password-shell { min-width: 0; }
  .password-shell .text-button { min-width: 2.5em; padding-inline: 0; }
  .captcha-row { grid-template-columns: minmax(0, 1fr) minmax(88px, 30%); }
  .captcha-row > * { min-width: 0; max-width: 100%; }
}

@media (max-width: 360px) {
  .view-root { padding-inline: 8px; }
  .query-page .query-intro .query-search-with-scope { grid-template-columns: 1fr; }
  .query-page .query-intro .query-sort-scope { width: 100%; }
  .query-page .query-intro .query-sort-scope button { flex: 1; }
  .overview-page .page-intro .filters { grid-template-columns: 38px 38px minmax(0, 1fr); }
  .overview-page .game-combobox { grid-column: 3; }
  .overview-page .date-filter-group { grid-column: 1 / -1; grid-row: 2; }
  .overview-page .query-data { grid-column: 1 / -1; grid-row: 3; width: 100%; }
  .metrics-grid { grid-template-columns: 1fr; }
  .game-summary-left, .game-summary-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-controls { grid-template-columns: 1fr; }
}
.diagnostic-cell{white-space:nowrap}.diagnostic-state-list{display:grid;gap:8px;margin:16px 0}.diagnostic-state-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px}.diagnostic-state-row>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-weight:800}.diagnostic-state-row.is-passed>span{background:#dcfce7;color:#166534}.diagnostic-state-row.is-missing>span{background:#fff7ed;color:#9a3412}.diagnostic-state-row div{display:grid;gap:3px}.diagnostic-state-row small{color:var(--muted)}.diagnostic-summary{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:12px;border-radius:10px;background:var(--surface-soft)}.diagnostic-timeline{display:grid;gap:12px;margin:16px 0;padding-left:20px}.diagnostic-timeline li{padding-left:6px}.diagnostic-timeline time{font-family:var(--mono);font-size:12px;color:var(--muted)}.diagnostic-timeline li div{display:grid;gap:2px}.diagnostic-timeline small{color:var(--muted)}
.sync-state[role="button"] { cursor: pointer; }
.sync-state[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.preview-share-permanent { margin-right: auto; max-width: 360px; color: var(--muted); font-size: 11px; line-height: 1.6; }