:root {
  --space-0: #050b18;
  --space-1: #07132a;
  --space-2: #0b1733;
  --panel: rgba(8, 20, 43, .78);
  --panel-light: rgba(13, 30, 61, .72);
  --panel-soft: rgba(10, 25, 50, .48);
  --line: rgba(99, 179, 255, .18);
  --line-strong: rgba(99, 179, 255, .34);
  --blue: #3b9cff;
  --bright-blue: #63c7ff;
  --violet: #8b5cff;
  --success: #32e6a1;
  --danger: #ff5c73;
  --warning: #ffc86b;
  --text: #e8f2ff;
  --text-soft: #a7bad5;
  --muted: #7187a8;
  --shadow: 0 22px 70px rgba(0, 0, 0, .28);
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; }

body {
  overflow: hidden;
  color: var(--text);
  background: var(--space-0);
  font-family: "HarmonyOS Sans SC", "Microsoft YaHei UI", "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--bright-blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

#spaceCanvas, .space-nebula, .planet { position: fixed; inset: 0; pointer-events: none; }
#spaceCanvas { z-index: -3; width: 100%; height: 100%; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 76% 10%, rgba(49, 91, 184, .16), transparent 38%),
    radial-gradient(ellipse at 20% 85%, rgba(86, 54, 178, .10), transparent 40%),
    linear-gradient(135deg, var(--space-0), var(--space-1) 52%, var(--space-2));
}

.space-nebula { z-index: -2; filter: blur(36px); opacity: .27; transform-origin: center; }
.nebula-one {
  background: radial-gradient(ellipse at center, rgba(45, 121, 255, .23), transparent 62%);
  transform: translate3d(-8%, -3%, 0) scale(1.15);
  animation: nebula-drift-one 38s ease-in-out infinite alternate;
}
.nebula-two {
  background: radial-gradient(ellipse at center, rgba(139, 92, 255, .16), transparent 60%);
  transform: translate3d(20%, 20%, 0) scale(1.05);
  animation: nebula-drift-two 46s ease-in-out infinite alternate;
}
@keyframes nebula-drift-one { from { transform: translate3d(-8%, -3%, 0) scale(1.15); } to { transform: translate3d(-3%, 2%, 0) scale(1.2); } }
@keyframes nebula-drift-two { from { transform: translate3d(20%, 20%, 0) scale(1.05); } to { transform: translate3d(14%, 14%, 0) scale(1.11); } }

.planet {
  z-index: -2;
  inset: auto -170px auto auto;
  top: -220px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  opacity: .34;
  background:
    radial-gradient(circle at 34% 32%, rgba(115, 196, 255, .52) 0 2%, transparent 3%),
    radial-gradient(ellipse at 30% 45%, rgba(69, 121, 214, .24) 0 8%, transparent 9%),
    radial-gradient(ellipse at 64% 62%, rgba(47, 80, 178, .25) 0 13%, transparent 14%),
    radial-gradient(circle at 36% 32%, #1e4d9a 0, #102e6a 30%, #071a42 63%, #020914 78%);
  box-shadow: -34px 30px 90px rgba(53, 130, 255, .2), inset 32px -12px 80px rgba(0, 0, 0, .58), inset -8px 4px 28px rgba(105, 194, 255, .35);
  animation: planet-drift 80s linear infinite alternate;
}
.planet::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  border: 1px solid rgba(93, 187, 255, .23);
  box-shadow: 0 0 28px rgba(71, 153, 255, .22), inset 0 0 22px rgba(126, 92, 255, .18);
}
.planet span {
  position: absolute;
  inset: 11% 8% 66% 2%;
  border-radius: 50%;
  border-top: 1px solid rgba(129, 209, 255, .18);
  transform: rotate(-18deg);
}
@keyframes planet-drift { from { transform: rotate(-4deg) translate3d(0, 0, 0); } to { transform: rotate(3deg) translate3d(-14px, 10px, 0); } }

