:root { color-scheme: dark; --bg:#04090f; --panel:#071525; --panel2:#0b1e32; --gold:#f6b93b; --text:#f5f7fa; --muted:#aeb9c7; --ok:#41d18d; --line:rgba(246,185,59,.28); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 5%,#173550 0,transparent 35%),var(--bg); color:var(--text); }
a { color:inherit; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:14px max(20px,env(safe-area-inset-left)); background:rgba(4,9,15,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; }
.brand img { border-radius:50%; box-shadow:0 0 22px rgba(246,185,59,.25); }
.brand span { display:grid; }
.brand small { color:var(--muted); margin-top:2px; }
.shell { width:min(1120px,calc(100% - 32px)); margin:34px auto 100px; }
.hero,.card { background:linear-gradient(145deg,rgba(11,30,50,.97),rgba(7,21,37,.94)); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 60px rgba(0,0,0,.25); }
.hero { padding:clamp(24px,5vw,52px); }
.eyebrow { color:var(--gold); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
.hero h1 { font-size:clamp(2rem,5vw,4rem); line-height:1.02; margin:.5rem 0 1rem; }
.hero p { color:var(--muted); max-width:720px; line-height:1.65; }
.button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:12px; padding:12px 18px; background:var(--gold); color:#111; font-weight:800; text-decoration:none; cursor:pointer; }
.button.secondary { background:transparent; color:var(--gold); border:1px solid var(--line); }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0; }
.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0; }
.quick { display:grid; gap:7px; padding:18px; border-radius:16px; background:rgba(11,30,50,.8); border:1px solid var(--line); text-decoration:none; }
.quick strong { color:var(--gold); }
.quick span { font-size:.9rem; line-height:1.45; color:var(--muted); }
.card { padding:22px; }
.metric strong { display:block; font-size:2rem; color:var(--gold); margin:.3rem 0; }
.metric span,.muted { color:var(--muted); }
.wide { grid-column:span 2; }
.progress-track { height:12px; background:#02070c; border-radius:99px; overflow:hidden; margin:14px 0; }
.progress-track i { display:block; height:100%; background:linear-gradient(90deg,#d99518,var(--gold)); border-radius:inherit; }
.tag { display:inline-flex; padding:7px 11px; border-radius:99px; background:rgba(246,185,59,.12); border:1px solid var(--line); margin:5px 5px 0 0; }
.notice { border-left:4px solid var(--gold); }
.loading { min-height:260px; display:grid; place-items:center; }
.app-welcome { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.app-welcome h1 { margin:.35rem 0; font-size:clamp(2rem,4vw,3.4rem); }
.app-welcome p { color:var(--muted); margin:.35rem 0; }
.chat-card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgba(11,30,50,.98),rgba(5,15,26,.98)); box-shadow:0 18px 60px rgba(0,0,0,.3); }
.chat-card>header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line); }
.chat-card>header>div { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; }
.chat-card>header strong { grid-column:2; }
.chat-card>header small { grid-column:2; color:var(--muted); margin-top:2px; }
.chat-header-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.chat-header-actions a { color:var(--gold); font-size:.78rem; font-weight:800; text-decoration:none; padding:7px 9px; border:1px solid var(--line); border-radius:9px; white-space:nowrap; }
.private-course-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(72,157,255,.55); border-radius:999px; color:#b9dcff; background:rgba(25,112,220,.13); font-size:.75rem; font-weight:800; }
.mentor-mode { --mentor-blue:#2587ff; --mentor-line:rgba(66,153,255,.48); background:radial-gradient(circle at 85% 5%,#0c3d73 0,transparent 38%),#030914; }
.mentor-mode .contextual-mentor { border-color:var(--mentor-line); box-shadow:0 22px 70px rgba(0,83,190,.3),inset 0 1px rgba(255,255,255,.03); }
.mentor-mode .contextual-mentor>header { border-color:var(--mentor-line); background:linear-gradient(110deg,rgba(8,35,68,.98),rgba(4,20,40,.98)); }
.mentor-mode .contextual-mentor>header strong,.mentor-mode .context-chip strong { color:#76b7ff; }
.mentor-mode .context-chip { display:inline-flex; flex-wrap:wrap; gap:5px; padding:8px 12px; border:1px solid var(--mentor-line); border-radius:999px; background:rgba(37,135,255,.1); color:#c9ddf4; }
.mentor-mode .chat-message.mentor p { background:linear-gradient(145deg,#0d3157,#102943); border:1px solid rgba(79,162,255,.18); }
.mentor-mode .chat-form .button { background:linear-gradient(145deg,#57a7ff,#1776df); color:#03101f; box-shadow:0 8px 22px rgba(23,118,223,.3); }
.mentor-mode .attach-button,.mentor-mode .voice-button { color:#70b5ff; border-color:var(--mentor-line); }
.status-dot { grid-row:1/3; width:11px; height:11px; border-radius:50%; background:var(--ok); box-shadow:0 0 14px var(--ok); }
.chat-log { height:min(54vh,560px); min-height:360px; overflow:auto; padding:24px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; }
.chat-message { max-width:min(82%,760px); }
.chat-message span { display:block; color:var(--muted); font-size:.75rem; font-weight:800; margin:0 0 5px 4px; text-transform:uppercase; letter-spacing:.05em; }
.chat-message p { margin:0; padding:13px 16px; line-height:1.58; border-radius:16px; background:#10263c; }
.chat-message.student { align-self:flex-end; }
.chat-message.student span { text-align:right; margin-right:4px; }
.chat-message.student p { background:var(--gold); color:#121212; border-bottom-right-radius:5px; }
.chat-message.mentor p { border-bottom-left-radius:5px; }
.chat-message.thinking p { color:var(--muted); animation:pulse 1.3s infinite; }
.chat-message.error p { border:1px solid #d96969; }
.chat-form { display:flex; gap:10px; padding:16px; border-top:1px solid var(--line); background:rgba(2,7,12,.72); }
.attach-button { flex:0 0 48px; width:48px; height:48px; border-radius:13px; border:1px solid var(--line); background:#07121f; color:var(--gold); font-size:1.25rem; cursor:pointer; }
.voice-button { flex:0 0 48px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; gap:4px; border-radius:13px; border:1px solid var(--line); background:#07121f; color:var(--gold); font-size:1.15rem; cursor:pointer; }
.recording-panel { width:100%; min-height:48px; display:flex; align-items:center; gap:10px; padding:5px 7px 5px 10px; border:1px solid rgba(255,89,89,.55); border-radius:15px; background:linear-gradient(90deg,#220d13,#0a1521); }
.recording-panel[hidden] { display:none; }
.chat-form.recording-active > :not(.recording-panel) { display:none!important; }
.recording-cancel,.recording-pause,.recording-stop { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; cursor:pointer; }
.recording-cancel { border:0; background:transparent; color:#aeb9c7; font-size:1.5rem; }
.recording-pause { border:1px solid rgba(255,255,255,.2); background:#152536; color:#fff; font-size:1rem; font-weight:900; }
.recording-stop { border:0; background:#f1f3f5; }
.recording-stop span { width:13px; height:13px; border-radius:3px; background:#111; }
.recording-dot { flex:0 0 9px; width:9px; height:9px; border-radius:50%; background:#ff5151; box-shadow:0 0 12px #ff5151; animation:pulse 1s infinite; }
.recording-clock { flex:0 0 38px; color:#fff; font-size:.78rem; font-weight:800; font-variant-numeric:tabular-nums; }
.recording-wave { flex:1; min-width:50px; height:30px; display:flex; align-items:center; justify-content:center; gap:3px; overflow:hidden; }
.recording-wave i { width:3px; height:8px; border-radius:4px; background:var(--gold); animation:wave 1s ease-in-out infinite; }
.recording-wave i:nth-child(2n) { animation-delay:-.2s; }
.recording-wave i:nth-child(3n) { animation-delay:-.45s; }
.recording-wave i:nth-child(4n) { animation-delay:-.65s; }
.recording-wave.paused i { animation-play-state:paused; opacity:.45; }
.attachment-preview { display:grid; gap:7px; padding:8px 12px; border-top:1px solid var(--line); background:#091827; color:var(--muted); font-size:.82rem; }
.attachment-preview[hidden] { display:none; }
.attachment-item { min-width:0; display:flex; align-items:center; gap:10px; }
.attachment-image-button { flex:0 0 auto; padding:0; border:0; background:transparent; cursor:zoom-in; }
.attachment-preview img { display:block; width:64px; height:52px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.attachment-item>span:not(.audio-label) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-preview .remove-image { margin-left:auto; border:0; background:transparent; color:#fff; font-size:1.35rem; cursor:pointer; }
.attachment-preview audio { flex:1; min-width:120px; height:38px; }
.audio-label { flex:0 0 auto; color:#fff; font-weight:700; }
.message-audio { display:block; width:min(260px,100%); height:42px; margin-bottom:9px; }
.message-image-button { display:block; width:min(220px,100%); margin:0 0 10px; padding:0; border:0; border-radius:12px; overflow:hidden; background:#061321; cursor:zoom-in; }
.message-image-button img { display:block; width:100%; max-height:180px; object-fit:cover; }
.message-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:min(340px,100%); margin-bottom:10px; }
.message-images .message-image-button { width:100%; margin:0; }
.message-images .message-image-button:only-child { grid-column:1/-1; }
.chat-link { color:#ffd166; font-weight:750; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; overflow-wrap:anywhere; }
.chat-link:hover,.chat-link:focus-visible { color:#fff1b3; }
.lesson-button { display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; margin-top:8px; padding:9px 13px; border:1px solid rgba(255,209,102,.5); border-radius:10px; background:rgba(255,209,102,.1); text-decoration:none; }
.lesson-button::before { content:"↓"; font-size:1.05rem; }
.lesson-button { display:inline-flex; align-items:center; justify-content:center; width:max-content; max-width:100%; margin:8px 0 2px; padding:10px 15px; border:1px solid #5faeff; border-radius:10px; background:linear-gradient(145deg,#57a7ff,#1776df); color:#03101f; font-weight:850; text-decoration:none; box-shadow:0 7px 18px rgba(23,118,223,.28); }
.lesson-button:hover,.lesson-button:focus-visible { color:#03101f; filter:brightness(1.1); }
.image-viewer { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.88); backdrop-filter:blur(5px); }
.image-viewer[hidden] { display:none; }
.image-viewer img { max-width:min(96vw,1200px); max-height:90vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 80px #000; }
.image-viewer-close { position:fixed; top:14px; right:64px; z-index:101; width:44px; height:44px; border-radius:50%; border:1px solid var(--gold); background:#07121f; color:#fff; font-size:1.7rem; cursor:pointer; }
.chat-form textarea { flex:1; resize:none; min-height:48px; max-height:150px; padding:13px 15px; border-radius:13px; border:1px solid rgba(255,255,255,.15); background:#07121f; color:var(--text); font:inherit; }
.chat-form textarea:focus { outline:2px solid rgba(246,185,59,.45); border-color:var(--gold); }
.chat-form button:disabled { opacity:.55; cursor:wait; }
.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; }
@keyframes pulse { 50% { opacity:.55; } }
@keyframes wave { 0%,100% { height:7px; } 50% { height:26px; } }
.mobile-nav { display:none; }
.integrated { height:100%; min-height:100%; overflow:hidden; background:#04090f; }
.integrated #app { height:100%; min-height:0; }
.integrated .topbar,.integrated .mobile-nav,.integrated .app-welcome,.integrated .grid { display:none!important; }
.integrated .shell { position:fixed; inset:0; width:100%; height:100dvh; min-height:0; margin:0; overflow:hidden; }
.integrated .chat-card { position:fixed; inset:0; width:100%; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.integrated .chat-card>header { padding-right:58px; }
.integrated .chat-log { width:100%; height:100%; min-height:0; overflow-y:auto; padding-bottom:86px; }
.integrated .attachment-preview { position:fixed; z-index:8; left:0; right:0; bottom:80px; width:100%; }
.integrated .chat-form { position:fixed; z-index:9; left:0; right:0; bottom:0; width:100%; margin:0; }
@media(max-width:820px) {
  .grid,.quick-actions { grid-template-columns:1fr 1fr; }
  .wide { grid-column:span 2; }
  .topbar .button { display:none!important; }
  .mobile-nav { position:fixed; display:flex; bottom:0; left:0; right:0; z-index:6; justify-content:space-around; padding:12px 8px calc(12px + env(safe-area-inset-bottom)); background:#07121f; border-top:1px solid var(--line); }
  .mobile-nav a { text-decoration:none; color:var(--muted); font-weight:700; }
  .shell { margin-top:18px; }
  .app-welcome { align-items:start; }
  .app-welcome .button { display:none; }
}
@media(max-width:500px) {
  .grid,.quick-actions { grid-template-columns:1fr; }
  .wide { grid-column:auto; }
  .brand strong { font-size:.9rem; }
  .hero { border-radius:17px; }
  .chat-card>header { align-items:flex-start; }
  .chat-header-actions a:last-child { display:none; }
  .chat-log { min-height:420px; padding:16px; }
  .chat-message { max-width:92%; }
  .chat-form { padding:10px; }
  .chat-form .button { padding:12px 14px; }
}