:root {
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-primary: #E41F07;
    --color-primary-hover: #C41B06;
    --color-secondary: #FFA201;
    --color-surface: #FFFFFF;
    --color-bg: #F7F8F9;
    --color-border: #E8E8E8;
    --color-text: #1F2020;
    --color-muted: #707070;
    --color-muted-2: #9D9D9D;
    --color-success: #27AE60;
    --color-error: #EF1E1E;
    --color-info: #2F80ED;
    --color-warning: #E2B93B;
    --color-cyan: #00BCD4;
    --color-indigo: #3538CD;
    --color-pink: #DD2590;
    --color-purple: #800080;
    --color-teal: #0E9384;
    --color-wave: #0E9384;
    --color-wave-soft: #E0F2F1;
    --palette-cyan-100: #CDEFF6;
    --palette-cyan-200: #B4E7F2;
    --palette-cyan-300: #9BDFEE;
    --palette-cyan-400: #83D7EA;
    --palette-cyan-500: #6ACEE5;
    --palette-cyan-600: #51C6E1;
    --palette-cyan-700: #38BDDD;
    --palette-cyan-800: #1FB6D8;
    --palette-cyan-900: #06AED4;
    --palette-success-100: #E8F5E9;
    --palette-success-500: #4CAF50;
    --palette-success-700: #2E7D32;
    --palette-orange-100: #FEDBC6;
    --palette-orange-500: #FF9800;
    --palette-orange-700: #BD3716;
    --palette-error-100: #FCD2D2;
    --palette-error-200: #FABCBC;
    --palette-error-300: #F9A5A5;
    --palette-error-400: #F78F8F;
    --palette-error-500: #F57878;
    --palette-error-600: #F46262;
    --palette-error-700: #F24B4B;
    --palette-error-800: #F13535;
    --palette-error-900: #EF1E1E;
    --palette-grey-100: #CDCDCD;
    --palette-grey-200: #B5B5B5;
    --palette-grey-300: #9D9D9D;
    --palette-grey-400: #868787;
    --palette-grey-500: #707070;
    --palette-grey-600: #5A5B5B;
    --palette-grey-700: #454646;
    --palette-grey-800: #323333;
    --palette-grey-900: #1F2020;
    --palette-grey-950: #0E0F0F;
    --palette-indigo-100: #D7D7F5;
    --palette-indigo-200: #C2C3F0;
    --palette-indigo-300: #AEAFEB;
    --palette-indigo-400: #9A9CE6;
    --palette-indigo-500: #8688E1;
    --palette-indigo-600: #7274DC;
    --palette-indigo-700: #5D60D7;
    --palette-indigo-800: #494CD2;
    --palette-indigo-900: #3538CD;
    --color-orange: #FF9D0A;
    --color-primary-soft: #FCE9E6;
    --color-success-soft: #E9F7EF;
    --color-secondary-soft: #FFF6E6;
    --color-error-soft: #FFEEEC;
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-500: #F6F6F6;
    --radius-sm: 5px;
    --radius-md: 6px;
    --control-h: 38px;
    --shadow-default: 0 4px 4px rgba(219, 219, 219, 0.25);
    --bs-primary: #E41F07;
    --bs-primary-rgb: 228, 31, 7;
    --bs-link-color: #E41F07;
    --bs-link-hover-color: #C41B06;
    --avatar-1: #E41F07;
    --avatar-2: #FFA201;
    --avatar-3: #27AE60;
    --avatar-4: #E2B93B;
    --avatar-5: #2F80ED;
    --avatar-6: #4A00E5;
    --avatar-7: #DD2590;
    --avatar-8: #0E9384;
    --avatar-9: #800080;
    --avatar-10: #1F2020;
    --avatar-11: #FF9D0A;
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
}
.text-primary { color: var(--color-primary) !important; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

.avatar {
    --avatar-color: var(--color-primary);
    --avatar-size: 38px;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-weight: 700;
    line-height: 1;
    font-family: "Golos Text", system-ui, sans-serif;
}
.avatar--xs { --avatar-size: 16px; font-size: 8px; }
.avatar--sm { --avatar-size: 28px; font-size: 12px; }
.avatar--md { --avatar-size: 38px; font-size: 15px; }
.avatar--lg { --avatar-size: 64px; font-size: 24px; }
.avatar--xl { --avatar-size: 88px; font-size: 32px; }
.avatar--2xl { --avatar-size: 120px; font-size: 42px; }
.avatar--solid {
    background: var(--avatar-color);
    color: var(--color-white);
}
.avatar--soft {
    background: color-mix(in srgb, var(--avatar-color) 14%, white);
    color: var(--avatar-color);
}
.avatar-wrap {
    position: relative;
    display: inline-flex;
}
.avatar-status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success);
    border: 2px solid var(--color-white);
}
.avatar-quality {
    position: absolute;
    right: -10px;
    bottom: -8px;
    min-width: 22px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--palette-cyan-500);
    color: #fff;
    border: 2px solid var(--color-white);
    font-size: 9px;
    line-height: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.avatar-quality--high { background: var(--palette-success-500); }
