/* NAVCODE Design System - Unified Modern UI */
:root {
  --font-sans: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Playwrite', serif;
  --color-bg-gradient: radial-gradient(circle at 20% 20%, #1f2747, #0e1324 65%) fixed;
  --color-surface: rgba(255,255,255,0.06);
  --color-surface-alt: rgba(255,255,255,0.10);
  --color-surface-hover: rgba(255,255,255,0.16);
  --color-border: rgba(255,255,255,0.18);
  --color-border-strong: rgba(255,255,255,0.35);
  --color-text-primary: #fff;
  --color-text-secondary: #b4b9c9;
  --color-accent: #5865f2;
  --color-accent-alt: #00e0fe;
  --color-danger: #ed4245;
  --color-warning: #ffc861;
  --color-success: #57f287;
  --glow-accent: 0 4px 18px -4px rgba(88,101,242,.6);
  --glow-danger: 0 4px 18px -4px rgba(237,66,69,.55);
  --transition-base: .6s cubic-bezier(.19,1,.22,1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --elev-1: 0 4px 12px -4px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.35);
  --elev-2: 0 12px 28px -10px rgba(0,0,0,.6),0 6px 16px -6px rgba(0,0,0,.55);
}

/* Light theme (opt-in) */
[data-theme='light'] {
  --color-bg-gradient: radial-gradient(circle at 20% 20%, #f5f7fb, #dce3ef 70%) fixed;
  --color-surface: rgba(0,0,0,0.04);
  --color-surface-alt: rgba(0,0,0,0.06);
  --color-surface-hover: rgba(0,0,0,0.10);
  --color-border: rgba(0,0,0,0.18);
  --color-border-strong: rgba(0,0,0,0.35);
  --color-text-primary: #101828;
  --color-text-secondary: #4b5565;
  --color-danger: #dc2626;
  --color-success: #15803d;
  --color-warning: #b45309;
}

/* Smooth theme transition */
html.theme-transition *, html.theme-transition *:before, html.theme-transition *:after { transition: background-color .55s ease, color .55s ease, border-color .55s ease; }

html,body { font-family: var(--font-sans); }

.ds-page-bg { background: var(--color-bg-gradient); min-height:100vh; }

.ds-grid { display:grid; gap:1.75rem; }

.ds-row { display:flex; flex-wrap:wrap; gap:1.25rem; }

.card-3d { position:relative; background:linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding:1.4rem 1.5rem 1.6rem; backdrop-filter:blur(28px) saturate(165%); -webkit-backdrop-filter:blur(28px) saturate(165%); box-shadow:var(--elev-1); transition:transform var(--transition-base), box-shadow .5s ease, border-color .5s ease; }
.card-3d:hover { transform:translateY(-10px) rotateX(6deg) rotateY(-4deg) scale(1.02); box-shadow:var(--elev-2); border-color:var(--color-border-strong); }
.card-3d:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 60%); opacity:.65; border-radius:inherit; mix-blend-mode:overlay; }

