/* ultra.css — VYRON FIT ULTRA design system (L144) */
:root{
  --u-bg:#05070d;
  --u-bg-elev:#0a0f1a;
  --u-bg-card:#0f172a;
  --u-bg-glass:rgba(15,23,42,.65);
  --u-text:#f1f5f9;
  --u-text-mute:#94a3b8;
  --u-text-dim:#64748b;
  --u-cyan:#22d3ee;
  --u-cyan-d:#0891b2;
  --u-violet:#a855f7;
  --u-pink:#ec4899;
  --u-emerald:#10b981;
  --u-amber:#f59e0b;
  --u-red:#ef4444;
  --u-grad-main:linear-gradient(135deg,#22d3ee 0%,#a855f7 50%,#ec4899 100%);
  --u-grad-blue:linear-gradient(135deg,#0ea5e9,#22d3ee);
  --u-grad-violet:linear-gradient(135deg,#7c3aed,#a855f7,#ec4899);
  --u-grad-emerald:linear-gradient(135deg,#10b981,#22d3ee);
  --u-grad-amber:linear-gradient(135deg,#f59e0b,#ef4444);
  --u-radius:14px;
  --u-radius-lg:20px;
  --u-shadow:0 8px 28px rgba(0,0,0,.5);
  --u-shadow-hover:0 18px 48px rgba(34,211,238,.18);
  --u-blur:blur(14px);
  --u-border:1px solid rgba(255,255,255,.06);
  --u-border-glow:1px solid rgba(34,211,238,.22);
}

/* ===== Global reset + body ===== */
html,body{background:var(--u-bg)!important;color:var(--u-text)!important;font-family:Inter,'SF Pro Display','Segoe UI',system-ui,-apple-system,sans-serif!important;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em}
body{margin:0;min-height:100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(168,85,247,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(700px 400px at 50% 110%, rgba(236,72,153,.10), transparent 60%),
    var(--u-bg)!important;
  background-attachment:fixed}

/* Animated subtle aurora */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(600px 300px at var(--mx,30%) var(--my,20%), rgba(34,211,238,.06), transparent 70%);
  transition:background .8s ease;
}

/* ===== Typography ===== */
h1,h2,h3,h4{font-weight:900;letter-spacing:-.02em;line-height:1.15;color:#fff}
h1{font-size:clamp(24px,4vw,34px)}
h2{font-size:clamp(20px,3vw,26px)}
h3{font-size:18px}
h4{font-size:15px}
.u-gradient-text{background:var(--u-grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.u-mono{font-family:'JetBrains Mono','SF Mono',Menlo,monospace}

/* ===== Cards / Glass ===== */
.u-card,.card,.tile,.panel,.box,.l130-card,.kpi{
  background:var(--u-bg-glass)!important;
  border:var(--u-border)!important;
  backdrop-filter:var(--u-blur);-webkit-backdrop-filter:var(--u-blur);
  border-radius:var(--u-radius)!important;
  box-shadow:var(--u-shadow);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease;
}
.u-card:hover,.card:hover,.tile:hover{
  transform:translateY(-3px);
  box-shadow:var(--u-shadow-hover);
  border-color:rgba(34,211,238,.25)!important
}

/* ===== Buttons ===== */
.btn,button.primary,button[type=submit],.u-btn{
  background:var(--u-grad-blue)!important;color:#001!important;border:none!important;
  padding:11px 18px;border-radius:11px;font-weight:900;cursor:pointer;font-size:13px;
  letter-spacing:.02em;font-family:inherit;
  box-shadow:0 6px 18px rgba(34,211,238,.32),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  position:relative;overflow:hidden;
}
.btn:hover,.u-btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(34,211,238,.45),inset 0 1px 0 rgba(255,255,255,.3);filter:brightness(1.08)}
.btn:active,.u-btn:active{transform:translateY(0) scale(.98)}
.btn.ghost,.u-btn.ghost{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:none}
.btn.violet{background:var(--u-grad-violet)!important;color:#fff!important;box-shadow:0 6px 18px rgba(168,85,247,.35)}
.btn.emerald{background:var(--u-grad-emerald)!important;color:#001!important}
.btn.warn{background:var(--u-grad-amber)!important;color:#fff!important}
.btn.danger{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;color:#fff!important}

/* Button shimmer */
.btn::before,.u-btn::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .6s ease;
}
.btn:hover::before,.u-btn:hover::before{left:100%}

/* ===== Inputs ===== */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=tel],input[type=date],input[type=search],textarea,select{
  background:rgba(2,6,23,.7)!important;color:var(--u-text)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:10px!important;padding:11px 13px!important;font-size:14px!important;
  font-family:inherit!important;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--u-cyan)!important;
  box-shadow:0 0 0 3px rgba(34,211,238,.16)!important;
  background:rgba(2,6,23,.92)!important
}

/* ===== Top hero / page header ===== */
.u-hero{
  position:relative;padding:28px 18px 22px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(168,85,247,.08));
  border-bottom:1px solid rgba(255,255,255,.05);overflow:hidden
}
.u-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 0%,rgba(168,85,247,.18),transparent 60%);
  pointer-events:none
}
.u-hero h1{margin:0;font-size:28px;background:var(--u-grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.u-hero .sub{color:var(--u-text-mute);font-size:13px;margin-top:4px;font-weight:500}

/* ===== KPI cards ===== */
.u-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.u-kpi{padding:16px;position:relative;overflow:hidden}
.u-kpi::before{content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.12),transparent 70%)}
.u-kpi .ic{font-size:24px;margin-bottom:4px}
.u-kpi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--u-text-mute);font-weight:900}
.u-kpi .val{font-size:32px;font-weight:900;letter-spacing:-1px;margin:4px 0;line-height:1}
.u-kpi .delta{font-size:11px;color:var(--u-emerald);font-weight:800}
.u-kpi.violet::before{background:radial-gradient(circle,rgba(168,85,247,.16),transparent 70%)}
.u-kpi.pink::before{background:radial-gradient(circle,rgba(236,72,153,.16),transparent 70%)}
.u-kpi.amber::before{background:radial-gradient(circle,rgba(245,158,11,.16),transparent 70%)}

/* ===== Bottom-nav (auto-skin if present) ===== */
.bottom-nav,#bottom-nav,nav.bottom,.bnav{
  background:rgba(5,7,13,.85)!important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 -8px 28px rgba(0,0,0,.6)
}
.bottom-nav a,#bottom-nav a,nav.bottom a{color:var(--u-text-mute)!important;transition:color .15s ease}
.bottom-nav a.active,#bottom-nav a.active{color:var(--u-cyan)!important}

/* ===== Tables ===== */
table{border-collapse:separate!important;border-spacing:0;width:100%}
table th{background:rgba(34,211,238,.07);color:var(--u-cyan);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:900;padding:12px 14px;text-align:left;border-bottom:1px solid rgba(34,211,238,.18)}
table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
table tr:hover td{background:rgba(255,255,255,.02)}

/* ===== Pills / Tags / Badges ===== */
.pill,.tag,.badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);color:var(--u-text);
  padding:4px 10px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(255,255,255,.08)}
