:root{
  /* Skoogle Brand Colors */
  --purple-900:#2e1a5e;
  --purple-800:#3b2475;
  --purple-700:#4a2f8c; /* Primary brand purple */
  --purple-500:#6a4bb5;
  --purple-300:#a68fd6;
  --purple-100:#ece6f8;
  
  --gold-600:#d38f00;
  --gold-500:#f5b300; /* Primary brand gold */
  --gold-300:#f9cd55;
  --gold-100:#fef3d1;
  
  --ink:#1a1230;
  --ink-soft:#6b6483;
  --line:rgba(46,26,94,.10);
  --glass-border:rgba(255,255,255,.65);
  --paper:#f8f6fd; /* Brighter, cleaner background */
  --panel:rgba(255,255,255,.75); /* More opaque for better readability */
  --panel-strong:rgba(255,255,255,.90);
  --glass-blur: blur(16px) saturate(180%);
  --green:#1f9d63;
  --green-bg:rgba(31,157,99,.14);
  --red:#d6455a;
  --red-bg:rgba(214,69,90,.12);
  --amber-bg:rgba(245,179,0,.16);
  --shadow: 0 8px 32px rgba(46,26,94,.08), 0 1px 2px rgba(46,26,94,.04);
  --radius:14px;
  color-scheme: light;
}

/* REMOVED THE DARK MODE MEDIA QUERY SO IT ALWAYS STAYS LIGHT */

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  /* Brighter, more vibrant background gradients */
  background:
    radial-gradient(640px 640px at 6% -8%, rgba(245,179,0,.18), transparent 60%),
    radial-gradient(760px 760px at 102% -4%, rgba(106,75,181,.22), transparent 55%),
    radial-gradient(560px 560px at 12% 105%, rgba(106,75,181,.12), transparent 55%),
    var(--paper);
  background-attachment: fixed;
}
.num{font-variant-numeric:tabular-nums;}
.mono{font-family:'Space Mono',ui-monospace,monospace;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--gold-300);color:var(--purple-900);}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}

.custom-btn{
    display:flex;
    gap:3px;
}
input{
    padding: 11px 13px;
    border: 1px solid rgba(46, 26, 94, .16);
    border-radius: 10px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--ink);
    background: rgba(255, 255, 255, .65);
}
input, select{
    padding: 11px 13px;
    border: 1px solid rgba(46, 26, 94, .16);
    border-radius: 10px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--ink);
    background: rgba(255, 255, 255, .65);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 37px !important;
}
/* ---------- LOGIN ---------- */
#screen-login{min-height:100vh;display:grid;grid-template-columns:1.85fr 1.15fr;align-items:center;gap:0;padding:12px;}
@media (max-width:880px){ #screen-login{grid-template-columns:1fr;padding:20px;} #login-hero{display:none;} }

#login-hero{
  position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.70), rgba(255,255,255,.40));
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  color:var(--ink);
  padding:48px 52px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:560px;margin-right:28px;
}
.cke_notifications_area {display:none;}
.action-btn{display:flex;gap:3px}
.ring-deco{position:absolute;border-radius:50%;border:1.5px solid rgba(106,75,181,.25);}
.ring-deco.r1{width:520px;height:520px;right:-200px;top:-160px;}
.ring-deco.r2{width:340px;height:340px;right:-60px;top:40px;border-color:rgba(245,179,0,.28);}
.ring-deco.r3{width:220px;height:220px;left:-100px;bottom:-80px;border-color:rgba(106,75,181,.16);}

.lockup{display:flex;align-items:center;gap:10px;position:relative;z-index:1;}
.lockup svg{flex:none;}
.lockup-word{font-weight:800;font-size:22px;letter-spacing:.2px;color:var(--purple-700);}
.lockup-word b{color:var(--gold-600);font-weight:800;}

.hero-copy{position:relative;z-index:1;max-width:30ch;margin-top:40px;}
.hero-copy h1{font-size:clamp(26px,3vw,36px);line-height:1.18;font-weight:800;margin:0 0 14px;color:var(--ink);}
.hero-copy p{color:var(--ink-soft);font-size:15px;line-height:1.6;margin:0;max-width:36ch;}

.ledger{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(46,26,94,.14);padding-top:22px;}
.ledger div{padding-right:16px;}
.ledger .n{font-size:26px;font-weight:800;color:var(--ink);}
.ledger .n small{font-size:13px;font-weight:700;color:var(--gold-600);margin-left:2px;}
.ledger .l{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}


#screen-login.screen-auth{
  align-items:stretch;
  min-height:100vh;
  max-width:1500px;
  margin:0 auto;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
}
 
.screen-auth #login-form-wrap{align-items:stretch;padding:0;}
 
.screen-auth .form-card,
.screen-auth .partner-form-card{
  max-width:none;
  display:flex;flex-direction:column;justify-content:center;
  padding:28px 32px;
}
 
