:root{--bg: #ffffff;--bg-card: #ffffff;--ink: #3c3c3c;--ink-soft: #777777;--accent: #58cc02;--accent-dark: #46a302;--accent-soft: #d7ffb8;--blue: #1cb0f6;--blue-dark: #1899d6;--blue-soft: #ddf4ff;--warn: #ffc800;--lock: #e5e5e5;--border: #e5e5e5;--radius: 16px;--nav-w: 232px;--nav-h: 64px}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{background:var(--bg);color:var(--ink);font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;font-weight:800;letter-spacing:.3px;cursor:pointer;border:none;border-radius:14px;background:var(--accent);color:#fff;padding:12px 24px;box-shadow:0 4px 0 var(--accent-dark);transition:filter .15s,transform .05s,box-shadow .05s}button:hover{filter:brightness(1.07)}button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-dark)}button:disabled{background:var(--lock);color:#afafaf;cursor:not-allowed;box-shadow:0 4px #cfcfcf}button.ghost{background:#fff;color:var(--blue-dark);border:2px solid var(--border);box-shadow:0 4px 0 var(--border)}button.ghost:hover{background:var(--blue-soft)}button.ghost:active{box-shadow:0 1px 0 var(--border)}.card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:20px}.shell{display:flex;height:100dvh;overflow:hidden}.shell-nav{flex:0 0 var(--nav-w);display:flex;flex-direction:column;background:var(--bg-card);border-right:1px solid var(--border);padding:16px 12px;z-index:10}.shell-logo{font-size:22px;font-weight:900;color:var(--accent);padding:8px 12px 20px;letter-spacing:.5px}.shell-nav a{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:4px;border-radius:12px;color:var(--ink-soft);text-decoration:none;font-weight:800}.shell-nav a.router-link-active{background:var(--accent-soft);color:var(--accent-dark)}.shell-spacer{flex:1}.user-block{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer}.user-block:hover{background:#f7f7f7}.user-block .avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}.user-block .name{font-weight:700;font-size:14px}.user-block .tariff{font-size:12px;color:var(--accent-dark);font-weight:800}.shell-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.shell-topbar{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:12px 24px;background:var(--bg);border-bottom:1px solid var(--border)}.shell-topbar h1{font-size:18px}.shell-body{flex:1;overflow-y:auto;padding:24px}@media(max-width:1023px){.shell{flex-direction:column}.shell-nav{order:2;flex:0 0 var(--nav-h);flex-direction:row;border-right:none;border-top:1px solid var(--border);padding:0 8px}.shell-logo,.shell-spacer,.shell-nav .user-block{display:none}.shell-nav a{flex:1;justify-content:center;margin:0;padding:8px 4px;font-size:12px;flex-direction:column;gap:4px}.shell-main{order:1}.shell-topbar .user-block{display:flex;margin-left:auto;padding:4px 8px}}@media(min-width:1024px){.shell-topbar .user-block{display:none}}.map-wrap{display:flex;gap:48px;align-items:flex-start;justify-content:space-between;padding:0 3%}.map-center{flex:1;max-width:640px;margin:0 auto;min-width:0}.map-path{display:flex;flex-direction:column;align-items:center}.map-section-title{align-self:flex-start;margin:24px 0 12px;font-size:14px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#afafaf}.lesson-node{margin:10px 0;position:relative;width:100%;display:flex;justify-content:center}.lesson-dot{width:72px;height:72px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px;border:none;box-shadow:0 6px #0000001f}.lesson-dot.done{background:var(--accent);color:#fff;box-shadow:0 6px 0 var(--accent-dark)}.lesson-dot.current{background:var(--blue);color:#fff;box-shadow:0 6px 0 var(--blue-dark);animation:pulse 1.6s infinite}.lesson-dot.locked{background:var(--lock);color:#afafaf;box-shadow:0 6px #cfcfcf}.lesson-node .lesson-label{position:absolute;left:calc(50% + 48px);top:50%;transform:translateY(-50%);width:max-content;max-width:min(320px,38vw);white-space:normal;font-weight:700;line-height:1.25;text-align:left}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}.back-to-current{position:sticky;bottom:16px;margin:12px auto;display:block;background:var(--blue);box-shadow:0 4px 0 var(--blue-dark)}.side-panel{flex:0 0 300px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0}@media(max-width:1279px){.side-panel{display:none}}.stat-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}.stat-row b{color:var(--accent-dark)}.progress-bar{height:12px;border-radius:6px;background:var(--lock);overflow:hidden;margin-top:6px}.progress-bar>div{height:100%;background:var(--accent)}
