/* ============================================================
   SKILLED-CREATIVES INTL. — DASHBOARD STYLES
   1. Tokens        5. Sidebar
   2. Reset/base    6. Pages & components
   3. Buttons       7. Modals & toasts
   4. Topbar        8. Responsive
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --blue:        #0A3D91;
  --blue-deep:   #072A66;
  --blue-tint:   rgba(10,61,145,.08);
  --orange:      #F2921D;
  --orange-tint: rgba(242,146,29,.12);

  --bg:          #F5F7FB;
  --surface:     #FFFFFF;
  --surface-2:   #FBFCFE;
  --text:        #0B0F1A;
  --muted:       #5B6472;
  --border:      #E3E7EF;

  --green:       #128F5B;
  --red:         #C2352B;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  --shadow-1: 0 1px 2px rgba(11,15,26,.05), 0 1px 3px rgba(11,15,26,.04);
  --shadow-2: 0 4px 12px rgba(11,15,26,.07), 0 1px 3px rgba(11,15,26,.05);
  --shadow-3: 0 18px 45px rgba(11,15,26,.16);

  --topbar-h: 62px;
  --side-w:   260px;

  --t: 180ms cubic-bezier(.2,.8,.2,1);
}

[data-theme="dark"]{
  --bg:        #080B12;
  --surface:   #111722;
  --surface-2: #161D2B;
  --text:      #EEF2F8;
  --muted:     #97A1B2;
  --border:    #212A3A;
  --blue-tint: rgba(56,116,214,.16);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,.45);
  --shadow-3: 0 20px 50px rgba(0,0,0,.6);
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }

/* The [hidden] attribute must win over any class that sets display.
   .boot, .conn-banner, .modal-root and .badge all set display, and a class
   selector outranks the browser's built-in [hidden] rule. Without this,
   setting hidden on those elements does nothing. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  overflow-x:hidden;
  transition:background var(--t), color var(--t);
}
body.no-scroll{ overflow:hidden; }

h1,h2,h3,h4{ font-family:"Space Grotesk",system-ui,sans-serif; margin:0; line-height:1.2; letter-spacing:-.015em; }
h1{ font-size:1.6rem; font-weight:600; }
h2{ font-size:1.15rem; font-weight:600; }
h3{ font-size:1rem; font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }
hr{ border:0; border-top:1px solid var(--border); margin:0; }

svg.lucide{ width:18px; height:18px; stroke-width:1.9; flex:none; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Boot screen */
.boot{
  position:fixed; inset:0; z-index:999;
  display:grid; place-content:center; justify-items:center; gap:14px;
  background:var(--bg);
}
.boot__mark{
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(145deg,var(--blue),var(--blue-deep));
  color:#fff; display:grid; place-items:center;
  font-family:"Space Grotesk"; font-weight:700; letter-spacing:.02em;
  animation:pulse 1.4s ease-in-out infinite;
}
.boot__text{ color:var(--muted); font-size:.9rem; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.93); opacity:.65 } }

/* Connection banner */
.conn-banner{
  position:fixed; top:calc(var(--topbar-h) + 10px); left:50%; transform:translateX(-50%);
  z-index:60; display:flex; align-items:center; gap:10px;
  padding:9px 12px; max-width:92vw;
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--orange);
  border-radius:var(--radius); box-shadow:var(--shadow-2);
  font-size:.85rem; color:var(--muted);
}
.conn-banner svg{ color:var(--orange); }
.conn-banner__close{ background:none; border:0; cursor:pointer; color:var(--muted); display:grid; place-items:center; }