.pill.cyan,.tag.cyan{background:rgba(34,211,238,.16);color:var(--u-cyan);border-color:rgba(34,211,238,.3)}
.pill.violet{background:rgba(168,85,247,.16);color:var(--u-violet);border-color:rgba(168,85,247,.3)}
.pill.emerald{background:rgba(16,185,129,.16);color:var(--u-emerald);border-color:rgba(16,185,129,.3)}
.pill.amber{background:rgba(245,158,11,.16);color:var(--u-amber);border-color:rgba(245,158,11,.3)}
.pill.red{background:rgba(239,68,68,.16);color:var(--u-red);border-color:rgba(239,68,68,.3)}

/* ===== Avatars ===== */
.avatar,.av,.profile-pic{
  border-radius:50%;border:2px solid rgba(34,211,238,.3);box-shadow:0 4px 14px rgba(34,211,238,.18);overflow:hidden
}

/* ===== Scrollbars ===== */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(34,211,238,.4),rgba(168,85,247,.4));border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(34,211,238,.7),rgba(168,85,247,.7))}

/* ===== Loading shimmer ===== */
.u-skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:ushimmer 1.4s linear infinite;border-radius:8px}
@keyframes ushimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== Floating action button ===== */
.u-fab{
  position:fixed;bottom:90px;right:18px;z-index:9990;
  background:var(--u-grad-main);color:#fff;text-decoration:none;font-weight:900;
  padding:14px 20px;border-radius:99px;font-size:13px;
  box-shadow:0 12px 32px rgba(168,85,247,.45),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .2s ease,box-shadow .2s ease
}
.u-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 18px 40px rgba(168,85,247,.6)}

/* ===== Page entrance animation ===== */
@keyframes uFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main,section,.container,.wrap,.app-content{animation:uFade .4s cubic-bezier(.2,.7,.2,1)}

/* ===== Modal/Drawer dim ===== */
.u-modal-dim,.modal-bg,.overlay{background:rgba(2,6,23,.78)!important;backdrop-filter:blur(8px)}

/* ===== Section dividers ===== */
.u-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.3),transparent);margin:18px 0}

/* ===== Quick action grid ===== */
.u-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}
.u-quick a{background:var(--u-bg-card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 12px;
  text-decoration:none;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;font-weight:800;font-size:12px}
.u-quick a:hover{transform:translateY(-2px);border-color:var(--u-cyan);background:rgba(34,211,238,.08)}
.u-quick a .ic{font-size:26px}

/* ===== Hero stats inline ===== */
.u-stat-inline{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.u-stat-inline .it{display:flex;flex-direction:column}
.u-stat-inline .it .n{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px}
.u-stat-inline .it .l{font-size:10px;text-transform:uppercase;color:var(--u-text-mute);font-weight:900;letter-spacing:.06em}

/* ===== Sidebar (if any) ===== */
.sidebar,aside.menu{background:rgba(5,7,13,.85)!important;backdrop-filter:blur(16px);border-right:1px solid rgba(255,255,255,.06)}
.sidebar a{color:var(--u-text-mute)!important;border-radius:10px;transition:background .15s ease,color .15s ease}
.sidebar a:hover,.sidebar a.active{color:#fff!important;background:rgba(34,211,238,.1)!important}

/* ===== Print clean ===== */
@media print{body{background:#fff!important;color:#000!important}.u-fab,.btn{display:none!important}}

/* ===== Mobile fine-tune ===== */
@media (max-width:520px){
  .u-hero{padding:22px 14px 18px}
  .u-hero h1{font-size:24px}
  body{padding-bottom:80px}
}