/* basic reset */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#0b1020;color:#e7e9f3;}

/* login */
.login-body{min-height:100vh;background:url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1920&q=60') center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative;}
.login-overlay{position:fixed;inset:0;background:radial-gradient(circle at top,#ffb34733,#0b1020 60%);backdrop-filter:blur(5px);}
.login-wrapper{position:relative;z-index:2;max-width:460px;width:100%;padding:20px;}
.login-box{background:rgba(7,9,18,0.75);border:1px solid rgba(255,232,163,0.35);border-radius:18px;padding:30px 28px 36px;box-shadow:0 10px 40px rgba(0,0,0,.35);backdrop-filter:blur(8px);}
.login-logo{font-size:40px;font-weight:700;color:#f1c76c;letter-spacing:.04em}
.login-logo span{color:#fff;font-size:.5em;margin-left:.25em;vertical-align:middle;}
.login-sub{color:#fff;margin-bottom:16px;opacity:.8}
.login-title{font-weight:600;margin-bottom:14px;}
.field-label{display:block;margin:14px 0 6px;font-size:.875rem;}
.input{width:100%;background:#0b1020;border:1px solid rgba(241,199,108,0.45);border-radius:10px;padding:10px 12px;color:#fff;}
.login-btn{width:100%;background:linear-gradient(120deg,#f7d774,#da8f37);color:#0b1020;border:0;border-radius:14px;padding:11px 0;font-weight:600;margin-top:18px;cursor:pointer;}
.alert{background:#f56565;padding:10px 12px;border-radius:8px;margin-bottom:10px;}

/* app shell */
.app-body{min-height:100vh;}
.app-shell{display:flex;min-height:100vh;}
.app-sidebar{width:240px;background:linear-gradient(180deg,#130834 0%,#251028 60%,#0b1020 100%);border-right:1px solid rgba(255,255,255,0.05);display:flex;flex-direction:column;}
.logo-block{display:flex;align-items:center;gap:10px;padding:20px 18px 14px;}
.logo-icon{width:46px;height:46px;border-radius:16px;background:radial-gradient(circle,#ffcf71 0%,#ff8f00 90%);color:#120820;font-weight:700;display:flex;align-items:center;justify-content:center;}
.logo-txt{font-weight:600;font-size:1.05rem;}
.nav-links{padding:10px 14px 14px;display:flex;flex-direction:column;gap:6px;}
.nav-link{display:block;padding:9px 12px;border-radius:12px;color:#e7e9f3;text-decoration:none;font-size:.9rem;}
.nav-link:hover{background:rgba(231,233,243,.08);}
.nav-section{margin-top:10px;font-size:.7rem;opacity:.5;text-transform:uppercase;letter-spacing:.08em;}
.sidebar-bottom{margin-top:auto;padding:14px;}
.logout-link{display:block;background:rgba(0,0,0,0.4);padding:9px 12px;border-radius:10px;text-decoration:none;color:#fff;text-align:center;}
.foot-mini{font-size:.65rem;opacity:.5;margin-top:6px;text-align:center;}
.app-main{flex:1;display:flex;flex-direction:column;background:radial-gradient(circle at top,#3b3568 0%,#0b1020 45%,#0b1020 100%);}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 10px;}
.top-title{font-weight:600;}
.badge-soft{background:rgba(244,186,72,.15);border:1px solid rgba(244,186,72,.32);border-radius:999px;padding:4px 14px;font-size:.75rem;}
.main-content{padding:10px 26px 32px;}

/* cards */
.page-title{font-size:1.4rem;margin-bottom:16px;}
.cards-row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:22px;}
.stat-card{flex:1;min-width:160px;background:rgba(10,10,18,0.45);border:1px solid rgba(255,255,255,0.03);border-radius:18px;padding:16px 16px 14px;box-shadow:0 4px 30px rgba(0,0,0,.12);}
.stat-card .stat-label{font-size:.75rem;opacity:.7;}
.stat-card .stat-value{font-size:2.1rem;font-weight:600;margin-top:6px;}
.stat-card.purple{background:linear-gradient(140deg,rgba(124,77,255,0.4),rgba(15,9,28,.25));}
.stat-card.orange{background:linear-gradient(140deg,rgba(255,167,66,0.5),rgba(15,9,28,.25));}
.stat-card.teal{background:linear-gradient(140deg,rgba(93,245,199,0.35),rgba(15,9,28,.25));}
.stat-card.gold{background:linear-gradient(140deg,rgba(252,194,90,0.7),rgba(15,9,28,.25));}

/* tables */
.table-card{background:rgba(8,8,12,0.45);border:1px solid rgba(255,255,255,0.02);border-radius:16px;overflow:hidden;}
.table-modern{width:100%;border-collapse:collapse;}
.table-modern thead{background:rgba(0,0,0,0.1);}
.table-modern th,.table-modern td{padding:10px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03);font-size:.85rem;}
.table-modern tbody tr:hover{background:rgba(255,255,255,0.01);}
.text-right{text-align:right;}

/* buttons */
.primary-btn{background:linear-gradient(120deg,#d869ff,#f4a85b);border:0;border-radius:12px;padding:9px 18px;color:#fff;text-decoration:none;font-weight:500;}
.ghost-btn{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px 16px;color:#fff;text-decoration:none;}
.btn-sm{display:inline-block;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.05);color:#fff;border-radius:9px;padding:4px 9px;font-size:.72rem;text-decoration:none;margin-left:4px;}
.btn-sm.danger{border-color:rgba(255,87,87,0.4);color:#ff9696;}
.btn-sm.info{border-color:rgba(75,148,255,0.35);color:#cbdeff;}

/* forms */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;background:rgba(5,6,12,0.35);border:1px solid rgba(255,255,255,0.02);border-radius:16px;padding:18px;}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;}
.form-grid input,.form-grid select,.form-grid textarea{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.05);border-radius:10px;padding:7px 9px;color:#fff;}
.inline{flex-direction:row;align-items:center;gap:8px;}
.full-row{grid-column:1/-1;}
.form-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:6px;}

/* cycles */
.cycle-row{display:flex;gap:10px;margin-bottom:7px;}
.cycle-row input{flex:0 0 140px;}

/* copy line */
.copy-line{display:flex;gap:6px;align-items:center;}
.copy-line input{max-width:240px;}

/* cards generic */
.card-block{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.04);border-radius:14px;padding:14px 16px;margin-bottom:16px;}
.code-block{white-space:pre-wrap;word-break:break-word;background:rgba(3,3,4,.5);padding:10px 12px;border-radius:10px;margin-top:10px;}

/* alerts */
.alert-error{background:rgba(255,90,90,.18);border:1px solid rgba(255,104,124,.28);border-radius:12px;padding:10px 12px;margin-bottom:10px;}

/* responsive */
@media(max-width:900px){
  .app-sidebar{display:none;}
  .app-main{margin-left:0;}
  .main-content{padding:14px 16px 40px;}
  .cards-row{flex-direction:column;}
}


/* popup */
.popup{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:999;}
.popup-inner{background:#0b1020;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;min-width:320px;}
.popup-inner input{width:100%;margin:8px 0 12px;}
.popup-actions{display:flex;gap:10px;justify-content:flex-end;}
.toggle-row{display:flex;align-items:center;gap:8px;}


/* search */
.search-wrap{margin-left:auto;}
.search-wrap input{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:999px;padding:6px 14px;color:#fff;min-width:220px;}
@media(max-width:700px){
  .search-wrap input{min-width:100px;width:100%;}
  .page-head{flex-direction:column;gap:10px;}
}

/* popup nicer */
.modern-pop .popup-inner{background:linear-gradient(160deg,rgba(8,14,32,1) 0%,rgba(19,16,37,.5) 100%);border:1px solid rgba(174,129,255,.4);box-shadow:0 10px 40px rgba(0,0,0,.4);}
.popup-inner h3{margin-bottom:6px;}
.popup-inner input{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.04);border-radius:8px;}
.popup-inner button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:5px 10px;color:#fff;}

/* table btn */
.table-btn{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.03);border-radius:8px;padding:4px 8px;font-size:.7rem;color:#fff;text-decoration:none;margin-left:4px;display:inline-block;}
.table-btn.info{border-color:rgba(81,168,255,.4);}
.table-btn.danger{border-color:rgba(255,91,91,.4);color:#ffb6b6;}
.primary-btn.small{padding:6px 14px;font-size:.75rem;}

/* card extras */
.glassy{background:rgba(10,12,20,.45);backdrop-filter:blur(6px);}
.big-select{font-size:1rem;height:40px;}

/* mobile tables */
@media(max-width:750px){
  .table-modern thead{display:none;}
  .table-modern tr{display:block;border-bottom:1px solid rgba(255,255,255,.03);margin-bottom:10px;}
  .table-modern td{display:flex;justify-content:space-between;gap:10px;}
  .table-modern td:before{content:attr(data-title);opacity:.6;}
}

.popup.modern-pop .popup-inner input{color:#fff;font-size:.9rem;}
.popup.modern-pop .popup-inner h3{color:#fff;font-size:1rem;}


/* 2025 layout tweaks */
.page-head-split{display:flex;align-items:center;gap:14px;}
.page-head-split .page-title{margin-bottom:0;}
.page-head-split .search-wrap{margin-left:auto;}

.badge-soft{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:3px 11px;font-size:.65rem;letter-spacing:.05em;}

/* modern table card */
.table-card{background:rgba(6,8,15,.45);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.03);border-radius:14px;overflow:auto;}

/* inputs */
form.form-grid.wide label{display:flex;flex-direction:column;gap:6px;}
input[type=text], input[type=password], select, textarea{
  background:rgba(1,3,8,.35);
  border:1px solid rgba(255,255,255,.04);
  border-radius:10px;
  color:#fff;
  padding:7px 10px;
}
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus{
  outline:none;
  border-color:rgba(146,119,255,.9);
  box-shadow:0 0 0 2px rgba(146,119,255,.22);
}

/* admin lines search */
.search-wrap input{max-width:260px;}

/* hero-like topbar optional */
.top-hero{
  background:radial-gradient(circle at top, #4c49ff 0%, #0a091f 36%, #070811 100%);
  border-bottom:1px solid rgba(255,255,255,.03);
  padding:16px 22px;
  border-radius:14px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* fix popup text */
.popup.modern-pop .popup-inner{color:#fff;}
.popup.modern-pop .popup-inner input{color:#fff;}

/* tables on small screens */
@media(max-width:760px){
  .page-head-split{flex-direction:column;align-items:flex-start;}
  .search-wrap{width:100%;}
}