.avatar-quality--ok { background: var(--palette-cyan-500); }
.avatar-quality--mid { background: var(--palette-orange-500); }
.avatar-quality--low { background: var(--palette-error-500); }
.hint-banner--engage {
    top: 64px;
    right: 22px;
    width: min(420px, calc(100vw - 32px));
    border: 2px solid #00A6DA;
    background: linear-gradient(180deg, #E8FBFF 0%, #ffffff 42%, #FFF4F1 100%);
    box-shadow: 0 20px 48px rgba(0, 166, 218, 0.28), 0 0 0 8px rgba(228, 31, 7, 0.08);
    overflow: visible;
    animation: hintEngagePop 0.5s cubic-bezier(.18,1.4,.32,1);
}
.hint-banner--engage .hint-guide-photo {
    width: 72px;
    height: 72px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #00A6DA;
}
.hint-banner--engage .hint-guide {
    width: 72px;
    height: 72px;
}
.hint-banner--engage .hint-guide-badge {
    background: #E41F07;
    color: #fff;
    width: 26px;
    height: 26px;
}
.hint-banner--engage .hint-kicker {
    background: #E41F07;
    color: #fff;
}
.hint-banner--engage .hint-title {
    font-size: 20px;
}
.hint-banner--engage .hint-actions {
    justify-content: flex-end;
}
.hint-banner--engage .hint-next {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    background: #E41F07;
}
.hint-banner--engage .hint-next:hover { background: #C41B06; }
.hint-banner--engage .hint-fireworks {
    inset: -36px -28px -28px -28px;
    height: auto;
}
.hint-banner--engage .hint-fireworks i {
    width: 8px;
    height: 8px;
    animation-duration: 1.05s;
}
.hint-banner--engage .hint-fireworks i:nth-child(7) { left: 8%; top: auto; bottom: 18%; background: #E41F07; animation-delay: 0.05s; }
.hint-banner--engage .hint-fireworks i:nth-child(8) { left: 36%; top: auto; bottom: 10%; background: #00A6DA; animation-delay: 0.18s; }
.hint-banner--engage .hint-fireworks i:nth-child(9) { left: 62%; top: auto; bottom: 16%; background: #FFA201; animation-delay: 0.28s; }
.hint-banner--engage .hint-fireworks i:nth-child(10) { left: 86%; top: auto; bottom: 12%; background: #DD2590; animation-delay: 0.1s; }
.hint-banner--engage .hint-fireworks i:nth-child(11) { left: 50%; top: 8%; background: #3538CD; animation-delay: 0.22s; }
.hint-banner--engage .hint-fireworks i:nth-child(12) { left: 70%; top: 0; background: #27AE60; animation-delay: 0.34s; }
@keyframes hintEngagePop {
    0% { transform: translateY(16px) scale(0.92); opacity: 0; }
    60% { transform: translateY(-4px) scale(1.03); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
body.engage-hint-on .hint-dim {
    background: rgba(16, 24, 40, 0.32);
}
body.engage-hint-on #headerTips {
    z-index: 2215;
    position: relative;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-primary);
    border-radius: 10px;
}
body.quality-hint-on #navAvatarLink {
    z-index: 2215;
    position: relative;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--palette-cyan-500);
    border-radius: 10px;
}
.crm-quality-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-shadow: 0 4px 4px rgba(219, 219, 219, 0.25);
}
.crm-quality-score {
    display: block;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--palette-cyan-900);
}
.crm-quality-card--high .crm-quality-score { color: var(--palette-success-700); }
.crm-quality-card--ok .crm-quality-score { color: var(--palette-cyan-900); }
.crm-quality-card--mid .crm-quality-score { color: var(--palette-orange-700); }
.crm-quality-card--low .crm-quality-score { color: var(--palette-error-700); }
.crm-quality-card small {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 500;
}
.crm-quality-card p {
    margin: 10px 0 0;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
}
.crm-quality-advice {
    font-weight: 500 !important;
    color: var(--palette-grey-600) !important;
    max-width: 52rem;
}
.crm-quality-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.crm-quality-stars {
    display: flex;
    align-items: center;
    gap: 4px;
}
.crm-star {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--palette-cyan-900);
}
.crm-star-svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: #E8E8E8;
}
.crm-star-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fill, 0%);
    height: 28px;
    overflow: hidden;
}
.crm-star-fill .crm-star-svg { fill: currentColor; }
.crm-quality-card--high .crm-star { color: var(--palette-success-500); }
.crm-quality-card--ok .crm-star { color: var(--palette-cyan-900); }
.crm-quality-card--mid .crm-star { color: var(--palette-orange-500); }
.crm-quality-card--low .crm-star { color: var(--palette-error-500); }
.today-lessons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}
.today-lesson-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}
.today-lesson-row .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 40px;
    background: #E4EDF5;
}
.today-lesson-row .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.today-lesson-name {
    flex: 0 1 200px;
    min-width: 88px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.today-lesson-clefs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--palette-cyan-900);
}
.lesson-clef {
    display: block;
    width: 16px;
    height: 28px;
}
.avatar--sq { border-radius: var(--radius-sm); }

