/* ============================================================
   SEOnHOTnPORN - Luxury Dashboard Design System
   Playboy/Hustler Magazine Aesthetic
   Gold + Black + Deep Red | Retro OG meets Modern
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg-primary); color:var(--text-primary); line-height:1.6; overflow-x:hidden; min-height:100vh; min-height:100dvh; }

:root {
  --black:#0a0a0a; --black-rich:#111; --black-card:#161616; --black-elevated:#1c1c1c; --black-hover:#242424; --black-active:#2a2a2a;
  --gold:#d4a843; --gold-light:#f7d754; --gold-dark:#b8860b; --gold-muted:#a08530;
  --gold-glow:rgba(212,168,67,.15); --gold-glow-strong:rgba(212,168,67,.3);
  --red:#c9002b; --red-hot:#ff2d55; --red-light:rgba(201,0,43,.15); --red-glow:rgba(255,45,85,.2);
  --cream:#f5f0e8; --green:#2ecc71; --green-light:rgba(46,204,113,.15);
  --yellow:#f1c40f; --yellow-light:rgba(241,196,15,.15);
  --purple:#9b59b6; --purple-light:rgba(155,89,182,.15);
  --orange:#e67e22; --orange-light:rgba(230,126,34,.15);
  --pink:#e91e8c; --pink-light:rgba(233,30,140,.15);
  --cyan:#1abc9c;
  --bg-primary:var(--black); --bg-secondary:var(--black-rich); --bg-tertiary:var(--black-elevated);
  --bg-card:var(--black-card); --bg-hover:var(--black-hover); --bg-active:var(--black-active);
  --bg-input:var(--black-rich); --bg-overlay:rgba(0,0,0,.75);
  --border:#2a2a2a; --border-light:#333; --border-gold:rgba(212,168,67,.3); --border-focus:var(--gold);
  --text-primary:#e8e0d4; --text-secondary:#9a9080; --text-muted:#6b6156; --text-gold:var(--gold);
  --accent:var(--gold); --accent-hover:var(--gold-light); --accent-light:var(--gold-glow);
  --sidebar-width:260px; --header-height:56px;
  --border-radius:8px; --border-radius-lg:12px; --border-radius-sm:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:0 10px 30px rgba(0,0,0,.6); --shadow-xl:0 20px 60px rgba(0,0,0,.7);
  --shadow-gold:0 4px 20px rgba(212,168,67,.15); --shadow-red:0 4px 20px rgba(255,45,85,.15);
  --transition-fast:150ms cubic-bezier(.4,0,.2,1); --transition-normal:300ms cubic-bezier(.4,0,.2,1);
  --transition-slow:500ms cubic-bezier(.4,0,.2,1); --transition-bounce:500ms cubic-bezier(.34,1.56,.64,1);
  --z-sidebar:100; --z-header:90; --z-overlay:200; --z-modal:300; --z-toast:400;
}

h1,h2,h3 { font-family:'Playfair Display',Georgia,serif; color:var(--text-primary); letter-spacing:-.01em; }
h1 { font-size:1.75rem; font-weight:700; } h2 { font-size:1.375rem; font-weight:700; } h3 { font-size:1.125rem; font-weight:700; }
h4 { font-size:1rem; font-weight:600; font-family:'Inter',sans-serif; } h5 { font-size:.875rem; font-weight:600; }
h6 { font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--gold-muted); font-family:'Inter',sans-serif; }
a { color:var(--gold); text-decoration:none; transition:color var(--transition-fast); } a:hover { color:var(--gold-light); }
::-webkit-scrollbar { width:5px; height:5px; } ::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gold-muted); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:var(--gold); }
::selection { background:var(--gold-glow-strong); color:var(--gold-light); }

.screen { display:none; } .screen.active { display:flex; }

/* === LOGIN - VIP Entrance === */
#login-screen {
  min-height:100vh; min-height:100dvh; align-items:center; justify-content:center;
  background:var(--black); padding:1rem; position:relative; overflow:hidden;
}
#login-screen::before {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(ellipse at 30% 20%,rgba(212,168,67,.06) 0%,transparent 50%),
             radial-gradient(ellipse at 70% 80%,rgba(201,0,43,.04) 0%,transparent 50%);
  animation:ambientShift 20s ease infinite alternate;
}
@keyframes ambientShift { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(-5%,3%) rotate(3deg)} }

