/* =========================================================
   Tutorly — Reference Minimal UI
   Visual-only layer. JavaScript/API structure is unchanged.
   ========================================================= */

:root {
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7f8f8;
  --surface-muted: #f0f2f1;
  --text: #1a1a1a;
  --text-dim: #666666;
  --text-faint: #999999;
  --accent: #1f6aa5;
  --accent-hover: #185887;
  --accent-text: #ffffff;
  --line: rgba(0,0,0,.07);
  --line-strong: rgba(0,0,0,.10);
  --border-soft: rgba(0,0,0,.06);
  --border-strong: rgba(0,0,0,.08);
  --panel-bg: transparent;
  --danger: #b84f4f;
  --ok: #2f8a68;
  --warn: #b47a22;
  --radius: 4px;
  --transition: 160ms ease;
}

html[data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7f8f8;
  --surface-muted: #f0f2f1;
  --text: #1a1a1a;
  --text-dim: #666666;
  --text-faint: #999999;
  --accent: #1f6aa5;
  --accent-hover: #185887;
  --accent-text: #ffffff;
  --line: rgba(0,0,0,.07);
  --line-strong: rgba(0,0,0,.10);
  --border-soft: rgba(0,0,0,.06);
  --border-strong: rgba(0,0,0,.08);
  --panel-bg: transparent;
  --chat-bg: #fafafa;
  --chat-bubble: rgba(0,0,0,.035);
  --chat-system: rgba(31,106,165,.07);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #111315;
  --surface: #111315;
  --surface-soft: #171a1d;
  --surface-muted: #1d2125;
  --text: #f2f3f3;
  --text-dim: #a6abad;
  --text-faint: #777d81;
  --accent: #6ca5d3;
  --accent-hover: #82b4dd;
  --accent-text: #101214;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.12);
  --border-soft: rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.10);
  --panel-bg: transparent;
  --chat-bg: #15181a;
  --chat-bubble: rgba(255,255,255,.05);
  --chat-system: rgba(108,165,211,.10);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; }
svg { display: block; }

::selection { background: rgba(31,106,165,.15); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  padding: 8px 12px; background: var(--text); color: var(--bg); text-decoration: none;
}
.skip-link:focus { left: 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Global navigation ---------- */
.top-nav {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 44px);
  display: flex;
  align-items: center;
  gap: clamp(22px, 4vw, 52px);
}
.wordmark {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.05em;
  text-decoration: none;
}
.wordmark span, .footer-brand .brand-name span { color: var(--accent); }
.nav-links { display:flex; align-items:center; gap: clamp(18px, 3vw, 38px); margin-right:auto; }
.nav-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}
.nav-link:hover, .nav-link.active, .nav-link[aria-current="page"] { color: var(--accent); }
.nav-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.lang-switcher { display:flex; gap:2px; padding:2px; background:transparent; }
.lang-btn {
  min-width: 30px; padding: 4px 6px; border:0; border-radius:0;
  background:transparent; color:var(--text-dim); font-size:11px; font-weight:500;
}
.lang-btn.active, .lang-btn:hover { color:var(--text); background:var(--surface-soft); }
.account-dropdown { position:relative; }
.btn-account {
  min-height:34px; display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px; border:0; border-radius:4px; background:var(--accent); color:var(--accent-text);
  font-size:12px; font-weight:600;
}
.btn-account:hover { background:var(--accent-hover); }
.btn-account svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; }
.theme-toggle {
  width:30px; height:30px; padding:6px; border:0; border-radius:4px; background:transparent; color:var(--text-dim);
}
.theme-toggle:hover { background:var(--surface-soft); color:var(--text); }
.theme-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.icon-moon { display:none; }
html[data-theme="dark"] .icon-sun { display:none; }
html[data-theme="dark"] .icon-moon { display:block; }

