:root{--ink:#152238;--muted:#64748b;--paper:#fff;--surface:#f5f7fb;--line:#e5eaf1;--primary:#6750d8;--primary-dark:#503bbd;--primary-soft:#eeeafd;--cyan:#0e96a8;--orange:#f0783b;--green:#249663;--red:#d84747;--shadow:0 18px 45px rgba(29,38,58,.09);--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--surface);font-family:"Segoe UI","Be Vietnam Pro",system-ui,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.container{width:min(1180px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.nav-row{height:72px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;color:white;border-radius:14px;background:linear-gradient(145deg,var(--primary),#9275ee);box-shadow:0 9px 22px rgba(103,80,216,.28)}.main-nav{display:flex;gap:6px;align-items:center;margin-left:auto}.main-nav a{padding:9px 12px;border-radius:12px;color:#536075;font-weight:600;font-size:14px}.main-nav a:hover,.main-nav a.active{background:var(--primary-soft);color:var(--primary)}.nav-user{display:flex;align-items:center;gap:10px}.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#dff4ef;color:#16755a;font-weight:800}.mobile-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:white;border-radius:12px;padding:8px 11px}.page{padding:42px 0 72px}.section{margin:38px 0}.hero{padding:72px 0 56px;background:radial-gradient(circle at 82% 15%,#e4dcff 0,transparent 30%),radial-gradient(circle at 15% 90%,#d9f6f3 0,transparent 28%),linear-gradient(180deg,#fff,#f7f6ff)}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}.eyebrow,.badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 11px;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:13px}.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.05;letter-spacing:-2px;margin:18px 0}.gradient{color:var(--primary)}.lead{font-size:19px;color:var(--muted);max-width:680px}.hero-panel{background:#182338;color:white;padding:26px;border-radius:30px;box-shadow:0 28px 70px rgba(21,34,56,.22);transform:rotate(1deg)}.wave{height:100px;border-radius:18px;background:linear-gradient(90deg,transparent,#8b72e8,transparent),repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.15) 8px 11px);display:grid;place-items:center;margin:20px 0}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.btn{border:0;border-radius:13px;padding:11px 17px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:white;box-shadow:0 10px 24px rgba(103,80,216,.25)}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:white;border:1px solid var(--line);color:var(--ink)}.btn-danger{background:#fff0f0;color:var(--red)}.btn-block{width:100%}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 5px 20px rgba(29,38,58,.04);padding:24px}.card:hover{box-shadow:var(--shadow)}.card-flat:hover{box-shadow:none}.card h3{margin:6px 0 8px}.muted{color:var(--muted)}.small{font-size:13px}.kpi{font-size:32px;line-height:1.1;font-weight:800;margin:8px 0}.icon-box{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--primary-soft);color:var(--primary);font-size:23px}.error-ld{--accent:#7358d6}.error-bv{--accent:#078fa3}.error-tone{--accent:#ea7437}.error-mixed{--accent:#249663}.accent-card{border-top:4px solid var(--accent)}.accent-card .badge{background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent)}.progress{height:9px;background:#edf0f5;border-radius:99px;overflow:hidden}.progress>span{display:block;height:100%;background:var(--accent,var(--primary));border-radius:99px}.form-card{max-width:560px;margin:36px auto}.form-group{margin-bottom:18px}.form-group label{display:block;font-weight:700;margin-bottom:7px}.input{width:100%;border:1px solid #d8dee8;border-radius:13px;padding:12px 14px;background:white;outline:none}.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(103,80,216,.1)}textarea.input{min-height:110px;resize:vertical}.alert{padding:13px 15px;border-radius:13px;margin:15px 0}.alert-error{background:#fff0f0;color:#9f2e2e;border:1px solid #ffd2d2}.alert-success{background:#ebfbf3;color:#146744;border:1px solid #c8f0da}.page-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}.page-title h1{font-size:38px;line-height:1.15;margin:0}.tabs{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.tab{white-space:nowrap;padding:9px 14px;border-radius:12px;background:white;border:1px solid var(--line);font-weight:700;color:var(--muted)}.tab.active,.tab:hover{background:var(--primary);color:white;border-color:var(--primary)}.course-cover{height:160px;border-radius:16px;background:linear-gradient(145deg,#e8e2ff,#dff7f4);display:flex;align-items:flex-end;padding:18px;font-weight:800;font-size:25px;color:#463692}.lesson-list{display:grid;gap:12px}.lesson-row{display:flex;align-items:center;gap:16px;padding:17px;border:1px solid var(--line);border-radius:16px;background:white}.lesson-number{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:13px;background:var(--primary-soft);color:var(--primary);font-weight:800}.practice-shell{display:grid;grid-template-columns:280px 1fr;gap:22px}.practice-sidebar{align-self:start;position:sticky;top:94px}.exercise-item{display:block;padding:11px 12px;border-radius:12px;margin:5px 0;color:var(--muted)}.exercise-item.active,.exercise-item:hover{background:var(--primary-soft);color:var(--primary)}.prompt-box{padding:24px;background:#f8f6ff;border:1px solid #e7e0ff;border-radius:18px;text-align:center}.target-text{font-size:clamp(23px,4vw,36px);font-weight:800;line-height:1.4;margin:15px 0}.recorder{display:flex;flex-direction:column;align-items:center;padding:28px 0}.record-button{width:86px;height:86px;border:8px solid #eeeafd;border-radius:50%;background:var(--primary);color:white;font-size:31px;box-shadow:0 0 0 0 rgba(103,80,216,.3)}.record-button.recording{background:var(--red);animation:pulse 1.3s infinite}.record-status{margin-top:12px;color:var(--muted);font-weight:700}@keyframes pulse{70%{box-shadow:0 0 0 22px rgba(103,80,216,0)}}.score-ring{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--score)*1%),#e9edf3 0);position:relative}.score-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:white}.score-ring strong{position:relative;font-size:28px}.result-grid{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center}.metric-row{display:grid;grid-template-columns:120px 1fr 45px;align-items:center;gap:10px;margin:10px 0}.chart{height:230px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--line);padding-top:24px}.chart-bar{flex:1;background:linear-gradient(180deg,#8b72e8,var(--primary));min-height:4px;border-radius:8px 8px 0 0;position:relative}.chart-bar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted)}.feed{max-width:760px;margin:auto}.post{background:white;border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:16px}.post-head{display:flex;gap:11px;align-items:center}.post-actions{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:15px}.post-actions form{flex:1}.post-actions button{width:100%;background:transparent;border:0;border-radius:10px;padding:8px;font-weight:700;color:var(--muted)}.post-actions button:hover{background:var(--primary-soft);color:var(--primary)}.comment{display:flex;gap:9px;margin-top:12px}.comment-body{background:#f3f5f8;border-radius:14px;padding:8px 12px;flex:1}.chat-layout{display:grid;grid-template-columns:260px 1fr;gap:20px}.chat-window{height:620px;display:flex;flex-direction:column}.messages{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:12px}.bubble{max-width:78%;padding:11px 14px;border-radius:16px;background:#edf0f5}.bubble.user{align-self:flex-end;background:var(--primary);color:white;border-bottom-right-radius:4px}.bubble.assistant{align-self:flex-start;border-bottom-left-radius:4px}.chat-composer{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:14px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}.table th{font-size:12px;text-transform:uppercase;color:var(--muted)}.site-footer{padding:35px 0;border-top:1px solid var(--line);background:white;color:var(--muted)}.empty{text-align:center;padding:45px 20px}.empty-icon{font-size:42px}.pagination{display:flex;gap:7px;justify-content:center;margin-top:24px}.pagination a{padding:8px 12px;background:white;border:1px solid var(--line);border-radius:10px}.hide{display:none!important}
@media(max-width:900px){.hero-grid,.practice-shell,.chat-layout{grid-template-columns:1fr}.practice-sidebar{position:static}.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-panel{transform:none}.main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;background:white;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.mobile-toggle{display:block}.nav-user .user-name{display:none}}
@media(max-width:620px){.container{width:min(100% - 22px,1180px)}.hero{padding:48px 0}.hero h1{font-size:43px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.page{padding-top:26px}.page-title{align-items:flex-start;flex-direction:column}.page-title h1{font-size:31px}.result-grid{grid-template-columns:1fr;justify-items:center}.metric-row{grid-template-columns:92px 1fr 38px}.nav-row{height:64px}.brand span:last-child{display:none}.card{padding:18px}.chat-window{height:70vh}}

/* Production administration */
.admin-shell{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}.admin-sidebar{position:sticky;top:0;height:100vh;background:#172238;color:#d8deea;padding:24px 18px;display:flex;flex-direction:column;z-index:60}.admin-brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;font-size:19px;padding:0 8px 25px}.admin-brand small{display:block;color:#8996aa;font-size:11px;font-weight:600}.admin-nav{display:flex;flex-direction:column;gap:5px}.admin-nav-label{color:#778499;font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;margin:19px 11px 6px}.admin-nav a{padding:11px 13px;border-radius:12px;color:#bbc5d4;font-weight:650}.admin-nav a:hover,.admin-nav a.active{background:#6750d8;color:#fff}.admin-sidebar-foot{margin-top:auto;padding:15px 10px;border-top:1px solid #2b3850;font-size:12px;color:#98a6b9}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#42d493;margin-right:7px}.admin-main{min-width:0;padding:0 32px 60px}.admin-topbar{height:78px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);margin-bottom:32px}.admin-topbar>.btn{margin-left:auto}.admin-menu-toggle{display:none;border:1px solid var(--line);border-radius:10px;background:#fff;padding:8px 11px}.admin-kpis .card{min-height:165px}.admin-quick{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}.admin-stack{display:grid;gap:18px}.admin-course-head{display:flex;justify-content:space-between;gap:24px}.admin-course-head h2{margin:8px 0 2px}.admin-row-actions,.inline-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.admin-row-actions form{margin:0}.compact{margin-top:0}.admin-lessons{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.admin-lesson-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.admin-grow{flex:1}.admin-grow small,.admin-table small,.user-cell small{display:block}.link-danger{border:0;background:transparent;color:var(--red);padding:4px}.admin-form{max-width:920px}.admin-form-wide{max-width:none;margin:18px 0}.admin-editor{min-height:240px}.admin-form-title,.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px}.admin-form-title h2{margin-top:0}.admin-toolbar{margin-bottom:18px}.admin-toolbar .input{width:auto;min-width:160px}.file-input{padding:10px 12px;border:1px dashed #b8c1cf;border-radius:12px;background:#fff}.file-input input{margin-left:10px;max-width:210px}.admin-table td{vertical-align:middle}.admin-table td:nth-child(3){max-width:420px}.status{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:750;background:#edf0f5;color:#536075}.status-published,.status-active,.status-resolved{background:#e7f8f0;color:#167651}.status-draft,.status-pending{background:#fff4dd;color:#93610c}.status-archived,.status-inactive,.status-hidden,.status-dismissed{background:#f0f1f4;color:#667085}.user-cell{display:flex;align-items:center;gap:10px}.input-sm{padding:8px 10px;width:auto}.btn-sm{padding:7px 10px;font-size:13px}
@media(max-width:1000px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{display:none;position:fixed;inset:0 auto 0 0;width:280px}.admin-sidebar.open{display:flex}.admin-menu-toggle{display:block}.admin-main{padding:0 20px 45px}.admin-course-head,.admin-toolbar{align-items:flex-start;flex-direction:column}.admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.admin-main{padding:0 12px 36px}.admin-topbar{height:68px;margin-bottom:22px}.admin-topbar .small{display:none}.admin-topbar>.btn{padding:8px 10px;font-size:12px}.admin-kpis{grid-template-columns:1fr}.admin-quick,.admin-course-head{align-items:stretch;flex-direction:column}.admin-row-actions{align-items:stretch}.admin-lesson-row{align-items:flex-start;flex-wrap:wrap}.admin-lesson-row .admin-grow{min-width:calc(100% - 58px)}.admin-toolbar .inline-form{width:100%}.admin-toolbar .input{flex:1;min-width:0}.file-input{width:100%}.file-input input{display:block;margin:7px 0 0;max-width:100%}}
