/* Iraq 24 / reference-inspired studio. Brand orange and charcoal are retained. */
:root {
  color-scheme:light;
  --ink:#333333; --muted:#66645f; --paper:#f2f1ee; --white:#ffffff;
  --line:#deddd7; --orange:#d54101; --accent-text:#b93800; --orange-pale:#fff0e8; --green:#287052;
  --surface-soft:#f7f6f3; --field:#ffffff; --chrome:rgba(255,255,255,.94);
  --hero:#333333; --hero-text:#ffffff; --hero-muted:#dedcd6; --on-accent:#ffffff;
  --warning-bg:#fff4e7; --warning-text:#795335; --warning-line:#e9d3b9;
  --danger-bg:#fff0ee; --danger-text:#b52e29; --danger-line:#edcbc6;
  --success-bg:#eaf3ed; --success-text:#2c6e4f; --focus:#d54101;
  --shadow:0 8px 30px #29251e08; --header-shadow:0 10px 30px #29251e0b;
  --sidebar:258px; --shell-gap:16px; --radius:20px; --studio-fold:620ms;
  --studio-ease:cubic-bezier(.65,0,.35,1);
}
:root[data-theme=dark] {
  color-scheme:dark;
  --ink:#f3f1ec; --muted:#b3afa8; --paper:#1b1b1b; --white:#272727;
  --line:#41403d; --orange:#ff8a50; --accent-text:#ff8a50; --orange-pale:#3d2b23; --green:#86cfaa;
  --surface-soft:#30302e; --field:#212121; --chrome:rgba(39,39,39,.96);
  --hero:#333333; --hero-text:#ffffff; --hero-muted:#dedcd6; --on-accent:#25170f;
  --warning-bg:#342a21; --warning-text:#e6c39e; --warning-line:#5a4632;
  --danger-bg:#3b2525; --danger-text:#ffb5ac; --danger-line:#71413c;
  --success-bg:#22392e; --success-text:#a4dbb8; --focus:#ff9c69;
  --shadow:0 10px 28px #00000018; --header-shadow:0 10px 30px #0000002b;
}
body { background:var(--paper); color:var(--ink); }
button,input,textarea,select { color:var(--ink); }
input,textarea,select { background:var(--field); border-color:var(--line); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
small,.muted,.field-help,.breadcrumb,.sidebar-label { color:var(--muted); }
:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
::selection { background:var(--orange); color:var(--on-accent); }
* { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.button,.icon-btn { min-block-size:44px; border-radius:12px; }
.icon-btn { min-inline-size:44px; color:var(--ink); }
.primary { background:#d54101; color:#fff; }
.dark { background:var(--hero); color:#fff; border-color:var(--line); }
.subtle,.icon-btn { background:var(--white); border-color:var(--line); }
.danger { background:var(--danger-bg); color:var(--danger-text); border-color:var(--danger-line); }
.error { color:var(--danger-text); }
.button:active:not(:disabled),.icon-btn:active:not(:disabled) { transform:scale(.97); }
.profile { min-block-size:44px; }
.profile>span:first-child { background:var(--orange-pale); color:var(--orange); }
.panel,.metric,.content-card,.media-item,.list-row,.settings-grid,.users-table,dialog { background:var(--white); border-color:var(--line); }
.panel,.metric,.content-card,.media-item { box-shadow:var(--shadow); }
.check-field,.image-preview,.media-item img,.card-image { background:var(--surface-soft); }
.media-item button { background:var(--white); color:var(--orange); }
.card-image .placeholder { color:var(--muted); }
.tag,.local-pill { background:var(--success-bg); color:var(--success-text); }
.tag.off { background:var(--surface-soft); color:var(--muted); }
.note,.wp-card { background:var(--warning-bg); color:var(--warning-text); border-color:var(--warning-line); }
.wp-card p { color:var(--warning-text); }
.image-guide { background:var(--orange-pale); color:var(--ink); }
.image-guide small { color:var(--muted); }
.wp-categories { border-color:var(--line); }
dialog { color:var(--ink); border-radius:24px; }
dialog::backdrop { background:#101010b8; }
.auth-story { background:var(--hero); color:var(--hero-text); }
.auth-story p { color:var(--hero-muted); }
.auth-panel { padding-block:64px; }
.auth-panel h2 { color:var(--ink); }
.auth-theme { position:absolute; inset-block-start:24px; inset-inline-end:24px; z-index:3; }
body:has(#workspace:not([hidden]))>.auth-theme { display:none; }
.sidebar {
  inset-block:var(--shell-gap); inset-inline-start:var(--shell-gap); width:258px;
  background:var(--chrome); border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); overflow:hidden;
}
.admin-brand { padding:24px 18px 16px; gap:12px; min-block-size:92px; white-space:nowrap; }
.admin-brand img { width:54px; flex-shrink:0; }
.admin-brand>span { font-size:15px; }
.sidebar-tools { padding-inline:14px; padding-block-end:12px; display:flex; align-items:center; gap:12px; }
.sidebar-tools small { font-size:11px; white-space:nowrap; }
#sidebarToggle { flex-shrink:0; background:var(--surface-soft); }
#sidebarToggle svg { width:19px; height:19px; }
.sidebar-label { padding:0 24px 12px; }
.sidebar nav { padding-inline:14px; overscroll-behavior:contain; }
.sidebar nav button { min-block-size:44px; gap:12px; padding:10px 12px; margin-block-end:4px; color:var(--muted); border:1px solid transparent; }
.sidebar nav button span:first-child { inline-size:22px; flex-shrink:0; line-height:1; }
.sidebar nav button:hover { background:var(--surface-soft); color:var(--ink); }
.sidebar nav button.active { background:var(--orange-pale); color:var(--orange); border-color:color-mix(in srgb,var(--orange) 22%,transparent); }
.nav-label { white-space:nowrap; }
.sidebar-foot { padding:18px 24px; gap:12px; }
.main-shell { margin-inline-start:calc(var(--sidebar) + 32px); width:calc(100% - var(--sidebar) - 48px); }
.topbar { position:sticky; inset-block-start:0; z-index:35; height:80px; padding-inline:24px; border:0; background:var(--paper); gap:16px; }
.studio-scrolled .topbar { background:var(--chrome); box-shadow:var(--header-shadow); border-radius:0 0 20px 20px; backdrop-filter:blur(16px); }
.breadcrumb span { color:var(--line); }
.top-actions { gap:8px; }
.theme-toggle span { font-size:23px; line-height:1; display:inline-block; }
main { padding:24px 24px 132px; max-width:1500px; }
.page-heading { margin-block-end:24px; }
.page-heading h1 { font-size:clamp(28px,2.7vw,40px); line-height:1.45; margin-block-end:8px; }
.page-heading .eyebrow { font-size:10px; margin-block-end:8px; }
.page-heading p { line-height:1.9; max-inline-size:680px; }
.savebar { inset-inline-start:calc(var(--sidebar) + 56px); inset-inline-end:40px; inset-block-end:16px; padding:14px 20px; border:1px solid var(--line); border-radius:18px; background:var(--chrome); box-shadow:var(--header-shadow); }
#content { animation:none; }
.studio-overview { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); gap:20px; margin-block-end:20px; }
.studio-feature { min-block-size:330px; position:relative; overflow:hidden; border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; justify-content:space-between; background:var(--hero); color:var(--hero-text); isolation:isolate; }
.studio-feature>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; z-index:-2; }
.studio-feature::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#33333344,#262626dd 85%); z-index:-1; }
.feature-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.feature-top .tag { background:#333333b3; color:#fff; border:1px solid #ffffff40; padding:5px 10px; }
.feature-top>span:last-child { font-size:11px; color:var(--hero-muted); }
.studio-feature h2 { font-size:clamp(26px,2.4vw,36px); line-height:1.6; margin:24px 0 8px; }
.studio-feature p { color:var(--hero-muted); font-size:13px; max-inline-size:490px; margin-block-end:22px; }
.feature-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.feature-bottom .button { background:#fff; color:#333; }
.feature-bottom small { color:var(--hero-muted); }
.studio-status { padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(140deg,var(--surface-soft),var(--white)); display:flex; flex-direction:column; justify-content:space-between; gap:16px; }
.studio-status h2 { font-size:17px; margin:0; }
.studio-status p { color:var(--muted); font-size:12px; margin:0; }
.status-title { display:flex; align-items:center; justify-content:space-between; }
.content-distribution { display:grid; grid-template-columns:104px 1fr; gap:20px; align-items:center; }
.distribution-ring { width:104px; height:104px; border-radius:50%; background:conic-gradient(var(--orange) var(--visible-content),var(--line) 0); display:grid; place-items:center; position:relative; }
.distribution-ring::before { content:''; position:absolute; inset:7px; border-radius:50%; background:var(--white); }
.distribution-ring strong { position:relative; font-size:26px; font-weight:750; }
.distribution-legend { display:grid; gap:10px; font-size:12px; }
.distribution-legend div { display:flex; justify-content:space-between; gap:12px; color:var(--muted); }
.distribution-legend b { color:var(--ink); }
.studio-status footer { padding-block-start:16px; border-block-start:1px solid var(--line); display:grid; gap:4px; font-size:12px; }
.studio-status footer strong { color:var(--ink); font-weight:600; }
.metric-grid { gap:16px; margin-block-end:24px; }
.metric { position:relative; overflow:hidden; padding:20px; background:linear-gradient(120deg,var(--white),var(--surface-soft)); }
.metric:first-child { background:linear-gradient(120deg,var(--white),var(--orange-pale)); }
.metric strong { font-size:32px; margin-block:16px 6px; }
.metric-top i { background:var(--orange-pale); color:var(--orange); border-radius:8px; padding:5px 8px; line-height:1.2; }
.metric small { font-size:11px; }
.metric::after { content:''; position:absolute; inset-inline:20px; inset-block-end:0; block-size:2px; background:var(--orange); opacity:.35; }
.dashboard-grid { gap:20px; grid-template-columns:1.8fr 1fr; }
.recent-row { padding-block:14px; }
.recent-row img { width:88px; height:55px; }
.panel-head h2 { line-height:1.6; }
.cards { gap:20px; }
.content-card .card-image { aspect-ratio:16/10; }
.card-body { padding:20px; }
.card-actions { flex-wrap:wrap; }
.card-actions .icon-btn { width:36px; min-inline-size:36px; min-block-size:36px; }
.panel-head { gap:12px; }
.wp-card { margin-block-start:20px; }
.users-table td,.users-table th { line-height:1.8; }
.users-table select { margin-block-end:6px; }
#toast { background:var(--hero); color:#fff; border:1px solid #ffffff30; }
.eyebrow,.row-number,.sidebar nav button.active,.metric-top i,.media-item button,.profile>span:first-child { color:var(--accent-text); }
#menuBackdrop { display:none; }
@media(min-width:901px) {
  :root[data-compact=true] { --sidebar:74px; }
  [data-compact=true] .sidebar { clip-path:inset(0 0 0 184px round 24px); }
  [data-compact=true] .sidebar nav { inline-size:74px; padding-inline:14px; }
  [data-compact=true] .sidebar nav button { inline-size:44px; justify-content:center; padding-inline:10px; }
  [data-compact=true] .sidebar .nav-label,[data-compact=true] .admin-brand>span,[data-compact=true] .sidebar-tools small,[data-compact=true] .sidebar-label,[data-compact=true] .sidebar-foot>div { display:none; }
  [data-compact=true] .admin-brand { inline-size:74px; padding-inline:12px; justify-content:center; }
  [data-compact=true] .admin-brand img { width:46px; }
  [data-compact=true] .sidebar-foot { inline-size:74px; justify-content:center; padding:22px 0; }
  [data-compact=true] #sidebarToggle svg { transform:scaleX(-1); }
}
@media(min-width:1201px) { .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1200px) and (min-width:901px) {
  .studio-overview { grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr); }
  .content-distribution { grid-template-columns:80px 1fr; gap:12px; }
  .distribution-ring { width:80px; height:80px; }
  .top-actions .profile #userName { display:none; }
  main,.topbar { padding-inline:16px; }
  .savebar { inset-inline-start:calc(var(--sidebar) + 48px); inset-inline-end:32px; }
}
@media(max-width:900px) {
  :root { --sidebar:0px; --shell-gap:12px; }
  .main-shell { margin-inline-start:0; width:100%; }
  .sidebar { width:270px; inset-inline-start:12px; inset-block:80px 12px; transform:translateX(calc(100% + 24px)); transition:transform .42s var(--ease); clip-path:none; }
  .workspace.menu-open .sidebar { transform:none; }
  .sidebar-tools { display:none; }
  .admin-brand { min-block-size:82px; }
  .topbar { height:70px; padding-inline:16px; }
  .top-actions { gap:6px; }
  main { padding:24px 20px 150px; }
  .studio-overview,.dashboard-grid { grid-template-columns:1fr; }
  .studio-feature { min-block-size:300px; }
  .studio-status { gap:24px; }
  .content-distribution { grid-template-columns:104px 1fr; }
  .savebar { inset-inline:16px; inset-block-end:12px; padding:12px; gap:10px; }
  .save-actions { gap:6px; }
  #menuBackdrop:not([hidden]) { display:block; position:fixed; inset:70px 0 0; background:#10101088; border:0; z-index:45; }
}
@media(max-width:560px) {
  .topbar { padding-inline:10px; gap:6px; }
  .top-actions { gap:4px; }
  .top-actions>a { max-inline-size:118px; white-space:normal; line-height:1.4; padding:6px 8px; }
  main { padding-inline:16px; }
  .studio-feature { padding:22px; min-block-size:320px; }
  .feature-bottom { flex-wrap:wrap; }
  .metric-grid { gap:12px; }
  .metric { padding:16px; }
  .metric-top { font-size:11px; gap:6px; }
  .metric-top i { padding:4px 6px; }
  .metric small { line-height:1.7; display:block; }
  .metric strong { font-size:28px; }
  .recent-row { gap:10px; flex-wrap:wrap; }
  .recent-row img { width:64px; height:40px; }
  .recent-row>div { flex:1; min-inline-size:100px; }
  .panel { padding:20px; }
  .panel-head { flex-wrap:wrap; }
  .page-heading h1 { font-size:28px; }
  .save-actions .button { padding-inline:8px; }
  .auth-theme { inset-block-start:16px; inset-inline-end:16px; }
}
@media(prefers-reduced-motion:no-preference) {
  .icon-btn,.sidebar nav button,.profile { transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease); }
  .sidebar nav button:hover { transform:translateX(-2px); }
  .metric,.media-item { transition:transform .3s var(--ease); }
  .metric:hover,.media-item:hover { transform:translateY(-3px); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}