/* ---------- 3. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 16px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--text);
  font-weight:500; cursor:pointer;
  transition:transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.btn:hover{ background:var(--surface-2); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn--primary{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(10,61,145,.35); }
.btn--primary:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }
.btn--accent{ background:var(--orange); border-color:var(--orange); color:#241300; }
.btn--accent:hover{ filter:brightness(.96); }
.btn--ghost{ background:transparent; }
.btn--danger{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--sm{ min-height:36px; padding:0 12px; font-size:.86rem; }
.btn--icon{ padding:0; width:44px; }
.btn--block{ width:100%; }
.link-btn{ background:none; border:0; padding:0; cursor:pointer; color:var(--blue); font-weight:500; font-size:.88rem; }
[data-theme="dark"] .link-btn{ color:#7FA9F0; }

.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  background:transparent; border:1px solid transparent; border-radius:10px;
  cursor:pointer; color:var(--muted); position:relative;
  transition:background var(--t), color var(--t);
}
.icon-btn:hover{ background:var(--blue-tint); color:var(--blue); }
[data-theme="dark"] .icon-btn:hover{ color:#9CC0FF; }
.dot{
  position:absolute; top:8px; right:9px; width:8px; height:8px;
  border-radius:50%; background:var(--orange); border:2px solid var(--surface);
}

/* ---------- 4. TOPBAR ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:50;
  display:flex; align-items:center; gap:12px; padding:0 14px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar__left{ display:flex; align-items:center; gap:8px; min-width:0; }
.topbar__right{ display:flex; align-items:center; gap:4px; margin-left:auto; }

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand__mark{
  position:relative; width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(145deg,var(--blue),var(--blue-deep));
  display:grid; place-items:center; overflow:hidden;
}
.brand__mark img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.brand__fallback{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-family:"Space Grotesk"; font-weight:700; font-size:.82rem; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand__text strong{ font-family:"Space Grotesk"; font-size:.95rem; font-weight:600; white-space:nowrap; }
.brand__text small{ font-size:.7rem; color:var(--muted); font-family:"IBM Plex Mono"; }

.topbar__search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:8px;
  height:40px; padding:0 12px; margin:0 8px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  color:var(--muted);
}
.topbar__search input{ flex:1; border:0; background:transparent; color:var(--text); outline:none; min-width:0; font-size: 16px; }

.user-btn{
  display:flex; align-items:center; gap:8px;
  height:40px; padding:0 8px 0 4px;
  background:transparent; border:1px solid transparent; border-radius:10px; cursor:pointer;
  transition:background var(--t);
}
.user-btn:hover{ background:var(--blue-tint); }
.user-btn__name{ font-size:.88rem; font-weight:500; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-btn__caret{ color:var(--muted); width:16px; height:16px; }

.avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(145deg,var(--blue),var(--blue-deep));
  color:#fff; font-family:"Space Grotesk"; font-weight:600; font-size:.82rem;
}
.avatar--sm{ width:30px; height:30px; font-size:.72rem; }
.avatar img{ width:100%; height:100%; object-fit:cover; }

.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px;
  font-size:.72rem; font-weight:600; font-family:"IBM Plex Mono";
}
.badge svg{ width:14px; height:14px; }
.badge--verified{ background:var(--blue-tint); color:var(--blue); padding:3px; border-radius:50%; }
[data-theme="dark"] .badge--verified{ color:#7FA9F0; }
.badge--pending{ background:var(--orange-tint); color:#9A5B00; }
[data-theme="dark"] .badge--pending{ color:var(--orange); }
.badge--ok{ background:rgba(18,143,91,.12); color:var(--green); }
.badge--muted{ background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.badge--danger{ background:rgba(194,53,43,.12); color:var(--red); }

/* Dropdown menus */
.dropdown{ position:relative; }
.menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:55;
  min-width:230px; padding:6px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-3);
  animation:menuIn 140ms ease-out;
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.menu__item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 10px; border:0; border-radius:8px; background:none;
  cursor:pointer; font-size:.9rem; text-align:left;
}
.menu__item:hover{ background:var(--bg); }
.menu__item--danger{ color:var(--red); }
.menu__sep{ margin:6px 4px; }
.menu--notif{ width:min(340px,90vw); padding:0; }

/* On a phone there is no room to hang it off the bell — pin it to the
   viewport instead, just under the topbar, with a small gutter each side. */
@media (max-width:559px){
  .menu--notif{
    position:fixed;
    top:calc(var(--topbar-h) + 8px);
    left:8px; right:8px;
    width:auto;
    max-height:70vh;
  }
  .notif-list{ max-height:calc(70vh - 52px); }
}

