/* ============================================
   EnergyLog.AI — Global Styles
   ============================================ */

/* === Reset === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* === Theme Variables === */
:root{
  --bg:#f2f4f8;
  --bg2:#fff;
  --card:#fff;
  --card-h:#f8fafd;
  --brd:rgba(0,0,0,.06);
  --brd-h:rgba(0,0,0,.1);
  --tx:#151820;
  --tx2:#5c6370;
  --tx3:#9099a8;
  --ac:#1a6dff;
  --ac2:#4d8eff;
  --ac-bg:rgba(26,109,255,.06);
  --ac-glow:rgba(26,109,255,.08);
  --green:#0d9668;
  --green-bg:rgba(13,150,104,.06);
  --red:#d63040;
  --red-bg:rgba(214,48,64,.06);
  --am:#cf8200;
  --am-bg:rgba(207,130,0,.06);
  --vi:#6c3ed6;
  --vi-bg:rgba(108,62,214,.06);
  --sh:0 1px 2px rgba(0,0,0,.03),0 6px 24px rgba(0,0,0,.04);
  --sh-h:0 8px 40px rgba(0,0,0,.07);
  --rl:14px;
  --r:10px;
  --pc:26,109,255;
  --po:.2;
  --lo:.06;
  --foot-bg:#f8f9fb;
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#080c14;
    --bg2:#0e1320;
    --card:#121828;
    --card-h:#182035;
    --brd:rgba(255,255,255,.06);
    --brd-h:rgba(255,255,255,.1);
    --tx:#e0e4ec;
    --tx2:#8892a4;
    --tx3:#586070;
    --ac:#4d8eff;
    --ac2:#78aaff;
    --ac-bg:rgba(77,142,255,.08);
    --ac-glow:rgba(77,142,255,.12);
    --green:#2dd4a0;
    --green-bg:rgba(45,212,160,.08);
    --red:#f87171;
    --red-bg:rgba(248,113,113,.08);
    --am:#f5b731;
    --am-bg:rgba(245,183,49,.08);
    --vi:#a78bfa;
    --vi-bg:rgba(167,139,250,.08);
    --sh:0 1px 2px rgba(0,0,0,.2),0 6px 24px rgba(0,0,0,.15);
    --sh-h:0 12px 48px rgba(0,0,0,.3);
    --pc:77,142,255;
    --po:.35;
    --lo:.08;
    --foot-bg:#0a0f18;
  }
}

/* === Base === */
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',sans-serif;
  background:var(--bg);
  color:var(--tx);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* === Particles Background === */
#particles-js{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
}

