/* Base, variables, prefers-color-scheme */
:root{
  --radius:12px;
  --shadow: 0 10px 28px rgba(0,0,0,.28);
  --ok:#20c997;
  --warn:#cc9a06;
  --err:#e5484d;
  --link:#2a7fff;
}

/* Light defaults */
:root {
  --bg:#f6f8fb;
  --card:#ffffff;
  --soft:#f2f5fb;
  --line:#d9dfeb;
  --fg:#0f1222;
  --muted:#53607b;
  --pri:#2a7fff;
  --pri-2:#1459d6;
  --table-zebra:#f6f9ff;
  --badge-bg:#eef3ff;
}

/* Dark overrides */
@media (prefers-color-scheme: dark){
  :root {
    --bg:#0e1116;
    --card:#131722;
    --soft:#161a26;
    --line:#262c3b;
    --fg:#eaf0ff;
    --muted:#a3b1d1;
    --pri:#66a7ff;
    --pri-2:#2d6dde;
    --table-zebra:#0f141e;
    --badge-bg:#1a2438;
    --warn:#e1b409;
    --err:#ff5c5c;
    --link:#76a8ff;
  }
}

*{ box-sizing:border-box }
html,body{ height:100% }
body.lm-body{
  margin:0;
  font-family:'Inter',system-ui,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg), color-mix(in srgb, var(--bg), #000 6%));
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Animations */
.fade-in{ animation:fade .35s ease-in both }
.slide-up{ animation: up .25s ease-out both }
.fade-out{ animation: fadeOut .2s ease-out both }
.spin-on-hover:hover{ transform: rotate(12deg); transition: transform .25s ease }
.pulse{ animation:pulse 1.6s infinite ease-in-out }
.lift{ transition: transform .18s ease, box-shadow .18s ease }
.lift:hover{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.22) }

@keyframes fade { from{ opacity:0 } to{ opacity:1 } }
@keyframes up { from{ opacity:.0; transform: translateY(6px) } to{ opacity:1; transform: translateY(0) } }
@keyframes pulse {
  0%,100%{ opacity:.85; transform: scale(1) }
  50%{ opacity:1; transform: scale(1.05) }
}
@keyframes fadeOut { from{ opacity:1 } to{ opacity:0 } }

/* Topbar */
.topbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
}
.brand svg{ color: var(--pri); }
.brand span{ font-weight:600; font-size:1.05rem; }

/* Cards, containers */
.container{ max-width:1200px; margin:20px auto; padding:0 18px; }
.card{
  background:linear-gradient(180deg,var(--card), color-mix(in srgb, var(--card), #000 4%));
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:16px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}

/* Forms */
input, select, .form-control, .form-select{
  background:var(--soft) !important;
  color:var(--fg) !important;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  padding:10px !important;
}
input::placeholder, .form-control::placeholder{ color: color-mix(in srgb, var(--muted), #888 20%) }
.form-label{ color:var(--muted); font-weight:600; }
input:focus, select:focus, .form-control:focus, .form-select:focus{
  outline:none;
  border-color:var(--pri) !important;
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--pri), transparent 80%) !important;
}

/* Buttons */
.btn{ border-radius:8px; padding:8px 12px; font-weight:600; user-select:none }
.btn-primary{
  background:linear-gradient(180deg,var(--pri),var(--pri-2)); color:#fff; border:none;
}
.btn.ghost{
  background:transparent; color:var(--fg); border:1px solid var(--line);
}
.btn-light{
  background:#f2f5ff; color:#111; border:1px solid #dbe6ff;
}
@media (prefers-color-scheme: dark){
  .btn-light{ background:#1c2336; color:#e9eeff; border:1px solid #2a3756; }
}
.btn-success{ background:linear-gradient(180deg,#57e8a7,var(--ok)); color:#000; border:none; }
.btn-warning{ background:linear-gradient(180deg,#ffe07a,var(--warn)); color:#000; border:none; }
.btn-danger{ background:linear-gradient(180deg,#ff9e9e,var(--err)); color:#fff; border:none; }
.btn-outline-secondary{
  background:transparent; color:var(--fg); border:1px solid var(--line);
}
.btn-xs{ padding:6px 10px; font-size:13px; }
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }

/* Tables */
.table-wrap{ overflow-x:auto; }
.table{
  background:transparent; color:var(--fg);
}
.table th{
  color: color-mix(in srgb, var(--fg), #84a9ff 40%);
  border-bottom:1px solid color-mix(in srgb, var(--line), #fff 4%);
  font-weight:700;
}
.table td, .table th{ vertical-align: middle; }
.table-striped>tbody>tr:nth-of-type(odd){ background: var(--table-zebra); }

/* Badges */
.badge{
  display:inline-block; padding:4px 8px; border-radius:8px; font-weight:700; font-size:12px;
  background: var(--badge-bg); color: var(--muted);
}
.badge.ok{ color: var(--ok); }
.badge.warn{ color: var(--warn); }
.badge.err{ color: var(--err); }

/* Lists */
.list .row{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed var(--line); padding:10px 6px; }
.list .row:last-child{ border-bottom:none; }

/* Empty */
.empty{ padding:18px; text-align:center; color:var(--muted); border:1.5px dashed var(--line); border-radius:10px; }

/* Toast */
.toast{
  position:fixed; z-index:9999; bottom:24px; left:50%; transform:translateX(-50%);
  background: color-mix(in srgb, var(--card), #000 10%); color:var(--fg);
  padding:12px 18px; border-radius:10px; border:1px solid var(--line);
  min-width:180px; text-align:center; opacity:0; transition:opacity .18s ease, transform .18s ease;
  box-shadow: var(--shadow);
}
.toast.show{ opacity:1; }
.toast.ok{ color: var(--ok); }
.toast.err{ color: var(--err); }
.toast.warn{ color: var(--warn); }

/* Modal */
.device-modal-content{
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card), #000 6%));
  border-radius:14px; color:var(--fg);
}
.devices-table th, .devices-table td{ font-size:13px; text-align:center; }
.ua{ color:var(--muted); font-family:"Fira Mono", monospace; font-size:.92em; word-break:break-all; }
.flag{ width:22px; height:14px; border-radius:3px; margin-right:6px; }

/* Auth (login) */
.center{
  display:grid; place-items:center;
  min-height:100dvh;
  padding: 24px;
}
.auth-card{
  width:min(420px, 92vw);
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card), #000 4%));
  border:1px solid var(--line);
  border-radius: 14px;
  padding:22px 18px;
  box-shadow: var(--shadow);
}
.auth-card .brand svg{ color: var(--pri); }

/* Responsive */
@media (max-width:900px){
  .container{ padding:10px; }
  .table th, .table td{ font-size:.95rem; padding:8px; }
}