.menu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
  font-family:"Space Grotesk"; font-weight:600; font-size:.92rem;
}
.notif-list{ max-height:340px; overflow-y:auto; }
.notif{
  display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border);
  width:100%; background:none; border-left:0; border-right:0; border-top:0; text-align:left; cursor:pointer;
}
.notif:last-child{ border-bottom:0; }
.notif.is-unread{ background:var(--blue-tint); }
.notif__body{ min-width:0; flex:1; }
.notif__icon{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--bg); color:var(--blue); flex:none; }
.notif strong{ display:block; font-size:.87rem; }
.notif small{ color:var(--muted); font-size:.78rem; }
.notif time{ display:block; color:var(--muted); font-size:.72rem; font-family:"IBM Plex Mono"; margin-top:3px; }

/* ---------- 5. SIDEBAR ---------- */
.sidebar{
  position:fixed; top:0; bottom:0; left:0; z-index:70;
  width:var(--side-w); display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--border);
  transform:translateX(-100%);
  transition:transform 260ms cubic-bezier(.2,.8,.2,1);
}
.sidebar.is-open{ transform:none; }
.sidebar__head{
  height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 16px; border-bottom:1px solid var(--border);
}
.nav{ flex:1; overflow-y:auto; padding:14px 10px; }
.nav__label{
  font-family:"IBM Plex Mono"; font-size:.68rem; color:var(--muted);
  padding:0 10px; margin:4px 0 8px; letter-spacing:.04em;
}
.nav__sep{ margin:12px 10px; }
.nav__item{
  display:flex; align-items:center; gap:11px; width:100%;
  min-height:44px; padding:0 11px; margin-bottom:2px;
  border:0; border-radius:9px; background:none; cursor:pointer;
  color:var(--muted); font-size:.92rem; text-align:left;
  transition:background var(--t), color var(--t);
}
.nav__item svg{ flex:none; }
.nav__item:hover{ background:var(--bg); color:var(--text); }
.nav__item.is-active{ background:var(--blue-tint); color:var(--blue); font-weight:600; }
[data-theme="dark"] .nav__item.is-active{ color:#9CC0FF; }
.nav__item--danger{ color:var(--red); }
.nav__item--danger:hover{ background:rgba(194,53,43,.08); color:var(--red); }

.sidebar__foot{ padding:12px; border-top:1px solid var(--border); }
.mini-profile{
  display:flex; align-items:center; gap:10px;
  padding:10px; background:var(--bg); border-radius:var(--radius);
}
.mini-profile__meta{ min-width:0; flex:1; }
.mini-profile__meta strong{ display:block; font-size:.87rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-profile__meta small{ color:var(--muted); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

.overlay{
  position:fixed; inset:0; z-index:65;
  background:rgba(8,11,18,.5); backdrop-filter:blur(2px);
  animation:fadeIn 180ms ease-out;
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- 6. MAIN & PAGES ---------- */
.main{
  padding:calc(var(--topbar-h) + 20px) 16px 60px;
  max-width:1320px;
  transition:padding var(--t);
}
.page{ animation:pageIn 220ms ease-out; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

.page__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:22px;
}
.crumb{ font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--muted); margin-bottom:6px; }
.page__sub{ color:var(--muted); margin-top:6px; max-width:60ch; font-size:.93rem; }

.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:26px 0 14px;
}
.section-head--spaced{ margin-top:38px; }

/* Cards */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow-1);
}

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stat{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px;
  box-shadow:var(--shadow-1);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.stat:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:#CBD5E8; }
[data-theme="dark"] .stat:hover{ border-color:#2E3A4F; }
.stat__icon{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue); margin-bottom:12px;
}
[data-theme="dark"] .stat__icon{ color:#9CC0FF; }
.stat__icon--accent{ background:var(--orange-tint); color:#B5690A; }
[data-theme="dark"] .stat__icon--accent{ color:var(--orange); }
.stat__value{ font-family:"Space Grotesk"; font-size:1.5rem; font-weight:600; letter-spacing:-.02em; }
.stat__label{ color:var(--muted); font-size:.83rem; margin-top:2px; }
.stat__trend{ font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--green); margin-top:6px; display:inline-block; }

/* Course cards */
.course-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.course{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-1);
  transition:transform var(--t), box-shadow var(--t);
}
.course:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.course__thumb{
  height:126px; position:relative;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  display:grid; place-items:center; color:#fff;
}
.course__thumb img{ width:100%; height:100%; object-fit:cover; }
.course__thumb svg{ width:32px; height:32px; opacity:.75; }
.course__cat{
  position:absolute; top:10px; left:10px;
  background:rgba(255,255,255,.92); color:var(--blue-deep);
  font-family:"IBM Plex Mono"; font-size:.68rem; font-weight:500;
  padding:3px 8px; border-radius:6px;
}
.course__body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.course__title{ font-family:"Space Grotesk"; font-weight:600; font-size:1rem; }
.course__desc{ color:var(--muted); font-size:.86rem; }
.course__meta{ display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.78rem; font-family:"IBM Plex Mono"; }
.course__meta span{ display:inline-flex; align-items:center; gap:4px; }
.course__meta svg{ width:14px; height:14px; }
.course__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px; border-top:1px solid var(--border); }
.course__price{ font-family:"Space Grotesk"; font-weight:600; font-size:1.02rem; }

