*{box-sizing:border-box}
:root{
  --navy:#061b33;--navy2:#08284b;--blue:#246bfe;--sky:#20b9ff;--bg:#f5f9fd;--text:#0f1b2f;--muted:#64748b;--line:#dfe8f2;--green:#16a34a;--red:#ef4444;--orange:#f97316;--shadow:0 18px 50px rgba(15,42,76,.10)
}
body{margin:0;font-family:Segoe UI,Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font-family:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
/* LOGIN */
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#061b33,#0b3b70);position:relative;overflow:hidden}
.login-bg{position:absolute;inset:-20%;background:radial-gradient(circle at 25% 25%,rgba(32,185,255,.32),transparent 32%),radial-gradient(circle at 80% 70%,rgba(36,107,254,.28),transparent 35%);animation:floatBg 9s ease-in-out infinite alternate;pointer-events:none}
.login-panel{position:relative;width:min(440px,92%);background:rgba(255,255,255,.96);padding:34px;border-radius:28px;box-shadow:0 35px 110px rgba(0,0,0,.32);animation:pop .45s ease}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.brand-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#20b9ff,#246bfe);color:white;font-size:26px;font-weight:900}
.brand-icon.small{width:44px;height:44px;border-radius:14px;font-size:22px}
.login-brand h1{margin:0;font-size:30px}.login-brand h1 span{color:var(--sky)}.login-brand p{margin:2px 0 0;color:var(--muted);font-size:13px;font-weight:700}
.login-panel h2{margin:0;font-size:30px}.login-sub{color:var(--muted);margin:8px 0 20px}
label{display:block;margin:14px 0 7px;font-weight:800;font-size:13px}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;outline:none}
textarea{min-height:95px}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(36,107,254,.1)}
.login-panel button,.box>button,.premiumCalc button,#addBtn{border:0;border-radius:12px;padding:12px 16px;background:linear-gradient(135deg,#246bfe,#1752d9);color:white;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(36,107,254,.23)}
.login-panel button{width:100%;margin-top:18px}
#err{color:var(--red);font-weight:800}