/* hero: same sizing on both screens */
.screen-auth #login-hero{min-height:0;padding:36px 40px;}
.screen-signin #login-hero{margin:0 28px 0 0;}
.screen-signup #login-hero{margin:0 0 0 28px;}
.screen-auth .hero-copy{max-width:none;margin-top:24px;}
.screen-auth .hero-copy h1{font-size:clamp(24px,2.3vw,32px);}
.screen-auth .hero-copy p{max-width:42ch;font-size:14.5px;}
.screen-auth .hero-signin{margin:16px 0 0;font-size:14px;color:var(--ink-soft);}
.screen-auth #login-hero .helper-foot{margin-top:18px;padding-top:14px;text-align:left;font-size:12.5px;}
.screen-auth .ledger{padding-top:18px;}
 
.mobile-only{display:none;}
 
/* ---- tablet / mobile ---- */
@media (max-width:880px){
  #screen-login.screen-auth{grid-template-columns:1fr;padding:16px;}
  .screen-signin{align-items:center;}
  .screen-signin #login-form-wrap{align-items:center;}
  .screen-auth .form-card,
  .screen-auth .partner-form-card{padding:22px 18px;border-radius:18px;}
  .screen-signup .partner-form-card{justify-content:flex-start;}
  .screen-auth .form-card{max-width:460px;margin:0 auto;}
  .mobile-only{display:block;}
  .field input,.field select,.field textarea{font-size:16px;}  /* stops iOS zoom-on-focus */
}
@media (max-width:480px){
  #screen-login.screen-auth{padding:10px;}
  .screen-auth .form-card,
  .screen-auth .partner-form-card{padding:18px 14px;}
  .row-between{flex-wrap:wrap;gap:8px;}
}


#login-form-wrap{display:flex;align-items:center;justify-content:center;}
.form-card{
  width:100%;max-width:380px;
  background:var(--panel);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:36px 32px;
}
.form-card .lockup{display:none;}
@media (max-width:880px){ .form-card .lockup{display:flex;margin-bottom:28px;} }

.form-card h2{font-size:22px;font-weight:800;margin:0 0 6px;}
.form-card .sub{color:var(--ink-soft);font-size:14px;margin:0 0 24px;line-height:1.5;}

.partner-form-card{
    width: 100%;
    max-width: 758px;
    background: var(--panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 17px;
    box-shadow: var(--shadow);
    padding: 14px 30px;
}
.partner-form-card .lockup{display:none;}
@media (max-width:880px){ .partner-form-card .lockup{display:flex;margin-bottom:28px;} }

.partner-form-card h2{font-size:22px;font-weight:800;margin:0 0 6px;}
.partner-form-card .sub{color:var(--ink-soft);font-size:14px;margin:0 0 24px;line-height:1.5;}

.seg{display:flex;background:rgba(106,75,181,.12);border-radius:999px;padding:3px;margin-bottom:24px;}
.seg button{flex:1;border:0;background:transparent;padding:9px 0;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s;}
.seg button[aria-selected="true"]{background:var(--panel-strong);color:var(--purple-700);box-shadow:var(--shadow);}

.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%;padding:11px 13px;border:1px solid rgba(46,26,94,.16);border-radius:10px;
  font-size:14.5px;font-family:inherit;color:var(--ink);background:rgba(255,255,255,.65);
}
.field input:focus{border-color:var(--purple-500);background:rgba(255,255,255,.9);}

.row-between{display:flex;align-items:center;justify-content:space-between;margin:2px 0 20px;font-size:13px;}
.remember{display:flex;align-items:center;gap:7px;color:var(--ink-soft);}
.remember input{width:15px;height:15px;}
.link-gold{color:var(--purple-700);font-weight:700;text-decoration:none;}
.link-gold:hover{text-decoration:underline;}

.btn-primary{
  width:100%;padding:12px 0;border:0;border-radius:10px;background:var(--purple-700);
  color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .15s,transform .05s;
  box-shadow:0 6px 18px rgba(74,47,140,.28);
}
.filter-chip{
    width:100%;padding:5px 0;border:0;border-radius:10px;background:var(--purple-700);
  color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .15s,transform .05s;
  box-shadow:0 6px 18px rgba(74,47,140,.28);
}
.btn-primary:hover{background:var(--purple-500);}
.btn-primary:active{transform:translateY(1px);}

.otp-note{font-size:13px;color:var(--ink-soft);margin:14px 0;text-align:center;}
.helper-foot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(46,26,94,.12);font-size:12.5px;color:var(--ink-soft);text-align:center;line-height:1.6;}

.panehide{display:none;}

/* ---------- DASHBOARD ---------- */
#screen-dashboard{display:grid;grid-template-columns:252px 1fr;min-height:100vh;}

#sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border);
  box-shadow:4px 0 24px rgba(46,26,94,.04);
  color:var(--ink);
  padding:18px 14px;display:flex;flex-direction:column;gap:18px;
  position:sticky;top:0;height:100vh;overflow:auto;
}
#sidebar .lockup{padding:6px 8px 10px;}
.role-pill{
  display:inline-flex;align-items:center;gap:6px;background:var(--amber-bg);color:var(--gold-600);
  font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;margin:0 8px 4px;width:fit-content;
}
.role-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-500);}

