/* Root version of portal CSS (migrated) */
:root{--bg:#0b0f14;--bg-2:#0f1620;--card:#121824;--muted:#9fb3c8;--text:#e6edf3;--primary:#00e5ff;--accent:#7df9ff;--danger:#ff5860;--ok:#33d17a;--border:rgba(255,255,255,0.08)}
*{box-sizing:border-box}html,body{height:100%;width:100%}body{margin:0;font-family:Inter,Segoe UI,Arial,system-ui;color:var(--text);background:radial-gradient(1200px 800px at 20% -10%,#12202e 0%,rgba(18,32,46,0) 60%),radial-gradient(1000px 1000px at 120% 20%,#13202c 0%,rgba(19,32,44,0) 60%),linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);overflow-x:hidden;min-height:100vh;position:relative}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2}
body::before{background:radial-gradient(circle at 15% 20%,rgba(0,229,255,0.18),transparent 60%),radial-gradient(circle at 85% 70%,rgba(255,88,96,0.18),transparent 65%),radial-gradient(circle at 70% 25%,rgba(125,249,255,0.14),transparent 55%);animation:auroraMove 26s linear infinite alternate;filter:blur(40px)}
body::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,0.035) 0 1px,transparent 1px 140px),repeating-linear-gradient(0deg,rgba(255,255,255,0.035) 0 1px,transparent 1px 140px);background-size:260px 260px,260px 260px;mix-blend-mode:overlay;opacity:.23;animation:gridDrift 42s linear infinite}
@keyframes auroraMove{0%{transform:translate3d(0,0,0) scale(1);filter:blur(42px) hue-rotate(0deg)}50%{transform:translate3d(-4%,2%,0) scale(1.05);filter:blur(52px) hue-rotate(40deg)}100%{transform:translate3d(3%,-3%,0) scale(1.02);filter:blur(42px) hue-rotate(90deg)}}
@keyframes gridDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-130px,-90px,0)}100%{transform:translate3d(0,0,0)}}

/* Enhanced responsive container with better centering */
.container{max-width:980px;margin:0 auto;padding:24px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}

/* Responsive breakpoints for container */
@media(max-width:1024px){.container{max-width:100%;padding:20px}}
@media(max-width:768px){.container{padding:16px;max-width:100%}}
@media(max-width:480px){.container{padding:12px}}

/* Enhanced header with better centering */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;width:100%;max-width:980px}
@media(max-width:600px){.header{flex-direction:column;gap:12px;text-align:center;justify-content:center}}
@media(max-width:480px){.header{gap:8px}}
/* Sub panel specific header responsiveness to avoid brand / logout overlap */
.sub-panel-centered .header{flex-wrap:wrap}
@media(max-width:680px){
  .sub-panel-centered .header{flex-direction:column;align-items:center;gap:14px}
  .sub-panel-centered .header .brand{width:100%;text-align:center}
  .sub-panel-centered .header .header-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
  .sub-panel-centered .header .header-actions a.btn{flex:1 1 140px;min-width:130px;max-width:240px}
}
@media(max-width:420px){
  .sub-panel-centered .header .header-actions a.btn{flex:1 1 100%;max-width:100%}
  .sub-panel-centered .header .brand{font-size:18px}
}

.brand{font-weight:700;letter-spacing:.5px;text-align:center}
@media(max-width:480px){.brand{font-size:18px}}

.badge{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,0.03);color:var(--muted);font-size:12px;white-space:nowrap}
@media(max-width:480px){.badge{font-size:11px;padding:5px 8px}}

/* Enhanced card with better centering and responsiveness */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(8px);width:100%;max-width:980px;box-sizing:border-box;margin:0 auto}
@media(max-width:768px){.card{padding:20px;border-radius:12px}}
@media(max-width:480px){.card{padding:16px;border-radius:8px}}