.app-shell {
    --sidebar-w: 256px;
    min-height: 100vh;
}
.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--color-white);
    border-right: 1px solid var(--color-border);
    padding: 20px 18px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
}
.app-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.app-brand {
    color: var(--color-text) !important;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.app-brand:hover { color: var(--color-primary) !important; }
.app-collapse {
    width: 28px;
    height: 28px;
    border: 0;
    background: var(--color-white);
    border-radius: 50%;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.app-collapse:hover { background: var(--gray-100); }
.side-nav { display: flex; flex-direction: column; gap: 16px; }
.side-nav-section { display: flex; flex-direction: column; gap: 12px; }
.side-nav-title {
    margin: 0;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 19.5px;
    color: var(--color-muted);
    letter-spacing: 0.04em;
}
.side-nav-list { display: flex; flex-direction: column; gap: 5px; }
.side-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--color-text) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    border: 1px solid transparent;
}
.side-nav-item:hover {
    background: #F4F5F6;
    color: var(--color-text) !important;
}
.side-nav-item.active {
    background: #FDECEA;
    border-color: #F7C1B8;
    color: var(--color-primary) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.side-nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #F6F6F6;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.side-nav-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    display: block;
}
.side-nav-item.active .side-nav-icon {
    background: var(--color-primary);
    color: var(--color-white);
}
.side-nav-icon--img img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
}
.side-nav-item.active .side-nav-icon--img img {
    filter: invert(1);
}
.side-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: 62px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-header-search {
    width: min(303px, 100%);
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    box-shadow: var(--shadow-default);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
}
.app-header-search input {
    border: 0;
    outline: none;
    width: 100%;
    font-size: 14px;
    line-height: 21px;
    color: var(--color-text);
    background: transparent;
}
.app-header-search input::placeholder { color: var(--color-muted-2); }
.app-header-search i { color: var(--color-muted-2); font-size: 14px; }
.app-icon-btn img {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}
.app-icon-btn i,
.app-icon-btn .avatar-wrap,
.app-icon-btn .app-icon-badge,
.app-icon-btn .ios-cal-icon {
    pointer-events: none;
}
.ios-cal-icon {
    width: 22px;
    height: 24px;
    border-radius: 5px;
    border: 1.5px solid #D0D0D0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.ios-cal-icon__bar {
    height: 6px;
    background: var(--color-primary);
    flex-shrink: 0;
}
.ios-cal-icon__day {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.side-nav-icon .ios-cal-icon {
    width: 18px;
    height: 20px;
    border-color: #CFCFCF;
}
.side-nav-icon .ios-cal-icon__bar { height: 5px; }
.side-nav-icon .ios-cal-icon__day { font-size: 9px; }
.side-nav-item.active .ios-cal-icon {
    border-color: #fff;
    background: #fff;
}
.side-nav-item.active .ios-cal-icon__day { color: var(--color-text); }
.app-icon-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 80;
    box-shadow: 0 6px 16px rgba(17, 24, 39, .18);
}
.app-icon-btn[data-tip]:hover::after,
.app-icon-btn[data-tip]:focus-visible::after {
    opacity: 1;
}
.app-header-actions .app-icon-btn:nth-last-child(-n+2)[data-tip]::after {
    left: auto;
    right: 0;
    transform: none;
}
.app-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-header-split {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 2px;
}
.app-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    box-shadow: var(--shadow-default);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.app-icon-btn:hover { color: var(--color-primary); background: var(--gray-50); }
.app-icon-btn--teal {
    background: var(--color-success-soft);
    border-color: transparent;
    color: var(--color-teal);
}
.app-icon-btn--teal:hover { background: #cfe9e6; color: var(--color-teal); }
.app-icon-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    border-radius: 60px;
    background: var(--color-primary);
    color: #fff;
    border: 1px solid #fff;
    font-size: 8px;
    line-height: 10px;
    font-weight: 600;
    display: none;
}
.app-header-avatar {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.app-header-avatar:hover { background: transparent; }
.app-content {
    flex: 1;
    padding: 8px 8px 28px;
}
.app-content .container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 32px;
}
.app-footer {
    margin-top: auto;
    padding: 14px 32px 18px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 18px;
    border-top: 1px solid var(--color-border);
    background: transparent;
}
.app-footer-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-muted-2);
}
.app-footer-rev { color: var(--color-text); font-weight: 600; }
.app-footer-info {
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    box-shadow: var(--shadow-default);
}
.app-footer-info:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.hint-banner--update { top: auto; bottom: 56px; left: calc(var(--sidebar-w, 256px) + 28px); }
.hint-banner--board { top: 268px; left: calc(var(--sidebar-w, 256px) + 20px); }
.hint-banner--party { overflow: visible; }
.hint-fireworks {
    position: absolute;
    inset: -22px -16px auto -16px;
    height: 56px;
    pointer-events: none;
}
.hint-fireworks i {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: hintFirework 1.15s ease-out infinite;
}
.hint-fireworks i:nth-child(1) { left: 12%; background: #E41F07; animation-delay: 0s; }
.hint-fireworks i:nth-child(2) { left: 28%; background: #FFA201; animation-delay: 0.12s; }
.hint-fireworks i:nth-child(3) { left: 44%; background: #06AED4; animation-delay: 0.24s; }
.hint-fireworks i:nth-child(4) { left: 58%; background: #3538CD; animation-delay: 0.08s; }
.hint-fireworks i:nth-child(5) { left: 74%; background: #DD2590; animation-delay: 0.2s; }
.hint-fireworks i:nth-child(6) { left: 88%; background: #FF9D0A; animation-delay: 0.32s; }
@keyframes hintFirework {
    0% { transform: translateY(18px) scale(0.4); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translateY(-18px) scale(1.15); opacity: 0; }
}
body.update-hint-on #aboutSystemBtn {
    z-index: 2215;
    position: relative;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.about-modal {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.about-modal[hidden] { display: none !important; }
.about-modal-dim {
    position: absolute;
    inset: 0;
    background: rgba(31, 32, 32, 0.28);
}
.about-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 32px));
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(31, 32, 32, 0.16);
    padding: 22px 22px 18px;
}
.about-modal-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text);
}
.about-modal-meta {
    margin: 0 0 12px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
}
.about-modal-card p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text);
}
.about-modal-label {
    margin-top: 12px !important;
    font-weight: 700;
}
.about-modal-list {
    margin: 0 0 16px;
    padding-left: 18px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
}
.about-modal-list li + li { margin-top: 4px; }
.about-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.hint-layer {
    position: fixed;
    inset: 0;
    z-index: 2200;
    pointer-events: none;
}
.hint-dim {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    background: rgba(247, 248, 249, 0.42);
}
.hint-banner {
    --hint-tone: var(--color-primary-soft);
    --hint-accent: var(--color-primary);
    display: none;
    position: fixed;
    width: min(340px, calc(100vw - 32px));
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px 16px 14px;
    box-shadow: 0 12px 32px rgba(31, 32, 32, 0.08);
    z-index: 2210;
    pointer-events: auto;
    animation: hintPop 0.18s ease-out;
}
.hint-banner.is-on { display: block; }
.hint-banner--primary { --hint-tone: var(--color-primary-soft); --hint-accent: var(--color-primary); }
.hint-banner--info { --hint-tone: #E8F3FD; --hint-accent: var(--color-info); }
.hint-banner--teal { --hint-tone: #E0F2F1; --hint-accent: var(--color-teal); }
.hint-banner--warn { --hint-tone: var(--color-secondary-soft); --hint-accent: var(--color-secondary); }
.hint-banner--wave { --hint-tone: var(--color-wave-soft); --hint-accent: var(--color-wave); }
.hint-banner--cyan { --hint-tone: var(--palette-cyan-100); --hint-accent: #00A6DA; }
.hint-banner--update .hint-next {
    background: #00A6DA;
}
.hint-banner--update .hint-next:hover {
    background: #0093c2;
}
.hint-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.hint-guide {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.hint-guide-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--hint-tone);
    background: var(--hint-tone);
}
.hint-guide-badge {
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hint-tone);
    color: var(--hint-accent);
    border: 2px solid var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.hint-copy { min-width: 0; padding-top: 2px; }
.hint-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--hint-tone);
    color: var(--hint-accent);
}
.hint-banner p {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-text);
}
.hint-title {
    display: block;
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text);
}
.hint-close--strong {
    font-weight: 800;
    color: var(--color-text);
    border-color: #c9c9c9;
}
.hint-banner--intro { top: 88px; left: calc(var(--sidebar-w, 256px) + 28px); }
.hint-banner--header { top: 78px; right: 28px; }
.hint-banner--sidebar { top: 220px; left: calc(var(--sidebar-w, 256px) + 20px); }
.hint-banner--debt { top: 268px; left: calc(var(--sidebar-w, 256px) + 20px); }
.hint-banner--unclosed { top: 78px; right: 28px; }
.hint-banner--quality { top: 78px; right: 72px; }
.hint-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}
.hint-arrow--up {
    top: -7px;
    right: 48px;
    transform: rotate(45deg);
}
.hint-arrow--left {
    left: -7px;
    top: 28px;
    transform: rotate(-45deg);
}
.hint-arrow--down {
    top: auto;
    bottom: -7px;
    left: 22px;
    right: auto;
    transform: rotate(225deg);
}
.hint-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
}
.hint-next,
.hint-close,
.hint-ok {
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.hint-next {
    border: 0;
    background: var(--color-primary);
    color: var(--color-white);
}
.hint-next:hover { background: var(--color-primary-hover); }
.hint-close,
.hint-ok {
    background: var(--color-white);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}
.hint-close:hover,
.hint-ok:hover { color: var(--color-text); background: var(--gray-50); }
.hint-link {
    margin-right: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.hint-link:hover { color: var(--color-primary-hover); }
@keyframes hintPop {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
body.shell-tour-step-header #appHeader,
body.shell-tour-step-sidebar #appSidebar,
body.debt-hint-on #navDebts,
body.debt-hint-on #dashDebtMetric,
body.unclosed-hint-on #notificationsLink {
    z-index: 2215;
    position: relative;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--hint-accent, var(--color-secondary));
    border-radius: 10px;
}
body.shell-tour-step-header #appHeader {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-info);
}
body.shell-tour-step-sidebar #appSidebar {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-teal);
}
body.debt-hint-on #navDebts,
body.debt-hint-on #dashDebtMetric {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-secondary);
}
body.unclosed-hint-on #notificationsLink {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-wave);
}
body.board-hint-on #navBoard {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-teal);
}
@media (max-width: 991.98px) {
    .hint-banner--intro,
    .hint-banner--sidebar,
    .hint-banner--debt,
    .hint-banner--unclosed,
    .hint-banner--quality,
    .hint-banner--update,
    .hint-banner--board,
    .hint-banner--engage,
    .hint-banner--header { left: 12px; right: 12px; width: auto; }
    .hint-layer.hint-mobile-dock .hint-banner {
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        bottom: max(88px, calc(24px + env(safe-area-inset-bottom, 0px)));
        width: auto;
        max-width: none;
    }
    .hint-layer.hint-mobile-dock .hint-arrow { display: none; }
    .hint-banner--header { top: 72px; right: 12px; left: auto; }
    .app-footer { padding-left: 16px; padding-right: 16px; }
}