.glass-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.login-view { display: grid; place-items: center; min-height: 100vh; padding: 28px; position: relative; }
.login-card { width: min(100%, 430px); padding: 42px 42px 30px; border-radius: 18px; position: relative; overflow: hidden; }
.login-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -80px;
  top: -86px;
  border-radius: 50%;
  border: 1px solid rgba(99, 199, 255, .22);
  box-shadow: 0 0 50px rgba(59, 156, 255, .12);
}
.brand-mark { width: 38px; height: 38px; border: 1px solid rgba(99, 199, 255, .5); border-radius: 50%; display: grid; place-items: center; color: var(--bright-blue); box-shadow: 0 0 22px rgba(59, 156, 255, .22); flex: 0 0 auto; }
.brand-mark span { font-size: 18px; line-height: 1; text-shadow: 0 0 12px rgba(99, 199, 255, .8); }
.brand-mark.large { width: 52px; height: 52px; margin-bottom: 26px; }
.brand-mark.large span { font-size: 24px; }
.eyebrow, .nav-caption, .section-kicker { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.login-card h1 { margin: 10px 0 5px; font-size: 30px; font-weight: 700; line-height: 1.2; }
.login-subtitle { margin: 0 0 10px; color: var(--text-soft); }
.usage-notice { margin: 0 0 22px; color: var(--danger); font-size: 12px; font-weight: 650; line-height: 1.55; }
.setup-notice { margin: 0 0 18px; padding: 11px 13px; border: 1px solid rgba(99, 199, 255, .24); border-radius: 9px; color: var(--bright-blue); background: rgba(59, 156, 255, .08); font-size: 13px; }
.field-label { display: block; margin: 0 0 8px; color: var(--text-soft); font-size: 13px; }
.field-wrap { display: flex; align-items: center; gap: 9px; height: 44px; margin-bottom: 17px; padding: 0 13px; border: 1px solid rgba(99, 179, 255, .22); border-radius: 9px; background: rgba(3, 11, 27, .52); transition: border-color .2s ease, box-shadow .2s ease; }
.field-wrap:focus-within { border-color: rgba(99, 199, 255, .7); box-shadow: 0 0 0 3px rgba(59, 156, 255, .10); }
.field-icon { color: var(--bright-blue); font-size: 18px; }
.field-wrap input, .input, .select, .textarea { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; }
.input, .select, .textarea { min-height: 42px; padding: 10px 12px; border: 1px solid rgba(99, 179, 255, .2); border-radius: 8px; background: rgba(3, 11, 27, .42); }
.textarea { min-height: 105px; resize: vertical; }
.select { appearance: none; }
.select option { color: #10203d; }
.primary-button, .secondary-button, .danger-button, .quiet-button { min-height: 40px; border-radius: 8px; padding: 0 15px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.primary-button { color: white; background: linear-gradient(110deg, #347fe9, #7856e9); box-shadow: 0 8px 25px rgba(59, 119, 241, .2); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(69, 130, 255, .28); }
.secondary-button { border-color: rgba(99, 179, 255, .26); color: var(--text); background: rgba(35, 84, 151, .18); }
.secondary-button:hover, .quiet-button:hover { border-color: rgba(99, 199, 255, .55); background: rgba(59, 156, 255, .12); }
.quiet-button { min-height: 34px; padding: 0 10px; border-color: rgba(99, 179, 255, .15); color: var(--text-soft); background: rgba(9, 23, 49, .35); }
.danger-button { min-height: 34px; padding: 0 10px; color: #ff9aaa; border-color: rgba(255, 92, 115, .25); background: rgba(255, 92, 115, .08); }
.danger-button:hover { background: rgba(255, 92, 115, .16); }
.login-button { width: 100%; height: 46px; margin-top: 4px; justify-content: space-between; padding: 0 16px 0 18px; }
.form-error { min-height: 20px; margin: 10px 0 0; color: #ff93a5; font-size: 12px; }
.login-foot { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 11px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(50, 230, 161, .1), 0 0 16px rgba(50, 230, 161, .7); }
.login-orbit { position: absolute; width: 560px; height: 560px; border: 1px solid rgba(99, 179, 255, .08); border-radius: 50%; pointer-events: none; }
.login-orbit::before, .login-orbit::after { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(139, 92, 255, .08); border-radius: 50%; }
.login-orbit::after { inset: 23%; border-color: rgba(99, 179, 255, .08); }
.login-orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--bright-blue); box-shadow: 0 0 12px var(--bright-blue); }
.login-orbit i:nth-child(1) { left: 10%; top: 46%; }.login-orbit i:nth-child(2) { right: 17%; top: 18%; background: var(--violet); }.login-orbit i:nth-child(3) { left: 58%; bottom: 6%; }

.dashboard-view { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; min-height: 0; position: relative; }
.sidebar { z-index: 5; display: flex; flex-direction: column; min-width: 0; margin: 18px 0 18px 18px; padding: 22px 14px 16px; border-radius: 15px; background: rgba(5, 14, 32, .84); }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; min-width: 0; }
.sidebar-brand strong { display: block; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.sidebar-rule { height: 1px; margin: 22px 8px 19px; background: linear-gradient(90deg, rgba(99, 179, 255, .22), transparent); }
.nav-caption { padding: 0 12px 9px; font-size: 10px; }
.main-nav { display: grid; gap: 4px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid transparent; border-radius: 9px; color: var(--text-soft); background: transparent; text-align: left; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.nav-item:hover { color: var(--text); border-color: rgba(99, 179, 255, .12); background: rgba(59, 156, 255, .08); transform: translateX(2px); }
.nav-item.active { color: white; border-color: rgba(99, 179, 255, .24); background: linear-gradient(105deg, rgba(59, 156, 255, .24), rgba(139, 92, 255, .18)); box-shadow: 0 8px 25px rgba(28, 96, 210, .13); }
.nav-item.active::before { content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: linear-gradient(var(--bright-blue), var(--violet)); box-shadow: 0 0 12px rgba(99, 199, 255, .8); }
.nav-icon { display: inline-grid; place-items: center; width: 19px; color: #7186a8; font-size: 16px; }.nav-item.active .nav-icon { color: var(--bright-blue); text-shadow: 0 0 12px rgba(99, 199, 255, .7); }
.sidebar-foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 9px; margin: auto 7px 0; padding: 13px 11px; border: 1px solid rgba(50, 230, 161, .13); border-radius: 9px; color: var(--text-soft); background: rgba(50, 230, 161, .035); font-size: 11px; }
.sidebar-foot small { grid-column: 2; color: var(--muted); font-size: 10px; }.sidebar-foot .usage-notice { grid-column: 1 / -1; margin: 4px 0 0; font-size: 10px; }
.workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 18px; padding: 18px 34px 12px 30px; }
.topbar-title { display: flex; align-items: center; gap: 11px; color: var(--text-soft); font-size: 13px; }.topbar-line { width: 3px; height: 24px; border-radius: 3px; background: linear-gradient(var(--bright-blue), var(--violet)); box-shadow: 0 0 13px rgba(99, 199, 255, .5); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.service-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(70, 180, 255, .28); border-radius: 999px; color: var(--text-soft); background: rgba(15, 30, 60, .62); font-size: 12px; white-space: nowrap; }.service-pill b { color: var(--bright-blue); font-weight: 600; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(99, 179, 255, .16); border-radius: 9px; color: var(--text-soft); background: rgba(8, 20, 43, .56); font-size: 17px; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }.icon-button:hover { border-color: rgba(99, 199, 255, .5); background: rgba(59, 156, 255, .13); transform: translateY(-1px); }
.user-menu-wrap { position: relative; }.user-menu-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 7px 0 4px; border: 1px solid transparent; border-radius: 9px; color: var(--text-soft); background: transparent; }.user-menu-button:hover { border-color: rgba(99, 179, 255, .18); background: rgba(59, 156, 255, .08); }.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: white; background: linear-gradient(135deg, #3b9cff, #8b5cff); font-size: 12px; }.chevron { color: var(--muted); }
.user-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 142px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(8, 20, 43, .96); box-shadow: var(--shadow); }.user-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; color: var(--text-soft); background: transparent; text-align: left; }.user-menu button:hover { color: var(--text); background: rgba(59, 156, 255, .13); }
.page-content { min-width: 0; min-height: 0; flex: 1; overflow: auto; padding: 8px 34px 42px 30px; scrollbar-color: rgba(99, 179, 255, .25) transparent; scrollbar-width: thin; }
.page-section { max-width: 1640px; margin: 0 auto; }.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 8px 0 26px; }.page-heading h1 { margin: 0; color: var(--text); font-size: 27px; line-height: 1.2; }.page-heading p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }.heading-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }.metric-card { position: relative; min-height: 139px; padding: 19px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(8, 20, 43, .66); box-shadow: 0 14px 38px rgba(0, 0, 0, .13); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }.metric-card:hover { transform: translateY(-3px); border-color: rgba(99, 179, 255, .38); box-shadow: 0 18px 42px rgba(25, 91, 175, .15); }.metric-card::after { content: ""; position: absolute; right: -29px; bottom: -46px; width: 135px; height: 135px; border: 1px solid rgba(99, 179, 255, .1); border-radius: 50%; }.metric-label { color: var(--muted); font-size: 12px; }.metric-value { margin: 14px 0 8px; color: var(--text); font-size: 29px; font-weight: 700; line-height: 1; }.metric-value span { margin-left: 4px; color: var(--bright-blue); font-size: 12px; font-weight: 500; }.metric-foot { color: var(--text-soft); font-size: 11px; }.metric-foot strong { color: var(--success); font-weight: 600; }.metric-accent { position: absolute; left: 0; top: 20px; width: 2px; height: 30px; border-radius: 2px; background: linear-gradient(var(--bright-blue), var(--violet)); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .9fr); gap: 16px; }.panel { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(8, 20, 43, .68); box-shadow: 0 14px 38px rgba(0, 0, 0, .12); }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }.panel-heading h2 { margin: 0; color: var(--text); font-size: 15px; font-weight: 650; }.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.panel-heading .select { width: auto; min-height: 32px; padding: 5px 28px 5px 9px; color: var(--text-soft); font-size: 11px; }
.chart-panel { min-height: 300px; }.chart-wrap { position: relative; height: 223px; }.chart-wrap canvas { width: 100%; height: 100%; }.chart-tooltip { position: absolute; z-index: 3; display: none; min-width: 106px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text); background: rgba(5, 14, 32, .95); box-shadow: 0 8px 25px rgba(0, 0, 0, .25); font-size: 11px; pointer-events: none; }.chart-tooltip strong { display: block; margin-top: 3px; color: var(--bright-blue); font-size: 14px; }
.distribution-panel { min-height: 300px; }.donut-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 224px; }.donut-wrap { position: relative; width: 160px; height: 160px; }.donut-wrap canvas { width: 100%; height: 100%; }.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }.donut-center strong { font-size: 23px; }.donut-center span { margin-top: 4px; color: var(--muted); font-size: 10px; }.legend { display: grid; gap: 13px; }.legend-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: var(--text-soft); font-size: 12px; }.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.legend-row strong { color: var(--text); font-size: 12px; font-weight: 600; }
.recent-panel { grid-column: 1 / -1; }.recent-table { width: 100%; border-collapse: collapse; }.recent-table th, .recent-table td { padding: 12px 10px; border-bottom: 1px solid rgba(99, 179, 255, .09); text-align: left; white-space: nowrap; }.recent-table th { color: var(--muted); font-size: 11px; font-weight: 500; }.recent-table td { color: var(--text-soft); font-size: 12px; }.recent-table tr:last-child td { border-bottom: 0; }.empty-row { padding: 26px !important; color: var(--muted) !important; text-align: center !important; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 15px; padding: 13px; border: 1px solid rgba(99, 179, 255, .12); border-radius: 10px; background: rgba(8, 20, 43, .52); }.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }.toolbar .input { width: 240px; min-height: 36px; }.toolbar .select { min-height: 36px; width: 125px; }.table-panel { padding: 0; overflow: hidden; }.table-wrap { overflow-x: auto; }.data-table { width: 100%; min-width: 760px; border-collapse: collapse; }.data-table th, .data-table td { height: 56px; padding: 10px 16px; border-bottom: 1px solid rgba(99, 179, 255, .09); text-align: left; vertical-align: middle; white-space: nowrap; }.data-table th { color: #91a8c8; background: rgba(10, 25, 50, .54); font-size: 11px; font-weight: 600; }.data-table td { color: var(--text-soft); font-size: 12px; }.data-table tbody tr { transition: background-color .25s ease; }.data-table tbody tr:hover { background: rgba(50, 130, 255, .08); }.data-table tbody tr:last-child td { border-bottom: 0; }.cell-primary { color: var(--text) !important; font-weight: 600; }.cell-secondary { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.action-cell { display: flex; align-items: center; gap: 6px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 11px; }.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }.status-active, .status-online { color: var(--success); background: rgba(50, 230, 161, .08); }.status-active::before, .status-online::before { background: var(--success); box-shadow: 0 0 8px var(--success); }.status-disabled, .status-abnormal { color: var(--danger); background: rgba(255, 92, 115, .08); }.status-disabled::before, .status-abnormal::before { background: var(--danger); }.status-unused { color: var(--bright-blue); background: rgba(99, 199, 255, .08); }.status-unused::before { background: var(--bright-blue); }
.variable-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }.editor-panel { position: sticky; top: 0; }.editor-panel h2 { margin: 0 0 17px; font-size: 15px; }.form-grid { display: grid; gap: 12px; }.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; }.checkbox-line { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 12px; }.checkbox-line input { accent-color: var(--blue); }.variable-template-select, .variable-skill-select { min-height: 42px; appearance: auto; cursor: pointer; }.field-hint { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.variable-kind-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid rgba(141, 163, 196, .18); border-radius: 999px; color: var(--muted); background: rgba(141, 163, 196, .06); font-size: 10px; }
.variable-kind-badge.is-select { border-color: rgba(139, 92, 255, .28); color: #bca9ff; background: rgba(139, 92, 255, .1); }
.variable-options-editor { padding: 12px; border: 1px solid rgba(99, 179, 255, .16); border-radius: 9px; background: rgba(3, 11, 27, .25); }
.variable-options-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-soft); font-size: 12px; }
.variable-options-heading .quiet-button { min-height: 30px; padding: 0 9px; font-size: 11px; }
.variable-options-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 7px; margin: 12px 0 6px; color: var(--muted); font-size: 10px; }
.variable-option-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 7px; align-items: center; margin-top: 7px; }
.variable-option-row .input { min-width: 0; min-height: 36px; padding: 8px 9px; font-size: 11px; }
.variable-option-remove { width: 48px; min-height: 36px; padding: 0 5px; font-size: 10px; }
.variable-options-empty { padding: 12px 4px 4px; color: var(--muted); font-size: 11px; }
.modal-root { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(1, 5, 15, .58); }.modal { width: min(100%, 540px); max-height: min(760px, calc(100vh - 44px)); overflow: auto; padding: 24px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(8, 20, 43, .97); box-shadow: 0 30px 100px rgba(0, 0, 0, .42); }.modal h2 { margin: 0; font-size: 18px; }.modal-subtitle { margin: 7px 0 19px; color: var(--muted); font-size: 12px; }.modal-close { float: right; width: 30px; height: 30px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 19px; }.modal-close:hover { color: var(--text); background: rgba(99, 179, 255, .1); }.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.modal-grid .full { grid-column: 1 / -1; }.result-box { max-height: 210px; overflow: auto; margin-top: 16px; padding: 12px; border: 1px solid rgba(99, 179, 255, .18); border-radius: 8px; color: var(--bright-blue); background: rgba(2, 9, 22, .55); font-family: Consolas, monospace; font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.toast { position: fixed; z-index: 60; top: 23px; left: 50%; max-width: min(90vw, 420px); padding: 11px 15px; border: 1px solid rgba(99, 199, 255, .35); border-radius: 9px; color: var(--text); background: rgba(8, 20, 43, .96); box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, -10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; font-size: 12px; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast.error { border-color: rgba(255, 92, 115, .45); }
.mobile-only { display: none; }

@media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.overview-grid { grid-template-columns: 1fr; }.distribution-panel { min-height: 260px; }.donut-layout { min-height: 200px; } }
@media (max-width: 860px) { .dashboard-view { grid-template-columns: minmax(0, 1fr); }.sidebar { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: 248px; height: auto; margin: 0; border-radius: 0 15px 15px 0; transform: translateX(-105%); transition: transform .25s ease; }.sidebar.open { transform: translateX(0); }.mobile-only { display: inline-grid; }.topbar { padding-left: 18px; }.variable-layout { grid-template-columns: 1fr; }.editor-panel { position: static; order: -1; } }
@media (max-width: 640px) { .variable-options-columns, .variable-option-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.variable-options-columns span:last-child { display: none; }.variable-option-remove { grid-column: 1 / -1; width: 100%; } }
@media (max-width: 640px) { .login-view { padding: 16px; }.login-card { padding: 31px 24px 23px; }.login-orbit { width: 390px; height: 390px; }.planet { width: 430px; height: 430px; right: -190px; top: -145px; }.topbar { min-height: 68px; padding: 12px 15px 8px; }.topbar-title { font-size: 12px; }.topbar-actions { gap: 5px; }.service-pill { padding: 0 9px; font-size: 10px; }.service-pill .status-dot { width: 6px; height: 6px; }.user-menu-button > span:not(.avatar):not(.chevron) { display: none; }.page-content { padding: 5px 15px 28px; }.page-heading { display: block; margin-bottom: 19px; }.heading-actions { margin-top: 16px; }.page-heading h1 { font-size: 23px; }.stats-grid { grid-template-columns: 1fr; gap: 10px; }.metric-card { min-height: 125px; }.panel { padding: 15px; }.donut-layout { grid-template-columns: 145px minmax(0, 1fr); gap: 9px; }.donut-wrap { width: 145px; height: 145px; }.toolbar { display: block; }.toolbar-left, .toolbar-right { margin-bottom: 8px; }.toolbar-right:last-child { margin-bottom: 0; }.toolbar .input { width: 100%; }.toolbar .select { flex: 1; width: auto; }.modal-grid { grid-template-columns: 1fr; }.modal-grid .full { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.card-key-cell { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; }
.card-key-cell .cell-secondary { font-family: inherit; letter-spacing: 0; }