:root {
            --bg: #ffffff; 
            --text: #000000; 
            --secondary: #f4f4f5;
            --white: #ffffff;
            --border: #e4e4e7; 
            --primary: #3390ec; 
            --primary-dark: #1e40af;
            --danger: #ef4444; 
            --success: #22c55e; 
            --saved: #f59e0b;
            --panel-alpha: 1;
            --ui-panel-bg: var(--secondary);
            --ui-control-bg: var(--bg);
            --ui-nav-bg: var(--bg);
            --ui-modal-bg: var(--bg);
            --ui-primary-bg: var(--primary);
            --ui-success-bg: var(--success);
            --ui-danger-bg: rgba(239, 68, 68, 0.18);
            --ui-saved-bg: var(--saved);
            --ui-blur: 0px;
            --ui-saturation: 100%;
            --ui-shadow: 0 12px 34px rgba(0,0,0,0.1);
            --ui-ambient-opacity: 0;
            --sidebar-w: 320px;
            --sidebar-nav-w: 80px;
            --sidebar-panel-w: calc(var(--sidebar-w) - var(--sidebar-nav-w));
            --sidebar-nav-item-size: 56px;
            --sidebar-header-h: 60px;
            --sidebar-content-pad: 10px;
        }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; user-select: none; }
        body { font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 0; transition: background 0.3s, color 0.3s; }
        body.ui-glass { background: var(--bg); }
        body.ui-glass::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background:
                linear-gradient(135deg, rgba(51, 144, 236, 0.16), transparent 34%),
                linear-gradient(225deg, rgba(34, 197, 94, 0.12), transparent 32%),
                repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 18px),
                var(--bg);
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, transparent), transparent 34%),
                linear-gradient(225deg, color-mix(in srgb, var(--success) 16%, transparent), transparent 32%),
                repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 18px),
                var(--bg);
            opacity: var(--ui-ambient-opacity);
        }

        body.ui-glass .nav-header,
        body.ui-glass .sidebar,
        body.ui-glass .sidebar-nav,
        body.ui-glass .sidebar-panel,
        body.ui-glass .sp-header,
        body.ui-glass .btn-home-side,
        body.ui-glass .modern-icon-btn,
        body.ui-glass .sb-subject-btn,
        body.ui-glass .goal-folder-btn,
        body.ui-glass .goal-section-btn,
        body.ui-glass .goal-card,
        body.ui-glass .goal-empty,
        body.ui-glass .list-row,
        body.ui-glass .input-field,
        body.ui-glass .textarea-field,
        body.ui-glass .latex-preview-panel,
        body.ui-glass .latex-preview,
        body.ui-glass .btn-settings-link,
        body.ui-glass .stat-box,
        body.ui-glass .q-card,
        body.ui-glass .opt-btn,
        body.ui-glass .quiz-status-card,
        body.ui-glass .quiz-status-grid div,
        body.ui-glass .quiz-feedback,
        body.ui-glass .list-mode-summary,
        body.ui-glass .settings-profile-card,
        body.ui-glass .settings-color-panel,
        body.ui-glass .modal,
        body.ui-glass .ctx-action-btn,
        body.ui-glass .goal-fab-menu button,
        body.ui-glass .day-module .stat-card,
        body.ui-glass .day-module .panel,
        body.ui-glass .day-module .message,
        body.ui-glass .day-module .item-card,
        body.ui-glass .day-module .list-card,
        body.ui-glass .day-module .meta-chip,
        body.ui-glass .day-module .type-badge,
        body.ui-glass .day-module .badge,
        body.ui-glass .sport-summary,
        body.ui-glass .sport-dashboard-card,
        body.ui-glass .sport-category-head,
        body.ui-glass .sport-exercise-card,
        body.ui-glass .sport-empty-state,
        body.ui-glass .sport-action-menu > div,
        body.ui-glass .sport-stats-grid div,
        body.ui-glass .sport-desc,
        body.ui-glass .coding-hero,
        body.ui-glass .coding-topic-card,
        body.ui-glass .coding-detail-card,
        body.ui-glass .coding-empty-state,
        body.ui-glass .ls-card,
        body.ui-glass .rus-task-row,
        body.ui-glass .rus-hist-card,
        body.ui-glass .rus-modal,
        body.ui-glass .rus-inp,
        body.ui-glass .grammar-item,
        body.ui-glass .cl-exercise-card,
        body.ui-glass .cl-list-item,
        body.ui-glass .cl-history,
        body.ui-glass .archive-tab,
        body.ui-glass .archive-card,
        body.ui-glass .archive-rule-card,
        body.ui-glass .archive-edit-card,
        body.ui-glass .archive-edit-label input,
        body.ui-glass .archive-edit-label textarea,
        body.ui-glass .kh-time-row,
        body.ui-glass .kh-day-card,
        body.ui-glass .kh-full-item,
        body.ui-glass .kh-timetable-wrapper,
        body.ui-glass .kh-cell,
        body.ui-glass .kh-header-cell,
        body.ui-glass .kh-time-col {
            background: var(--ui-panel-bg);
            backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation));
            -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation));
            border-color: var(--border);
            box-shadow: var(--ui-shadow);
        }

        body.ui-glass .nav-header,
        body.ui-glass .sidebar,
        body.ui-glass .sidebar-panel {
            background: var(--ui-nav-bg);
        }

        body.ui-glass .modal {
            background: var(--ui-modal-bg);
        }

        body.ui-glass .input-field,
        body.ui-glass .textarea-field,
        body.ui-glass .opt-btn,
        body.ui-glass .day-module input,
        body.ui-glass .day-module textarea,
        body.ui-glass .day-module select,
        body.ui-glass .sport-small-btn,
        body.ui-glass .sport-icon-btn,
        body.ui-glass .sport-sync-line,
        body.ui-glass .sport-chip,
        body.ui-glass .sport-side-icon,
        body.ui-glass .coding-stat,
        body.ui-glass .goal-check,
        body.ui-glass .goal-folder-btn em,
        body.ui-glass .goal-section-btn em,
        body.ui-glass .eng-inp,
        body.ui-glass .st-textarea,
        body.ui-glass .ls-input,
        body.ui-glass .ls-reset-btn,
        body.ui-glass #cl-add-text {
            background: var(--ui-control-bg);
            backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation));
            -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation));
        }

        body.ui-glass .modal-wrap {
            backdrop-filter: blur(calc(var(--ui-blur) + 2px));
            -webkit-backdrop-filter: blur(calc(var(--ui-blur) + 2px));
        }

        body.ui-glass :is(
            .nav-header,
            .sidebar,
            .sidebar-nav,
            .sidebar-panel,
            .sp-header,
            .sp-content,
            .ext-section,
            .form-container,
            .profile-section,
            .quiz-container,
            .list-view,
            .main-content,
            .topbar,
            .app-shell,
            .quiz-status-card,
            .list-mode-summary,
            .list-row,
            .goal-card,
            .goal-empty,
            .dash-card,
            .stat-box,
            .q-card,
            .settings-card,
            .settings-profile-card,
            .settings-color-panel,
            .latex-preview-panel,
            .latex-preview,
            .modal,
            .archive-card,
            .archive-rule-card,
            .archive-edit-card,
            .ls-card,
            .rus-task-row,
            .rus-hist-card,
            .rus-modal,
            .grammar-item,
            .cl-exercise-card,
            .cl-list-item,
            .cl-history,
            .kh-time-row,
            .kh-day-card,
            .kh-full-item,
            .kh-timetable-wrapper,
            .kh-cell,
            .kh-header-cell,
            .kh-time-col,
            .day-module .stat-card,
            .day-module .panel,
            .day-module .message,
            .day-module .item-card,
            .day-module .list-card,
            .sport-summary,
            .sport-dashboard-card,
            .sport-category-head,
            .sport-exercise-card,
            .sport-empty-state,
            .coding-hero,
            .coding-topic-card,
            .coding-detail-card,
            .coding-empty-state
        ) {
            background: var(--ui-panel-bg) !important;
            background-color: var(--ui-panel-bg) !important;
            backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation)) !important;
            -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation)) !important;
            border-color: var(--border) !important;
            box-shadow: var(--ui-shadow) !important;
        }

        body.ui-glass :is(
            .input-field,
            .textarea-field,
            .opt-btn,
            .btn-settings-link,
            .btn-home-side,
            .modern-icon-btn,
            .sb-subject-btn,
            .goal-folder-btn,
            .goal-section-btn,
            .archive-tab,
            .ctx-action-btn,
            .goal-fab-menu button,
            .day-module input,
            .day-module textarea,
            .day-module select,
            .ls-input,
            .ls-reset-btn,
            .eng-inp,
            .st-textarea,
            .rus-inp,
            #cl-add-text,
            .sport-small-btn,
            .sport-icon-btn,
            .sport-chip
        ) {
            background: var(--ui-control-bg) !important;
            background-color: var(--ui-control-bg) !important;
            border-color: var(--border) !important;
            box-shadow:
                inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
                0 6px 16px -10px rgba(0, 0, 0, 0.4) !important;
        }

        /* NESTED glass yuzalar — ota-panel allaqachon blur beradi, shuning uchun
           bularda faqat yarim-shaffof fon (o'z blur'i YO'Q). Bu 100+ ortiqcha
           backdrop-filter qatlamini olib tashlaydi => silliq scroll, kamroq GPU yuki. */
        body.ui-glass :is(
            .stat-box,
            .quiz-status-card,
            .list-mode-summary,
            .list-row,
            .settings-profile-card,
            .settings-color-panel,
            .latex-preview,
            .archive-edit-card,
            .cl-list-item,
            .cl-history,
            .kh-time-row,
            .kh-full-item,
            .kh-cell,
            .kh-header-cell,
            .kh-time-col,
            .sport-category-head,
            .day-module .message
        ) {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        body.ui-glass :is(
            .btn-primary,
            .primary-btn,
            .btn-save.saved,
            .rus-btn-save,
            .eng-btn-save,
            .eng-btn-action,
            .rus-btn-action,
            .btn-action-primary,
            .modal-btn.btn-save,
            .sport-fab,
            .fab-goal,
            .fab-add,
            .eng-fab-btn,
            .kh-toggle-btn,
            .spk-play-btn,
            .ls-speaker,
            .cp-btn,
            .goal-card.done,
            .day-nav-btn.active,
            .nav-btn.active,
            .nav-item.active,
            .goal-folder-btn.active,
            .goal-section-btn.active,
            .archive-tab.active,
            .ls-pill.active,
            .sport-chip.active,
            .fc-res-btn.primary,
            .mt-btn
        ) {
            background: var(--ui-primary-bg) !important;
            background-color: var(--ui-primary-bg) !important;
            border-color: color-mix(in srgb, var(--primary) 70%, var(--border)) !important;
            color: #fff !important;
        }

        body.ui-glass :is(.opt-btn.correct, .goal-card.done, .message.success, .quiz-feedback.correct) {
            background: var(--ui-success-bg) !important;
            background-color: var(--ui-success-bg) !important;
            border-color: color-mix(in srgb, var(--success) 70%, var(--border)) !important;
            color: #fff !important;
        }

        body.ui-glass :is(.opt-btn.wrong, .danger-btn, .btn-danger-outline, .rus-btn-danger, .eng-btn-danger, .modal-btn.danger, .sport-action-menu button.danger, .archive-danger, .quiz-feedback.wrong, .message.error, .sport-fragment-message.error) {
            background: var(--ui-danger-bg) !important;
            background-color: var(--ui-danger-bg) !important;
            border-color: color-mix(in srgb, var(--danger) 70%, var(--border)) !important;
            color: var(--danger) !important;
        }

        body.ui-glass :is(.rus-btn-stop, .eng-btn-stop, .text-saved, .btn-save.saved) {
            background: var(--ui-saved-bg) !important;
            background-color: var(--ui-saved-bg) !important;
        }

        body.ui-glass :is(img, video, iframe, canvas, svg, mjx-container, path, line, circle, rect, polygon, polyline, use) {
            background: transparent !important;
            background-color: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
        }

        body.ui-glass :is(.progress-fill, #quiz-progress-fill, .chart-bar-fill, .type-fill, .sport-upload-progress-fill, .mt-item-bg.right) {
            background: var(--primary) !important;
            background-color: var(--primary) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
        }

        body.ui-glass :is(.mt-item-bg.left) {
            background: var(--danger) !important;
            background-color: var(--danger) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
        }

        body.ui-glass :is(.app-icon, .app-icon-svg, .sport-media-wrap, .sport-detail-slide, .sport-media-viewer-main, .site-icon, .avatar, .settings-avatar-preview) {
            background-color: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        body.ui-glass :is(.modal-wrap, .rus-modal-overlay, .eng-modal-overlay, .sport-modal-wrap, .sport-action-menu, .site-info-modal, .fc-results, .mt-finish, .sport-media-viewer, .progress-overlay) {
            backdrop-filter: blur(calc(var(--ui-blur) + 2px)) saturate(var(--ui-saturation)) !important;
            -webkit-backdrop-filter: blur(calc(var(--ui-blur) + 2px)) saturate(var(--ui-saturation)) !important;
        }

        body.ui-glass .glass-surface {
            background: var(--ui-panel-bg) !important;
            background-color: var(--ui-panel-bg) !important;
            border-color: var(--border) !important;
            box-shadow: var(--ui-shadow) !important;
        }

        body.ui-glass .glass-control {
            background: var(--ui-control-bg) !important;
            background-color: var(--ui-control-bg) !important;
            border-color: var(--border) !important;
            box-shadow: var(--ui-shadow) !important;
        }

        body.ui-glass .glass-accent {
            background: var(--ui-primary-bg) !important;
            background-color: var(--ui-primary-bg) !important;
            border-color: color-mix(in srgb, var(--primary) 70%, var(--border)) !important;
            color: #fff !important;
        }

        /* --- SIDEBAR & LAYOUT --- */
        #sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 900; opacity: 0; pointer-events: none; transition: 0.3s ease; }
        #sidebar-overlay.active { opacity: 1; pointer-events: auto; }

        .sidebar {
            position: fixed; top: 0; bottom: 0; left: calc(var(--sidebar-w) * -1);
            width: var(--sidebar-w); min-width: var(--sidebar-w); max-width: var(--sidebar-w);
            background: var(--bg); z-index: 1000;
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: flex; box-shadow: 5px 0 25px rgba(0,0,0,0.1);
            border-right: 1px solid var(--border); overflow: hidden;
        }
        .sidebar.open { transform: translateX(var(--sidebar-w)); }

        /* LEFT NAV STRIP (Kichik Bar) */
        .sidebar-nav {
            flex: 0 0 var(--sidebar-nav-w);
            width: var(--sidebar-nav-w);
            min-width: var(--sidebar-nav-w);
            max-width: var(--sidebar-nav-w);
            background: var(--secondary);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
            gap: 8px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        
        .nav-item {
            width: var(--sidebar-nav-item-size);
            height: var(--sidebar-nav-item-size);
            min-width: var(--sidebar-nav-item-size);
            min-height: var(--sidebar-nav-item-size);
            flex: 0 0 var(--sidebar-nav-item-size);
            border-radius: 12px;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            cursor: pointer;
            transition: 0.2s;
            color: var(--text);
            opacity: 0.6;
            font-size: 24px;
        }
        .nav-item svg {
            width: 24px; height: 24px;
            stroke-width: 2px;
        }
        .app-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: currentColor;
            line-height: 0;
        }
        .app-icon-svg {
            flex: 0 0 auto;
            pointer-events: none;
        }
        .nav-item.active {
            background: var(--bg);
            color: var(--primary);
            opacity: 1;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            border: 1px solid var(--border);
        }
        .nav-label { display: none !important; }

        /* RIGHT CONTENT PANEL (Asosiy Ro'yxat) */
        .sidebar-panel {
            flex: 0 0 var(--sidebar-panel-w);
            width: var(--sidebar-panel-w);
            min-width: 0;
            max-width: var(--sidebar-panel-w);
            display: flex;
            flex-direction: column;
            background: var(--bg);
            overflow: hidden;
        }

        /* YANGI: Sidebar Home Button */
        .sp-home-area { padding: 15px 15px 5px 15px; }
        .btn-home-side { 
            width: 100%; padding: 12px 15px; 
            background: var(--secondary); color: var(--text); 
            border-radius: 12px; display: flex; align-items: center; gap: 10px; 
            font-weight: 600; font-size: 15px; cursor: pointer; 
            border: 1px solid transparent; transition: 0.2s;
        }
        .btn-home-side:hover { background: var(--border); }
        .btn-home-side:active { transform: scale(0.97); }
        .btn-home-side svg { stroke-width: 2.5px; width: 20px; height: 20px; }

        .sp-header {
            flex: 0 0 var(--sidebar-header-h);
            height: var(--sidebar-header-h);
            min-height: var(--sidebar-header-h);
            padding: 0 15px;
            font-weight: 800;
            font-size: 18px;
            color: var(--text);
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
            cursor: default;
            transition: 0.2s;
            margin-top: 0;
            overflow: hidden;
        }
        .sp-header.sp-header-manageable { cursor: pointer; }
        .sp-header.sp-header-static .modern-icon-btn {
            visibility: hidden;
            pointer-events: none;
        }
        #sp-header-title {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sp-header:active { background: var(--secondary); }
        
        /* ZAMONAVIY ICON TUGMASI */
        .modern-icon-btn {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 10px;
            background: var(--secondary);
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid transparent;
        }
        .modern-icon-btn:hover {
            background: var(--border);
            transform: translateY(-1px);
        }
        .modern-icon-btn:active {
            transform: scale(0.92);
            background: var(--border);
        }
        .modern-icon-btn svg {
            width: 20px; height: 20px;
            stroke-width: 2px;
        }

        .sp-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: var(--sidebar-content-pad);
            min-width: 0;
            scrollbar-width: none;
        }
        .sp-content::-webkit-scrollbar { display: none; }

        .sp-content > *,
        .ext-section,
        .ext-action-list,
        .language-sidebar-list,
        .sb-subject-btn,
        .sb-db-item {
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }

        .home-side {
            display: grid;
            gap: 8px;
            padding: 4px 2px;
        }

        .home-side-line {
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
        }

        .home-side-age-line {
            padding: 2px 0 7px;
            border-bottom: 1px solid var(--border);
        }

        .home-side-label {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex: 0 0 auto;
            color: var(--primary);
            font-size: 11px;
            line-height: 1;
            font-weight: 900;
            text-transform: uppercase;
        }

        .home-side-deadline-label {
            margin-top: 4px;
        }

        .home-side-age-value,
        .home-side-count {
            min-width: 0;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 12px;
            line-height: 1.15;
            font-weight: 900;
            letter-spacing: 0;
            color: var(--text);
            white-space: nowrap;
        }

        .home-side-deadline-list {
            display: grid;
            gap: 6px;
        }

        .home-side-deadline {
            display: grid;
            grid-template-columns: minmax(0, 1fr) max-content;
            align-items: start;
            column-gap: 8px;
            padding: 0 0 6px;
            border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
        }

        .home-side-deadline.is-expired {
            opacity: 0.55;
        }

        .home-side-deadline strong {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            font-size: 11px;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .home-side-deadline .home-side-count {
            justify-self: end;
            min-width: max-content;
            text-align: right;
        }

        .home-side-empty {
            font-size: 11px;
            opacity: 0.62;
            white-space: nowrap;
        }

        #view-home.home-view {
            display: grid;
            gap: 14px;
            align-content: start;
        }

        .home-overview,
        .home-launch-wrap,
        .home-goals-area,
        .home-goals-board,
        .home-goal-rail {
            display: grid;
            gap: 12px;
        }

        .home-kicker,
        .home-board-eyebrow {
            color: var(--primary);
            font-size: 11px;
            line-height: 1;
            font-weight: 900;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        .home-progress-line {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            margin-top: 16px;
            max-width: 360px;
        }

        .home-progress-line > span {
            color: var(--primary);
            font-size: 12px;
            font-weight: 900;
            font-variant-numeric: tabular-nums;
        }

        .home-progress-track {
            height: 8px;
            border-radius: 999px;
            overflow: hidden;
            background: color-mix(in srgb, var(--text) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
        }

        .home-progress-track span {
            display: block;
            width: 0%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--primary), var(--success));
            transition: width 0.35s ease;
        }

        .home-goals-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        #view-home .home-goals-area {
            padding: 0 20px 84px;
        }

        #view-home .home-goal-rail .goal-folder-bar,
        #view-home .home-goal-rail .goal-section-bar {
            margin-left: 0;
            margin-right: 0;
        }

        #view-home .home-goals-board .goals-grid {
            padding-left: 0;
            padding-right: 0;
        }

        #view-home .goals-section-title {
            margin: 0 0 12px;
        }

        .home-goals-head h3 {
            margin: 5px 0 0;
            font-size: 18px;
            line-height: 1.15;
        }

        .home-add-goal-btn {
            border: 1px solid var(--border);
            background: var(--primary);
            color: #fff;
            border-radius: 10px;
            min-height: 40px;
            padding: 0 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            font-size: 13px;
            font-weight: 900;
            cursor: pointer;
            transition: transform 0.16s ease, filter 0.16s ease;
        }

        .home-add-goal-btn:active {
            transform: scale(0.97);
        }

        body.ui-glass .deadline-settings-row {
            background: var(--ui-panel-bg);
            backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation));
            -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation));
            border-color: var(--border);
            box-shadow: var(--ui-shadow);
        }

        .ext-title {
            padding: 0 10px;
            margin: 0 0 5px;
            color: var(--text);
        }

        .ext-subtitle {
            padding: 0 10px;
            margin: 0 0 15px;
            color: var(--text);
            opacity: 0.6;
            font-size: 13px;
        }

        .ext-action-list {
            padding: 10px;
        }

        .ext-action-list.tight {
            padding-top: 0;
        }

        .sb-subject-btn {
            margin-bottom: 8px;
        }

        .sb-btn-main {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sb-btn-main.compact {
            gap: 10px;
        }

        .sb-btn-title {
            font-weight: 800;
        }

        .sb-btn-subtitle {
            opacity: 0.5;
            font-size: 12px;
        }

        .sb-icon-box {
            width: 32px;
            height: 32px;
            background: var(--bg);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            flex: 0 0 auto;
        }

        .nav-spacer {
            width: 24px;
            flex: 0 0 24px;
        }

        .center-title {
            text-align: center;
        }

        .text-success {
            color: var(--success);
        }

        .text-danger {
            color: var(--danger);
        }

        .text-saved {
            color: var(--saved);
        }

        .muted-small {
            font-size: 14px;
            opacity: 0.6;
        }

        .stack-gap-sm > * + * {
            margin-top: 10px;
        }

        .button-bordered {
            border: 1px solid var(--border);
        }

        .button-saved {
            border: 1px solid var(--saved);
            color: var(--saved);
            background: var(--bg);
        }

        .result-form {
            text-align: center;
            max-width: 520px;
            margin: 24px auto;
            padding: 28px 24px;
        }

        .result-heading {
            margin: 16px 0 0;
            font-size: 22px;
            line-height: 1.2;
        }

        .result-stats {
            margin-top: 20px;
            margin-bottom: 12px;
        }

        .stat-box-bottom {
            margin: 0 auto 18px;
            max-width: 180px;
        }

        #view-result .stack-gap-sm {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        #view-result .stack-gap-sm > * + * {
            margin-top: 0;
        }

        #view-result .btn-primary,
        #view-result .btn-settings-link {
            min-height: 46px;
            padding: 0 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .settings-field-label {
            display: block;
            margin-bottom: 5px;
            padding-left: 5px;
            font-size: 12px;
            opacity: 0.6;
        }

        .deadline-settings-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .deadline-field {
            display: grid;
            gap: 6px;
            margin: 0;
            padding: 0;
            opacity: 1;
        }

        .deadline-field span {
            opacity: 0.68;
            font-weight: 800;
        }

        .deadline-field .input-field {
            margin: 0;
        }

        .deadline-add-btn {
            min-height: 44px;
            align-self: end;
        }

        .settings-deadline-list {
            display: grid;
            gap: 8px;
            margin-top: 12px;
        }

        .deadline-settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--bg);
        }

        .deadline-settings-main {
            min-width: 0;
            display: grid;
            gap: 3px;
        }

        .deadline-settings-main strong {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            overflow-wrap: anywhere;
        }

        .deadline-settings-main span,
        .deadline-empty {
            color: var(--text);
            opacity: 0.62;
            font-size: 12px;
        }

        .deadline-settings-actions {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
        }

        .deadline-status-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 999px;
            flex: 0 0 auto;
            transform: translateY(1px);
        }

        .deadline-status-dot.done {
            background: var(--success);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
        }

        .deadline-status-dot.missed {
            background: var(--danger);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
        }

        .deadline-status-btn,
        .deadline-delete-btn {
            flex: 0 0 auto;
            min-width: 36px;
            min-height: 36px;
            border-radius: 10px;
            padding: 7px 10px;
            font-weight: 900;
            cursor: pointer;
        }

        .deadline-status-btn {
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--text);
        }

        .deadline-status-btn.done {
            border-color: var(--success);
            color: var(--success);
        }

        .deadline-status-btn.missed {
            border-color: var(--danger);
            color: var(--danger);
        }

        .deadline-delete-btn {
            border: 1px solid var(--danger);
            color: var(--danger);
            background: transparent;
        }

        .settings-inline-row {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .new-subject-row {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .new-subject-row .input-field {
            margin: 0;
        }

        .new-subject-row .btn-primary {
            width: auto;
        }

        .section-divider {
            margin: 20px 0;
            border: 0;
            border-top: 1px solid var(--border);
        }

        .section-divider.large {
            margin: 25px 0;
        }

        .input-compact {
            margin-bottom: 10px;
            background: var(--bg);
        }

        .section-heading-spaced {
            margin-top: 20px;
        }

        .quiz-score {
            font-weight: 800;
        }

        /* Fanlar Ro'yxati */
        .sb-group { margin-bottom: 10px; }
        .sb-subject-btn { 
            width: 100%; padding: 12px 15px; 
            text-align: left; background: var(--secondary); 
            border-radius: 10px; font-size: 15px; font-weight: 600; 
            color: var(--text); display: flex; justify-content: space-between; 
            align-items: center; cursor: pointer; border: 1px solid transparent;
        }
        .sb-subject-btn.active { 
            background: var(--bg); 
            border-color: var(--primary); 
            color: var(--primary);
        }
        .sb-db-list { display: none; padding: 5px 0 5px 10px; overflow: hidden; }
        .sb-db-list.open { display: block; animation: slideDown 0.2s ease; }
        
        .sb-db-item { 
            padding: 10px 12px; font-size: 14px; color: var(--text); 
            border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; 
            transition: 0.2s; opacity: 0.8; margin-top: 2px;
        }
        .sb-db-item:hover { background: var(--secondary); opacity: 1; }
        .sb-db-item::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
        .sb-db-item:hover::before { background: var(--primary); }

        @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

        /* Standard Layout */
        .container { width: 100%; max-width: 600px; margin: 0 auto; min-height: 100vh; position: relative; display: flex; flex-direction: column; }
        .nav-header { padding: 14px 15px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--border); background: var(--secondary); position: sticky; top: 0; z-index: 200; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
        .section-blank-wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
        .section-blank-main { flex: 1 1 auto; min-height: calc(100vh - 64px); }
        .day-wrapper {
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
        }
        .day-nav-header { flex: 0 0 auto; }
        .day-refresh-btn { flex: 0 0 36px; border: 0; color: var(--text); cursor: pointer; }
        .day-module { padding: 16px 20px 24px; display: grid; gap: 14px; }
        .day-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
        .day-tabs::-webkit-scrollbar { display: none; }
        .day-nav-btn { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; background: var(--secondary); color: var(--text); padding: 9px 12px; font-size: 13px; font-weight: 800; cursor: pointer; }
        .day-nav-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
        .day-view-panel { display: grid; gap: 14px; }
        .day-module .stats-grid,
        .day-module .summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
        .day-module .stats-layout { display: grid; gap: 14px; }
        .day-module .wide-panel { grid-column: 1 / -1; }
        .day-module .stat-card,
        .day-module .panel,
        .day-module .message,
        .day-module .item-card { background: var(--secondary); border: 1px solid var(--border); border-radius: 12px; }
        .day-module .stat-card { padding: 14px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; }
        .day-module .stat-card span,
        .day-module .stat-card small,
        .day-module .helper-text,
        .day-module label span,
        .day-module .card-preview,
        .day-module .meta-chip,
        .day-module .type-row-head { color: var(--text); opacity: 0.62; }
        .day-module .stat-card strong { font-size: 26px; line-height: 1; color: var(--primary); }
        .day-module .panel { padding: 14px; }
        .day-module .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
        .day-module .panel-head h3,
        .day-module .panel-head h4 { margin: 0; }
        .day-module .panel-head.compact { margin-bottom: 10px; }
        .day-module .message { padding: 12px 14px; font-size: 13px; }
        .day-module .message.success { color: var(--success); border-color: var(--success); }
        .day-module .message.error { color: var(--danger); border-color: var(--danger); }
        .day-module .inline-tools { min-width: 0; }
        .day-module .inline-tools input,
        .day-module .form-grid input,
        .day-module .form-grid select,
        .day-module textarea,
        .day-module .items-container input,
        .day-module .items-container select { width: 100%; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 10px; padding: 11px 12px; font-size: 15px; }
        .day-module textarea { min-height: 110px; resize: vertical; }
        .day-module label { display: grid; gap: 7px; }
        .day-module .form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
        .day-module .full-width,
        .day-module .items-box { margin-bottom: 12px; }
        .day-module .items-container { display: grid; gap: 10px; }
        .day-module .item-card { padding: 12px; display: grid; gap: 10px; }
        .day-module .item-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
        .day-module .list-grid { display: grid; gap: 8px; }
        .day-module .list-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: grid; gap: 10px; }
        .day-module .list-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
        .day-module .list-top h4 { margin: 0; }
        .day-module .meta-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
        .day-module .meta-chip,
        .day-module .type-badge,
        .day-module .badge { display: inline-flex; align-items: center; min-height: 24px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; font-size: 12px; background: var(--secondary); }
        .day-module .card-actions,
        .day-module .form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .day-module .primary-outline,
        .day-module .ghost-btn,
        .day-module .danger-btn,
        .day-module .primary-btn { border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; font-weight: 800; cursor: pointer; color: var(--text); background: var(--bg); }
        .day-module .primary-btn { background: var(--primary); border-color: var(--primary); color: white; }
        .day-module .danger-btn { color: var(--danger); border-color: var(--danger); background: transparent; }
        .day-module .small-btn { padding: 8px 10px; font-size: 13px; }
        .day-module .helper-banner { margin: 0 0 12px; padding: 12px; border: 1px solid var(--primary); border-radius: 10px; color: var(--primary); background: var(--bg); }
        .day-module .chart-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-height: 220px; align-items: end; overflow-x: auto; }
        .day-module .chart-bars-wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        .day-module .chart-bar { display: grid; gap: 7px; align-content: end; min-width: 34px; }
        .day-module .chart-bar-meter { min-height: 150px; padding: 5px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: flex-end; }
        .day-module .chart-bar-fill { width: 100%; min-height: 8px; border-radius: inherit; background: var(--primary); }
        .day-module .chart-bar-label,
        .day-module .chart-bar-meta { text-align: center; font-size: 11px; color: var(--text); opacity: 0.68; }
        .day-module .type-breakdown { display: grid; gap: 12px; }
        .day-module .type-row { display: grid; gap: 7px; }
        .day-module .type-row-head { display: flex; justify-content: space-between; gap: 10px; }
        .day-module .type-track { height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
        .day-module .type-fill { height: 100%; border-radius: inherit; background: var(--primary); }
        .day-load-error { border: 1px solid var(--danger); color: var(--danger); border-radius: 12px; padding: 16px; background: var(--secondary); text-align: center; }
        .menu-icon { font-size: 24px; cursor: pointer; color: var(--text); }
        .icon-only { width: 34px; height: 34px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
        .icon-only svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
        .page-title { font-weight: 600; font-size: 18px; flex: 1; color: var(--text); }
        .back-btn { font-size: 16px; font-weight:600; cursor: pointer; color: var(--primary); display:flex; align-items:center; gap:5px; }
        
        /* UI Elements */
        .profile-section { padding: 30px 20px; text-align: center; }
        .avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 15px; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 40px; color: white; overflow: hidden; position: relative; border: 4px solid var(--secondary); }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }

        .goal-folder-bar { display: flex; align-items: center; gap: 8px; margin: 0 20px 14px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
        .goal-folder-bar::-webkit-scrollbar { display: none; }
        .goal-folder-btn { flex: 0 0 auto; border: 1px solid var(--border); background: var(--secondary); color: var(--text); border-radius: 999px; padding: 9px 12px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
        .goal-folder-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
        .goal-folder-btn em { min-width: 22px; height: 22px; border-radius: 999px; background: var(--bg); color: var(--text); font-style: normal; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
        .goal-folder-btn.active em { background: rgba(255,255,255,0.22); color: white; }
        .goal-section-bar { display: flex; align-items: center; gap: 7px; margin: -4px 20px 14px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
        .goal-section-bar::-webkit-scrollbar { display: none; }
        .goal-section-btn { flex: 0 0 auto; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
        .goal-section-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
        .goal-section-btn em { min-width: 19px; height: 19px; border-radius: 6px; background: var(--secondary); color: var(--text); font-style: normal; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
        .goal-section-btn.active em { background: rgba(255,255,255,0.22); color: white; }
        .goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px; }
        .goal-card { background: var(--secondary); padding: 12px; border-radius: 12px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; border: 1px solid transparent; transition: 0.2s; user-select: none; cursor: pointer; }
        .goal-card:active { transform: scale(0.98); }
        .goal-card.done { background: var(--success); border-color: var(--success); color: white; }
        .goal-card-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
        .goal-check { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: 0 0 auto; }
        .goal-check { border: 2px solid #d4d4d8; }
        .goal-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
        .goal-card.done .goal-check { background: white; border-color: white; color: var(--success); }
        .goal-text { line-height: 1.35; overflow-wrap: anywhere; }
        .goal-empty { grid-column: 1 / -1; background: var(--secondary); border: 1px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; color: var(--text); opacity: 0.65; }
        
        .list-row { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: var(--bg); }
        .form-container { padding: 20px; }
        .input-field { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--secondary); color: var(--text); font-size: 16px; margin-bottom: 20px; }
        .textarea-field { width: 100%; height: 200px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--secondary); color: var(--text); font-size: 14px; resize: none; margin-bottom: 20px; }
        .textarea-field-tall { height: 260px; resize: vertical; }
        .latex-preview-panel { margin: -8px 0 20px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--secondary); }
        .latex-preview-head { padding: 10px 12px; font-size: 12px; font-weight: 800; opacity: 0.62; color: var(--text); border-bottom: 1px solid var(--border); }
        .latex-preview { min-height: 112px; padding: 16px; background: var(--bg); color: var(--text); overflow-x: auto; line-height: 1.6; }
        .math-content { user-select: text; overflow-wrap: anywhere; }
        .math-line + .math-line { margin-top: 8px; }
        .math-display { display: block; margin: 12px 0; text-align: center; font-size: 1.22em; overflow-x: auto; overflow-y: hidden; }
        .math-inline { display: inline; }
        .math-empty { opacity: 0.5; font-size: 13px; }
        .latex-preview-meta { font-size: 12px; font-weight: 800; color: var(--primary); margin-bottom: 12px; }
        .latex-preview-question { padding: 4px 0 12px; font-size: 17px; }
        .latex-preview-option { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
        .latex-preview-option.correct { color: var(--success); }
        .latex-preview-option b { flex: 0 0 auto; }
        .btn-primary { width: 100%; padding: 14px; border-radius: 12px; background: var(--primary); color: #fff; font-weight: 600; border: none; font-size: 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: 0.2s; }
        .btn-primary:active { transform: scale(0.98); }
        .btn-settings-link { width: 100%; padding: 14px; background: var(--secondary); color: var(--text); border: none; border-radius: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .btn-danger-outline { width: 100%; padding: 14px; background: transparent; color: var(--danger); border: 2px solid var(--danger); border-radius: 12px; font-weight: 600; cursor: pointer; margin-top: 20px; }

        .dash-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
        .stat-box { background: var(--secondary); padding: 15px; border-radius: 10px; text-align: center; }
        .stat-num { font-size: 20px; font-weight: 800; color: var(--text); }
        .stat-lbl { font-size: 12px; opacity: 0.6; color: var(--text); }

        .q-card { background: var(--secondary); padding: 20px; border-radius: 16px; margin-bottom: 20px; font-size: 18px; font-weight: 500; color: var(--text); line-height: 1.55; overflow-x: auto; }
        .opt-btn { width: 100%; padding: 15px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); text-align: left; font-size: 15px; transition: 0.2s; color: var(--text); }
        .opt-btn .option-key { font-weight: 800; margin-right: 6px; }
        .opt-btn mjx-container,
        .q-card mjx-container,
        .list-question-text mjx-container,
        .latex-preview mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
        .opt-btn.correct { background: var(--success); color: white; border-color: var(--success); }
        .opt-btn.wrong { background: var(--danger); color: white; border-color: var(--danger); }
        .opt-btn.disabled { pointer-events: none; }
        .quiz-container { padding: 20px; }
        .quiz-status-card { border: 1px solid var(--border); background: var(--secondary); border-radius: 12px; padding: 13px; margin-bottom: 14px; }
        .quiz-status-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; margin-bottom: 10px; }
        .quiz-status-top span { color: var(--primary); }
        .quiz-progress-track { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
        #quiz-progress-fill { height: 100%; width: 0%; background: var(--primary); border-radius: inherit; transition: width 0.2s ease; }
        .quiz-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
        .quiz-status-grid div { border: 1px solid var(--border); background: var(--bg); border-radius: 8px; padding: 8px; text-align: center; }
        .quiz-status-grid small,
        .quiz-status-grid b { display: block; }
        .quiz-status-grid small { opacity: 0.62; font-size: 11px; }
        .quiz-status-grid b { margin-top: 2px; font-size: 16px; }
        .quiz-feedback { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 12px 0; font-weight: 800; line-height: 1.4; background: var(--secondary); }
        .quiz-feedback.correct { border-color: var(--success); color: var(--success); }
        .quiz-feedback.wrong { border-color: var(--danger); color: var(--danger); }
        .quiz-next-btn,
        .quiz-skip-btn { margin-top: 10px; }

        /* LIST MODE STYLES */
        .list-mode-summary { border: 1px solid var(--border); background: var(--secondary); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--text); }
        #view-quiz-list #list-container {
            display: grid;
            grid-template-columns: minmax(0, 1fr) !important;
            gap: 0;
        }
        .list-q-card { 
            background: transparent; 
            border: none; 
            border-bottom: 1px solid var(--border); 
            border-radius: 0; 
            padding: 20px 0; 
            margin-bottom: 0; 
            width: 100%;
            max-width: 100%;
            transition: all 0.3s ease; 
        }
        .list-q-card.done { opacity: 0.7; } 
        .list-question-text { font-weight: 500; margin-bottom: 15px; }
        
        .lq-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; opacity: 0.6; color: var(--text); }
        .btn-save { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 5px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
        .btn-save.saved { background: var(--saved); color: white; border-color: var(--saved); }
        .btn-load-more { width: 100%; padding: 15px; background: var(--secondary); color: var(--primary); border: none; font-weight: 600; cursor: pointer; margin-top: 10px; border-radius: 10px; }

        .settings-profile-card {
            margin-bottom: 20px;
            background: var(--secondary);
            padding: 15px;
            border-radius: 12px;
            border: 1px solid var(--border);
        }
        .settings-avatar-row {
            display: grid;
            grid-template-columns: 74px 1fr;
            align-items: center;
            gap: 14px;
            margin-bottom: 15px;
        }
        .settings-avatar-preview {
            width: 74px;
            height: 74px;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid var(--border);
            background: var(--bg);
        }
        .settings-avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .settings-upload-btn {
            width: 100%;
            min-height: 48px;
            justify-content: center;
        }
        .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 15px; padding: 10px 0; }
        .dev-theme-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 12px; }
        .theme-swatch { width: 50px; height: 50px; border-radius: 14px; cursor: pointer; border: 2px solid transparent; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.12); position: relative; }
        .theme-swatch.active { border-color: var(--text); transform: scale(1.07); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
        .theme-swatch.active::after {
            content: "";
            position: absolute;
            inset: 14px;
            border-right: 3px solid white;
            border-bottom: 3px solid white;
            transform: rotate(45deg);
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
        }
        .settings-color-panel {
            background: var(--secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px;
            display: grid;
            gap: 10px;
        }
        .settings-color-row {
            display: grid;
            grid-template-columns: minmax(100px, 1fr) 54px minmax(78px, auto);
            align-items: center;
            gap: 10px;
            min-height: 42px;
        }
        .settings-color-row label {
            font-size: 13px;
            font-weight: 800;
        }
        .settings-color-row input[type="color"] {
            width: 54px;
            height: 36px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg);
            cursor: pointer;
        }
        .settings-color-row code,
        .settings-color-row output {
            min-width: 72px;
            justify-self: end;
            padding: 6px 8px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--text);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            text-align: center;
        }
        .settings-range-row {
            grid-template-columns: minmax(120px, 1fr) minmax(120px, 2fr) minmax(58px, auto);
        }
        .settings-range-row input[type="range"] {
            width: 100%;
            accent-color: var(--primary);
        }
        .settings-switch-row {
            display: grid;
            grid-template-columns: minmax(120px, 1fr) 54px minmax(58px, auto);
            align-items: center;
            gap: 10px;
            min-height: 42px;
        }
        .settings-switch-row label {
            font-size: 13px;
            font-weight: 800;
        }
        .settings-switch-row input[type="checkbox"] {
            appearance: none;
            width: 52px;
            height: 30px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg);
            position: relative;
            cursor: pointer;
            transition: 0.2s;
        }
        .settings-switch-row input[type="checkbox"]::after {
            content: "";
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--text);
            transition: 0.2s;
        }
        .settings-switch-row input[type="checkbox"]:checked {
            background: var(--primary);
            border-color: var(--primary);
        }
        .settings-switch-row input[type="checkbox"]:checked::after {
            transform: translateX(22px);
            background: #fff;
        }
        .settings-switch-row span {
            justify-self: end;
            font-size: 12px;
            font-weight: 800;
            color: var(--text);
            opacity: 0.72;
        }
        .ui-preset-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .ui-preset-grid .btn-settings-link {
            min-height: 42px;
            padding: 10px;
            font-size: 13px;
        }
        .ui-preview-card {
            min-height: 98px;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px;
            background: var(--ui-panel-bg);
            backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation));
            -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-saturation));
            color: var(--text);
            display: grid;
            align-content: end;
            gap: 4px;
            overflow: hidden;
            position: relative;
        }
        .ui-preview-card::before {
            content: "";
            position: absolute;
            inset: -30%;
            background:
                radial-gradient(circle at 20% 35%, var(--primary), transparent 28%),
                radial-gradient(circle at 80% 25%, var(--success), transparent 24%),
                linear-gradient(135deg, transparent, var(--bg));
            opacity: 0.18;
            z-index: -1;
        }
        .ui-preview-top {
            position: absolute;
            left: 12px;
            top: 12px;
            display: flex;
            gap: 5px;
        }
        .ui-preview-top span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary);
            opacity: 0.8;
        }
        .ui-preview-card strong,
        .ui-preview-card small {
            position: relative;
            z-index: 1;
        }
        .ui-preview-card small {
            opacity: 0.62;
            font-weight: 700;
        }

        .goal-fab-menu { position: fixed; right: 20px; bottom: 82px; z-index: 51; display: none; flex-direction: column; gap: 8px; min-width: 168px; }
        .goal-fab-menu.active { display: flex; }
        .goal-fab-menu button { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 10px; padding: 11px 13px; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,0.18); cursor: pointer; text-align: left; }
        .fab-goal { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: var(--primary); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); cursor: pointer; z-index: 50; transition: transform 0.2s; }
        .fab-goal.active { transform: rotate(45deg); }
        .modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.2s; backdrop-filter: blur(3px); }
        .modal-wrap.active { opacity: 1; pointer-events: auto; }
        .modal { background: var(--bg); width: 85%; max-width: 320px; padding: 25px; border-radius: 16px; transform: scale(0.9); transition: 0.2s; text-align: center; }
        .modal-wrap.active .modal { transform: scale(1); }
        .modal-title { margin-top: 0; }
        .modal-note { margin-bottom: 20px; font-size: 14px; opacity: 0.6; }
        .ctx-action-btn { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--secondary); color: var(--text); padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; cursor: pointer; }
        .ctx-action-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .ctx-action-btn.primary { background: var(--primary); border-color: var(--primary); color: white; }
        .ctx-action-btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
        .ctx-action-btn.muted { margin-top: 5px; margin-bottom: 0; border-color: transparent; opacity: 0.78; }
        .container > [id^="view-"].view-enter,
        .container > [id^="view-"].view-enter-active,
        .view-enter,
        .view-enter-active {
            will-change: opacity, transform;
        }
        .view-enter {
            opacity: 0;
            transform: translateY(8px);
        }
        .view-enter.view-enter-active {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 180ms ease, transform 180ms ease;
        }
        .hidden { display: none !important; }

        /* RESULT VIEW */
        .res-circle { width: 120px; height: 120px; border-radius: 50%; border: 8px solid var(--primary); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: bold; margin: 0 auto; color: var(--primary); }

        /* PROGRESS BAR STYLES */
        .progress-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; backdrop-filter: blur(5px); transition: 0.3s; }
        .progress-text { font-weight: 600; letter-spacing: 1px; }
        .progress-container { width: 80%; max-width: 300px; height: 8px; background: rgba(255,255,255,0.2); border-radius: 5px; overflow: hidden; margin-top: 15px; }
        .progress-fill { height: 100%; background: var(--success); width: 0%; transition: width 0.3s ease-out; border-radius: 5px; }

        @media (min-width: 900px) {
            .container { max-width: 760px; }
            .form-container { padding: 24px; }
            .goals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .deadline-settings-grid { grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(120px, auto); align-items: end; }
            .theme-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
            .day-module .stats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
            .day-module .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .day-module .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .day-module .chart-bars { grid-template-columns: repeat(14, minmax(0, 1fr)); }
            .day-module .chart-bars-wide { grid-template-columns: repeat(12, minmax(0, 1fr)); }
        }

        @media (max-width: 420px) {
            #view-result .stack-gap-sm {
                grid-template-columns: 1fr;
            }

            .settings-avatar-row {
                grid-template-columns: 62px 1fr;
            }
            .settings-avatar-preview {
                width: 62px;
                height: 62px;
            }
            .settings-range-row {
                grid-template-columns: 1fr;
            }
            .settings-range-row output {
                justify-self: start;
            }
            .settings-switch-row {
                grid-template-columns: 1fr auto;
            }
            .settings-switch-row span {
                justify-self: start;
                grid-column: 1 / -1;
            }
            .ui-preset-grid {
                grid-template-columns: 1fr;
            }

            .timer-grid,
            .rus-timer-grid {
                gap: 4px;
            }

            .timer-val,
            .rus-timer-val {
                font-size: 20px;
            }
        }

    /* Umumiy loading spinner (aylana) — "Yuklanmoqda..." matni o'rniga */
    @keyframes app-spin { to { transform: rotate(360deg); } }
    .app-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 28px 16px;
    }
    .app-loading.app-loading-full { min-height: 50vh; }
    .app-spinner {
        width: 34px;
        height: 34px;
        border: 3px solid rgba(127, 127, 127, 0.22);
        border-top-color: var(--primary, #3390ec);
        border-radius: 50%;
        animation: app-spin 0.8s linear infinite;
    }
    .app-spinner.app-spinner-sm { width: 24px; height: 24px; border-width: 2px; }
    .app-loading .app-loading-text { font-size: 13px; opacity: 0.55; }

    /* Bo'limlar almashganda asosiy oynani sokin skeleton holat bilan yopadi */
    #main-loader-overlay {
        position: fixed;
        inset: 0;
        z-index: 500; /* kontent va sticky header ustida, lekin sidebar (1000) ostida */
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: color-mix(in srgb, var(--bg, #0d1117) 92%, transparent);
    }
    #main-loader-overlay.show { display: flex; }
    .main-loader-shell {
        width: min(760px, calc(100vw - 48px));
        display: grid;
        gap: 14px;
        opacity: 0.86;
    }
    .main-loader-card,
    .main-loader-grid > div,
    .main-loader-line,
    .main-loader-avatar {
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--secondary, #1f2937) 92%, white 2%),
            color-mix(in srgb, var(--secondary, #1f2937) 70%, var(--primary, #3390ec) 14%),
            color-mix(in srgb, var(--secondary, #1f2937) 92%, white 2%)
        );
        background-size: 220% 100%;
        animation: app-skeleton-pulse 1.15s ease-in-out infinite;
    }
    .main-loader-line {
        height: 16px;
        border-radius: 999px;
        width: 52%;
    }
    .main-loader-line-short { width: 28%; }
    .main-loader-line-wide { width: 82%; }
    .main-loader-card {
        min-height: 132px;
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 18px;
    }
    .main-loader-avatar {
        width: 70px;
        height: 70px;
        border-radius: 20px;
        flex: 0 0 auto;
    }
    .main-loader-stack {
        flex: 1;
        display: grid;
        gap: 12px;
    }
    .main-loader-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .main-loader-grid > div {
        min-height: 76px;
        border: 1px solid var(--border);
        border-radius: 16px;
    }
    @keyframes app-skeleton-pulse {
        0% { background-position: 120% 0; }
        100% { background-position: -120% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .view-enter.view-enter-active { transition: none; }
        .main-loader-card,
        .main-loader-grid > div,
        .main-loader-line,
        .main-loader-avatar { animation: none; }
    }
    @media (max-width: 680px) {
        #main-loader-overlay { padding: 18px; align-items: flex-start; padding-top: 92px; }
        .main-loader-shell { width: 100%; }
        .main-loader-card { min-height: 112px; padding: 18px; }
        .main-loader-avatar { width: 54px; height: 54px; border-radius: 16px; }
        .main-loader-grid { grid-template-columns: 1fr; }
        .main-loader-grid > div { min-height: 54px; }
    }

    .startup-overlay {
        position: fixed;
        inset: 0;
        z-index: 20000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background:
            radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--primary, #3390ec) 18%, transparent), transparent 28%),
            color-mix(in srgb, var(--bg, #0b1117) 96%, #000 4%);
        color: var(--text, #f8fafc);
        opacity: 1;
        visibility: visible;
        transition: opacity 240ms ease, visibility 240ms ease;
    }
    .startup-overlay.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .startup-card {
        width: min(460px, calc(100vw - 40px));
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding: 22px;
        border: 1px solid color-mix(in srgb, var(--border, #2f3843) 86%, transparent);
        border-radius: 22px;
        background: color-mix(in srgb, var(--secondary, #151b22) 88%, transparent);
        box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(18px);
    }
    .startup-mark {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        font-size: 28px;
        font-weight: 900;
        color: #fff;
        background: linear-gradient(135deg, #0ea5e9, #10b981);
        box-shadow: 0 18px 34px color-mix(in srgb, var(--primary, #3390ec) 28%, transparent);
    }
    .startup-copy {
        min-width: 0;
    }
    .startup-eyebrow {
        color: var(--primary, #3390ec);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 5px;
    }
    .startup-copy h1 {
        margin: 0;
        font-size: clamp(20px, 4vw, 28px);
        line-height: 1.08;
        letter-spacing: 0;
    }
    .startup-copy p {
        margin: 8px 0 0;
        color: color-mix(in srgb, var(--text, #f8fafc) 66%, transparent);
        font-size: 14px;
        line-height: 1.45;
    }
    .startup-bar {
        grid-column: 1 / -1;
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: color-mix(in srgb, var(--border, #2f3843) 72%, transparent);
    }
    #startup-fill {
        width: 8%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #0ea5e9, #10b981);
        transition: width 260ms ease;
    }
    .startup-steps {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
    .startup-steps span {
        min-width: 0;
        padding: 7px 8px;
        border: 1px solid color-mix(in srgb, var(--border, #2f3843) 72%, transparent);
        border-radius: 999px;
        color: color-mix(in srgb, var(--text, #f8fafc) 54%, transparent);
        font-size: 11px;
        font-weight: 800;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .startup-steps span.active,
    .startup-steps span.done {
        border-color: color-mix(in srgb, var(--primary, #3390ec) 55%, transparent);
        color: var(--text, #f8fafc);
        background: color-mix(in srgb, var(--primary, #3390ec) 14%, transparent);
    }
    .startup-overlay.is-limited .startup-mark {
        background: linear-gradient(135deg, #f59e0b, #ef4444);
    }
    .startup-overlay.is-error .startup-mark {
        background: linear-gradient(135deg, #ef4444, #991b1b);
    }
    @media (max-width: 520px) {
        .startup-card {
            grid-template-columns: 48px minmax(0, 1fr);
            padding: 18px;
            gap: 13px;
        }
        .startup-mark {
            width: 48px;
            height: 48px;
            border-radius: 15px;
            font-size: 23px;
        }
        .startup-steps {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

/* =====================================================
   HOME PRO DASHBOARD
   ===================================================== */
body {
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.home-mono {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

#view-home.home-pro {
    --home-panel: color-mix(in srgb, var(--secondary) 88%, transparent);
    --home-line: color-mix(in srgb, var(--border) 78%, transparent);
    --home-muted: color-mix(in srgb, var(--text) 58%, transparent);
    display: grid;
    gap: 12px;
    align-content: start;
    color: var(--text);
}

#view-home.home-pro .home-pro-topbar,
#view-home.home-pro .home-hero-grid,
#view-home.home-pro .home-metric-grid,
#view-home.home-pro .home-quick-section,
#view-home.home-pro .home-insight-grid,
#view-home.home-pro .home-goals-area {
    margin: 0 20px;
}

#view-home.home-pro .home-pro-topbar {
    position: sticky;
    top: 0;
    z-index: 210;
    min-height: 58px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--home-line);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

#view-home.home-pro .home-brand-block {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#view-home.home-pro .home-brand-block h1,
#view-home.home-pro .home-goals-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0;
}

#view-home.home-pro .home-eyebrow {
    color: var(--primary);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

#view-home.home-pro .home-clock-block {
    display: none;
}

#view-home.home-pro .home-icon-btn,
#view-home.home-pro .home-mini-btn {
    border: 1px solid var(--home-line);
    background: var(--home-panel);
    color: var(--text);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#view-home.home-pro .home-mini-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#view-home.home-pro .home-icon-btn {
    width: 40px;
    height: 40px;
}

#view-home.home-pro .home-mini-btn {
    width: 30px;
    height: 30px;
}

#view-home.home-pro .home-hero-grid {
    display: grid;
    gap: 12px;
}

#view-home.home-pro .home-hero-main,
#view-home.home-pro .home-focus-panel,
#view-home.home-pro .home-quick-section,
#view-home.home-pro .home-goal-rail,
#view-home.home-pro .home-goals-board,
#view-home.home-pro .home-insight {
    border: 1px solid var(--home-line);
    border-radius: 16px;
    background: var(--home-panel);
}

#view-home.home-pro .home-hero-main {
    min-height: 136px;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    align-content: center;
    gap: 14px;
    padding: 16px;
    text-align: left;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--primary) 13%, var(--secondary)) 0 48%, transparent 48% 100%),
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--success) 16%, transparent), transparent 28%),
        var(--home-panel);
}

#view-home.home-pro .home-hero-main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 7%, transparent) 0 1px, transparent 1px 16px);
    opacity: 0.38;
}

#view-home.home-pro .home-avatar-wrap {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
}

#view-home.home-pro .home-avatar-wrap .avatar {
    width: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#view-home.home-pro .home-avatar-ring {
    display: none !important;
}

#view-home.home-pro .home-hero-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

#view-home.home-pro .user-name {
    margin: 0;
    font-size: clamp(21px, 7vw, 30px) !important;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

#view-home.home-pro .user-bio {
    margin: 0 !important;
    color: var(--home-muted);
    font-size: 12px !important;
    line-height: 1.25;
    font-weight: 600;
}

#view-home.home-pro .home-progress-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    width: 100%;
    margin-top: 8px;
}

#view-home.home-pro .home-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--home-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

#view-home.home-pro .home-progress-meta strong {
    color: var(--primary);
}

#view-home.home-pro .home-progress-track {
    height: 7px;
    border: 1px solid var(--home-line);
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

#view-home.home-pro .home-progress-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--success));
    transition: width 0.35s ease;
}

#view-home.home-pro .home-focus-panel {
    display: grid;
    gap: 9px;
    padding: 16px;
}

#view-home.home-pro .home-focus-panel h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.12;
}

#view-home.home-pro .home-focus-panel p,
#view-home.home-pro .home-insight small {
    margin: 0;
    color: var(--home-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

#view-home.home-pro .home-focus-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#view-home.home-pro .home-focus-actions button,
#view-home.home-pro .home-add-goal-btn {
    border: 1px solid color-mix(in srgb, var(--primary) 52%, var(--border));
    background: var(--primary);
    color: #fff;
    border-radius: 11px;
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#view-home.home-pro .home-focus-actions button + button {
    background: transparent;
    color: var(--text);
}

#view-home.home-pro .home-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#view-home.home-pro .qs-item {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 13px;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: var(--home-panel);
    text-align: left;
}

#view-home.home-pro .qs-lbl {
    order: 1;
    margin: 0;
    color: var(--home-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

#view-home.home-pro .qs-num {
    order: 2;
    color: var(--primary);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

#view-home.home-pro .home-quick-section {
    display: grid;
    gap: 10px;
    padding: 13px;
}

#view-home.home-pro .home-section-head,
#view-home.home-pro .home-goals-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#view-home.home-pro .home-section-head strong {
    color: var(--home-muted);
    font-size: 11px;
}

#view-home.home-pro .home-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
}

#view-home.home-pro .dash-card {
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--home-line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg) 28%, transparent);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    font: inherit;
}

#view-home.home-pro .dash-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
    flex: 0 0 auto;
}

#view-home.home-pro .dash-card::before {
    display: none !important;
}

#view-home.home-pro .dash-card-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#view-home.home-pro .dash-card-title {
    color: var(--text);
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
}

#view-home.home-pro .dash-card-sub {
    color: var(--home-muted);
    font-size: 10px;
    line-height: 1.15;
    font-weight: 700;
}

#view-home.home-pro .home-insight-grid,
#view-home.home-pro .home-tasks-panel {
    display: grid;
    gap: 10px;
}

#view-home.home-pro .home-insight,
#view-home.home-pro .home-tasks-panel,
#view-home.home-pro .home-task-card {
    display: grid;
    gap: 5px;
    padding: 13px;
}

