/* Academy Platform v2 — visual system */
:root{--brand:#4f46e5;--brand-strong:#3730a3;--brand-soft:#eef2ff;--accent:#06b6d4;--paper:#f5f7fb;--surface:#fff;--surface-muted:#f8fafc;--ink:#172033;--ink-soft:#475569;--muted:#8290a5;--line:#e8edf5;--line-strong:#d9e1ed;--success:#16a37a;--success-bg:#e9fbf4;--radius:18px;--radius-lg:24px;--shadow-sm:0 3px 15px rgba(36,48,82,.05);--shadow-md:0 14px 36px rgba(43,53,91,.1);--shadow-lg:0 25px 70px rgba(43,53,91,.16)}
:root[data-theme=dark]{--brand:#8b8cf7;--brand-strong:#a5b4fc;--brand-soft:#262751;--accent:#22d3ee;--paper:#0c1120;--surface:#12192a;--surface-muted:#182238;--ink:#f1f5ff;--ink-soft:#c7d2e4;--muted:#8c99b0;--line:#27334a;--line-strong:#394761;--success:#51d8ac;--success-bg:#123329;--shadow-sm:0 4px 18px rgba(0,0,0,.18);--shadow-md:0 16px 40px rgba(0,0,0,.25);--shadow-lg:0 28px 75px rgba(0,0,0,.35)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand) 35%,transparent) transparent}.app-shell{background:radial-gradient(circle at 70% -10%,color-mix(in srgb,var(--brand) 7%,transparent),transparent 30%),var(--paper)}.sidebar{width:270px;padding:20px 14px;background:linear-gradient(180deg,#151d38 0%,#10172d 70%,#0e1527 100%);border:0;box-shadow:12px 0 40px #11182d18}.brand-mark{background:linear-gradient(135deg,#818cf8,#22d3ee);box-shadow:0 9px 25px #6366f155;color:#fff;border-radius:14px}.profile-chip{border:1px solid #ffffff16;background:#ffffff0b;border-radius:16px;padding:11px;margin-bottom:22px}.main-nav{gap:5px}.nav-label{color:#8e9bbb;margin:10px 11px 8px}.main-nav a{min-height:44px;border-radius:13px;color:#b5c0d8;padding:8px 12px;font-size:12px}.main-nav a:hover{background:#ffffff10;color:#fff;transform:translateX(-2px)}.main-nav a.active{background:linear-gradient(90deg,#ffffff18,#ffffff08);border-color:#ffffff17;box-shadow:inset -3px 0 #8b8cf7,0 6px 18px #070c1a22}.main-nav a.active .nav-icon{color:#a5b4fc}.secure-note{border-radius:14px;background:#ffffff09}.main-area{background:transparent}.topbar{min-height:82px;padding:14px clamp(20px,4vw,54px);background:color-mix(in srgb,var(--surface) 83%,transparent);border-color:var(--line);box-shadow:0 1px 0 #fff4;backdrop-filter:blur(22px)}.topbar h1{font-size:22px;letter-spacing:-.05em}.content{width:min(1380px,calc(100% - 72px));margin:32px auto 52px}.panel,.stat-card,.course-card,.exercise-card,.submission-card,.resource-card{border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:color-mix(in srgb,var(--surface) 96%,transparent)}.panel{padding:22px}.panel:hover{border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}.button,.primary-button,.secondary-button,.danger-button{min-height:42px;border-radius:12px;font-weight:700;letter-spacing:-.01em;transition:transform .18s,box-shadow .18s,background .18s}.button-primary,.primary-button{background:linear-gradient(135deg,var(--brand),#6366f1);box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 24%,transparent)}.button-primary:hover,.primary-button:hover{background:linear-gradient(135deg,var(--brand-strong),var(--brand));box-shadow:0 12px 25px color-mix(in srgb,var(--brand) 30%,transparent)}.button-secondary,.secondary-button{background:var(--surface);border-color:var(--line-strong);color:var(--ink-soft)}.button-secondary:hover,.secondary-button:hover{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 30%,var(--line-strong));color:var(--brand)}.button-danger,.danger-button{background:#fff1f2;color:#be123c}.stat-card{min-height:158px;padding:19px}.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.stat-icon{border-radius:14px;background:var(--brand-soft);color:var(--brand)}.badge,.status-pill{border-radius:9px;padding:5px 10px}.notice{border-radius:13px;box-shadow:var(--shadow-sm)}.form-grid,.stack-form{gap:16px}.stack-form input,.form-grid input,.form-grid select,.stack-form select,.stack-form textarea,.form-grid textarea,.search-form input,.inline-form select,.group-picker select,.chat-compose textarea{min-height:46px;border-radius:12px;border-color:var(--line-strong);background:var(--surface-muted)}.stack-form input:focus,.form-grid input:focus,.form-grid select:focus,.stack-form select:focus,.stack-form textarea:focus,.form-grid textarea:focus,.chat-compose textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent);background:var(--surface)}.class-card{padding:17px 14px;border-top:1px solid var(--line);border-radius:14px}.class-card:hover{background:var(--surface-muted)}.footer{padding-inline:clamp(20px,4vw,54px);border-color:var(--line)}
/* WhatsApp-like group chat */
.whatsapp-chat{--chat-bg:#eef2f7;max-width:1200px;margin:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 23px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),var(--surface));border-radius:22px!important}.chat-group-title{display:flex;align-items:center;gap:13px}.chat-group-title h3{margin:3px 0;font-size:18px}.chat-group-title small{color:var(--muted);font-size:10px}.chat-group-avatar{width:48px;height:48px;display:grid;place-content:center;gap:3px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 8px 18px #4f46e133}.chat-group-avatar span{display:block;width:4px;height:4px;border-radius:50%;background:#fff}.live-presence-dot,.online-badge i,.member-online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#25c891;box-shadow:0 0 0 4px #25c89120}.chat-layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:18px;margin-top:18px;direction:ltr}.chat-layout>*{direction:rtl}.chat-info{padding:20px!important}.chat-info-heading,.chat-panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-info-heading h4{margin:2px 0;font-size:16px}.online-badge,.connection-state{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:var(--success-bg);color:var(--success);font-size:9px;font-weight:800}.member-count{display:flex;align-items:baseline;gap:7px;margin:21px 0;padding:17px;border-radius:15px;background:linear-gradient(135deg,var(--brand-soft),color-mix(in srgb,var(--accent) 8%,var(--surface)));color:var(--ink-soft)}.member-count strong{color:var(--brand);font-size:28px;line-height:1}.member-count span{font-size:10px}.member-list{display:grid;gap:5px;max-height:440px;overflow:auto}.member-row{position:relative;display:flex;align-items:center;gap:9px;padding:9px 7px;border-radius:12px}.member-row:hover{background:var(--surface-muted)}.member-row>span:nth-child(2){display:grid;min-width:0;flex:1}.member-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.member-row small{color:var(--muted);font-size:9px}.member-online-dot{width:6px;height:6px;box-shadow:none}.chat-panel{min-width:0;padding:0!important;overflow:hidden;background:var(--chat-bg)!important}.chat-panel-top{padding:18px 21px;background:var(--surface);border-bottom:1px solid var(--line)}.chat-panel-top strong{display:block;margin-top:3px;font-size:16px}.connection-state{background:var(--surface-muted);color:var(--muted)}.connection-state.is-online{background:var(--success-bg);color:var(--success)}.chat-window{height:min(61vh,620px);min-height:390px;overflow:auto;padding:24px 22px;background:radial-gradient(circle at 10% 5%,#ffffffaa,transparent 22%),var(--chat-bg);display:flex;flex-direction:column;gap:10px}.message{max-width:min(78%,540px);margin:0!important;padding:11px 14px!important;border:1px solid var(--line)!important;border-radius:17px 17px 4px 17px!important;background:var(--surface)!important;box-shadow:0 3px 11px #2430520a!important;animation:message-in .2s ease both}.message:nth-child(even){align-self:flex-start;border-radius:17px 17px 17px 4px!important;background:var(--brand-soft)!important}.message-meta{display:flex!important;align-items:center;gap:8px!important;justify-content:flex-start!important}.message-meta>div{display:grid;gap:1px}.message-meta strong{font-size:10px!important}.message-meta small{color:var(--muted);font-size:8px}.message>p{margin:7px 0 1px!important;font-size:12px!important;line-height:1.8}.message-live{border-color:color-mix(in srgb,var(--brand) 22%,var(--line))!important}.empty-chat-icon{width:52px;height:52px;display:grid;place-items:center;margin:0 auto 10px;border-radius:18px;background:var(--brand-soft);color:var(--brand);font-size:24px}.typing-indicator{min-height:25px;padding:0 22px;color:var(--brand);font-size:10px;background:var(--chat-bg)}.typing-indicator.is-error{color:#e11d48}.chat-compose{position:relative;display:flex!important;align-items:flex-end!important;gap:8px!important;padding:13px 15px!important;border-top:1px solid var(--line)!important;background:var(--surface)!important}.chat-compose textarea{flex:1;min-height:44px!important;max-height:120px;resize:none;padding:12px 14px!important}.composer-icon,.send-button{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border:0;border-radius:13px;background:var(--surface-muted);color:var(--muted);font-size:17px}.composer-icon:hover{color:var(--brand);background:var(--brand-soft)}.send-button{background:linear-gradient(135deg,var(--brand),#6366f1);color:#fff;font-size:18px;transform:rotate(180deg);box-shadow:0 7px 15px #4f46e133}.send-button:hover{transform:rotate(180deg) translateY(-2px)}.sticker-palette{position:absolute;inset-block-end:68px;inset-inline-end:61px;display:flex;gap:4px;padding:7px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-md)}.sticker-palette[hidden]{display:none}.sticker-palette button{border:0;background:transparent;border-radius:8px;padding:7px;font-size:18px}.chat-footer-note{display:flex;justify-content:space-between;padding:0 20px 12px;background:var(--surface);color:var(--muted);font-size:9px}.chat-footer-note span:last-child{color:var(--success)}
@keyframes message-in{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:900px){.content{width:calc(100% - 38px)}.chat-layout{grid-template-columns:1fr}.chat-info{order:2}.chat-info .member-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:220px}.chat-info .leave-group-form{margin-top:14px}.chat-window{height:55vh}}
@media(max-width:720px){.content{width:calc(100% - 24px);margin-top:20px}.chat-header{align-items:flex-start;flex-direction:column;padding:17px!important}.group-picker,.group-picker select{width:100%}.chat-layout{gap:11px;margin-top:11px}.chat-window{min-height:350px;height:58vh;padding:17px 12px}.message{max-width:89%}.chat-compose{padding:10px!important}.chat-compose textarea{min-height:42px!important}.chat-footer-note{padding-inline:13px}.chat-info .member-list{grid-template-columns:1fr}.sidebar{width:min(320px,90vw)}}
@media(prefers-reduced-motion:reduce){.message{animation:none!important}}