/* =============================================
   OTASHENKO — CSS (Dark + Light Mode)
   ============================================= */

/* ---- LIGHT MODE overrides ---- */
[data-theme="light"] {
  --bg:           #FFFFFF;
  --bg-2:         #F7F7F5;
  --bg-card:      #FFFFFF;
  --text:         #0A0A0A;
  --text-2:       #444444;
  --text-3:       #888888;
  --border:       #E5E5E5;
  --accent:       #0A0A0A;
  --accent-2:     #444444;
  --accent-hover: #222222;
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 6px 24px rgba(0,0,0,0.08);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.10);
}
[data-theme="light"] .nav { background: rgba(255,255,255,0.93); }
[data-theme="light"] .nav-links { background: var(--bg-card); }
[data-theme="light"] .post-body pre { background: #1E2030; color: #C8D3F5; border-color: #2A2A4A; }
[data-theme="light"] .ql-toolbar.ql-snow  { background: var(--bg-2) !important; border-color: var(--border) !important; }
[data-theme="light"] .ql-container.ql-snow { background: var(--bg-card) !important; border-color: var(--border) !important; }
[data-theme="light"] .ql-editor { color: var(--text) !important; }
[data-theme="light"] .ql-snow .ql-stroke { stroke: var(--text-2) !important; }
[data-theme="light"] .ql-snow .ql-fill   { fill:   var(--text-2) !important; }
[data-theme="light"] .ql-snow .ql-picker  { color:  var(--text-2) !important; }
[data-theme="light"] .ql-snow .ql-picker-options { background: var(--bg-card) !important; border-color: var(--border) !important; }
[data-theme="light"] .ql-editor pre { background: #1E2030 !important; color: #C8D3F5 !important; }

/* Theme toggle button (nav) */
.theme-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--text-2); padding: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color var(--transition), background var(--transition);
}
.theme-toggle:hover { color: var(--text); background: var(--bg-2); }
/* Dark mode default: show sun (click → go light) */
[data-theme="dark"]  .icon-moon, :root:not([data-theme="light"]) .icon-moon { display: none; }
[data-theme="dark"]  .icon-sun,  :root:not([data-theme="light"]) .icon-sun  { display: block; }
/* Light mode: show moon (click → go dark) */
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* Admin sidebar theme toggle */
.admin-sidebar-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
}
.admin-theme-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 22px;
  background: transparent; border: none; cursor: pointer;
  color: rgba(232,232,232,0.35); font-size: 12px; font-weight: 500;
  font-family: var(--font-body); transition: all var(--transition);
  letter-spacing: 0.2px;
}
.admin-theme-btn:hover { background: rgba(255,255,255,0.05); color: #E8E8E8; }
.theme-label-light { display: none; }
.theme-label-dark  { display: inline; }
[data-theme="light"] .theme-label-dark  { display: none; }
[data-theme="light"] .theme-label-light { display: inline; }

/* ---- DEFAULT (Dark Mode) ---- */
:root {
  --bg:           #0D0D0D;
  --bg-2:         #161616;
  --bg-card:      #111111;
  --text:         #E8E8E8;
  --text-2:       #888888;
  --text-3:       #444444;
  --border:       #252525;
  --accent:       #E8E8E8;
  --accent-2:     #888888;
  --accent-hover: #FFFFFF;
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:    0 6px 24px rgba(0,0,0,0.5);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.6);
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    100px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --transition:   0.22s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ---- CONTAINER ---- */
.container { max-width: 1100px; margin:0 auto; padding:0 24px; }

/* =============================================
   NAV
   ============================================= */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 48px; height: 64px;
  background: rgba(13,13,13,0.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; color: var(--text);
}
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:1.5px; background:var(--text);
  transition: width var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-username { font-size:13px; color:var(--text-3); font-weight:500; }
.nav-logout-btn {
  background:none; border:none; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--text-2);
  font-family:var(--font-body); transition:color var(--transition);
}
.nav-logout-btn:hover { color:var(--text); }
.nav-admin-link {
  padding:6px 14px; border:1.5px solid var(--border);
  border-radius:var(--radius-xl); font-size:13px; font-weight:600;
}
.nav-burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-burger span {
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:2px;
  transition:var(--transition);
}

