@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --paper: #f7f1e7;
  --paper-deep: #eee4d5;
  --surface: #fffdf8;
  --ink: #18233a;
  --muted: #65708a;
  --line: #d9d2c5;
  --cobalt: #2f5edb;
  --cobalt-deep: #1f459f;
  --orange: #e8652f;
  --mint: #187b69;
  --danger: #b93b3b;
  --success: #187b69;
  --warning: #a96912;
  --bg-main: var(--paper);
  --bg-surface: var(--surface);
  --bg-card: var(--surface);
  --bg-card-hover: #fffaf1;
  --bg-input: #fffdf8;
  --primary: var(--cobalt);
  --primary-hover: var(--cobalt-deep);
  --primary-gradient: var(--cobalt);
  --primary-glow: rgba(47, 94, 219, .18);
  --text-main: var(--ink);
  --text-muted: var(--muted);
  --text-dim: #7b8497;
  --border: var(--line);
  --border-hover: var(--cobalt);
  --border-active: var(--cobalt);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 0 rgba(24, 35, 58, .04);
  --shadow-md: 0 12px 28px rgba(24, 35, 58, .08);
  --shadow-glow: none;
}

* { font-family: 'Manrope', 'Segoe UI', sans-serif; }
html { background: var(--paper); }
body { background: var(--paper) !important; color: var(--ink) !important; background-image: none !important; }
a { color: var(--cobalt); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(232, 101, 47, .5) !important; outline-offset: 3px; }

.auth-wrapper { background: var(--paper) !important; padding: 2rem 1.25rem; }
.auth-wrapper::before { content: 'GAMA PRO / MEMBER PORTAL'; position: fixed; right: 6vw; bottom: 8vh; max-width: 180px; color: var(--cobalt); font-size: .78rem; font-weight: 800; line-height: 1.5; letter-spacing: .1em; }
.auth-card { background: var(--surface) !important; border: 1px solid var(--ink) !important; border-radius: 16px !important; box-shadow: 8px 8px 0 var(--cobalt) !important; backdrop-filter: none !important; max-width: 510px; }
.auth-brand { text-align: left; border-bottom: 1px solid var(--line); padding-bottom: 1.35rem; }
.brand-badge { background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--orange) !important; padding: 0 !important; letter-spacing: .08em !important; }
.auth-brand h1 { color: var(--ink) !important; background: none !important; -webkit-text-fill-color: var(--ink) !important; font-family: 'Fraunces', Georgia, serif; font-size: 2.35rem !important; }
.auth-brand p { color: var(--muted) !important; }
.auth-tabs { background: var(--paper) !important; border-color: var(--line) !important; border-radius: 8px !important; }
.auth-tab-btn { color: var(--muted) !important; border-radius: 5px !important; }
.auth-tab-btn.active { background: var(--ink) !important; box-shadow: none !important; color: #fff !important; }
.form-group label { color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
.form-control, .search-input { color: var(--ink) !important; background: #fffdf8 !important; border-color: var(--line) !important; border-radius: 7px !important; }
.form-control::placeholder, .search-input::placeholder { color: #9aa1ae !important; }
.form-control:focus, .search-input:focus { box-shadow: 0 0 0 3px rgba(47, 94, 219, .12) !important; background: #fff !important; }
.btn-primary { background: var(--orange) !important; border-radius: 7px !important; box-shadow: none !important; color: #fff !important; }
.btn-primary:hover:not(:disabled) { background: #c94f21 !important; transform: translateY(-1px) !important; box-shadow: none !important; }
.btn-secondary { background: transparent !important; border: 1px solid var(--ink) !important; border-radius: 7px !important; color: var(--ink) !important; box-shadow: none !important; }
.btn-secondary:hover { background: var(--ink) !important; color: #fff !important; }

.dashboard-nav { background: var(--surface) !important; border-bottom: 1px solid var(--ink) !important; box-shadow: none !important; }
.nav-brand-logo { background: var(--orange) !important; border-radius: 8px !important; box-shadow: none !important; }
.nav-brand-text h2, .page-header h2 { color: var(--ink) !important; font-family: 'Fraunces', Georgia, serif; }
.nav-brand-text span, .page-header p { color: var(--muted) !important; }
.user-badge { background: var(--paper) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.user-role-tag { border-radius: 4px !important; }
.role-admin { background: #ffe1c7 !important; color: #86401e !important; }
.role-user { background: #dce8ff !important; color: #244a9f !important; }
.dashboard-container { max-width: 1400px; margin: 2.75rem auto 4.5rem !important; padding: 0 1.75rem !important; }
.page-header { border-left: 5px solid var(--orange); margin-bottom: 2.25rem !important; padding: .25rem 0 .25rem 1rem; }
.stats-grid { gap: 1.25rem !important; margin-bottom: 2.5rem !important; }
.admin-tabs-nav { margin: 2rem 0 1.5rem !important; }
.stat-card, .license-card-hero, .table-container, .admin-toolbar { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: none !important; }
.admin-toolbar { padding: 1.15rem !important; }
.stat-card { border-top: 4px solid var(--cobalt) !important; }
.stat-card:hover { border-color: var(--ink) !important; transform: translateY(-2px); }
.stat-icon { border-radius: 8px !important; background: #dce8ff !important; color: var(--cobalt) !important; }
.stat-info h4, .stat-info .stat-number, .license-key-text { color: var(--ink) !important; }
.license-hero-badge { border-radius: 4px !important; }
.badge-active { background: #d8f2e8 !important; color: #126552 !important; }
.badge-revoked { background: #f9dddd !important; color: #9e3030 !important; }
.license-key-box { background: var(--paper) !important; border-color: var(--line) !important; }
.feature-pill { border-radius: 5px !important; }
.custom-table { color: var(--ink) !important; }
.custom-table th { background: var(--ink) !important; color: #fff !important; }
.custom-table td { border-color: var(--line) !important; color: var(--ink) !important; }
.custom-table tr:hover td { background: #fff8ec !important; }
.tab-nav-btn, .btn-table-action { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 6px !important; color: var(--ink) !important; }
.tab-nav-btn.active { background: var(--cobalt) !important; color: #fff !important; border-color: var(--cobalt) !important; }
.btn-table-action:hover { background: var(--ink) !important; color: #fff !important; }
.modal-overlay { background: rgba(24, 35, 58, .45) !important; }
.modal-box { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; border-radius: 14px !important; box-shadow: 8px 8px 0 var(--orange) !important; }
.modal-head { border-color: var(--line) !important; }
.toast { background: var(--ink) !important; color: #fff !important; border-radius: 7px !important; box-shadow: 4px 4px 0 var(--orange) !important; }

@media (max-width: 760px) {
  .auth-wrapper { background: var(--paper) !important; align-items: flex-start; }
  .auth-wrapper::before { display: none; }
  .auth-card { margin-top: 1rem; box-shadow: 5px 5px 0 var(--cobalt) !important; }
  .dashboard-nav { align-items: flex-start !important; }
  .nav-user { flex-wrap: wrap; justify-content: flex-end; }
  .dashboard-container { margin: 1.5rem auto 3rem !important; padding: 0 1rem !important; }
  .page-header { align-items: flex-start !important; margin-bottom: 1.5rem !important; }
  .stats-grid { gap: .85rem !important; margin-bottom: 1.65rem !important; }
  .admin-tabs-nav { margin: 1.4rem 0 1rem !important; }
  .admin-toolbar { align-items: stretch !important; }
  .search-wrap { min-width: 100% !important; }
}