/* ===== Dashboard shell (Admin + Student) ===== */
.demo-banner{
  background:#FDF3D9; border-bottom:1px solid #E9CE86; color:#6B5511;
  font-family:var(--ff-mono); font-size:.78rem; text-align:center; padding:8px 16px;
}
.dash-wrap{ display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 130px); }
@media (max-width:860px){ .dash-wrap{ grid-template-columns:1fr; } }

.dash-side{
  background:var(--ink); color:#B9C4E4; padding:22px 14px; display:flex; flex-direction:column; gap:4px;
}
.dash-side .who{ color:var(--white); font-family:var(--ff-display); font-weight:700; margin-bottom:6px; padding:0 10px; }
.dash-side .who small{ display:block; color:#8592B5; font-family:var(--ff-mono); font-size:.68rem; font-weight:400; }
.dash-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer;
  font-size:.88rem; font-weight:600; color:#B9C4E4;
}
.dash-link:hover{ background:var(--ink-2); color:var(--white); }
.dash-link.active{ background:var(--gold); color:var(--white); }
.dash-side hr{ border:none; border-top:1px solid #23315C; margin:12px 4px; }

.dash-main{ background:var(--paper); padding:28px; }
.dash-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.dash-head h1{ font-size:1.5rem; margin:0; }
.dash-panel{ display:none; }
.dash-panel.active{ display:block; }

.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
@media (max-width:760px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } }
.kpi{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.kpi b{ font-family:var(--ff-display); font-size:1.6rem; color:var(--ink); display:block; }
.kpi span{ font-size:.78rem; color:var(--muted); }

.dash-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center; justify-content:space-between; }
.dash-toolbar input, .dash-toolbar select{
  padding:9px 12px; border:1px solid var(--line); border-radius:7px; font-family:var(--ff-body); font-size:.85rem; background:var(--white);
}
.status-pill{ font-family:var(--ff-mono); font-size:.7rem; padding:3px 9px; border-radius:12px; }
.status-new{ background:#FDF3D9; color:#8A6D0C; }
.status-progress{ background:#E1EDFB; color:#1B4E96; }
.status-won{ background:#E1F3ED; color:#146C4E; }
.status-lost{ background:#FBE4E4; color:#A32C2C; }

.progress-bar{ background:var(--line); border-radius:6px; height:8px; overflow:hidden; }
.progress-bar span{ display:block; height:100%; background:var(--teal); }

.tile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:760px){ .tile-grid{ grid-template-columns:1fr; } }
.tile{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.tile h4{ margin:0 0 8px; font-family:var(--ff-display); color:var(--ink); }
.cert-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px dashed var(--line);
  border-radius:8px; padding:10px 12px; font-size:.85rem; margin-bottom:8px;
}
.login-shell{ max-width:380px; margin:60px auto; }

/* ---------- Social Post Creator ---------- */
.creator-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:900px){ .creator-grid{ grid-template-columns:1fr; } }
.type-toggle{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.type-toggle button{
  font-family:var(--ff-mono); font-size:.78rem; padding:8px 14px; border-radius:20px;
  border:1px solid var(--line); background:var(--white); cursor:pointer; color:var(--ink);
}
.type-toggle button.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.poster-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.poster{
  width:360px; min-height:450px; border-radius:16px; overflow:hidden; position:relative;
  background:linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 55%, var(--gold) 150%);
  color:#fff; padding:26px; display:flex; flex-direction:column; font-family:var(--ff-body);
  box-shadow:var(--shadow);
}
.poster .p-logo{ height:34px; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.95; }
.poster .p-kicker{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.15); display:inline-block; padding:4px 10px; border-radius:12px; margin-bottom:14px;
}
.poster .p-title{ font-family:var(--ff-display); font-size:1.6rem; font-weight:700; line-height:1.2; margin-bottom:10px; word-break:break-word; }
.poster .p-desc{ font-size:.88rem; color:rgba(255,255,255,.9); flex:1; word-break:break-word; }
.poster .p-date{ font-family:var(--ff-mono); font-size:.8rem; background:rgba(255,255,255,.12); display:inline-block; padding:6px 12px; border-radius:8px; margin:12px 0; }
.poster .p-foot{ font-family:var(--ff-mono); font-size:.68rem; color:rgba(255,255,255,.85); border-top:1px solid rgba(255,255,255,.25); padding-top:12px; margin-top:auto; }

.caption-box textarea{
  width:100%; min-height:160px; padding:12px; border:1px solid var(--line); border-radius:8px;
  font-family:var(--ff-body); font-size:.88rem; background:var(--paper); color:var(--text); resize:vertical;
}