.login-container {
  width:100%; max-width:400px; background:var(--black-card); border:1px solid var(--border-gold);
  border-radius:var(--border-radius-lg); padding:2.5rem 2rem;
  box-shadow:var(--shadow-xl),0 0 60px rgba(212,168,67,.05); position:relative; z-index:1;
  animation:loginAppear .8s cubic-bezier(.16,1,.3,1);
}
@keyframes loginAppear { from{opacity:0;transform:translateY(30px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

.login-container::before,.login-container::after {
  content:''; position:absolute; left:2rem; right:2rem; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-muted),transparent); opacity:.3;
}
.login-container::before { top:.75rem; } .login-container::after { bottom:.75rem; }

.login-logo { text-align:center; margin-bottom:2rem; }
.login-logo .logo-brand { margin-bottom:.75rem; }
.login-logo .logo-seo { font-family:'Playfair Display',serif; font-weight:900; font-size:2rem; color:var(--gold); }
.login-logo .logo-n { font-family:'Inter',sans-serif; font-weight:300; font-size:1.25rem; color:#666; }
.login-logo .logo-hot { font-family:'Playfair Display',serif; font-weight:900; font-size:2rem; color:var(--red-hot); }
.login-logo .logo-porn { font-family:'Playfair Display',serif; font-weight:900; font-size:2rem; color:var(--gold); }
.login-logo h1 { font-size:1rem; font-weight:400; font-style:italic; color:var(--gold-muted); letter-spacing:.1em; }
.login-logo p { color:var(--text-muted); font-size:.6875rem; text-transform:uppercase; letter-spacing:.25em; margin-top:.25rem; }

.logo-icon { display:none; }
.logo-icon.small { display:none; }

/* === Forms === */
.form-group { margin-bottom:1.125rem; }
.form-group label { display:block; font-size:.6875rem; font-weight:600; color:var(--gold-muted); margin-bottom:.375rem; text-transform:uppercase; letter-spacing:.1em; }
input,select,textarea { width:100%; padding:.75rem 1rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--border-radius-sm); color:var(--text-primary); font-size:.875rem; font-family:'Inter',sans-serif; transition:all var(--transition-fast); outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow),var(--shadow-gold); }
input::placeholder,textarea::placeholder { color:var(--text-muted); }
textarea { resize:vertical; min-height:80px; }
select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4a843' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; padding-right:2rem; }

/* === Buttons === */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.5rem 1.25rem; font-size:.8125rem; font-weight:600; font-family:'Inter',sans-serif; border:1px solid transparent; border-radius:var(--border-radius-sm); cursor:pointer; transition:all var(--transition-fast); white-space:nowrap; text-decoration:none; text-transform:uppercase; letter-spacing:.05em; position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 50%); pointer-events:none; }
.btn:active { transform:scale(.97); }
.btn-primary { background:linear-gradient(135deg,var(--gold-dark),var(--gold),var(--gold-light)); color:var(--black); box-shadow:var(--shadow-gold); font-weight:700; }
.btn-primary:hover { background:linear-gradient(135deg,var(--gold),var(--gold-light),var(--gold)); box-shadow:0 6px 25px rgba(212,168,67,.3); transform:translateY(-1px); }
.btn-secondary { background:var(--bg-tertiary); color:var(--text-primary); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg-active); border-color:var(--border-light); }
.btn-danger { background:linear-gradient(135deg,var(--red),var(--red-hot)); color:white; box-shadow:var(--shadow-red); }
.btn-danger:hover { box-shadow:0 6px 25px rgba(255,45,85,.3); }
.btn-success { background:linear-gradient(135deg,#1a9b50,var(--green)); color:white; }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--gold); }
.btn-sm { padding:.375rem .75rem; font-size:.7rem; } .btn-lg { padding:.75rem 1.5rem; font-size:.9375rem; }
.btn-block { width:100%; } .btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; background:transparent; color:var(--text-secondary); border-radius:var(--border-radius-sm); cursor:pointer; transition:all var(--transition-fast); }
.icon-btn:hover { background:var(--bg-hover); color:var(--gold); }

/* === Badge === */
.badge { display:inline-flex; align-items:center; padding:.15rem .5rem; font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; border-radius:100px; background:var(--gold-glow); color:var(--gold); font-family:'Inter',sans-serif; }
.badge-green { background:var(--green-light); color:var(--green); }
.badge-red { background:var(--red-light); color:var(--red-hot); }
.badge-yellow { background:var(--yellow-light); color:var(--yellow); }
.badge-purple { background:var(--purple-light); color:var(--purple); }
.badge-orange { background:var(--orange-light); color:var(--orange); }
.badge-pink { background:var(--pink-light); color:var(--pink); }

/* === Cards === */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--border-radius); padding:1.25rem; transition:all var(--transition-normal); position:relative; }
.card:hover { border-color:var(--border-gold); box-shadow:var(--shadow-gold); }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-muted),transparent); opacity:0; transition:opacity var(--transition-normal); }
.card:hover::before { opacity:.4; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.card-title { font-family:'Playfair Display',serif; font-size:.9375rem; font-weight:700; color:var(--text-primary); }

/* === Stat Cards === */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--border-radius); padding:1rem 1.125rem; position:relative; overflow:hidden; transition:all var(--transition-normal); }
.stat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-dark)); opacity:0; transition:opacity var(--transition-normal); }
.stat-card:hover { border-color:var(--border-gold); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.stat-card:hover::after { opacity:1; }
.stat-card .stat-label { font-size:.625rem; color:var(--gold-muted); text-transform:uppercase; letter-spacing:.15em; margin-bottom:.375rem; font-weight:600; }
.stat-card .stat-value { font-family:'Playfair Display',serif; font-size:1.625rem; font-weight:700; color:var(--text-primary); line-height:1.1; }
.stat-change.up { color:var(--green); } .stat-change.down { color:var(--red-hot); }

/* === Tables === */
.table-container { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--border-radius); }
table { width:100%; border-collapse:collapse; font-size:.8125rem; }
thead { background:var(--bg-secondary); position:sticky; top:0; z-index:1; }
th { text-align:left; padding:.75rem 1rem; font-weight:700; color:var(--gold-muted); font-size:.625rem; text-transform:uppercase; letter-spacing:.15em; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:.75rem 1rem; border-bottom:1px solid var(--border); color:var(--text-primary); }
tr:last-child td { border-bottom:none; } tr { transition:background var(--transition-fast); } tr:hover td { background:var(--bg-hover); }

