:root {
  --crm-ink: #0f2744;
  --crm-accent: #0d9488;
  --crm-bg: #f3f6f9;
  --crm-panel: #ffffff;
}
body { margin: 0; background: linear-gradient(180deg, #e8eef5 0%, var(--crm-bg) 40%); color: var(--crm-ink); font-family: "Segoe UI", system-ui, sans-serif; }
.crm-topbar { display: flex; align-items: center; gap: 1.5rem; padding: .85rem 1.25rem; background: var(--crm-ink); color: #fff; }
.crm-brand a { color: #fff; font-weight: 700; text-decoration: none; letter-spacing: .02em; }
.crm-nav { display: flex; flex-wrap: wrap; gap: .85rem; flex: 1; }
.crm-nav a { color: #c9d7e8; text-decoration: none; font-size: .92rem; }
.crm-nav a:hover { color: #fff; }
.crm-main { padding: 1.25rem; max-width: 1400px; margin: 0 auto; }
.crm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 70vh; }
@media (max-width: 1100px) { .crm-split { grid-template-columns: 1fr; } }
.crm-panel { background: var(--crm-panel); border: 1px solid #d7e0ea; border-radius: 12px; padding: 1rem; box-shadow: 0 8px 24px rgba(15,39,68,.06); }
.crm-panel h1, .crm-panel h2 { font-size: 1.15rem; margin-bottom: .75rem; }
.crm-preview-frame { width: 100%; min-height: 70vh; border: 0; background: #fff; border-radius: 8px; }
.crm-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.form-label { font-size: .82rem; font-weight: 600; color: #456; }
.collection-block { border: 1px dashed #c9d5e3; border-radius: 8px; padding: .75rem; margin-bottom: .75rem; }
.login-wrap { max-width: 420px; margin: 4rem auto; }