/* 社媒中控：沿用中控台 UniFi 风格（design-system/UNIFI.md）。手机优先。 */
:root {
  --bg:#f7f8fa; --surface:#fff; --ink:#202733; --muted:#646e7d; --line:#e5e8ed;
  --primary:#0065d4; --primary-hover:#0058bb; --pale:#edf5ff; --danger:#b33832; --danger-bg:#fff0ed;
  --ok:#26734b; --ok-bg:#eaf6ef; --warn:#8a5c0b; --warn-bg:#fff4dc; --radius:8px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.6 var(--font); }
a { color:var(--primary); }
h1 { font-size:24px; letter-spacing:-.3px; font-weight:650; margin:0; }
h2 { font-size:16px; margin:0 0 12px; } h3 { font-size:14px; margin:0 0 6px; }
p { margin:6px 0; }
.muted { color:var(--muted); } .small { font-size:12px; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; animation:none!important; } }

/* Shell */
.shell { display:grid; grid-template-columns:208px minmax(0,1fr); min-height:100vh; }
.sidebar { background:#fff; border-right:1px solid var(--line); padding:22px 12px 16px; display:flex; flex-direction:column; gap:20px; position:sticky; top:0; height:100vh; }
.brand { display:flex; flex-direction:column; padding:0 8px; }
.brand b { font-size:15px; font-weight:650; } .brand small { font-size:9px; letter-spacing:1.5px; color:#7b8492; }
.nav { display:flex; flex-direction:column; gap:3px; }
.nav a { display:flex; align-items:center; min-height:39px; padding:8px 12px; font-size:13px; border-radius:6px; color:#596374; text-decoration:none; }
.nav a:hover { background:#f3f5f8; color:var(--ink); }
.nav a.active { background:var(--pale); color:var(--primary); font-weight:600; }
.sidebar-foot { margin-top:auto; padding:0 8px; font-size:12px; color:var(--muted); }
.content { padding:26px 28px 48px; max-width:1400px; width:100%; }
.content.narrow { max-width:420px; margin:8vh auto; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.page-head p { margin:4px 0 0; color:var(--muted); font-size:12px; }

/* Panels & layout */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.stats { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:16px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px; }
.stat strong { display:block; font-size:26px; line-height:1.2; }
.stat span { color:var(--muted); font-size:12px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spread { justify-content:space-between; }
.stack > * + * { margin-top:10px; }
.empty { background:#fafbfc; border:1px dashed #dce1e8; border-radius:7px; padding:24px 20px; color:var(--muted); text-align:center; }
.alert { background:var(--pale); color:#21466d; border-radius:6px; padding:10px 12px; }
.alert.error, .alert[role=alert] { background:var(--danger-bg); color:var(--danger); }
.alert.ok { background:var(--ok-bg); color:var(--ok); }
.note { background:#f5f7fa; border-radius:6px; padding:10px 12px; font-size:13px; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tabs a { padding:6px 12px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:#3f4b5c; background:#fff; font-size:13px; }
.tabs a[aria-current] { border-color:var(--primary); color:var(--primary); background:var(--pale); font-weight:600; }

/* Tables */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; background:#fafbfc; white-space:nowrap; }
tr:last-child td { border-bottom:0; }

/* Forms */
form.inline { display:inline; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:#3f4b5c; }
label.check { flex-direction:row; align-items:center; gap:8px; }
input, select, textarea { font:inherit; min-height:36px; padding:8px 10px; border:1px solid #dce1e8; border-radius:6px; background:#fff; color:var(--ink); width:100%; }
input[type=checkbox] { width:18px; min-height:18px; }
textarea { min-height:96px; resize:vertical; }
.form-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); align-items:end; }
.form-grid .full { grid-column:1/-1; }
fieldset { border:1px solid var(--line); border-radius:6px; padding:12px; margin:0; }
legend { font-size:12px; color:var(--muted); padding:0 4px; }

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 14px; border-radius:6px; border:1px solid var(--primary); background:var(--primary); color:#fff; font:inherit; font-size:13px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.button:hover { background:var(--primary-hover); }
.button.secondary { color:#3f4b5c; border-color:#dce1e8; background:#fff; }
.button.secondary:hover { background:#f5f7fa; border-color:#bcc9da; }
.button.danger { color:var(--danger); border-color:#efc4c0; background:#fff; }
.button.small { min-height:30px; padding:4px 10px; font-size:12px; }
.button.wide { width:100%; }
.button:disabled { opacity:.55; cursor:not-allowed; }
.text-button { background:none; border:0; color:var(--primary); padding:6px 0; font:inherit; cursor:pointer; min-height:36px; }

/* Badges */
.badge { display:inline-block; background:#f0f2f5; color:#566375; border-radius:4px; font-size:11px; padding:2px 7px; white-space:nowrap; }
.badge.account_status-active, .badge.post_status-posted, .badge.post_status-measured, .badge.job_status-done, .badge.ok { background:var(--ok-bg); color:var(--ok); }
.badge.account_status-nurturing, .badge.post_status-reviewed, .badge.post_status-pushed, .badge.job_status-running { background:#eaf3ff; color:#095ca9; }
.badge.account_status-limited, .badge.post_status-generated, .badge.job_status-queued, .badge.warn { background:var(--warn-bg); color:var(--warn); }
.badge.account_status-banned, .badge.job_status-failed, .badge.danger { background:var(--danger-bg); color:var(--danger); }
.badge.platform { background:#202733; color:#fff; }
.sim-high { color:var(--danger); font-weight:600; }

/* Cards (merchant phone page) */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:12px; }
.card pre, .copy-text { white-space:pre-wrap; word-break:break-word; font:inherit; margin:8px 0; background:#fafbfc; border-radius:6px; padding:10px; }
.media-list { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.media-list a { font-size:12px; }
.login h1 { margin-bottom:4px; }
.login form { display:grid; gap:12px; margin:16px 0; }

@media (max-width:760px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { position:sticky; top:0; z-index:5; height:auto; flex-direction:row; align-items:center; gap:10px; padding:8px 12px; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto; }
  .brand small { display:none; }
  .nav { flex-direction:row; gap:4px; }
  .nav a { min-height:44px; white-space:nowrap; padding:8px 10px; }
  .sidebar-foot { margin:0 0 0 auto; white-space:nowrap; display:flex; gap:8px; align-items:center; }
  .sidebar-foot p { display:none; }
  .content { padding:16px 16px 40px; }
  h1 { font-size:20px; }
  .button, .text-button { min-height:44px; }
  .button.small { min-height:40px; }
  input, select, textarea { min-height:44px; font-size:16px; }
}
.actions { margin-top:16px; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0 0 14px; }
.kv dt { color:var(--muted); } .kv dd { margin:0; }
ul.plain { list-style:none; padding:0; margin:0; } ul.plain li { padding:6px 0; border-bottom:1px solid var(--line); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.grow { flex:1 1 160px; width:auto; }
.stats.compact { margin:0; grid-template-columns:repeat(3,minmax(90px,1fr)); }
.stats.compact .stat { padding:10px 14px; }
.stats.compact .stat strong { font-size:20px; }
progress { width:100%; min-width:80px; height:10px; accent-color:var(--primary); }
.metric-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; align-items:end; }