.progress{ height:6px; border-radius:99px; background:var(--bg); overflow:hidden; }
[data-theme="dark"] .progress{ background:#1C2433; }
.progress__bar{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue),#2F6FD0); transition:width 600ms ease; }
.progress__bar--done{ background:linear-gradient(90deg,var(--green),#2FB37C); }
.progress-row{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); font-family:"IBM Plex Mono"; margin-bottom:5px; }

/* Timeline */
.timeline{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:6px 16px; box-shadow:var(--shadow-1); }
.tl-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.tl-item:last-child{ border-bottom:0; }
.tl-item__icon{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--bg); color:var(--blue); flex:none; }
[data-theme="dark"] .tl-item__icon{ color:#9CC0FF; }
.tl-item__body{ min-width:0; }
.tl-item__body p{ font-size:.9rem; }
.tl-item__body time{ color:var(--muted); font-size:.75rem; font-family:"IBM Plex Mono"; }

/* Quick actions */
.quick-actions{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.quick{
  display:flex; align-items:center; gap:10px;
  min-height:56px; padding:0 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  cursor:pointer; font-size:.88rem; font-weight:500; text-align:left;
  transition:border-color var(--t), background var(--t), transform var(--t);
}
.quick svg{ color:var(--blue); }
[data-theme="dark"] .quick svg{ color:#9CC0FF; }
.quick:hover{ border-color:var(--blue); background:var(--blue-tint); }
.quick:active{ transform:translateY(1px); }

/* Toolbar / filters */
.toolbar{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.field{ display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--muted); }
.field input, .field select, .field textarea{ flex:1; border:0; background:transparent; outline:none; color:var(--text); font:inherit; min-width:0; font-size: 16px; }
.field--wide{ max-width:520px; margin-bottom:14px; }
.chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; min-height:38px; padding:0 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  cursor:pointer; font-size:.85rem; color:var(--muted);
  transition:all var(--t);
}
.chip:hover{ border-color:var(--blue); color:var(--blue); }
.chip.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:500; }

.tabs{ display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:4px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs--pill{ margin-bottom:16px; width:max-content; max-width:100%; }
.tab{ flex:none; min-height:36px; padding:0 14px; border:0; border-radius:7px; background:none; cursor:pointer; font-size:.86rem; color:var(--muted); }
.tab.is-active{ background:var(--blue-tint); color:var(--blue); font-weight:600; }
[data-theme="dark"] .tab.is-active{ color:#9CC0FF; }

/* Tables → cards on mobile */
.table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); }
table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left; padding:12px 16px; font-family:"IBM Plex Mono"; font-size:.72rem;
  color:var(--muted); font-weight:500; border-bottom:1px solid var(--border); background:var(--surface-2);
}
tbody td{ padding:14px 16px; border-bottom:1px solid var(--border); font-size:.88rem; vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }

/* Split layout */
.split{ display:grid; grid-template-columns:1fr; gap:18px; }

/* Community */
.cta-card{
  display:flex; align-items:center; gap:20px; margin-top:22px;
  padding:24px; border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--blue-deep),var(--blue) 65%,#1256B8);
  color:#fff; overflow:hidden; position:relative;
}
.cta-card h2{ color:#fff; }
.cta-card p{ color:rgba(255,255,255,.82); margin:8px 0 16px; max-width:52ch; font-size:.92rem; }
.cta-card__art{ margin-left:auto; opacity:.18; }
.cta-card__art svg{ width:120px; height:120px; }

.post-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.post{ background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--blue); border-radius:var(--radius); padding:16px; }
.post--event{ border-left-color:var(--orange); }
.post--opportunity{ border-left-color:var(--green); }
.post__kind{ font-family:"IBM Plex Mono"; font-size:.7rem; color:var(--muted); }
.post h3{ margin:6px 0; }
.post p{ color:var(--muted); font-size:.88rem; }
.post__foot{ margin-top:10px; font-size:.76rem; color:var(--muted); font-family:"IBM Plex Mono"; }