.app-shell.sidebar-collapsed { --sidebar-w: 76px; }
.app-shell.sidebar-collapsed .side-nav-title,
.app-shell.sidebar-collapsed .side-nav-label,
.app-shell.sidebar-collapsed .app-brand-text { display: none; }
.app-shell.sidebar-collapsed .app-sidebar { align-items: center; padding: 16px 8px; }
.app-shell.sidebar-collapsed .side-nav-item { justify-content: center; }
.app-shell.sidebar-collapsed .app-brand { justify-content: center; }

@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .app-header-search { width: min(180px, 42vw); }
}

.clients-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 6px 12px;
    margin-bottom: 16px;
}
.clients-tab {
    border: 0;
    background: transparent;
    color: var(--color-text);
    padding: 12px 10px 10px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
}
.clients-tab.is-on {
    color: var(--color-wave);
    border-bottom-color: var(--color-wave);
    font-weight: 500;
}
.clients-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
.dash-table-search {
    flex: 1;
    min-width: 220px;
    max-width: 320px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-default);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}
.dash-table-search input {
    border: 0;
    outline: none;
    width: 100%;
    font-size: 14px;
    background: transparent;
}
.dash-table-search i { color: var(--color-muted-2); }
.clients-toolbar .dash-table-search { max-width: 280px; }
.clients-toolbar select,
.clients-view-toggle {
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-default);
    font-size: 14px;
}
.clients-toolbar select { padding: 0 10px; }
.clients-view-toggle { display: inline-flex; overflow: hidden; padding: 0; }
.clients-view-toggle button {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}
.clients-view-toggle button.is-on {
    background: var(--color-wave-soft);
    color: var(--color-wave);
}
.btn-wave {
    background: var(--color-wave);
    border-color: var(--color-wave);
    color: #fff;
}
.btn-wave:hover { background: #0b7c70; color: #fff; }
.clients-toolbar-actions { margin-left: auto; display: flex; gap: 8px; }
.clients-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: -4px 0 16px;
}
.clients-filters-label {
    font-size: 13px;
    color: var(--color-muted);
    font-weight: 400;
}
.clients-vis { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.clients-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}
.clients-chip:has(input:checked),
.clients-chip.is-on {
    background: var(--color-wave-soft);
    border-color: #bfe3df;
    color: var(--color-wave);
}
.clients-chip input { accent-color: var(--color-wave); margin: 0; }
.clients-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-muted);
}
.clients-date input[type="date"] {
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-default);
    padding: 0 8px;
    font-size: 13px;
    font-weight: 400;
}
.clients-filters select {
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-default);
    font-size: 13px;
    font-weight: 400;
    padding: 0 10px;
}
.student-row--inactive {
    opacity: 0.58;
    filter: grayscale(0.55);
    background: #f3f4f6;
}
.clients-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.client-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-default);
    cursor: pointer;
}
.client-card--inactive { opacity: 0.58; filter: grayscale(0.55); }
.client-card-top {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.client-card-rating {
    margin-top: 4px;
    color: var(--color-secondary);
    font-size: 13px;
    font-weight: 500;
}
.client-card-meta {
    color: var(--color-muted);
    font-size: 13px;
}
.client-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.client-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
}
.client-tag--group { background: #E9F7EF; color: #27AE60; }
.client-tag--individual { background: #FFF6E6; color: #9A5B00; }
.client-tag--course { background: #E0F2F1; color: #0E9384; }
.client-card-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-muted);
}
.status-wave { background: var(--color-wave-soft); color: var(--color-wave); }

.group-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: var(--shadow-default);
    overflow: hidden;
    height: 100%;
}
.group-card-head {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: #fff;
    padding: 16px;
    cursor: pointer;
}
.group-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
}
.group-card-chevron {
    margin-left: auto;
    color: var(--color-muted);
    transition: transform 0.2s ease;
}
.group-card.is-open .group-card-chevron { transform: rotate(180deg); }
.g-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
}
.g-badge-group { background: var(--palette-cyan-500); color: #fff; }
.g-badge-individual { background: var(--palette-indigo-500); color: #fff; }
.g-badge-course { background: var(--palette-indigo-100); color: var(--palette-indigo-900); }
.g-badge-mixed { background: var(--palette-grey-100); color: var(--palette-grey-700); }
.g-badge-active { background: var(--palette-cyan-900); color: #fff; }
.g-badge-expired { background: var(--palette-grey-100); color: var(--palette-grey-700); }
.g-badge-archive { background: var(--palette-grey-200); color: var(--palette-grey-700); }
.group-card-ident {
    background: #F7F8F9;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}
.group-card-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
}
.group-card-sub {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-muted);
}
.group-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-muted);
    margin-bottom: 12px;
}
.avatar-stack {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin-top: 4px;
}
.avatar-stack .avatar,
.avatar-stack-more {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;
    box-sizing: content-box;
    flex-shrink: 0;
}
.avatar-stack .avatar {
    display: inline-flex;
    overflow: hidden;
    background: #E4EDF5;
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.avatar-stack-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EEF2F5;
    color: var(--palette-grey-700);
    font-size: 12px;
    font-weight: 700;
}
.avatar-stack--lg .avatar,
.avatar-stack--lg .avatar-stack-more {
    width: 40px;
    height: 40px;
}
.group-card-body {
    display: none;
    padding: 0 16px 16px;
    border-top: 1px solid var(--color-border);
}
.group-card.is-open .group-card-body { display: block; padding-top: 12px; }
.member-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F7F8F9;
    padding: 8px 10px;
    margin: 6px 0;
    border-radius: 8px;
    font-weight: 400;
}
.member-item .client-name { flex: 1; font-weight: 400; }
.group-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.gbtn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gbtn-edit { background: var(--palette-cyan-700); }
.gbtn-add { background: var(--palette-indigo-500); }
.gbtn-archive { background: var(--palette-grey-400); color: #fff; }
.gbtn-restore { background: var(--palette-cyan-100); color: var(--palette-cyan-900); }
.gbtn-delete, .gbtn-remove { background: var(--palette-error-500); }
.gbtn-remove { width: 28px; height: 28px; border-radius: 6px; font-size: 12px; }
.type-tab-btn.active {
    background: var(--palette-cyan-500) !important;
    color: #fff !important;
    border-color: var(--palette-cyan-500) !important;
    box-shadow: 0 4px 10px rgba(6, 174, 212, 0.25) !important;
}

.calendar-page {
    padding: 8px 16px 28px;
}
.calendar-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.calendar-page-head h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text);
}
.calendar-page-head p {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 600;
}
.calendar-board {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px 16px 16px;
    box-shadow: 0 4px 4px rgba(219, 219, 219, 0.25);
    min-height: 620px;
}
.calendar-board--move .fc-event {
    cursor: grab;
}
.calendar-board--move .fc-event:active {
    cursor: grabbing;
}
.calendar-page .fc {
    font-family: "Golos Text", system-ui, sans-serif;
}
.calendar-page .fc a,
.calendar-page .fc .fc-col-header-cell-cushion,
.calendar-page .fc .fc-daygrid-day-number,
.calendar-page .fc .fc-list-day-text,
.calendar-page .fc .fc-list-day-side-text {
    color: var(--color-text);
    text-decoration: none;
}
.calendar-page .fc a:hover,
.calendar-page .fc .fc-daygrid-day-number:hover {
    color: var(--palette-indigo-900);
    text-decoration: none;
}
.calendar-page .fc .fc-toolbar-title {
    color: var(--color-text);
    font-weight: 600;
}
.calendar-page .fc .fc-col-header-cell-cushion {
    color: var(--palette-grey-600);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.calendar-page .fc .fc-daygrid-day-number {
    color: var(--palette-grey-800);
    font-weight: 600;
}
.calendar-page .fc .fc-day-today,
.calendar-page .fc .fc-timegrid-col.fc-day-today,
.calendar-page .fc .fc-daygrid-day.fc-day-today {
    background: #F7F8F9 !important;
}
.calendar-page .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number,
.calendar-page .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number:hover {
    background: transparent;
    color: var(--color-text) !important;
    font-weight: 800;
}
.calendar-page .fc .fc-event,
.calendar-page .fc .fc-event-title,
.calendar-page .fc .fc-list-event-title,
.calendar-page .fc .fc-daygrid-event,
.calendar-page .fc .fc-daygrid-dot-event .fc-event-title {
    color: var(--palette-grey-800);
    font-weight: 500;
}
.calendar-page .fc .fc-timegrid-event,
.calendar-page .fc .fc-timegrid-event .fc-event-main,
.calendar-page .fc .fc-timegrid-event .fc-event-title,
.calendar-page .fc .fc-timegrid-event .fc-event-time,
.calendar-page .fc .fc-v-event,
.calendar-page .fc .fc-v-event .fc-event-main,
.calendar-page .fc .fc-v-event .fc-event-title,
.calendar-page .fc .fc-v-event .fc-event-time {
    color: #fff !important;
    font-weight: 500;
}
.calendar-page .fc .fc-daygrid-event,
.calendar-page .fc .fc-daygrid-event a,
.calendar-page .fc .fc-daygrid-event .fc-event-title,
.calendar-page .fc .fc-daygrid-dot-event,
.calendar-page .fc .fc-daygrid-dot-event .fc-event-title,
.calendar-page .fc .fc-daygrid-event.fc-event-live,
.calendar-page .fc .fc-daygrid-event.fc-event-live a,
.calendar-page .fc .fc-daygrid-event.fc-event-live .fc-event-title {
    color: var(--color-text) !important;
    font-weight: 500;
}
.calendar-page .fc .fc-button {
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-transform: none;
    font-weight: 700;
    box-shadow: none;
}
.calendar-page .fc .fc-button:hover {
    background: var(--gray-50, #f7f8f9);
    color: var(--palette-indigo-900);
}
.calendar-page .fc .fc-button-primary:not(:disabled).fc-button-active,
.calendar-page .fc .fc-button-primary:not(:disabled):active {
    background: var(--palette-indigo-500);
    border-color: var(--palette-indigo-500);
    color: #fff;
}
.calendar-upcoming {
    margin-top: 20px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 18px 18px;
    box-shadow: 0 4px 4px rgba(219, 219, 219, 0.25);
}
.calendar-upcoming-head h5 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
}
.calendar-upcoming-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    max-height: none;
}
.calendar-upcoming-list .event-card {
    cursor: pointer;
    border: 1px solid var(--color-border);
    margin-bottom: 0 !important;
}
.calendar-upcoming-list .event-card h6 {
    color: var(--color-text);
    font-weight: 600;
}
.badge-cal-live {
    background: var(--color-error);
    color: #fff;
}
.badge-cal-planned {
    background: var(--palette-indigo-500);
    color: #fff;
}
.badge-cal-go {
    background: var(--palette-success-500);
    color: #fff;
}
.badge-cal-done {
    background: var(--palette-grey-500);
    color: #fff;
}