#view-home.home-pro .home-tasks-panel {
    border: 1px solid var(--home-line);
    border-radius: 16px;
    background: var(--home-panel);
    margin: 0 20px;
}

#view-home.home-pro .home-task-list {
    display: grid;
    gap: 9px;
}

#view-home.home-pro .home-task-card {
    width: 100%;
    min-height: 76px;
    border: 1px solid var(--home-line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg) 28%, transparent);
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

#view-home.home-pro .home-task-card.is-warm {
    border-color: color-mix(in srgb, var(--saved) 48%, var(--border));
    background: color-mix(in srgb, var(--saved) 8%, transparent);
}

#view-home.home-pro .home-task-card.is-hot {
    border-color: color-mix(in srgb, var(--danger) 62%, var(--border));
    background: color-mix(in srgb, var(--danger) 13%, transparent);
}

#view-home.home-pro .home-task-card.is-overdue {
    border-color: color-mix(in srgb, var(--danger) 78%, var(--border));
    background: color-mix(in srgb, var(--danger) 20%, transparent);
}

#view-home.home-pro .home-task-card:hover {
    transform: translateY(-2px);
}

#view-home.home-pro .home-task-top,
#view-home.home-pro .home-task-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#view-home.home-pro .home-task-type,
#view-home.home-pro .home-task-time {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