.about__lead{ color:var(--muted); max-width:72ch; margin-bottom:18px; }
.card-row{ display:grid; grid-template-columns:1fr; gap:12px; }
.mini-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-1); }
.mini-card > svg{ color:var(--blue); margin-bottom:10px; width:22px; height:22px; }
[data-theme="dark"] .mini-card > svg{ color:#9CC0FF; }
.mini-card h3{ margin-bottom:6px; }
.mini-card p{ color:var(--muted); font-size:.88rem; }

.counters{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.counter{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; }
.counter strong{ display:block; font-family:"Space Grotesk"; font-size:1.6rem; font-weight:600; color:var(--blue); }
[data-theme="dark"] .counter strong{ color:#7FA9F0; }
.counter span{ color:var(--muted); font-size:.82rem; }

/* Products */
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.product{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.product__img{ height:110px; background:var(--bg); display:grid; place-items:center; color:var(--muted); }
.product__img img{ width:100%; height:100%; object-fit:cover; }
.product__body{ padding:12px; }
.product__name{ font-weight:600; font-size:.9rem; margin-bottom:4px; }
.product__price{ font-family:"Space Grotesk"; font-weight:600; }
.product__meta{ color:var(--muted); font-size:.76rem; font-family:"IBM Plex Mono"; margin:4px 0 10px; }
.product__actions{ display:flex; gap:6px; }

/* Payment method cards */
.pm{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-1); }
.pm__top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pm__icon{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--blue-tint); color:var(--blue); }
[data-theme="dark"] .pm__icon{ color:#9CC0FF; }
.pm__num{ font-family:"IBM Plex Mono"; color:var(--muted); font-size:.85rem; }
.pm__actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }

/* Verification */
.vstatus{ display:flex; align-items:center; gap:14px; padding:18px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-1); margin-bottom:18px; }
.vstatus__icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none; }
.steps{ display:flex; gap:6px; margin:14px 0 22px; }
.steps__seg{ flex:1; height:6px; border-radius:99px; background:var(--border); }
.steps__seg.is-done{ background:var(--blue); }

/* Forms */
.form-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:.83rem; font-weight:500; color:var(--muted); }
.form-field input, .form-field select, .form-field textarea{font-size: 16px;
  width:100%; min-height:44px; padding:10px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font:inherit; outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.form-field textarea{ min-height:92px; resize:vertical; font-size: 16px;}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);
}
.form-field .hint{ font-size:.76rem; color:var(--muted); }
.form-field.is-invalid input, .form-field.is-invalid select{ border-color:var(--red); }
.error-text{ color:var(--red); font-size:.76rem; }

.switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.switch-row:last-child{ border-bottom:0; }
.switch-row small{ display:block; color:var(--muted); font-size:.8rem; }
.switch{ position:relative; width:46px; height:27px; flex:none; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; font-size: 16px;}
.switch span{ position:absolute; inset:0; border-radius:99px; background:var(--border); transition:background var(--t); pointer-events:none; }
.switch span::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:var(--shadow-1); transition:transform var(--t); }
.switch input:checked + span{ background:var(--blue); }
.switch input:checked + span::after{ transform:translateX(19px); }
.switch input:focus-visible + span{ box-shadow:0 0 0 3px var(--blue-tint); }

