:root {
    --ugks-primary: #1a6aaa;
    --ugks-primary-bright: #0877c9;
    --ugks-bg: #f0f4ff;
    --ugks-surface: #fff;
    --ugks-text: #176aa9;
    --ugks-text-muted: #64748b;
    --ugks-text-subtle: #94a3b8;
    --ugks-border: #d8e2f4;
    --ugks-track: #dbe5f8;
    --shell-width: 390px;
    --status-height: 0px;
    --nav-height: 71px;
}

* { box-sizing: border-box; }
html { background: #dfe5ef; }
body { margin: 0; min-width: 320px; color: var(--ugks-text); background: #dfe5ef; font-family: Outfit, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell { position: relative; width: 100%; max-width: var(--shell-width); min-height: 100vh; min-height: 100dvh; margin: 0 auto; overflow: hidden; background: #fff; }
.app-main { min-height: calc(100vh - var(--status-height)); min-height: calc(100dvh - var(--status-height)); }
.app-main--with-nav { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; width: min(100%, var(--shell-width)); min-height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: 10px 24px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--ugks-border); transform: translateX(-50%); }
.bottom-nav__item { display: flex; align-items: center; flex-direction: column; gap: 3px; color: #91a5c2; font-size: 12px; line-height: 1; }
.bottom-nav__item.is-active { color: #0875bd; }
.icon-mask { width: 21px; height: 21px; background: currentColor; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }

.content-section { padding: 20px; background: var(--ugks-bg); }
.app-button { min-height: 55px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 15px; color: #fff; background: #2474b2; font-weight: 600; font-size: 16px; text-align: center; }
.app-button:hover, .app-button:focus-visible { color: #fff; background: #145e98; }
.secondary-button { min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #ccdcf6; border-radius: 15px; color: var(--ugks-primary); background: #f0f4ff; font-weight: 500; }
.secondary-button img { width: 18px; height: 18px; }
.round-button { flex: 0 0 37px; width: 37px; height: 37px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--ugks-bg); }
.round-button img { width: 20px; height: 20px; }

.page-welcome .app-main { min-height: calc(100dvh - var(--status-height)); }
.welcome-screen { min-height: calc(100dvh - var(--status-height)); padding: 47px 32px 40px; display: flex; flex-direction: column; align-items: stretch; }
.welcome-screen__logo { width: 250px; height: 250px; margin: 0 auto; object-fit: contain; }
.welcome-screen__lead { margin: 41px 0 53px; color: var(--ugks-text-muted); font-size: 16px; line-height: 1.5; text-align: center; }
.welcome-screen__partners { margin-top: auto; }
.partners-divider { display: flex; align-items: center; gap: 13px; color: #82b3db; font: 500 10px Manrope, sans-serif; white-space: nowrap; }
.partners-divider::before, .partners-divider::after { content: ''; flex: 1; height: 1px; background: #bad3e8; }
.partners-panel { margin-top: 54px; height: 60px; padding: 11px 25px; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; background: #e6f0f8; box-shadow: 0 5px 15px rgba(29, 80, 116, .18); }
.partners-panel img:first-child { width: 122px; height: 39px; object-fit: contain; }.partners-panel img:last-child { width: 128px; height: 39px; object-fit: contain; }

.home-header { height: 70px; padding: 9px 20px 15px; display: flex; align-items: center; gap: 11px; background: #fff; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: #2073b3; font-weight: 600; }.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-header div { display: flex; flex-direction: column; }
.home-header span { color: var(--ugks-text-muted); font-size: 13px; }.home-header strong { color: var(--ugks-primary); font-size: 15px; }
.home-content { min-height: calc(100dvh - var(--status-height) - 70px - var(--nav-height)); padding-top: 21px; }
.home-content h1, .profile-content h1 { margin: 0 0 18px; font-size: 20px; font-weight: 600; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.category-card { min-height: 141px; padding: 16px; display: flex; flex-direction: column; border: 1px solid var(--ugks-border); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(42, 86, 124, .05); }
.category-card__icon, .phrase-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: #eef3ff; }
.category-card__icon img { width: 27px; height: 27px; }.category-card strong { margin-top: 12px; font-size: 14px; line-height: 1.3; }.category-card small { margin-top: 5px; color: var(--ugks-text-muted); font-size: 12px; }

.detail-header { height: 75px; padding: 13px 20px 15px; display: flex; align-items: center; gap: 12px; background: #fff; }
.detail-header h1 { margin: 0; font-size: 20px; font-weight: 600; }.detail-header p { margin: 0; color: var(--ugks-text-muted); font-size: 12px; }
.category-content { min-height: calc(100dvh - var(--status-height) - 75px); padding-top: 16px; }
.search-field { height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border: 1px solid #ccdaf1; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(26, 106, 170, .04); }
.search-field > img { width: 17px; height: 17px; opacity: .7; }.search-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ugks-primary); background: transparent; font-size: 14px; }.search-field input::placeholder { color: #90a4c5; }.search-clear { padding: 0 2px; border: 0; color: #90a4c5; background: transparent; font-size: 21px; line-height: 1; }
.search-field input[type="search"]::-webkit-search-decoration,
.search-field input[type="search"]::-webkit-search-cancel-button,
.search-field input[type="search"]::-webkit-search-results-button,
.search-field input[type="search"]::-webkit-search-results-decoration { display: none; -webkit-appearance: none; }
.search-field input[type="search"]::-ms-clear,
.search-field input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; }
.phrase-list { margin-top: 17px; display: grid; gap: 10px; }
.phrase-card { min-height: 74px; padding: 12px 15px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--ugks-border); border-radius: 15px; background: #fff; box-shadow: 0 1px 2px rgba(42, 86, 124, .04); }
.phrase-card__icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; }.phrase-card__icon img { width: 23px; height: 23px; }.phrase-card__copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }.phrase-card__copy strong { font-size: 14px; font-weight: 600; }.phrase-card__copy small { color: var(--ugks-text-muted); font-size: 12px; }.phrase-card__arrow { width: 8px; height: 13px; }
.empty-inline, .center-state { display: flex; align-items: center; flex-direction: column; color: var(--ugks-text-muted); text-align: center; }.empty-inline { padding-top: 80px; }.empty-inline strong, .center-state strong { color: var(--ugks-primary); font-size: 16px; }.empty-inline span, .center-state span { margin-top: 3px; font-size: 14px; }

.phrase-header { height: 54px; padding: 2px 20px 10px; display: grid; grid-template-columns: 37px 1fr 37px; align-items: center; background: #fff; }
.phrase-header > div { display: flex; align-items: center; flex-direction: column; }.phrase-header span { color: var(--ugks-text-subtle); font-size: 12px; }.phrase-header strong { font-size: 14px; }.bookmark-toggle.is-active { background: #dcecff; }.bookmark-toggle.is-active img { filter: saturate(2); }
.lesson-progress { height: 15px; padding: 0 20px; display: flex; gap: 5px; }.lesson-progress a { position: relative; flex: 1; height: 4px; border-radius: 10px; background: #e2e9f4; transition: background-color .18s ease, transform .18s ease; }.lesson-progress a::after { content: ''; position: absolute; inset: -6px 0; }.lesson-progress a:hover { transform: scaleY(1.5); }.lesson-progress a.is-completed { background: #78acd3; }.lesson-progress a.is-active { background: #2171ad; }
.lesson-body { min-height: calc(100dvh - var(--status-height) - 69px); padding: 0 20px 12px; display: flex; flex-direction: column; }
.video-frame { position: relative; height: 219px; overflow: hidden; border-radius: 21px; background: #ded8d2; }
.video-frame--real { width: min(100%, 330px); height: auto; aspect-ratio: 9 / 16; align-self: center; background: #000; }
.lesson-video { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; background: #000; }
.video-frame--real .video-play { background: transparent; }
.video-frame--real.is-playing .video-play { opacity: 0; pointer-events: none; }
.video-error { position: absolute; right: 16px; bottom: 14px; left: 16px; z-index: 3; margin: 0; padding: 10px 12px; border-radius: 10px; color: #fff; background: rgba(164, 40, 40, .92); text-align: center; font-size: 13px; }
.profile-logout { margin-top: 22px; }
.profile-logout .secondary-button { width: 100%; }
.video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #e9e2da, #c8bcb2); }.video-placeholder > img { width: 170px; height: 170px; opacity: .22; }.video-play { position: absolute; z-index: 2; inset: 0; margin: auto; width: 220px; height: 148px; padding: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 12px; border: 0; color: #fff; background: transparent; }.video-play img { box-sizing: border-box; width: 76px; height: 76px; padding: 23px 21px 23px 27px; border-radius: 50%; background: rgba(83, 68, 65, .62); box-shadow: 0 8px 24px rgba(12, 18, 28, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }.video-play span { min-width: 174px; padding: 12px 22px; border-radius: 999px; background: rgba(45, 42, 49, .76); box-shadow: 0 7px 20px rgba(12, 18, 28, .16); font-size: 16px; font-weight: 500; line-height: 1.2; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.video-message { position: absolute; inset: 0; align-items: center; flex-direction: column; justify-content: center; color: #fff; background: #2675ad; text-align: center; }.video-message strong { font-size: 16px; }.video-message span { max-width: 240px; margin-top: 4px; font-size: 12px; opacity: .8; }
.lesson-copy { margin-top: 28px; display: flex; align-items: center; flex-direction: column; }.lesson-copy h1 { margin: 0; color: #1a68a4; font-size: 29px; font-weight: 700; letter-spacing: .5px; }.lesson-copy i { width: 64px; height: 2px; margin-top: 8px; background: #087bca; }.lesson-copy p { margin-top: 11px; color: var(--ugks-text-muted); font-size: 14px; }.lesson-actions { margin-top: 32px; display: grid; gap: 12px; }

.search-header { min-height: 121px; padding: 13px 20px 16px; background: #fff; }.search-header h1 { margin: 0 0 12px; font-size: 24px; font-weight: 600; }.search-header .search-field { background: #f0f4ff; }.page-search .search-header:not(:has(h1)) { min-height: 67px; padding-top: 3px; }.search-content { min-height: calc(100dvh - var(--status-height) - 121px - var(--nav-height)); border-top: 1px solid var(--ugks-border); }.page-search .search-header:not(:has(h1)) + .search-content { min-height: calc(100dvh - var(--status-height) - 67px - var(--nav-height)); }.center-state { padding-top: 126px; }.search-results { margin-top: -3px; }
.page-heading { height: 84px; padding: 13px 20px 16px; background: #fff; }.page-heading h1 { margin: 0; font-size: 24px; font-weight: 600; }.page-heading p { margin: 0; color: var(--ugks-text-muted); font-size: 14px; }
.saved-content { min-height: calc(100dvh - var(--status-height) - 84px - var(--nav-height)); border-top: 1px solid var(--ugks-border); }.saved-content .center-state { padding-top: 108px; }.saved-content .phrase-list { margin-top: -3px; }

.profile-hero { height: 102px; padding: 13px 20px 24px; display: flex; align-items: center; gap: 16px; background: #fff; }.profile-avatar { flex: 0 0 64px; width: 64px; height: 64px; display: grid; place-items: center; overflow:hidden; border-radius: 50%; color: #fff; background: #2175b5; font-size: 23px; font-weight: 600; }.profile-avatar img{width:100%;height:100%;display:block;object-fit:cover}.profile-hero__copy { min-width:0;display:flex;flex:1;flex-direction:column; }.profile-hero strong { font-size: 20px; }.profile-hero small { color: var(--ugks-text-muted); font-size: 14px; }.profile-edit-button{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ugks-border);border-radius:12px;color:var(--ugks-primary);background:#f4f7ff}.profile-edit-button svg{width:20px;height:20px}.profile-edit-button:hover{color:#fff;background:var(--ugks-primary)}
.profile-content { min-height: calc(100dvh - var(--status-height) - 102px - var(--nav-height)); padding-top: 21px; }.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.profile-stats > div { height: 84px; display: flex; align-items: center; flex-direction: column; justify-content: center; border: 1px solid var(--ugks-border); border-radius: 15px; background: #fff; }.profile-stats strong { font-size: 23px; }.profile-stats span { color: var(--ugks-text-muted); font-size: 12px; }.overall-progress { margin-top: 21px; padding: 18px 16px; border: 1px solid var(--ugks-border); border-radius: 15px; background: #fff; }.overall-progress > div, .progress-card > div { display: flex; align-items: center; justify-content: space-between; }.overall-progress strong, .overall-progress b { font-size: 14px; }.overall-progress small { display: block; margin-top: 7px; color: var(--ugks-text-muted); font-size: 12px; }.progress-track { display: block; height: 6px; margin-top: 10px; overflow: hidden; border-radius: 10px; background: var(--ugks-track); }.progress-track i { display: block; height: 100%; border-radius: inherit; background: #2177b8; }.profile-content h1 { margin-top: 24px; margin-bottom: 13px; font-size: 16px; }.progress-list { display: grid; gap: 9px; }.progress-card { padding: 14px 16px; border: 1px solid var(--ugks-border); border-radius: 15px; background: #fff; }.progress-card > div > span { display: flex; align-items: center; gap: 9px; font-size: 14px; }.progress-card img { width: 23px; height: 23px; }.progress-card small { color: var(--ugks-text-muted); font-size: 12px; }.progress-card .progress-track { margin-top: 6px; }

.page-auth { background: var(--ugks-bg); }.auth-screen { position: relative; min-height: calc(100dvh - var(--status-height)); padding: 30px 20px; display: flex; align-items: center; flex-direction: column; justify-content: center; }.auth-screen__back { position: absolute; top: 16px; left: 20px; }.auth-screen__logo { width: 118px; height: 118px; margin-bottom: 22px; }.auth-card { width: 100%; padding: 25px 20px; border: 1px solid var(--ugks-border); border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(28, 88, 132, .09); }.auth-card h1 { margin: 0; font-size: 25px; }.auth-card > p { margin: 4px 0 21px; color: var(--ugks-text-muted); }.form-group { margin-bottom: 15px; }.form-group label { margin-bottom: 6px; color: #315b7b; font-size: 13px; font-weight: 500; }.app-input { height: 49px; border-color: var(--ugks-border); border-radius: 12px; color: #254b68; font-size: 14px; }.app-input:focus { border-color: var(--ugks-primary); box-shadow: 0 0 0 3px rgba(26, 106, 170, .12); }.password-field { position: relative; }.password-field .app-input { padding-right: 48px; }.password-toggle { position: absolute; top: 0; right: 0; width: 48px; height: 49px; border: 0; color: #7991aa; background: transparent; }.remember-field { position:relative;margin:2px 0 20px;padding:7px 9px 7px 4px;width:max-content;display:flex;align-items:center;gap:10px;border-radius:10px;color:var(--ugks-text-muted);font-size:13px;cursor:pointer;user-select:none;transition:color .15s,background-color .15s }.remember-field:hover{color:#315b7b;background:#f5f8ff}.remember-field input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.remember-check{width:22px;height:22px;display:grid;place-items:center;border:1.5px solid #b8c7d9;border-radius:7px;color:transparent;background:#fff;box-shadow:0 1px 2px rgba(33,72,105,.06);transition:border-color .15s,background-color .15s,box-shadow .15s,transform .15s}.remember-check svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.remember-field input:checked+.remember-check{border-color:#2474b2;color:#fff;background:#2474b2;box-shadow:0 4px 10px rgba(36,116,178,.22)}.remember-field input:active+.remember-check{transform:scale(.92)}.remember-field:has(input:focus-visible) .remember-check{outline:3px solid rgba(26,106,170,.2);outline-offset:2px}.auth-card__switch { margin: 18px 0 0 !important; font-size: 13px; text-align: center; }.auth-card__switch a { color: var(--ugks-primary); font-weight: 600; }.auth-screen--register { justify-content: flex-start; padding-top: 45px; }.edit-profile-content { min-height: calc(100dvh - var(--status-height) - 75px); }.edit-profile-content>form:first-of-type { padding: 22px 18px; border: 1px solid var(--ugks-border); border-radius: 16px; background: #fff; }.profile-photo-field{margin-bottom:22px;padding-bottom:20px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #e5edf7}.profile-avatar--edit{margin:0;flex-basis:76px;width:76px;height:76px}.profile-photo-field>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.profile-photo-field strong{color:#315b7b;font-size:14px}.profile-photo-field small{margin:2px 0 9px;color:var(--ugks-text-muted);font-size:11px}.profile-photo-button{padding:8px 11px;display:inline-flex;align-items:center;gap:7px;border-radius:9px;color:var(--ugks-primary);background:#eaf2ff;font-size:12px;font-weight:600;cursor:pointer}.profile-photo-button svg{width:16px;height:16px}.profile-password-heading{margin:23px 0 14px;padding-top:20px;display:flex;flex-direction:column;border-top:1px solid #e5edf7}.profile-password-heading strong{color:#315b7b;font-size:15px}.profile-password-heading small{color:var(--ugks-text-muted);font-size:12px}.profile-logout--edit{padding:0;border:0;background:transparent}.profile-logout--edit .secondary-button{color:#a63d49;border-color:#efcbd0;background:#fff}

@media (max-width: 374px) {
    .welcome-screen { padding-inline: 24px; }.welcome-screen__logo { width: 220px; height: 220px; }.category-card { padding: 14px; }.content-section { padding-inline: 16px; }.bottom-nav { padding-inline: 14px; }.video-frame--real { width: min(100%, 310px); }.lesson-copy { margin-top: 24px; }
}

@media (min-width: 431px) {
    .app-shell { border-radius: 0 0 44px 44px; box-shadow: 0 15px 45px rgba(30, 51, 74, .18); }
}

@media (prefers-reduced-motion: no-preference) {
    .category-card, .phrase-card, .app-button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
    .category-card:active, .phrase-card:active, .app-button:active { transform: scale(.985); }
}

:focus-visible { outline: 3px solid rgba(26, 106, 170, .35); outline-offset: 2px; }

/* Authentication polish */
.password-toggle { right: 2px; width: 46px; padding: 0; display: grid; place-items: center; color: #718ba3; border-radius: 10px; }
.password-toggle:hover { color: var(--ugks-primary); background: rgba(26, 106, 170, .06); }
.password-eye { width: 21px; height: 21px; display: block; }
.password-eye--hide { display: none; }
.password-toggle[aria-pressed="true"] .password-eye--show { display: none; }
.password-toggle[aria-pressed="true"] .password-eye--hide { display: block; }
.auth-screen--register { padding-top: 86px; }
.auth-screen--register .auth-screen__back { top: 24px; }
.auth-card__utility{margin:-5px 0 5px;text-align:right}.auth-card__utility a{color:var(--ugks-primary);font-size:12px;font-weight:600}.auth-card__utility a:hover{text-decoration:underline}.auth-confirmation{padding:22px 18px;border:1px solid #cfe8dc;border-radius:14px;background:#f2fbf6;text-align:center}.auth-confirmation>span{width:44px;height:44px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#2f9564;font-size:22px;font-weight:700}.auth-confirmation strong{display:block;color:#286f50;font-size:16px}.auth-confirmation p{margin:7px 0 0;color:#587466;font-size:12px;line-height:1.65}.auth-card>a.app-button{display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none}