:root,[data-theme=dark]{--bg-base: #0d1117;--bg-surface: #161b22;--bg-elevated: #1c2128;--bg-overlay: #21262d;--border-subtle: #21262d;--border-default: #30363d;--text-primary: #e6edf3;--text-secondary: #c9d1d9;--text-muted: #8b949e;--text-faint: #484f58;--accent-blue: #388bfd;--accent-blue-bg: rgba(56,139,253,.15);--accent-green: #3fb950;--accent-red: #f85149;--accent-yellow: #d29922;--shadow-md: 0 4px 16px rgba(0,0,0,.4);--shadow-lg: 0 8px 32px rgba(0,0,0,.6);color-scheme:dark}[data-theme=light]{--bg-base: #f6f8fa;--bg-surface: #ffffff;--bg-elevated: #f0f2f5;--bg-overlay: #e8ecf0;--border-subtle: #d0d7de;--border-default: #c8d0d8;--text-primary: #1f2328;--text-secondary: #24292f;--text-muted: #57606a;--text-faint: #8c959f;--accent-blue: #0969da;--accent-blue-bg: rgba(9,105,218,.1);--accent-green: #1a7f37;--accent-red: #cf222e;--accent-yellow: #9a6700;--shadow-md: 0 4px 16px rgba(0,0,0,.1);--shadow-lg: 0 8px 32px rgba(0,0,0,.15);color-scheme:light}html,body{overflow-x:hidden;max-width:100vw;background:var(--bg-base);color:var(--text-primary);transition:background .28s ease,color .28s ease}#app{min-height:100vh}.n-button{border-radius:8px!important;font-weight:500!important;transition:all .2s!important}.n-button--tiny-type{border-radius:6px!important}.n-button--small-type{border-radius:7px!important}.n-button--large-type{border-radius:10px!important}.n-button:not(.n-button--disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.n-button--primary-type:not(.n-button--disabled):hover{box-shadow:0 4px 12px #388bfd59!important}.n-button--error-type:not(.n-button--disabled):hover{box-shadow:0 4px 12px #f8514959!important}.n-button--success-type:not(.n-button--disabled):hover{box-shadow:0 4px 12px #3fb95059!important}.n-card{border-radius:12px!important}.n-input,.n-base-selection{border-radius:8px!important}.theme-transitioning *,.theme-transitioning *:before,.theme-transitioning *:after{transition:background-color .28s ease,background .28s ease,border-color .28s ease,color .28s ease,fill .28s ease,stroke .28s ease,box-shadow .28s ease!important}*{scrollbar-width:thin;scrollbar-color:var(--border-default) transparent}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}*::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}@media(max-width:480px){.n-dialog.n-modal{max-width:calc(100vw - 24px)!important;width:auto!important;margin:12px}}
/* U-VIEW THEME OVERRIDE — visual styles only */
:root,
[data-theme="dark"] {
  --bg-base: #06101d;
  --bg-surface: #0b1a2b;
  --bg-elevated: #10263b;
  --bg-overlay: #16344f;
  --border-subtle: #173652;
  --border-default: #28577b;
  --text-primary: #eff9ff;
  --text-secondary: #c5deee;
  --text-muted: #7da5c0;
  --text-faint: #4b728d;
  --accent-blue: #35d6ff;
  --accent-blue-bg: rgba(53, 214, 255, 0.14);
  --accent-green: #2dd4a8;
  --accent-red: #ff6482;
  --accent-yellow: #ffc857;
  --uview-purple: #8b5cf6;
  --uview-cyan: #35d6ff;
  --shadow-md: 0 8px 24px rgba(0, 7, 18, 0.32);
  --shadow-lg: 0 18px 54px rgba(0, 7, 18, 0.52);
}

[data-theme="light"] {
  --bg-base: #edf6ff;
  --bg-surface: #ffffff;
  --bg-elevated: #e3f1ff;
  --bg-overlay: #d9ebfb;
  --border-subtle: #c8dff0;
  --border-default: #9fc7e2;
  --text-primary: #10263c;
  --text-secondary: #24445f;
  --text-muted: #587a95;
  --text-faint: #7d9ab0;
  --accent-blue: #087fc5;
  --accent-blue-bg: rgba(8, 127, 197, 0.11);
  --accent-green: #118a68;
  --accent-red: #d83d5d;
  --accent-yellow: #a96b00;
  --uview-purple: #7047dc;
  --uview-cyan: #087fc5;
  --shadow-md: 0 8px 24px rgba(31, 78, 112, 0.11);
  --shadow-lg: 0 18px 46px rgba(31, 78, 112, 0.18);
}

html,
body {
  background-color: var(--bg-base) !important;
}

* {
  scrollbar-color: var(--accent-blue) transparent;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-blue), var(--uview-purple)) !important;
}