/* FAQ */
.faq{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); }
.faq__item{ border-bottom:1px solid var(--border); }
.faq__item:last-child{ border-bottom:0; }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:56px; padding:14px 16px;
  background:none; border:0; cursor:pointer; text-align:left; font-size:.92rem; font-weight:500;
}
.faq__q svg{ transition:transform var(--t); color:var(--muted); }
.faq__item.is-open .faq__q svg{ transform:rotate(180deg); }
.faq__a{ display:none; padding:0 16px 16px; color:var(--muted); font-size:.89rem; max-width:70ch; }
.faq__item.is-open .faq__a{ display:block; }
.faq__cat{ font-family:"IBM Plex Mono"; font-size:.68rem; color:var(--blue); display:block; margin-bottom:3px; }
[data-theme="dark"] .faq__cat{ color:#7FA9F0; }

/* Chat */
.chat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.chat__head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.chat__avatar{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(145deg,var(--blue),var(--blue-deep)); color:#fff; }
.chat__head small{ display:block; color:var(--muted); font-size:.78rem; }
.chat__log{ padding:16px; display:flex; flex-direction:column; gap:10px; min-height:260px; max-height:420px; overflow-y:auto; }
.bubble{ max-width:82%; padding:10px 13px; border-radius:14px; font-size:.89rem; line-height:1.5; }
.bubble--user{ align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:4px; }
.bubble--ai{ align-self:flex-start; background:var(--bg); border:1px solid var(--border); border-bottom-left-radius:4px; }
.typing{ display:flex; gap:4px; align-items:center; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }
.chat__input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); }
.chat__input input{ font-size: 16px; flex:1; min-height:44px; padding:0 12px; background:var(--bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font:inherit; outline:none; min-width:0; }
.chat__note{ padding:0 16px 14px; color:var(--muted); font-size:.75rem; }

.contact-list{ display:grid; gap:10px; }
.contact{
  display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  cursor:pointer; text-align:left; transition:border-color var(--t), background var(--t);
}
.contact:hover{ border-color:var(--blue); background:var(--blue-tint); }
.contact > svg:first-child{ color:var(--blue); }
[data-theme="dark"] .contact > svg:first-child{ color:#9CC0FF; }
.contact span{ flex:1; min-width:0; }
.contact strong{ display:block; font-size:.9rem; }
.contact small{ color:var(--muted); font-size:.79rem; }
.contact__go{ color:var(--muted); }
.hours{ display:flex; gap:12px; align-items:center; margin-top:14px; padding:14px; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); }
.hours svg{ color:var(--orange); }
.hours strong{ display:block; font-size:.88rem; }
.hours span{ color:var(--muted); font-size:.83rem; }

.note{ display:flex; gap:8px; align-items:flex-start; margin-top:18px; color:var(--muted); font-size:.82rem; max-width:70ch; }
.note svg{ color:var(--green); flex:none; margin-top:2px; }

/* Empty & skeleton */
.empty{
  display:grid; place-items:center; text-align:center; gap:10px;
  padding:40px 20px; background:var(--surface);
  border:1px dashed var(--border); border-radius:var(--radius-lg);
}
.empty__icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--bg); color:var(--muted); }
.empty__icon svg{ width:24px; height:24px; }
.empty h3{ font-size:1rem; }
.empty p{ color:var(--muted); font-size:.88rem; max-width:44ch; }

.skeleton{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); height:120px; position:relative; overflow:hidden; }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shimmer 1.3s infinite;
}
[data-theme="dark"] .skeleton::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); }
@keyframes shimmer{ to{ transform:translateX(100%) } }

/* ---------- 7. MODALS & TOASTS ---------- */
.modal-root{ position:fixed; inset:0; z-index:80; display:grid; place-items:end center; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(8,11,18,.55); backdrop-filter:blur(3px); animation:fadeIn 160ms ease-out; }
.modal{
  position:relative; z-index:1;
  width:100%; max-width:560px; max-height:92vh;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border);
  border-radius:18px 18px 0 0; box-shadow:var(--shadow-3);
  animation:sheetIn 240ms cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetIn{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
.modal__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 12px; border-bottom:1px solid var(--border); }
.modal__head h2{ font-size:1.05rem; }
.modal__body{ padding:18px 16px 22px; overflow-y:auto; }
.modal__actions{ display:flex; gap:10px; margin-top:20px; }
.modal__actions .btn{ flex:1; }

