:root{
  --bg:#12151b;
  --surface:#1a1f28;
  --surface-2:#212836;
  --line:#2a3140;
  --text:#e7ebf3;
  --text-dim:#8b93a7;
  --accent:#f2a93b;
  --accent-dim:#5a4726;
  --ok:#4fd1a5;
  --warn:#f2a93b;
  --bad:#e8607a;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-ui); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}
input,select,textarea{
  font-family:var(--font-ui); background:var(--surface-2); border:1px solid var(--line);
  color:var(--text); border-radius:6px; padding:9px 10px; font-size:13.5px; width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);}
label{display:block; font-size:12px; color:var(--text-dim); margin:14px 0 6px; letter-spacing:.02em;}
label input,label textarea,label select{margin-top:6px;}

.btn{
  font-family:var(--font-ui); border:1px solid var(--line); background:var(--surface-2);
  color:var(--text); padding:9px 16px; border-radius:6px; font-size:13px; cursor:pointer;
  font-weight:600; transition:border-color .15s, background .15s;
}
.btn:hover{border-color:var(--accent);}
.btn.primary{background:var(--accent); color:#1a1305; border-color:var(--accent);}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{background:transparent;}
.btn.small{padding:6px 12px; font-size:12px;}
.row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}

/* ---------- Auth screen ---------- */
.auth-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, #1c2432 0%, var(--bg) 60%);
}
.auth-card{
  width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:32px;
}
.auth-brand{display:flex; align-items:center; gap:10px;}
.auth-brand h1{font-size:19px; margin:0;}
.dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); display:inline-block;}
.auth-sub{color:var(--text-dim); font-size:12.5px; margin:6px 0 22px;}
.auth-tabs{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:8px; margin-bottom:18px;}
.auth-tab{flex:1; background:none; border:none; color:var(--text-dim); padding:8px; border-radius:6px; cursor:pointer; font-weight:600; font-size:12.5px;}
.auth-tab.active{background:var(--accent); color:#1a1305;}
.auth-form.hidden{display:none;}
.auth-hint{color:var(--text-dim); font-size:12px; line-height:1.5; margin:0;}
.auth-error{color:var(--bad); font-size:12.5px; min-height:16px; margin-top:10px;}
.auth-form .btn{width:100%; margin-top:20px;}

/* ---------- App shell ---------- */
.app{display:flex; min-height:100vh;}
.sidebar{
  width:210px; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:20px 14px; flex-shrink:0;
}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; padding:0 6px 22px;}
.nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.nav-item{
  text-align:left; background:none; border:none; color:var(--text-dim);
  padding:10px 12px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600;
}
.nav-item:hover{background:var(--surface-2); color:var(--text);}
.nav-item.active{background:var(--accent-dim); color:var(--accent);}
.sidebar-footer{border-top:1px solid var(--line); padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.me-name{font-size:12.5px; font-weight:600;}
.me-role{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em;}

.main{flex:1; padding:28px 36px; max-width:1100px;}
.topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px;}
.topbar h2{margin:0; font-size:20px;}
.topbar-status{font-size:12px; color:var(--text-dim); font-family:var(--font-mono);}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px;}
.panel h3{margin:0 0 4px; font-size:14px;}
.panel-header-row{display:flex; align-items:center; justify-content:space-between;}
.panel-header-row h3{margin:0;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:820px){.grid-2{grid-template-columns:1fr;}}

.warning{background:#3a2a12; border:1px solid var(--warn); color:var(--warn); padding:8px 10px; border-radius:6px; font-size:12.5px; margin-top:10px;}
.form-msg{font-size:12.5px; color:var(--text-dim); min-height:16px; margin-top:10px;}
.hint{font-size:11.5px; color:var(--text-dim); line-height:1.5;}

.page-picker{display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; margin-top:6px; border:1px solid var(--line); border-radius:8px; padding:8px;}
.page-check{display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 2px;}
.page-check input{width:auto;}
.platform-tag{font-size:10px; padding:1px 6px; border-radius:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;}
.platform-facebook{background:#1c3a5e; color:#7db4ec;}
.platform-instagram{background:#4a1c46; color:#e88ce0;}
.platform-threads{background:#2a2a2a; color:#ddd;}

.media-preview{margin-top:10px; font-size:12px; color:var(--text-dim); font-family:var(--font-mono); word-break:break-all;}

.post-list{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.post-item{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 14px;}
.post-item-top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.post-caption{font-size:13px; max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.post-meta{font-size:11px; color:var(--text-dim); font-family:var(--font-mono); margin-top:6px;}
.targets{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}

.status-pill{font-size:10.5px; padding:2px 8px; border-radius:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.status-draft{background:#2a3140; color:var(--text-dim);}
.status-pending_approval,.status-queued,.status-uploading,.status-processing{background:#3a2a12; color:var(--warn);}
.status-scheduled{background:#1c3a5e; color:#7db4ec;}
.status-published,.status-done{background:#123a2c; color:var(--ok);}
.status-failed{background:#3a1420; color:var(--bad);}

.pages-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-top:12px;}
.page-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px;}
.page-card-top{display:flex; justify-content:space-between; align-items:flex-start;}
.page-card h4{margin:6px 0 2px; font-size:13.5px;}
.page-card .account{font-size:11px; color:var(--text-dim);}
.page-card .row{margin-top:10px;}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px;}
.card .value{font-size:26px; font-weight:700; font-family:var(--font-mono);}
.card .label{font-size:11.5px; color:var(--text-dim); margin-top:4px; text-transform:uppercase; letter-spacing:.04em;}