*:focus-visible {
  outline-color: var(--accent-blue) !important;
}

.login-page {
  background:
    radial-gradient(ellipse at 82% 14%, rgba(53, 214, 255, 0.2) 0%, transparent 43%),
    radial-gradient(ellipse at 12% 86%, rgba(139, 92, 246, 0.2) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 50%, #0a1b31 0%, #06101d 58%, #020711 100%) !important;
}

.bg-canvas {
  filter: hue-rotate(72deg) saturate(1.22) brightness(0.82) !important;
  opacity: 0.82 !important;
}

.scanline {
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(53, 214, 255, 0.025) 2px, rgba(53, 214, 255, 0.025) 4px) !important;
}

.login-card {
  background: linear-gradient(155deg, rgba(14, 35, 57, 0.96), rgba(7, 19, 35, 0.94)) !important;
  border-color: rgba(53, 214, 255, 0.36) !important;
  box-shadow: 0 22px 70px rgba(0, 8, 22, 0.62), 0 0 34px rgba(53, 214, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.08) !important;
}

.card-glow {
  background: linear-gradient(90deg, transparent 0%, #35d6ff 28%, #8b5cf6 70%, transparent 100%) !important;
}

.corner-tl,
.corner-tr,
.corner-bl,
.corner-br {
  border-color: #35d6ff !important;
  filter: drop-shadow(0 0 7px rgba(53, 214, 255, 0.55));
}

.glitch-title,
.glitch-logo,
.glitch-home,
.logo-text {
  color: #35d6ff !important;
  -webkit-text-fill-color: #35d6ff !important;
  text-shadow: 0 0 7px rgba(53, 214, 255, 0.95), 0 0 22px rgba(53, 214, 255, 0.55), 0 0 42px rgba(139, 92, 246, 0.34) !important;
}

.glitch-title::before,
.glitch-logo::before,
.glitch-home::before {
  color: #a78bfa !important;
  -webkit-text-fill-color: #a78bfa !important;
  text-shadow: 0 0 7px rgba(167, 139, 250, 0.8) !important;
}

.glitch-title::after,
.glitch-logo::after,
.glitch-home::after {
  color: #5ee7ff !important;
  -webkit-text-fill-color: #5ee7ff !important;
  text-shadow: 0 0 7px rgba(94, 231, 255, 0.8) !important;
}

.title-sub {
  color: #b9a4ff !important;
  text-shadow: 0 0 16px rgba(139, 92, 246, 0.42) !important;
}

.subtitle {
  color: #789bb7 !important;
}

.input-icon {
  color: rgba(53, 214, 255, 0.72) !important;
}

.input {
  color: #eff9ff !important;
  background: rgba(53, 214, 255, 0.055) !important;
  border-color: rgba(53, 214, 255, 0.26) !important;
}

.input::placeholder {
  color: #5f7e98 !important;
}

.input:focus {
  background: rgba(53, 214, 255, 0.09) !important;
  border-color: rgba(53, 214, 255, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(53, 214, 255, 0.12), 0 0 20px rgba(53, 214, 255, 0.08) !important;
}

.btn.primary,
.primary.btn {
  color: #ffffff !important;
  background: linear-gradient(135deg, #087fc5 0%, #169fd8 48%, #7658e8 100%) !important;
  box-shadow: 0 8px 26px rgba(21, 159, 216, 0.32) !important;
}

.btn.primary:hover,
.primary.btn:hover {
  box-shadow: 0 10px 34px rgba(53, 214, 255, 0.4) !important;
}

.btn.telegram,
.telegram.btn {
  color: #69dfff !important;
  background: rgba(53, 214, 255, 0.045) !important;
  border-color: rgba(53, 214, 255, 0.38) !important;
}

.btn.telegram:hover,
.telegram.btn:hover {
  color: #a9efff !important;
  background: rgba(53, 214, 255, 0.1) !important;
  border-color: rgba(53, 214, 255, 0.72) !important;
}

.dot {
  background: #25425a !important;
}

.dot.active {
  background: #35d6ff !important;
  box-shadow: 0 0 9px rgba(53, 214, 255, 0.88) !important;
}

.sidebar,
.layout-header,
.mobile-header,
.mobile-tabbar {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
}

.logo {
  background: linear-gradient(90deg, var(--bg-elevated), var(--bg-surface)) !important;
  border-color: var(--border-subtle) !important;
}

.layout-header {
  box-shadow: 0 8px 25px rgba(0, 8, 22, 0.2) !important;
}

.menu-item:hover,
.layout-header-trigger:hover,
.avatar:hover,
.mobile-user-menu .menu-item:hover {
  background-color: var(--bg-overlay) !important;
}

.menu-item.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #087fc5 0%, #159fd8 55%, #7047dc 100%) !important;
  box-shadow: 0 5px 18px rgba(21, 159, 216, 0.28) !important;
}

.tab-item.active {
  color: var(--accent-blue) !important;
  text-shadow: 0 0 12px rgba(53, 214, 255, 0.32);
}

.welcome-banner,
.feature-card,
.info-section,
.device-card-modern,
.device-card,
.n-card {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-md) !important;
}

.welcome-banner,
.device-card-modern {
  background-image: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-surface) 70%) !important;
}

