*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #F7F5F1;
      --sidebar-bg: #111111;
      --sidebar-w: 260px;
      --card: #FFFFFF;
      --ink: #111111;
      --ink-2: #555555;
      --ink-3: #999999;
      --accent: #E8401E;
      --accent-light: rgba(232,64,30,.1);
      --line: #E8E6E1;
      --green: #22C55E;
      --blue: #3B82F6;
      --yellow: #F59E0B;
      --syne: 'Syne', sans-serif;
      --dm: 'DM Sans', sans-serif;
      --radius: 10px;
      --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
    }
    html, body { height: 100%; font-family: var(--dm); background: var(--bg); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }

    /* ── LAYOUT ── */
    .app { display: flex; min-height: 100vh; }

    /* ── SIDEBAR ── */
    .sidebar {
      width: var(--sidebar-w);
      background: var(--sidebar-bg);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      overflow-y: auto;
      z-index: 100;
    }
    .sidebar::-webkit-scrollbar { width: 0; }
    .sidebar-logo {
      padding: 28px 24px 24px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .sidebar-logo-mark {
      width: 30px; height: 30px;
      background: var(--accent);
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
    }
    .sidebar-logo-mark svg { width: 15px; height: 15px; fill: white; }
    .sidebar-logo-name { font-family: var(--syne); font-weight: 800; font-size: 1.125rem; color: white; }
    .sidebar-logo-sub { font-size: .7rem; color: rgba(255,255,255,.4); letter-spacing: .05em; text-transform: uppercase; margin-top: 1px; }
    .sidebar-section-label {
      padding: 20px 24px 8px;
      font-size: .65rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.3);
    }
    .sidebar-nav { padding: 0 12px; list-style: none; flex: 1; }
    .sidebar-nav li { margin-bottom: 2px; }
    .sidebar-nav a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      color: rgba(255,255,255,.55);
      text-decoration: none;
      font-size: .875rem;
      font-weight: 400;
      transition: background .15s, color .15s;
      cursor: pointer;
    }
    .sidebar-nav a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; opacity: .7; }
    .sidebar-nav a:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
    .sidebar-nav a.active {
      background: var(--accent);
      color: white;
    }
    .sidebar-nav a.active svg { opacity: 1; }
    .sidebar-nav .badge {
      margin-left: auto;
      background: var(--accent);
      color: white;
      font-size: .65rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 100px;
      line-height: 1.4;
    }
    .sidebar-bottom {
      padding: 16px 12px;
      border-top: 1px solid rgba(255,255,255,.08);
      margin-top: auto;
    }
    .sidebar-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .15s;
    }
    .sidebar-user:hover { background: rgba(255,255,255,.06); }
    .user-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--syne);
      font-size: .75rem;
      font-weight: 700;
      color: white;
      flex-shrink: 0;
    }
    .user-name { font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.8); }
    .user-role { font-size: .7rem; color: rgba(255,255,255,.35); }
    .user-arrow { margin-left: auto; color: rgba(255,255,255,.3); }
    .user-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

    /* ── MAIN ── */
    .main {
      margin-left: var(--sidebar-w);
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    .topbar {
      background: var(--card);
      border-bottom: 1px solid var(--line);
      padding: 0 32px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .topbar-left { display: flex; align-items: center; gap: 16px; }
    .topbar-title { font-family: var(--syne); font-size: 1.0625rem; font-weight: 700; }
    .topbar-breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: .8rem;
      color: var(--ink-3);
    }
    .topbar-breadcrumb span { color: var(--accent); font-weight: 500; }
    .topbar-right { display: flex; align-items: center; gap: 12px; }
    .topbar-btn {
      width: 36px; height: 36px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      transition: background .15s;
    }
    .topbar-btn:hover { background: var(--bg); }
    .topbar-btn svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; }
    .notif-dot {
      position: absolute;
      top: 6px; right: 6px;
      width: 7px; height: 7px;
      background: var(--accent);
      border-radius: 50%;
      border: 1.5px solid white;
    }
    .topbar-search {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 14px;
      height: 36px;
      width: 240px;
    }
    .topbar-search svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; flex-shrink: 0; }
    .topbar-search input {
      border: none;
      background: none;
      outline: none;
      font-family: var(--dm);
      font-size: .8rem;
      color: var(--ink);
      width: 100%;
    }
    .topbar-search input::placeholder { color: var(--ink-3); }
    .add-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 0 16px;
      height: 36px;
      font-family: var(--syne);
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
    }
    .add-btn:hover { background: #c93015; }
    .add-btn svg { width: 14px; height: 14px; fill: none; stroke: white; stroke-width: 2.5; }

    /* ── CONTENT ── */
    .content { padding: 32px; }

    /* ── STATS ── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 28px;
    }
    .stat-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    .stat-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
    }
    .stat-card.c1::after { background: var(--accent); }
    .stat-card.c2::after { background: var(--green); }
    .stat-card.c3::after { background: var(--blue); }
    .stat-card.c4::after { background: var(--yellow); }
    .stat-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
    .stat-num { font-family: var(--syne); font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }
    .stat-change { font-size: .75rem; display: flex; align-items: center; gap: 4px; }
    .stat-change.up { color: var(--green); }
    .stat-change.down { color: #EF4444; }
    .stat-change svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
    .stat-icon {
      position: absolute;
      top: 20px; right: 20px;
      width: 40px; height: 40px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
    }
    .stat-card.c1 .stat-icon { background: rgba(232,64,30,.1); }
    .stat-card.c2 .stat-icon { background: rgba(34,197,94,.1); }
    .stat-card.c3 .stat-icon { background: rgba(59,130,246,.1); }
    .stat-card.c4 .stat-icon { background: rgba(245,158,11,.1); }
    .stat-icon svg { width: 18px; height: 18px; fill: none; stroke-width: 1.8; }
    .stat-card.c1 .stat-icon svg { stroke: var(--accent); }
    .stat-card.c2 .stat-icon svg { stroke: var(--green); }
    .stat-card.c3 .stat-icon svg { stroke: var(--blue); }
    .stat-card.c4 .stat-icon svg { stroke: var(--yellow); }

    /* ── TWO COL ── */
    .two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 28px; }

    /* ── CARD ── */
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
    }
    .card-title { font-family: var(--syne); font-size: .9375rem; font-weight: 700; }
    .card-action {
      font-size: .75rem;
      font-weight: 500;
      color: var(--accent);
      text-decoration: none;
      cursor: pointer;
      background: none;
      border: none;
    }
    .card-action:hover { text-decoration: underline; }

    /* ── TABLE ── */
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th {
      padding: 12px 24px;
      text-align: left;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-3);
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }
    .data-table td {
      padding: 14px 24px;
      font-size: .875rem;
      border-bottom: 1px solid var(--line);
      color: var(--ink-2);
    }
    .data-table tbody tr:last-child td { border-bottom: none; }
    .data-table tbody tr:hover td { background: var(--bg); }
    .row-title { font-weight: 500; color: var(--ink); }
    .row-meta { font-size: .75rem; color: var(--ink-3); margin-top: 2px; }
    .status-pill {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .04em;
    }
    .status-pill.published { background: rgba(34,197,94,.1); color: #16A34A; }
    .status-pill.draft { background: rgba(245,158,11,.1); color: #B45309; }
    .status-pill.review { background: rgba(59,130,246,.1); color: #1D4ED8; }
    .row-actions { display: flex; gap: 8px; align-items: center; }
    .row-btn {
      width: 28px; height: 28px;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, border-color .15s;
    }
    .row-btn:hover { background: var(--bg); border-color: var(--ink-3); }
    .row-btn svg { width: 12px; height: 12px; fill: none; stroke: var(--ink-2); stroke-width: 2; }
    .row-btn.danger:hover { background: rgba(239,68,68,.08); border-color: #EF4444; }
    .row-btn.danger:hover svg { stroke: #EF4444; }

    /* ── QUICK ACTIONS ── */
    .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px; }
    .quick-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--bg);
      cursor: pointer;
      transition: border-color .15s, background .15s;
      text-decoration: none;
    }
    .quick-btn:hover { border-color: var(--accent); background: var(--accent-light); }
    .quick-btn-icon {
      width: 32px; height: 32px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
    }
    .quick-btn-icon svg { width: 15px; height: 15px; fill: none; stroke: white; stroke-width: 2; }
    .quick-btn-label { font-size: .8rem; font-weight: 500; color: var(--ink); }
    .quick-btn-desc { font-size: .7rem; color: var(--ink-3); margin-top: 1px; }

    /* ── ACTIVITY ── */
    .activity-list { padding: 8px 0; }
    .activity-item {
      display: flex;
      gap: 12px;
      padding: 12px 24px;
      align-items: flex-start;
    }
    .activity-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 5px;
    }
    .activity-text { font-size: .8375rem; color: var(--ink-2); line-height: 1.5; }
    .activity-text strong { color: var(--ink); font-weight: 500; }
    .activity-time { font-size: .7rem; color: var(--ink-3); margin-top: 2px; }

    /* ── BLOG PANEL ── */
    .panel { display: none; }
    .panel.active { display: block; }

    /* ── FORM PANEL ── */
    .form-section { padding: 28px 32px; }
    .form-section-title {
      font-family: var(--syne);
      font-size: .875rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .form-full { grid-column: 1 / -1; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
    .form-input, .form-select, .form-textarea {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 14px;
      font-family: var(--dm);
      font-size: .875rem;
      color: var(--ink);
      outline: none;
      transition: border-color .15s;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--accent);
      background: white;
    }
    .form-textarea { resize: vertical; min-height: 120px; }
    .editor-toolbar {
      background: var(--bg);
      border: 1px solid var(--line);
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      padding: 8px 12px;
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .editor-btn {
      width: 28px; height: 28px;
      border: none;
      background: none;
      border-radius: 5px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem;
      font-weight: 700;
      color: var(--ink-2);
      transition: background .1s;
    }
    .editor-btn:hover { background: var(--line); color: var(--ink); }
    .editor-area {
      border: 1px solid var(--line);
      border-radius: 0 0 8px 8px;
      padding: 14px;
      min-height: 260px;
      background: white;
      font-family: var(--dm);
      font-size: .875rem;
      color: var(--ink);
      outline: none;
      line-height: 1.7;
    }
    .img-upload {
      border: 2px dashed var(--line);
      border-radius: 8px;
      padding: 28px;
      text-align: center;
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }
    .img-upload:hover { border-color: var(--accent); background: var(--accent-light); }
    .img-upload-icon { font-size: 1.75rem; margin-bottom: 8px; }
    .img-upload-text { font-size: .8rem; color: var(--ink-3); }
    .img-upload-text strong { color: var(--accent); }
    .form-actions {
      display: flex;
      gap: 12px;
      padding: 20px 32px;
      border-top: 1px solid var(--line);
      background: var(--bg);
    }
    .btn-save { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 10px 24px; font-family: var(--syne); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .15s; }
    .btn-save:hover { background: #c93015; }
    .btn-draft { background: white; color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 24px; font-family: var(--syne); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .15s; }
    .btn-draft:hover { background: var(--bg); }

    /* ── SIDEBAR OVERLAY ── */
    .sidebar-section-divider { height: 1px; background: rgba(255,255,255,.07); margin: 8px 12px; }

    /* ── CHART PLACEHOLDER ── */
    .chart-container { padding: 24px; height: 200px; display: flex; align-items: flex-end; gap: 10px; }
    .chart-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .chart-bar {
      width: 100%;
      background: var(--accent);
      border-radius: 4px 4px 0 0;
      opacity: .85;
      transition: opacity .2s;
    }
    .chart-bar:hover { opacity: 1; }
    .chart-bar.alt { background: var(--line); opacity: 1; }
    .chart-label { font-size: .65rem; color: var(--ink-3); text-align: center; }

    /* ── MEDIA GRID ── */
    .media-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 20px; }
    .media-item {
      aspect-ratio: 1;
      background: var(--bg-card, #EFEDE7);
      border: 1px solid var(--line);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      color: var(--ink-3);
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: border-color .15s;
    }
    .media-item:hover { border-color: var(--accent); }
    .media-item-placeholder { text-align: center; font-size: .65rem; color: var(--ink-3); }
    .media-upload {
      border-style: dashed;
      background: transparent;
      flex-direction: column;
      gap: 6px;
    }
    .media-upload svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.5; }

    /* ── SEO SCORE ── */
    .seo-score-wrap { padding: 24px; display: flex; align-items: center; gap: 24px; }
    .seo-score-circle {
      width: 80px; height: 80px;
      border-radius: 50%;
      background: conic-gradient(var(--green) 0deg 295deg, var(--line) 295deg 360deg);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .seo-score-inner {
      width: 64px; height: 64px;
      background: white;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column;
    }
    .seo-score-num { font-family: var(--syne); font-size: 1.375rem; font-weight: 800; color: var(--ink); line-height: 1; }
    .seo-score-of { font-size: .6rem; color: var(--ink-3); }
    .seo-items { flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .seo-item { display: flex; align-items: center; gap: 8px; font-size: .75rem; }
    .seo-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .seo-dot.ok { background: var(--green); }
    .seo-dot.warn { background: var(--yellow); }
    .seo-dot.err { background: #EF4444; }
    .seo-item-label { color: var(--ink-2); }
    .seo-item-val { margin-left: auto; font-weight: 500; color: var(--ink); }
  
.admin-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#111}.login-card{width:420px;background:#fff;border-radius:14px;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.login-card h1{font-family:var(--syne);font-size:1.5rem;margin-bottom:8px}.alert{padding:12px 14px;border-radius:8px;margin-bottom:14px;font-size:.875rem}.alert.err{background:#fee2e2;color:#991b1b}.alert.ok{background:#dcfce7;color:#166534}.admin-form-actions{display:flex;gap:10px;align-items:center}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px}.filter-input{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:#fff}.content-editor{min-height:200px}.thumb{width:72px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}.media-thumb{width:100%;height:120px;object-fit:cover;border-radius:8px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.crud-card{background:white;border:1px solid var(--line);border-radius:10px;padding:18px}.kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:22px}.kpi .stat-card{padding:20px}.admin-note{font-size:.8rem;color:var(--ink-3);margin-top:6px}.inline-form{display:inline}.danger-text{color:#dc2626}.preview-link{color:var(--accent);text-decoration:none;font-weight:600}.form-help{font-size:.75rem;color:var(--ink-3);margin-top:4px}.slug-chip{font-family:monospace;background:var(--bg);padding:3px 7px;border-radius:6px}.mini-chart{display:flex;align-items:flex-end;gap:8px;height:120px}.mini-chart span{flex:1;background:var(--accent);border-radius:4px 4px 0 0;min-height:6px}.admin-main-flex{display:flex;min-height:100vh}.admin-main{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));}.page-top-actions{display:flex;gap:10px;align-items:center}.hidden{display:none!important}@media(max-width:900px){.grid-3,.kpi,.stats-grid,.two-col,.form-grid{grid-template-columns:1fr}.sidebar{position:relative;width:100%;height:auto}.admin-main{margin-left:0;width:100%}.admin-main-flex{display:block}.topbar{position:relative}}