/* APP LAYOUT */
.app{display:flex;min-height:100vh}
.sidebar{width:260px;background:linear-gradient(180deg,#061b33,#061f3d 55%,#031426);color:white;position:fixed;inset:0 auto 0 0;padding:22px 16px;overflow:auto}
.sideLogo{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:23px;font-weight:900}
.sideLogo span{color:var(--sky)}.sideLogo small{display:block;color:#9fb4cc;font-size:11px;letter-spacing:1.5px;margin-top:2px}
.me{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:14px;border-radius:18px;margin-bottom:24px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d9e8ff,#246bfe);color:#0b3b70;font-weight:900}
.me b{display:block}.me span{display:block;color:#8fc5ff;font-size:13px;margin-top:2px}.me small{display:block;color:#86efac;font-size:12px;margin-top:5px}
.navGroup{color:#9fb4cc;font-size:12px;font-weight:900;margin:20px 8px 8px}
.sidebar button{width:100%;border:0;background:transparent;color:#e5eef8;text-align:left;padding:12px 12px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:4px}
.sidebar button:hover,.sidebar button.active{background:linear-gradient(135deg,#246bfe,#0c4fb0);color:white;box-shadow:0 10px 28px rgba(36,107,254,.25)}
#logout{margin-top:10px;color:white}
.sideFooter{position:absolute;bottom:18px;left:22px;color:#9fb4cc;font-size:12px;line-height:1.6}
.main{margin-left:260px;width:calc(100% - 260px);min-height:100vh;background:linear-gradient(180deg,#f8fbff,#eef5fb);padding-bottom:48px}
.topbar{height:72px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:5;backdrop-filter:blur(10px)}
.menuBtn{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#0f1b2f;font-size:20px;cursor:pointer}
.searchBox{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 12px;width:280px}
.searchBox input{border:0;box-shadow:none;padding:11px 0}
.profileMini{display:flex;align-items:center;gap:12px}.profileMini small{display:block;color:var(--muted)}
.contentHead{display:flex;justify-content:space-between;align-items:flex-start;padding:26px 32px 18px}
.contentHead h1{margin:0;font-size:28px}.contentHead p{margin:8px 0;color:var(--muted)}
#addBtn{min-width:140px}
.page{display:none;padding:0 32px;animation:fadeUp .25s ease}.page.active{display:block}

/* CARDS */
.stats,.miniStats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}
.statCard,.miniStats div,.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.statCard,.miniStats div{padding:20px;display:flex;align-items:center;gap:16px;min-height:118px}
.statCard i,.miniStats i{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#eaf2ff;color:var(--blue);font-style:normal;font-size:24px}
.statCard span,.miniStats span{display:block;color:var(--muted);font-weight:800;font-size:13px}.statCard b,.miniStats b{display:block;font-size:26px;margin-top:5px}
.panel{padding:0;margin-bottom:20px;overflow:hidden}
.panelHead{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid var(--line)}
.panelHead h2{margin:0;font-size:22px}.panelHead em{font-style:normal;font-size:12px;background:#071f35;color:white;padding:7px 10px;border-radius:999px;margin-left:10px}
.infoPanel{padding:22px 26px}.infoPanel h2{margin-top:0}
.recent{display:flex;justify-content:space-between;align-items:center;margin:14px 26px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfdff}
.recent small{color:var(--muted)}
.tableWrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:900px}
th,td{padding:17px 26px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;text-transform:uppercase;color:#637083;background:#f8fafc}
td{font-size:15px}
.badge{display:inline-block;padding:7px 10px;border-radius:9px;background:#eef4ff;color:var(--blue);font-size:12px;font-weight:900}
.badge.green{background:#eaf8ef;color:var(--green)}.badge.yellow{background:#fff7df;color:#9a6400}.badge.red{background:#ffecec;color:var(--red)}
.typePill{display:inline-flex;gap:7px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:800}
.typePill.electric{background:#eef4ff;color:var(--blue)}.typePill.gas{background:#fff4e8;color:var(--orange)}
.act{border:1px solid #bdd3ff;background:#f3f7ff;color:#0d55bd;padding:9px 12px;border-radius:9px;font-weight:900;cursor:pointer;margin-right:8px}
.del{border-color:#ffc8c8;background:#fff1f1;color:var(--red)}
.directorOnly{font-size:11px}

/* Calculator and modal */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0}
.premiumCalc{padding-bottom:24px;max-width:900px}
.premiumCalc p,.premiumCalc .grid,.premiumCalc button,.calcResult{margin-left:26px;margin-right:26px}
.calcResult{margin-top:18px}
.resultGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.resultGrid div{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fbfdff}.resultGrid span{display:block;color:var(--muted);font-weight:800;font-size:12px}.resultGrid b{font-size:20px;margin-top:5px;display:block}
.modal{position:fixed;inset:0;background:rgba(5,20,35,.55);display:grid;place-items:center;z-index:20;opacity:0;transition:.18s;backdrop-filter:blur(5px)}
.modal.show{opacity:1}.modal.hidden{display:none!important}
.box{width:min(780px,94%);background:#fff;border-radius:20px;padding:22px;box-shadow:0 28px 80px rgba(0,0,0,.28);transform:translateY(12px);transition:.18s}
.modal.show .box{transform:translateY(0)}
.mh{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.mh h2{margin:0}#closeModalBtn{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;color:#0f1b2f;font-size:24px;cursor:pointer}
#fields .grid{padding:0}
#toast{position:fixed;right:24px;bottom:24px;background:#061b33;color:white;padding:14px 18px;border-radius:14px;display:none;z-index:30}

/* click safety */
.login-bg{pointer-events:none}.page:not(.active){pointer-events:none}
button,input,select,textarea{pointer-events:auto}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes floatBg{from{transform:translate(-20px,-10px)}to{transform:translate(20px,10px)}}

@media(max-width:1100px){.stats,.miniStats{grid-template-columns:repeat(2,1fr)}.resultGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebarOpen .sidebar{transform:translateX(0)}.main{margin-left:0;width:100%}.contentHead,.topbar{padding-left:18px;padding-right:18px}.page{padding:0 18px}.stats,.miniStats,.grid,.resultGrid{grid-template-columns:1fr}.searchBox{display:none}}

/* ================= V12 CLEAN ANIMATED PROFESSIONAL ================= */
.sideFooter,.menuBtn,.searchBox{display:none!important}
.sidebar{
  padding:24px 18px!important;
}
.sideLogo{
  margin-bottom:28px!important;
}
.sidebar button{
  padding:13px 15px!important;
  margin-bottom:8px!important;
  font-size:15px!important;
  letter-spacing:.1px;
  transition:all .22s ease!important;
}
.sidebar button:hover{
  transform:translateX(5px);
}
.sidebar button.active{
  transform:translateX(5px);
}
.navGroup{
  margin:24px 10px 10px!important;
  letter-spacing:1.2px;
}
.topbar{
  justify-content:flex-end!important;
  height:76px!important;
  padding:0 34px!important;
}
.profileMini{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:9px 14px;
  box-shadow:0 10px 30px rgba(15,42,76,.06);
  transition:.22s ease;
}
.profileMini:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(15,42,76,.12);
}
.contentHead{
  animation:fadeSlide .45s ease both;
}
.stats .statCard,
.miniStats div{
  transition:all .25s ease;
  animation:cardIn .42s ease both;
}
.stats .statCard:nth-child(2),.miniStats div:nth-child(2){animation-delay:.05s}
.stats .statCard:nth-child(3),.miniStats div:nth-child(3){animation-delay:.1s}
.stats .statCard:nth-child(4),.miniStats div:nth-child(4){animation-delay:.15s}
.stats .statCard:hover,
.miniStats div:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 58px rgba(15,42,76,.14);
}
.panel{
  animation:fadeSlide .5s ease both;
  transition:all .25s ease;
}
.panel:hover{
  box-shadow:0 24px 60px rgba(15,42,76,.12);
}
tbody tr{
  transition:background .18s ease, transform .18s ease;
}
tbody tr:hover td{
  background:#f7fbff;
}
.act,#addBtn,.login-panel button,.premiumCalc button,.box>button{
  transition:all .2s ease!important;
}
.act:hover,#addBtn:hover,.premiumCalc button:hover,.box>button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(36,107,254,.2);
}
.del:hover{
  box-shadow:0 14px 30px rgba(239,68,68,.16)!important;
}
.recent{
  transition:all .2s ease;
}
.recent:hover{
  transform:translateX(6px);
  border-color:#bcd5ff;
}
.page.active{
  animation:fadeSlide .32s ease both;
}
.brand-icon{
  animation:softPulse 2.4s ease-in-out infinite;
}
.login-panel{
  animation:loginFloat .55s ease both;
}
@keyframes fadeSlide{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes softPulse{
  0%,100%{box-shadow:0 0 0 rgba(32,185,255,0)}
  50%{box-shadow:0 0 28px rgba(32,185,255,.35)}
}
@keyframes loginFloat{
  from{opacity:0;transform:translateY(20px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:820px){
  .topbar{justify-content:flex-start!important}
}

/* ================= V13 PROFESSIONAL SIDEBAR ICONS ================= */
.sidebar button{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.navIcon{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  color:#dbeafe;
  font-size:17px;
  transition:all .22s ease;
}
.sidebar button:hover .navIcon,
.sidebar button.active .navIcon{
  background:rgba(255,255,255,.18);
  color:#fff;
  transform:scale(1.06);
}
.sidebar button span:last-child{
  line-height:1.2;
}
#logout .navIcon{
  background:rgba(239,68,68,.16);
  color:#fecaca;
}
#logout:hover .navIcon{
  background:rgba(239,68,68,.26);
  color:#fff;
}

/* ================= V14 PREMIUM FULL ANIMATION + PROFILE FIX ================= */

/* Premium login */
.login{
  background:linear-gradient(135deg,#031428 0%,#062a52 45%,#0a67b7 100%)!important;
}
.animatedMesh{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 25%,rgba(32,185,255,.42),transparent 24%),
    radial-gradient(circle at 76% 25%,rgba(36,107,254,.35),transparent 28%),
    radial-gradient(circle at 50% 78%,rgba(68,214,160,.22),transparent 24%);
  filter:blur(8px);
  animation:meshMove 10s ease-in-out infinite alternate;
  pointer-events:none;
}
.loginParticle{
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  background:#8ee7ff;
  box-shadow:0 0 22px #20b9ff;
  opacity:.75;
  pointer-events:none;
  animation:particleFloat 7s ease-in-out infinite;
}
.p1{left:12%;top:20%}.p2{right:16%;top:24%;animation-delay:1.2s}.p3{left:20%;bottom:22%;animation-delay:2s}.p4{right:28%;bottom:16%;animation-delay:3s}
.login-panel{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  box-shadow:0 40px 120px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.8)!important;
  overflow:hidden;
}
.login-panel:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,#20b9ff,#246bfe,#44d6a0,#20b9ff);
  background-size:220% 100%;
  animation:shineBar 3s linear infinite;
}
.login-brand .brand-icon{
  animation:logoBounce 3s ease-in-out infinite;
}
.login-panel input{
  transition:all .25s ease;
}
.login-panel input:hover{
  transform:translateY(-1px);
}
.login-panel button{
  position:relative;
  overflow:hidden;
  transition:all .25s ease!important;
}
.login-panel button:after{
  content:"";
  position:absolute;
  top:0;left:-120%;width:90%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:buttonShine 2.8s ease-in-out infinite;
}
.login-panel button:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(36,107,254,.35)!important;
}

/* Premium sidebar */
.sidebar{
  background:
    radial-gradient(circle at 20% 0%,rgba(36,107,254,.28),transparent 32%),
    linear-gradient(180deg,#04162b 0%,#061f3d 55%,#020d1a 100%)!important;
  box-shadow:12px 0 42px rgba(3,20,40,.22);
}
.sidebar:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:130px;
  background:radial-gradient(ellipse at bottom,rgba(32,185,255,.18),transparent 65%);
  pointer-events:none;
}
.sideLogo{
  animation:fadeSlide .45s ease both;
}
.me{
  background:linear-gradient(135deg,rgba(36,107,254,.20),rgba(255,255,255,.08))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 35px rgba(0,0,0,.18);
  animation:fadeSlide .55s ease both;
}
.avatar{
  background:linear-gradient(135deg,#dbeafe,#246bfe)!important;
  color:#06336b!important;
  box-shadow:0 10px 24px rgba(36,107,254,.28);
}
.sidebar button{
  position:relative;
  overflow:hidden;
}
.sidebar button:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-110%);
  transition:.4s ease;
}
.sidebar button:hover:before,.sidebar button.active:before{
  transform:translateX(110%);
}
.navIcon{
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.sidebar button.active .navIcon,.sidebar button:hover .navIcon{
  background:linear-gradient(135deg,#20b9ff,#246bfe)!important;
  box-shadow:0 10px 28px rgba(32,185,255,.28);
  transform:scale(1.08) rotate(-4deg);
}

/* Inner premium animations */
.main{
  background:
    radial-gradient(circle at 88% 8%,rgba(32,185,255,.10),transparent 28%),
    linear-gradient(180deg,#f9fcff 0%,#eef5fb 100%)!important;
}
.topbar{
  animation:topDrop .35s ease both;
}
.profileMini{
  cursor:pointer;
  position:relative;
  padding-right:16px!important;
}
.profileMini .avatar{
  width:42px;height:42px;
}
.profileArrow{
  color:#64748b;
  font-size:18px;
  margin-left:4px;
  transition:.2s ease;
}
.profileMini:hover .profileArrow{
  transform:translateY(2px);
}
.contentHead{
  animation:fadeSlide .45s ease both;
}
.statCard,.miniStats div{
  position:relative;
  overflow:hidden;
}
.statCard:after,.miniStats div:after{
  content:"";
  position:absolute;
  right:-30px;bottom:-30px;
  width:100px;height:100px;border-radius:50%;
  background:rgba(36,107,254,.06);
  transition:.25s ease;
}
.statCard:hover:after,.miniStats div:hover:after{
  transform:scale(1.25);
}
.panelHead{
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.panel{
  border-color:#dbe7f3!important;
}
.typePill,.badge{
  transition:.2s ease;
}
.typePill:hover,.badge:hover{
  transform:translateY(-1px);
}
tbody tr{
  animation:rowIn .28s ease both;
}
tbody tr:nth-child(2){animation-delay:.04s}
tbody tr:nth-child(3){animation-delay:.08s}
tbody tr:nth-child(4){animation-delay:.12s}
tbody tr:nth-child(5){animation-delay:.16s}
.modal.show .box{
  animation:modalPop .22s ease both;
}

/* keyframes */
@keyframes meshMove{
  from{transform:translate(-20px,-16px) scale(1)}
  to{transform:translate(24px,18px) scale(1.05)}
}
@keyframes particleFloat{
  0%,100%{transform:translateY(0) translateX(0);opacity:.45}
  50%{transform:translateY(-35px) translateX(18px);opacity:.95}
}
@keyframes shineBar{
  from{background-position:0 0}
  to{background-position:220% 0}
}
@keyframes logoBounce{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-4px) rotate(-4deg)}
}
@keyframes buttonShine{
  0%{left:-120%}
  45%,100%{left:130%}
}
@keyframes topDrop{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes rowIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes modalPop{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ================= V15 RESTORE INNER ICON STYLE ================= */
/* Sidebar icons remain premium. Only inner dashboard/table/card icons are restored. */
.statCard i,
.miniStats i{
  background:#eaf2ff!important;
  color:#246bfe!important;
  box-shadow:inset 0 0 0 1px #d6e6ff!important;
  transform:none!important;
  animation:none!important;
}
.statCard:hover i,
.miniStats div:hover i{
  transform:none!important;
}
.statCard:nth-child(2) i{background:#e9f8ef!important;color:#16a34a!important;box-shadow:inset 0 0 0 1px #c9f0d6!important}
.statCard:nth-child(3) i{background:#fff7df!important;color:#9a6400!important;box-shadow:inset 0 0 0 1px #ffe1a6!important}
.statCard:nth-child(4) i{background:#f3e8ff!important;color:#7e22ce!important;box-shadow:inset 0 0 0 1px #e4c8ff!important}

.miniStats div:nth-child(2) i{background:#e9f8ef!important;color:#16a34a!important;box-shadow:inset 0 0 0 1px #c9f0d6!important}
.miniStats div:nth-child(3) i{background:#fff1df!important;color:#f97316!important;box-shadow:inset 0 0 0 1px #ffd7ad!important}
.miniStats div:nth-child(4) i{background:#f3e8ff!important;color:#9333ea!important;box-shadow:inset 0 0 0 1px #e4c8ff!important}

/* Keep sidebar nav icons premium and separate from inner icons */
.sidebar .navIcon{
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;
  color:#dbeafe!important;
}
.sidebar button.active .navIcon,
.sidebar button:hover .navIcon{
  background:linear-gradient(135deg,#20b9ff,#246bfe)!important;
  color:white!important;
  transform:scale(1.08) rotate(-4deg)!important;
}

/* ================= V16 ANNOUNCEMENTS ================= */
.announcementComposer .announceForm{
  padding:22px 26px 26px;
}
.announceForm button{
  border:0;
  border-radius:12px;
  padding:12px 16px;
  background:linear-gradient(135deg,#246bfe,#1752d9);
  color:white;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(36,107,254,.23);
  margin-top:14px;
}
.announcementList{
  padding:18px 26px 24px;
}
.announcementCard{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfdff);
  border-radius:16px;
  padding:18px;
  margin-bottom:12px;
  box-shadow:0 10px 28px rgba(15,42,76,.06);
  animation:fadeUp .25s ease both;
}
.announcementCard h3{
  margin:0 0 8px;
  font-size:18px;
}
.announcementCard p{
  margin:0 0 10px;
  color:#334155;
  line-height:1.55;
}
.announcementCard small{
  color:var(--muted);
}

.panelHead small{font-size:12px;color:var(--muted);font-weight:700}

.secondaryBtn{
  margin-left:10px;
  border:1px solid var(--line)!important;
  background:#fff!important;
  color:#0f1b2f!important;
  box-shadow:none!important;
}
.secondaryBtn:hover{
  background:#f8fafc!important;
}

/* ================= V19 PRODUCTION POLISH ================= */

/* Global smoothness */
*{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  background:
    radial-gradient(circle at 82% 8%, rgba(36,107,254,.08), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(32,185,255,.08), transparent 30%),
    #f5f9fd!important;
}
button{
  user-select:none;
}

/* Login premium depth */
.login{
  background:
    linear-gradient(120deg,#031225 0%,#06294f 45%,#075c9d 100%)!important;
}
.login:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at center,#000 0%,transparent 78%);
  animation:gridDrift 18s linear infinite;
  pointer-events:none;
}
.login-panel{
  transform-style:preserve-3d;
  animation:panelEntrance .7s cubic-bezier(.22,1,.36,1) both!important;
}
.login-panel:hover{
  transform:translateY(-4px);
  box-shadow:0 46px 125px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.login-brand h1{
  letter-spacing:-1px;
}
.login-panel h2{
  letter-spacing:-.7px;
}

/* Sidebar premium motion */
.sidebar{
  border-right:1px solid rgba(255,255,255,.08);
}
.sideLogo{
  position:relative;
}
.sideLogo:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,rgba(32,185,255,.55),transparent);
}
.navGroup{
  opacity:.86;
}
.sidebar button{
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease!important;
}
.sidebar button.active{
  box-shadow:0 14px 34px rgba(36,107,254,.25), inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.navIcon{
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease!important;
}
.sidebar button:hover .navIcon{
  animation:iconWiggle .45s ease;
}

/* Topbar/profile */
.topbar{
  box-shadow:0 8px 28px rgba(15,42,76,.05);
}
.profileMini{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.profileMini:hover{
  border-color:#c7d8ee;
}
.profileMini .avatar{
  animation:avatarGlow 3s ease-in-out infinite;
}

/* Content premium animation */
.contentHead{
  border-radius:20px;
}
.contentHead h1{
  letter-spacing:-.8px;
}
#addBtn{
  position:relative;
  overflow:hidden;
}
#addBtn:after,
.announceForm button:after,
.box>button:after,
.premiumCalc button:after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:75%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  animation:shineMove 3.2s ease-in-out infinite;
}

/* Card and panel */
.statCard,
.miniStats div,
.panel{
  border-color:#dbe8f5!important;
}
.statCard,
.miniStats div{
  transform:translateZ(0);
}
.statCard:hover,
.miniStats div:hover{
  border-color:#c6d9ef!important;
}
.statCard i,
.miniStats i{
  transition:transform .22s ease, box-shadow .22s ease!important;
}
.statCard:hover i,
.miniStats div:hover i{
  transform:scale(1.05)!important;
  box-shadow:0 14px 26px rgba(36,107,254,.14)!important;
}
.panel{
  animation:panelFade .42s ease both;
}
.panelHead h2{
  letter-spacing:-.35px;
}

/* Tables */
table{
  background:white;
}
tbody tr{
  transition:background .18s ease, box-shadow .18s ease;
}
tbody tr:hover{
  box-shadow:inset 3px 0 0 #246bfe;
}
tbody tr:hover td{
  background:#f8fbff!important;
}
.act{
  position:relative;
  overflow:hidden;
}
.act:hover{
  transform:translateY(-2px);
}

/* Announcements */
.announcementCard{
  position:relative;
  overflow:hidden;
}
.announcementCard:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,#20b9ff,#246bfe);
}
.announcementCard:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(15,42,76,.12);
}

/* Modal */
.modal.show .box{
  animation:modalEntrance .25s cubic-bezier(.22,1,.36,1) both!important;
}
#closeModalBtn:hover{
  background:#fff1f1!important;
  color:#ef4444!important;
  border-color:#fecaca!important;
}

/* Footer button removed */
.secondaryBtn{display:none!important}

/* Animations */
@keyframes gridDrift{
  from{background-position:0 0}
  to{background-position:48px 48px}
}
@keyframes panelEntrance{
  from{opacity:0;transform:translateY(24px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes iconWiggle{
  0%,100%{transform:scale(1.08) rotate(-4deg)}
  50%{transform:scale(1.13) rotate(4deg)}
}
@keyframes avatarGlow{
  0%,100%{box-shadow:0 8px 22px rgba(36,107,254,.18)}
  50%{box-shadow:0 10px 32px rgba(36,107,254,.35)}
}
@keyframes shineMove{
  0%{left:-120%}
  45%,100%{left:130%}
}
@keyframes panelFade{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes modalEntrance{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ================= V20 EMAIL DIAGNOSTICS ================= */
.smtpStatusBox{
  padding:18px 26px 24px;
}
.smtpGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.smtpGrid div{
  background:#fbfdff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.smtpGrid span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
}
.smtpGrid b{
  font-size:14px;
  word-break:break-word;
}
.okText{color:#16a34a!important}
.badText{color:#ef4444!important}
.smtpError{
  margin-top:12px;
  background:#fff1f1;
  border:1px solid #fecaca;
  color:#991b1b;
  padding:12px 14px;
  border-radius:12px;
}
@media(max-width:900px){
  .smtpGrid{grid-template-columns:1fr}
}

/* ================= V22 PREMIUM LOGIN + RESPONSIVE ================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

body,button,input,select,textarea{
  font-family:'Inter','Segoe UI',Arial,sans-serif!important;
}

/* Premium animated login background */
.login{
  min-height:100vh!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 18%, rgba(32,185,255,.35), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(36,107,254,.34), transparent 30%),
    radial-gradient(circle at 60% 92%, rgba(59,210,176,.20), transparent 32%),
    linear-gradient(135deg,#031225 0%,#062a52 48%,#075f9e 100%)!important;
}
.aurora{
  position:absolute;
  inset:-25%;
  background:
    conic-gradient(from 130deg at 50% 50%, transparent 0deg, rgba(32,185,255,.25) 65deg, transparent 130deg, rgba(36,107,254,.22) 230deg, transparent 360deg);
  filter:blur(30px);
  opacity:.65;
  animation:auroraSpin 18s linear infinite;
  pointer-events:none;
}
.rainLayer,.bubbleLayer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.rainLayer span{
  position:absolute;
  top:-80px;
  left:calc(var(--x) * 1%);
  width:2px;
  height:70px;
  border-radius:999px;
  background:linear-gradient(180deg,transparent,rgba(210,244,255,.85),transparent);
  animation:rainDrop calc(8s / var(--i)) linear infinite;
  animation-delay:calc(var(--i) * -.18s);
  opacity:.55;
}
.bubbleLayer span{
  position:absolute;
  left:var(--l);
  bottom:-140px;
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.30),rgba(255,255,255,.05) 45%,rgba(32,185,255,.08));
  box-shadow:inset 0 0 24px rgba(255,255,255,.10),0 0 28px rgba(32,185,255,.10);
  animation:bubbleRise 13s ease-in infinite;
  animation-delay:var(--d);
}
.login-panel{
  position:relative!important;
  z-index:4!important;
  width:min(470px,92vw)!important;
  padding:38px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  backdrop-filter:blur(20px)!important;
  box-shadow:0 42px 120px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.85)!important;
  animation:loginPanelIn .8s cubic-bezier(.22,1,.36,1) both!important;
}
.login-panel:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#20b9ff,#246bfe,#3bd2b0,#20b9ff);
  background-size:250% 100%;
  animation:gradientLine 3.5s linear infinite;
}
.login-brand{
  animation:fadeUpPremium .65s ease both;
}
.loginBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#eef6ff;
  color:#0e5eb6;
  border:1px solid #d6e8ff;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  margin-bottom:14px;
  animation:fadeUpPremium .75s ease both;
}
.loginBadge:before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#16a34a;
  box-shadow:0 0 0 5px rgba(22,163,74,.12);
}
.login-panel h2{
  font-size:34px!important;
  letter-spacing:-1.1px;
  animation:fadeUpPremium .85s ease both;
}
.login-sub{
  line-height:1.65;
  animation:fadeUpPremium .95s ease both;
}
.login-panel label,
.login-panel input,
.login-panel button,
#err{
  animation:fadeUpPremium 1s ease both;
}
.login-panel input{
  height:48px;
  border-radius:14px!important;
  transition:all .25s ease!important;
}
.login-panel input:hover{
  transform:translateY(-1px);
  border-color:#c4d8f2;
}
.login-panel button{
  height:50px;
  border-radius:14px!important;
  position:relative;
  overflow:hidden;
}
.login-panel button:after{
  content:"";
  position:absolute;
  top:0;left:-120%;
  width:85%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  animation:btnShimmer 3s ease-in-out infinite;
}
.brand-icon{
  animation:iconFloat 3s ease-in-out infinite!important;
}

/* Better app responsive alignment */
@media(max-width:1024px){
  .stats,.miniStats{
    grid-template-columns:repeat(2,1fr)!important;
  }
  .resultGrid{
    grid-template-columns:repeat(2,1fr)!important;
  }
}
@media(max-width:820px){
  .login{
    padding:20px!important;
  }
  .login-panel{
    padding:28px!important;
  }
  .login-brand h1{
    font-size:26px!important;
  }
  .login-panel h2{
    font-size:28px!important;
  }
  .sidebar{
    transform:translateX(-100%);
    transition:.25s ease;
  }
  .sidebarOpen .sidebar{
    transform:translateX(0);
  }
  .main{
    margin-left:0!important;
    width:100%!important;
  }
  .contentHead{
    flex-direction:column;
    gap:14px;
    padding:22px 18px 14px!important;
  }
  #addBtn{
    width:100%;
  }
  .page{
    padding:0 18px!important;
  }
  .topbar{
    padding:0 18px!important;
  }
  .profileMini{
    width:100%;
    justify-content:flex-start;
  }
  .stats,.miniStats,.grid,.resultGrid,.smtpGrid{
    grid-template-columns:1fr!important;
  }
  table{
    min-width:760px!important;
  }
}
@media(max-width:520px){
  .login-panel{
    width:96vw!important;
    padding:22px!important;
    border-radius:22px!important;
  }
  .login-brand{
    gap:10px!important;
  }
  .brand-icon{
    width:48px!important;
    height:48px!important;
  }
  .login-panel h2{
    font-size:25px!important;
  }
  .contentHead h1{
    font-size:24px!important;
  }
  .statCard,.miniStats div{
    min-height:98px!important;
    padding:16px!important;
  }
  .panelHead{
    padding:16px 18px!important;
  }
  .announcementList,.smtpStatusBox,.announceForm,.premiumCalc p,.premiumCalc .grid,.premiumCalc button,.calcResult{
    margin-left:18px!important;
    margin-right:18px!important;
  }
}

@keyframes auroraSpin{
  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1.05)}
}
@keyframes rainDrop{
  from{transform:translateY(-120px);opacity:0}
  12%{opacity:.7}
  to{transform:translateY(120vh);opacity:0}
}
@keyframes bubbleRise{
  from{transform:translateY(0) scale(.82);opacity:0}
  15%{opacity:.65}
  85%{opacity:.55}
  to{transform:translateY(-120vh) scale(1.15);opacity:0}
}
@keyframes loginPanelIn{
  from{opacity:0;transform:translateY(28px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeUpPremium{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes gradientLine{
  from{background-position:0 0}
  to{background-position:250% 0}
}
@keyframes btnShimmer{
  0%{left:-120%}
  45%,100%{left:130%}
}
@keyframes iconFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-5px) rotate(-4deg)}
}

/* V24 blank login fields */
.login-panel input::placeholder{color:#94a3b8}

/* ================= V25 SETTINGS / PERSISTENT DATA ================= */
.settingsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:22px 26px 26px;
}
.settingsCard{
  border:1px solid var(--line);
  background:#fbfdff;
  border-radius:16px;
  padding:18px;
}
.settingsCard h3{
  margin:0 0 14px;
}
.settingsCard button{
  border:0;
  border-radius:12px;
  padding:12px 16px;
  background:linear-gradient(135deg,#246bfe,#1752d9);
  color:white;
  font-weight:900;
  cursor:pointer;
  margin-top:14px;
  margin-right:8px;
}
.databaseInfo{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:white;
  line-height:1.65;
}
.databaseInfo small{
  word-break:break-all;
  color:var(--muted);
}
@media(max-width:900px){
  .settingsGrid{grid-template-columns:1fr;padding:18px}
}