/* ---------- Dropdown ---------- */
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:220px;
  padding:6px 0; background:var(--surface); border:0; border-radius:4px;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.account-dropdown.open .dropdown-menu, .dropdown-menu.open { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-item {
  width:100%; display:flex; align-items:center; gap:9px; padding:9px 14px; border:0; background:transparent;
  text-align:left; color:var(--text); font-size:13px;
}
.dropdown-item:hover { background:var(--surface-soft); }
.dropdown-item svg { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.5; }
.role-badge { margin-left:auto; color:var(--text-faint); font-size:10px; }
.dropdown-divider { height:.5px; margin:4px 14px; background:var(--line); }
.dropdown-overlay { display:none; position:fixed; inset:0; z-index:30; }
.dropdown-overlay.open { display:block; }

/* ---------- Layout / page switching ---------- */
.app { width:100%; flex:1; }
.page { display:none; width:100%; }
.page.active { display:block; }
.frame {
  width:min(1180px, 100%);
  margin:0 auto;
  padding:clamp(28px, 5vw, 72px) clamp(20px, 4vw, 44px);
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.frame-header { margin-bottom:clamp(28px, 5vw, 48px); }
.frame-header-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.frame-title, .why-title {
  margin:0;
  color:var(--text);
  font-size:clamp(34px, 5vw, 56px);
  line-height:1.05;
  letter-spacing:-.045em;
  font-weight:600;
}
.frame-caption { margin:10px 0 0; max-width:680px; color:var(--text-dim); font-size:15px; line-height:1.6; }
.badge {
  display:inline-flex; align-items:center; padding:3px 7px; border:0; border-radius:4px;
  background:var(--surface-soft); color:var(--text-dim); font-size:11px; font-weight:500;
}

/* ---------- Hero ---------- */
.hero {
  width:min(1180px,100%); min-height:min(620px,72vh); margin:0 auto;
  padding:clamp(48px, 9vw, 110px) clamp(20px, 4vw, 44px) clamp(64px, 9vw, 100px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(32px, 7vw, 100px);
}
.hero-content { flex:1 1 58%; max-width:700px; }
.hero h1 {
  margin:0; font-size:clamp(48px, 7vw, 82px); line-height:.98; letter-spacing:-.065em; font-weight:600;
}
.hero h1 span { color:var(--accent); }
.hero p { max-width:600px; margin:26px 0 0; color:var(--text-dim); font-size:18px; line-height:1.65; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.btn-hero, .btn-fill, .btn-outline {
  min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 18px; border:0; border-radius:4px; font-size:14px; font-weight:600; transition:background var(--transition), color var(--transition), opacity var(--transition);
}
.btn-hero-primary, .btn-fill { background:var(--accent); color:var(--accent-text); }
.btn-hero-primary:hover, .btn-fill:hover { background:var(--accent-hover); }
.btn-hero-secondary, .btn-outline { background:var(--surface-soft); color:var(--text); }
.btn-hero-secondary:hover, .btn-outline:hover { background:var(--surface-muted); }
.hero-visual { flex:0 1 420px; min-width:260px; color:var(--accent); opacity:.9; }
.hero-visual svg { width:100%; height:auto; }
.hero-visual rect[stroke], .hero-visual circle[stroke] { stroke:var(--line-strong) !important; }

/* ---------- Why / category-like blocks ---------- */
.why-section {
  width:min(1180px,100%); margin:0 auto; padding:clamp(48px,8vw,92px) clamp(20px,4vw,44px);
}
.why-title { font-size:clamp(30px,4vw,44px); margin-bottom:38px; }
.why-grid { display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,60px); }
.why-card { flex:1 1 210px; min-width:180px; padding:0; background:transparent; }
.why-icon {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  background:var(--surface-soft); border:0; border-radius:50%; color:var(--accent);
}
.why-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.5; }
.why-card h3 { margin:0 0 7px; font-size:18px; line-height:1.25; font-weight:600; letter-spacing:-.02em; }
.why-card p { margin:0; max-width:250px; color:var(--text-dim); font-size:14px; line-height:1.65; }

/* ---------- Start learning / reference cards ---------- */
.frame-grid {
  display:flex; flex-wrap:wrap; gap:14px; align-items:stretch;
}
.frame-card {
  position:relative; flex:1 1 260px; min-height:310px; padding:28px;
  background:var(--surface-soft); border:0 !important; border-radius:4px !important; box-shadow:none !important;
  display:flex; flex-direction:column;
}
.frame-card--accent { background:rgba(31,106,165,.08); }
.frame-card--dark { background:#1f2325; color:#fff; }
.frame-card--muted { background:#f0f1f1; }
.frame-card .card-eyebrow { color:var(--text-dim); font-size:11px; font-weight:500; }
.frame-card--dark .card-eyebrow, .frame-card--dark .card-text { color:rgba(255,255,255,.68); }
.card-title { margin:12px 0 0; max-width:420px; font-size:clamp(24px,3vw,34px); line-height:1.08; letter-spacing:-.035em; font-weight:600; }
.card-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:18px; }
.tag { padding:3px 7px; border-radius:3px; background:rgba(0,0,0,.05); color:var(--text-dim); font-size:10px; }
.frame-card--dark .tag { background:rgba(255,255,255,.10); color:rgba(255,255,255,.75); }
.card-text { margin:18px 0 0; max-width:420px; color:var(--text-dim); font-size:14px; line-height:1.65; }
.card-expand {
  width:36px; height:36px; margin-top:auto; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:4px; background:var(--surface); color:var(--text);
}
.card-expand:hover { background:var(--accent); color:#fff; }
.card-expand svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }

/* ---------- Search / filters ---------- */
.dash-shell { display:flex; align-items:stretch; gap:clamp(24px,4vw,52px); min-width:0; }
.dash-sidebar {
  flex:0 0 230px; width:230px; padding:0 !important; background:transparent !important;
  border:0 !important; border-right:0 !important; box-shadow:none !important;
}
.dash-main { flex:1 1 auto; min-width:0; padding:0 !important; }
.sidebar-brand { padding:0 0 22px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sidebar-brand > span:first-child { font-size:20px; font-weight:600; letter-spacing:-.04em; }
.sidebar-role { color:var(--text-faint); font-size:11px; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.dash-link {
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 0; border:0; background:transparent;
  color:var(--text-dim); text-align:left; font-size:13px; font-weight:400;
}
.dash-link:hover, .dash-link.active { color:var(--text); }
.dash-link.active { font-weight:600; }
.dash-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.sidebar-divider { height:.5px; margin:16px 0; background:var(--line); }
.sidebar-user { display:flex; align-items:center; gap:10px; margin-top:22px; }
.user-info { min-width:0; display:flex; flex-direction:column; }
.user-info strong { font-size:13px; font-weight:600; }
.user-info span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-faint); font-size:11px; }
.avatar { width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface-muted); color:var(--text); font-size:11px; font-weight:600; }
.filter-group { margin-bottom:22px; }
.filter-group-title { margin-bottom:8px !important; color:var(--text); font-size:12px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; }
.filter-group label { color:var(--text-dim); }
.filter-checkbox { accent-color:var(--accent); }
.tutor-search-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.tutor-results { display:flex; flex-direction:column; gap:10px; }
.tutor-card {
  display:flex !important; align-items:center; gap:18px; width:100%; padding:18px !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  border-bottom:0.5px solid var(--line) !important;
}
.tutor-card:last-child { border-bottom:0 !important; }
.tutor-card:hover { background:var(--surface-soft) !important; }
.tutor-card .avatar, .tutor-card img { width:68px; height:68px; flex:0 0 auto; border-radius:50%; object-fit:cover; }
.tutor-card strong { font-size:17px !important; font-weight:600 !important; }
.tutor-card button { flex:0 0 auto; }

/* ---------- Forms ---------- */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; min-width:0; }
.field[hidden] { display:none !important; }
.field label, .feature-form label { color:var(--text); font-size:12px; font-weight:500; }
.field input, .field select, .field textarea,
.find-tutor-form input, .find-tutor-form select,
.chat-form input, .chat-compose input {
  width:100%; min-width:0; padding:9px 0; border:0; border-bottom:.5px solid var(--line-strong); border-radius:0;
  background:transparent; color:var(--text); outline:0;
}
.field input:focus, .field select:focus, .field textarea:focus,
.find-tutor-form input:focus, .find-tutor-form select:focus,
.chat-form input:focus, .chat-compose input:focus { border-bottom-color:var(--accent); }

/* Native select menus must keep a readable foreground/background pair in both themes. */
html[data-theme="light"] select option { background:#ffffff; color:#1a1a1a; }
html[data-theme="dark"] select option { background:#111315; color:#f2f3f3; }
.field textarea { resize:vertical; min-height:100px; }
.field-password { position:relative; }
.field-toggle { position:absolute; right:0; bottom:7px; padding:3px; border:0; background:transparent; color:var(--text-faint); }
.field-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.icon-eye-off { display:none; }
.field-toggle[aria-pressed="true"] .icon-eye { display:none; }
.field-toggle[aria-pressed="true"] .icon-eye-off { display:block; }
.form-row { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:8px 0 20px; }
.checkbox-field { display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:12px; cursor:pointer; }
.checkbox-field input { position:absolute; opacity:0; pointer-events:none; }
.checkbox-box { width:15px; height:15px; display:flex; align-items:center; justify-content:center; background:var(--surface-soft); color:var(--accent); }
.checkbox-box svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; opacity:0; }
.checkbox-field input:checked + .checkbox-box svg { opacity:1; }
.link-muted { padding:0; border:0; background:transparent; color:var(--text-dim); font-size:12px; }
.link-muted:hover { color:var(--accent); }
.form-status { min-height:20px; margin:8px 0; color:var(--text-dim); font-size:12px; }
.btn-fill { width:auto; }
.btn-outline { border:0 !important; }
.find-tutor-form { display:flex; flex-wrap:wrap; gap:22px; }
.find-tutor-form .field { flex:1 1 180px; }
.find-tutor-actions { width:100%; display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Become tutor / auth ---------- */
.auth-split {
  display:flex; min-height:520px; gap:clamp(40px,8vw,100px); background:transparent !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
.auth-image { flex:1 1 50%; min-height:420px; position:relative; background:var(--surface-soft); overflow:hidden; }
.auth-image-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(31,106,165,.10), transparent 55%); }
.auth-image-content { position:absolute; inset:auto 30px 30px; z-index:1; max-width:420px; }
.auth-image-content .auth-badge { display:inline-block; margin-bottom:12px; color:var(--accent); font-size:12px; font-weight:600; }
.auth-image-content h2, .auth-image-content h3 { margin:0; font-size:clamp(28px,4vw,46px); line-height:1.05; letter-spacing:-.04em; }
.auth-image-content p { margin:12px 0 0; color:var(--text-dim); }
.auth-features { margin-top:18px; display:flex; flex-direction:column; gap:7px; }
.auth-features li { color:var(--text-dim); font-size:13px; }
.auth-form-wrap { flex:1 1 420px; max-width:520px; padding:10px 0 !important; }
.auth-back-link, .back-link { display:inline-flex; align-items:center; gap:7px; padding:0; margin:0 0 32px; border:0; background:transparent; color:var(--text-dim); font-size:13px; }
.auth-back-link:hover, .back-link:hover { color:var(--text); }
.auth-back-link svg, .back-link svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.auth-heading { margin:0; font-size:clamp(30px,4vw,46px); line-height:1.05; letter-spacing:-.045em; font-weight:600; }
.auth-sub { margin:10px 0 28px; color:var(--text-dim); }
.auth-form { max-width:460px; }
.auth-form .btn-fill, .auth-form .btn-google { width:100%; }
.auth-divider { display:flex; align-items:center; gap:10px; margin:22px 0; color:var(--text-faint); font-size:11px; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:.5px; background:var(--line); }
.btn-google { min-height:42px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:4px; background:var(--surface-soft); color:var(--text); font-size:13px; font-weight:500; }
.google-icon-slot { width:16px; height:16px; border-radius:50%; background:conic-gradient(#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75% 100%); }
.auth-alt { margin:20px 0 0; color:var(--text-dim); font-size:12px; }
.auth-alt button { padding:0; border:0; background:transparent; color:var(--accent); font-weight:600; }

/* ---------- Dashboard ---------- */
.dash-topbar { display:flex; align-items:center; min-height:40px; margin-bottom:30px; }
.topbar-title { font-size:13px; color:var(--text-dim); }
.dash-section { display:none; }
.dash-section.active { display:block; }
.section-head { margin-bottom:22px; }
.section-head h2 { margin:0; font-size:28px; line-height:1.1; letter-spacing:-.035em; font-weight:600; }
.section-head p { margin:7px 0 0; color:var(--text-dim); font-size:13px; }
.panel { background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.panel-body { padding:18px 0 !important; }
.dash-list { display:flex; flex-direction:column; }
.dash-list-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:.5px solid var(--line); }
.dash-list-row:last-child { border-bottom:0; }
.availability-grid { display:flex; flex-direction:column; gap:0; }
.availability-day { display:flex; align-items:center; gap:10px; min-height:40px; border-bottom:.5px solid var(--line); }
.availability-day > label { width:44px; margin:0; }
.avail-start, .avail-end { width:120px; padding:6px 0; border:0; border-bottom:.5px solid var(--line); background:transparent; }
.avail-off { color:var(--text-faint); font-size:12px; }
.profile-photo-upload { display:flex; align-items:center; gap:16px; }
.profile-photo-preview { width:72px; height:72px; border-radius:50%; overflow:hidden; background:var(--surface-soft); }

/* ---------- Empty / utility ---------- */
.empty-state { padding:46px 10px; text-align:center; color:var(--text-dim); }
.empty-icon { width:40px; height:40px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:var(--surface-soft); border-radius:50%; color:var(--accent); }
.empty-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; }
.empty-state strong { display:block; color:var(--text); font-size:15px; font-weight:600; }
.empty-state p { max-width:500px; margin:7px auto 0; font-size:13px; line-height:1.6; }

/* ---------- AI chat ---------- */
.chat-shell { display:flex; min-height:560px; gap:28px; background:transparent; }
.chat-sidebar { flex:0 0 180px; padding:0; }
.btn-new-chat { width:100%; min-height:40px; display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 12px; border:0; border-radius:4px; background:var(--accent); color:#fff; font-size:13px; font-weight:600; }
.btn-new-chat svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.chat-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-header { display:flex; align-items:center; gap:10px; padding:0 0 14px; border-bottom:.5px solid var(--line); }
.chat-avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); opacity:.85; }
.chat-header-text { display:flex; flex-direction:column; }
.chat-name { font-size:14px; font-weight:600; }
.chat-status { color:var(--text-faint); font-size:11px; }
.chat-reset { margin-left:auto; padding:6px; border:0; background:transparent; color:var(--text-dim); }
.chat-reset svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.chat-log { flex:1; padding:24px 0; display:flex; flex-direction:column; gap:12px; overflow:auto; }
.chat-msg { max-width:72%; padding:11px 14px; background:var(--surface-soft); color:var(--text); font-size:13px; line-height:1.6; }
.chat-msg--system { align-self:center; max-width:100%; background:transparent; color:var(--text-faint); font-size:11px; }
.chat-form { display:flex; align-items:center; gap:8px; padding-top:12px; border-top:.5px solid var(--line); }
.chat-form input { flex:1; }
.chat-icon-btn { width:36px; height:36px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:7px; border:0; border-radius:4px; background:var(--surface-soft); color:var(--text); }
.chat-icon-btn:hover { background:var(--accent); color:#fff; }
.chat-icon-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }

/* ---------- Footer / contact-like ending ---------- */
footer { margin-top:auto; }
.site-footer {
  width:min(1180px,100%); margin:0 auto; padding:clamp(52px,8vw,90px) clamp(20px,4vw,44px) 32px;
  display:flex; flex-wrap:wrap; gap:40px 70px;
  border-top:.5px solid var(--line);
}
.footer-brand { flex:2 1 300px; max-width:420px; }
.brand-name { font-size:24px; font-weight:600; letter-spacing:-.05em; }
.brand-desc { margin:14px 0; color:var(--text-dim); font-size:13px; line-height:1.65; }
.brand-copy { color:var(--text-faint); font-size:11px; }
.footer-col { flex:1 1 130px; }
.footer-col h4 { margin:0 0 12px; font-size:12px; font-weight:600; }
.footer-col li { margin:6px 0; }
.footer-col a { color:var(--text-dim); font-size:12px; text-decoration:none; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom {
  width:min(1180px,100%); margin:0 auto; padding:14px clamp(20px,4vw,44px) 24px;
  display:flex; justify-content:space-between; gap:20px; color:var(--text-faint); font-size:11px;
}
.footer-bottom-links { display:flex; gap:16px; }
.footer-bottom-links a { text-decoration:none; }

/* ---------- Contact section injected on home ---------- */
.contact-section {
  width:min(1180px,100%); margin:0 auto; padding:clamp(55px,8vw,95px) clamp(20px,4vw,44px);
  display:flex; flex-wrap:wrap; gap:50px 90px;
}
.contact-copy { flex:1 1 340px; }
.contact-copy h2 { margin:0; font-size:clamp(32px,4.5vw,54px); line-height:1; letter-spacing:-.05em; font-weight:600; }
.contact-copy p { max-width:420px; margin:16px 0 0; color:var(--text-dim); font-size:14px; }
.contact-details { margin-top:30px; display:flex; flex-direction:column; gap:8px; }
.contact-details a { color:var(--text); text-decoration:none; font-size:14px; }
.contact-details a:hover { color:var(--accent); }
.contact-form { flex:1 1 420px; }
.contact-form .field { margin-bottom:22px; }
.contact-form textarea { min-height:90px; }

/* ---------- Modals / extended features ---------- */
.tutor-detail-modal, .booking-modal, .review-modal {
  position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.42);
}
.tutor-detail-modal[aria-hidden="false"], .booking-modal[aria-hidden="false"], .review-modal[aria-hidden="false"] { display:flex; }
.feature-modal-card {
  position:relative; width:min(900px,100%); max-height:90vh; overflow:auto; padding:clamp(22px,4vw,40px);
  background:var(--surface); border:0; border-radius:4px; box-shadow:none;
}
.feature-modal-close { position:absolute; top:14px; right:14px; width:30px; height:30px; padding:0; border:0; background:var(--surface-soft); color:var(--text); font-size:20px; line-height:1; }
.feature-form h2 { margin:0 0 20px; font-size:28px; line-height:1.1; letter-spacing:-.035em; }
.star-picker { display:flex; gap:5px; margin-top:8px; }
.message-layout { display:flex; min-height:420px; gap:20px; }
.conversation-list { flex:0 0 210px; }
.chat-pane { flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-messages { flex:1; overflow:auto; padding:14px 0; }
.chat-compose { display:flex; gap:8px; padding-top:10px; border-top:.5px solid var(--line); }
.chat-compose input { flex:1; }

/* Contact cards — four lightweight blocks, matching the reference rhythm */
.contact-grid { display:flex; flex-wrap:wrap; gap:24px 36px; margin-top:34px; }
.contact-card { flex:1 1 180px; min-width:150px; padding:0; }
.contact-card strong { display:block; margin-bottom:5px; font-size:15px; font-weight:600; }
.contact-card span { display:block; color:var(--text-dim); font-size:12px; line-height:1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .top-nav { flex-wrap:wrap; }
  .nav-links { order:3; width:100%; overflow:auto; padding-top:4px; }
  .hero { flex-direction:column; align-items:flex-start; min-height:auto; }
  .hero-visual { width:min(520px,100%); align-self:center; }
  .dash-shell { flex-direction:column; }
  .dash-sidebar { width:100%; flex-basis:auto; }
  .sidebar-nav { flex-direction:row; flex-wrap:wrap; gap:4px 14px; }
  .dash-link { width:auto; }
  .sidebar-divider { display:none; }
  .sidebar-user { display:none; }
  .auth-split { flex-direction:column; min-height:0; }
  .auth-image { min-height:280px; }
  .auth-form-wrap { max-width:none; }
  .chat-shell { flex-direction:column; min-height:500px; }
  .chat-sidebar { flex-basis:auto; }
  .btn-new-chat { width:auto; }
}

@media (max-width: 620px) {
  body { font-size:14px; }
  .top-nav { padding:18px 18px; gap:16px; }
  .wordmark { font-size:22px; }
  .nav-actions { margin-left:auto; }
  .nav-links { gap:18px; }
  .nav-link { font-size:13px; white-space:nowrap; }
  .lang-switcher, .theme-toggle { display:none; }
  .btn-account { min-height:36px; padding:8px 11px; }
  .frame { padding:38px 18px 60px; }
  .hero { padding:54px 18px 70px; gap:30px; }
  .hero h1 { font-size:clamp(44px,13vw,64px); }
  .hero p { font-size:15px; }
  .hero-buttons { flex-direction:column; width:100%; }
  .btn-hero { width:100%; }
  .hero-visual { display:none; }
  .why-section { padding:52px 18px 70px; }
  .why-grid { gap:34px 20px; }
  .why-card { flex-basis:calc(50% - 10px); min-width:140px; }
  .frame-grid { flex-direction:column; }
  .frame-card { min-height:250px; padding:24px; }
  .frame-title { font-size:42px; }
  .tutor-card { flex-wrap:wrap; padding:16px 0 !important; }
  .tutor-card > * { min-width:0; }
  .tutor-card .avatar, .tutor-card img { width:58px; height:58px; }
  .tutor-card button { width:100%; }
  .form-row { flex-direction:column; align-items:flex-start; }
  .btn-fill, .btn-outline { min-height:42px; }
  .auth-image { min-height:230px; }
  .site-footer, .footer-bottom, .contact-section { padding-left:18px; padding-right:18px; }
  .footer-bottom { flex-direction:column; }
  .contact-section { flex-direction:column; gap:34px; }
  .contact-form .btn-fill { width:100%; }
  .message-layout { flex-direction:column; }
  .conversation-list { flex-basis:auto; }
  .feature-modal-card { padding:22px 18px; }
}

@media (max-width: 420px) {
  .why-card { flex-basis:100%; }
  .why-card p { max-width:none; }
  .nav-links { gap:14px; }
  .nav-link:nth-child(4) { display:none; }
}

/* =========================================================
   Анкета репетитора — карточный layout под референс
   ========================================================= */
.anketa-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width: 860px) { .anketa-grid { grid-template-columns:1fr; } }
.anketa-card { background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:22px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-bottom:20px; }
.anketa-card:last-child { margin-bottom:0; }
.anketa-card-head { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; margin:0 0 18px; color:var(--text); }
.anketa-card-head .anketa-ico { width:20px; height:20px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); }
.anketa-card-head .anketa-ico svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.anketa-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 480px) { .anketa-row2 { grid-template-columns:1fr; } }