/* === Tabs === */
.tabs { display:flex; border-bottom:1px solid var(--border); gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tab { padding:.75rem 1.25rem; font-size:.6875rem; font-weight:700; color:var(--text-muted); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; transition:all var(--transition-fast); font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.tab:hover { color:var(--text-secondary); } .tab.active { color:var(--gold); border-bottom-color:var(--gold); }

/* === Toast === */
#toast-container { position:fixed; top:1rem; right:1rem; z-index:var(--z-toast); display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--border-radius); padding:.75rem 1rem; font-size:.8125rem; color:var(--text-primary); box-shadow:var(--shadow-lg); pointer-events:all; animation:toast-in .4s cubic-bezier(.34,1.56,.64,1); max-width:360px; display:flex; align-items:center; gap:.5rem; }
.toast.success { border-left:3px solid var(--green); } .toast.error { border-left:3px solid var(--red-hot); }
.toast.warning { border-left:3px solid var(--gold); } .toast.info { border-left:3px solid var(--gold-muted); }
.toast.removing { animation:toast-out .3s ease forwards; }
@keyframes toast-in { from{opacity:0;transform:translateX(30px) scale(.9)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toast-out { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(100%)} }

/* === Modal === */
#modal-overlay { position:fixed; inset:0; background:var(--bg-overlay); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:1rem; animation:fade-in .25s ease; }
#modal-overlay.hidden { display:none; }
#modal-container { background:var(--bg-card); border:1px solid var(--border-gold); border-radius:var(--border-radius-lg); width:100%; max-width:560px; max-height:90vh; max-height:90dvh; overflow-y:auto; box-shadow:var(--shadow-xl),0 0 80px rgba(212,168,67,.05); animation:modal-in .35s cubic-bezier(.34,1.56,.64,1); }
#modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.125rem 1.25rem; border-bottom:1px solid var(--border); }
#modal-title { font-family:'Playfair Display',serif; } #modal-body { padding:1.25rem; }
#modal-footer { display:flex; justify-content:flex-end; gap:.5rem; padding:1rem 1.25rem; border-top:1px solid var(--border); }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
@keyframes modal-in { from{opacity:0;transform:scale(.92) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* === Spinner === */
.spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; }
.spinner-lg { width:32px; height:32px; border-width:3px; }
@keyframes spin { to{transform:rotate(360deg)} }

/* === Empty State === */
.empty-state { text-align:center; padding:3rem 1.5rem; color:var(--text-muted); }
.empty-state h3 { font-family:'Playfair Display',serif; color:var(--text-secondary); margin-bottom:.5rem; }

/* === Utility === */
.hidden{display:none!important} .flex{display:flex} .flex-col{flex-direction:column} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-1{gap:.25rem} .gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem}
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem}
.text-sm{font-size:.8125rem} .text-xs{font-size:.75rem} .text-muted{color:var(--text-muted)} .text-gold{color:var(--gold)}
.text-green{color:var(--green)} .text-red{color:var(--red-hot)} .text-right{text-align:right}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .error-text{color:var(--red-hot);font-size:.8125rem;margin-top:.5rem} .w-full{width:100%}

/* === Section Page === */
.section-page { padding:1.5rem; max-width:1400px; animation:pageIn .4s ease; }
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.section-header h2 { font-size:1.375rem; background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-toolbar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.search-input { position:relative; }
.search-input input { padding-left:2.25rem; width:200px; }
.search-input svg { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--text-muted); width:16px; height:16px; }

.mobile-only{display:none} @media(max-width:768px){.mobile-only{display:flex} .desktop-only{display:none!important}}
.divider-gold { height:1px; background:linear-gradient(90deg,transparent,var(--gold-muted),transparent); margin:1.5rem 0; opacity:.4; }