/* Enhanced grid system */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
@media(max-width:480px){.grid{gap:12px}}
.btn{appearance:none;border:1px solid var(--border);color:#ffffff;background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .14s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,0.55)}
.btn:before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.25),rgba(255,255,255,0));transition:opacity .35s ease;pointer-events:none}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.2)}
.btn:hover:before{opacity:1}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-primary{border-color:rgba(0,229,255,0.55);background:linear-gradient(135deg,#00e5ff 0%,#009bb0 100%);color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,0.55)}
.btn-primary:hover{border-color:rgba(125,249,255,0.9);background:linear-gradient(135deg,#2ff1ff 0%,#00b9d1 100%);box-shadow:0 4px 18px -4px rgba(0,229,255,0.55),0 0 0 1px rgba(255,255,255,0.08) inset;color:#ffffff}
.btn-primary:active{box-shadow:0 2px 8px -2px rgba(0,229,255,0.45)}
.btn-danger{border-color:rgba(255,88,96,0.55);background:linear-gradient(135deg,#ff5860 0%,#c41e25 100%);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.55)}
.btn-danger:hover{border-color:rgba(255,138,146,0.9);background:linear-gradient(135deg,#ff6b73 0%,#d6232b 100%);box-shadow:0 4px 18px -4px rgba(255,88,96,0.6),0 0 0 1px rgba(255,255,255,0.07) inset;color:#ffffff}
.btn-danger:active{box-shadow:0 2px 8px -2px rgba(255,88,96,0.5)}
.btn-future{position:relative;--glowA:rgba(0,229,255,0.5);--glowB:rgba(125,249,255,0.35);background:linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));backdrop-filter:blur(5px);box-shadow:0 0 0 1px rgba(255,255,255,0.05),0 0 0 3px rgba(255,255,255,0.02),0 0 14px -4px var(--glowA),0 0 32px -10px var(--glowB);transition:box-shadow .5s ease,transform .4s ease}
.btn-future:after{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:radial-gradient(circle at 28% 22%,var(--glowA),transparent 60%);opacity:.4;filter:blur(14px);transition:opacity .55s ease,transform .55s ease}
.btn-future:hover{box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 0 0 3px rgba(255,255,255,0.04),0 0 18px -2px var(--glowA),0 0 46px -8px var(--glowB)}
.btn-future:hover:after{opacity:.75;transform:scale(1.18)}
.btn-future:active{box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 0 0 3px rgba(255,255,255,0.05),0 0 12px -2px var(--glowA),0 0 26px -6px var(--glowB)}
.btn-future.btn-primary,.btn-future.btn-danger{animation:edgePulse 5s linear infinite}
@keyframes edgePulse{0%,65%,100%{filter:brightness(1)}35%{filter:brightness(1.25)}}

/* Inline request + cleanup alignment (sub panel) */
.inline-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:4px}
.inline-actions form{background:rgba(255,255,255,0.015);padding:14px 16px;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:240px;position:relative;overflow:hidden}
.inline-actions form:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,229,255,0.12),rgba(0,229,255,0),rgba(125,249,255,0.12));opacity:.18;pointer-events:none}
.inline-actions .button-row{display:flex;gap:10px;flex-wrap:wrap}
.inline-actions .button-row .btn{flex:1;min-width:120px}
@media(max-width:620px){
  .inline-actions{flex-direction:column;align-items:stretch}
  .inline-actions .button-row{flex-direction:row}
  .inline-actions form{min-width:100%}
}

/* Subtle card glow accent */
.card{position:relative}
.card:after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(140deg,rgba(0,229,255,0.08),rgba(125,249,255,0.03) 38%,rgba(255,255,255,0) 72%);opacity:.55;mix-blend-mode:overlay;pointer-events:none;transition:opacity .5s ease}
.card:hover:after{opacity:.85}

/* Status colorization (assuming status now 3rd column) */
td:nth-child(3)[data-status=pending]{color:#ffc542}
td:nth-child(3)[data-status=active]{color:var(--ok)}
td:nth-child(3)[data-status=revoked]{color:var(--danger)}
td:nth-child(3)[data-status=denied]{color:#ff858a}
td.copy-cell{cursor:pointer;position:relative}
td.copy-cell:hover code{background:linear-gradient(90deg,rgba(0,229,255,0.25),rgba(125,249,255,0.12))}
/* Uppercase rendering for requested statuses */
td[data-status=active],
td[data-status=denied]{
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:600;
}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,0.02);color:var(--text)}.label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}

