:root{--color-primary: #16a34a;--color-primary-dark: #15803d;--color-primary-darker: #166534;--color-primary-light: #dcfce7;--color-primary-subtle: #f0fdf4;--color-bg: #f8fafc;--color-surface: #ffffff;--color-text: #1f2937;--color-text-muted: #64748b;--color-border: #e2e8f0;--color-border-strong: #cbd5e1;--color-danger: #dc2626;--color-danger-light: #fef2f2;--font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 999px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);--shadow-md: 0 4px 16px rgba(15, 23, 42, .06);--shadow-lg: 0 20px 48px rgba(15, 23, 42, .18);--focus-ring: 0 0 0 3px rgba(22, 163, 74, .28);--sidebar-width: 264px;--sidebar-width-collapsed: 80px;--topbar-height: 72px;--content-max-width: 1200px;--ease: cubic-bezier(.4, 0, .2, 1);--duration: .22s}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font-family);font-size:var(--text-base);line-height:1.5;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,p{margin:0}ul{margin:0;padding:0;list-style:none}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button{cursor:pointer}img,video{max-width:100%;display:block}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--color-primary-dark);color:#fff;font-weight:600}.skip-link:focus{top:var(--space-4)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text);transition:background-color var(--duration) var(--ease)}.icon-btn:hover{background:var(--color-primary-subtle)}.brand-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:30%;background:var(--color-primary);color:#fff}.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-10) var(--space-4);border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);color:var(--color-text-muted);text-align:center}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-md);font-weight:600;line-height:1.2;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--duration) var(--ease),border-color var(--duration) var(--ease),color var(--duration) var(--ease),box-shadow var(--duration) var(--ease),transform .12s var(--ease)}.btn:active{transform:scale(.97)}.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn__icon{display:inline-flex;transition:transform var(--duration) var(--ease)}.btn--sm{min-height:40px;padding:0 var(--space-4);font-size:var(--text-sm)}.btn--md{min-height:46px;padding:0 var(--space-5);font-size:var(--text-sm)}.btn--lg{min-height:54px;padding:0 var(--space-6);font-size:var(--text-base)}.btn--block{width:100%}.btn--primary{background:var(--color-primary);color:#fff;box-shadow:0 1px 2px #15803d40}.btn--primary:hover{background:var(--color-primary-dark);box-shadow:0 6px 16px #16a34a40}.btn--primary:hover .btn__icon:last-child:not(:first-child){transform:translate(3px)}.btn--secondary{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}.btn--secondary:hover{border-color:var(--color-primary);color:var(--color-primary-dark);background:var(--color-primary-subtle)}.login{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--space-6) var(--space-4);background:linear-gradient(180deg,var(--color-primary-light) 0%,var(--color-bg) 55%)}.login__card{width:100%;max-width:420px;padding:var(--space-8) var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:var(--shadow-md)}.login__brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center}.login__brand .brand-mark{margin-bottom:var(--space-3)}.login__title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.15}.login__subtitle{display:inline-block;padding:2px var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-light);color:var(--color-primary-darker);font-size:var(--text-sm);font-weight:600}.login__intro{margin:var(--space-5) 0 var(--space-6);color:var(--color-text-muted);font-size:var(--text-sm);text-align:center}.login__form{display:flex;flex-direction:column;gap:var(--space-5)}.login__note{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--text-xs);line-height:1.5;text-align:center}@media(min-width:480px){.login__card{padding:var(--space-10) var(--space-8)}}.field{display:flex;flex-direction:column;gap:var(--space-2)}.field__label{font-size:var(--text-sm);font-weight:600}.field__control{position:relative;display:flex;align-items:center}.field__icon{position:absolute;left:var(--space-4);color:var(--color-text-muted);pointer-events:none;transition:color var(--duration) var(--ease)}.field__input{width:100%;height:54px;padding:0 var(--space-4) 0 calc(var(--space-4) + 20px + var(--space-3));border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-base);transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}.field__input::placeholder{color:#94a3b8}.field__input:hover{border-color:var(--color-border-strong)}.field__input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--focus-ring)}.field__control:focus-within .field__icon{color:var(--color-primary)}.field__control--error .field__input{border-color:var(--color-danger)}.field__control--error .field__input:focus{box-shadow:0 0 0 3px #dc26262e}.field__control--error .field__icon{color:var(--color-danger)}.field__error{display:flex;align-items:center;gap:var(--space-2);color:var(--color-danger);font-size:var(--text-sm)}.app-shell__main{min-height:100vh;min-height:100dvh;margin-left:var(--sidebar-width);transition:margin-left var(--duration) var(--ease)}.app-shell--collapsed .app-shell__main{margin-left:var(--sidebar-width-collapsed)}.app-content{width:100%;max-width:var(--content-max-width);margin:0 auto;padding:var(--space-8)}.app-content:focus{outline:none}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-3);min-height:var(--topbar-height);padding:var(--space-3) var(--space-8);border-bottom:1px solid var(--color-border);background:#ffffffeb;backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px)}.topbar__user{flex:1;min-width:0}.topbar__email{overflow:hidden;font-size:var(--text-base);font-weight:600;text-overflow:ellipsis;white-space:nowrap}.topbar__welcome{color:var(--color-text-muted);font-size:var(--text-sm)}.topbar__logout{flex-shrink:0}.page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-4);margin-bottom:var(--space-6)}.page-header__title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.2}.page-header__description{margin-top:var(--space-1);color:var(--color-text-muted)}.sidebar{position:fixed;inset:0 auto 0 0;z-index:40;display:flex;flex-direction:column;width:var(--sidebar-width);padding:var(--space-4) var(--space-3);overflow-x:hidden;overflow-y:auto;border-right:1px solid var(--color-border);background:var(--color-surface);transition:width var(--duration) var(--ease),transform var(--duration) var(--ease),visibility var(--duration)}.sidebar__brand{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:0 var(--space-2) var(--space-4);margin-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.sidebar__brand-text{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.25;white-space:nowrap}.sidebar__brand-text strong{font-size:var(--text-base)}.sidebar__brand-text span{color:var(--color-primary-dark);font-size:var(--text-xs);font-weight:600}.sidebar__nav{flex:1}.sidebar__nav ul{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar__link,.sidebar__toggle{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:48px;padding:0 var(--space-4);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);font-size:var(--text-sm);font-weight:600;white-space:nowrap;transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease),padding var(--duration) var(--ease)}.sidebar__link:hover,.sidebar__toggle:hover{background:var(--color-primary-subtle);color:var(--color-text)}.sidebar__link--active,.sidebar__link--active:hover{background:var(--color-primary-light);color:var(--color-primary-darker)}.sidebar__icon,.sidebar__toggle svg{flex-shrink:0}.sidebar__label{transition:opacity var(--duration) var(--ease)}.sidebar__toggle{margin-top:var(--space-4)}.sidebar--collapsed{width:var(--sidebar-width-collapsed)}.sidebar--collapsed .sidebar__brand{padding-left:var(--space-2);padding-right:var(--space-2)}.sidebar--collapsed .sidebar__link,.sidebar--collapsed .sidebar__toggle{padding:0 calc((var(--sidebar-width-collapsed) - 2 * var(--space-3) - 20px) / 2)}.sidebar--collapsed .sidebar__label,.sidebar--collapsed .sidebar__brand-text{opacity:0;pointer-events:none}.sidebar--mobile{width:min(300px,84vw);transform:translate(-100%);visibility:hidden;box-shadow:var(--shadow-lg)}.sidebar--open{transform:translate(0);visibility:visible}.sidebar__close{margin-right:calc(-1 * var(--space-2))}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#0f172a73;opacity:0;visibility:hidden;transition:opacity var(--duration) var(--ease),visibility var(--duration)}.sidebar-overlay--visible{opacity:1;visibility:visible}@media(max-width:899px){.app-shell__main,.app-shell--collapsed .app-shell__main{margin-left:0}.topbar{padding:var(--space-3) var(--space-4);padding-top:max(var(--space-3),env(safe-area-inset-top))}.topbar__menu{margin-left:calc(-1 * var(--space-2))}.app-content{padding:var(--space-6) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom))}}@media(max-width:479px){.topbar__email{font-size:var(--text-sm)}.topbar__welcome{font-size:var(--text-xs);line-height:1.35}.topbar__logout{padding:0 var(--space-3)}.page-header__title{font-size:var(--text-xl)}.page-header__description{font-size:var(--text-sm)}}.video-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}@media(min-width:640px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}.video-grid--story{max-width:300px;margin-inline:auto}@media(min-width:640px){.video-grid--story{max-width:none;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5)}}.video-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm);transition:box-shadow var(--duration) var(--ease),border-color var(--duration) var(--ease)}.video-card:hover{border-color:#bbf7d0;box-shadow:var(--shadow-md)}.video-card__stage{padding:var(--space-3) var(--space-3) 0}.video-card__frame{position:relative;overflow:hidden;border-radius:var(--radius-md);background:#0f172a}.video-card--horizontal .video-card__frame,.video-card--lesson .video-card__frame{aspect-ratio:16 / 9}.video-card--story .video-card__stage{display:flex;justify-content:center;margin:var(--space-3) var(--space-3) 0;padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-primary-subtle)}.video-card--story .video-card__frame{width:min(100%,250px);aspect-ratio:9 / 16}.player,.player__media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.player__media{border:0;object-fit:cover;opacity:0;transition:opacity .3s var(--ease)}.player__media--ready{opacity:1}.player__media--contain{object-fit:contain}.player__loading{position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:player-spin .8s linear infinite}@keyframes player-spin{to{transform:rotate(360deg)}}.video-card__preview{position:absolute;z-index:2;top:var(--space-3);right:var(--space-3);display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--space-3);border:0;border-radius:var(--radius-full);background:#fffffff0;color:var(--color-text);font-size:var(--text-xs);font-weight:600;box-shadow:0 2px 8px #0f172a2e;transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease),transform .12s var(--ease)}.video-card__preview:hover{background:var(--color-primary);color:#fff}.video-card__preview:active{transform:scale(.95)}.video-card__preview:focus-visible{outline:none;box-shadow:0 0 0 3px #ffffffe6,0 0 0 5px var(--color-primary)}.video-card__body{display:flex;flex:1;flex-direction:column;gap:var(--space-4);padding:var(--space-4)}.video-card__title{flex:1;font-size:var(--text-base);font-weight:600;line-height:1.4}@media(min-width:900px){.video-card__body{padding:var(--space-4) var(--space-5) var(--space-5)}.video-card--story .video-card__frame{width:min(100%,230px)}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:max(var(--space-4),env(safe-area-inset-top)) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom));background:#020617e0;animation:modal-fade .18s var(--ease)}.modal__dialog{--modal-video-height: calc(100dvh - 120px) ;display:flex;flex-direction:column;width:min(100%,960px,calc(var(--modal-video-height) * 16 / 9));animation:modal-rise .22s var(--ease)}.modal__dialog--story{width:min(100%,480px,calc(var(--modal-video-height) * 9 / 16))}.modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3);color:#fff}.modal__title{min-width:0;overflow:hidden;font-size:var(--text-base);font-weight:600;text-overflow:ellipsis;white-space:nowrap}.modal__close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border:0;border-radius:var(--radius-full);background:#ffffff24;color:#fff;transition:background-color var(--duration) var(--ease)}.modal__close:hover{background:#ffffff42}.modal__close:focus-visible{outline:2px solid #fff;outline-offset:2px}.modal__player{position:relative;overflow:hidden;aspect-ratio:16 / 9;border-radius:var(--radius-lg);background:#000}.modal__dialog--story .modal__player{aspect-ratio:9 / 16}@keyframes modal-fade{0%{opacity:0}}@keyframes modal-rise{0%{opacity:0;transform:translateY(12px) scale(.98)}}.support-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);max-width:560px;padding:var(--space-10) var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm);text-align:center}.support-card__icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:var(--radius-full);background:var(--color-primary-light);color:var(--color-primary-dark)}.support-card__text{max-width:360px;color:var(--color-text-muted);font-size:var(--text-lg);line-height:1.5}.support-card__button{width:100%;max-width:320px}