/* ── Reset & Variables ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:    #0a0a0a;
  --white:    #ffffff;
  --g50:      #f7f7f7;
  --g100:     #f0f0f0;
  --g200:     #e2e2e2;
  --g300:     #c8c8c8;
  --g400:     #9a9a9a;
  --g500:     #6b6b6b;
  --g700:     #3a3a3a;
  --g900:     #1a1a1a;
  --danger:   #c0392b;
  --success:  #27ae60;
  --warning:  #e67e22;
  --info:     #2980b9;
  --radius:   8px;
  --radius-lg:14px;
  --shadow:   0 1px 8px rgba(0,0,0,0.07);
  --shadow-md:0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.14);
  --font:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sidebar-w:240px;
}

html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--g50); color:var(--black); line-height:1.6; min-height:100vh; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font); }

/* ── Utils ───────────────────────────────────────────── */
.hidden { display:none !important; }
.text-muted  { color:var(--g400); font-size:0.82rem; }
.text-danger { color:var(--danger); }
.text-success{ color:var(--success); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.6rem 1.4rem; border-radius:var(--radius); font-size:.88rem;
  font-weight:600; cursor:pointer; border:2px solid transparent;
  transition:all .18s; white-space:nowrap; line-height:1;
}
.btn-primary  { background:var(--black); color:var(--white); }
.btn-primary:hover { background:var(--g700); }
.btn-outline  { background:transparent; border-color:var(--g300); color:var(--black); }
.btn-outline:hover { border-color:var(--black); }
.btn-ghost    { background:transparent; color:var(--g500); border:none; }
.btn-ghost:hover { background:var(--g100); color:var(--black); }
.btn-danger   { background:var(--danger); color:var(--white); border-color:var(--danger); }
.btn-danger:hover { background:#a93226; }
.btn-success  { background:var(--success); color:var(--white); border-color:var(--success); }
.btn-sm  { padding:.32rem .8rem; font-size:.78rem; }
.btn-xs  { padding:.2rem .55rem; font-size:.72rem; }
.btn-full{ width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Forms ───────────────────────────────────────────── */
.form-group  { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.form-label  { font-size:.8rem; font-weight:700; color:var(--g700); text-transform:uppercase; letter-spacing:.04em; }
.form-input, .form-select, .form-textarea {
  padding:.62rem .9rem; border:1.5px solid var(--g200); border-radius:var(--radius);
  font-size:.92rem; font-family:var(--font); background:var(--white); color:var(--black);
  transition:border-color .15s; width:100%;
}
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--black); }
.form-textarea { resize:vertical; min-height:90px; }
.form-error { color:var(--danger); font-size:.78rem; min-height:1em; margin-top:.2rem; }
.form-hint  { color:var(--g400); font-size:.76rem; margin-top:.15rem; }

/* ── Cards ───────────────────────────────────────────── */
.card {
  background:var(--white); border:1.5px solid var(--g200);
  border-radius:var(--radius-lg); padding:1.4rem; box-shadow:var(--shadow);
}
.card-sm { padding:.9rem 1rem; }

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display:inline-block; padding:.18rem .65rem; border-radius:50px;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.badge-new         { background:#f0f0f0; color:#555; }
.badge-in_progress { background:#fff3cd; color:#856404; }
.badge-resolved    { background:#d1f5d3; color:#155724; }
.badge-closed      { background:#fde8e8; color:#721c24; }
.badge-student     { background:#e8f0fe; color:#1a56db; }
.badge-staff       { background:#fef3c7; color:#92400e; }
.badge-admin       { background:#1a1a1a; color:#fff; }
.badge-pending     { background:#fff3cd; color:#856404; }
.badge-approved    { background:#d1f5d3; color:#155724; }
.badge-rejected    { background:#fde8e8; color:#721c24; }

/* ── App Navbar (admin/staff/student pages) ──────────── */
.navbar {
  background:var(--black); color:var(--white);
  height:58px; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:300;
}
.navbar-brand {
  font-size:.95rem; font-weight:900; letter-spacing:-.03em;
  color:var(--white); display:flex; align-items:center; gap:.5rem;
}
.navbar-brand .dot { color:var(--g500); }

/* Бургер (app pages) */
.burger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; background:none; border:none; cursor:pointer;
  padding:4px; border-radius:var(--radius);
}
.burger span {
  display:block; height:2px; background:var(--white);
  border-radius:2px; transition:all .25s;
}
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── Sidebar layout ──────────────────────────────────── */
.app-layout {
  display:grid; grid-template-columns:var(--sidebar-w) 1fr;
  min-height:calc(100vh - 58px);
}
.sidebar {
  background:var(--white); border-right:1.5px solid var(--g200);
  padding:1.2rem 0;
  position:sticky; top:58px;
  height:calc(100vh - 58px); overflow-y:auto;
  display:flex; flex-direction:column;
}
.sidebar-top { flex:1; }
.sidebar-bottom {
  padding:.75rem; border-top:1.5px solid var(--g100);
  margin-top:.5rem;
}
.sidebar-section { padding:0 .75rem; margin-bottom:.25rem; }
.sidebar-section-label {
  font-size:.65rem; font-weight:800; color:var(--g400);
  text-transform:uppercase; letter-spacing:.1em;
  padding:.9rem .5rem .3rem;
}
.sidebar-link {
  display:flex; align-items:center; gap:.55rem;
  padding:.52rem .75rem; border-radius:var(--radius);
  font-size:.84rem; font-weight:500; color:var(--g500);
  cursor:pointer; transition:all .15s;
  border:none; background:none; width:100%; text-align:left;
}
.sidebar-link:hover { background:var(--g100); color:var(--black); }
.sidebar-link.active { background:var(--black); color:var(--white); }
.sidebar-link .s-icon { font-size:.95rem; width:18px; text-align:center; flex-shrink:0; }
.sidebar-link .s-badge {
  margin-left:auto; background:var(--danger); color:#fff;
  font-size:.65rem; font-weight:700; padding:.1rem .45rem;
  border-radius:50px; min-width:18px; text-align:center;
}
.sidebar-link.active .s-badge { background:#fff; color:var(--black); }

.sidebar-user {
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .75rem; margin-bottom:.25rem;
  border-radius:var(--radius); cursor:pointer;
  transition:background .15s;
  border:none; background:none; width:100%; text-align:left;
}
.sidebar-user:hover { background:var(--g100); }
.sidebar-user-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--black); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; flex-shrink:0;
}
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-user-name { font-size:.82rem; font-weight:700; color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-sub  { font-size:.7rem; color:var(--g400); }
.sidebar-logout {
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .75rem; border-radius:var(--radius);
  font-size:.82rem; font-weight:500; color:var(--danger);
  cursor:pointer; transition:background .15s;
  border:none; background:none; width:100%; text-align:left;
}
.sidebar-logout:hover { background:#fde8e8; }

/* ── Main content ────────────────────────────────────── */
.main-content { padding:1.75rem; overflow-y:auto; }
.page-header { margin-bottom:1.5rem; }
.page-header h2 { font-size:1.35rem; font-weight:900; letter-spacing:-.03em; }
.page-header p  { color:var(--g400); font-size:.85rem; margin-top:.2rem; }

/* ── Stats grid ──────────────────────────────────────── */
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem; margin-bottom:1.5rem;
}
.stat-card {
  background:var(--white); border:1.5px solid var(--g200);
  border-radius:var(--radius-lg); padding:1.2rem 1.4rem;
  box-shadow:var(--shadow);
}
.stat-card.dark { background:var(--black); border-color:var(--black); }
.stat-card .s-num { font-size:2rem; font-weight:900; letter-spacing:-.05em; line-height:1.1; }
.stat-card .s-label { font-size:.7rem; font-weight:700; color:var(--g400); text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }
.stat-card.dark .s-num { color:var(--white); }
.stat-card.dark .s-label { color:var(--g500); }

/* ── Reports list ────────────────────────────────────── */
.reports-list { display:flex; flex-direction:column; gap:.6rem; }
.report-item {
  background:var(--white); border:1.5px solid var(--g200);
  border-radius:var(--radius); padding:.9rem 1.1rem;
  cursor:pointer; transition:all .15s;
  display:flex; justify-content:space-between; align-items:flex-start;
}
.report-item:hover  { border-color:var(--g400); box-shadow:var(--shadow); }
.report-item.active { border-color:var(--black); box-shadow:var(--shadow-md); }
.report-info { flex:1; min-width:0; }
.report-title {
  font-weight:700; font-size:.88rem; margin-bottom:.2rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.report-excerpt { font-size:.78rem; color:var(--g500); margin-bottom:.3rem; line-height:1.4; }
.report-meta { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ── Two-panel layout ────────────────────────────────── */
.two-panel { display:grid; grid-template-columns:340px 1fr; gap:1.25rem; align-items:start; }

/* ── Chat ────────────────────────────────────────────── */
.chat-wrap { background:var(--white); border:1.5px solid var(--g200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.chat-head {
  padding:.9rem 1.1rem; border-bottom:1.5px solid var(--g200);
  display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem;
}
.chat-head-info { flex:1; min-width:0; }
.chat-head-title { font-weight:800; font-size:.92rem; }
.chat-head-meta  { font-size:.75rem; color:var(--g400); margin-top:.15rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.chat-desc {
  padding:.75rem 1.1rem; background:var(--g50);
  border-bottom:1.5px solid var(--g200);
  font-size:.84rem; line-height:1.6; color:var(--g700);
}
.chat-status-bar {
  padding:.55rem 1.1rem; border-bottom:1.5px solid var(--g200);
  display:flex; align-items:center; gap:.6rem; background:var(--white); flex-wrap:wrap;
}
.chat-status-bar label { font-size:.75rem; font-weight:700; color:var(--g500); white-space:nowrap; }
.chat-messages {
  min-height:260px; max-height:380px; overflow-y:auto;
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.65rem;
  background:var(--g50);
}
.chat-msg { display:flex; flex-direction:column; max-width:72%; }
.chat-msg.msg-mine   { align-self:flex-end;   align-items:flex-end; }
.chat-msg.msg-theirs { align-self:flex-start; align-items:flex-start; }
.chat-msg.from-student { align-self:flex-start; align-items:flex-start; }
.chat-msg.from-staff,
.chat-msg.from-admin   { align-self:flex-end;   align-items:flex-end; }
.chat-bubble {
  padding:.6rem 1rem; border-radius:18px;
  font-size:.88rem; line-height:1.5; word-break:break-word;
}
.chat-msg.msg-mine .chat-bubble { background:var(--black); color:var(--white); border-bottom-right-radius:4px; }
.chat-msg.msg-theirs .chat-bubble { background:var(--white); border:1.5px solid var(--g200); border-bottom-left-radius:4px; }
.chat-msg.from-student .chat-bubble { background:var(--white); border:1.5px solid var(--g200); border-bottom-left-radius:4px; }
.chat-msg.from-staff .chat-bubble,
.chat-msg.from-admin .chat-bubble  { background:var(--black); color:var(--white); border-bottom-right-radius:4px; }
.chat-msg-meta { font-size:.68rem; color:var(--g400); margin-top:.2rem; padding:0 .3rem; }
.chat-msg.msg-mine .chat-msg-meta  { text-align:right; }
.chat-msg.msg-theirs .chat-msg-meta { text-align:left; }
.chat-msg.from-staff .chat-msg-meta,
.chat-msg.from-admin .chat-msg-meta { text-align:right; }
.chat-input-row {
  padding:.65rem .75rem; border-top:1.5px solid var(--g200);
  display:flex; gap:.5rem; background:var(--white);
}
.chat-input-row input {
  flex:1; border:1.5px solid var(--g200); border-radius:var(--radius);
  padding:.5rem .85rem; font-size:.87rem; font-family:var(--font); outline:none;
  transition:border-color .15s;
}
.chat-input-row input:focus { border-color:var(--black); }

/* ── Table ───────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.84rem; }
th {
  background:var(--g50); padding:.65rem .9rem; text-align:left;
  font-size:.7rem; font-weight:700; color:var(--g500);
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1.5px solid var(--g200); white-space:nowrap;
}
td { padding:.7rem .9rem; border-bottom:1px solid var(--g100); vertical-align:middle; }
tr:hover td { background:var(--g50); }
tr:last-child td { border-bottom:none; }

/* ── Chart bar ───────────────────────────────────────── */
.chart-bar-wrap { display:flex; flex-direction:column; gap:.5rem; }
.chart-bar-row { display:flex; align-items:center; gap:.75rem; }
.chart-bar-label { font-size:.78rem; color:var(--g500); width:90px; flex-shrink:0; text-align:right; }
.chart-bar-track { flex:1; background:var(--g100); border-radius:4px; height:10px; overflow:hidden; }
.chart-bar-fill  { height:100%; background:var(--black); border-radius:4px; transition:width .4s; }
.chart-bar-val   { font-size:.78rem; font-weight:700; width:24px; flex-shrink:0; }

/* ── Sparkline ───────────────────────────────────────── */
.sparkline-wrap { display:flex; align-items:flex-end; gap:4px; height:50px; }
.spark-col { flex:1; background:var(--g200); border-radius:3px 3px 0 0; min-width:10px; transition:height .3s; cursor:default; position:relative; }
.spark-col:hover { background:var(--black); }
.spark-col .spark-tip {
  position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  background:var(--black); color:#fff; font-size:.65rem; padding:.1rem .4rem;
  border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s;
}
.spark-col:hover .spark-tip { opacity:1; }
.spark-labels { display:flex; gap:4px; margin-top:.3rem; }
.spark-label  { flex:1; text-align:center; font-size:.62rem; color:var(--g400); }

/* ── Modal ───────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:500; padding:1rem;
}
.modal {
  background:var(--white); border-radius:var(--radius-lg);
  padding:1.7rem; width:100%; max-width:500px; box-shadow:var(--shadow-lg);
  max-height:90vh; overflow-y:auto;
}
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.modal-header h3 { font-size:1.05rem; font-weight:800; }
.modal-close { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--g400); line-height:1; }
.modal-close:hover { color:var(--black); }

/* ── Anon toggle ─────────────────────────────────────── */
.anon-toggle {
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .9rem; background:var(--g50); border:1.5px solid var(--g200);
  border-radius:var(--radius); cursor:pointer; margin-bottom:.9rem; transition:all .15s;
}
.anon-toggle:hover { border-color:var(--black); }
.anon-toggle input { width:16px; height:16px; cursor:pointer; accent-color:var(--black); }
.anon-text strong { display:block; font-size:.85rem; font-weight:700; }
.anon-text span   { font-size:.75rem; color:var(--g400); }

/* ── Empty state ─────────────────────────────────────── */
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--g400); }
.empty-state .ei { font-size:2rem; margin-bottom:.6rem; }
.empty-state p { font-size:.85rem; }

/* ── Toast ───────────────────────────────────────────── */
.toast-container { position:fixed; bottom:1.2rem; right:1.2rem; display:flex; flex-direction:column; gap:.4rem; z-index:9999; }
.toast {
  background:var(--black); color:var(--white); padding:.65rem 1.1rem;
  border-radius:var(--radius); font-size:.84rem; font-weight:500;
  box-shadow:var(--shadow-lg); animation:toastIn .2s ease; max-width:280px;
}
.toast.success { background:var(--success); }
.toast.error   { background:var(--danger); }
.toast.warning { background:var(--warning); }
@keyframes toastIn { from { transform:translateX(16px); opacity:0; } to { transform:none; opacity:1; } }

/* ── Profile modal ───────────────────────────────────── */
.profile-avatar-big {
  width:72px; height:72px; border-radius:50%;
  background:var(--black); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:900; margin:0 auto 1.2rem;
}

/* ── Sidebar overlay (mobile) ────────────────────────── */
.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:250;
}
.sidebar-overlay.visible { display:block; }

/* ── Auth ────────────────────────────────────────────── */
.auth-page { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-left {
  background:var(--black); color:var(--white);
  display:flex; flex-direction:column; justify-content:center; padding:4rem;
}
.auth-left-logo { font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--g500); margin-bottom:2rem; }
.auth-left h2 { font-size:2rem; font-weight:900; letter-spacing:-.04em; line-height:1.2; margin-bottom:1rem; }
.auth-left p  { color:var(--g400); font-size:.92rem; line-height:1.7; max-width:340px; }
.auth-right {
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; padding:3rem 2rem; background:var(--g50);
}
.auth-box { width:100%; max-width:400px; }
.auth-box-title { font-size:1.3rem; font-weight:900; letter-spacing:-.03em; margin-bottom:.3rem; }
.auth-box-sub   { color:var(--g400); font-size:.84rem; margin-bottom:1.6rem; }
.role-row { display:flex; gap:.5rem; margin-bottom:1rem; }
.role-btn {
  flex:1; padding:.58rem; border:1.5px solid var(--g200);
  border-radius:var(--radius); background:var(--white);
  font-size:.82rem; font-weight:600; cursor:pointer; color:var(--g500);
  transition:all .15s; font-family:var(--font);
}
.role-btn.active { border-color:var(--black); background:var(--black); color:var(--white); }

/* ── Pending staff screen ────────────────────────────── */
.pending-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--g50);
}
.pending-card {
  background:var(--white); border:1.5px solid var(--g200);
  border-radius:var(--radius-lg); padding:3rem 2.5rem;
  max-width:420px; width:100%; text-align:center; box-shadow:var(--shadow-lg);
}
.pending-icon { font-size:3rem; margin-bottom:1rem; }
.pending-card h2 { font-size:1.2rem; font-weight:900; margin-bottom:.6rem; }
.pending-card p  { color:var(--g500); font-size:.88rem; line-height:1.7; }

/* ══════════════════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════════════════ */

/* ── Landing Nav ─────────────────────────────────────── */
.land-nav {
  background: var(--black);
  padding: 0 5%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.land-nav-brand {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -.04em;
}
.land-nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.land-nav-links .nav-link {
  color: rgba(255,255,255,0.6);
  font-size: .88rem;
  font-weight: 500;
  transition: color .15s;
}
.land-nav-links .nav-link:hover { color: var(--white); }
.btn-nav-login {
  display: inline-flex;
  align-items: center;
  padding: .42rem 1.1rem;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--white);
  font-size: .85rem;
  font-weight: 600;
  transition: all .15s;
  background: transparent;
}
.btn-nav-login:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
}
.btn-nav-start {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1.2rem;
  border-radius: 8px;
  background: var(--white);
  color: var(--black);
  font-size: .85rem;
  font-weight: 700;
  transition: all .15s;
}
.btn-nav-start:hover { background: rgba(255,255,255,0.88); }

/* ── Landing Burger (mobile) ─────────────────────────── */
.land-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.land-burger span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all .25s;
}
.land-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.land-burger.open span:nth-child(2) { opacity: 0; }
.land-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav drawer ───────────────────────────────── */
.land-mobile-nav {
  display: none;
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  background: #111;
  z-index: 99;
  padding: 1.5rem 5% 2rem;
  flex-direction: column;
  gap: .25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.land-mobile-nav.open { display: flex; }
.land-mobile-nav a {
  padding: .75rem .5rem;
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.land-mobile-nav a:last-child { border-bottom: none; }
.mob-btn {
  margin-top: .75rem;
  padding: .75rem;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: .95rem;
}
.mob-btn-login {
  border: 1.5px solid rgba(255,255,255,0.25);
  color: var(--white) !important;
  background: transparent !important;
}
.mob-btn-start {
  background: var(--white) !important;
  color: var(--black) !important;
  margin-top: .5rem;
}

/* ── Hero ────────────────────────────────────────────── */
.land-hero {
  background: var(--black);
  color: var(--white);
  padding: 5rem 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: calc(100vh - 66px);
}
.land-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.land-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.1;
  max-width: 700px;
  margin-bottom: 1.2rem;
}
.land-hero h1 em { font-style: normal; color: var(--g400); }
.land-hero p {
  font-size: 1.05rem;
  color: var(--g300);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.land-hero-btns { display: flex; gap: .85rem; flex-wrap: wrap; }
.hero-btn-main {
  display: inline-flex;
  align-items: center;
  padding: .8rem 2.2rem;
  border-radius: 10px;
  background: var(--white);
  color: var(--black);
  font-size: 1rem;
  font-weight: 700;
  transition: all .18s;
}
.hero-btn-main:hover { background: rgba(255,255,255,.88); }
.hero-btn-sec {
  display: inline-flex;
  align-items: center;
  padding: .8rem 2.2rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.28);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  transition: all .18s;
}
.hero-btn-sec:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.06);
}
.hero-img-wrap {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.hero-img-wrap img { width: 100%; display: block; }

/* ── Features ────────────────────────────────────────── */
.land-features {
  padding: 5rem 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.land-feature {
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  border: 1.5px solid var(--g200);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: box-shadow .2s;
}
.land-feature:hover { box-shadow: var(--shadow-md); }
.land-feature .f-icon { font-size: 1.8rem; margin-bottom: .75rem; }
.land-feature h3 { font-size: .98rem; font-weight: 800; margin-bottom: .4rem; }
.land-feature p  { font-size: .84rem; color: var(--g500); line-height: 1.65; }
.feature-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
  display: block;
}

/* ── Steps ───────────────────────────────────────────── */
.land-steps { padding: 4rem 5%; background: var(--g50); }
.land-steps h2 {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.03em;
  text-align: center;
  margin-bottom: 2.5rem;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.step-card {
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}
.step-num { font-size: 2rem; font-weight: 900; color: var(--g200); margin-bottom: .5rem; }
.step-card h4 { font-size: .92rem; font-weight: 700; margin-bottom: .3rem; }
.step-card p  { font-size: .8rem; color: var(--g500); line-height: 1.6; }
.step-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: .75rem;
  display: block;
}

/* ── CTA ─────────────────────────────────────────────── */
.land-cta {
  background: var(--black);
  color: var(--white);
  padding: 5rem 5%;
  text-align: center;
}
.land-cta h2 {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: .75rem;
}
.land-cta p { color: var(--g400); margin-bottom: 1.8rem; }
.land-cta-btns { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }
.cta-btn-main {
  display: inline-flex;
  align-items: center;
  padding: .75rem 2.2rem;
  border-radius: 10px;
  background: var(--white);
  color: var(--black);
  font-size: .95rem;
  font-weight: 700;
  transition: all .18s;
}
.cta-btn-main:hover { background: rgba(255,255,255,.88); }
.cta-btn-sec {
  display: inline-flex;
  align-items: center;
  padding: .75rem 2.2rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.28);
  color: var(--white);
  font-size: .95rem;
  font-weight: 600;
  background: transparent;
  transition: all .18s;
}
.cta-btn-sec:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.06);
}

/* ── Landing Footer ──────────────────────────────────── */
.land-footer {
  background: var(--black);
  border-top: 1px solid var(--g700);
  padding: 1.5rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--g500);
  font-size: .78rem;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 960px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-left  { display: none; }
  .burger { display: flex; }
  .app-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 58px; left: 0; z-index: 260;
    height: calc(100vh - 58px); width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-right: 1.5px solid var(--g200);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .two-panel { grid-template-columns: 1fr; }
  .main-content { padding: 1rem; }
  .land-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 3rem 5%;
  }
  .hero-img-wrap { margin-top: 0; }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .two-panel { grid-template-columns: 1fr; }
  .land-nav-links { display: none; }
  .land-burger { display: flex; }
  .land-hero { padding: 3.5rem 5% 4rem; }
  .land-hero h1 { font-size: 2.1rem; }
  .land-mobile-nav { top: 66px; }
}