:root{
  --omega:#004AAD; --accent:#FFD84D; --bg:#f6f8ff;
  --text:#1d232a; --muted:#6b7280; --card:#ffffff;
  --radius:16px; --radius-lg:20px; --gap:16px;
  --focus-ring: 0 0 0 3px rgba(0,74,173,.25);
}

:root.dark{
  --bg:#0b1020; --card:#111629; --text:#e5e7eb; --muted:#9ca3af;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  margin:0;
  font: 500 15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar-inner{
  max-width:1100px; margin:0 auto; padding:.6rem 1rem;
  display:flex; align-items:center; gap:12px;
}
.brand{ color:var(--omega); font-weight:800; letter-spacing:.3px; font-size:18px; margin-right:auto; display:flex; align-items:center; gap:.5rem}
.brand .badge{background:var(--accent); color:#222; font-weight:800; padding:.1rem .4rem; border-radius:8px; font-size:.8rem}

/* Layout */
.container{ max-width:1100px; margin: 18px auto; padding: 0 1rem; display:grid; grid-template-columns: 240px 1fr; gap: var(--gap); }
@media (max-width: 920px){ .container{ grid-template-columns: 1fr; } }

/* Sidebar */
.sidebar{ background:var(--card); border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.06); overflow:hidden;}
.sidebar .list{ margin:0; padding:0; list-style:none;}
.sidebar .item{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; border-bottom:1px solid #f0f3ff; color:inherit; text-decoration:none; }
.sidebar .item:hover{ background:rgba(0,0,0,.03); }
.sidebar .item.active{ background:rgba(0,74,173,.08); font-weight:700; color:var(--omega); }

/* Cards, tables */
.card{ border:0; background:var(--card); box-shadow:0 10px 30px rgba(0,0,0,.08); border-radius:var(--radius-lg); }
.card .card-header{ padding:1rem 1rem .5rem; border-bottom:1px solid rgba(0,0,0,.06); font-weight:700; }
.card .card-body{ padding:1rem; }

.table{ width:100%; border-collapse: collapse; font-size:.95rem;}
.table th,.table td{ padding:.7rem .6rem; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; }
.table tr{ transition: background .12s; }
.table tr:hover{ background:rgba(0,0,0,.025); }

/* Forms */
.input,.select,.textarea{
  width:100%; background:#fff; color:var(--text);
  border:1px solid #e5e7eb; border-radius:12px; padding:.6rem .8rem;
}
.textarea{ min-height:180px; resize:vertical; }
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{
  outline:none; box-shadow:var(--focus-ring); border-color:#c7d2fe;
}
.input.error,.textarea.error{ border-color:#ef4444; }
.helper{ font-size:.82rem; color:var(--muted); }
.helper.error{ color:#ef4444; }

/* Buttons */
.btn{ background:var(--omega); color:#fff; border:none; padding:.625rem 1rem; border-radius:12px; cursor:pointer; }
.btn:hover{ filter:brightness(.95); }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.btn.secondary{ background:#e5e7eb; color:#111827; }
.btn.ghost{ background:transparent; border:1px solid #e5e7eb; color:inherit; }
.btn.icon{ display:inline-flex; align-items:center; gap:.45rem; }
.btn.block{ width:100%; }

.badge{ background:var(--accent); color:#222; font-weight:700; border-radius:999px; padding:.15rem .6rem; font-size:.8rem; }

/* Search bar */
.searchbar{ display:flex; gap:.5rem; align-items:center; }
.searchbar .input{ max-width:380px; }

/* Empty state */
.empty-state{ text-align:center; padding:48px 16px; color:var(--muted); }
.empty-state .action{ margin-top:12px; }

/* Editor layout */
.editor{ display:grid; grid-template-columns: 1fr 380px; gap: var(--gap); }
@media (max-width: 1100px){ .editor{ grid-template-columns: 1fr; } }
.preview{
  border:1px dashed #e5e7eb; border-radius:14px; padding:12px; background:#fff; max-height:70vh; overflow:auto;
}
.preview h1,h2,h3{ margin:.6rem 0; }
.preview img{ max-width:100%; border-radius:12px; }

/* Media uploader */
.dropzone{
  border:2px dashed #cbd5e1; border-radius:14px; padding:16px; text-align:center; background:#fff;
  transition:border-color .2s, background .2s;
}
.dropzone.dragover{ border-color: var(--omega); background: rgba(0,74,173,.06); }
.thumb{ width:120px; height:120px; border-radius:12px; object-fit:cover; display:block; }

/* Toast */
#toast{ position:fixed; right:16px; bottom:16px; background:#111827; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.2); z-index:9999; opacity:0; transform: translateY(8px); transition:opacity .2s, transform .2s; }
#toast.show{ opacity:1; transform: translateY(0); }

/* Toggle dark */
.theme-toggle{ margin-left:.5rem; }