:root {
  --gold: #b8964e;
  --gold-light: #d4b87a;
  --gold-dark: #96773c;
  --gold-bg: rgba(184,150,78,0.08);
  --gold-border: rgba(184,150,78,0.2);
  --accent: #6366f1;
  --accent-bg: rgba(99,102,241,0.08);
  --success: #22c55e;
  --success-bg: rgba(34,197,94,0.08);
  --danger: #ef4444;
  --danger-bg: rgba(239,68,68,0.08);
  --warning: #f59e0b;
  --warning-bg: rgba(245,158,11,0.08);
  --bg: #0c0f14;
  --bg-2: #12161e;
  --bg-3: #1a1f2e;
  --card: #161b27;
  --card-hover: #1c2233;
  --surface: #1e2538;
  --text: #e8eaf0;
  --text-2: #a0a8bf;
  --text-3: #636d84;
  --border: #252d3f;
  --border-2: #2f3a50;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; }
::selection { background:var(--gold); color:#000; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:3px; }

/* ═══ Layout ═══ */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:260px; background:var(--bg-2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh;
}
.sidebar-logo {
  padding:24px 24px 20px; border-bottom:1px solid var(--border);
}
.sidebar-logo img { height:32px; width:auto; }
.sidebar-logo .logo-sub { font-size:11px; color:var(--text-3); margin-top:4px; font-weight:500; letter-spacing:1px; text-transform:uppercase; }

.sidebar nav { padding:12px 12px; flex:1; display:flex; flex-direction:column; gap:2px; }
.sidebar nav a {
  display:flex; align-items:center; gap:12px; padding:11px 14px; color:var(--text-2);
  text-decoration:none; border-radius:var(--radius); font-size:13px; font-weight:500;
  transition:all .15s;
}
.sidebar nav a svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.sidebar nav a:hover { background:var(--bg-3); color:var(--text); }
.sidebar nav a.active { background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold-border); }
.sidebar nav a.active svg { stroke:var(--gold); }

.sidebar-footer {
  padding:16px 20px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sidebar-avatar { width:32px; height:32px; border-radius:8px; background:var(--gold); color:#000; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.sidebar-user { flex:1; }
.sidebar-user-name { font-size:13px; font-weight:600; color:var(--text); }
.sidebar-user-role { font-size:11px; color:var(--text-3); }
.sidebar-logout { color:var(--text-3); font-size:11px; cursor:pointer; text-decoration:none; transition:color .15s; }
.sidebar-logout:hover { color:var(--danger); }

.main { flex:1; padding:28px 32px; overflow-y:auto; max-width:1200px; }

/* ═══ Buttons ═══ */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  border:none; border-radius:var(--radius); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .15s; text-decoration:none; font-family:var(--font);
}
.btn-primary { background:var(--gold); color:#000; }
.btn-primary:hover { background:var(--gold-light); transform:translateY(-1px); box-shadow:0 4px 12px rgba(184,150,78,0.3); }
.btn-accent { background:var(--accent); color:#fff; }
.btn-accent:hover { filter:brightness(1.15); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:transparent; color:var(--danger); border:1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background:var(--danger-bg); }
.btn-outline { background:transparent; border:1px solid var(--border-2); color:var(--text-2); }
.btn-outline:hover { background:var(--bg-3); color:var(--text); border-color:var(--text-3); }
.btn-ghost { background:transparent; color:var(--text-2); padding:6px 10px; }
.btn-ghost:hover { color:var(--text); background:var(--bg-3); }
.btn-sm { padding:5px 10px; font-size:11px; border-radius:6px; }
.btn-lg { padding:12px 24px; font-size:15px; }
.btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }

/* ═══ Cards ═══ */
.card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; margin-bottom:16px;
}

/* ═══ Forms ═══ */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text-2); }
.form-control {
  width:100%; padding:10px 14px; background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--radius); font-size:13px; color:var(--text); font-family:var(--font);
  transition:all .15s;
}
.form-control:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,150,78,0.1); }
.form-control::placeholder { color:var(--text-3); }
select.form-control { background-color:var(--bg-3); }
textarea.form-control { resize:vertical; min-height:100px; }

/* ═══ Login ═══ */
.login-container { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.login-box {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:48px 40px; width:100%; max-width:420px; box-shadow:var(--shadow-lg);
}
.login-box h1 { font-size:22px; text-align:center; color:var(--gold); }
.login-box .subtitle { text-align:center; color:var(--text-3); margin-bottom:32px; font-size:13px; }

/* ═══ Table ═══ */
table { width:100%; border-collapse:collapse; }
th,td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); }
th { font-size:11px; text-transform:uppercase; color:var(--text-3); font-weight:600; letter-spacing:.5px; }
td { font-size:13px; }

/* ═══ Alerts ═══ */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:13px; }
.alert-error { background:var(--danger-bg); color:var(--danger); border:1px solid rgba(239,68,68,0.2); }
.alert-success { background:var(--success-bg); color:var(--success); border:1px solid rgba(34,197,94,0.2); }
.alert-warning { background:var(--warning-bg); color:#d97706; border:1px solid rgba(245,158,11,0.2); }

/* ═══ Badges ═══ */
.badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; }
.badge-draft { background:var(--bg-3); color:var(--text-2); }
.badge-published { background:var(--success-bg); color:var(--success); }

/* ═══ Modal ═══ */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; width:90%; max-width:520px; max-height:80vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal h3 { margin-bottom:20px; font-size:18px; }

/* ═══ SEO Score ═══ */
.seo-score { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; font-weight:700; font-size:16px; color:#fff; }
.seo-score.good { background:var(--success); }
.seo-score.ok { background:var(--warning); }
.seo-score.bad { background:var(--danger); }

/* ═══ Quill ═══ */
.ql-toolbar { border-radius:var(--radius) var(--radius) 0 0; border-color:var(--border)!important; background:var(--bg-3); }
.ql-container { border-radius:0 0 var(--radius) var(--radius); border-color:var(--border)!important; background:var(--bg-2); color:var(--text); min-height:300px; font-size:15px; }
.ql-toolbar .ql-stroke { stroke:var(--text-2)!important; }
.ql-toolbar .ql-fill { fill:var(--text-2)!important; }
.ql-toolbar .ql-picker { color:var(--text-2)!important; }
.ql-toolbar button:hover .ql-stroke { stroke:var(--gold)!important; }
.ql-toolbar .ql-picker-label:hover { color:var(--gold)!important; }
.ql-editor.ql-blank::before { color:var(--text-3)!important; }

/* ═══ Loading ═══ */
.spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading { display:none; text-align:center; padding:20px; color:var(--text-3); }
.loading.active { display:block; }

/* ═══ Image ═══ */
.image-preview { max-width:100%; max-height:300px; border-radius:var(--radius); border:1px solid var(--border); object-fit:cover; }

/* ═══ Utilities ═══ */
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }

/* ═══ Responsive ═══ */
@media (max-width:768px) {
  .sidebar { display:none; }
  .main { padding:16px; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
}