/* ---- Language Switcher ---- */
.lang-switcher { position:relative; }
.lang-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:var(--radius-xl);
  background:transparent; border:1.5px solid var(--border);
  font-family:var(--font-body); font-size:12px; font-weight:700;
  color:var(--text-2); cursor:pointer; transition:all var(--transition);
  letter-spacing:0.5px;
}
.lang-btn:hover { border-color:var(--text); color:var(--text); }
.lang-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  min-width:140px; overflow:hidden; z-index:200;
}
.lang-dropdown a {
  display:flex; align-items:center; gap:9px;
  padding:10px 16px; font-size:13px; font-weight:500;
  color:var(--text-2); transition:all var(--transition); text-decoration:none;
}
.lang-dropdown a:hover { background:var(--bg-2); color:var(--text); }
.lang-dropdown a.active { color:var(--text); font-weight:700; background:var(--bg-2); }
.lang-flag { font-size:15px; line-height:1; }
.lang-switcher.open .lang-dropdown { display:block; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius-xl);
  font-family:var(--font-body); font-size:14px; font-weight:600;
  cursor:pointer; transition:all var(--transition); border:none;
}
.btn-primary { background:var(--text); color:var(--bg); }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline {
  background:transparent; color:var(--text);
  border:1.5px solid var(--border);
}
.btn-outline:hover { border-color:var(--text); transform:translateY(-1px); }
.btn-outline-small {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:var(--radius-xl);
  font-size:13px; font-weight:500; color:var(--text-2);
  border:1.5px solid var(--border); transition:all var(--transition);
}
.btn-outline-small:hover { color:var(--text); border-color:var(--text); }
.btn-sm { padding:8px 18px; font-size:13px; }

/* =============================================
   FLASH MESSAGES
   ============================================= */
