:root{
  --navy-950: #071a3d;
  --navy-900: #0a2a5e;
  --navy-800: #123a7a;
  --navy-100: #e7edf8;
  --red-600: #d0021b;
  --red-50: #fdecee;
  --green-600: #16a34a;
  --green-50: #e9f9ef;
  --amber-600: #b45309;
  --amber-50: #fef3e0;
  --ink-900: #0d1526;
  --ink-600: #4a5568;
  --ink-400: #94a0b4;
  --line: #e3e8f0;
  --bg: #f4f6fb;
  --card: #ffffff;
  --gray-600: #64748b;
  --gray-50: #f1f5f9;
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important;}

/* ---------- LOGIN ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, var(--navy-800), var(--navy-950) 70%);
  padding:20px;
}
.login-card{
  background:var(--card); border-radius:14px; padding:36px 34px; width:100%; max-width:380px;
  box-shadow:0 20px 60px rgba(7,26,61,0.35);
}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.login-title{font-family:var(--font-display); font-size:20px; font-weight:700;}
.login-sub{font-size:12.5px; color:var(--ink-400); margin-top:2px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block; font-size:12px; font-weight:600; color:var(--ink-600); margin-bottom:6px;}
.login-field input, .pp-select, .pp-textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13.5px;
  font-family:var(--font-body); background:var(--bg); color:var(--ink-900);
}
.pp-textarea{resize:vertical; line-height:1.5;}
.login-field input:focus, .pp-select:focus, .pp-textarea:focus{outline:2px solid var(--navy-800); outline-offset:1px;}
.login-btn{
  width:100%; padding:11px; border:none; border-radius:8px; background:var(--navy-900); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:13.5px; cursor:pointer; margin-top:6px;
}
.login-btn:hover{background:var(--navy-800);}
.login-btn:disabled{opacity:0.6; cursor:default;}
.login-error{
  background:var(--red-50); color:var(--red-600); font-size:12px; padding:8px 10px; border-radius:8px;
  margin-bottom:14px; display:none;
}
.login-error.show{display:block;}
.login-hint{font-size:11px; color:var(--ink-400); margin-top:16px; text-align:center; line-height:1.5;}
.link-inline{color:var(--navy-800); font-weight:600; cursor:pointer; font-size:12.5px;}
.link-inline:hover{text-decoration:underline;}

.brand-glyph{
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg, var(--navy-800), var(--red-600));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:#fff;
  flex-shrink:0;
}
.brand-glyph.small{width:34px; height:34px; font-size:12.5px;}

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
.topbar-brand{display:flex; align-items:center; gap:12px;}
.topbar h1{font-family:var(--font-display); font-size:18px; margin:0; font-weight:700; letter-spacing:-0.2px;}
.topbar .sub{font-size:12px; color:var(--ink-400); margin-top:2px;}
.topbar-right{display:flex; align-items:center; gap:14px;}
.live-chip{
  display:flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:11px; color:var(--green-600); background:var(--green-50);
  padding:6px 10px; border-radius:20px; font-weight:600;
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--green-600);
  box-shadow:0 0 0 0 rgba(22,163,74,0.6);
  animation:pulseDot 2s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,0.55);}
  70%{box-shadow:0 0 0 7px rgba(22,163,74,0);}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}
}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--navy-900);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
}
.logout-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink-600); font-size:12px; font-weight:600;
  padding:8px 12px; border-radius:8px; cursor:pointer; font-family:var(--font-body);
}
.logout-btn:hover{background:var(--bg);}

.content{padding:26px 32px 60px 32px; max-width:920px; margin:0 auto;}

/* ---------- CARD ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px 24px; margin-bottom:20px;}
.card-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; gap:12px;}
.card-title{font-family:var(--font-display); font-size:16px; font-weight:700;}
.card-title-sub{font-size:12px; color:var(--ink-400); margin-top:3px; font-weight:400; font-family:var(--font-body); line-height:1.5;}

/* ---------- MODE TOGGLE ---------- */
.mode-toggle{display:flex; gap:8px; margin-bottom:16px; background:var(--bg); border-radius:9px; padding:4px;}
.mode-btn{
  flex:1; padding:9px 10px; border:none; background:transparent; border-radius:7px; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--ink-600);
}
.mode-btn.active{background:#fff; color:var(--navy-900); box-shadow:0 1px 3px rgba(7,26,61,0.12);}

.deadline-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

.topic-summary{font-size:12px; color:var(--ink-400); line-height:1.5; margin-top:8px;}

/* ---------- LOADING ---------- */
.gen-loading{
  display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px 16px;
  background:var(--navy-100); border-radius:9px; font-size:12.5px; color:var(--navy-900); font-weight:500;
}
.spinner{
  width:18px; height:18px; border-radius:50%; border:3px solid rgba(10,42,94,0.2);
  border-top-color:var(--navy-900); animation:spin 0.8s linear infinite; flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}
.gen-error{
  margin-top:14px; background:var(--red-50); color:var(--red-600); font-size:12.5px;
  padding:10px 12px; border-radius:8px; line-height:1.5;
}

/* ---------- RESULT / DRAFTS ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:20px; font-family:var(--font-body); white-space:nowrap;
}
.badge-draft{background:var(--gray-50); color:var(--gray-600);}
.badge-pushed{background:var(--green-50); color:var(--green-600);}
.badge-dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

.platform-drafts{display:flex; flex-direction:column; gap:12px; margin-bottom:18px;}
.platform-draft-card{
  background:var(--bg); border-left:3px solid var(--navy-800); border-radius:0 8px 8px 0;
  padding:14px 16px;
}
.platform-draft-name{
  font-family:var(--font-display); font-size:12.5px; font-weight:700; color:var(--navy-900);
  margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.lock-icon{opacity:0.55; font-size:11px;}
.platform-draft-text{font-size:13.5px; color:var(--ink-900); line-height:1.6; white-space:pre-wrap;}

/* ---------- IMAGE ---------- */
.image-section{margin-bottom:18px; padding-top:4px; border-top:1px solid var(--line); padding-top:16px;}
.image-gen-btn{
  border:1px solid var(--navy-800); background:#fff; color:var(--navy-900); font-size:12.5px; font-weight:600;
  padding:9px 14px; border-radius:8px; cursor:pointer; font-family:var(--font-body);
}
.image-gen-btn:hover{background:var(--navy-100);}
.image-gen-btn:disabled{opacity:0.6; cursor:default;}
.image-note{font-size:12px; color:var(--ink-400); margin-top:10px; line-height:1.5;}
.image-note.error{color:var(--amber-600);}
.image-preview{
  margin-top:12px; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  max-width:320px; background:var(--bg);
}
.image-preview img{display:block; width:100%; height:auto;}

/* ---------- PUSH ---------- */
.push-section{padding-top:16px; border-top:1px solid var(--line);}
.push-btn{
  padding:12px 18px; border:none; border-radius:9px; background:var(--red-600); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:13.5px; cursor:pointer;
}
.push-btn:hover{background:#a80116;}
.push-btn:disabled{opacity:0.55; cursor:default;}
.push-confirm{
  margin-top:14px; background:var(--red-50); border-radius:9px; padding:14px 16px;
}
.push-confirm-text{font-size:12.5px; color:var(--red-600); font-weight:600; margin-bottom:12px; line-height:1.5;}
.push-confirm-actions{display:flex; gap:10px;}
.push-btn-confirm{padding:9px 14px; font-size:12.5px;}
.push-cancel-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink-600); font-size:12.5px; font-weight:600;
  padding:9px 14px; border-radius:8px; cursor:pointer; font-family:var(--font-body);
}
.push-cancel-btn:hover{background:var(--bg);}
.push-result{
  margin-top:14px; background:var(--green-50); color:var(--green-600); font-size:12.5px; font-weight:600;
  padding:12px 14px; border-radius:8px; line-height:1.5;
}
.push-result.error{background:var(--red-50); color:var(--red-600);}

/* ---------- PAST POSTS LIST ---------- */
.post-row{
  display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);
}
.post-row:last-child{border-bottom:none;}
.post-thumb{
  width:52px; height:52px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--bg);
  border:1px solid var(--line);
}
.post-thumb-placeholder{
  width:52px; height:52px; border-radius:8px; flex-shrink:0; background:var(--navy-100);
  display:flex; align-items:center; justify-content:center; color:var(--navy-800); font-size:16px;
}
.post-main{flex:1; min-width:0;}
.post-title-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.post-title{font-size:13.5px; font-weight:600; color:var(--ink-900);}
.post-meta{font-size:11.5px; color:var(--ink-400); margin-top:4px;}
.post-progress{font-size:11.5px; color:var(--ink-600); margin-top:4px; font-weight:500;}
.empty-note{color:var(--ink-400); font-size:12.5px; padding:14px 4px;}

@media (max-width: 640px){
  .deadline-row{grid-template-columns:1fr;}
  .content{padding:20px 16px 50px 16px;}
  .topbar{padding:14px 16px;}
}