.anketa-photo-row { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.anketa-photo-preview { width:56px; height:56px; border-radius:50%; overflow:hidden; background:var(--surface-soft); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.anketa-photo-preview img { width:100%; height:100%; object-fit:cover; }
.anketa-photo-preview svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; }
.anketa-upload-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:20px; background:var(--surface-soft); border:1px solid var(--line-strong); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:background var(--transition); }
.anketa-upload-btn:hover { background:var(--surface-muted); }
.anketa-upload-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.anketa-upload-btn input[type="file"] { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.anketa-remove-link { border:0; background:none; color:var(--danger); font-size:12px; font-weight:600; cursor:pointer; padding:4px 0; }

.flag-pill-group { display:flex; flex-wrap:wrap; gap:8px; }
.flag-pill { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:border-color var(--transition), background var(--transition); }
.flag-pill .flag-emoji { font-size:16px; line-height:1; }
.flag-pill:hover { border-color:var(--accent); }
.flag-pill.is-active { border-color:var(--accent); background:rgba(31,106,165,.08); color:var(--accent); }

.cert-badge-group { display:flex; flex-wrap:wrap; gap:8px; }
.cert-badge { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:border-color var(--transition), background var(--transition); }
.cert-badge:hover { border-color:var(--accent); }
.cert-badge.is-active { border-color:var(--accent); background:rgba(31,106,165,.08); color:var(--accent); }
.cert-badge svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }

.video-dropzone { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:220px; box-sizing:border-box; border:1.5px dashed var(--line-strong); border-radius:12px; padding:36px 18px; text-align:center; background:var(--surface-soft); cursor:pointer; transition:border-color var(--transition), background var(--transition); overflow:hidden; }
.video-dropzone:hover { border-color:var(--accent); background:rgba(31,106,165,.05); }
.video-dropzone svg { width:34px; height:34px; fill:none; stroke:var(--accent); stroke-width:1.5; margin-bottom:10px; }
.video-dropzone strong { display:block; color:var(--accent); font-size:14px; font-weight:700; }
.video-dropzone span { display:block; margin-top:6px; font-size:12px; color:var(--text-faint); line-height:1.5; }
.video-dropzone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.video-dropzone.has-video { padding:0; min-height:220px; border-style:solid; background:transparent; }
.video-dropzone video { width:100%; height:220px; max-height:220px; border-radius:11px; display:block; object-fit:contain; background:#000; }
.video-dropzone-remove { margin-top:10px; }

.anketa-price-input { display:flex; align-items:center; gap:8px; }
.anketa-price-input input { font-size:20px; font-weight:700; }

.avail-list { display:flex; flex-direction:column; gap:6px; }
.avail-row { display:grid; grid-template-columns:34px 1fr 1fr 30px; align-items:center; gap:10px; }
.avail-row .avail-day-label { font-size:13px; font-weight:700; color:var(--text-dim); }
.avail-row select { padding:7px 8px; font-size:12.5px; }
.avail-row .avail-off-label { grid-column:2 / span 2; color:var(--text-faint); font-size:13px; }
.avail-toggle { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-faint); flex-shrink:0; padding:0; }
.avail-toggle svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; }
.avail-toggle.is-on { border-color:var(--ok); color:var(--ok); }
.avail-toggle.is-off { border-color:var(--danger); color:var(--danger); }

