@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:#14171F; --paper:#F5F3EE; --card:#fff; --border:#DDD8CB;
  --signal:#D62839; --steel:#2E4057; --text:#1B1E27; --text-dim:#5B5F6B;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Inter',sans-serif; background:var(--paper); color:var(--text); }
a{ color:var(--steel); }
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:220px; background:var(--ink); color:#F5F3EE; flex:0 0 220px; padding:22px 16px;
}
.admin-sidebar h2{ font-size:1.1rem; margin:0 0 22px; }
.admin-sidebar ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.admin-sidebar a{ color:#F5F3EE; opacity:.85; display:block; padding:9px 10px; border-radius:4px; font-size:.9rem; text-decoration:none; }
.admin-sidebar a:hover, .admin-sidebar a.active{ opacity:1; background:rgba(255,255,255,0.1); }
.admin-sidebar .divider{ border-top:1px solid rgba(255,255,255,.15); margin:14px 0; }
.admin-main{ flex:1; padding: 30px 34px; max-width:1100px; }
.admin-topline{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.admin-topline h1{ font-size:1.5rem; margin:0; }
.btn{ display:inline-block; background:var(--signal); color:#fff; border:none; padding:9px 16px; border-radius:4px; font-weight:600; font-size:.88rem; cursor:pointer; text-decoration:none; }
.btn:hover{ background:#B0202F; }
.btn-secondary{ background:var(--steel); }
.btn-secondary:hover{ background:#233248; }
.btn-outline{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-danger{ background:#8A1F27; }
table{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:.88rem; vertical-align:middle; }
th{ background:#EFEBDF; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-published{ background:#DDF3E4; color:#1E5631; }
.badge-draft{ background:#EEE; color:#666; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:5px; padding:20px 22px; margin-bottom:20px; }
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:5px; }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=url], .form-row input[type=number], .form-row select, .form-row textarea{
  width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:4px; font-family:inherit; font-size:.9rem;
}
.form-row textarea{ min-height:120px; font-family:'IBM Plex Mono',monospace; font-size:.82rem; }
.form-row.checkbox{ display:flex; align-items:center; gap:8px; }
.form-row.checkbox label{ margin:0; }
.form-hint{ font-size:.78rem; color:var(--text-dim); margin-top:4px; }
.alert{ padding:11px 14px; border-radius:4px; font-size:.88rem; margin-bottom:16px; }
.alert-success{ background:#DDF3E4; color:#1E5631; border:1px solid #b9e3c5; }
.alert-error{ background:#FBE0E2; color:#8A1F27; border:1px solid #f2b7bc; }
.row-actions a, .row-actions button{ font-size:.82rem; margin-right:10px; }
.admin-auth-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--ink); }
.admin-auth-box{ background:#fff; padding:34px 32px; border-radius:6px; width:100%; max-width:380px; }
.admin-auth-box h1{ font-size:1.3rem; margin:0 0 18px; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:24px; }
.stat-box{ background:var(--card); border:1px solid var(--border); border-radius:5px; padding:16px 18px; }
.stat-box .num{ font-size:1.8rem; font-weight:700; }
.stat-box .label{ font-size:.78rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; }
.color-preview{ display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:6px; vertical-align:middle; }

/* ---------------- Icons & effects ---------------- */
.fa-solid, .fa-regular, .fa-brands{ vertical-align: -0.06em; }

.admin-sidebar h2 i{ margin-right:6px; }
.admin-sidebar a{ transition: background-color .15s ease, opacity .15s ease, padding-left .15s ease; }
.admin-sidebar a i{ width:1.15em; text-align:center; margin-right:4px; }
.admin-sidebar a:hover{ padding-left: 14px; }

.admin-topline h1 i{ color: var(--signal); margin-right:4px; }
.card h3 i{ color: var(--signal); margin-right:4px; }

.btn{ transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 3px 8px rgba(20,23,31,0.18); }
.btn:active{ transform: translateY(0); }
.btn i{ margin-right:4px; }

.card{ transition: box-shadow .15s ease; }
.card:hover{ box-shadow: 0 2px 10px rgba(20,23,31,0.06); }

.stat-box{ position:relative; overflow:hidden; transition: transform .15s ease, box-shadow .15s ease; }
.stat-box:hover{ transform: translateY(-2px); box-shadow: 0 3px 10px rgba(20,23,31,0.08); }
.stat-icon{ position:absolute; top:14px; right:14px; font-size:1.4rem; color: var(--border); }

table tr{ transition: background-color .15s ease; }
tbody tr:hover{ background: #FAF8F2; }

.row-actions a, .row-actions button{ transition: color .15s ease; }

.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(46,64,87,0.12);
  outline: none;
}

@media (prefers-reduced-motion: reduce){
  .btn:hover, .stat-box:hover, .admin-sidebar a:hover{ transform:none; padding-left:10px; }
}

/* ---------------- Social settings rows ---------------- */
.social-setting-row{
  display:flex;
  align-items:flex-end;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.social-setting-row:last-of-type{ border-bottom:none; }
.social-setting-main{ flex:1 1 260px; min-width:200px; }
.social-setting-main label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:5px; }
.social-setting-main input{ width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:4px; font-size:.9rem; }
.social-setting-toggle{
  display:flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:600;
  padding-bottom:9px;
  cursor:pointer;
  user-select:none;
}
.social-setting-toggle input{ width:16px; height:16px; cursor:pointer; }
.social-setting-status{
  font-size:.78rem;
  padding-bottom:11px;
  white-space:nowrap;
  flex:0 0 auto;
}
.social-setting-status.is-live{ color:#1E5631; }
.social-setting-status.is-hidden{ color:var(--text-dim); }