.flash {
  position:fixed; top:72px; left:50%; transform:translateX(-50%);
  z-index:999; padding:12px 24px; border-radius:var(--radius-md);
  font-size:14px; font-weight:500; box-shadow:var(--shadow-md);
  animation: flashIn 0.3s ease, flashOut 0.3s ease 2.7s forwards;
}
.flash-success { background:var(--text); color:var(--bg); }
.flash-error { background:#EF4444; color:#fff; }
@keyframes flashIn { from{opacity:0;transform:translate(-50%,-10px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes flashOut { from{opacity:1} to{opacity:0;pointer-events:none} }

/* =============================================
   HERO
   ============================================= */
.hero {
  min-height: 100vh; display:flex; align-items:center;
  padding: 80px 0 60px;
}
.hero-inner {
  display:grid; grid-template-columns:1fr auto;
  gap:80px; align-items:center;
}
.hero-eyebrow {
  font-size:12px; font-weight:600; color:var(--text-3);
  text-transform:uppercase; letter-spacing:3px; margin-bottom:12px;
}
.hero-name {
  font-family:var(--font-display);
  font-size:clamp(56px,8vw,96px);
  font-weight:600; line-height:1.0;
  letter-spacing:-3px; margin-bottom:12px;
}
.hero-name em { font-style:italic; color:var(--text-2); }
.hero-sub { font-size:15px; color:var(--text-3); margin-bottom:20px; }
.hero-bio {
  font-size:17px; color:var(--text-2); line-height:1.75;
  max-width:480px; margin-bottom:32px;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.hero-social { display:flex; gap:8px; flex-wrap:wrap; }
.social-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--radius-xl);
  background:var(--bg-2); border:1.5px solid var(--border);
  font-size:13px; font-weight:500; color:var(--text-2);
  transition:all var(--transition);
}
.social-pill:hover { background:var(--text); color:var(--bg); border-color:var(--text); }

/* Hero graphic */
.hero-graphic { flex-shrink:0; }
.hero-card-stack { display:flex; flex-direction:column; gap:12px; }
.hero-cat-card {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; background:var(--bg-card);
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  transition:all var(--transition); min-width:200px;
}
.hero-cat-card:hover { border-color:var(--text); transform:translateX(-4px); }
.hero-cat-emoji { font-size:22px; }
.hero-cat-name { font-weight:600; font-size:14px; flex:1; }
.hero-cat-count { font-size:12px; color:var(--text-3); }

/* =============================================
   SECTIONS
   ============================================= */
.section { padding:96px 0; }
.section-header { margin-bottom:48px; }
.section-header-row {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:48px; flex-wrap:wrap; gap:16px;
}
.section-eyebrow {
  font-size:11px; font-weight:700; color:var(--text-3);
  text-transform:uppercase; letter-spacing:4px; margin-bottom:8px;
}
.section-title {
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,44px);
  font-weight:600; letter-spacing:-1px;
}

/* =============================================
   CATEGORIES
   ============================================= */
.categories-section { background:var(--bg-2); }
.categories-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.category-card {
  display:flex; flex-direction:column; gap:8px;
  padding:24px; background:var(--bg-card);
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  transition:all var(--transition);
}
.category-card:hover { border-color:var(--text); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.category-emoji { font-size:32px; margin-bottom:4px; }
.category-name { font-weight:700; font-size:16px; }
.category-desc { font-size:13px; color:var(--text-2); line-height:1.5; flex:1; }
.category-count { font-size:12px; color:var(--text-3); font-weight:500; }

/* =============================================
   BLOG CARDS
   ============================================= */
.blog-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}
.blog-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; transition:all var(--transition);
}
.blog-card:hover { border-color:var(--text); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.blog-card-link { display:flex; flex-direction:column; flex:1; color:inherit; }
.blog-card-thumb { width:100%; height:190px; object-fit:cover; }
.blog-card-thumb-placeholder {
  width:100%; height:190px; display:flex; align-items:center;
  justify-content:center; font-size:40px; background:var(--bg-2);
}
.blog-card-body {
  padding:20px; flex:1; display:flex; flex-direction:column;
}
.blog-card-meta {
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--text-3); margin-bottom:10px;
}
.blog-card-cat {
  padding:3px 10px; border-radius:100px;
  background:var(--text); color:var(--bg);
  font-size:11px; font-weight:700;
}
.blog-card-title {
  font-family:var(--font-display); font-size:18px; font-weight:600;
  line-height:1.3; margin-bottom:8px; flex:1;
}
.blog-card-excerpt {
  font-size:13px; color:var(--text-2); line-height:1.6; margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; border-top:1px solid var(--border);
}
.blog-card-read { font-size:13px; font-weight:600; color:var(--text); }
.blog-card-comments { font-size:12px; color:var(--text-3); display:flex; align-items:center; gap:4px; }
.blog-card-author {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-3); margin-top:12px;
  padding:7px 11px; background:var(--bg-2);
  border:1px solid var(--border); border-radius:8px;
}
.blog-card-author-icon { opacity:0.5; flex-shrink:0; }

/* =============================================
   BLOG PAGE
   ============================================= */
.blog-page-header { padding:120px 0 48px; }
.blog-page-filters {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:48px;
}
.filter-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:var(--radius-xl);
  border:1.5px solid var(--border); background:transparent;
  font-family:var(--font-body); font-size:13px; font-weight:500;
  color:var(--text-2); cursor:pointer; transition:all var(--transition);
  text-decoration:none;
}
.filter-btn:hover, .filter-btn.active {
  background:var(--text); border-color:var(--text); color:var(--bg);
}
.filter-count {
  background:rgba(232,232,232,0.12); padding:1px 6px; border-radius:100px;
  font-size:11px;
}
.filter-btn:not(.active) .filter-count { background:var(--bg-2); color:var(--text-3); }
.empty-state { text-align:center; padding:80px 0; }
.empty-icon { font-size:48px; margin-bottom:16px; }