.tips-page { padding: 8px 0 48px; }
.tips-lead {
    color: var(--color-muted);
    margin: 0 0 22px;
    max-width: 640px;
}
.tips-grid {
    display: grid;
    gap: 14px;
}
.tips-story {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px 18px 14px;
    box-shadow: 0 10px 28px rgba(31, 32, 32, 0.06);
}
.tips-story--cyan { background: linear-gradient(180deg, #EBF8FC 0%, #fff 42%); }
.tips-story--teal { background: linear-gradient(180deg, #E8F6F4 0%, #fff 42%); }
.tips-story--warn { background: linear-gradient(180deg, #FFF4EC 0%, #fff 42%); }
.tips-story--wave { background: linear-gradient(180deg, #FDECEC 0%, #fff 42%); }
.tips-story--quality { background: linear-gradient(180deg, #F7F8F9 0%, #fff 48%); }
.tips-story__top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.tips-story__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--color-primary-soft);
    overflow: hidden;
    color: var(--color-primary);
}
.tips-story--cyan .tips-story__avatar { box-shadow: 0 0 0 2px var(--palette-cyan-100); color: #00A6DA; }
.tips-story--teal .tips-story__avatar { box-shadow: 0 0 0 2px var(--color-wave-soft); color: var(--color-teal); }
.tips-story--warn .tips-story__avatar { box-shadow: 0 0 0 2px var(--color-secondary-soft); color: #BD3716; }
.tips-story__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tips-story__avatar svg { width: 22px; height: 22px; }
.tips-story__copy { min-width: 0; flex: 1; }
.tips-story__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.tips-story--cyan .tips-story__badge { background: var(--palette-cyan-100); color: #007C9C; }
.tips-story--teal .tips-story__badge { background: var(--color-wave-soft); color: var(--color-teal); }
.tips-story--warn .tips-story__badge { background: var(--color-secondary-soft); color: #BD3716; }
.tips-story h2 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.3;
}
.tips-story p {
    margin: 0 0 8px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}
.tips-story p:last-child { margin-bottom: 0; }
.tips-story__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.tips-story__cta {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-primary);
    text-decoration: none;
}
.tips-story__cta:hover { color: var(--color-primary-hover); }
.tips-story ul { margin: 0; padding-left: 18px; }
.tips-story li { margin-bottom: 4px; }