.feature-card:hover,
.device-card-modern:hover {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 10px 30px rgba(53, 214, 255, 0.13) !important;
}

.clock,
.accent,
.account-badge,
.n-slider-rail__fill {
  color: var(--accent-blue) !important;
}

.n-button.n-button--primary-type {
  --n-color: #087fc5 !important;
  --n-color-hover: #159fd8 !important;
  --n-color-pressed: #086ba6 !important;
  --n-color-focus: #159fd8 !important;
  --n-border: 1px solid #159fd8 !important;
  --n-border-hover: 1px solid #35d6ff !important;
  --n-border-pressed: 1px solid #086ba6 !important;
  --n-ripple-color: #35d6ff !important;
}

.n-input,
.n-base-selection {
  --n-color: var(--bg-overlay) !important;
  --n-color-focus: var(--bg-elevated) !important;
  --n-border: 1px solid var(--border-default) !important;
  --n-border-hover: 1px solid var(--accent-blue) !important;
  --n-border-focus: 1px solid var(--accent-blue) !important;
  --n-box-shadow-focus: 0 0 0 2px var(--accent-blue-bg) !important;
}

.n-modal,
.n-dialog,
.n-drawer,
.n-popover,
.n-dropdown-menu {
  --n-color: var(--bg-surface) !important;
  --n-body-color: var(--bg-surface) !important;
  --n-border-color: var(--border-default) !important;
}

.n-data-table-th {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-subtle) !important;
}

.n-data-table-td {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
}

.n-data-table-tr:hover .n-data-table-td {
  background-color: var(--bg-elevated) !important;
}