/* Shared site stylesheet for Royal Panel */
:root{
  --bg: #080b12;
  --page-bg: radial-gradient(1200px 700px at 12% -10%, #1b2140 0%, transparent 55%), radial-gradient(900px 600px at 100% 0%, #241a35 0%, transparent 50%), linear-gradient(160deg,#05070d 0%, #080b14 45%, #0a0d16 100%);
  --fg: #eef2fb;
  --card: #10131e;
  --card-2: #141827;
  --muted: #97a2b8;
  --accent: #7c8cff;
  --accent-2: #5865F2;
  --gold: #ffcb63;
  --gold-2: #f0a93e;
  --success: #3ddc84;
  --danger: #ff5d6c;
  --warning: #ffb84d;
  --border: rgba(255,255,255,0.07);
  --glass: rgba(255,255,255,0.035);
  --radius: 14px;
  --radius-sm: 9px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow-soft: 0 10px 30px rgba(2,4,12,0.45);
  --shadow-lift: 0 16px 40px rgba(2,4,12,0.55);
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; scroll-behavior:smooth; }
img,video,iframe{max-width:100%;height:auto}
input,textarea,select,button{font-size:15px;font-family:inherit}
html,body{height:100%;}
body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  margin:0;padding:18px;
  background:var(--page-bg);
  background-attachment:fixed;
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  animation:pageFadeIn .45s var(--ease);
}
::selection{ background:rgba(124,140,255,0.35); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border-radius:20px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.22); background-clip:padding-box; }

@keyframes pageFadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes toastIn{ from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes pulseRing{ 0%{box-shadow:0 0 0 0 rgba(124,140,255,0.45)} 100%{box-shadow:0 0 0 12px rgba(124,140,255,0)} }

.container, .wrap{max-width:1120px;margin:24px auto;padding:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:18px}
.brandLogo{display:flex;align-items:center;gap:12px}
.brandLogo img{width:48px;height:48px;border-radius:12px;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,0.4)}
.brandLogo strong{font-size:18px;letter-spacing:.2px}
.hamburger{appearance:none;border:1px solid var(--border);background:var(--glass);color:var(--fg);padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .18s var(--ease), transform .12s var(--ease)}
.hamburger:hover{background:rgba(255,255,255,0.07)}
.hamburger:active{transform:scale(.94)}
.sideMenu{position:fixed;left:0;top:0;height:100vh;width:260px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005) 40%, transparent);backdrop-filter:blur(6px);padding:18px;border-right:1px solid var(--border);transform:translateX(-110%);transition:transform .28s var(--ease);z-index:999}
.sideMenu.open{transform:translateX(0)}
.sideMenu h4{margin-top:0;margin-bottom:12px}
.sideItem{margin-bottom:10px}
#mainContent{transition:margin-left .28s var(--ease)}
main.withSide{margin-left:280px}

.hero{display:flex;gap:18px;align-items:center;padding:22px;border-radius:var(--radius);background:linear-gradient(120deg, rgba(124,140,255,0.10), rgba(255,203,99,0.05));border:1px solid var(--border);box-shadow:var(--shadow-soft);animation:fadeInUp .5s var(--ease)}
.hero .big-logo{width:84px;height:84px;border-radius:14px;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,0.45)}

.grid{display:grid;gap:14px}
.grid.columns-2{grid-template-columns:2fr 1fr}

.card{
  background:linear-gradient(180deg, var(--card-2), var(--card));
  padding:16px;border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  animation:fadeInUp .45s var(--ease) both;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:rgba(124,140,255,0.25); }
.card .muted{color:var(--muted)}
.stat-bars{display:flex;gap:12px}
.bar{flex:1;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border)}

