:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20312d;
  background: #f4f1e9;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { min-height: 100vh; background: radial-gradient(circle at 85% 4%, #dcece6 0, transparent 32%), #f4f1e9; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }
.topbar { height: 68px; padding: 0 clamp(18px, 4vw, 54px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d8d9d1; background: rgba(249, 248, 243, .88); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #173f36; font-family: Georgia, serif; font-size: 22px; }
.brand--center { justify-content: center; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: white; background: #173f36; font: 700 17px/1 Georgia, serif; }
.status { display: inline-flex; align-items: center; gap: 7px; color: #5f716d; font-size: 12px; font-weight: 650; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4d9367; box-shadow: 0 0 0 4px #dfeee3; }

.page { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: clamp(42px, 8vh, 90px) 0 52px; }
.hero { text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #527169; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 12px 0 10px; font: 500 clamp(36px, 8vw, 58px)/1.05 Georgia, serif; letter-spacing: -.035em; }
.hero > p, .muted { color: #687874; line-height: 1.6; }
.profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.profile { min-height: 138px; padding: 20px; border: 1px solid #d9ddd7; border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 9px 28px rgba(32,49,45,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #20312d; }
.profile:hover, .profile:focus-visible { transform: translateY(-2px); border-color: #98b5aa; box-shadow: 0 14px 34px rgba(32,49,45,.11); outline: none; }
.avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 850; letter-spacing: .04em; }
.profile strong { font-size: 16px; }
.profile small { color: #74817e; }

.center-card { width: min(430px, calc(100% - 32px)); margin: 12vh auto 0; padding: 34px; border: 1px solid #d9ddd7; border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: 0 18px 50px rgba(32,49,45,.1); text-align: center; }
.center-card h1 { font-size: 34px; }
.center-card p { color: #687874; line-height: 1.55; }
.paused-card, .reconnect-card { margin-top: 16vh; }
.paused-mark { width: 64px; height: 64px; margin: 26px auto 4px; display: grid; place-items: center; border-radius: 20px; color: #815d29; background: #faedcf; font-size: 23px; font-weight: 900; letter-spacing: 2px; }
.reconnect-status { margin: 20px 0; padding: 11px 13px; border-radius: 11px; color: #536a64; background: #edf2ef; font-size: 12px; line-height: 1.45; }
.identity { margin: 22px 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.identity .avatar { width: 50px; height: 50px; }
.identity span { text-align: left; }
.identity strong, .identity small { display: block; }
.identity small { margin-top: 3px; color: #74817e; }
.field { display: grid; gap: 7px; text-align: left; }
.field > span { font-size: 11px; font-weight: 800; color: #536a64; text-transform: uppercase; letter-spacing: .07em; }
input, textarea { width: 100%; border: 1px solid #cfd6d1; border-radius: 12px; color: #20312d; background: white; outline: none; }
input:focus, textarea:focus { border-color: #4c796e; box-shadow: 0 0 0 3px rgba(76,121,110,.12); }
.pin { height: 55px; padding: 0 15px; text-align: center; font-size: 25px; letter-spacing: .28em; }
.actions { display: flex; gap: 9px; margin-top: 16px; }
.button { min-height: 42px; border: 0; border-radius: 11px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 750; }
.button--primary { flex: 1; color: white; background: #173f36; }
.button--primary:disabled { opacity: .5; cursor: default; }
.button--quiet { color: #31544c; background: #edf1ee; }
.error { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; color: #874b3c; background: #f8e8e1; text-align: left; font-size: 12px; line-height: 1.45; }
.spinner { width: 25px; height: 25px; margin: 24px auto 10px; border: 3px solid #d6e1dd; border-top-color: #173f36; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.certificate-page { width: min(680px, calc(100% - 28px)); margin: 0 auto; padding: clamp(30px, 7vh, 72px) 0; }
.certificate-card { padding: clamp(24px, 5vw, 44px); border: 1px solid #d9ddd7; border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgba(32,49,45,.1); }
.certificate-card .brand { margin-bottom: 30px; }
.certificate-card h1 { font-size: clamp(32px, 7vw, 48px); }
.certificate-download, .certificate-chat-link { width: 100%; margin-top: 15px; text-decoration: none; }
.certificate-download { min-height: 50px; }
.certificate-steps { margin: 26px 0 0; padding: 22px; border-radius: 16px; background: #f1f5f2; }
.certificate-steps h2 { margin: 0 0 8px; font: 600 19px/1.3 Georgia, serif; }
.certificate-steps h2:not(:first-child) { margin-top: 22px; }
.certificate-steps ol { margin: 0; padding-left: 21px; color: #52645f; line-height: 1.55; }
.certificate-steps li + li { margin-top: 6px; }
.certificate-note { margin: 20px 0 0; padding: 14px; border: 1px solid #ead4bd; border-radius: 12px; background: #fff7ea; color: #6d5843; font-size: 12px; line-height: 1.55; }
.certificate-return { margin: 14px 0 0; font-size: 12px; text-align: center; }

.chat { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-browser-header { min-width: 0; background: rgba(249,248,243,.94); }
.chat-toolbar { min-height: 45px; padding: 6px clamp(14px, 4vw, 54px); display: flex; justify-content: flex-end; gap: 7px; overflow-x: auto; border-bottom: 1px solid #d8d9d1; scrollbar-width: none; }
.chat-toolbar::-webkit-scrollbar { display: none; }
.chat-action { flex: 0 0 auto; min-height: 33px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d9ded9; border-radius: 9px; color: #31544c; background: rgba(255,255,255,.78); font-size: 11px; font-weight: 750; }
.chat-action:hover, .chat-action:focus-visible { border-color: #9bb4ac; background: white; outline: none; }
.chat-action:disabled { opacity: .55; cursor: default; }
.chat-user { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: #31544c; font-weight: 750; }
.chat-user .avatar { width: 32px; height: 32px; font-size: 11px; }
.thread-wrap { overflow-y: auto; }
.chat-workspace { width: min(760px, calc(100% - 28px)); min-height: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.chat-workspace.has-assignment { width: min(1100px, calc(100% - 28px)); grid-template-columns: minmax(0, 760px) minmax(270px, 315px); gap: 25px; }
.thread { width: 100%; padding: 30px 0 38px; display: flex; flex-direction: column; gap: 15px; }
.assignment-rail { min-width: 0; padding: 30px 0 38px; }
.assignment-rail .assignment-card { position: sticky; top: 18px; margin: 0; }
.welcome { align-self: center; color: #798581; font-size: 11px; margin-bottom: 5px; }
.message { max-width: min(82%, 620px); padding: 13px 16px; border-radius: 17px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }
.message--user { align-self: flex-end; color: white; background: #2c5a50; border-bottom-right-radius: 5px; }
.message--assistant { align-self: flex-start; border: 1px solid #dde0da; background: rgba(255,255,255,.93); border-bottom-left-radius: 5px; }
.message--notice { border-color: #ead4bd; background: #fff7ea; }
.message-title { display: block; margin-bottom: 5px; color: #714e30; }
.response-copy { margin: 9px 0 0 auto; padding: 4px 8px; display: block; border: 0; border-radius: 7px; color: #526a64; background: #edf1ee; font-size: 10px; font-weight: 750; }
.response-copy:hover, .response-copy:focus-visible { color: #173f36; background: #dfe9e5; outline: none; }
.markdown-content > :first-child { margin-top: 0; }
.markdown-content > :last-child { margin-bottom: 0; }
.markdown-content p { margin: 0 0 9px; }
.markdown-content h2, .markdown-content h3, .markdown-content h4 { margin: 10px 0 7px; line-height: 1.3; }
.markdown-content h2 { font-size: 20px; }.markdown-content h3 { font-size: 17px; }.markdown-content h4 { font-size: 15px; }
.markdown-content ul, .markdown-content ol { margin: 7px 0 10px; padding-left: 23px; }.markdown-content li { margin: 3px 0; }
.markdown-content code { padding: 2px 5px; border-radius: 5px; background: rgba(31,90,80,.1); font-size: .88em; }
.markdown-content pre { max-width: 100%; overflow: auto; padding: 12px; border-radius: 9px; background: #182b28; color: #dfebe7; white-space: pre; }.markdown-content pre code { padding: 0; background: transparent; }
.markdown-content blockquote { margin: 8px 0; padding: 4px 0 4px 13px; border-left: 3px solid #a7bdb7; color: #687874; }.markdown-content a { color: #235f8c; text-decoration-thickness: 1px; }
.typing { align-self: flex-start; display: flex; align-items: center; gap: 8px; color: #687874; font-size: 12px; }
.typing .spinner { width: 17px; height: 17px; margin: 0; border-width: 2px; }
.composer-wrap { padding: 13px 14px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid #d8d9d1; background: rgba(249,248,243,.94); }
.composer { width: min(760px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 48px; gap: 8px; }
.composer textarea { min-height: 48px; max-height: 140px; resize: none; padding: 13px 14px; line-height: 1.45; }
.send { border: 0; border-radius: 13px; color: white; background: #173f36; font-size: 20px; }
.send:disabled { opacity: .42; cursor: default; }
.composer-meta { width: min(760px, 100%); margin: 7px auto 0; color: #70807c; font-size: 10px; }
.assignment-card { margin: 0 0 18px; padding: 15px; border: 1px solid #c9dcd5; border-radius: 16px; background: linear-gradient(135deg,#eaf4f0,#faf7ed); box-shadow: 0 8px 24px rgba(38,68,60,.06); }
.assignment-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assignment-card header small, .assignment-card header strong { display: block; }
.assignment-card header small { color: #71807b; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.assignment-card header strong { margin-top: 4px; font-size: 15px; }
.assignment-card header em { color: #1f5b4d; font-style: normal; font-size: 12px; font-weight: 800; }
.assignment-card > p { margin: 11px 0; color: #63726e; font-size: 12px; line-height: 1.5; }
.assignment-card > div { display: grid; gap: 7px; }
.assignment-card > div > span { display: flex; align-items: center; gap: 8px; color: #586863; font-size: 11px; }
.assignment-card > div i { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #a8b6b1; border-radius: 50%; color: white; font-size: 10px; font-style: normal; }
.assignment-card > div .is-achieved { color: #3d7450; text-decoration: line-through; }
.assignment-card > div .is-achieved i { border-color: #4a8b60; background: #4a8b60; }
.assignment-card footer { margin-top: 13px; padding-top: 12px; border-top: 1px solid #d1dfda; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assignment-card.is-complete { border-color: #90b9a0; background: linear-gradient(135deg,#e2f2e6,#f8f4e6); }
.learning-page { width: min(1120px,calc(100% - 28px)); margin: 30px auto 55px; }.learning-heading h1 { margin:7px 0; font:500 36px/1.08 Georgia,serif; }.learning-heading p { margin:0; color:#687874; }.learning-all-classes { margin-bottom:14px; }.browser-class-list { margin-top:22px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }.browser-class-card { min-height:190px; padding:18px; display:flex; flex-direction:column; gap:6px; text-align:left; border:1px solid #d8ddd8; border-radius:16px; color:inherit; background:rgba(255,255,255,.92); font:inherit; cursor:pointer; box-shadow:0 10px 30px rgba(30,50,45,.05); }.browser-class-card:hover,.browser-class-card:focus-visible { border-color:#8eaaa1; outline:none; }.browser-class-card h2 { margin:4px 0 0; font:500 23px/1.15 Georgia,serif; }.browser-class-card p { margin:0; color:#687874; font-size:12px; line-height:1.5; }.browser-class-card .assignment-progress-text { margin-top:auto; color:#6e7d79; font-size:10px; }.browser-class-card strong { color:#285b4f; font-size:12px; }.class-status { width:fit-content; padding:4px 8px; border-radius:99px; color:#5b6966; background:#edf1ef; font-size:9px; font-weight:800; text-transform:uppercase; }.class-status.is-in_progress { color:#7a5a1c; background:#f6ecd6; }.class-status.is-complete { color:#326744; background:#def0e4; }.browser-class { margin-top:24px; padding:20px; border:1px solid #d8ddd8; border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 10px 30px rgba(30,50,45,.05); }.browser-class > header { display:flex; justify-content:space-between; gap:16px; }.browser-class h2 { margin:0 0 5px; font:500 25px/1.15 Georgia,serif; }.browser-class header p { margin:0; color:#687874; }.class-mode { height:fit-content; padding:5px 8px; border-radius:99px; color:#285b4f; background:#e4f0ec; font-size:9px; font-weight:800; text-transform:uppercase; }.browser-assignment-grid { margin-top:17px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.browser-assignment { min-height:215px; padding:15px; display:flex; flex-direction:column; border:1px solid #dce0db; border-radius:14px; background:#fff; }.browser-assignment > small { color:#75817e; font-size:9px; font-weight:800; text-transform:uppercase; }.browser-assignment h3 { margin:10px 0 5px; font-size:17px; }.browser-assignment > p { margin:0; color:#62736e; font-size:11px; line-height:1.5; }.browser-assignment .assignment-progress-text { margin:14px 0; color:#6e7d79; font-size:10px; }.browser-assignment > button,.browser-assignment > strong { margin-top:auto; }.browser-assignment > .button { flex:0 0 auto; width:100%; height:42px; }.browser-assignment.is-locked { opacity:.65; }.browser-assignment.is-submitted,.browser-assignment.is-graded { border-color:#a8c8b5; background:#fbfefb; }.browser-grade { margin-top:12px; padding:10px; border-radius:9px; color:#285b42; background:#e8f3ea; font-weight:800; }.browser-feedback { margin-top:8px!important; padding:9px; border-left:3px solid #85aa92; background:#f4f8f4; }.learning-welcome { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }.learning-welcome .browser-free-chat { flex:0 0 auto; }.learning-section-title { margin:30px 0 0; font:500 21px/1.2 Georgia,serif; }.browser-class-card p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }.browser-no-classes { margin-top:14px; padding:18px; border:1px dashed #cfd6d1; border-radius:14px; color:#687874; }.learning-empty { margin-top:20px; }

.browser-modal-overlay { position: fixed; inset: 0; z-index: 50; padding: 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: rgba(18,35,31,.48); backdrop-filter: blur(5px); }
.browser-modal { width: min(620px, 100%); min-height: 220px; margin: 0 auto; overflow: visible; border: 1px solid #d7dcd7; border-radius: 20px; background: #faf9f5; box-shadow: 0 24px 70px rgba(20,38,34,.26); }
.browser-modal > header { position: sticky; top: -18px; z-index: 2; padding: 20px 22px 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #dde0da; border-radius: 20px 20px 0 0; background: #faf9f5; }
.browser-modal h2 { margin: 5px 0 0; font: 500 28px/1.1 Georgia, serif; }
.modal-close { width: 36px; height: 36px; border: 0; border-radius: 10px; color: #48615b; background: #edf1ee; font-size: 25px; line-height: 1; }
.browser-modal-body { min-height: 0; padding: 14px; overflow: visible; }
.saved-chat-list { display: grid; gap: 9px; }
.saved-chat-row { width: 100%; padding: 14px; display: grid; gap: 5px; text-align: left; border: 1px solid #dce0db; border-radius: 13px; color: #253934; background: white; }
.saved-chat-row:hover, .saved-chat-row:focus-visible { border-color: #8eaaa1; box-shadow: 0 7px 20px rgba(32,49,45,.07); outline: none; }
.saved-chat-row strong, .saved-chat-row small { display: block; }
.saved-chat-row small { color: #74817e; font-size: 10px; }
.saved-chat-row p { margin: 2px 0 0; overflow: hidden; color: #5f716d; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.saved-chat-empty { min-height: 130px; display: grid; place-items: center; align-content: center; padding: 24px; color: #687874; text-align: center; line-height: 1.5; }
.safety-activity-modal { display: grid; gap: 13px; }
.safety-interaction { overflow: hidden; border: 1px solid #dce0db; border-radius: 14px; background: white; }
.safety-interaction > header { padding: 14px 15px 12px; border-bottom: 1px solid #e2e5e0; background: #f5f7f4; }
.safety-interaction h3 { margin: 5px 0 0; font-size: 14px; line-height: 1.35; }
.safety-event-list { padding: 9px; display: grid; gap: 8px; }
.safety-event { padding: 12px; border: 1px solid #e0e3df; border-left-width: 4px; border-radius: 10px; background: #fff; }
.safety-event--allowed { border-left-color: #4d9367; }
.safety-event--blocked { border-left-color: #b9654d; background: #fffaf7; }
.safety-event--running { border-left-color: #9a7d3b; }
.safety-event--info { border-left-color: #78948d; }
.safety-event-meta { margin-bottom: 5px; display: flex; justify-content: space-between; gap: 10px; color: #71807d; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.safety-event > strong { display: block; font-size: 13px; }
.safety-event > p { margin: 4px 0 0; color: #61716d; font-size: 11px; line-height: 1.5; }
.safety-event details { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e7e9e5; }
.safety-event summary { color: #31544c; font-size: 10px; font-weight: 800; cursor: pointer; }
.safety-facts { margin: 10px 0 0; display: grid; grid-template-columns: minmax(105px, auto) 1fr; gap: 5px 10px; font-size: 10px; }
.safety-facts dt { color: #75817e; }
.safety-facts dd { margin: 0; overflow-wrap: anywhere; color: #2f4540; font-weight: 700; }
.safety-rules { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.safety-rules strong { width: 100%; font-size: 10px; }
.safety-rules span { padding: 4px 6px; border-radius: 6px; color: #674b37; background: #f6e9dd; font-size: 9px; }
.safety-note { margin: 10px 0 0; color: #61716d; font-size: 10px; line-height: 1.5; }

@media (max-width: 600px) {
  .profiles { grid-template-columns: 1fr; }
  .profile { min-height: 92px; flex-direction: row; justify-content: flex-start; text-align: left; }
  .topbar { height: 61px; padding: 0 14px; }
  .chat-toolbar { justify-content: flex-start; padding: 6px 12px; }
  .chat-action { min-height: 35px; }
  .brand { font-size: 19px; }
  .brand-mark { width: 31px; height: 31px; }
  .status span:last-child { display: none; }
  .message { max-width: 90%; }
  .center-card { margin-top: 7vh; padding: 26px 22px; }
  .certificate-card { padding: 25px 20px; }
  .certificate-steps { padding: 18px; }
  .browser-modal-overlay { padding: 10px; }
  .browser-modal { border-radius: 16px; }
  .browser-modal > header { top: -10px; border-radius: 16px 16px 0 0; }
  .browser-assignment-grid { grid-template-columns:1fr; }.browser-class { padding:15px; }.browser-class > header { flex-direction:column; }.class-mode { align-self:flex-start; }
}

@media (max-width: 900px) {
  .chat-workspace.has-assignment { grid-template-columns: minmax(0, 1fr); }
  .chat-workspace.has-assignment .assignment-rail { grid-row: 1; padding: 18px 0 0; }
  .chat-workspace.has-assignment .thread { grid-row: 2; padding-top: 18px; }
  .assignment-rail .assignment-card { position: static; }
}
.assignment-card footer { flex-wrap: wrap; }