/* Responsive table */
.table{width:100%;border-collapse:collapse;overflow-x:auto;display:block;white-space:nowrap}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
@media(max-width:768px){
  .table th,.table td{padding:8px;font-size:13px}
}
@media(max-width:480px){
  .table{font-size:12px}
  .table th,.table td{padding:6px;font-size:12px}
}

#bg-canvas{position:fixed;inset:0;z-index:-1}

/* Enhanced responsive notice */
.notice{padding:10px 12px;border:1px dashed rgba(0,229,255,0.4);border-radius:10px;color:var(--accent);font-size:14px;background:rgba(0,229,255,0.06);word-wrap:break-word;overflow-wrap:break-word}
@media(max-width:480px){
  .notice{padding:8px 10px;font-size:13px;border-radius:8px}
}

.footer{margin-top:20px;color:var(--muted);font-size:12px;text-align:center;width:100%}

/* Additional responsive typography */
h1, h2, h3, h4, h5, h6{margin-top:0;margin-bottom:16px;line-height:1.4}
@media(max-width:768px){
  h1{font-size:24px}
  h2{font-size:20px}
  h3{font-size:18px}
}
@media(max-width:480px){
  h1{font-size:22px}
  h2{font-size:18px}
  h3{font-size:16px}
}

p{margin:0 0 16px 0;line-height:1.6}
@media(max-width:480px){
  p{margin:0 0 12px 0;line-height:1.5}
}

/* Responsive code elements */
code{padding:2px 4px;border-radius:4px;background:rgba(255,255,255,0.1);color:var(--accent);font-size:0.9em;word-wrap:break-word}
code[role=button]{cursor:pointer;position:relative;outline:none}
code[role=button]:focus{box-shadow:0 0 0 2px rgba(0,229,255,0.6),0 0 0 4px rgba(0,229,255,0.15)}
code[role=button]::after{content:'Copy';position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%) scale(.85);background:rgba(0,229,255,0.15);color:var(--accent);padding:2px 6px;border-radius:6px;font-size:10px;letter-spacing:.5px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
code[role=button]:hover::after,code[role=button]:focus::after{opacity:1;transform:translate(-50%,-100%) scale(1)}
@media(max-width:480px){
  code{font-size:0.85em;padding:1px 3px}
}

/* Large screen optimizations */
@media(min-width:1200px){
  .container{padding:32px}
  .card{padding:32px}
}

/* Extra small screens */
@media(max-width:320px){
  .container{padding:8px}
  .card{padding:12px;border-radius:6px}
  .header{margin-bottom:12px}
  .duo-row{margin:8px 0 12px}
}

/* ================= Futuristic Loader Overlay ================= */
.page-loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,rgba(0,0,0,0.6),rgba(0,0,0,0.85));backdrop-filter:blur(8px);z-index:100000;transition:opacity .45s ease, visibility .45s ease;opacity:1;visibility:visible}
.page-loader.hide{opacity:0;visibility:hidden}
.loader-wrap{position:relative;display:grid;place-items:center}
.loader-wrap.tracker{width:min(560px,90vw);gap:18px;padding:28px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,0.05) inset}
.loader-brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.loader-title{font-weight:800;letter-spacing:1.2px;font-size:22px;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 14px rgba(0,229,255,0.25)}
.loader-bar{position:relative;width:100%;height:10px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;border:1px solid rgba(255,255,255,0.12)}
.loader-bar .fill{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 0 18px rgba(0,229,255,0.35);animation:bar-progress 1.8s ease-in-out infinite}
@keyframes bar-progress{0%{transform:translateX(-10%) scaleX(.25)}50%{transform:translateX(55%) scaleX(.85)}100%{transform:translateX(210%) scaleX(.25)}}
/* Brand + subtle animation for tracker variant */
.loader-brand .loader-logo{height:64px;width:auto;border-radius:12px;filter:drop-shadow(0 0 10px rgba(0,229,255,0.35));animation:pulse 1.6s ease-in-out infinite}
@media(max-width:420px){.loader-brand .loader-logo{height:52px}.loader-title{font-size:18px}}
@keyframes pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(0,229,255,0.35))}50%{transform:scale(1.05);filter:drop-shadow(0 0 18px rgba(0,229,255,0.55))}}