/* =============================================
   PAGINATION
   ============================================= */
.pagination-wrap { margin-top:40px; }
.pagination { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); font-size:14px; font-weight:500;
  color:var(--text-2); transition:all var(--transition); text-decoration:none;
}
.page-btn:hover { border-color:var(--text); color:var(--text); }
.page-btn.active { background:var(--text); border-color:var(--text); color:var(--bg); }
.page-btn.disabled { color:var(--border); cursor:default; }

/* =============================================
   POST PAGE
   ============================================= */
.post-hero { padding:100px 0 48px; }
.back-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:var(--text-3); margin-bottom:24px;
  transition:color var(--transition);
}
.back-link:hover { color:var(--text); }
.post-meta {
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px; flex-wrap:wrap;
}
.post-meta-date, .post-meta-comments { font-size:14px; color:var(--text-3); }
.post-title {
  font-family:var(--font-display);
  font-size:clamp(28px,5vw,52px);
  font-weight:600; line-height:1.1; letter-spacing:-1px; margin-bottom:16px;
}
.post-excerpt { font-size:18px; color:var(--text-2); line-height:1.7; margin-bottom:24px; max-width:720px; }
.post-author {
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:var(--radius-xl);
  background:var(--bg-2); border:1.5px solid var(--border);
}
.post-author-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--text); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.post-author-name { font-size:13px; font-weight:600; }

/* Images */
.post-images-grid { display:grid; gap:12px; margin:32px 0; }
.post-images-grid.count-1 { grid-template-columns:1fr; }
.post-images-grid.count-2 { grid-template-columns:1fr 1fr; }
.post-images-grid.count-3 { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.post-images-grid.count-3 .post-img:first-child { grid-row:1/3; }
.post-images-grid.count-4, .post-images-grid.count-many { grid-template-columns:1fr 1fr; }
.post-img {
  border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:16/10; cursor:zoom-in;
}
.post-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.post-img:hover img { transform:scale(1.03); }

/* Post body */
.post-body {
  max-width:720px; font-size:17px; line-height:1.8; color:var(--text-2);
  padding:32px 0 48px;
}
.post-body h2, .post-body h3 {
  font-family:var(--font-display); color:var(--text);
  margin:1.8em 0 0.5em; letter-spacing:-0.5px;
}
.post-body p { margin-bottom:1.2em; }
.post-body code {
  background:var(--bg-2); padding:2px 7px; border-radius:4px;
  font-size:0.88em; color:var(--text); border:1px solid var(--border);
}
.post-body pre {
  background:#13131F; color:#C8D3F5; padding:20px 24px;
  border-radius:var(--radius-md); overflow-x:auto; margin:1.5em 0;
  border:1px solid #1E1E3A;
}
.post-body pre code { background:none; padding:0; color:inherit; border:none; font-size:14px; }
.post-body a { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.post-body ul, .post-body ol { padding-left:1.5em; margin-bottom:1.2em; }
.post-body li { margin-bottom:0.4em; }
.post-body blockquote {
  border-left:3px solid var(--border); padding-left:1.2em;
  color:var(--text-2); margin:1.5em 0; font-style:italic;
}
.post-body img { border-radius:var(--radius-md); margin:1em 0; }

/* Reactions */
.reactions-bar {
  display:flex; gap:8px; flex-wrap:wrap;
  padding:20px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-bottom:40px;
}
.reaction-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius-xl);
  border:1.5px solid var(--border); background:transparent;
  font-family:var(--font-body); font-size:14px; cursor:pointer;
  transition:all var(--transition); color:var(--text-2); text-decoration:none;
}
.reaction-btn:hover { border-color:var(--text); color:var(--text); background:var(--bg-2); }
.reaction-btn.reacted { background:var(--text); color:var(--bg); border-color:var(--text); }
.reaction-emoji { font-size:18px; }
.reaction-count { font-weight:600; font-size:13px; }
.reaction-label { font-size:13px; }