#view-home.home-pro .home-task-card.is-hot .home-task-type,
#view-home.home-pro .home-task-card.is-overdue .home-task-type,
#view-home.home-pro .home-task-card.is-hot .home-task-time,
#view-home.home-pro .home-task-card.is-overdue .home-task-time {
    color: var(--danger);
}

#view-home.home-pro .home-task-title {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    overflow-wrap: anywhere;
}

#view-home.home-pro .home-task-sub,
#view-home.home-pro .home-task-left,
#view-home.home-pro .home-task-empty {
    color: var(--home-muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 650;
}

#view-home.home-pro .home-task-empty {
    grid-column: 1 / -1;
    min-height: 58px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--home-line);
    border-radius: 13px;
}

#view-home.home-pro .home-insight > span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
}

#view-home.home-pro .home-insight strong {
    font-size: 13px;
    line-height: 1.1;
}

#view-home.home-pro .home-goals-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 20px 86px;
    margin: 0;
}

#view-home.home-pro .home-goal-rail,
#view-home.home-pro .home-goals-board {
    display: grid;
    gap: 12px;
    padding: 14px;
}

#view-home.home-pro .home-goal-rail {
    align-items: start;
    gap: 4px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#view-home.home-pro .home-goal-rail .goal-folder-bar,
