@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --navy:#241044;
  --navy2:#32105F;
  --purple:#6526A8;
  --violet:#914BE0;
  --lavender:#C6A4F5;
  --bg:#F7F5FB;
  --text:#211832;
  --muted:#81778F;
  --line:#EDE8F4;
  --white:#FFFFFF;
  --shadow:0 8px 30px rgba(49,16,95,.055);
  --radius:16px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{transition:all .22s ease;cursor:pointer}
.hidden{display:none!important}

/* LOGIN */
.login-screen{
 min-height:100vh;display:grid;place-items:center;padding:24px;
 background:radial-gradient(ellipse at 15% 15%,#6526A8 0,transparent 38%),
 radial-gradient(ellipse at 90% 90%,#491B79 0,transparent 38%),
 linear-gradient(135deg,#18092B,#241044 55%,#32105F);
}
.login-card{
 width:min(440px,100%);padding:44px;background:#fff;border:1px solid #ffffff40;
 border-radius:24px;box-shadow:0 30px 100px #10051f70;
}
.brand-mark{
 width:58px;height:58px;border-radius:17px;
 background:linear-gradient(135deg,#6526A8,#A05BEA);
 color:white;display:grid;place-items:center;
 font:800 31px Manrope;margin-bottom:28px;
 box-shadow:0 9px 25px #6526A844;
}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--violet)}
.login-card h1{font:800 32px Manrope;margin:9px 0;letter-spacing:-1.2px}
.login-card h1 span,.brand span{color:var(--violet)}
.muted{color:var(--muted);font-size:14px;margin-bottom:30px}
.login-card label{display:block;font-size:12px;font-weight:700;margin:18px 0 8px}
.login-card input{
 width:100%;padding:15px;border:1px solid var(--line);border-radius:11px;
 outline:none;background:#FCFAFE;color:var(--text);transition:.2s;
}
.login-card input:focus{border-color:var(--violet);box-shadow:0 0 0 4px #914BE018}
.primary-btn{
 width:100%;margin-top:25px;border:0;border-radius:11px;padding:16px;
 background:linear-gradient(110deg,#6526A8,#914BE0);color:white;
 font-weight:800;box-shadow:0 8px 20px #6526A833;
}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px #6526A844}
.primary-btn span{float:right;color:#E8D7FF}
.login-foot{border-top:1px solid var(--line);margin-top:30px;padding-top:19px;text-align:center;font-size:9px;letter-spacing:2px;color:#A49AAF}
.error{color:#c43c48;font-size:12px}

/* APPLICATION SHELL */
.app{min-height:100vh}
.sidebar{
 position:fixed;inset:0 auto 0 0;width:258px;
 background:linear-gradient(180deg,#241044 0%,#1B0B32 100%);
 color:white;padding:28px 18px;display:flex;flex-direction:column;z-index:10;
 box-shadow:8px 0 35px #1c0b3210;
}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 43px}
.brand-mark.small{
 width:43px;height:43px;margin:0;border-radius:13px;font-size:24px;
 background:linear-gradient(135deg,#914BE0,#6526A8);
}
.brand strong{font:800 16px Manrope;letter-spacing:-.4px}
.brand small{display:block;font-size:9px;letter-spacing:1.8px;color:#C6A4F5;margin-top:5px}
.side-label{font-size:9px;letter-spacing:2px;color:#A98ACB;padding:0 12px 14px;font-weight:800}
#navigation{display:grid;gap:6px}
.nav-link{
 width:100%;border:1px solid transparent;background:transparent;color:#C3B5D4;
 text-align:left;padding:13px 14px;border-radius:11px;margin:0;
 font-size:13px;font-weight:600;display:flex;align-items:center;gap:12px;
}
.nav-link b{display:inline-grid;place-items:center;width:25px;color:#B995E7;font-size:18px}
.nav-link:hover{background:#ffffff10;color:white}
.nav-link.active{
 background:linear-gradient(100deg,#914BE044,#914BE015);
 border-color:#B78BEA30;color:#fff;
 box-shadow:inset 3px 0 #B77AF4;
}
.nav-link.active b{color:#D8B9FF}
.sidebar-bottom{margin-top:auto}
.secure{font-size:11px;color:#B7A8C8;padding:16px 10px;border-top:1px solid #ffffff17}
.secure span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#46D39A;margin-right:8px;box-shadow:0 0 10px #46D39A80}
.logout{
 width:100%;text-align:left;background:#ffffff0c;border:1px solid #ffffff18;
 color:#E1D7EA;border-radius:10px;padding:13px;font-size:12px;
}
.logout:hover{background:#ffffff18;color:white}

/* MAIN */
.main{margin-left:258px;min-height:100vh;display:flex;flex-direction:column;min-width:0}
.topbar{
 min-height:100px;background:#fff;border-bottom:1px solid var(--line);
 display:flex;align-items:center;justify-content:space-between;padding:0 42px;
}
.topbar .eyebrow{font-size:9px;color:#A18EBA}
.topbar h2{font:800 23px Manrope;margin:6px 0 0;letter-spacing:-.7px}
.admin-profile{display:flex;align-items:center;gap:12px}
.avatar{
 width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
 background:linear-gradient(135deg,#F0E4FF,#E6D4FC);
 color:#6526A8;font-weight:800;border:1px solid #E5D5F8;
}
.admin-profile strong{font-size:12px;display:block}
.admin-profile small{font-size:10px;color:var(--muted)}
.content{padding:34px 42px;flex:1;min-width:0}
.welcome{
 display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;
 padding:25px 27px;border-radius:18px;color:white;
 background:linear-gradient(110deg,#32105F,#6526A8 68%,#8745C5);
 box-shadow:0 12px 30px #6526A822;position:relative;overflow:hidden;
}
.welcome:after{
 content:"";position:absolute;width:210px;height:210px;border:1px solid #ffffff20;
 border-radius:50%;right:8%;top:-120px;box-shadow:0 0 0 25px #ffffff08,0 0 0 55px #ffffff06;
}
.welcome>div,.welcome button{position:relative;z-index:1}
.welcome h3{font:800 20px Manrope;margin:0 0 7px}
.welcome p{margin:0;color:#E4D5F5;font-size:12px}
.refresh{
 border:1px solid var(--line);background:white;color:#5B4675;
 padding:11px 15px;border-radius:10px;font-weight:700;font-size:11px;
}
.refresh:hover{border-color:var(--violet);color:var(--purple);transform:translateY(-1px)}
.welcome .refresh{background:#ffffff18;color:white;border-color:#ffffff40}
.welcome .refresh:hover{background:#ffffff28}

/* DASHBOARD CARDS */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.stat{
 background:white;border:1px solid var(--line);border-radius:16px;
 padding:21px;min-height:139px;box-shadow:var(--shadow);
 transition:transform .22s,box-shadow .22s,border-color .22s;
 position:relative;overflow:hidden;
}
.stat:hover{transform:translateY(-3px);box-shadow:0 14px 35px #32105F12;border-color:#DCC8F2}
.stat-top{display:flex;justify-content:space-between;align-items:center;color:#81768F;font-size:11px;font-weight:700;gap:8px}
.stat-icon{
 width:36px;height:36px;flex:0 0 36px;border-radius:11px;
 background:linear-gradient(135deg,#F4EBFF,#EDE0FC);
 color:#7134B4;display:grid;place-items:center;font-size:16px;
}
.stat strong{display:block;font:800 26px Manrope;margin:14px 0 4px;letter-spacing:-.7px;color:#29183B}
.stat small{color:#A198AC;font-size:10px}
.panel{
 background:white;border:1px solid var(--line);border-radius:16px;
 margin-top:22px;overflow:hidden;box-shadow:var(--shadow);
}
.panel-head{
 padding:20px 23px;display:flex;justify-content:space-between;align-items:center;
 border-bottom:1px solid var(--line);
}
.panel-head h3{font:800 14px Manrope;margin:0;color:#2A1A3C}
.panel-head span{font-size:10px;color:var(--muted)}
.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}
.page-heading h3{font:800 21px Manrope;margin:0;letter-spacing:-.5px}
.page-heading p{font-size:12px;color:var(--muted);margin:6px 0 0}

/* TABLES */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12px}
th{
 text-align:left;color:#8B8098;font-weight:800;background:#FBF9FD;
 padding:15px 20px;white-space:nowrap;font-size:10px;letter-spacing:.4px;
 text-transform:uppercase;
}
td{padding:16px 20px;border-top:1px solid #F1EDF5;white-space:nowrap;color:#493D57}
tbody tr{transition:background .18s}
tbody tr:hover{background:#FBF8FF}
td.empty{text-align:center;color:#9B91A6;padding:40px}
.status{
 display:inline-block;border-radius:30px;padding:6px 11px;
 background:#F0EDF4;color:#786D84;font-size:10px;font-weight:800;
}
.status.published,.status.active,.status.successful,.status.paid{
 background:#E8F8F0;color:#21865B;
}
.status.pending,.status.draft{background:#FFF5E5;color:#A8792D}
.status.cancelled,.status.suspended,.status.failed{background:#FFF0F1;color:#C34D54}
.notice{padding:13px 16px;background:#FFF5E5;color:#956D2D;border-radius:10px;margin-bottom:17px;font-size:12px}
.empty{padding:30px}
footer{padding:19px 42px;border-top:1px solid var(--line);font-size:10px;color:#A198AC}
footer span{color:var(--violet);padding:0 5px}

/* RESPONSIVE */
@media(max-width:1200px){
 .content{padding:28px}
 .topbar{padding:0 28px}
 .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:850px){
 .sidebar{width:76px;padding:20px 9px}
 .brand{padding:0 7px 35px}
 .brand>div:last-child,.side-label{display:none}
 .nav-link{justify-content:center;padding:14px 8px;font-size:0}
 .nav-link b{width:auto;font-size:20px}
 .secure{font-size:0;text-align:center;padding:14px 5px}
 .secure span{margin:0}
 .logout{font-size:0;text-align:center;padding:13px 4px}
 .logout:first-letter{font-size:17px}
 .main{margin-left:76px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:550px){
 .topbar{min-height:78px;padding:0 15px}
 .topbar h2{font-size:18px}
 .topbar .eyebrow{font-size:8px}
 .admin-profile{gap:8px}
 .avatar{width:36px;height:36px}
 .admin-profile>div:last-child{display:none}
 .content{padding:18px 12px}
 .welcome{padding:20px 17px;gap:10px;align-items:flex-start}
 .welcome h3{font-size:16px}
 .welcome p{font-size:11px;max-width:210px}
 .welcome .refresh{font-size:10px;padding:9px}
 .stats{gap:10px}
 .stat{padding:14px;min-height:119px;border-radius:13px}
 .stat-top{font-size:10px;align-items:flex-start}
 .stat-icon{width:29px;height:29px;flex-basis:29px;font-size:13px}
 .stat strong{font-size:20px;margin:12px 0 4px;overflow-wrap:anywhere}
 .stat small{font-size:9px}
 .panel{border-radius:13px}
 .panel-head{padding:16px}
 .page-heading h3{font-size:18px}
 .page-heading p{font-size:10px}
 .refresh{padding:9px 10px;font-size:10px}
 th,td{padding:13px 14px}
 footer{padding:15px 13px}
 .login-card{padding:29px 23px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}