.anketa-save-bar { margin-top:22px; }
.anketa-save-bar .btn-fill { width:100%; padding:14px; font-size:14.5px; border-radius:26px; display:flex; align-items:center; justify-content:center; gap:8px; }
.anketa-save-bar .btn-fill svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4; }

/* =========================================================
   Профиль репетитора — детальная карточка под референс
   ========================================================= */
#tutorDetailModal .feature-modal-card { max-width:980px; border-radius:16px; }
.tdv2-top { display:flex; gap:26px; flex-wrap:wrap; }
.tdv2-media { flex:0 0 320px; width:320px; max-width:100%; border-radius:12px; overflow:hidden; position:relative; background:var(--surface-soft); aspect-ratio:16/10.5; }
.tdv2-media img, .tdv2-media video { width:100%; height:100%; object-fit:cover; display:block; }
.tdv2-media .tdv2-photo-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:700; color:var(--text-faint); }
.tdv2-play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.18); border:0; cursor:pointer; }
.tdv2-play-btn svg { width:56px; height:56px; fill:rgba(255,255,255,.9); filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.tdv2-media-tag { position:absolute; left:10px; bottom:10px; padding:4px 10px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:600; }

.tdv2-info { flex:1; min-width:240px; }
.tdv2-name-row { display:flex; align-items:center; gap:8px; font-size:24px; font-weight:700; }
.tdv2-online-dot { width:9px; height:9px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.tdv2-rating { margin-top:4px; font-size:13.5px; color:var(--text-dim); display:flex; align-items:center; gap:5px; }
.tdv2-rating .star { color:#e6a417; }
.tdv2-meta-list { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.tdv2-meta-item { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--text); }
.tdv2-meta-item .tdv2-ico { flex-shrink:0; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:var(--text-dim); margin-top:1px; }
.tdv2-meta-item .tdv2-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.tdv2-meta-item strong { font-weight:600; color:var(--text-dim); margin-right:3px; }

.btn-cta-gold { margin-top:16px; display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:24px; background:#f0a916; color:#2a1d00; font-weight:700; font-size:14px; border:0; cursor:pointer; transition:background var(--transition); }
.btn-cta-gold:hover { background:#dd9a0c; }
.btn-cta-gold svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; }

.tdv2-body { display:grid; grid-template-columns:1fr 220px; gap:26px; margin-top:26px; }
@media (max-width: 720px) { .tdv2-body { grid-template-columns:1fr; } }
.tdv2-section { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
.tdv2-section:first-child { margin-top:0; }
.tdv2-section h3 { display:flex; align-items:center; gap:7px; margin:0 0 10px; font-size:14.5px; font-weight:700; }
.tdv2-section h3 .tdv2-ico { color:var(--accent); }
.tdv2-section h3 .tdv2-ico svg { width:16px; height:16px; }
.tdv2-about-text { color:var(--text-dim); line-height:1.7; font-size:13.5px; max-width:640px; }

.tdv2-sidebar { display:flex; flex-direction:column; gap:16px; }
.tdv2-stats-box { border:1px solid var(--line-strong); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.tdv2-stat { display:flex; align-items:baseline; gap:8px; }
.tdv2-stat strong { font-size:17px; font-weight:800; color:var(--text); }
.tdv2-stat span { font-size:12px; color:var(--text-dim); }
.tdv2-lang-box { border:1px solid var(--line-strong); border-radius:12px; padding:16px; }
.tdv2-lang-box h4 { margin:0 0 10px; font-size:13px; font-weight:700; }
.tdv2-lang-row { display:flex; align-items:center; gap:7px; font-size:13px; padding:5px 0; }
.tdv2-lang-row .flag-emoji { font-size:15px; }
.tdv2-lang-row .tdv2-lang-level { color:var(--text-faint); font-size:12px; margin-left:auto; }

.tdv2-review-card { padding:14px 0; border-bottom:.5px solid var(--line); }
.tdv2-review-card:last-child { border-bottom:0; }
.tdv2-review-name { font-weight:700; font-size:13.5px; }
.tdv2-review-meta { color:var(--text-faint); font-size:11px; margin-top:1px; }
.tdv2-review-comment { color:var(--text-dim); font-size:13px; margin-top:6px; line-height:1.6; }
.tdv2-review-carousel-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.tdv2-carousel-arrow { width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); flex-shrink:0; padding:0; }
.tdv2-carousel-arrow svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.tdv2-carousel-dots { display:flex; gap:6px; }
.tdv2-carousel-dot { width:7px; height:7px; border-radius:50%; background:var(--line-strong); border:0; padding:0; cursor:pointer; }
.tdv2-carousel-dot.is-active { background:var(--accent); width:9px; height:9px; }


/* =========================================================
   Tutorly Messenger — minimal Telegram-like interface
   ========================================================= */
.messenger-modal{padding:0;background:rgba(15,20,24,.48);backdrop-filter:blur(4px);z-index:120}
.messenger-modal[aria-hidden="false"]{display:flex}
.messenger-card{width:min(1180px,96vw);height:min(800px,92vh);background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;color:var(--text)}
.messenger-topbar{height:52px;flex:0 0 52px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.messenger-topbar>strong{font-size:14px;letter-spacing:-.01em}
.messenger-back,.messenger-icon-btn{border:0;background:transparent;color:var(--text);cursor:pointer;font:inherit}
.messenger-back{justify-self:start;font-size:13px}.messenger-back span{margin-left:5px}
.messenger-top-actions{justify-self:end;display:flex;gap:4px}.messenger-icon-btn{width:34px;height:34px;font-size:20px;color:var(--text-dim)}
.messenger-layout{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:0;flex:1}
.messenger-sidebar{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:var(--surface)}
.messenger-sidebar-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line)}
.messenger-sidebar-head>div{display:flex;align-items:center;gap:7px}.messenger-sidebar-head strong{font-size:15px}.messenger-sidebar-head span{font-size:11px;color:var(--accent)}
.messenger-small-btn{border:0;background:transparent;color:var(--text-dim);font-size:11px;cursor:pointer}
.messenger-search{margin:10px 12px 7px;height:34px;background:var(--surface-soft);display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:4px;color:var(--text-faint)}
.messenger-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:12px;color:var(--text)}
.conversation-list{overflow:auto;flex:1;padding:3px 7px 10px}
.messenger-conversation{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:9px;padding:10px 9px;border-radius:5px;cursor:pointer;align-items:center}
.messenger-conversation:hover{background:var(--surface-soft)}.messenger-conversation.active{background:var(--surface-soft)}
.messenger-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;font-size:12px;font-weight:700;position:relative;flex:none}
.messenger-avatar.online:after{content:"";position:absolute;right:-1px;bottom:1px;width:8px;height:8px;border-radius:50%;background:#35b56a;border:2px solid var(--surface)}
.messenger-conv-main{min-width:0}.messenger-conv-name{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.messenger-conv-preview{display:block;margin-top:3px;color:var(--text-dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.messenger-conv-meta{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:10px;color:var(--text-faint)}
.messenger-unread{min-width:17px;height:17px;border-radius:9px;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;padding:0 5px;font-size:9px;font-weight:700}
.messenger-chat{min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--surface)}
.messenger-chat-head{height:58px;flex:0 0 58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 17px}
.messenger-chat-person{display:flex;align-items:center;gap:10px;min-width:0}.messenger-chat-person>div{display:flex;flex-direction:column;min-width:0}
.messenger-chat-person strong{font-size:13px}.messenger-chat-person span{font-size:10px;color:var(--text-faint);margin-top:3px}.messenger-chat-person span.online{color:#2eae63}
.messenger-head-tools{display:flex;gap:3px}.messenger-head-tools button{width:32px;height:32px;border:0;background:transparent;color:var(--text-dim);cursor:pointer;font-size:18px}
.messenger-lesson{padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-soft);font-size:11px;line-height:1.5}
.messenger-lesson strong{font-size:12px}.messenger-lesson .materials{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.messenger-lesson a{color:var(--accent);text-decoration:none}
.messenger-typing{position:absolute;z-index:3;left:17px;bottom:73px;font-size:10px;color:var(--text-faint);background:var(--surface);padding:3px 7px}
.messenger-typing span{letter-spacing:2px}
.chat-messages{flex:1;overflow:auto;padding:18px 22px 12px;scroll-behavior:smooth}
.messenger-day{display:flex;align-items:center;justify-content:center;margin:8px 0 14px;color:var(--text-faint);font-size:10px}
.messenger-day span{background:var(--surface-soft);padding:4px 8px;border-radius:10px}
.messenger-message{display:flex;gap:7px;margin:3px 0;max-width:78%;align-items:flex-end}.messenger-message.mine{margin-left:auto;flex-direction:row-reverse}
.messenger-message-avatar{width:26px;height:26px;border-radius:50%;background:var(--surface-soft);color:var(--text-dim);display:grid;place-items:center;font-size:9px;flex:none}
.messenger-bubble{position:relative;border:1px solid var(--line);padding:8px 10px;border-radius:7px;background:var(--surface);font-size:12px;line-height:1.5;min-width:55px}
.messenger-message.mine .messenger-bubble{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.messenger-time{font-size:9px;color:var(--text-faint);float:right;margin:5px 0 0 9px}.messenger-message.mine .messenger-time{color:rgba(255,255,255,.68)}
.messenger-actions{position:absolute;right:0;top:-27px;display:none;background:var(--surface);border:1px solid var(--line);border-radius:4px;white-space:nowrap;z-index:4}
.messenger-message:hover .messenger-actions{display:flex}.messenger-actions button{border:0;background:transparent;padding:5px 7px;color:var(--text-dim);cursor:pointer;font-size:10px}
.messenger-file{display:flex;gap:8px;align-items:center;text-decoration:none;color:inherit}.messenger-file-icon{font-size:19px}.messenger-image{display:block;max-width:260px;max-height:240px;border-radius:5px}
.messenger-reply{margin:0 14px 6px;border-left:2px solid var(--accent);padding:5px 8px;background:var(--surface-soft);font-size:10px;cursor:pointer}
.messenger-quick-replies{display:flex;gap:5px;overflow:auto;padding:0 14px 7px}.messenger-quick-replies button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:5px 8px;font-size:10px;color:var(--text);white-space:nowrap;cursor:pointer}
.messenger-compose{min-height:52px;border-top:1px solid var(--line);padding:8px 12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;background:var(--surface)}
.messenger-tools{display:flex;gap:2px}.messenger-tools button,.messenger-send{border:0;background:transparent;color:var(--text-dim);cursor:pointer;width:30px;height:30px;font-size:18px}
.messenger-compose>input{border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:12px;min-width:0}
.messenger-send{color:var(--accent);font-size:20px}.messenger-emoji{position:absolute;left:13px;bottom:57px;width:245px;padding:9px;background:var(--surface);border:1px solid var(--line);border-radius:5px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;z-index:10}
.messenger-emoji button{border:0;background:transparent;padding:5px;cursor:pointer;font-size:17px}
.messenger-file-preview{position:absolute;left:12px;right:12px;bottom:58px;display:flex;gap:7px;flex-wrap:wrap;pointer-events:none}.messenger-preview-chip{pointer-events:auto;display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);padding:5px 7px;border-radius:4px;font-size:10px}.messenger-preview-chip img{width:34px;height:34px;object-fit:cover;border-radius:3px}
.messenger-empty{height:100%;display:grid;place-items:center;color:var(--text-faint);font-size:12px}
.messenger-down{position:absolute;right:18px;bottom:67px;width:31px;height:31px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.messenger-modal .empty-state{padding:20px}
/* SVG icon system — replaces emoji/unicode glyphs everywhere in the messenger */
.messenger-modal svg.ic{width:17px;height:17px;display:block;flex:none}
.messenger-back svg.ic{width:15px;height:15px}
.messenger-icon-btn svg.ic{width:16px;height:16px;margin:auto}
.messenger-icon-btn{display:flex;align-items:center;justify-content:center}
.messenger-icon-btn.active,.messenger-icon-btn[aria-pressed="true"]{color:var(--accent)}
.messenger-icon-btn.active svg,.messenger-icon-btn[aria-pressed="true"] svg{fill:var(--accent);color:var(--accent)}
.messenger-search svg.ic,.messenger-message-search svg.ic{color:var(--text-faint)}
.messenger-head-tools button{display:flex;align-items:center;justify-content:center}
.messenger-tools button{display:flex;align-items:center;justify-content:center}

.messenger-send svg.ic{width:18px;height:18px}
.messenger-down svg.ic{width:16px;height:16px;margin:auto}
.ic-pin-mini{width:10px!important;height:10px!important;display:inline-block!important;vertical-align:-1px;margin-right:4px;color:var(--accent)}
.messenger-actions button{display:flex;align-items:center;gap:4px}
.messenger-actions svg.ic{width:12px;height:12px}
/* Textarea composer: auto-grow, Enter=send, Shift+Enter=newline */
.messenger-compose>textarea{border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:12px;min-width:0;resize:none;max-height:110px;line-height:1.5;padding:6px 0;font-family:inherit}
/* Context menu for pin / archive (long-press or right-click on a conversation) */
.messenger-context-menu{position:fixed;z-index:200;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.18);min-width:160px;overflow:hidden;padding:4px}
.messenger-context-menu button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--text);font-size:12px;padding:8px 10px;text-align:left;cursor:pointer;border-radius:4px}
.messenger-context-menu button:hover{background:var(--surface-soft)}
/* In-chat message search */
.messenger-message-search{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--surface-soft)}
.messenger-message-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:12px;color:var(--text)}
.messenger-message-search #messageSearchCount{font-size:10px;color:var(--text-faint);white-space:nowrap}
.messenger-message-search button{border:0;background:transparent;color:var(--text-dim);cursor:pointer;display:flex}
mark.msg-hit{background:var(--warn);color:#111;border-radius:2px;padding:0 1px}
mark.msg-hit.current{background:var(--accent);color:var(--accent-text)}
/* Quick-reply "add template" pill */
.messenger-quick-replies .qr-add{display:flex;align-items:center;justify-content:center;width:26px;flex:none;padding:0!important}
.messenger-quick-replies .qr-add svg.ic{width:12px;height:12px}
@media(max-width:800px){
 .messenger-card{width:100%;height:100%;max-height:none;border-radius:0}.messenger-layout{grid-template-columns:1fr}.messenger-sidebar{display:flex}.messenger-chat{display:none}.messenger-card.chat-open .messenger-sidebar{display:none}.messenger-card.chat-open .messenger-chat{display:flex}.messenger-back span{display:none}
 .messenger-message{max-width:90%}
}
@media(max-width:520px){
 .messenger-chat-head{padding:0 11px}.chat-messages{padding:14px 11px}.messenger-compose{grid-template-columns:auto minmax(0,1fr) auto}.messenger-tools button{width:27px}.messenger-topbar{padding:0 10px}
}

.auth-split--embedded{align-items:stretch}.auth-split--embedded .auth-image{min-height:520px}.auth-split--embedded .auth-form-wrap{padding-top:0!important}.auth-split--embedded .auth-form{max-width:460px}.auth-split--embedded .auth-alt{text-align:left}@media(max-width:900px){.auth-split--embedded .auth-image{min-height:300px}}

.page-auth-like .frame-header{display:none}.page-auth-like .frame{padding-top:clamp(48px,8vw,90px);padding-bottom:clamp(48px,8vw,90px)}

.field-hint { display:block; margin-top:6px; color:var(--text-faint); font-size:11px; line-height:1.4; }
.video-dropzone.has-video input[type="file"] { display:none !important; }
.anketa-card-head .anketa-ico { overflow:hidden; }
.flag-pill .flag-emoji { display:inline-flex; min-width:22px; height:22px; align-items:center; justify-content:center; font-size:10px; font-weight:700; letter-spacing:.02em; border:1px solid var(--line-strong); border-radius:6px; }

.student-profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}.student-profile-grid .anketa-card{height:100%}@media(max-width:800px){.student-profile-grid{grid-template-columns:1fr}}

/* ===== Tutorly lessons foundation — stage 1 ===== */
.lessons-board{display:flex;flex-direction:column;gap:30px}
.lesson-group{display:flex;flex-direction:column;gap:12px}
.lesson-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.lesson-group-head h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.lesson-group-head span{font-size:12px;color:var(--text-dim)}
.lesson-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lesson-card{min-width:0;padding:18px;background:var(--surface-soft);border-radius:14px;display:flex;flex-direction:column;gap:14px}
.lesson-card--nearest{grid-column:1/-1;background:var(--surface-muted)}
.lesson-card--completed,.lesson-card--cancelled{opacity:.72}
.lesson-card-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.lesson-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.lesson-card-title-row h3{margin:2px 0 0;font-size:17px;line-height:1.25;letter-spacing:-.02em}
.lesson-kicker{font-size:10px;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.lesson-card-badges{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.lesson-new-badge{display:inline-flex;align-items:center;width:max-content;padding:4px 8px;border-radius:999px;background:var(--accent);color:var(--accent-text);font-size:11px;line-height:1.2;font-weight:700}.lesson-status,.lesson-chip{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:4px 8px;border-radius:999px;background:var(--surface);font-size:11px;line-height:1.2;color:var(--text-dim)}
.lesson-person{font-size:14px;font-weight:500;margin-top:3px}
.lesson-meta{display:flex;gap:8px 14px;flex-wrap:wrap;font-size:12px;color:var(--text-dim)}
.lesson-meta span{position:relative}
.lesson-alert{margin-top:3px;padding:9px 11px;border-radius:9px;background:rgba(180,122,34,.12);color:var(--warn);font-size:12px;font-weight:500}
.lesson-alert--live{background:rgba(47,138,104,.12);color:var(--ok)}
.lesson-countdown{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 14px;border-radius:10px;background:var(--surface)}
.lesson-countdown span{font-size:11px;color:var(--text-dim)}
.lesson-countdown strong{font-size:21px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.lesson-card-actions{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin-top:auto}
.lesson-join-btn{width:100%;border:0;border-radius:9px;background:var(--accent);color:var(--accent-text);padding:10px 14px;font-weight:600;transition:opacity .16s ease,transform .16s ease}
.lesson-join-btn:not(:disabled):hover{transform:translateY(-1px)}
.lesson-join-btn:disabled{cursor:not-allowed;opacity:.35}
.lesson-join-note,.lesson-access-result{min-height:17px;font-size:11px;line-height:1.45;color:var(--text-dim)}
.lesson-access-result.is-ok{color:var(--ok)}
.lesson-access-result.is-error{color:var(--danger)}
.lesson-group--history .lesson-card{background:transparent;border:1px solid var(--line)}
@media(max-width:760px){.lesson-cards{grid-template-columns:1fr}.lesson-card--nearest{grid-column:auto}.lesson-card{padding:15px}.lesson-card-title-row{gap:9px}.lesson-countdown strong{font-size:18px}}
/* ===== Tutorly online lesson room / stage 2 ===== */
.lesson-room{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px}.lesson-room-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68)}.lesson-room-panel{position:relative;width:min(1180px,100%);height:min(760px,calc(100vh - 36px));background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.35);display:flex;flex-direction:column}.lesson-room-head{display:flex;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid var(--line)}.lesson-room-head h2{margin:3px 0;font-size:18px}.lesson-room-head p{margin:0;color:var(--text-dim);font-size:12px}.lesson-room-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.lesson-room-close{border:0;background:transparent;color:var(--text);font-size:26px;line-height:1;cursor:pointer}.lesson-room-body{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 280px}.lesson-stage{position:relative;background:#101114;min-height:0;overflow:hidden}.lesson-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#101114}.lesson-stage video[data-local]{z-index:2;width:30%;height:24%;right:16px;left:auto;bottom:16px;top:auto;object-fit:cover;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.3)}.lesson-stage-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#d5d7dc;font-size:14px}.lesson-stage-name{position:absolute;left:14px;bottom:14px;z-index:3;color:#fff;background:rgba(0,0,0,.48);padding:6px 9px;border-radius:7px;font-size:12px}.lesson-room-side{padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface-soft);overflow:auto}.lesson-room-mode{display:grid;grid-template-columns:1fr 1fr;gap:6px}.lesson-room-mode button,.lesson-room-actions button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:9px 10px;cursor:pointer;font-size:12px}.lesson-room-mode button.is-active{background:var(--accent);color:var(--accent-text);border-color:transparent}.lesson-room-side label{font-size:11px;color:var(--text-dim);display:flex;flex-direction:column;gap:5px}.lesson-room-side select,.lesson-room-side input[type=range]{width:100%}.lesson-room-side select{padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text)}.lesson-room-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.lesson-room-actions button{font-weight:500}.lesson-room-actions .danger{grid-column:1/-1}.lesson-room-state{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:11px;line-height:1.45;color:var(--text-dim)}
@media(max-width:760px){.lesson-room{padding:0}.lesson-room-panel{height:100%;border-radius:0}.lesson-room-body{grid-template-columns:1fr;grid-template-rows:minmax(300px,1fr) auto}.lesson-room-side{max-height:45vh}.lesson-stage video[data-local]{width:34%;height:25%;right:10px;bottom:10px}.lesson-room-head{padding:14px}.lesson-room-actions{grid-template-columns:1fr 1fr}}

/* Tutorly lesson room — stage 3 stabilization */
.lesson-prejoin{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(16,17,20,.78);backdrop-filter:blur(8px)}
.lesson-prejoin[hidden]{display:none}
.lesson-prejoin-card{width:min(430px,100%);padding:24px;border-radius:16px;background:var(--surface);box-shadow:0 18px 60px rgba(0,0,0,.28);text-align:left}
.lesson-prejoin-card h3{margin:0 0 8px;font-size:20px}.lesson-prejoin-card p{margin:0 0 18px;color:var(--text-dim);font-size:13px;line-height:1.55}
.lesson-prejoin-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.lesson-prejoin-modes button,.lesson-prejoin-start{border:0;border-radius:9px;padding:11px 12px;cursor:pointer;font-weight:600;background:var(--surface-soft);color:var(--text)}
.lesson-prejoin-modes button.is-active,.lesson-prejoin-start{background:var(--accent);color:var(--accent-text)}.lesson-prejoin-start{width:100%}.lesson-prejoin-start:disabled{opacity:.45;cursor:progress}
.lesson-prejoin-error{min-height:18px;margin-top:9px;color:#b94b4b;font-size:11px;line-height:1.4}
.lesson-room-actions button:disabled,.lesson-room-side select:disabled{opacity:.4;cursor:not-allowed}.lesson-room-actions button.is-off{opacity:.62}
.lesson-stage--local-main video[data-local]{z-index:1;inset:0;width:100%;height:100%;border-radius:0;object-fit:contain;box-shadow:none}
.lesson-stage--local-main video[data-remote]{z-index:3;width:30%;height:24%;right:16px;left:auto;bottom:16px;top:auto;object-fit:cover;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
@media(max-width:760px){.lesson-prejoin{padding:14px}.lesson-prejoin-card{padding:18px}.lesson-stage--local-main video[data-remote]{width:34%;height:25%;right:10px;bottom:10px}}


/* Tutorly premium layer is intentionally kept in index.html so it wins over the restored fallback layer. */


/* Performance pass: remove decorative micro-animations and transition churn. */
*,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}

.request-new-badge{display:inline-flex;align-items:center;margin-right:6px;padding:3px 7px;border-radius:999px;background:var(--accent);color:var(--accent-text);font-size:9px;font-weight:800;line-height:1;}


/* ===== Messenger emoji picker fix =====
   Keep the native hidden attribute authoritative and keep the picker
   inside the chat viewport on narrow screens. */
.messenger-emoji[hidden] {
  display: none !important;
}
.messenger-emoji {
  box-sizing: border-box;
  max-width: calc(100% - 26px);
  overflow: hidden;
}
.messenger-emoji button {
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
}
@media (max-width: 520px) {
  .messenger-emoji {
    left: 11px;
    right: 11px;
    width: auto;
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 8px;
    gap: 1px;
  }
  .messenger-emoji button {
    padding: 5px 2px;
    font-size: 17px;
  }
}