/* ================= Post-load Tigroo Logo Animation ================= */
.royal-logo{opacity:0;transform:translateY(8px) scale(.98)}
.royal-logo.logo-in{animation:logoIn 650ms cubic-bezier(.2,.9,.25,1) both}
.logo-finish-anim{animation:logoPop 850ms cubic-bezier(.2,.9,.25,1) 80ms both}
@keyframes logoIn{0%{opacity:0;transform:translateY(8px) scale(.98);filter:drop-shadow(0 0 0 rgba(255,210,40,0))}60%{opacity:1;transform:translateY(-2px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes logoPop{0%{transform:scale(.86) rotate(-2deg);filter:drop-shadow(0 0 0 rgba(255,210,40,0))}50%{transform:scale(1.07) rotate(1.5deg);filter:drop-shadow(0 0 22px rgba(255,210,40,0.55))}100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 12px rgba(255,210,40,0.35))}}

/* Enhanced WinGo-style responsive button design */
a.btn-duo,button.btn-duo{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:25px;font-size:15px;font-weight:600;
  border:none;
  background:linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color:#ffffff;text-decoration:none;cursor:pointer;
  box-shadow:0 4px 15px rgba(255,107,53,0.4);
  transition:all .3s ease;
  text-shadow:0 1px 2px rgba(0,0,0,0.55);
  letter-spacing:0.5px;
  min-width:140px;
  text-align:center;
}

/* Responsive button adjustments */
@media(max-width:768px){
  a.btn-duo,button.btn-duo{
    padding:12px 24px;
    font-size:14px;
    min-width:120px;
  }
}

@media(max-width:480px){
  a.btn-duo,button.btn-duo{
    padding:12px 20px;
    font-size:14px;
    width:100%;
    max-width:280px;
    min-width:auto;
  }
}

a.btn-duo:hover,button.btn-duo:hover{
  background:linear-gradient(135deg, #ff7b45 0%, #ff9e2e 100%);
  box-shadow:0 6px 20px rgba(255,107,53,0.6);
  transform:translateY(-2px);
  color:#ffffff;
}
a.btn-duo:active,button.btn-duo:active{
  transform:translateY(0px);
  box-shadow:0 2px 10px rgba(255,107,53,0.4);
}
.btn-duo.alt{
  background:linear-gradient(135deg, #00e5ff 0%, #7df9ff 100%);
  color:#ffffff;
  box-shadow:0 4px 15px rgba(0,229,255,0.4);
  text-shadow:0 1px 2px rgba(0,0,0,0.55);
}
.btn-duo.alt:hover{
  background:linear-gradient(135deg, #1aebff 0%, #8dffff 100%);
  box-shadow:0 6px 20px rgba(0,229,255,0.6);
  color:#ffffff;
}
a.btn-duo, a.btn-duo:visited{text-decoration:none;}
a.btn, a.btn-duo{text-decoration:none;color:#ffffff}

/* Force all button variants to white text */
.btn,.btn-primary,.btn-danger,a.btn,a.btn-primary,a.btn-danger,a.btn-duo,button.btn-duo,.btn-duo.alt{color:#ffffff !important}

/* Responsive duo-row container */
.duo-row{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 16px;width:100%}
@media(max-width:600px){
  .duo-row{flex-direction:column;gap:12px;align-items:stretch}
}
@media(max-width:480px){
  .duo-row{gap:10px}
}

/* ================= Toast / Notification System ================ */
.toast-container{position:fixed;top:12px;left:14px;display:flex;flex-direction:column;gap:12px;z-index:9999;width:min(420px,92%);pointer-events:none;align-items:flex-start}
.toast{--accent:var(--primary);position:relative;padding:14px 16px 14px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);box-shadow:0 8px 28px -6px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.05) inset;display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.4;color:var(--text);overflow:hidden;animation:toast-drop .55s cubic-bezier(.22,.85,.44,1.12);pointer-events:auto}
.toast:before{content:"";position:absolute;inset:0;mask:linear-gradient(180deg,rgba(0,0,0,0.4),rgba(0,0,0,0));background:radial-gradient(circle at 30% 0%,rgba(255,255,255,0.18),rgba(255,255,255,0));pointer-events:none}
.toast:after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),transparent);opacity:.9}
.toast.success{--accent:var(--ok)}
.toast.error{--accent:var(--danger)}
.toast.warn{--accent:#ffc542}
.toast.info{--accent:var(--primary)}
.toast .toast-icon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background:linear-gradient(135deg,var(--accent),rgba(0,0,0,0.4));color:#021014;box-shadow:0 2px 6px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.15)}
.toast .toast-body{flex:1;display:flex;flex-direction:column;gap:4px}
.toast .toast-title{font-weight:600;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--accent)}
.toast .toast-msg{word-wrap:break-word;overflow-wrap:break-word}
.toast .toast-close{position:absolute;top:6px;right:6px;border:none;background:rgba(255,255,255,0.08);color:var(--text);width:26px;height:26px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;transition:background .2s ease,transform .25s ease}
.toast .toast-close:hover{background:rgba(255,255,255,0.15);transform:rotate(20deg)}
.toast-progress{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--accent),rgba(255,255,255,0));width:100%;transform-origin:left;animation:toast-progress linear forwards}
.toast-exit{animation:toast-exit .45s cubic-bezier(.55,.02,.41,1) forwards}
@keyframes toast-drop{0%{opacity:0;transform:translate(-40px,-20px) scale(.9);filter:blur(4px)}60%{opacity:1;filter:blur(0)}100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes toast-exit{0%{opacity:1;transform:translateY(0) scale(1)}30%{opacity:.9;transform:translateY(-4px) scale(.98)}100%{opacity:0;transform:translateY(-40px) scale(.9)}}
@keyframes toast-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ================= Center Popup Modal (Permissions / Alerts) ================ */
.popup-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,rgba(0,229,255,0.12),rgba(0,17,25,0.85)),linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.85));backdrop-filter:blur(14px);z-index:10000;opacity:0;transition:opacity .35s ease}
.popup-overlay.visible{display:flex;opacity:1}
.popup-overlay.closing{opacity:0;transition:opacity .25s ease}
.popup-modal{width:min(480px,92%);border:1px solid rgba(255,255,255,0.12);border-radius:22px;position:relative;overflow:hidden;padding:0;background:linear-gradient(150deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));box-shadow:0 14px 46px -8px rgba(0,0,0,0.65),0 0 0 1px rgba(255,255,255,0.06) inset,0 0 0 3px rgba(255,255,255,0.02)}
.popup-modal:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(0,229,255,0.2),transparent 60%);opacity:.5;mix-blend-mode:overlay;pointer-events:none}
.popup-modal.enter{animation:popupEnter .55s cubic-bezier(.22,.85,.44,1.12)}
.popup-content{position:relative;padding:28px 28px 24px 28px;display:flex;flex-direction:column;gap:18px}
.popup-content h3{margin:0;font-size:20px;letter-spacing:.5px;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.popup-body{font-size:14px;line-height:1.55;color:var(--text);max-height:240px;overflow:auto;padding-right:4px}
.popup-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.popup-actions .btn{min-width:120px}
@media(max-width:540px){
  .popup-content{padding:22px 20px 20px 20px}
  .popup-actions .btn{flex:1;min-width:0}
  .popup-content h3{font-size:18px}
}
@keyframes popupEnter{0%{opacity:0;transform:translate3d(0,28px,0) scale(.94);filter:blur(6px)}60%{filter:blur(0)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}

/* Locked (non-dismissible) state */
.popup-overlay.locked{cursor:default}
.popup-overlay.locked .popup-modal{box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 0 0 4px rgba(255,255,255,0.04),0 16px 54px -10px rgba(0,0,0,0.75)}

/* Scrollbar aesthetic inside body */
.popup-body::-webkit-scrollbar{width:8px}
.popup-body::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);border-radius:8px}
.popup-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--accent));border-radius:8px}