/* === Header === */
.hdr{
  position:sticky;
  top:0;z-index:200;
  padding:0 28px;
  height:56px;
  background:var(--bg2);
  border-bottom:1px solid var(--brd);
  display:flex;
  align-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.03);
}
.hdr.transparent{
  position:fixed;left:0;right:0;
  background:transparent;
  border-bottom:none;
  box-shadow:none;
  transition:background .3s,box-shadow .3s;
}
.hdr.transparent.scrolled{
  background:var(--bg2);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
  backdrop-filter:blur(12px);
}
@media(prefers-color-scheme:dark){
  .hdr.transparent.scrolled{background:rgba(14,19,32,.85)}
}
.hdr-inner{
  max-width:1140px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.hdr-left{display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-i{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,#1a6dff,#0050d4);
  display:flex;align-items:center;justify-content:center;
}
.logo-i svg{width:16px;height:16px}
.logo-t{font-size:16px;font-weight:800}
.logo-t span{color:var(--ac)}
.sep{width:1px;height:22px;background:var(--brd)}

/* Nav */
nav{display:flex;gap:4px}
nav a{
  padding:7px 13px;font-size:13px;font-weight:500;
  color:var(--tx2);text-decoration:none;border-radius:8px;
  transition:all .15s;
}
nav a:hover{color:var(--tx);background:var(--ac-bg)}
nav a.active{font-weight:600}
nav a.active-blue{color:var(--ac);background:var(--ac-bg)}
nav a.active-violet{color:var(--vi);background:var(--vi-bg)}
nav a.active-green{color:var(--green);background:var(--green-bg)}
nav a.active-amber{color:var(--am);background:var(--am-bg)}

/* Header right - auth */
.hdr-right{display:flex;align-items:center;gap:10px}
.btn-login{
  padding:7px 18px;font-size:13px;font-weight:600;
  color:var(--ac);border:1.5px solid var(--ac);background:none;
  border-radius:8px;cursor:pointer;font-family:inherit;
  transition:all .15s;text-decoration:none;
}
.btn-login:hover{background:var(--ac);color:#fff}

/* User pill */
.user-pill{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px 5px 8px;border-radius:8px;
  background:var(--ac-bg);font-size:12px;font-weight:500;
  color:var(--ac);cursor:pointer;position:relative;
}
.user-pill .av{
  width:22px;height:22px;border-radius:6px;
  background:var(--ac);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
}
.user-menu{
  position:absolute;top:34px;right:0;
  background:var(--card);border:1px solid var(--brd);
  border-radius:12px;padding:6px;min-width:170px;
  box-shadow:var(--sh-h);display:none;padding-top:12px;
}
.user-menu::before{content:'';position:absolute;top:-6px;left:0;right:0;height:10px}
.user-pill:hover .user-menu{display:block}
.user-menu a{
  display:block;padding:8px 12px;font-size:12px;
  color:var(--tx2);text-decoration:none;border-radius:6px;
}
.user-menu a:hover{background:var(--ac-bg);color:var(--tx)}
.user-menu .msep{height:1px;background:var(--brd);margin:4px 0}

/* Plan badges */
.plan-badge{
  font-size:10px;font-weight:600;padding:2px 8px;
  border-radius:6px;text-transform:uppercase;letter-spacing:.3px;
}
.plan-guest{background:var(--brd);color:var(--tx3)}
.plan-free{background:var(--ac-bg);color:var(--ac)}
.plan-premium{background:var(--am-bg);color:var(--am)}
.plan-full{background:var(--green-bg);color:var(--green)}

/* === Common Components === */

/* Pills */
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:600}
.pill-g{background:var(--green-bg);color:var(--green)}
.pill-a{background:var(--am-bg);color:var(--am)}
.pill-r{background:var(--red-bg);color:var(--red)}

/* Cards */
.card{
  background:var(--card);border:1px solid var(--brd);
  border-radius:var(--rl);padding:20px 22px;
  box-shadow:var(--sh);
}
.card-title{
  font-size:13px;font-weight:700;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;
}

/* Buttons */
.btn{
  border:none;border-radius:10px;font-family:inherit;
  font-weight:600;cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--ac);color:#fff;box-shadow:0 2px 8px rgba(26,109,255,.15)}
.btn-primary:hover{background:#0050d4;transform:translateY(-1px)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-amber{background:var(--am);color:#fff}
.btn-amber:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{
  text-align:left;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:var(--tx3);
  padding:8px 10px;border-bottom:2px solid var(--brd);
  position:sticky;top:0;background:var(--card);z-index:1;
}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--brd)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover{background:var(--ac-bg)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.tbl .th-r{text-align:right}
.tbl .peak{background:var(--ac-bg)}

/* Form elements */
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:11px;font-weight:600;color:var(--tx3);letter-spacing:.3px}
.fg select,.fg input[type=date],.fg input[type=text],.fg input[type=email],.fg input[type=password]{
  height:42px;padding:0 14px;border:1.5px solid var(--brd);
  border-radius:9px;font-size:13px;font-family:inherit;
  color:var(--tx);background:var(--card);width:100%;
  transition:all .15s;outline:none;
}
.fg select:hover,.fg input:hover{border-color:var(--brd-h)}
.fg select:focus,.fg input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(26,109,255,.06)}
.fg input::placeholder{color:var(--tx3)}

/* Loading */
.loading{text-align:center;padding:40px;color:var(--tx3);font-size:14px}
.spinner{
  display:inline-block;width:18px;height:18px;
  border:2.5px solid var(--brd);border-top-color:var(--ac);
  border-radius:50%;animation:spin .6s linear infinite;
  margin-right:8px;vertical-align:middle;
}

/* Footer */
.foot{
  text-align:center;padding:28px;color:var(--tx3);
  font-size:11px;border-top:1px solid var(--brd);
  position:relative;z-index:1;background:var(--foot-bg);
  letter-spacing:.2px;
}

/* === Animations === */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fd{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes bounce{to{transform:translateY(-6px)}}

.fi{opacity:0;transform:translateY(24px);transition:all .6s cubic-bezier(.4,0,.2,1)}
.fi.vis{opacity:1;transform:translateY(0)}
.hidden{display:none}

/* === Responsive === */
@media(max-width:768px){
  nav{display:none}
  .hdr{padding:0 16px}
}