:root{
  --magenta:#BC4A78;
  --coral:#DD8C76;
  --gold:#E3B768;
  --aubergine:#2E1E33;
  --cream:#FCF7F2;
  --gradient:linear-gradient(90deg,var(--magenta),var(--coral),var(--gold));
}
*{box-sizing:border-box;}
html,body{ height:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--aubergine);
  font-family:'Hanken Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; margin:0; }
.italic-accent{ font-style:italic; font-weight:500; color:var(--magenta); }
a{ color:var(--magenta); }

/* ---------- login screen ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ width:100%; max-width:360px; background:#fff; border-radius:20px; padding:32px 28px; box-shadow:0 20px 60px -20px rgba(46,30,51,0.35); text-align:center; }
.login-mark{ width:56px; height:56px; border-radius:16px; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem; margin:0 auto 16px; }
.login-card h1{ font-size:1.3rem; }
.login-card p{ font-size:0.85rem; color:#6b5a68; margin:8px 0 22px; }
.login-field{ text-align:left; margin-bottom:14px; }
.login-field label{ display:block; font-size:0.78rem; font-weight:700; margin-bottom:5px; }
.login-field input{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid #E5DCD3; background:var(--cream); font-size:0.95rem; font-family:'Hanken Grotesk',sans-serif; }
.login-error{ font-size:0.8rem; color:#8a2e2e; background:#FBEBEB; border:1px solid #EFC9C9; border-radius:10px; padding:9px 11px; margin-bottom:14px; }
.login-submit{ width:100%; padding:12px; border:none; border-radius:999px; background:var(--gradient); color:#fff; font-weight:700; font-size:0.95rem; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; }
.login-submit:disabled{ opacity:0.6; }

/* ---------- app shell ---------- */
.app-shell{ min-height:100vh; }
.topbar{ padding:16px 20px 14px; background:var(--aubergine); color:var(--cream); position:sticky; top:0; z-index:10; }
.topbar .wrap{ max-width:1100px; margin:0 auto; }
.brand{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.brand h1{ font-size:1.3rem; color:var(--cream); }
.brand span.tag{ font-size:0.75rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; }
.gradient-bar{ height:3px; background:var(--gradient); margin-top:12px; border-radius:2px; }
.role-bar{ display:flex; align-items:center; gap:12px; margin-top:10px; font-size:0.78rem; color:rgba(252,247,242,0.75); }
.role-bar .logout-btn{ background:none; border:1px solid rgba(252,247,242,0.3); color:var(--cream); border-radius:999px; padding:4px 12px; font-size:0.75rem; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; }

.tabs{ display:flex; gap:6px; margin-top:12px; overflow-x:auto; padding-bottom:2px; }
.tab-btn{ flex:none; background:transparent; border:1px solid rgba(252,247,242,0.25); color:var(--cream); padding:7px 14px; border-radius:999px; font-size:0.85rem; cursor:pointer; white-space:nowrap; font-family:'Hanken Grotesk',sans-serif; }
.tab-btn.active{ background:var(--cream); color:var(--aubergine); border-color:var(--cream); font-weight:700; }

.content-wrap{ max-width:720px; margin:0 auto; padding:20px 16px 90px; }

.card{ background:#fff; border-radius:16px; padding:18px; box-shadow:0 1px 3px rgba(46,30,51,0.08), 0 8px 24px -14px rgba(46,30,51,0.18); margin-bottom:16px; border:1px solid rgba(46,30,51,0.06); }
.field{ margin-bottom:14px; }
label{ display:block; font-size:0.8rem; font-weight:700; margin-bottom:5px; }
select, input[type=text], input[type=date], input[type=time], textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #E5DCD3;
  font-family:'Hanken Grotesk',sans-serif; font-size:0.92rem; background:var(--cream); color:var(--aubergine);
}
textarea{ min-height:110px; resize:vertical; line-height:1.45; }
.btn{ border:none; padding:10px 18px; border-radius:999px; font-weight:700; font-size:0.85rem; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; }
.btn-primary{ background:var(--gradient); color:#fff; }
.btn-primary:disabled{ opacity:0.55; cursor:default; }
.btn-outline{ background:transparent; border:1.5px solid var(--aubergine); color:var(--aubergine); }
.btn-ghost{ background:rgba(188,74,120,0.08); color:var(--magenta); }
.btn-danger{ background:transparent; color:#a33; border:1.5px solid #d8b5b5; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#fff; }
.badge-educational{ background:var(--magenta); }
.badge-personal{ background:var(--coral); }
.badge-promotional{ background:var(--gold); color:var(--aubergine); }
.badge-status{ background:rgba(46,30,51,0.08); color:var(--aubergine); }
.badge-eng-high{ background:var(--magenta); }
.badge-eng-medium{ background:var(--coral); }
.badge-eng-low{ background:#B8AAB5; }

.post-caption{ white-space:pre-wrap; font-size:0.93rem; line-height:1.55; margin:10px 0; }
.hashtags{ font-size:0.82rem; color:var(--magenta); word-break:break-word; }
.meta-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:#8a7d8a; font-weight:700; margin-top:12px; margin-bottom:4px; }
.visual-concept{ font-size:0.85rem; color:#4a3a4d; background:var(--cream); border-radius:10px; padding:10px 12px; }

.empty-state{ text-align:center; padding:40px 16px; color:#8a7d8a; }
.empty-state .display{ color:var(--aubergine); font-size:1.1rem; margin-bottom:6px; }

.week-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.week-nav button{ background:none; border:1px solid rgba(46,30,51,0.15); border-radius:8px; padding:6px 10px; cursor:pointer; }
.day-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid #F0E9E2; }
.day-row:last-child{ border-bottom:none; }
.day-label{ width:76px; flex:none; font-weight:700; font-size:0.82rem; padding-top:4px; }
.day-content{ flex:1; min-width:0; }
.slot-empty{ font-size:0.82rem; color:#b8aab5; font-style:italic; }

.mix-tracker{ display:flex; gap:14px; flex-wrap:wrap; font-size:0.8rem; margin-bottom:4px; }
.mix-tracker span{ display:flex; align-items:center; gap:6px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.notice{ font-size:0.82rem; background:#FBF0E6; border:1px solid #F0DDC7; border-radius:10px; padding:10px 12px; color:#6b4a2a; }
.error-notice{ font-size:0.82rem; background:#FBEBEB; border:1px solid #EFC9C9; border-radius:10px; padding:10px 12px; color:#8a2e2e; margin-top:10px; }
.settings-days{ display:flex; gap:8px; flex-wrap:wrap; }
.day-chip{ padding:6px 12px; border-radius:999px; border:1.5px solid #E5DCD3; cursor:pointer; font-size:0.82rem; background:#fff; }
.day-chip.on{ background:var(--aubergine); color:#fff; border-color:var(--aubergine); }
small.hint{ color:#8a7d8a; }

.platform-switch{ display:flex; gap:6px; margin-bottom:10px; }
.platform-switch button{ flex:1; padding:7px 10px; border-radius:8px; border:1px solid #E5DCD3; background:#fff; font-size:0.8rem; font-weight:700; cursor:pointer; color:var(--aubergine); font-family:'Hanken Grotesk',sans-serif; }
.platform-switch button.active{ background:var(--aubergine); color:#fff; border-color:var(--aubergine); }

.mock-frame{ border:1px solid #E5DCD3; border-radius:14px; overflow:hidden; background:#fff; max-width:380px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.mock-header{ display:flex; align-items:center; gap:8px; padding:10px 12px; }
.mock-avatar{ width:32px; height:32px; border-radius:50%; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex:none; font-family:'Fraunces',serif; }
.mock-name{ font-weight:700; font-size:0.85rem; color:#050505; }
.mock-sub{ font-size:0.72rem; color:#8a8a8a; }
.mock-image{ aspect-ratio:1/1; width:100%; background:var(--gradient); display:flex; align-items:center; justify-content:center; }
.mock-image.fb{ aspect-ratio:4/3; }
.mock-image-label{ color:#fff; text-align:center; padding:16px; font-size:0.8rem; text-shadow:0 1px 3px rgba(0,0,0,0.35); line-height:1.4; max-width:85%; }
.mock-icons{ display:flex; gap:14px; padding:10px 12px 4px; font-size:1.15rem; color:#262626; }
.mock-likes{ padding:0 12px; font-size:0.82rem; font-weight:700; }
.mock-caption-ig{ padding:6px 12px 12px; font-size:0.82rem; line-height:1.42; color:#050505; white-space:pre-wrap; }
.mock-caption-fb{ padding:0 12px 10px; font-size:0.85rem; line-height:1.42; color:#050505; white-space:pre-wrap; }
.mock-more{ color:#8a8a8a; cursor:pointer; font-weight:600; }
.mock-time{ padding:0 12px 12px; font-size:0.68rem; letter-spacing:0.03em; color:#8a8a8a; text-transform:uppercase; }
.mock-fb-engagement{ display:flex; justify-content:space-between; padding:6px 12px; font-size:0.75rem; color:#65676b; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.mock-fb-actions{ display:flex; padding:2px 0; }
.mock-fb-actions button{ flex:1; background:none; border:none; padding:8px 0; font-size:0.82rem; font-weight:600; color:#65676b; font-family:'Hanken Grotesk',sans-serif; }
.mock-note{ text-align:center; font-size:0.72rem; color:#a89aa5; margin-top:8px; }

.optimise-panel{ margin-top:12px; padding:14px; background:var(--cream); border-radius:12px; border:1px solid #F0DDC7; }
.optimise-panel ul{ padding-left:18px; font-size:0.85rem; margin:0 0 10px; }
.optimise-panel li{ margin-bottom:4px; }
.trend-item{ margin-top:10px; }
.trend-item .t-title{ font-weight:700; font-size:0.88rem; }
.trend-item .t-why{ font-size:0.78rem; color:#8a7d8a; font-style:italic; margin-top:2px; }
.trend-item .t-desc{ font-size:0.82rem; color:#4a3a4d; margin-top:2px; }

/* ---------- desktop layout ---------- */
@media (min-width: 860px){
  .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .topbar .brand-col{ flex:none; }
  .gradient-bar{ display:none; }
  .app-shell{ display:flex; min-height:100vh; }
  .topbar{ position:sticky; top:0; left:0; width:260px; height:100vh; display:flex; flex-direction:column; padding:24px 20px; }
  .topbar .wrap{ display:flex; flex-direction:column; align-items:flex-start; width:100%; height:100%; }
  .topbar .gradient-bar-desktop{ height:3px; width:100%; background:var(--gradient); border-radius:2px; margin:16px 0 18px; }
  .tabs{ flex-direction:column; margin-top:0; overflow-x:visible; width:100%; gap:4px; }
  .tab-btn{ width:100%; text-align:left; padding:9px 14px; }
  .role-bar{ margin-top:auto; padding-top:16px; flex-direction:column; align-items:flex-start; gap:8px; }
  .content-wrap{ flex:1; max-width:760px; margin:0; padding:36px 40px 60px; }
}