/* Lightbox */
.lightbox {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.95); align-items:center; justify-content:center;
  cursor:zoom-out; padding:24px;
}
.lightbox.open { display:flex; }
.lightbox img { max-width:100%; max-height:90vh; border-radius:var(--radius-md); object-fit:contain; }

/* =============================================
   COMMENTS
   ============================================= */
.comments-section { padding:40px 0 80px; }
.comments-title {
  font-family:var(--font-display); font-size:28px; font-weight:600;
  margin-bottom:28px; display:flex; align-items:center; gap:12px;
}
.comments-count {
  background:var(--bg-2); border:1.5px solid var(--border);
  padding:2px 10px; border-radius:var(--radius-xl);
  font-size:16px; font-family:var(--font-body);
}
.comment-form-wrap {
  background:var(--bg-2); border-radius:var(--radius-md);
  padding:28px; margin-bottom:40px;
  border:1px solid var(--border);
}
.comment-guest-notice {
  display:flex; align-items:center; gap:8px;
  padding:16px 20px; background:var(--bg-2);
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  font-size:14px; color:var(--text-2); margin-bottom:32px;
}
.comment-guest-notice a { color:var(--text); font-weight:600; text-decoration:underline; }
.comment-list { display:flex; flex-direction:column; gap:16px; }
.comment-item {
  display:flex; gap:14px; padding:20px;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--radius-md);
}
.comment-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--text); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; flex-shrink:0;
}
.comment-body-wrap { flex:1; }
.comment-header {
  display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;
}
.comment-name { font-weight:600; font-size:14px; }
.comment-time { font-size:12px; color:var(--text-3); }
.comment-text { font-size:15px; color:var(--text-2); line-height:1.6; }
.comment-delete-form { display:inline; margin-left:auto; }
.comment-delete-btn {
  background:none; border:none; cursor:pointer; color:var(--text-3);
  padding:2px; display:inline-flex; transition:color var(--transition);
}
.comment-delete-btn:hover { color:#EF4444; }
.comments-empty { color:var(--text-3); font-size:14px; padding:20px 0; }

/* =============================================
   FORMS
   ============================================= */
.form-group {
  display:flex; flex-direction:column; gap:6px; margin-bottom:16px;
}
.form-group label {
  font-size:13px; font-weight:600; color:var(--text-2);
}
.form-group input,
.form-group textarea,
.form-group select {
  padding:12px 16px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg-2);
  font-family:var(--font-body); font-size:15px; color:var(--text);
  transition:border-color var(--transition); outline:none; width:100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color:var(--text); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-group input.is-error,
.form-group textarea.is-error { border-color:#EF4444; }
.form-error { font-size:12px; color:#EF4444; }
.form-control { /* alias */ }
.form-check { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.form-check input[type="checkbox"] { width:16px; height:16px; cursor:pointer; accent-color:var(--text); }
.form-check label { font-size:14px; color:var(--text-2); cursor:pointer; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* =============================================
   AUTH PAGES
   ============================================= */
.auth-wrap {
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:24px; padding-top:80px;
}
.auth-card {
  width:100%; max-width:420px; background:var(--bg-card);
  border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:44px 40px; box-shadow:var(--shadow-lg);
}
.auth-logo {
  font-family:var(--font-display); font-size:24px; font-weight:600;
  display:block; margin-bottom:24px;
}
.auth-title { font-family:var(--font-display); font-size:28px; font-weight:600; margin-bottom:6px; }
.auth-sub { font-size:14px; color:var(--text-3); margin-bottom:28px; }
.auth-switch { font-size:14px; color:var(--text-3); margin-top:20px; text-align:center; }
.auth-switch a { color:var(--text); font-weight:600; }

/* =============================================
   FOOTER
   ============================================= */
.footer { border-top:1px solid var(--border); padding:48px 0; }
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:24px;
}
.footer-brand { display:flex; flex-direction:column; gap:4px; }
.footer-logo { font-family:var(--font-display); font-size:20px; font-weight:600; }
.footer-tagline { font-size:12px; color:var(--text-3); }
.footer-social { display:flex; gap:16px; align-items:center; }
.footer-social-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--text-2);
  transition:color var(--transition);
}
.footer-social-link:hover { color:var(--text); }
.footer-copy { font-size:12px; color:var(--text-3); }

/* =============================================
   IMAGE UPLOAD
   ============================================= */
.image-upload-area {
  border:2px dashed var(--border); border-radius:var(--radius-md);
  padding:32px; text-align:center; cursor:pointer;
  transition:all var(--transition);
}
.image-upload-area:hover { border-color:var(--text); background:var(--bg-2); }
.upload-icon { font-size:32px; margin-bottom:8px; }
.upload-text { font-size:14px; font-weight:500; color:var(--text-2); }
.upload-sub { font-size:12px; color:var(--text-3); margin-top:4px; }
.image-previews {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:10px; margin-top:12px;
}
.img-preview-wrap {
  position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden;
}
.img-preview-wrap img { width:100%; height:100%; object-fit:cover; }

/* =============================================
   ADMIN
   ============================================= */
.admin-body { overflow-x:hidden; }
.admin-layout { display:flex; min-height:100vh; }

.admin-sidebar {
  width:240px; background:#080808; color:#E8E8E8;
  padding:0; flex-shrink:0; position:fixed; top:0; bottom:0;
  display:flex; flex-direction:column; overflow-y:auto;
  border-right:1px solid #1C1C1C;
}
.admin-sidebar-logo {
  font-family:var(--font-display); font-size:19px; font-weight:600;
  padding:22px 24px 18px; color:#E8E8E8;
  border-bottom:1px solid rgba(255,255,255,0.06);
  letter-spacing:-0.3px;
}
.admin-nav { display:flex; flex-direction:column; padding:10px 0; flex:1; }
.admin-nav-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 22px; font-size:13px; font-weight:500;
  color:rgba(232,232,232,0.4); cursor:pointer;
  transition:all var(--transition);
  border-left:3px solid transparent; text-decoration:none;
}
.admin-nav-item:hover, .admin-nav-item.active {
  background:rgba(255,255,255,0.05);
  color:#E8E8E8; border-left-color:rgba(232,232,232,0.7);
}
.admin-logout-btn {
  display:flex; align-items:center; gap:10px;
  padding:13px 22px; background:transparent;
  border:none; color:rgba(232,232,232,0.3);
  font-size:13px; cursor:pointer; width:100%;
  transition:all var(--transition); font-family:var(--font-body);
  border-top:1px solid rgba(255,255,255,0.06);
}
.admin-logout-btn:hover { background:rgba(255,255,255,0.06); color:#E8E8E8; }

.admin-main {
  flex:1; margin-left:240px; padding:32px 40px;
  background:var(--bg); min-height:100vh; overflow-y:auto;
}
.admin-topbar {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:32px;
}
.admin-page-title { font-family:var(--font-display); font-size:26px; font-weight:600; }
.admin-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px;
}
.stat-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:20px;
}
.stat-val {
  font-family:var(--font-display); font-size:36px; font-weight:600;
  margin-bottom:4px;
}
.stat-label { font-size:13px; color:var(--text-3); }
.admin-card {
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:28px; margin-bottom:20px;
}
.admin-card-title {
  font-family:var(--font-display); font-size:18px; font-weight:600;
  margin-bottom:20px;
}