.summary{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin:14px 0; }
.summary__row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:.88rem; }
.summary__row--total{ border-top:1px solid var(--border); margin-top:6px; padding-top:12px; font-family:"Space Grotesk"; font-weight:600; font-size:1rem; }
.summary__row span:first-child{ color:var(--muted); }

.success-mark{ width:64px; height:64px; border-radius:50%; margin:6px auto 14px; display:grid; place-items:center; background:rgba(18,143,91,.12); color:var(--green); }
.success-mark svg{ width:30px; height:30px; }
.ref{ font-family:"IBM Plex Mono"; font-size:.82rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 10px; word-break:break-all; text-align:center; }

.toast-root{ position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:90; display:flex; flex-direction:column; gap:8px; width:min(400px,92vw); }
.toast{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--blue);
  border-radius:var(--radius); box-shadow:var(--shadow-3); font-size:.88rem;
  animation:toastIn 220ms cubic-bezier(.2,.8,.2,1);
}
.toast.is-out{ animation:toastOut 200ms ease-in forwards; }
.toast--success{ border-left-color:var(--green); } .toast--success svg{ color:var(--green); }
.toast--error{ border-left-color:var(--red); }     .toast--error svg{ color:var(--red); }
.toast--info svg{ color:var(--blue); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(10px) } }

/* ---------- 8. RESPONSIVE ---------- */
.only-mobile{ display:grid; }
.only-desktop{ display:none; }
.topbar__search{ display:none; }

@media (min-width:560px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .course-grid{ grid-template-columns:repeat(2,1fr); }
  .quick-actions{ grid-template-columns:repeat(3,1fr); }
  .card-row{ grid-template-columns:repeat(2,1fr); }
  .counters{ grid-template-columns:repeat(4,1fr); }
  .form-grid--2{ grid-template-columns:1fr 1fr; }
  .modal{ border-radius:18px; max-height:88vh; }
  .modal-root{ place-items:center; padding:20px; }
}

@media (min-width:900px){
  :root{ --topbar-h:66px; }
  .only-mobile{ display:none !important; }
  .only-desktop{ display:grid; }
  .topbar__search{ display:flex; }
  .topbar{ padding:0 20px; }
  .main{ padding:calc(var(--topbar-h) + 28px) 32px 80px; }
  h1{ font-size:1.9rem; }

  .sidebar{ transform:none; top:0; padding-top:0; }
  body.sidebar-collapsed .sidebar{ transform:translateX(-100%); }
  body:not(.sidebar-collapsed) .main{ margin-left:var(--side-w); }
  body:not(.sidebar-collapsed) .topbar{ padding-left:calc(var(--side-w) + 20px); }
  .overlay{ display:none !important; }

  .stats{ grid-template-columns:repeat(5,1fr); }
  .split{ grid-template-columns:1.6fr 1fr; align-items:start; }
  .split--support{ grid-template-columns:1.4fr 1fr; }
  .course-grid{ grid-template-columns:repeat(2,1fr); }
  .course-grid--catalogue{ grid-template-columns:repeat(3,1fr); }
  .quick-actions{ grid-template-columns:repeat(5,1fr); }
  .card-row{ grid-template-columns:repeat(3,1fr); }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(4,1fr); }
  .toolbar{ flex-direction:row; align-items:center; justify-content:space-between; }
  .field--search{ width:280px; }
}

@media (min-width:1280px){
  .course-grid--catalogue{ grid-template-columns:repeat(4,1fr); }
}

/* Mobile sidebar is wider for comfortable tapping */
@media (max-width:899px){
  .sidebar{ width:290px; }
  table, thead, tbody, tr, td, th{ display:block; }
  thead{ display:none; }
  tbody tr{ border-bottom:1px solid var(--border); padding:6px 0; }
  tbody tr:last-child{ border-bottom:0; }
  tbody td{ display:flex; justify-content:space-between; gap:14px; align-items:center; border:0; padding:8px 16px; }
  tbody td::before{ content:attr(data-label); color:var(--muted); font-family:"IBM Plex Mono"; font-size:.72rem; }
  tbody td:last-child{ padding-bottom:14px; }
}