nav.menu{display:flex;flex-direction:column;gap:2px;flex:1;}
.menu-group-label{font-size:10.5px;font-weight:700;color:var(--purple-500);text-transform:uppercase;letter-spacing:.06em;padding:14px 10px 6px;}
.menu a{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:var(--ink-soft);
  text-decoration:none;font-size:13.5px;font-weight:600;
}
.menu a svg{flex:none;opacity:.85;}
.menu a:hover{background:rgba(106,75,181,.10);color:var(--ink);}
.menu a.current{background:var(--gold-500);color:#2a1806;box-shadow:0 4px 14px rgba(245,179,0,.35);}
.menu a.current svg{opacity:1;}

#sidebar-foot{border-top:1px solid rgba(46,26,94,.12);padding-top:14px;font-size:11.5px;color:var(--ink-soft);}

#main{display:flex;flex-direction:column;min-height:100vh;}
#topbar{
  position:sticky;top:0;z-index:5;
  background:var(--panel);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
  padding:12px 24px;display:flex;align-items:center;gap:16px;
}
#page-title{font-size:16.5px;font-weight:800;margin:0;flex:none;}
#page-sub{font-size:12px;color:var(--ink-soft);margin-top:1px;}
.search-wrap{flex:1;max-width:360px;position:relative;}
.search-wrap input{
  width:100%;padding:8px 12px 8px 34px;border:1px solid rgba(46,26,94,.14);border-radius:10px;
  font-size:13.5px;background:rgba(255,255,255,.65);color:var(--ink);font-family:inherit;
}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5;}

.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.icon-btn{position:relative;width:34px;height:34px;border-radius:10px;border:1px solid rgba(46,26,94,.14);background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.icon-btn:hover{background:rgba(255,255,255,.9);}
.badge-dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--gold-500);border:1.5px solid #fff;}

.preview-select{
  font-size:12.5px;font-weight:700;color:var(--purple-700);background:rgba(106,75,181,.14);
  border:1px solid rgba(46,26,94,.10);border-radius:10px;padding:8px 10px;cursor:pointer;font-family:inherit;
}

.profile-btn{display:flex;align-items:center;gap:8px;border:1px solid rgba(46,26,94,.14);background:rgba(255,255,255,.6);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;text-decoration:none;}
.profile-btn:hover{background:rgba(255,255,255,.9);}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--purple-700);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.profile-btn .who{text-align:left;}
.profile-btn .who .name{font-size:12.5px;font-weight:700;line-height:1.2;}
.profile-btn .who .role{font-size:10.5px;color:var(--ink-soft);}

#content{padding:24px;flex:1;}
.content-grid{display:grid;gap:16px;}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.stat-card{
  background:var(--panel);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);
}
.stat-card .l{font-size:12px;color:var(--ink-soft);font-weight:600;margin-bottom:8px;}
.stat-card .v{font-size:24px;font-weight:800;}
.stat-card .v small{font-size:12px;font-weight:700;margin-left:4px;}
.up{color:var(--green);} .down{color:var(--red);}

.panel{
  background:var(--panel);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(46,26,94,.10);}
.panel-head h3{font-size:14px;font-weight:800;margin:0;}
.panel-head .link-gold{font-size:12.5px;}

table.datatable{width:100%;border-collapse:collapse;font-size:13px;}
table.datatable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:10px 18px;border-bottom:1px solid rgba(46,26,94,.10);font-weight:700;}
table.datatable td{padding:11px 18px;border-bottom:1px solid rgba(46,26,94,.08);}
table.datatable tr:last-child td{border-bottom:0;}
.status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;}
.status.ok{background:var(--green-bg);color:var(--green);}
.status.pending{background:var(--amber-bg);color:var(--gold-600);}
.status.no{background:var(--red-bg);color:var(--red);}
.modal-backdrop{position:fixed;inset:0;background:rgba(26,18,48,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal-box{background:var(--panel-strong);backdrop-filter:var(--glass-blur);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:560px;max-height:85vh;overflow:auto;}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;}
@media (max-width:1000px){ .two-col{grid-template-columns:1fr;} #screen-dashboard{grid-template-columns:1fr;} #sidebar{position:relative;height:auto;} }

.bars{display:flex;align-items:flex-end;gap:8px;height:110px;padding:16px 18px 0;}
.bars .bar{flex:1;background:rgba(106,75,181,.35);border-radius:4px 4px 0 0;position:relative;}
.bars .bar.now{background:var(--gold-500);}
.bars .bar span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--ink-soft);}

.quicklist{padding:6px 8px;}
.quicklist a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;}
.quicklist a:hover{background:rgba(106,75,181,.10);}
.quicklist svg{opacity:.6;flex:none;}
.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 12px !important;
    margin-left: 8px !important;
    padding: 0;
    max-width: 100%;
    resize: none;
    height: 18px;
    vertical-align: bottom;
    font-family: sans-serif;
    overflow: hidden;
    word-break: keep-all;
}
@media (max-width:640px){
  #topbar{flex-wrap:wrap;} .search-wrap{order:3;max-width:none;flex:1 1 100%;}
  #content{padding:16px;}
}