@media (prefers-reduced-motion:reduce){
  .toast,.toast-exit{animation:none}
  .toast-progress{display:none}
}

/* ================= Codes heading + search inline responsiveness ================ */
.codes-head{width:100%}
.codes-head h3{flex:0 0 auto}
.codes-head .search-form{flex:1 1 auto;display:flex;justify-content:flex-end}
@media(max-width:640px){
  .codes-head{flex-wrap:wrap}
  .codes-head h3{margin-bottom:8px}
  .codes-head .search-form{justify-content:flex-start}
}
@media(max-width:420px){
  .codes-head .search-form{width:100%;padding-top:4px}
  .codes-head .search-form .input{flex:1}
}

/* ================= Auth (Login) Futuristic Styling ================= */
body.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0}
.auth-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding-top:40px;padding-bottom:40px}
.auth-header{margin-bottom:12px;justify-content:center}
.auth-card{position:relative;overflow:hidden}
.auth-card:before,.auth-card:after{content:"";position:absolute;inset:0;pointer-events:none}
.auth-card:before{background:radial-gradient(circle at 20% 18%,rgba(0,229,255,0.18),transparent 70%);opacity:.6;mix-blend-mode:overlay}
.auth-card:after{background:linear-gradient(140deg,rgba(255,255,255,0.07),rgba(255,255,255,0));opacity:.35}
.auth-brand{font-size:18px;font-weight:600;letter-spacing:.75px;text-align:center;margin:0 0 10px 0;color:var(--text);opacity:.9}
.auth-title{margin:0 0 6px 0;font-size:26px;letter-spacing:.6px;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 18px rgba(0,229,255,0.25);text-align:center}
@media(max-width:480px){.auth-title{font-size:22px}}
.auth-tagline{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:18px;opacity:.85;text-align:center}
.auth-error{margin:0 0 14px 0;color:var(--danger);font-size:14px;padding:10px 12px;border:1px solid rgba(255,88,96,0.4);border-radius:10px;background:linear-gradient(135deg,rgba(255,88,96,0.15),rgba(255,88,96,0.05))}
.auth-form{display:flex;flex-direction:column;gap:18px}
.auth-form .field-group{display:flex;flex-direction:column;gap:6px;position:relative}
.auth-form .input{transition:border-color .35s ease,background .35s ease,box-shadow .4s ease}
.auth-form .input:focus{border-color:var(--primary);background:rgba(0,229,255,0.08);box-shadow:0 0 0 1px rgba(0,229,255,0.45),0 0 0 4px rgba(0,229,255,0.08)}
.auth-submit{width:100%;margin-top:4px;font-weight:600;letter-spacing:.5px}
@media(max-width:520px){
  .auth-card{padding:24px 22px}
  .auth-form{gap:16px}
  .auth-submit{padding:12px 14px}
}
@media(max-width:380px){
  .auth-card{padding:20px 18px}
  .auth-title{font-size:20px}
  .auth-form{gap:14px}
}