#view-home.home-pro .home-goal-rail .goal-section-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

#view-home.home-pro .home-goal-rail .goal-folder-bar::-webkit-scrollbar,
#view-home.home-pro .home-goal-rail .goal-section-bar::-webkit-scrollbar {
    display: none;
}

#view-home.home-pro .home-goal-rail .goal-folder-bar:empty,
#view-home.home-pro .home-goal-rail .goal-section-bar:empty {
    display: none;
}

#view-home.home-pro .home-goal-rail .goal-section-bar {
    padding-top: 0;
    border-top: 0;
}

#view-home.home-pro .goal-folder-btn,
#view-home.home-pro .goal-section-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 24px;
    justify-content: center;
    border-radius: 8px;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1;
    gap: 5px;
}

#view-home.home-pro .goal-section-btn {
    border-radius: 999px;
}

#view-home.home-pro .goal-folder-btn em,
#view-home.home-pro .goal-section-btn em {
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 1;
}

#view-home.home-pro .goal-section-btn em {
    border-radius: 999px;
}

#view-home.home-pro .goals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
}

#view-home.home-pro .goal-empty {
    min-height: 44px;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    font-size: 12px;
}

#view-home.home-pro .home-goals-board {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#view-home.home-pro .home-goals-head h3 {
    font-size: 13px;
}

