*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --surface2: #222;
  --border: #2a2a2a;
  --text: #e8e8e8;
  --muted: #888;
  --accent: #e63946;
  --accent-hover: #c1121f;
  --success: #2ec27e;
  --font: 'Segoe UI', system-ui, sans-serif;
}

body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

/* LOGIN */
#login-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--bg);
}
.login-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 380px;
  text-align: center;
}
.login-box h1 { font-size: 1.5rem; color: var(--accent); margin-bottom: 0.4rem; }
.login-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.login-box input[type="password"] {
  width: 100%; padding: 0.75rem 1rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 1rem;
  margin-bottom: 0.75rem; outline: none;
}
.login-box input[type="password"]:focus { border-color: var(--accent); }
.login-box button[type="submit"] {
  width: 100%; padding: 0.75rem;
  background: var(--accent); color: #fff; border: none;
  border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.login-box button[type="submit"]:hover { background: var(--accent-hover); }

/* DASHBOARD LAYOUT */
#dashboard-screen { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 1.5rem 1rem;
  position: fixed; top: 0; left: 0; height: 100vh;
}
.sidebar-logo { font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-bottom: 2rem; padding: 0 0.5rem; }

nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.nav-item {
  padding: 0.6rem 0.75rem; border-radius: 6px;
  color: var(--muted); font-size: 0.9rem; transition: all 0.15s;
}
.nav-item:hover { background: var(--border); color: var(--text); }
.nav-item.active { background: rgba(230,57,70,0.15); color: var(--accent); font-weight: 600; }

.logout-btn {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer;
  font-size: 0.85rem; text-align: left; transition: all 0.15s;
}
.logout-btn:hover { border-color: var(--accent); color: var(--accent); }

.main-content { margin-left: 220px; padding: 2rem; flex: 1; max-width: 900px; }

/* SECTION HEADER */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.section-header h2 { font-size: 1.3rem; font-weight: 700; }

/* BUTTONS */
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 0.55rem 1.1rem; border-radius: 6px; font-size: 0.9rem;
  font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  background: none; border: 1px solid var(--border); color: var(--text);
  padding: 0.55rem 1rem; border-radius: 6px; font-size: 0.9rem;
  cursor: pointer; transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--text); }
.btn-ghost.small { padding: 0.35rem 0.7rem; font-size: 0.8rem; }

.btn-danger {
  background: none; border: 1px solid #5a1a1a; color: #e06060;
  padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.8rem;
  cursor: pointer; transition: all 0.15s;
}
.btn-danger:hover { background: #3a0f0f; border-color: var(--accent); }

/* ARTICLE ROWS */
.article-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem; gap: 1rem;
}
.article-row:hover { border-color: #3a3a3a; }
.article-row-info { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.article-row-title { font-size: 0.95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.article-row-cat { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.article-row-date { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.article-row-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 3px; white-space: nowrap; }
.badge-live { background: rgba(46,194,126,0.15); color: var(--success); }
.badge-draft { background: rgba(136,136,136,0.15); color: var(--muted); }

.empty { color: var(--muted); padding: 2rem 0; }

/* EDITOR FORM */
.editor-form { display: flex; flex-direction: column; gap: 1.5rem; }

.form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.form-row label { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.form-row input[type="text"],
.form-row input[type="url"] {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 0.7rem 0.9rem; border-radius: 6px;
  font-size: 0.95rem; outline: none; transition: border-color 0.15s;
}
.form-row input:focus { border-color: var(--accent); }

/* IMAGE UPLOAD */
.image-upload-area { display: flex; flex-direction: column; gap: 0.5rem; }
.image-upload-area input[type="file"] {
  color: var(--muted); font-size: 0.85rem;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: 6px; padding: 0.6rem 0.8rem; cursor: pointer;
}
#image-preview-wrap { display: flex; align-items: center; gap: 1rem; }
#image-preview { height: 80px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); }
#upload-status { font-size: 0.82rem; color: var(--muted); }

/* QUILL EDITOR */
#quill-editor {
  background: var(--surface); border-radius: 0 0 6px 6px;
  min-height: 300px; font-size: 0.95rem; color: var(--text);
}
.ql-toolbar { background: var(--surface2); border: 1px solid var(--border) !important; border-radius: 6px 6px 0 0 !important; }
.ql-container { border: 1px solid var(--border) !important; border-top: none !important; border-radius: 0 0 6px 6px !important; }
.ql-editor { min-height: 280px; color: var(--text); }
.ql-editor.ql-blank::before { color: var(--muted); }
.ql-snow .ql-stroke { stroke: var(--muted); }
.ql-snow .ql-fill { fill: var(--muted); }
.ql-snow .ql-picker { color: var(--muted); }
.ql-snow .ql-picker-options { background: var(--surface2); border-color: var(--border); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--text); }

/* TOGGLE */
.row-inline { flex-direction: row; align-items: center; }
.toggle-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.9rem; }
.toggle-label input[type="checkbox"] { display: none; }
.toggle-track {
  width: 40px; height: 22px; background: var(--border);
  border-radius: 11px; position: relative; transition: background 0.2s;
}
.toggle-thumb {
  width: 16px; height: 16px; background: #fff;
  border-radius: 50%; position: absolute; top: 3px; left: 3px;
  transition: left 0.2s;
}
.toggle-label input:checked + .toggle-track { background: var(--accent); }
.toggle-label input:checked + .toggle-track .toggle-thumb { left: 21px; }

/* FORM ACTIONS */
.form-actions { display: flex; gap: 0.75rem; }
.save-status { font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }
.save-status.success { color: var(--success); }
.save-status.error { color: var(--accent); }

/* ERROR */
.error { color: var(--accent); font-size: 0.85rem; margin-top: 0.5rem; }

/* RESPONSIVE */
@media (max-width: 640px) {
  .sidebar { width: 100%; height: auto; position: relative; flex-direction: row; flex-wrap: wrap; padding: 1rem; }
  .main-content { margin-left: 0; padding: 1rem; }
  #dashboard-screen { flex-direction: column; }
  .article-row { flex-direction: column; align-items: flex-start; }
}