:root {
  --primary: #FF6B35;
  --primary-dark: #E55525;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --border: #e8eaf0;
  --text: #0d1117;
  --text-muted: #5a6478;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 32px rgba(255,107,53,.18);
}

[data-theme="dark"] {
  --surface: #161c2d;
  --surface-2: #0d1117;
  --border: #1e2840;
  --text: #e2e8f8;
  --text-muted: #6b7a9a;
  --bs-border-color: #1e2840;
}

* { box-sizing: border-box; }
body { font-family: 'Taviraj', serif; color: var(--text); background: var(--surface-2); transition: background .3s, color .3s; }

/* Navbar */
.navbar { background: var(--surface) !important; border-bottom: 1px solid var(--border); box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.navbar-brand { font-weight: 800; font-size: 1.4rem; background: linear-gradient(135deg, var(--primary), #FF9A5C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-link { color: var(--text-muted) !important; font-weight: 500; transition: color .2s; }
.nav-link:hover { color: var(--primary) !important; }

/* Hero */
.hero { background: linear-gradient(135deg, #0d1117 0%, #1a2340 50%, #FF6B35 100%); color: #fff; padding: 80px 0; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }

/* Cards */
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; overflow: hidden; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card img { width: 100%; height: 200px; object-fit: cover; }
.post-card .card-body { padding: 1.5rem; flex: 1; }
.post-meta { font-size: .8rem; color: var(--text-muted); }
.category-badge { font-size: .75rem; font-weight: 600; padding: .3em .8em; border-radius: 999px; background: rgba(255,107,53,.12); color: var(--primary); }

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-focus-shadow-rgb: 255, 107, 53;
  font-weight: 600; border-radius: 8px;
}
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 255, 107, 53;
  font-weight: 600; border-radius: 8px;
}

/* Article content */
.article-content { background: var(--surface); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow); border: 1px solid var(--border); }
.article-content h1, .article-content h2, .article-content h3 { font-weight: 700; }
.article-content img { max-width: 100%; border-radius: 8px; }

/* Editor page */
.editor-wrapper { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.ck-editor__editable { min-height: 420px; }

/* Sidebar */
.sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.sidebar-card h6 { font-weight: 700; color: var(--text); margin-bottom: 1rem; text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; }

/* Popular posts */
.popular-item { display: flex; gap: .75rem; align-items: flex-start; text-decoration: none; padding: .4rem .1rem; border-radius: 10px; border: 1px solid transparent; margin-bottom: 4px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.popular-item:hover { border-color: var(--border); box-shadow: var(--shadow); transform: translateX(3px); }
.popular-item img { border-radius: 8px; object-fit: cover; flex-shrink: 0; transition: transform .2s; }
.popular-item:hover img { transform: scale(1.05); }
.popular-item .pop-title { font-size: .85rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.popular-item small { font-size: .65rem; }
.cat-item { display: flex; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--border); text-decoration: none; transition: padding-left .2s, color .2s; }
.cat-item:last-child { border-bottom: none; }
.cat-item:hover { padding-left: .5rem; }
.cat-name { flex: 1; font-size: .875rem; font-weight: 500; color: var(--text); transition: color .2s; }
.cat-item:hover .cat-name { color: var(--primary); }
.cat-count { font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Pagination */
.page-link { color: var(--primary); border-color: var(--border); border-radius: 8px !important; margin: 0 2px; }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* Dark mode toggle */
#themeToggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; }
#themeToggle:hover { border-color: var(--primary); color: var(--primary); }

/* Tag */
.tag { display: inline-block; padding: .2em .7em; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); margin: 2px; transition: all .2s; text-decoration: none; }
.tag:hover { background: rgba(255,107,53,.12); border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* Search bar */
.search-bar { background: var(--surface); border: 2px solid var(--border); border-radius: 999px; padding: .5rem 1.2rem; transition: border-color .2s; color: var(--text); width: 220px; }
.search-bar:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,107,53,.15); }
.search-bar::placeholder { color: var(--text-muted); }

/* Article page */
.article-title { font-size: 2rem; }
.article-cover { max-height: 420px; width: 100%; object-fit: cover; }
.breadcrumb-item a { color: var(--primary); text-decoration: none; }
.breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* Social share */
.btn-twitter  { --bs-btn-color:#fff; --bs-btn-bg:#000;    --bs-btn-border-color:#000;    --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#333;    --bs-btn-hover-border-color:#333; }
.btn-facebook { --bs-btn-color:#fff; --bs-btn-bg:#1877f2; --bs-btn-border-color:#1877f2; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#166fe5; --bs-btn-hover-border-color:#166fe5; }
.btn-line     { --bs-btn-color:#fff; --bs-btn-bg:#06C755; --bs-btn-border-color:#06C755; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#05a847; --bs-btn-hover-border-color:#05a847; }
.btn-whatsapp { --bs-btn-color:#fff; --bs-btn-bg:#25D366; --bs-btn-border-color:#25D366; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#1ebe57; --bs-btn-hover-border-color:#1ebe57; }
.btn-telegram { --bs-btn-color:#fff; --bs-btn-bg:#2CA5E0; --bs-btn-border-color:#2CA5E0; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#2090c8; --bs-btn-hover-border-color:#2090c8; }

/* Related posts */
.related-item { display:flex; gap:.75rem; text-decoration:none; align-items:center; margin-bottom:.75rem; padding:.4rem .5rem; border-radius:8px; border:1px solid transparent; transition:border-color .2s, box-shadow .2s; }
.related-item:hover { border-color:var(--border); box-shadow:var(--shadow); }
.related-item img { border-radius:8px; object-fit:cover; flex-shrink:0; }
.related-item .related-title { font-size:.85rem; font-weight:600; color:var(--text); }
.related-item .related-date { font-size:.75rem; }

/* Create/Edit page */
.editor-container { max-width: 900px; }
.img-preview-cover { max-height: 180px; object-fit: cover; width: 100%; }
.modal-img-cover { max-height: 360px; object-fit: cover; width: 100%; }

/* Footer */
footer { background: var(--surface); }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .border-bottom { border-color: var(--border) !important; }
[data-theme="dark"] .page-link { background-color: var(--surface); color: var(--primary); }
[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--surface-2); color: var(--text-muted); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); }
[data-theme="dark"] .modal-content { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
[data-theme="dark"] .alert-success { background: #1a2e1a; color: #86efac; border-color: #166534; }
[data-theme="dark"] .alert-danger { background: #2e1a1a; color: #fca5a5; border-color: #991b1b; }
[data-theme="dark"] .form-label { color: var(--text); }
[data-theme="dark"] .input-group-text, [data-theme="dark"] .btn-outline-secondary {
  background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted);
}

/* CKEditor 5 dark mode */
[data-theme="dark"] {
  --ck-color-base-background: var(--surface);
  --ck-color-base-foreground: var(--surface-2);
  --ck-color-base-border: var(--border);
  --ck-color-base-text: var(--text);
  --ck-color-toolbar-background: var(--surface);
  --ck-color-toolbar-border: var(--border);
  --ck-color-button-default-background: var(--surface);
  --ck-color-button-default-hover-background: var(--border);
  --ck-color-button-default-active-background: var(--border);
  --ck-color-button-on-background: rgba(255,107,53,.2);
  --ck-color-button-on-hover-background: rgba(255,107,53,.3);
  --ck-color-button-on-color: var(--primary);
  --ck-color-focus-border: var(--primary);
  --ck-color-focus-outer-shadow: rgba(255,107,53,.15);
  --ck-color-input-background: var(--surface-2);
  --ck-color-input-border: var(--border);
  --ck-color-input-text: var(--text);
  --ck-color-list-background: var(--surface);
  --ck-color-list-button-hover-background: var(--border);
  --ck-color-list-button-on-background: rgba(255,107,53,.2);
  --ck-color-panel-background: var(--surface);
  --ck-color-panel-border: var(--border);
  --ck-color-shadow-drop: rgba(0,0,0,.4);
  --ck-color-shadow-inner: rgba(0,0,0,.3);
  --ck-color-widget-blurred-border: var(--border);
  --ck-color-widget-hover-border: var(--primary);
  --ck-color-selection-background: rgba(255,107,53,.2);
}
[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
[data-theme="dark"] .ck.ck-source-editing-area textarea {
  background: var(--surface-2) !important; color: var(--text) !important;
}
[data-theme="dark"] .ck.ck-toolbar, [data-theme="dark"] .ck.ck-toolbar .ck-toolbar__items {
  background: var(--surface) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .ck.ck-button, [data-theme="dark"] a.ck.ck-button {
  background: var(--surface) !important; color: var(--text) !important;
}
[data-theme="dark"] .ck.ck-button:hover:not(.ck-disabled), [data-theme="dark"] .ck.ck-button.ck-on {
  background: var(--border) !important;
}
[data-theme="dark"] .ck.ck-balloon-panel, [data-theme="dark"] .ck.ck-dropdown__panel {
  background: var(--surface) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .ck.ck-list { background: var(--surface) !important; }
[data-theme="dark"] .ck.ck-list__item .ck-button:hover:not(.ck-disabled) { background: var(--border) !important; }
[data-theme="dark"] .ck.ck-input-text {
  background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important;
}
[data-theme="dark"] .ck.ck-labeled-field-view > .ck-labeled-field-view__input-wrapper,
[data-theme="dark"] .ck.ck-form__header {
  background: var(--surface) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .ck .ck-label, [data-theme="dark"] .ck.ck-labeled-field-view .ck-label {
  color: var(--text-muted) !important; background: var(--surface) !important;
}