/* socmed — the RPV palette (Midnight anchor, Terracotta action, Cream canvas),
   the same tokens as the Partners and Marketing desks so they read as one office. */
:root {
  --midnight: #0D1B2A; --slate: #1C3A52; --steel: #2E5F80; --terracotta: #C4622D; --ember: #E07B45;
  --sand: #F0C89A; --cream: #FAF7F2; --mist: #EEF2F5; --stone: #8FA3B1; --charcoal: #2C3E4A;
  --ok: #2D7A4F; --ok-bg: #D4EDDF; --warn: #B87333; --warn-bg: #F5E6D0; --err: #B83232; --err-bg: #F5D4D4; --info-bg: #D4E5F5;
  --muted: #6E8390; --border: rgba(44,62,74,.12); --radius: 12px; --shadow: 0 1px 3px rgba(13,27,42,.06);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 14px/1.5 var(--font); color: var(--charcoal); background: var(--cream); -webkit-font-smoothing: antialiased; }
a { color: var(--steel); text-decoration: none; } a:hover { color: var(--terracotta); text-decoration: underline; }
.hidden { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .fine { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.mt { margin-top: 12px; }

.top { background: var(--midnight); color: #fff; }
.top-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 16px; }
.mark { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .mark i { color: var(--ember); font-style: normal; }
.brand .rule { width: 1px; height: 24px; background: rgba(255,255,255,.14); }
.brand h1 { font-size: 15px; font-weight: 600; margin: 0; } .brand p { margin: 1px 0 0; font-size: 12px; color: var(--stone); }
.spacer { flex: 1; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { font-size: 12px; border-radius: 999px; padding: 3px 10px; background: var(--mist); color: var(--charcoal); white-space: nowrap; }
.top .pill { background: rgba(255,255,255,.12); color: #fff; }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .top .pill.ok { background: rgba(45,122,79,.55); color: #fff; }
.pill.warn { background: var(--warn-bg); color: var(--warn); } .top .pill.warn { background: rgba(184,115,51,.6); color: #fff; }
.pill.bad { background: var(--err-bg); color: var(--err); } .top .pill.bad { background: rgba(184,50,50,.65); color: #fff; }
.pill.info { background: var(--info-bg); color: var(--steel); }
.tabs { display: flex; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 0 24px; background: var(--midnight); overflow-x: auto; }
.tabs button { display: flex; align-items: center; gap: 8px; font: inherit; font-weight: 500; border: 0; background: transparent; color: var(--stone); padding: 12px 4px 10px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
.tabs button:hover { color: #fff; } .tabs button.on { color: #fff; border-bottom-color: var(--ember); }
.tabs .n:not(:empty) { min-width: 18px; text-align: center; font-size: 11px; background: rgba(255,255,255,.12); border-radius: 999px; padding: 1px 7px; }

main { padding: 24px; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.tab { display: none; flex-direction: column; gap: 20px; } .tab.on { display: flex; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.card h2 { margin: 0 0 4px; font-size: 17px; color: var(--midnight); } .card .sub { margin: 0 0 14px; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.right { justify-content: flex-end; }
.grid { display: grid; gap: 16px; } .grid.k2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grid.k4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.empty { padding: 28px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--border); border-radius: var(--radius); }

.btn { font: inherit; font-size: 13.5px; font-weight: 500; border: 1.5px solid var(--slate); background: transparent; color: var(--slate); border-radius: 6px; padding: 7px 14px; cursor: pointer; }
.btn:hover { background: var(--mist); } .btn[disabled] { opacity: .5; cursor: default; }
.btn.primary { background: var(--terracotta); border-color: var(--terracotta); color: #fff; } .btn.primary:hover { background: #A8521F; }
.btn.good { color: var(--ok); border-color: var(--ok); } .btn.danger { color: var(--err); border-color: var(--err); }
.btn.sm { font-size: 12.5px; padding: 4px 10px; }
input, select, textarea { font: inherit; font-size: 14px; border: 1px solid #7F93A3; background: #fff; border-radius: 6px; padding: 8px 10px; color: var(--charcoal); width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border: 1.5px solid var(--steel); }
textarea { min-height: 90px; resize: vertical; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 8px; } label.check input { width: auto; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; } .kv b { color: var(--midnight); font-weight: 600; }

/* queue */
.post { display: grid; grid-template-columns: 150px 1fr; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.post .thumb { width: 150px; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px; background: var(--mist); }
.post.story .thumb { aspect-ratio: 9/16; }
.post h3 { margin: 0; font-size: 15px; color: var(--midnight); }
.post .msg { white-space: pre-wrap; margin: 8px 0; }
.post .why { font-size: 12.5px; color: var(--muted); background: var(--mist); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; }
.post .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.post .lesson { font-size: 12.5px; color: var(--steel); }
.when { width: auto; }
@media (max-width: 600px) { .post { grid-template-columns: 1fr; } .post .thumb { width: 100%; max-width: 260px; } .top-in { padding: 0 16px; } main { padding: 16px; } }

/* photos */
.ph { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ph img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .ph.hidden-ph img { opacity: .35; }
.ph .cap { padding: 8px; font-size: 12px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.ph .cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop { border: 2px dashed var(--stone); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--muted); cursor: pointer; background: #fff; }
.drop.over { border-color: var(--terracotta); background: #FBECE2; }

/* log */
.log { font-size: 13px; } .log div { padding: 6px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 150px 90px 1fr; gap: 10px; }
.log .k { color: var(--steel); font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--midnight); color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: 0 12px 36px rgba(13,27,42,.16); z-index: 20; max-width: 90vw; }
.toast.bad { background: var(--err); }
.modal { position: fixed; inset: 0; background: rgba(13,27,42,.45); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 16px; }
.modal-in { background: #fff; border-radius: var(--radius); padding: 20px; width: min(760px, 100%); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.modal-in h3 { margin: 0; color: var(--midnight); }
.preview { display: flex; gap: 12px; flex-wrap: wrap; } .preview img { max-height: 320px; border-radius: 8px; border: 1px solid var(--border); }