#view-home.home-pro .home-add-goal-btn {
    min-height: 28px;
    border-radius: 8px;
    padding: 0 9px;
    font-size: 10px;
}

#view-home.home-pro .goal-card {
    min-height: 72px !important;
    border: 1px solid var(--home-line) !important;
    border-radius: 12px !important;
    background: var(--home-panel) !important;
    box-shadow: none !important;
    padding: 10px !important;
    gap: 7px;
}

#view-home.home-pro .goal-card + .goal-card {
    border-top: 1px solid var(--home-line) !important;
}

#view-home.home-pro .goal-card.done {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}

#view-home.home-pro .goal-card .goal-text {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

#view-home.home-pro .goal-card-top {
    gap: 6px;
}

#view-home.home-pro .goal-check {
    width: 22px;
    height: 22px;
}

#view-home.home-pro .goal-check svg {
    width: 12px;
    height: 12px;
}

#view-home.home-pro .fab-goal,
#view-home.home-pro .goal-fab-menu {
    display: none !important;
}

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    #view-home.home-pro {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #view-home.home-pro .home-pro-topbar,
    #view-home.home-pro .home-hero-grid,
    #view-home.home-pro .home-metric-grid,
    #view-home.home-pro .home-quick-section,
    #view-home.home-pro .home-insight-grid,
    #view-home.home-pro .home-tasks-panel,
    #view-home.home-pro .home-goals-area {
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
        min-width: 0;
    }

    #view-home.home-pro .home-hero-main {
        grid-template-columns: 70px minmax(0, 1fr);
        min-height: 128px;
        gap: 12px;
        padding: 14px;
    }

    #view-home.home-pro .home-avatar-wrap,
    #view-home.home-pro .home-avatar-wrap .avatar {
        width: 70px !important;
        height: 70px !important;
    }

    #view-home.home-pro .home-focus-panel,
    #view-home.home-pro .home-quick-section,
    #view-home.home-pro .home-tasks-panel,
    #view-home.home-pro .home-goals-area {
        max-width: none;
    }

    #view-home.home-pro .home-goals-area {
        padding: 0 0 86px;
    }

    #view-home.home-pro .home-section-head,
    #view-home.home-pro .home-goals-head {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    #view-home.home-pro .home-focus-panel,
    #view-home.home-pro .home-metric-grid,
    #view-home.home-pro .home-quick-section {
        display: none !important;
    }

    #view-home.home-pro .goals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #view-home.home-pro .goal-card {
        min-height: 70px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    #view-home.home-pro .goal-card .goal-text {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    #view-home.home-pro .goal-check {
        width: 22px;
        height: 22px;
    }

    #view-home.home-pro .goal-check svg {
        width: 12px;
        height: 12px;
    }
}

.day-focus-card {
    border-color: var(--primary, #3390ec) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3390ec) 22%, transparent) !important;
}