/* ================= Master Panel Responsive Enhancements ================= */
.master-panel .master-header{flex-wrap:wrap;align-items:center;gap:16px}
.master-panel .master-header .brand{flex:1 1 auto}
.master-panel .master-header .header-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.master-panel .master-header .header-actions form.master-search{flex:1 1 260px;min-width:240px}
.btn-resize{min-width:120px}
@media(max-width:860px){
  .master-panel .master-header{flex-direction:column;align-items:center;text-align:center}
  .master-panel .master-header .brand{width:100%}
  .master-panel .master-header .header-actions{justify-content:center;width:100%}
  .master-panel .master-header .header-actions form.master-search{order:1;width:100%}
  .master-panel .master-header .header-actions a.btn{flex:1 1 140px}
}
@media(max-width:520px){
  .master-panel .master-header .header-actions a.btn{flex:1 1 100%;min-width:0}
  .master-panel .master-header .header-actions form.master-search{margin-right:0}
}
.master-grid{align-items:start}
.stack-form{display:flex;flex-direction:column;gap:10px}
.stack-form .button-row{display:flex;gap:10px}
.table-scroll{overflow:auto;max-width:100%}
.table-scroll table{min-width:680px}
@media(max-width:600px){
  .table-scroll table{min-width:600px}
}
@media(max-width:480px){
  .table-scroll table{min-width:560px}
}