.card-title { font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color:var(--color-text-secondary); font-weight:600; margin-bottom:.55rem; }
.card-value { font-size:2.2rem; font-weight:700; background:linear-gradient(135deg,var(--color-accent), var(--color-accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.btn { --btn-bg: var(--color-accent); --btn-bg-hover:#4752c4; display:inline-flex; align-items:center; gap:.55rem; padding:.75rem 1.2rem; border:none; border-radius: var(--radius-sm); font-weight:600; font-size:.8rem; cursor:pointer; background:var(--btn-bg); color:#fff; position:relative; overflow:hidden; transition:filter .35s ease, transform .5s cubic-bezier(.19,1,.22,1), box-shadow .4s ease; text-decoration:none; }
.btn:hover { filter:brightness(1.07); transform:translateY(-4px); box-shadow:var(--glow-accent); }
.btn:active { transform:translateY(-1px); }
.btn-outline { background:rgba(255,255,255,0.08); border:1px solid var(--color-border); color:var(--color-text-secondary); }
.btn-outline:hover { background:var(--color-surface-hover); color:var(--color-text-primary); }
.btn-danger { --btn-bg: var(--color-danger); }
.btn-danger:hover { box-shadow:var(--glow-danger); }

.badge { display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(135deg,#5865f2,#00e0fe); color:#fff; padding:.45rem .85rem; font-size:.65rem; font-weight:600; border-radius:30px; letter-spacing:.5px; text-transform:uppercase; }

.surface { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.25rem 1.35rem 1.35rem; backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); position:relative; }
.surface:hover { border-color:var(--color-border-strong); }

.fade-in-up { opacity:0; transform:translateY(24px); animation:fadeUp .85s cubic-bezier(.22,.8,.32,1) forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

.scale-in { opacity:0; transform:scale(.94); animation:scaleIn .65s cubic-bezier(.22,.8,.32,1) forwards; }
@keyframes scaleIn { to { opacity:1; transform:scale(1); } }

.flex-between { display:flex; justify-content:space-between; align-items:center; }
.text-muted { color:var(--color-text-secondary); font-size:.75rem; letter-spacing:.3px; }
.separator { height:1px; background:linear-gradient(90deg, transparent, var(--color-border) 35%, var(--color-border) 65%, transparent); margin:1.25rem 0; }

.table { width:100%; border-collapse:collapse; font-size:.8rem; }
.table th, .table td { padding:.65rem .75rem; text-align:left; }
.table th { font-weight:600; font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; color:var(--color-text-secondary); }
.table tbody tr { background:var(--color-surface-alt); border-bottom:1px solid var(--color-border); transition:background .35s ease; }
.table tbody tr:hover { background:var(--color-surface-hover); }

.input { width:100%; padding:.7rem .85rem; border-radius: var(--radius-sm); background:rgba(255,255,255,0.08); border:1px solid var(--color-border); color:var(--color-text-primary); font-size:.8rem; transition:border-color .35s ease, background .35s ease; }
.input:focus { outline:none; border-color:var(--color-accent); background:rgba(255,255,255,0.12); box-shadow:0 0 0 3px rgba(88,101,242,.25); }

.tag { display:inline-flex; align-items:center; gap:.35rem; background:rgba(255,255,255,0.08); padding:.35rem .65rem; border-radius:30px; font-size:.55rem; letter-spacing:.4px; text-transform:uppercase; }
.tag.premium { background:linear-gradient(135deg,#d18cff,#8ab6ff); color:#111; }
.tag.warn { background:linear-gradient(135deg,#ffe761,#ffa361); color:#222; }
.tag.danger { background:linear-gradient(135deg,#ff8181,#ff4d4d); color:#111; }

/* Motion utilities */
.motion-pop { animation:pop .65s cubic-bezier(.22,.8,.32,1); }
@keyframes pop { 0%{transform:scale(.85); opacity:0;} 60%{transform:scale(1.03);} 100%{transform:scale(1); opacity:1;} }

/* Page transition fade */
.fade-page-enter { animation:fadePage .6s ease forwards; }
@keyframes fadePage { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} }

/* Intersection reveal utility */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); will-change:opacity,transform; }
.reveal.in-view { opacity:1; transform:none; }
.reveal.delay-1 { transition-delay:.1s; }
.reveal.delay-2 { transition-delay:.2s; }
.reveal.delay-3 { transition-delay:.3s; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,.scale-in,.reveal { animation:none!important; opacity:1!important; transform:none!important; transition:none!important; }
  html.theme-transition * { transition:none!important; }
}

/* Admin header (shared) */
.admin-shell-header { background:var(--color-surface-alt); backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%); border-bottom:1px solid var(--color-border); padding:0.85rem 1.6rem; display:flex; align-items:center; gap:1.25rem; }
.admin-shell-brand { font-size:1rem; font-weight:600; letter-spacing:.5px; background:linear-gradient(135deg,var(--color-accent),var(--color-accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; display:flex; align-items:center; gap:.55rem; }
.admin-shell-nav { display:flex; gap:.5rem; flex-wrap:wrap; }
.admin-shell-nav a { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; color:var(--color-text-secondary); padding:.55rem .85rem; border-radius: var(--radius-sm); background:var(--color-surface); border:1px solid var(--color-border); text-decoration:none; transition:background .4s ease, color .35s ease, border-color .4s ease; font-weight:600; }
.admin-shell-nav a.active, .admin-shell-nav a:hover { background:var(--color-surface-hover); color:var(--color-text-primary); border-color:var(--color-border-strong); }
.admin-shell-actions { margin-left:auto; display:flex; gap:.55rem; align-items:center; }
.theme-toggle { background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text-secondary); width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); cursor:pointer; transition:background .35s ease, border-color .35s ease, color .35s ease; }
.theme-toggle:hover { background:var(--color-surface-hover); color:var(--color-text-primary); border-color:var(--color-border-strong); }

/* Utility spacing */
.stack-sm { display:flex; flex-direction:column; gap:.65rem; }
.stack-md { display:flex; flex-direction:column; gap:1rem; }
.stack-lg { display:flex; flex-direction:column; gap:1.6rem; }

/* Containers */
.container-fluid { width:100%; padding:1.6rem 2rem; }

/* Scrollbar styling */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,0.35); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--color-accent), var(--color-accent-alt)); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { filter:brightness(1.1); }