/* Table */
.posts-table { width:100%; border-collapse:collapse; }
.posts-table th, .posts-table td {
  padding:12px 14px; text-align:left;
  border-bottom:1px solid var(--border); font-size:14px;
}
.posts-table th {
  font-weight:600; color:var(--text-3); font-size:11px;
  text-transform:uppercase; letter-spacing:1px;
}
.posts-table tr:hover td { background:var(--bg-2); }
.table-actions { display:flex; gap:6px; }
.table-btn {
  padding:5px 12px; border-radius:6px; border:1.5px solid var(--border);
  background:transparent; font-size:12px; font-weight:500; cursor:pointer;
  transition:all var(--transition); color:var(--text-2); text-decoration:none;
  font-family:var(--font-body);
}
.table-btn:hover { border-color:var(--text); color:var(--text); }
.table-btn.danger:hover { border-color:#EF4444; color:#EF4444; }
.tag {
  padding:3px 10px; border-radius:100px; background:var(--text);
  color:var(--bg); font-size:11px; font-weight:700;
}
.status-badge {
  padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600;
}
.status-badge.published { background:#14532D; color:#86EFAC; }
.status-badge.draft { background:var(--bg-2); color:var(--text-3); border:1px solid var(--border); }

/* Quill Editor Dark Theme */
.ql-toolbar.ql-snow {
  background:var(--bg-2) !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.ql-container.ql-snow {
  background:var(--bg-card) !important;
  border:1.5px solid var(--border) !important;
  border-top:none !important;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-family:var(--font-body); font-size:15px; min-height:300px;
}
.ql-editor { color:var(--text) !important; min-height:300px; line-height:1.7; }
.ql-editor.ql-blank::before { color:var(--text-3) !important; font-style:normal; }
.ql-snow .ql-stroke { stroke:var(--text-2) !important; }
.ql-snow .ql-fill { fill:var(--text-2) !important; }
.ql-snow .ql-picker { color:var(--text-2) !important; }
.ql-snow .ql-picker-options {
  background:var(--bg-card) !important;
  border-color:var(--border) !important;
}
.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected { color:var(--text) !important; }
.ql-snow button:hover .ql-stroke,
.ql-snow button.ql-active .ql-stroke { stroke:var(--text) !important; }
.ql-snow button:hover .ql-fill,
.ql-snow button.ql-active .ql-fill { fill:var(--text) !important; }
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-label.ql-active { color:var(--text) !important; }
.ql-editor h1, .ql-editor h2, .ql-editor h3 { color:var(--text) !important; }
.ql-editor a { color:#7DABF8 !important; }
.ql-editor blockquote {
  border-left:3px solid var(--border) !important;
  color:var(--text-2) !important;
}
.ql-editor pre { background:#13131F !important; color:#C8D3F5 !important; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .nav { padding:0 20px; }
  .nav-links {
    display:none; flex-direction:column; gap:16px;
    position:fixed; top:64px; left:0; right:0;
    background:var(--bg-card); padding:24px 20px;
    border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); z-index:99;
  }
  .nav-links.open { display:flex; }
  .nav-burger { display:flex; }

  .hero-inner { grid-template-columns:1fr; gap:40px; }
  .hero-graphic { display:none; }
  .hero-name { font-size:52px; }

  .contact-card { grid-template-columns:1fr; gap:32px; padding:32px 20px; }
  .form-row { grid-template-columns:1fr; }
  .admin-layout { flex-direction:column; }
  .admin-sidebar { display:none; }
  .admin-main { margin-left:0; padding:20px; }
  .admin-stats { grid-template-columns:1fr 1fr; }

  .post-images-grid.count-3 { grid-template-columns:1fr 1fr; }
  .post-images-grid.count-3 .post-img:first-child { grid-row:auto; }
}

@media (max-width: 600px) {
  .footer-inner { flex-direction:column; gap:16px; text-align:center; }
  .footer-social { justify-content:center; }
  .auth-card { padding:32px 20px; }
  .section { padding:64px 0; }
  .categories-grid { grid-template-columns:1fr 1fr; }
  .admin-stats { grid-template-columns:1fr 1fr; }
  .lang-btn span { display:none; }
}