:root{
  /* Base font size for rem calculations (16px = 1rem) */
  font-size: 16px;
  --bg:#140024;--card:#1a0433;--border:#2a0b40;--text:#e5e7eb;
  --ok-bg:#064e3b;--ok:#34d399;--warn-bg:#78350f;--warn:#fbbf24;--muted-bg:#1f2937;--muted:#9ca3af;
  /* purple accent palette */
  --accent-start:#eeeeee; --accent-mid:#7e22ce; --accent-end:#8b5cf6; --accent-glow:rgba(139,92,246,0.5);
  /* gauge & asset shared variables (moved from trendometers.css) */
  --track-color:#462f69;
  --color-danger:#ff3b30; --color-warning:#ff9f0a; --color-success:#32d74b;
  --purple-a:#6d28d9; --purple-b:#7e22ce; --purple-c:#8b5cf6; --purple-glow:rgba(139,92,246,0.55);
  --active-color:var(--purple-c); --momentum-color:var(--purple-c); --arrow-color:var(--purple-c);
}

/* Adjust base font-size for smaller screens */
@media (max-width: 768px) { :root { font-size: 15px; } }
@media (max-width: 480px) { :root { font-size: 14px; } }

body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial;position:relative;overflow-x:hidden}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,rgba(109,40,217,0.10) 0%,rgba(126,34,206,0.10) 20%,rgba(139,92,246,0.10) 40%,rgba(126,34,206,0.10) 60%,rgba(109,40,217,0.10) 80%,rgba(139,92,246,0.10) 100%);background-size:400% 400%;animation:gradientShift 20s ease infinite;z-index:-1;pointer-events:none}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
header{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;margin-bottom:0.875rem;flex-wrap:wrap;padding:0 1rem}
header h1 a{color:var(--text);text-decoration:none;transition:color 0.3s ease}
header h1 a.brand-title{background:linear-gradient(90deg,var(--accent-start),var(--accent-end));-webkit-background-clip:text;background-clip:text;position:relative;transition:transform .5s cubic-bezier(.4,.2,.2,1),text-shadow .5s ease;}
header h1 a.brand-title::after{content:'';position:absolute;inset:0;opacity:0;border-radius:0.375rem;filter:blur(0.875rem);background:radial-gradient(circle at 30% 40%,rgba(139,92,246,.55),transparent 70%);transition:opacity .6s ease}
header h1 a.brand-title:hover{transform:translateY(-0.125rem) scale(1.01);text-shadow:0 0 0.375rem rgba(139,92,246,.6),0 0 0.875rem rgba(167,139,250,.5),0 0 1.75rem rgba(139,92,246,.35);animation:brandGlow 3.5s ease-in-out infinite}
header h1 a.brand-title:hover::after{opacity:.25}
@keyframes brandGlow{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(18deg)}100%{filter:hue-rotate(0deg)}}
header h1 a.brand-title:focus-visible{outline:0.125rem solid var(--accent-end);outline-offset:0.25rem;border-radius:0.375rem}
header h1 a:hover:not(.brand-title){color:var(--ok)}
h1{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:0.0125rem}
.sync{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.chip{padding:0.25rem 0.625rem;border-radius:9999rem;font-size:0.75rem}
.chip-ok{
  background:var(--ok-bg);
  color:var(--ok);
}
.chip-warn{background:var(--warn-bg);color:var(--warn)}
.chip-muted{background:var(--muted-bg);color:var(--muted)}
section{margin:1.125rem 0 1.625rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:0.875rem}
.gmeta{display:flex;justify-content:space-between;align-items:center;font-size:0.75rem;margin-top:0.375rem;color:var(--text)}
.kv span{opacity:.9}

/* Simple form and table styles to replace Bootstrap look */
form label{display:block;margin-bottom:0.375rem;font-weight:600}
input.form-control, textarea.form-control, select.form-control{width:100%;padding:0.5rem;border-radius:0.5rem;border:0.0625rem solid var(--border);background:rgba(255,255,255,.02);color:var(--text);font-size:1rem}
button.btn{padding:0.5rem 0.75rem;border-radius:0.5rem;border:0.0625rem solid var(--border);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;transition:all 0.3s ease}
button.btn:hover{background:rgba(255,255,255,.08);transform:translateY(-0.0625rem)}
button.btn-primary{background:linear-gradient(180deg,var(--accent-end),var(--accent-mid));border-color:rgba(139,92,246,.55);color:#fff;box-shadow:0 0.25rem 0.875rem var(--accent-glow)}
button.btn-primary:hover{background:linear-gradient(180deg,#a78bfa,var(--accent-end));box-shadow:0 0.25rem 1rem rgba(139,92,246,.55)}
button.btn-danger{background:linear-gradient(180deg,rgba(239,68,68,.30),rgba(190,24,24,.25));border-color:rgba(239,68,68,.55);color:#fecaca;box-shadow:0 0.125rem 0.5rem rgba(239,68,68,.25),0 0 0 0.0625rem rgba(139,92,246,.25) inset}
button.btn-danger:hover{background:linear-gradient(180deg,rgba(248,113,113,.45),rgba(239,68,68,.35));border-color:rgba(239,68,68,.7);box-shadow:0 0.25rem 0.875rem rgba(239,68,68,.35),0 0 0 0.0625rem rgba(139,92,246,.35) inset}
/* Shared link/button styles */
a.button-link,button.button-link{display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 0.625rem;border-radius:0.5rem;border:0.0625rem solid var(--border);background:rgba(255,255,255,.02);color:var(--text);text-decoration:none;font:inherit;cursor:pointer;transition:all 0.3s ease}
a.button-link:hover,button.button-link:hover{background:rgba(255,255,255,.08);transform:translateY(-0.0625rem)}
/* Logout hover (anchor only) */
/* Logout button themed style */
a.button-link[href*='logout']{background:linear-gradient(180deg,rgba(239,68,68,.15),rgba(190,24,24,.12));border-color:rgba(239,68,68,.35);color:#fca5a5}
a.button-link[href*='logout']:hover{background:linear-gradient(180deg,rgba(239,68,68,.28),rgba(190,24,24,.2));border-color:rgba(239,68,68,.55);color:#fecaca;box-shadow:0 0.25rem 0.75rem rgba(239,68,68,.35);transform:translateY(-0.125rem)}
/* Admin/users hover accents (anchor only) */
a.button-link[href*='admin']:hover,a.button-link[href*='users']:hover{background:rgba(139,92,246,.2);border-color:rgba(139,92,246,.4);color:#c4b5fd}

/* Configure button (top-right) — make it pop */
#asset-settings-btn.button-link{
  background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(109,40,217,.28));
  border-color:rgba(139,92,246,.6);
  color:#ffffff;
}
#asset-settings-btn.button-link:hover{
  background:linear-gradient(135deg,rgba(167,139,250,.5),rgba(139,92,246,.42));
  border-color:rgba(167,139,250,.75);
  transform:translateY(-0.125rem);
  box-shadow:0 0.625rem 1.5rem rgba(139,92,246,.45), inset 0 0 0 0.0625rem rgba(255,255,255,.12);
}
#asset-settings-btn.button-link:focus-visible{
  outline:0.125rem solid rgba(167,139,250,.9);
  outline-offset:0.125rem;
}


table{width:100%;border-collapse:collapse;margin-top:0.5rem;overflow-x:auto;display:block}
@media (min-width: 768px) { table { display:table; } }
table thead tr th{background:transparent;padding:0.625rem;text-align:left;border-bottom:0.0625rem solid var(--border);font-weight:700;font-size:0.875rem}
table tbody tr td{padding:0.625rem;border-bottom:0.0625rem solid rgba(255,255,255,.02);font-size:0.875rem}

.alerts{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;max-width:25rem}
.alert{padding:0.75rem 1rem;border-radius:0.5rem;border:0.0625rem solid var(--border);background:rgba(255,255,255,.02);margin-bottom:0.5rem;animation:slideIn 0.3s ease;font-weight:500;display:block;width:auto;max-width:23.75rem;pointer-events:auto;box-shadow:0 0.25rem 1.25rem rgba(0,0,0,.4)}
.alert.success{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.15);color:#6ee7b7;box-shadow:0 0.25rem 0.75rem rgba(52,211,153,.2)}
.alert.info{border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.15);color:#93c5fd;box-shadow:0 0.25rem 0.75rem rgba(59,130,246,.2)}
.alert.danger{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.15);color:#fca5a5;box-shadow:0 0.25rem 0.75rem rgba(239,68,68,.2)}
@keyframes slideIn{from{opacity:0;transform:translateY(-0.625rem)}to{opacity:1;transform:translateY(0)}}
.alert.fade-out{animation:fadeOut 0.3s ease forwards}
@keyframes fadeOut{to{opacity:0;transform:translateY(-0.625rem)}}

/* Responsive tweaks */
@media (max-width:640px){ 
  .wrap{padding:0 0.75rem} 
  header{padding:0 0.5rem;gap:0.5rem}
  h1{font-size:1.5rem}
  .alerts{bottom:1rem;right:1rem;left:1rem;max-width:100%}
  .alert{max-width:100%}
}

@media (max-width:480px){
  h1{font-size:1.25rem}
}

/* small helpers */
.muted{color:var(--muted);font-size:0.75rem}


/* ensure forms and tables blend nicely */
.form-check{margin:0.5rem 0}

/* login specific */
.login-card{max-width:30rem;margin:0.75rem auto;padding:1.125rem;border-radius:0.75rem;background:rgba(255,255,255,.02);border:0.0625rem solid var(--border)}

/* admin buttons */
.btn-sm{padding:0.375rem 0.5rem;font-size:0.8125rem}

/* flash message close */
.flash-close{float:right;cursor:pointer}

/* ensure links are readable */
a{color:#93c5fd}

/* small code badge */
.code{font-family:monospace;background:rgba(255,255,255,.03);padding:0.125rem 0.375rem;border-radius:0.375rem;border:0.0625rem solid var(--border)}

/* one-time blink effect when count changes */
.chip-blink-once{
  animation: chip-blink-once 0.7s ease-in-out;
}

@keyframes chip-blink-once{
  0%{
    background: var(--ok-bg);
    color: var(--ok);
    box-shadow: none;
  }
  50%{
    background: var(--ok);
    color: var(--bg);
    box-shadow: 0 0 14px rgba(52,211,153,0.35);
  }
  100%{
    background: var(--ok-bg);
    color: var(--ok);
    box-shadow: none;
  }
}

/* Main landing cards */
.main-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:2rem 1.75rem;border-radius:1.125rem;background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(139,92,246,.06));border:0.0625rem solid rgba(139,92,246,.25);text-align:center;overflow:hidden;transition:transform .45s cubic-bezier(.25,.8,.25,1),box-shadow .45s ease,border-color .45s ease;background-blend-mode:overlay}
.main-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 35%,rgba(139,92,246,.35),transparent 70%);opacity:.25;transition:opacity .6s ease}
.main-card-icon{font-size:3rem;margin-bottom:1rem;filter:drop-shadow(0 0.25rem 0.5rem rgba(0,0,0,.4))}
.main-card-title{margin:0 0 0.5rem;font-size:1.45rem;font-weight:600;letter-spacing:0.01875rem;background:linear-gradient(90deg,var(--accent-start),var(--accent-end));-webkit-background-clip:text;background-clip:text;color:transparent}
.main-card-desc{margin:0;font-size:0.9rem;color:#9ca3af}
.main-card:hover{transform:translateY(-0.375rem);box-shadow:0 0.75rem 2rem -0.5rem rgba(0,0,0,.55),0 0 0 0.0625rem rgba(139,92,246,.35);border-color:rgba(139,92,246,.45)}
.main-card:hover::before{opacity:.5}
.main-card.warn{background:linear-gradient(160deg,rgba(239,68,68,.12),rgba(139,92,246,.05));border-color:rgba(239,68,68,.35)}
.main-card.warn:hover{box-shadow:0 0.75rem 2.125rem -0.5rem rgba(239,68,68,.45),0 0 0 0.0625rem rgba(239,68,68,.45);border-color:rgba(239,68,68,.55)}
.main-card.warn .main-card-title{background:linear-gradient(90deg,#f87171,#ef4444);-webkit-background-clip:text;background-clip:text;color:transparent}
.main-card.accent{background:linear-gradient(160deg,rgba(245,158,11,.18),rgba(139,92,246,.06));border-color:rgba(245,158,11,.4)}
.main-card.accent:hover{box-shadow:0 0.75rem 2.125rem -0.5rem rgba(245,158,11,.5),0 0 0 0.0625rem rgba(245,158,11,.5);border-color:rgba(245,158,11,.55)}
.main-card.accent .main-card-title{background:linear-gradient(90deg,#fbbf24,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
.main-cards{animation:fadeCards .6s ease}
@keyframes fadeCards{from{opacity:0;transform:translateY(0.625rem)}to{opacity:1;transform:translateY(0)}}

/* Mobile responsive for main-cards */
@media (max-width:480px){
  .main-card{padding:1.5rem 1.25rem}
  .main-card-icon{font-size:2.5rem}
  .main-card-title{font-size:1.25rem}
  .main-card-desc{font-size:0.85rem}
}