/* Buttons — smoother, more capable (hover/press/loading/disabled states) */
.btn, button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;font-weight:600;letter-spacing:.1px;
  background:var(--glass);color:var(--fg);
  border-color:var(--border);
  transition:transform .14s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
  position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; user-select:none;
}
.btn:hover, button:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,0.35); }
.btn:active, button:active{ transform:translateY(0) scale(.97); box-shadow:none; }
.btn:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn:disabled, button:disabled, .btn.is-loading, button.is-loading{ opacity:.55; cursor:not-allowed; pointer-events:none; transform:none; }
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 10px 26px rgba(88,101,242,0.28);border-color:transparent}
.btn-primary:hover{ box-shadow:0 12px 30px rgba(88,101,242,0.4); }
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1204;box-shadow:0 10px 26px rgba(240,169,62,0.25);border-color:transparent}
.btn-danger{background:linear-gradient(135deg,#ff6b78,var(--danger));color:#fff;box-shadow:0 10px 26px rgba(255,93,108,0.25);border-color:transparent}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--fg)}
.btn-ghost:hover{background:rgba(255,255,255,0.05)}
.btn-outline{background:transparent;border:1px solid rgba(124,140,255,0.35);color:var(--accent)}
.btn-outline:hover{background:rgba(124,140,255,0.08)}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);animation:rippleAnim .55s var(--ease);background:rgba(255,255,255,0.35);pointer-events:none}
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }
.btn-spinner, .btn.is-loading::after{
  content:""; width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.35); border-top-color:#fff;
  animation:spin .6s linear infinite; flex:none;
}

.thumb{width:100%;height:160px;object-fit:cover;border-radius:var(--radius-sm);background:rgba(255,255,255,0.02);margin-bottom:10px;transition:transform .3s var(--ease)}
.product-card:hover .thumb{ transform:scale(1.02); }
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.product-card{display:flex;flex-direction:column}
.product-title{font-weight:700}
.product-price{color:var(--gold);font-weight:700}

.form-row{display:flex;gap:8px}
input,textarea,select{
  padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:rgba(255,255,255,0.02);color:var(--fg);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
input:hover,textarea:hover,select:hover{ border-color:rgba(255,255,255,0.14); }
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--accent); background:rgba(124,140,255,0.06);
  box-shadow:0 0 0 3px rgba(124,140,255,0.18);
}
.footer-note{font-size:13px;color:var(--muted);margin-top:8px}
.corner-widget{position:fixed;right:18px;bottom:18px;width:260px;padding:12px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(124,140,255,0.08),rgba(255,203,99,0.04));border:1px solid var(--border);box-shadow:var(--shadow-soft);z-index:999}

/* Shared toast + confirm system (used by ui.js, safe to reuse per-page too) */
.rt-toast-container{position:fixed;top:18px;right:18px;z-index:4000;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.rt-toast{pointer-events:auto;min-width:220px;max-width:360px;padding:12px 14px;border-radius:var(--radius-sm);background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--border);box-shadow:var(--shadow-lift);color:var(--fg);font-size:14px;font-weight:500;animation:toastIn .22s var(--ease)}
.rt-toast.success{border-color:rgba(61,220,132,0.4)}
.rt-toast.error{border-color:rgba(255,93,108,0.4)}
.rt-toast.info{border-color:rgba(124,140,255,0.4)}
.rt-loadbar{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--accent),var(--gold));z-index:5000;transition:width .25s var(--ease), opacity .3s var(--ease);box-shadow:0 0 12px rgba(124,140,255,0.6)}
.rt-confirm-backdrop{position:fixed;inset:0;background:rgba(4,6,12,0.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:4500;animation:toastIn .18s var(--ease)}
.rt-confirm-box{max-width:380px;width:calc(100% - 40px);background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lift);padding:20px}
.rt-confirm-box h3{margin:0 0 8px 0;font-size:16px}
.rt-confirm-box p{margin:0 0 16px 0;color:var(--muted);font-size:14px}
.rt-confirm-actions{display:flex;gap:10px;justify-content:flex-end}

@media (max-width:900px){ .hero{flex-direction:column;align-items:flex-start} .sideMenu{transform:translateX(-120%)} main.withSide{margin-left:0} }
/* small utilities */
.muted{color:var(--muted)}
.center{display:flex;align-items:center;justify-content:center}