:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { -webkit-tap-highlight-color: transparent; }
body { background: #06111f; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid #35e0a1; outline-offset: 2px; }

.ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background:
    radial-gradient(circle at 12% 0%, rgba(32, 116, 153, .22), transparent 34rem),
    radial-gradient(circle at 95% 15%, rgba(53, 224, 161, .09), transparent 30rem),
    linear-gradient(180deg, #06111f 0%, #071522 100%);
}

.login-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.glass {
  background: linear-gradient(145deg, rgba(15, 36, 54, .91), rgba(7, 22, 36, .86));
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
}

.brand-mark {
  width: 3.35rem; height: 3.35rem; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 1.1rem; position: relative; overflow: hidden;
  background: linear-gradient(145deg, #35e0a1, #41a9ff);
  box-shadow: 0 12px 35px rgba(53, 224, 161, .2);
}
.brand-mark::after { content: ""; position: absolute; inset: 1px; border-radius: calc(1.1rem - 1px); border: 1px solid rgba(255,255,255,.28); }
.brand-mark span { color: #032116; font-size: .78rem; font-weight: 900; letter-spacing: -.04em; }
.brand-mark-small { width: 2.3rem; height: 2.3rem; border-radius: .8rem; }
.brand-mark-small::after { border-radius: calc(.8rem - 1px); }
.brand-mark-small span { font-size: .62rem; }

.field { background: rgba(4, 15, 27, .8); border: 1px solid rgba(255,255,255,.09); transition: border-color .2s, box-shadow .2s; }
.field:hover { border-color: rgba(255,255,255,.16); }
.field:focus { border-color: rgba(53,224,161,.65); box-shadow: 0 0 0 4px rgba(53,224,161,.08); outline: none; }
.primary-button { background: linear-gradient(135deg, #35e0a1, #66e8b8); box-shadow: 0 12px 30px rgba(53,224,161,.16); transition: transform .18s, filter .18s; }
.primary-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }

.icon-button {
  display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .8rem;
  border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); color: #a7b5c5;
  font-size: 1.15rem; transition: .18s ease;
}
.icon-button:hover { color: white; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.icon-button.is-spinning { animation: spin .8s linear infinite; }

.live-dot { width: .45rem; height: .45rem; border-radius: 99px; background: #35e0a1; box-shadow: 0 0 0 4px rgba(53,224,161,.09), 0 0 12px rgba(53,224,161,.45); }

.metric-card {
  min-width: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(15,35,52,.82), rgba(8,25,40,.72)); padding: .9rem;
}
.metric-label { overflow: hidden; text-overflow: ellipsis; font-size: .65rem; line-height: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #718096; }
.metric-value { margin-top: .2rem; font-size: 1.45rem; line-height: 1.8rem; font-weight: 700; letter-spacing: -.04em; color: white; }

.account-card {
  position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 1.55rem;
  background: linear-gradient(145deg, rgba(14,35,53,.94), rgba(7,22,36,.9));
  box-shadow: 0 18px 55px rgba(0,0,0,.16); transition: transform .2s, border-color .2s, box-shadow .2s;
}
.account-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(53,224,161,.45), transparent); opacity: .6; }
.account-card:hover { transform: translateY(-2px); border-color: rgba(53,224,161,.2); box-shadow: 0 24px 65px rgba(0,0,0,.24); }

.status-pill { display: inline-flex; align-items: center; gap: .38rem; border-radius: 999px; padding: .32rem .58rem; font-size: .62rem; line-height: 1; font-weight: 800; letter-spacing: .1em; }
.status-pill::before { content: ""; width: .38rem; height: .38rem; border-radius: 99px; }
.status-online { color: #6df0bd; background: rgba(53,224,161,.09); border: 1px solid rgba(53,224,161,.16); }
.status-online::before { background: #35e0a1; box-shadow: 0 0 9px #35e0a1; }
.status-offline { color: #94a3b8; background: rgba(148,163,184,.07); border: 1px solid rgba(148,163,184,.11); }
.status-offline::before { background: #64748b; }

.progress-track { height: .55rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.progress-fill { height: 100%; border-radius: inherit; transition: width .5s ease; }
.progress-ok { background: linear-gradient(90deg, #27c995, #50e5b1); box-shadow: 0 0 14px rgba(53,224,161,.24); }
.progress-warn { background: linear-gradient(90deg, #f5b94d, #ffd166); }
.progress-danger { background: linear-gradient(90deg, #ff5c70, #ff7b89); box-shadow: 0 0 14px rgba(255,92,112,.22); }

.control-panel { border-top: 1px solid rgba(255,255,255,.065); background: rgba(1, 12, 22, .22); }
input[type="range"] { appearance: none; width: 100%; height: .32rem; border-radius: 999px; background: rgba(255,255,255,.09); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #35e0a1; border: 3px solid #0b1b2b; box-shadow: 0 0 0 2px rgba(53,224,161,.25); }
input[type="range"]::-moz-range-thumb { width: .85rem; height: .85rem; border-radius: 50%; background: #35e0a1; border: 3px solid #0b1b2b; box-shadow: 0 0 0 2px rgba(53,224,161,.25); }

.toggle { position: relative; display: inline-flex; width: 2.7rem; height: 1.5rem; flex: 0 0 auto; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle span { position: absolute; inset: 0; cursor: pointer; border-radius: 999px; background: #26394c; border: 1px solid rgba(255,255,255,.08); transition: .2s; }
.toggle span::after { content: ""; position: absolute; width: 1rem; height: 1rem; left: .2rem; top: .2rem; border-radius: 50%; background: #94a3b8; transition: .2s; }
.toggle input:checked + span { background: rgba(53,224,161,.2); border-color: rgba(53,224,161,.35); }
.toggle input:checked + span::after { transform: translateX(1.18rem); background: #35e0a1; box-shadow: 0 0 12px rgba(53,224,161,.4); }
.toggle input:focus-visible + span { outline: 2px solid #35e0a1; outline-offset: 2px; }

.danger-button { border: 1px solid rgba(255,92,112,.24); background: rgba(255,92,112,.1); color: #ff9ba7; transition: .2s; }
.danger-button:hover { border-color: rgba(255,92,112,.42); background: rgba(255,92,112,.16); color: #ffc1c8; }
.danger-button:disabled { cursor: not-allowed; opacity: .55; }

.skeleton-card { height: 26rem; border-radius: 1.55rem; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(100deg, rgba(255,255,255,.025) 20%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.025) 70%); background-size: 220% 100%; animation: shimmer 1.5s infinite; }

.chart-dialog::backdrop { background: rgba(1,8,15,.76); backdrop-filter: blur(5px); }
.chart-dialog[open] { animation: dialog-in .22s ease-out; }
.loader { width: 1.75rem; height: 1.75rem; border: 2px solid rgba(255,255,255,.12); border-top-color: #35e0a1; border-radius: 50%; animation: spin .75s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position-x: -220%; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }

@media (min-width: 640px) {
  .metric-card { padding: 1.15rem 1.25rem; }
  .metric-label { font-size: .7rem; }
  .metric-value { font-size: 1.8rem; line-height: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}