.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.modal-content {
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 15px 15px 0 0;
}

.modal-header h3 {
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}

.modal-header .close-modal {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 50%;
    transition: background 0.3s;
}

.modal-header .close-modal:hover {
    background: rgba(255,255,255,0.4);
}

.modal-body {
    padding: 20px;
    color: #333;
    line-height: 1.6;
}

.form-actions {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #eee;
    border-radius: 0 0 15px 15px;
}




        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
        }

        :root {
            --primary: #4b6cb7;
            --secondary: #182848;
            --success: #4CAF50;
            --warning: #FF9800;
            --danger: #F44336;
            --light-bg: #f5f7fa;
            --card-bg: #ffffff;
            --text: #333;
            --text-light: #666;
            --border: #e1e8ed;
            --shadow: rgba(0, 0, 0, 0.08);
            --date-bg: #e3f0ff;
            --category-chinese: #4b6cb7;
            --category-math: #5cb85c;
            --category-english: #f0ad4e;
            --category-sports: #d9534f;
            --category-skills: #5bc0de;
            --category-knowledge: #aa66cc;
            --today-bg: #e6f0ff;
            --selected-bg:#fff9e6;
            --gold: #FFD700;
            --gold-light: #FFF9C4;
            --gold-dark: #FFC107;
            --time-bank: #7B68EE;
            --time-bank-light: #E8E0FF;
            
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 12px;
            --spacing-lg: 16px;
            --spacing-xl: 24px;
            --spacing-2xl: 32px;
            
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-round: 50%;
            
            --shadow-sm: 0 2px 5px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
            --shadow-lg: 0 8px 16px rgba(0,0,0,0.12);
            --shadow-xl: 0 12px 30px rgba(0,0,0,0.15);
            
            --transition-fast: 0.15s ease;
            --transition-default: 0.3s ease;
            
            --z-dropdown: 100;
            --z-sticky: 200;
            --z-modal-backdrop: 1000;
            --z-modal: 1100;
            --z-toast: 9999;
            
            --bg-hover: #f0f7ff;
            --bg-subtle: #f9fbfd;
            --bg-neutral: #f0f2f5;
            --bg-light: #f8f9fa;
            
            --text-heading: #2c3e50;
            --text-muted: #999;
        }

        body {
            background: linear-gradient(135deg, var(--light-bg) 0%, #e4edf5 100%);
            color: var(--text);
            min-height: 100vh;
            padding: 20px;
        }

        
        * {
            -webkit-tap-highlight-color: transparent;
        }
        button, .btn, [role="button"], .task-card, .badge-item, .exchange-item,
        .stat-card, .habit-card, .tm-tpl-card, .tt-course-card, .tm-tab,
        label.switch, .color-swatch, .icon-option, .week-day-btn,
        .habit-ring-progress, .share-date-item, input[type="checkbox"], input[type="radio"] {
            touch-action: manipulation;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        header {
            text-align: left;
            padding: 0;

            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
            border-radius: inherit;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
            gap: 20px;
        }

        .header-left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 1;
            padding: 15px 30px;
        }

        .title-container {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            flex: 1;
            min-width: 0;
            gap: 8px;
            font-size: clamp(1.2rem, 4vw, 2.8rem);
            font-weight: 700;
            color: white;
        }

        
        .title-separator {
            color: rgba(255, 255, 255, 0.8);
            font-size: clamp(1.2rem, 4vw, 2rem);
            white-space: nowrap;
        }

        
        header h2 {
            font-size: clamp(1.8rem, 5vw, 2.8rem);
            margin: 0;
            display: inline-block;
            color: white;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }

        header h3 {
            font-size: clamp(1rem, 3vw, 1.4rem);
            margin: 0;
            display: inline-block;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }

        header h1 i {
            color: #FFD700;
            animation: pulse 2s infinite;
            font-size: 2.5rem;
        }

        
        .header-left {
            flex: 1;
            min-width: 0;
        }

        .header-right {
            display: flex;
            align-items: center;
            padding: 15px 30px;
        }

        .account-controls {
            position: relative;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        
        .date-navigation {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            padding: 15px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            align-items: center;
            justify-content: space-between;
        }

        .today-btn {
            background: var(--warning);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 4px 5px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .today-btn:hover {
            background: #e68a00;
        }

        .date-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .nav-btn:hover {
            background: var(--secondary);
        }

        .current-date {
            font-weight: 600;
            min-width: 150px;
            text-align: center;
        }

        
        .week-days-container {
    background: var(--date-bg);
    border-radius: 12px;
    padding: 2px;
    margin-bottom: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    overflow-x: hidden; 
}

        .week-days {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    min-width: 0; 
}

      .day-btn {
    background: rgba(75, 108, 183, 0.1);
    border: 1px solid rgba(75, 108, 183, 0.2);
    border-radius: 8px;
    padding: 8px 2px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 0;
    margin: 0;
    font-size: 0.85rem;
    align-items: center;     
}

        .day-btn:hover {
            background: rgba(75, 108, 183, 0.2);
        }

        .day-btn.active {
            background: var(--primary);
            color: white;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .day-btn.today {
            background: var(--warning); 
            border: 1px solid #ffcc00;
            font-weight: bold;
            color: #333;
        }

        .day-name {
            font-size: 0.9rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .day-date {
            font-size: 1.1rem;
            font-weight: 600;
        }

        
        .month-view-container {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 16px var(--shadow);
            margin-bottom: 20px;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .calendar-title {
            font-weight: 600;
            color: var(--primary);
            font-size: 1.2rem;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .calendar-day {
            text-align: center;
            padding: 10px 0;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            position: relative;
            min-height: 50px;
        }

        .calendar-day.header {
            font-weight: bold;
            color: var(--primary);
            cursor: default;
            font-size: 0.85rem;
            padding: 8px 0;
        }

        .calendar-day.inactive {
            color: #ccc;
            cursor: default;
        }

        .calendar-day.today {
            background: #e3f0ff;
            color: var(--primary);
            font-weight: bold;
        }

        .calendar-day.selected {
            background: var(--primary);
            color: white;
            font-weight: bold;
        }

        .calendar-day:hover:not(.header):not(.inactive) {
            background: #f0f7ff;
        }

        .task-dot {
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--success);
        }

        
        .today-stats {
            display: grid;
            grid-template-columns: repeat(var(--card-columns, 8), 1fr);
            gap: 8px;
            margin: 5px 0;
            position: relative;
            z-index: 2;
            padding: 5px 0;
            width: 100%;
            box-sizing: border-box;
        }

        .stat-card {
            background: var(--card-bg);
            padding: calc(10px - (var(--card-columns, 8) - 4) * 0.4px) calc(5px - (var(--card-columns, 8) - 4) * 0.1px);
            border-radius: 12px;
            box-shadow: 0 4px 8px var(--shadow);
            text-align: center;
            min-width: 0;
            max-width: none;
            flex: 1 1 0%;
            transition: transform 0.3s;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            word-wrap: break-word;
            white-space: normal;
        }

        
        .stat-card.card-folded { display: none; }

        
        .card-fold-bar {
            grid-column: 1 / -1;
            margin-top: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .card-fold-bar::before,
        .card-fold-bar::after {
            content: "";
            flex: 1 1 0;
            height: 1px;
            max-width: 45%;
        }
        .card-fold-bar::before {
            background: linear-gradient(to right, transparent, rgba(0,0,0,0.1));
        }
        .card-fold-bar::after {
            background: linear-gradient(to left, transparent, rgba(0,0,0,0.1));
        }
        .card-fold-btn {
            padding: 2px 12px;
            background: transparent;
            border: none;
            color: #aaa;
            font-size: 0.7rem;
            line-height: 1.4;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: color 0.2s;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .card-fold-btn:hover {
            color: var(--primary, #4b6cb7);
        }
        .card-fold-btn .fold-icon {
            transition: transform 0.3s ease;
            font-size: 0.62rem;
        }
        .today-stats.card-grid-expanded .fold-icon { transform: rotate(180deg); }

        


        .stat-card::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--card-accent, var(--primary)), var(--card-accent, var(--secondary)));
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card h3 {
            font-size: calc(1.8rem - (var(--card-columns, 8) - 4) * 0.08rem);
            
            color: var(--card-accent, var(--primary));
            margin-bottom: 5px;
        }

        #todayStudyTimeCard h3 { color: #4b6cb7; }
        #sportsTimeCard h3 { color: #e74c3c; }
        #completedTasksCard h3 { color: #2ecc71; }
        #completionRateCard h3 { color: #f39c12; }

.progress-percent {
    font-size: clamp(1rem, 3vw, 1.8rem);
    font-weight: 700;
    color: #f39c12;
    margin: 5px 0 0;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
}

#pointsCard h3 {
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: #3498db;
    margin: 5px 0 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
        #statsCard h3 { color: #9b59b6; }
        #badgeWallCard h3 { color: #FFD700; }
        #scoreStatsCard h3 { color: #CD7F32; }
        #pointsCard h3 { color: #3498db; }
        #timeBankCard h3 { color: #1abc9c; }
        #timetableCard h3 { color: #8B4513; }
        #templateManagerCard h3 { color: #8e44ad; }
        #healthCard h3 { color: #e74c3c; }
        #libraryCard h3 { color: #2ecc71; }
        #tempTimerCard h3 { color: #e74c3c; }
        #petCard h3 { color: #ff6b9d; }
        #moreCardsCard h3 { color: #6c757d; }

        .stat-card p {
            font-size: calc(0.85rem - (var(--card-columns, 8) - 4) * 0.02rem);
            color: var(--text-light);
            word-wrap: break-word;
            white-space: normal;
            line-height: 1.3;
        }

        

        
        .home-default-settings {
            margin: 0 0 12px 0;
            padding: 0;
            background: #fff;
            border: 1px solid #e8ebf1;
            border-radius: 10px;
            overflow: hidden;
        }
        .card-layout-settings {
            margin: 0 0 12px 0;
            padding: 0;
            background: #fff;
            border: 1px solid #e8ebf1;
            border-radius: 10px;
            overflow: hidden;
        }

        
        .home-default-title {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0;
            padding: 9px 14px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #4a5464;
            background: #fafbfd;
            border-bottom: 1px solid #eef1f6;
        }
        .home-default-title i { color: var(--primary, #4b6cb7); }
        .card-layout-title {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0;
            padding: 9px 14px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #4a5464;
            background: #fafbfd;
            border-bottom: 1px solid #eef1f6;
        }
        .card-layout-title i { color: var(--primary, #4b6cb7); }

        
        .cv-row,
        .card-layout-device-row,
        .card-layout-switch {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px 14px;
            margin: 0;
            padding: 11px 14px;
        }
        
        .cv-row + .cv-row,
        .card-layout-device-row + .card-layout-device-row,
        .card-layout-device-row + .card-layout-switch {
            border-top: 1px solid #f0f3f8;
        }
        .home-default-switch,
        .card-layout-switch {
            font-weight: 400;
            cursor: pointer;
            user-select: none;
        }
        .cv-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
        .cv-t {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            color: #3c4658;
            line-height: 1.45;
            white-space: normal;
        }
        .cv-d {
            display: block;
            font-size: 0.72rem;
            color: #9aa4b5;
            line-height: 1.4;
        }
        .cv-ctl {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 5px 7px;
        }

        
        .home-default-options {
            display: inline-flex;
            flex: 0 0 auto;
            gap: 3px;
            padding: 3px;
            background: #f1f4f9;
            border-radius: 9px;
        }
        .home-default-option {
            position: relative;
            display: block;
            margin: 0;
            font-size: 0.8rem;
            font-weight: 600;
            color: #64708a;
            cursor: pointer;
            user-select: none;
        }
        .home-default-option input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            margin: 0;
            pointer-events: none;
        }
        .home-default-option span {
            display: block;
            padding: 5px 14px;
            border-radius: 7px;
            transition: background 0.18s, color 0.18s, box-shadow 0.18s;
        }
        .home-default-option input:checked + span {
            background: #fff;
            color: var(--primary, #4b6cb7);
            box-shadow: 0 1px 3px rgba(24, 40, 72, 0.13);
        }
        .home-default-option input:focus-visible + span {
            outline: 2px solid var(--primary, #4b6cb7);
            outline-offset: 1px;
        }

        
        .cv-toggle {
            position: relative;
            flex: 0 0 auto;
            width: 40px;
            height: 22px;
            border-radius: 11px;
            background: #d8dee8;
            transition: background 0.22s;
        }
        .cv-toggle::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            transition: transform 0.22s;
        }
        
        .home-default-switch input[type="checkbox"],
        .card-layout-switch input[type="checkbox"] {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            margin: 0;
            pointer-events: none;
        }
        .home-default-switch input:checked ~ .cv-toggle,
        .card-layout-switch input:checked ~ .cv-toggle {
            background: var(--primary, #4b6cb7);
        }
        .home-default-switch input:checked ~ .cv-toggle::after,
        .card-layout-switch input:checked ~ .cv-toggle::after {
            transform: translateX(18px);
        }
        .home-default-switch input:focus-visible ~ .cv-toggle,
        .card-layout-switch input:focus-visible ~ .cv-toggle {
            outline: 2px solid var(--primary, #4b6cb7);
            outline-offset: 2px;
        }

        
        .card-layout-device-name,
        .card-layout-switch-name {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            font-size: 0.85rem;
            font-weight: 600;
            color: #3c4658;
            white-space: nowrap;
        }
        .card-layout-device-name i,
        .card-layout-switch-name i { color: var(--primary, #4b6cb7); }
        .card-layout-unit { font-size: 0.75rem; color: #8b95a6; white-space: nowrap; }
        
        .card-layout-select {
            padding: 4px 8px;
            border: 1px solid #dfe4ec;
            border-radius: 6px;
            font-size: 0.78rem;
            background: #fff;
            color: #3c4658;
            cursor: pointer;
        }
        .card-layout-switch-desc { font-size: 0.72rem; color: #9aa4b5; }

        
        .card-layout-hint,
        #cardVisibilityModal .modal-description {
            background: transparent;
            border-left: 0 solid transparent;
            border-radius: 0;
            font-size: 0.72rem;
            color: #9aa4b5;
            line-height: 1.5;
            display: flex;
            align-items: flex-start;
            gap: 6px;
        }
        .home-default-hint {
            margin: 0;
            padding: 9px 14px 10px;
            border-top: 1px solid #f0f3f8;
            font-size: 0.72rem;
            color: #9aa4b5;
            line-height: 1.5;
            display: flex;
            align-items: flex-start;
            gap: 6px;
        }
        .card-layout-hint {
            margin: 0;
            padding: 9px 14px 10px;
            border-top: 1px solid #f0f3f8;
        }
        #cardVisibilityModal .modal-description {
            margin: 0 0 12px 0;
            padding: 0 2px;
        }
        .home-default-hint i,
        .card-layout-hint i,
        #cardVisibilityModal .modal-description i {
            color: #b8c0cf;
            margin-right: 0;
            margin-top: 1px;
        }

        
        @media (max-width: 640px) {
            .cv-row,
            .card-layout-device-row,
            .card-layout-switch {
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
            }
            .cv-ctl { justify-content: flex-start; }
            .home-default-options { justify-self: start; }
        }

        

        
        .set-group {
            margin: 0 0 12px 0;
            padding: 0;
            background: #fff;
            border: 1px solid #e8ebf1;
            border-radius: 10px;
            overflow: hidden;
        }
        .set-group:last-child { margin-bottom: 0; }
        
        .set-group.set-plain > .cv-row:first-child { border-top: 0; }

        
        .set-group-title {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0;
            padding: 9px 14px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #4a5464;
            background: #fafbfd;
            border-bottom: 1px solid #eef1f6;
        }
        .set-group-title i { color: var(--primary, #4b6cb7); }

        
        .set-hint {
            margin: 0;
            padding: 9px 14px 10px;
            border-top: 1px solid #f0f3f8;
            font-size: 0.72rem;
            color: #9aa4b5;
            line-height: 1.5;
        }

        
        .set-pad { padding: 12px 14px; }
        .set-two,
        .set-three,
        .set-decay {
            display: grid;
            gap: 9px;
        }
        .set-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .set-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .set-decay { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .set-gap { margin-top: 9px; }

        
        .set-unit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 7px;
            min-width: 0;
            padding: 9px 11px;
            background: #f7f9fc;
            border-radius: 8px;
        }
        .set-unit-t {
            min-width: 0;
            font-size: 0.78rem;
            font-weight: 600;
            color: #3c4658;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .set-unit-c {
            display: flex;
            align-items: center;
            gap: 3px;
            flex: 0 0 auto;
        }
        .set-unit-u { font-size: 0.72rem; color: #98a2b3; white-space: nowrap; }

        
        .set-num-unit {
            width: 50px;
            padding: 3px 4px;
            border: 1px solid #dfe4ec;
            border-radius: 6px;
            font-size: 0.78rem;
            text-align: center;
            color: #3c4658;
            background: #fff;
        }
        .set-num-sm {
            width: 56px;
            padding: 3px 4px;
            border: 1px solid #dfe4ec;
            border-radius: 6px;
            font-size: 0.78rem;
            text-align: center;
            color: #3c4658;
            background: #fff;
        }

        
        .set-sw {
            position: relative;
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            cursor: pointer;
            user-select: none;
        }
        .set-sw input[type="checkbox"] {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            margin: 0;
            pointer-events: none;
        }
        .set-sw input:checked ~ .cv-toggle { background: var(--primary, #4b6cb7); }
        .set-sw input:checked ~ .cv-toggle::after { transform: translateX(18px); }
        .set-sw input:focus-visible ~ .cv-toggle {
            outline: 2px solid var(--primary, #4b6cb7);
            outline-offset: 2px;
        }

        
        .set-ix {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 9px 14px;
            border-top: 1px solid #f0f3f8;
        }
        .set-ix.lead { border-top: 0; }
        .set-ix-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
        .set-ix-n { flex: 0 0 36px; font-size: 0.79rem; font-weight: 600; color: #3c4658; }
        .set-ix-g {
            flex: 1;
            min-width: 0;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 7px;
        }
        .set-ix-c {
            display: flex;
            align-items: center;
            gap: 3px;
            min-width: 0;
            padding: 3px 5px;
            background: #f7f9fc;
            border-radius: 7px;
        }
        .set-ix-k { flex: 0 0 auto; font-size: 0.7rem; font-weight: 600; color: #8b95a6; }
        .set-ix-s { flex: 0 0 auto; width: 7px; text-align: center; font-size: 0.7rem; font-weight: 700; }
        .set-ix-s.plus { color: #4caf50; }
        .set-ix-s.minus { color: #f44336; }
        .set-ix-s.zero { color: #b8c0cf; }
        .set-ix-in {
            width: 100%;
            min-width: 0;
            padding: 2px;
            border: 1px solid #e3e8f0;
            border-radius: 5px;
            font-size: 0.76rem;
            text-align: center;
            color: #3c4658;
            background: #fff;
        }

        
        .set-dc { padding: 9px 8px; background: #f7f9fc; border-radius: 8px; text-align: center; }
        .set-dc-t { font-size: 0.71rem; font-weight: 600; margin-bottom: 5px; white-space: nowrap; }
        .set-dc-r { display: flex; align-items: center; justify-content: center; gap: 2px; }
        .set-dc-in {
            width: 46px;
            padding: 3px 4px;
            border: 1px solid #e3e8f0;
            border-radius: 6px;
            font-size: 0.76rem;
            text-align: center;
            color: #3c4658;
            background: #fff;
        }

        
        .set-tu { padding: 10px 10px 9px; background: #f7f9fc; border-radius: 8px; }
        .set-tu-t { font-size: 0.71rem; font-weight: 600; color: #7a8697; line-height: 1.35; min-height: 31px; }
        .set-tu-in {
            width: 100%;
            margin-top: 5px;
            padding: 4px 6px;
            border: 1px solid #e3e8f0;
            border-radius: 6px;
            font-size: 0.78rem;
            text-align: center;
            color: #3c4658;
            background: #fff;
        }
        .set-tu-d { margin-top: 4px; font-size: 0.64rem; color: #a8b1bf; line-height: 1.4; }

        
        .set-level-preview { margin-top: 6px; font-size: 0.69rem; color: #999999; line-height: 1.5; }

        
        .set-tip {
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 9px;
            font-size: 0.81rem;
            line-height: 1.6;
        }
        .set-tip-green { background: #e8f5e9; color: #2e7d32; }
        .set-tip-amber { background: #fff8ec; border: 1px solid #f7e2c0; color: #8a5a20; }
        .set-tip-t { font-weight: 700; margin-bottom: 6px; }
        .set-tip-d { font-size: 0.75rem; color: #9aa4b5; line-height: 1.5; margin-bottom: 8px; }

        
        .set-seg {
            display: inline-flex;
            flex: 0 0 auto;
            gap: 3px;
            padding: 3px;
            background: #f1f4f9;
            border-radius: 9px;
        }
        .set-seg-item {
            position: relative;
            display: block;
            margin: 0;
            font-size: 0.8rem;
            font-weight: 600;
            color: #64708a;
            cursor: pointer;
            user-select: none;
        }
        .set-seg-item input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            margin: 0;
            pointer-events: none;
        }
        .set-seg-item span {
            display: block;
            padding: 5px 14px;
            border-radius: 7px;
            transition: background 0.18s, color 0.18s, box-shadow 0.18s;
        }
        .set-seg-item input:checked + span {
            background: #fff;
            color: var(--primary, #4b6cb7);
            box-shadow: 0 1px 3px rgba(24, 40, 72, 0.13);
        }
        .set-seg-item input:focus-visible + span {
            outline: 2px solid var(--primary, #4b6cb7);
            outline-offset: 1px;
        }

        
        @media (max-width: 640px) {
            .set-decay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .set-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .set-ix { flex-wrap: wrap; }
            .set-ix-n { flex: 1; }
            .set-ix-g { flex: 1 0 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .set-pad { padding: 10px 12px; }
            .set-two { gap: 8px; }
            .set-unit { padding: 8px 9px; gap: 5px; }
            .set-unit-t { font-size: 0.72rem; }
            .set-unit-u { font-size: 0.68rem; }
            .set-num-unit { width: 42px; }
            
            .set-num-sm { width: 46px; }
        }
        
        @media (max-width: 360px) {
            .set-unit { padding: 7px 8px; }
            .set-unit-t { font-size: 0.68rem; }
            .set-num-unit { width: 38px; }
            .set-num-sm { width: 38px; }
        }

        .main-content {
            display: flex;
            gap: 25px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        
        .sidebar {
            width: 280px;
            min-width: 40px; 
            background: var(--card-bg);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 16px var(--shadow);
            height: fit-content;
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        
        .sidebar.collapsed {
            width: 40px;
            padding: 15px 5px;
        }

        .sidebar.collapsed .sidebar-header {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
        }

        .sidebar.collapsed .sidebar-header h2 {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            margin: 0;
            padding: 0;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0;
        }

        .sidebar.collapsed .sidebar-header h2 i {
            transform: rotate(0);
            margin-bottom: 5px;
        }

        .sidebar.collapsed .add-category-btn {
            position: relative;
            top: 0;
            right: 0;
            margin: 10px auto;
        }

        .sidebar.collapsed .category-list,
        .sidebar.collapsed .add-category-btn {
            display: none;
        }

       
.sidebar-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}
.sidebar-header h2 {
    flex: 1 1 auto;          
    margin: 0;
    padding: 0 10px;       
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;         
    user-select: none;       
}
.add-category-btn {
    flex: 0 0 36px;          
    height: 36px;
    border-radius: 50%;
    margin-left: 8px;        
}
        .sidebar h2 {
            color: var(--primary);
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
        }

        .add-category-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            position: absolute;
            top: 10px;
            right: 0;
        }

        .add-category-btn:hover {
            background: var(--secondary);
            transform: rotate(90deg);
        }

        .category-list {
            list-style: none;
        }

        .category-item {
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .category-header {
            padding: 12px 15px;
            background: #f0f7ff;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .category-header:hover {
            background: #e3f0ff;
        }

        .category-header.active {
            background: #d4e5ff;
            font-weight: 600;
            color: var(--primary);
        }

        .category-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .category-title i {
            font-size: 1.2rem;
            width: 24px;
            text-align: center;
        }

        .category-actions {
            display: flex;
            gap: 8px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .category-header:hover .category-actions {
            opacity: 1;
        }

        .category-action-btn {
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            font-size: 0.9rem;
            padding: 2px 5px;
            border-radius: 4px;
        }

        .category-action-btn:hover {
            color: var(--primary);
            background: rgba(0,0,0,0.05);
        }

        .task-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background: #fafcff;
        }

        .category-item.active .task-list {
            max-height: 1000px;
        }

        .sub-task {
            padding: 10px 15px 10px 45px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sub-task:hover {
            background: #f0f9ff;
        }

        .sub-task-actions {
            display: flex;
            gap: 8px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .sub-task:hover .sub-task-actions {
            opacity: 1;
        }

        .add-task-btn {
            background: var(--success);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 6px 12px;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s;
        }

        .add-task-btn:hover {
            background: #3d8b40;
        }

        .tasks-container {
            flex: 1;
            min-width: 300px;
            background: var(--card-bg);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 16px var(--shadow);
            position: relative;
            transition: all 0.3s ease;
        }

        .tasks-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f4f8;
        }

        .date-display {
            font-size: 1.1rem;
            color: var(--text-light);
            background: #f0f7ff;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 500;
        }

        .add-task-main-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 15px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }

        .add-task-main-btn:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }

        .task-list-main {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

                    .task-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
            display: flex;
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease; 
            height: 120px; 
            cursor: grab; 
          }
         
.task-card .date-range-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

        .task-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
        }

                .category-bar {
            width: 40px; 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.9rem;
            letter-spacing: 1px;
            padding: 5px 0;
        }

        .category-bar i {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .category-bar .category-text {
            writing-mode: vertical-lr;
            text-orientation: mixed;
            text-align: center;
            max-height: 100%;
            overflow: hidden;
        }

               .card-content {
            flex: 1;
            display: flex;
            height: 100%;
        }

        
        .data-display-area {
            width: 70%;
            padding: 8px 15px;
            display: flex;
            flex-direction: column;
        }

        .info-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 2px;
            flex-wrap: wrap;
        }

        .task-title {
            font-weight: 700;
            font-size: 1.25rem;
            color: #2c3e50;
        }

        .repeat-info {
            color: #1976d2;
            font-size: 0.85rem;
            background: #e3f2fd;
            padding: 2px 8px;
            border-radius: 12px;
        }

        .plan-time {
            color: #9b59b6;
            font-size: 0.95rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .description-box {
        
            flex: 1;
            min-width: 0;   
            background: #f9fbfd;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            padding: 4px 8px;
            font-size: 0.92rem;
            line-height: 1.3;
            overflow-y: auto;   
            color: #555;
            max-height: 70px;
        }

        .task-title {
            font-weight: 700;
            font-size: 1.25rem;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .task-title i {
            color: #4b6cb7;
        }

        .time-row {
            display: flex;
            gap: 15px;
            margin-bottom: 3px; 
        }

        .time-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        
        .date-range-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-bottom: 3px; 
        }

        .info-label {
            font-size: 0.8rem;
            color: #7f8c8d;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .info-value {
            font-size: 0.95rem;
            font-weight: 600;
            color: #2c3e50;
            padding-left: 0;
        }

        .planned-time .info-value {
            color: #3498db;
        }

        .actual-time .info-value {
            color: #27ae60;
        }

        .date-range .info-value {
            color: #9b59b6;
        }

        .recurring-info {
            background: #e3f2fd;
            color: #1976d2;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 3px; 
        }

            .action-section {
            width: 30%; 
            display: flex;
            flex-direction: column;
            gap: 8px; 
            padding: 8px;
            border-left: 1px solid #f0f4f8;
            justify-content: center;
            align-items: center;
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        .action-btn {
            background: #f0f7ff;
            border: none;
            color: #4b6cb7;
            cursor: pointer;
            font-size: 1.1rem;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .action-btn:hover {
            background: #4b6cb7;
            color: white;
            transform: scale(1.1);
        }

        .timer-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

               .timer-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #3498db;
            background: #f0f8ff;
            padding: 10px 15px 8px 15px;
            border-radius: 10px;
            text-align: center;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 1px;
        }
        .timer-value {
            font-size: 1.8rem;
            font-weight: 700;
            font-family: 'Courier New', monospace;
            line-height: 1.15;
        }
        .timer-mode-tag {
            font-size: 0.68rem;
            font-weight: 400;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            opacity: 0.55;
            margin-top: 1px;
            letter-spacing: 0.5px;
        }
        
        .timer-mode-tag.remote-msg {
            opacity: 1;
            font-weight: 500;
            color: #185fa5;
            font-size: 0.72rem;
            letter-spacing: 0;
            background: #eef4fd;
            border: 1px solid #c5d9f1;
            border-radius: 6px;
            padding: 2px 8px;
            margin-top: 2px;
        }

        .timer-display.countdown-mode {
            color: #e74c3c;
            background: #fff5f5;
        }

        .timer-display.countup-mode {
            color: #3498db;
            background: #f0f8ff;
        }

        .timer-display:hover {
            background: #ffebee;
        }



.timer-controls {
    display: flex;
    flex-wrap: wrap;  
    gap: 10px;  
    align-items: center;
    justify-content: center;  
}

.timer-btn {
    border: none;
    border-radius: 6px;  
    width: 45px;  
    height: 35px;  
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;  
}

.timer-btn i {
    font-size: 16px;  
    margin: 0;
}

        .timer-btn.start {
            background: linear-gradient(to bottom, #27ae60, #2ecc71);
            color: white;
        }

        .timer-btn.pause {
            background: linear-gradient(to bottom, #f39c12, #f1c40f);
            color: white;
        }

        .timer-btn.stop {
            background: linear-gradient(to bottom, #e74c3c, #c0392b);
            color: white;
        }

        .timer-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .timer-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        
        .remote-timer-btn {
            border: none;
            border-radius: 6px;
            padding: 0 12px;
            font-size: 13px;
            cursor: pointer;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.2s;
            height: 35px;  
            box-sizing: border-box;
        }
        .remote-timer-btn.takeover {
            background: linear-gradient(to bottom, #4b6cb7, #3861a8);
        }
        
        .focus-takeover-btn {
            height: auto;
            padding: 15px 30px;
            font-size: 1.2rem;
            border-radius: 10px;
            min-width: 140px;
        }
        .remote-timer-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
        }
        
        .focus-timer-remote-msg {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 16px;
            background: #eef4fd;
            border: 1px solid #c5d9f1;
            border-radius: 8px;
            color: #185fa5;
            font-size: 0.95rem;
            font-weight: 500;
            margin: 6px auto;
        }

        .completed-task {
            background: #e2f8e7;
        }

        .completed-task .task-title {
            color: var(--success);
        }

        .completed-task .timer-display {
            color: var(--success);
        }

        .completed-task .timer-btn {
            display: none;
        }
.completed-task .description-box {
    background: #e2f8e7 !important;   
    border-color: rgba(76, 175, 80, .25); 
}
        
        .completed-label {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #4CAF50;
            color: white;
            border-radius: 8px;
            padding: 8px;
            font-weight: bold;
            grid-column: span 3;
            gap: 8px;
        }

        
        .stats-page {
            display: none;
            background: var(--light-bg);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 16px var(--shadow);
            margin-top: 20px;
        }

        .stats-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .back-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 30px;
        }

        .stat-chart {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            height: 350px;
        }

        .stat-chart h3 {
            text-align: center;
            margin-bottom: 15px;
            color: var(--primary);
        }

        .chart-container {
            height: calc(100% - 40px);
            position: relative;
        }

        
        
        .stat-chart.heatmap-chart {
            grid-column: 1 / -1;
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            height: auto;
            min-height: 200px;
            min-width: 0;
        }

        .heatmap-chart .habit-heat-scroll {
            flex: 0 0 auto;
        }
        .heatmap-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 12px;
            flex-shrink: 0;
        }
        .heatmap-header h3 {
            color: var(--primary);
            margin: 0;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .heatmap-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .heatmap-nav-btn {
            background: var(--card-bg);
            border: 1px solid #ddd;
            border-radius: 6px;
            width: 32px;
            height: 32px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 13px;
            transition: all 0.2s;
        }
        .heatmap-nav-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        .heatmap-title {
            font-weight: 700;
            font-size: 1rem;
            color: #333;
            min-width: 90px;
            text-align: center;
        }
        .heatmap-view-toggle {
            display: flex;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
            margin-left: 8px;
        }
        .heatmap-view-btn {
            padding: 6px 14px;
            border: none;
            background: white;
            cursor: pointer;
            font-size: 13px;
            color: #666;
            transition: all 0.2s;
        }
        .heatmap-view-btn.active {
            background: var(--primary);
            color: white;
        }
        .heatmap-view-btn:hover:not(.active) {
            background: #f0f0f0;
        }

        
        .heatmap-legend {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-top: 12px;
            font-size: 12px;
            color: #888;
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        .heatmap-legend-cell {
            width: 12px;
            height: 12px;
            border-radius: 2.5px;
            flex: 0 0 auto;
        }
        .heatmap-legend-label {
            font-size: 10px;
            color: #999;
            margin-left: -4px;
            margin-right: 6px;
        }

        
        @media (max-width: 768px) {
            .heatmap-view-toggle {
                margin-left: 0;
            }
            .heatmap-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .heatmap-controls {
                width: 100%;
                justify-content: space-between;
            }
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }

        .print-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.3s;
        }

        .print-btn:hover {
            background: var(--secondary);
        }

        .data-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .data-btn {
            background: #5bc0de;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.3s;
        }

        .data-btn:hover {
            background: #31b0d5;
        }

        .export-btn {
            background: var(--success);
        }

        .export-btn:hover {
            background: #3d8b40;
        }

        .import-btn {
            background: #aa66cc;
        }

        .import-btn:hover {
            background: #9933cc;
        }

        .clear-btn {
            background: var(--danger);
        }

        .clear-btn:hover {
            background: #d32f2f;
        }

        
        .format-option-card:hover {
            border-color: #4b6cb7 !important;
            background: #f5f7fa !important;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            overflow: auto;
        }

        .modal-content {
            background: white;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .3s;
            border-radius: 26px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
        }
        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--primary, #4a90d9);
        }
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(22px);
        }

        
        .home-pet-widget {
            position: fixed;
            left: 15px;
            bottom: 80px;
            width: 70px;
            border-radius: 14px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
            padding: 6px;
            z-index: 100;
            cursor: grab;
            transition: box-shadow 0.3s ease, border-color 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.4);
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
        }
        .home-pet-widget:hover {
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
        }
        .home-pet-widget.dragging {
            cursor: grabbing;
            opacity: 0.85;
            transition: none;
        }
        .home-pet-close {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 22px;
            height: 22px;
            background: #e74c3c;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            cursor: pointer;
            z-index: 101;
            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
            transition: all 0.2s ease;
        }
        .home-pet-close:hover {
            transform: scale(1.1);
            background: #c0392b;
        }
        .home-pet-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .home-pet-avatar {
            width: 56px;
            height: 56px;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .home-pet-avatar img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .home-pet-name {
            font-size: 10px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 62px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .home-pet-status {
            font-size: 9px;
            color: rgba(255, 255, 255, 0.9);
            margin-top: 1px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        }

        .modal-header {
            background: var(--primary);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .modal-header h3 {
            font-size: 1.3rem;
        }

        .close-modal {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .modal-body {
            padding: 15px;
            overflow-y: auto;
        }

        #announcementModal .modal-content {
            border-radius: 15px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
            max-width: 560px;
        }

        #announcementModal .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            border-radius: 15px 15px 0 0;
        }

        #announcementModal .modal-header h3 {
            margin: 0;
            color: white;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.2rem;
        }

        #announcementModal .close-modal {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0 8px;
            border-radius: 5px;
            transition: background 0.2s;
            line-height: 1;
        }

        #announcementModal .close-modal:hover {
            background: rgba(255,255,255,0.3);
        }

        #announcementModal .modal-body {
            padding: 20px;
            text-align: left;
            font-size: 14px;
            line-height: 1.8;
            color: #333;
        }

        
        #announcementContent img {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
            margin: 8px 0;
        }
        #announcementContent ul,
        #announcementContent ol {
            text-align: left;
            padding-left: 20px;
            margin: 8px 0;
        }
        #announcementContent li {
            margin: 4px 0;
        }
        #announcementContent a {
            color: #4b6cb7;
            text-decoration: underline;
        }
        #announcementContent blockquote {
            border-left: 3px solid #ddd;
            padding-left: 12px;
            margin: 8px 0;
            color: #666;
        }

        #announcementModal .form-actions {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            text-align: center;
            background: #fafafa;
            border-radius: 0 0 15px 15px;
        }

        
        .announcement-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            background: #e74c3c;
            color: #fff;
            font-size: .72rem;
            font-weight: 700;
            border-radius: 11px;
            padding: 0 6px;
            animation: badgePopIn .3s ease;
        }
        @keyframes badgePopIn {
            from { transform: scale(0); }
            to { transform: scale(1); }
        }

        
        .announcement-nav {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .announcement-nav button {
            border-radius: 20px;
            padding: 6px 16px;
        }
        .announcement-nav button:disabled {
            opacity: .4;
            cursor: default;
        }
        #announcementCounter {
            font-size: .82rem;
            color: #6b7280;
            min-width: 50px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 10px;
        }

.form-group {
    position: relative;
}

#saveTemplateContainer {
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text);
        }

        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
        }

        .time-inputs {
            display: flex;
            gap: 10px;
        }

        .time-inputs .form-control {
            flex: 1;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--border);
            position: sticky;
            bottom: 0;
            background: white;
            z-index: 10;
        }

        .btn {
            padding: 6px 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--secondary);
        }

        .btn-danger {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 15px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }

        .btn-danger:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #e0e0e0;
            color: var(--text);
        }

        .btn-secondary:hover {
            background: #d0d0d0;
        }

        .btn-outline-primary {
            background: transparent;
            color: var(--primary);
            border: 1px solid var(--primary);
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-outline-primary:hover {
            background: var(--primary);
            color: white;
        }

        .single-delete-message {
            display: none;
            margin: 20px 0;
            padding: 10px;
            background: #fff0f0;
            border-radius: 8px;
            border-left: 3px solid var(--danger);
        }

      
#wheelAlertModal {
    z-index: 4000; 
}


#commonSummarySelect {
    max-width: calc(100% - 120px); 
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

#commonSummarySelect option {
    white-space: normal;
    word-wrap: break-word;
    max-width: 250px; 
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 250px;
}

.confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2100; 
    display: none;
    justify-content: center;
    align-items: center;
}

        .confirmation-content {
            background: white;
            border-radius: 15px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }

        
        .stat-info-content {
            max-width: 460px;
        }
        .stat-info-icon {
            width: 64px; height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
            font-size: 28px;
        }
        .stat-info-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin: 0 0 18px;
            text-align: center;
        }
        .stat-info-body {
            text-align: left;
            max-height: 50vh;
            overflow-y: auto;
            padding: 0 4px;
        }
        .stat-info-section {
            margin-bottom: 14px;
        }
        .stat-info-section:last-child {
            margin-bottom: 0;
        }
        .stat-info-label {
            font-size: .85rem;
            font-weight: 600;
            color: #475569;
            margin-bottom: 4px;
        }
        .stat-info-text {
            font-size: .82rem;
            color: #64748b;
            line-height: 1.6;
        }
        .stat-info-text b {
            color: #1e293b;
        }
        .stat-card-info {
            position: relative;
        }
        .stat-card-info::before {
            content: 'ⓘ';
            position: absolute;
            top: 6px;
            right: 6px;
            font-size: 11px;
            color: #94a3b8;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .stat-card-info:hover::before {
            opacity: 1;
        }

        
        
        .clear-item-label {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            column-gap: 6px;
            row-gap: 2px;
            align-items: start;
            text-align: left;   
            padding: 6px 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            transition: background 0.15s, border-color 0.15s;
        }
        .clear-item-label:hover {
            background: #fafafa;
            border-color: #bbb;
        }
        .clear-item-label input[type="checkbox"] {
            grid-column: 1;
            grid-row: 1;
            margin: 0;
            margin-top: 2px;
            cursor: pointer;
        }
        .clear-item-name {
            grid-column: 2;
            grid-row: 1;
            font-weight: 600;
            color: #333;
            display: block;
        }
        .clear-item-desc {
            grid-column: 2;
            grid-row: 2;
            display: block;
            font-size: 11px;
            color: #888;
            font-weight: normal;
            line-height: 1.3;
        }

        .confirmation-body {
            padding-top: 10px;
            padding-right: 30px;
            padding-left: 30px;
            text-align: center;
        }

        
        @media (max-width: 480px) {
            #unlockedBadgeModal .confirmation-body {
                padding: 38px 20px 14px !important;
            }
            #unlockedBadgeModal .confirmation-actions {
                padding: 2px 20px 14px !important;
            }
        }

        .confirmation-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 20px;
            border-top: 1px solid var(--border);
        }

        .stop-actions-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 20px;
            border-top: 1px solid var(--border);
        }

        .stop-action-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            border: 2px solid;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;
            width: 100%;
            text-align: left;
        }

        .stop-action-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            background: #fff;
        }

        .stop-action-item:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .stop-icon-circle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .stop-icon-circle i {
            font-size: 1.2rem;
            color: white;
        }

        .stop-icon-green {
            background: #28a745;
        }

        .stop-icon-red {
            background: #dc3545;
        }

        .stop-icon-blue {
            background: #17a2b8;
        }

        .stop-icon-orange {
            background: #fd7e14;
        }

        .stop-border-green {
            border-color: #28a745;
        }

        .stop-border-red {
            border-color: #dc3545;
        }

        .stop-border-blue {
            border-color: #17a2b8;
        }

        .stop-border-orange {
            border-color: #fd7e14;
        }

        .stop-action-item:disabled .stop-icon-circle {
            background: #6c757d;
        }

        .stop-item-content {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .stop-item-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            line-height: 1.2;
        }

        .stop-item-desc {
            font-size: 0.85rem;
            color: #666;
            margin-top: 4px;
            line-height: 1.3;
        }

        
        .parent-section {
            margin-bottom: 24px;
        }
        .parent-section-title {
            font-size: 15px; font-weight: 700; color: #333;
            margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
        }
        .parent-section-title i { color: #ff6b9d; }
        .parent-section-desc {
            font-size: 12px; color: #999; margin: 0 0 14px;
        }
        
        .parent-card-group {
            margin-bottom: 16px;
        }
        .parent-card-group-title {
            font-size: 13px; font-weight: 600; color: #555;
            margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
            padding-left: 4px;
        }
        .parent-card-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        .parent-card {
            display: flex; align-items: center; justify-content: space-between;
            background: #fff; border: 1px solid #eee;
            border-radius: 10px; padding: 10px 14px;
            cursor: pointer; transition: all 0.2s;
            user-select: none;
        }
        .parent-card:hover {
            border-color: #ff6b9d; box-shadow: 0 2px 8px rgba(255,107,157,0.1);
        }
        .parent-card input { display: none; }
        .parent-card-info { flex: 1; min-width: 0; }
        .parent-card-info span {
            display: block; font-size: 13px; font-weight: 500; color: #333;
        }
        .parent-card-info small {
            display: block; font-size: 11px; color: #aaa; margin-top: 2px;
        }
        .parent-card-toggle {
            width: 42px; height: 24px; border-radius: 12px;
            background: #ddd; position: relative; flex-shrink: 0;
            transition: background 0.3s; margin-left: 10px;
        }
        .parent-card-toggle::after {
            content: ''; position: absolute; top: 2px; left: 2px;
            width: 20px; height: 20px; border-radius: 50%;
            background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: transform 0.3s;
        }
        .parent-card input:checked + .parent-card-toggle {
            background: #ff6b9d;
        }
        .parent-card input:checked + .parent-card-toggle::after {
            transform: translateX(18px);
        }

        
        .switch {
            position: relative; display: inline-block;
            width: 50px; height: 24px;
        }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #ccc; transition: .4s; border-radius: 24px;
        }
        .slider:before {
            position: absolute; content: ""; height: 18px; width: 18px;
            left: 3px; bottom: 3px; background-color: white;
            transition: .4s; border-radius: 50%;
        }
        input:checked + .slider { background-color: var(--primary); }
        input:checked + .slider:before { transform: translateX(26px); }

        .password-control-item { display: none; }
        .password-control-label { display: none; }

        .repeat-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .repeat-option {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .repeat-inputs {
            display: flex;
            gap: 10px;
            margin-left: 10px;
            align-items: center;
        }

        .repeat-inputs input {
            width: 60px;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 5px;
        }

        .delete-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin: 20px 0;
        }

        .delete-option {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .single-delete-message {
            display: none;
            margin: 20px 0;
            padding: 10px;
            background: #fff0f0;
            border-radius: 8px;
            border-left: 4px solid var(--danger);
        }

        .required:after {
            content: " *";
            color: var(--danger);
        }

        
        .date-row {
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .date-group {
            min-width: auto;
            flex: 1;
        }

        
        .tasks-header-container {
            display: flex;
            flex-direction: column;
            margin-bottom: 0; 
        }

        .header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .date-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f0f7ff;
            padding: 12px 20px;
            border-radius: 12px;
            margin-bottom: 0; 
        }

        .date-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .current-date-display {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary);
        }

        .date-controls {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .week-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .week-toggle {
            background: #e3f0ff;
            border-radius: 6px;
            overflow: hidden;
            display: flex;
        }

        .week-btn {
            padding: 6px 12px;
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s;
        }

        .week-btn.active {
            background: var(--primary);
            color: white;
        }

        .calendar-toggle {
            background: var(--primary);
            color: white;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .calendar-toggle:hover {
            background: var(--secondary);
        }

        .action-buttons-container {
            display: flex;
            gap: 10px;
        }

        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transition: opacity 0.3s;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #4b6cb7;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        
        .hxb-loading-progress {
            width: 260px;
            max-width: 70vw;
            margin-top: 18px;
        }

        .hxb-loading-track {
            height: 8px;
            background: #e3e8f2;
            border-radius: 999px;
            overflow: hidden;
        }

        .hxb-loading-fill {
            width: 0%;
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #4b6cb7, #7b9ae0);
            transition: width 0.35s ease;
            position: relative;
            overflow: hidden;
        }

        
        .hxb-loading-fill::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(45deg,
                rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%,
                rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%);
            background-size: 18px 18px;
            animation: hxbBarStripes 1s linear infinite;
        }

        @keyframes hxbBarStripes {
            from { background-position: 0 0; }
            to { background-position: 18px 0; }
        }

        .hxb-loading-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-top: 8px;
            width: 100%;
            font-size: 12px;
            color: #5a6b8c;
        }

        .hxb-loading-step {
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .hxb-loading-percent {
            flex: 0 0 auto;
            font-variant-numeric: tabular-nums;
        }

        
        .hxb-loading-fill.hxb-done {
            background: linear-gradient(90deg, #2ecc71, #58d98c);
        }

        
        .hxb-field-hint {
            margin: 6px 0 0 0;
            font-size: 12px;
            line-height: 1.6;
            color: #6b7a99;
        }

        
        .hxb-field-hint.hxb-warn {
            color: #d9822b;
        }

        .hxb-value-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hxb-value-row .form-control {
            flex: 1 1 auto;
            min-width: 0;
        }

        .hxb-value-unit {
            flex: 0 0 auto;
            font-size: 13px;
            color: #6b7a99;
            white-space: nowrap;
        }

        .calendar-nav {
            display: flex;
            gap: 10px;
        }

        
        #focusModal {
            display: none;
            background: rgba(255, 255, 255, 0.95);
            z-index: 2000;
        }

        .focus-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .focus-task-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .focus-task-content {
    width: 90%;
    max-width: 800px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    padding: 60px 40px 40px;
    position: relative; 
}

        
        .focus-top-left {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 10;
            padding: 8px 16px;
            font-size: 0.9rem;
        }

        .focus-top-right {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 10;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .focus-action-btn {
            background: rgba(75, 108, 183, 0.1);
            border: 1px solid rgba(75, 108, 183, 0.2);
            color: var(--primary);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }

        .focus-action-btn:hover {
            background: rgba(75, 108, 183, 0.2);
        }

        
        .focus-sound-toggle {
            background: rgba(75, 108, 183, 0.1);
            border: 1px solid rgba(75, 108, 183, 0.2);
            color: var(--primary);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }
        .focus-sound-toggle:hover {
            background: rgba(75, 108, 183, 0.2);
        }
        .focus-sound-toggle.muted {
            color: #aaa;
            background: rgba(0, 0, 0, 0.05);
            border-color: rgba(0, 0, 0, 0.12);
        }
        .focus-sound-toggle.muted:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        
        .focus-task-title {
            margin-top: 10px;
            position: relative;
            z-index: 5;
        }

        


        .focus-task-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 15px;
            color: var(--primary);
        }

        .focus-timer-display {
            font-size: 5rem;
            font-weight: bold;
            text-align: center;
            font-family: 'Courier New', monospace;
            color: #3498db;
            margin-top: 10px;
            margin-right: 0px;
            margin-bottom: 10px;
            margin-left: 0px;
            background: transparent;
            border: none;
            outline: none;
            cursor: default;
            width: 100%;
        }
        
        .focus-timer-display.countdown-mode {
            color: #e74c3c;
        }
        
        .focus-timer-display.countup-mode {
            color: #3498db;
        }
        
        .focus-timer-display:not([readonly]) {
            cursor: text;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #e74c3c;
            border-radius: 10px;
            padding: 10px;
        }
        
        .focus-timer-mode-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .focus-timer-mode-tab {
            padding: 8px 20px;
            font-size: 1rem;
            border: 2px solid #ddd;
            border-radius: 20px;
            background: white;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .focus-timer-mode-tab.active {
            border-color: #3498db;
            background: #3498db;
            color: white;
        }
        
        .focus-timer-mode-tab.countdown-active {
            border-color: #e74c3c;
            background: #e74c3c;
            color: white;
        }
        
        .focus-timer-mode-tab.pomodoro-active {
            border-color: #e74c3c;
            background: #e74c3c;
            color: white;
        }
        
        .focus-timer-mode-tab:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .focus-controls {
            display: flex;
            flex-wrap: wrap;  
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
        }

        .focus-btn {
            padding: 15px 30px;
            font-size: 1.2rem;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
        }

        .focus-btn.start {
            background: linear-gradient(to bottom, #27ae60, #2ecc71);
            color: white;
        }

        .focus-btn.pause {
            background: linear-gradient(to bottom, #f39c12, #f1c40f);
            color: white;
        }

        .focus-btn.stop {
            background: linear-gradient(to bottom, #e74c3c, #c0392b);
            color: white;
        }

        .focus-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .focus-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .focus-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            row-gap: 10px;
            column-gap: 20px;
            margin-top: 20px;
        }

        .focus-detail-item {
            padding-top: 5px;
            padding-right: 15px;
            padding-bottom: 5px;
            padding-left: 15px;
			
            background: #f9fbfd;
            border-radius: 10px;
            border: 1px solid #edf2f7;
        }

        .focus-detail-item h4 {
            margin-bottom: 10px;
            color: #4b6cb7;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .focus-detail-item p {
            margin: 0;
            line-height: 1.6;
        }

        
        .focus-goal-wrap, .habit-goal-wrap { grid-column: 1 / -1; }
        .focus-goal-wrap:empty, .habit-goal-wrap:empty { display: none; }
        .focus-goal-block {
            background: #f9fbfd;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            padding: 10px 15px;
        }
        .habit-goal-wrap .focus-goal-block { margin-top: 14px; }
        .fgb-title {
            display: flex; align-items: center; gap: 8px;
            margin: 0 0 8px; color: #4b6cb7; font-size: 0.9rem; font-weight: 700;
        }
        .fgb-item + .fgb-item { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eef1f6; }
        .fgb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
        .fgb-ico {
            flex: none; width: 22px; height: 22px; border-radius: 6px; color: #fff;
            display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
        }
        .fgb-nm {
            flex: 1; min-width: 0; font-weight: 600; color: #1e293b; font-size: 0.88rem;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .fgb-bar { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
        .fgb-bar > i { display: block; height: 100%; border-radius: 999px; transition: width 0.3s; }
        .fgb-meta { margin-top: 6px; font-size: 0.78rem; color: #64748b; }

        .focus-points-section {
            grid-column: 1 / span 2;
        }

        .points-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .points-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 15px;
            border-radius: 8px;
            min-width: 100px;
            text-align: center;
        }

        .points-positive {
            background: #e8f5e9;
            border: 1px solid #a5d6a7;
        }

        .points-negative {
            background: #ffebee;
            border: 1px solid #ef9a9a;
        }

        .points-label {
            font-size: 0.8rem;
            color: #666;
            margin-bottom: 5px;
        }

        .points-value {
            font-size: 1.1rem;
            font-weight: bold;
        }

        .points-positive .points-value {
            color: #4CAF50;
        }

        .points-negative .points-value {
            color: #c62828;
        }

        
        .icon-fallback .fas {
            position: relative;
            visibility: hidden;
        }

        .icon-fallback .fas::before {
            content: attr(data-fallback);
            position: absolute;
            visibility: visible;
            left: 0;
            top: 0;
            font-size: 0.7em;
            background: #f0f0f0;
            padding: 2px;
            border-radius: 3px;
            font-family: Arial, sans-serif;
            font-weight: bold;
        }

        
        .overview-grid {
            display: grid;
            gap: 1px;
            background: var(--border);
        }

        .overview-row {
            display: grid;
        }

        .overview-header-row {
            background: #f0f7ff;
            font-weight: bold;
        }

        .overview-time-header {
            padding: 10px;
        }

        .overview-date-header {
            padding: 2px;
            text-align: center;
            font-size: 0.8rem;
        }

        .overview-time-cell {
            padding: 3px 8px;
            background: #f0f7ff;
            font-size: 0.9rem;
        }

        .overview-cell {
            padding: 1px;
            background: white;
            min-height: 32px;
            border: 1px solid #e0e0e0;
            word-wrap: break-word;
            white-space: normal;
            font-size: 0.8rem;
        }

        .overview-task {
            background: #e3f0ff;
            padding: 1px;
            border-radius: 2px;
            font-size: 0.8rem;
            word-wrap: break-word;
            white-space: normal;
            margin: 0;
        }

        .overview-task.completed {
            background: #e2f8e7;
        }

        .overview-task.flexible {
            background: #f0f7ff;
        }

        .overview-task-name {
            font-weight: bold;
        }

        .overview-task-time {
            font-size: 0.7rem;
            color: #666;
        }

        .overview-flexible-header {
            padding: 10px;
            background: #f0f7ff;
            font-size: 0.9rem;
            font-weight: bold;
        }

        
        .overview-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .overview-tab {
            padding: 8px 15px;
            border: none;
            border-radius: 6px;
            background: #f0f7ff;
            color: var(--primary);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .overview-tab.active {
            background: var(--primary);
            color: white;
        }

        
        .custom-date-controls {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        
        #overviewContent {
            padding: 20px;
            overflow-x: auto;
        }

        
        .overview-flexible-header {
            padding: 10px;
            background: #f0f7ff;
            font-size: 0.9rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        
        .overview-row {
            
        }

        
        .overview-tab {
            padding: 8px 15px;
            border: none;
            border-radius: 6px;
            background: #f0f7ff !important;
            color: var(--primary) !important;
            cursor: pointer;
            transition: all 0.3s ease !important;
        }

        .overview-tab.active {
            background: var(--primary) !important;
            color: white !important;
        }

        
        #congratsModal {
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 3000;
            background: rgba(0, 0, 0, 0.35);
        }

        .congrats-content {
            position: relative;
            background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
            border-radius: 24px;
            padding: 28px 24px 24px;
            text-align: center;
            max-width: 480px;
            width: 92%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 4px #fbbf24 inset;
            animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: visible;
        }

        @keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        .congrats-content h2 {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 800;
            font-size: 1.7rem;
            margin: 0 0 8px;
            line-height: 1.3;
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
        }

        .congrats-trophy-wrap {
            position: relative;
            display: inline-block;
            margin: 4px 0 8px;
        }

        .congrats-icon {
            font-size: 64px;
            color: #f59e0b;
            text-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
            animation: bounce 1.5s ease-in-out infinite;
            display: inline-block;
            line-height: 1;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        
        .congrats-trophy-wrap::before,
        .congrats-trophy-wrap::after {
            content: "✦";
            position: absolute;
            color: #fbbf24;
            font-size: 18px;
            opacity: 0.7;
        }
        .congrats-trophy-wrap::before {
            top: 0;
            left: -28px;
            animation: sparkle 2s ease-in-out infinite;
        }
        .congrats-trophy-wrap::after {
            top: 6px;
            right: -28px;
            animation: sparkle 2s ease-in-out infinite 0.5s;
        }

        @keyframes sparkle {
            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
            50% { transform: scale(1.3) rotate(180deg); opacity: 1; }
        }

        .congrats-message {
            font-size: 1.05rem;
            color: #4b5563;
            margin-bottom: 20px;
            line-height: 1.5;
            font-weight: 500;
        }

        
        .stats-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 16px 0 18px;
        }

        .stats-card-item {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 14px;
            padding: 14px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(251, 191, 36, 0.25);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            text-align: left;
        }

        .stats-card-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .stats-card-icon.study { background: #fef3c7; color: #d97706; }
        .stats-card-icon.sports { background: #d1fae5; color: #059669; }
        .stats-card-icon.tasks { background: #e0e7ff; color: #4f46e5; }
        .stats-card-icon.rate { background: #fee2e2; color: #dc2626; }

        .stats-card-content {
            flex: 1;
            min-width: 0;
        }

        .stats-card-label {
            font-size: .72rem;
            color: #6b7280;
            margin-bottom: 2px;
            line-height: 1.2;
        }

        .stats-card-value {
            font-size: 1.1rem;
            font-weight: 700;
            color: #d97706;
            line-height: 1.2;
        }

        .stats-card-value.rate-done {
            color: #059669;
        }

        .backup-tip {
            color: #d97706;
            font-weight: 500;
            margin: 14px 0 14px;
            font-size: .9rem;
        }

        .backup-btn {
            background: linear-gradient(135deg, #4b6cb7 0%, #3a5795 100%);
            color: white;
            border: none;
            border-radius: 30px;
            padding: 12px 36px;
            font-size: 1.05rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(75, 108, 183, 0.4);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .backup-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(75, 108, 183, 0.6);
        }

        .backup-btn i {
            font-size: 1.1rem;
        }

        .close-congrats {
            position: absolute;
            top: 14px;
            right: 14px;
            background: rgba(255, 255, 255, 0.7);
            border: none;
            font-size: 1.2rem;
            color: #9ca3af;
            cursor: pointer;
            transition: all 0.3s;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            z-index: 5;
        }

        .close-congrats:hover {
            color: #374151;
            background: rgba(255, 255, 255, 1);
            transform: rotate(90deg);
        }

        

        
        .eg-card {
            position: relative;
            overflow: hidden;
            border-radius: 26px;
            padding: 26px 22px 22px;
            text-align: center;
            width: 92%;
            max-width: 420px;      
            margin: auto;          
            animation: popIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .eg-card > * { position: relative; z-index: 2; }

        .eg-close {
            position: absolute;
            top: 13px;
            right: 13px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 0;
            font-size: 19px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
            cursor: pointer;
            font-family: inherit;
            transition: transform .25s ease, background .25s ease;
        }
        .eg-close:hover { transform: rotate(90deg); }

        .eg-hero {
            width: 62px;
            height: 62px;
            margin: 2px auto 12px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        
        .eg-hero svg { width: 31px; height: 31px; display: none; }
        
        .eg-hero .h-warm { display: block; }
        
        .eg-card.v-fresh .eg-hero .h-warm,
        .eg-card.v-night .eg-hero .h-warm { display: none; }
        .eg-card.v-fresh .eg-hero .h-fresh { display: block; }
        .eg-card.v-night .eg-hero .h-night { display: block; }

        .eg-badge {
            display: inline-block;
            font-size: 11.5px;
            font-weight: 600;
            border-radius: 999px;
            padding: 3px 12px;
            z-index: 2;
        }

        .eg-text {
            font-size: 22px;
            font-weight: 800;
            line-height: 1.5;
            margin: 14px 4px 16px;
            letter-spacing: .2px;
            overflow-wrap: anywhere;   
            z-index: 2;
        }

        
        .eg-voice {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            border-radius: 999px;
            padding: 5px 16px 5px 5px;
            margin: 0 auto 14px;
            max-width: 100%;
            z-index: 2;
        }
        .eg-play {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            cursor: pointer;
            font-family: inherit;
        }
        .eg-play i { font-size: 11px; color: #fff; line-height: 1; }
        
        .eg-wave { display: flex; align-items: center; gap: 2px; height: 16px; flex: 0 1 auto; min-width: 0; }
        .eg-wave i { display: block; width: 2.5px; border-radius: 2px; height: 6px; }
        .eg-wave i:nth-child(2)  { height: 9px; }
        .eg-wave i:nth-child(3)  { height: 13px; }
        .eg-wave i:nth-child(4)  { height: 7px; }
        .eg-wave i:nth-child(5)  { height: 12px; }
        .eg-wave i:nth-child(6)  { height: 16px; }
        .eg-wave i:nth-child(7)  { height: 9px; }
        .eg-wave i:nth-child(8)  { height: 14px; }
        .eg-wave i:nth-child(9)  { height: 7px; }
        .eg-wave i:nth-child(10) { height: 10px; }
        .eg-wave i:nth-child(11) { height: 15px; }
        .eg-wave i:nth-child(12) { height: 8px; }
        .eg-wave i:nth-child(13) { height: 5px; }
        .eg-wave i:nth-child(14) { height: 11px; }
        .eg-wave i:nth-child(15) { height: 7px; }
        .eg-wave i:nth-child(16) { height: 4px; }
        .eg-wave.playing i { animation: egWave .9s ease-in-out infinite; }
        .eg-wave.playing i:nth-child(2n) { animation-delay: .15s; }
        .eg-wave.playing i:nth-child(3n) { animation-delay: .3s; }
        .eg-wave.playing i:nth-child(5n) { animation-delay: .45s; }
        @keyframes egWave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.25); } }
        .eg-dur { font-size: 11.5px; flex: 0 0 auto; opacity: .85; }

        
        .eg-stats {
            font-size: 12.5px;
            line-height: 1.7;
            z-index: 2;
        }
        .eg-stats b { font-weight: 700; font-variant-numeric: tabular-nums; }

        
        .eg-card.v-warm {
            background: linear-gradient(165deg, #fff8ea 0%, #ffeecb 46%, #ffe1ad 100%);
            box-shadow: 0 22px 50px -14px rgba(217, 119, 6, .45), 0 4px 16px rgba(0, 0, 0, .05), inset 0 0 0 1px rgba(255, 255, 255, .65);
        }
        .eg-card.v-warm::before {
            content: "";
            position: absolute;
            top: -84px; left: 50%;
            transform: translateX(-50%);
            width: 300px; height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(251, 191, 36, .6), rgba(251, 191, 36, 0) 66%);
            pointer-events: none;
        }
        .eg-card.v-warm::after {
            content: "";
            position: absolute; inset: 0;
            pointer-events: none;
            background-image:
                radial-gradient(2px 2px at 13% 28%, rgba(255, 255, 255, .95), transparent),
                radial-gradient(1.6px 1.6px at 84% 22%, rgba(255, 255, 255, .9), transparent),
                radial-gradient(1.6px 1.6px at 70% 78%, rgba(255, 255, 255, .7), transparent),
                radial-gradient(1.4px 1.4px at 22% 82%, rgba(255, 255, 255, .7), transparent);
        }
        .eg-card.v-warm .eg-hero { background: linear-gradient(145deg, #fcd34d, #f59e0b); box-shadow: 0 10px 22px -6px rgba(217, 119, 6, .62), 0 0 0 6px rgba(251, 191, 36, .2); }
        .eg-card.v-warm .eg-hero svg { color: #fff; }
        .eg-card.v-warm .eg-badge { background: rgba(251, 191, 36, .26); color: #a16207; }
        .eg-card.v-warm .eg-text { color: #7c4a03; }
        .eg-card.v-warm .eg-voice { background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 5px 16px rgba(217, 119, 6, .14); }
        .eg-card.v-warm .eg-play { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 4px 12px rgba(217, 119, 6, .45); }
        .eg-card.v-warm .eg-wave i { background: #f59e0b; }
        .eg-card.v-warm .eg-dur { color: #a16207; }
        .eg-card.v-warm .eg-stats { color: #a07a3c; }
        .eg-card.v-warm .eg-stats b { color: #b45309; }
        .eg-card.v-warm .eg-close { background: rgba(255, 255, 255, .72); color: #a1885c; }

        
        .eg-card.v-fresh {
            background: linear-gradient(165deg, #f2fdf9 0%, #ddf6ee 48%, #cdeeff 100%);
            box-shadow: 0 22px 50px -16px rgba(13, 148, 136, .4), 0 4px 16px rgba(0, 0, 0, .05), inset 0 0 0 1px rgba(255, 255, 255, .7);
        }
        .eg-card.v-fresh::before {
            content: "";
            position: absolute;
            top: -84px; left: 50%;
            transform: translateX(-50%);
            width: 300px; height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(52, 211, 153, .45), rgba(52, 211, 153, 0) 66%);
            pointer-events: none;
        }
        .eg-card.v-fresh::after {
            content: "";
            position: absolute; inset: 0;
            pointer-events: none;
            background-image:
                radial-gradient(2px 2px at 15% 26%, rgba(255, 255, 255, .95), transparent),
                radial-gradient(1.6px 1.6px at 82% 30%, rgba(255, 255, 255, .9), transparent),
                radial-gradient(1.4px 1.4px at 30% 84%, rgba(255, 255, 255, .8), transparent);
        }
        .eg-card.v-fresh .eg-hero { background: linear-gradient(145deg, #34d399, #0d9488); box-shadow: 0 10px 22px -6px rgba(13, 148, 136, .55), 0 0 0 6px rgba(52, 211, 153, .18); }
        .eg-card.v-fresh .eg-hero svg { color: #fff; }
        .eg-card.v-fresh .eg-badge { background: rgba(16, 185, 129, .18); color: #0f766e; }
        .eg-card.v-fresh .eg-text { color: #0b5e52; }
        .eg-card.v-fresh .eg-voice { background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 5px 16px rgba(13, 148, 136, .12); }
        .eg-card.v-fresh .eg-play { background: linear-gradient(135deg, #34d399, #0d9488); box-shadow: 0 4px 12px rgba(13, 148, 136, .4); }
        .eg-card.v-fresh .eg-wave i { background: #10b981; }
        .eg-card.v-fresh .eg-dur { color: #0f766e; }
        .eg-card.v-fresh .eg-stats { color: #4b7d74; }
        .eg-card.v-fresh .eg-stats b { color: #0f766e; }
        .eg-card.v-fresh .eg-close { background: rgba(255, 255, 255, .72); color: #7f9a95; }

        
        .eg-card.v-night {
            background: radial-gradient(130% 95% at 50% 0%, #42518c 0%, #28325a 52%, #141a30 100%);
            box-shadow: 0 24px 56px -16px rgba(12, 16, 38, .75), inset 0 0 0 1px rgba(255, 255, 255, .09);
        }
        .eg-card.v-night::after {
            content: "";
            position: absolute; inset: 0;
            pointer-events: none;
            background-image:
                radial-gradient(1.8px 1.8px at 12% 22%, rgba(255, 255, 255, .95), transparent),
                radial-gradient(1.5px 1.5px at 78% 16%, rgba(255, 255, 255, .9), transparent),
                radial-gradient(1.5px 1.5px at 88% 44%, rgba(255, 255, 255, .7), transparent),
                radial-gradient(1.4px 1.4px at 26% 62%, rgba(255, 226, 150, .85), transparent),
                radial-gradient(1.6px 1.6px at 64% 84%, rgba(255, 255, 255, .7), transparent),
                radial-gradient(1.3px 1.3px at 40% 12%, rgba(255, 255, 255, .7), transparent);
        }
        .eg-card.v-night .eg-hero { background: linear-gradient(145deg, #ffe08a, #f59e0b); box-shadow: 0 10px 26px -6px rgba(245, 158, 11, .7), 0 0 0 7px rgba(255, 214, 102, .14); }
        .eg-card.v-night .eg-hero svg { color: #2a1e05; }
        .eg-card.v-night .eg-badge { background: rgba(255, 255, 255, .14); color: #ffe6a8; }
        .eg-card.v-night .eg-text { color: #fff; text-shadow: 0 2px 22px rgba(255, 206, 84, .5); }
        .eg-card.v-night .eg-voice { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
        .eg-card.v-night .eg-play { background: linear-gradient(135deg, #ffd166, #f59e0b); box-shadow: 0 4px 14px rgba(245, 158, 11, .55); }
        .eg-card.v-night .eg-wave i { background: #ffd166; }
        .eg-card.v-night .eg-dur { color: #ffd98a; }
        .eg-card.v-night .eg-stats { color: #a9b4d6; }
        .eg-card.v-night .eg-stats b { color: #ffd166; }
        .eg-card.v-night .eg-close { background: rgba(255, 255, 255, .13); color: #c8d0e8; }

        
        .mg-card {
            background: #fff;
            border-radius: 16px;
            width: 92%;
            max-width: 520px;
            margin: auto;                              
            box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            
            max-height: calc(100vh - 40px);
            max-height: calc(100dvh - 40px);
        }
        .mg-hd {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: #fff;
            padding: 13px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 0 0 auto;
        }
        .mg-hd h3 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
        .mg-hd h3 i { font-size: 15px; }
        
        .mg-hd h3 svg { width: 16px; height: 16px; flex: 0 0 auto; }
        .mg-x {
            background: rgba(255, 255, 255, .2);
            border: 0;
            color: #fff;
            font-size: 17px;
            line-height: 1;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-family: inherit;
        }
        .mg-bd { padding: 14px 18px 18px; overflow-y: auto; }

        
        .mg-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            padding: 9px 0;
        }
        .mg-row + .mg-row { border-top: 1px solid #eef2f7; }
        .mg-lab { font-size: 13.5px; color: #2f3844; }
        .mg-sub { font-size: 11.5px; color: #98a2b3; margin-top: 2px; line-height: 1.45; }

        
        .sw {
            position: relative;
            flex: 0 0 auto;
            width: 42px;
            height: 23px;
            border: 0;
            padding: 0;
            border-radius: 999px;
            background: #cfd6e0;
            cursor: pointer;
            transition: background .18s ease;
        }
        .sw i {
            position: absolute;
            top: 2.5px;
            left: 2.5px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(60, 80, 120, .3);
            transition: transform .18s ease;
        }
        .sw.on { background: var(--primary); }
        .sw.on i { transform: translateX(19px); }

        
        .seg { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 3px; background: #f1f4f9; border-radius: 9px; }
        .seg button {
            font: inherit;
            font-size: 12.5px;
            font-weight: 600;
            color: #64708a;
            background: transparent;
            border: 0;
            border-radius: 7px;
            padding: 5px 13px;
            cursor: pointer;
            white-space: nowrap;
        }
        .seg button.on { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(24, 40, 72, .13); }

        
        .mg-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0; }
        .sty {
            font: inherit;
            border: 1px solid #e3e8ef;
            border-radius: 10px;
            padding: 8px 6px 7px;
            text-align: center;
            background: #fff;
            cursor: pointer;
        }
        .sty.on { border-color: var(--primary); background: #f4f8ff; box-shadow: 0 0 0 2px rgba(75, 108, 183, .14); }
        .sty i { display: block; width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 5px; }
        .sty span { display: block; font-size: 11.5px; color: #5f6b7a; line-height: 1.2; }
        .sty.on span { color: var(--primary); font-weight: 600; }
        .sty i.g-a { background: linear-gradient(145deg, #fcd34d, #f59e0b); }
        .sty i.g-b { background: linear-gradient(145deg, #34d399, #0d9488); }
        .sty i.g-c { background: linear-gradient(145deg, #42518c, #141a30); }

        .mg-sep { height: 1px; background: #eef2f7; margin: 12px 0; }
        .mg-lh { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #98a2b3; margin: 2px 0 8px; }
        .mg-lh b { color: #475569; font-weight: 600; }
        .mg-lh .num { font-variant-numeric: tabular-nums; }
        .mg-list { max-height: 236px; overflow-y: auto; }
        .mg-empty { font-size: 12.5px; color: #98a2b3; text-align: center; padding: 14px 0; }

        .mg-li {
            background: #fbfcfe;
            border: 1px solid #eef2f7;
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 8px;
        }
        .mg-li:last-child { margin-bottom: 0; }
        .mg-li-t {
            font-size: 13.5px;
            color: #2f3844;
            margin: 0 0 8px;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }
        .mg-li-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .mg-li-b {
            font: inherit;
            font-size: 11.5px;
            border: 1px solid #cfd6e0;
            border-radius: 6px;
            padding: 2.5px 9px;
            color: var(--primary);
            background: #fff;
            cursor: pointer;
        }
        .mg-li-b.dz { border-color: #f6c6c0; color: var(--danger); }
        .mg-li-ask { font-size: 11.5px; color: #b4231a; }
        
        .mg-li-mk {
            font-size: 11px;
            color: #98a2b3;
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        
        #encourageEditModal { z-index: 2200; }
        .eg-edit-card { max-width: 460px; }
        .eg-edit-input {
            font: inherit;
            font-size: 14px;
            width: 100%;
            box-sizing: border-box;      
            margin-top: 6px;
            padding: 9px 11px;
            border: 1px solid #cfd6e0;
            border-radius: 9px;
            color: #2f3844;
        }
        .eg-edit-input:focus { outline: none; border-color: var(--primary); }
        .eg-edit-vstat {
            font-size: 12.5px;
            color: #64748b;
            margin: 6px 0 8px;
            min-height: 17px;            
        }
        .eg-edit-vstat.on  { color: var(--primary); font-weight: 600; }
        .eg-edit-vstat.rec { color: #b4231a; font-weight: 600; }
        .eg-edit-vacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .eg-edit-vacts .mg-li-b { font-size: 12px; padding: 5px 11px; }
        .eg-edit-vacts .mg-li-b i { font-size: 10.5px; margin-right: 3px; }
        
        .mg-li-b.rec {
            border-color: #f3b8b2;
            background: #fdf2f1;
            color: #b4231a;
            animation: mgRecPulse 1.05s ease-in-out infinite;
        }
        
        .mg-li-b:disabled { opacity: .45; cursor: default; }
        @keyframes mgRecPulse {
            0%, 100% { opacity: 1; }
            50%      { opacity: .58; }
        }
        .eg-edit-ft {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 12px 18px;
            border-top: 1px solid #eef2f7;
            background: #fbfcfe;
            flex: 0 0 auto;
        }
        .eg-edit-ft .eg-edit-b1,
        .eg-edit-ft .eg-edit-b2 { font-size: 13px; padding: 8px 20px; }
        
        .eg-edit-ft .eg-edit-b1[disabled],
        .eg-edit-ft .eg-edit-b2[disabled] { opacity: .6; cursor: default; }

        .mg-add {
            display: block;
            width: 100%;
            text-align: center;
            font: inherit;
            font-size: 13px;
            color: var(--primary);
            background: #fff;
            border: 1px dashed #cfd6e0;
            border-radius: 10px;
            padding: 9px;
            margin-top: 10px;
            cursor: pointer;
        }
        .mg-add.is-full { color: #98a2b3; border-color: #e3e8ef; cursor: not-allowed; }

        
        @media (max-width: 480px) {
            .eg-card { padding: 22px 16px 18px; border-radius: 22px; }
            .eg-text { font-size: 19px; }
            .eg-stats { font-size: 12px; }
            
            .mg-bd { padding: 12px 14px 16px; }
            .mg-list { max-height: none; }
            .mg-hd { padding: 12px 14px; }
        }


        
        .account-controls {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 9998;
            
            padding-bottom: 10px;
        }

        .account-selector {
            display: flex;
            gap: 8px;
            align-items: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            padding: 8px 5px;
            min-width: auto; 
        }

        .account-selector select {
            background: transparent;
            border: none;
            color: white;
            font-weight: 500;
            outline: none;
            cursor: pointer;
            min-width: 30px;
        }

        .account-selector button {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
        }

       .account-selector button:hover {
            background: rgba(255, 255, 255, 0.3);
        }





        @media print {
            .timer-controls, .print-btn, .task-actions, .add-task-main-btn,
            .category-actions, .add-category-btn, .stats-btn, .data-buttons {
                display: none;
            }

            body {
                padding: 10px;
                background: white;
            }

            .task-card {
                page-break-inside: avoid;
            }

            .chart-container {
                page-break-before: always;
            }
        }

        
        .stats-message {
            text-align: center;
            padding: 50px;
            background: var(--card-bg);
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            margin: 20px 0;
        }

        .stats-message i {
            font-size: 48px;
            color: var(--primary);
            margin-bottom: 20px;
            display: block;
        }

        .stats-message h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--text);
        }

        .stats-message p {
            font-size: 1rem;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
         
.repeat-info {
    margin-left: 12px;
    font-size: 0.9rem;
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 12px;
}

.focus-description-section {
    grid-column: span 2; 
    margin-top: 5px;
    padding: 15px;
    background: #f9fbfd;
    border-radius: 10px;
    border: 1px solid #edf2f7;
}

.focus-description-content {
    padding: 0;
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.6;
}


.todo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.todo-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #edf2f7;
    transition: all 0.3s ease;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-checkbox {
    margin-right: 10px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.todo-text {
    flex: 1;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.todo-item.completed {
    background-color: #f9fafb;
    opacity: 0.8;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    color: #9ca3af;
    font-style: italic;
}

.todo-item.completed .todo-checkbox {
    background-color: #4caf50;
}

.focus-action-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.focus-action-btn {
    background: #f0f7ff;
    border: none;
    color: #4b6cb7;
    cursor: pointer;
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.focus-action-btn:hover {
    background: #4b6cb7;
    color: white;
    transform: scale(1.1);
}


.pomodoro-inline-settings {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    color: #e74c3c;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pomodoro-inline-settings:hover {
    background: rgba(231,76,60,0.1);
    transform: scale(1.1);
}


#tempTimerModal .temp-timer-container {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    padding: 20px; justify-content: center; align-items: center;
}

#tempTimerModal .temp-timer-modal-content {
    width: 90%;
    max-width: 520px;
    max-height: 640px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 0;
    overflow: hidden;
    position: relative;
}


.temp-timer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.temp-timer-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.temp-timer-back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-3px);
}

.temp-timer-title {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.temp-timer-sound-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.temp-timer-sound-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.temp-timer-sound-btn.muted {
    opacity: 0.6;
}


.temp-timer-mode-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    background: #f1f5f9;
}

.temp-timer-mode-tab {
    flex: 1;
    padding: 10px 12px;
    border-radius: 12px;
    border: none;
    background: white;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.temp-timer-mode-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.temp-timer-mode-tab.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}


.temp-timer-display-container {
    padding: 30px 35px 20px;
    display: flex;
    justify-content: center;
}

.temp-timer-boxes {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
}

.temp-timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    padding: 28px 12px 24px;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s ease;
}

.temp-timer-arrow {
    position: absolute;
    background: none;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    color: inherit;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 4px;
    z-index: 10;
}

.temp-timer-arrow.up {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.temp-timer-arrow.down {
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.temp-timer-unit.editable .temp-timer-arrow {
    opacity: 1;
}

.temp-timer-arrow:hover {
    transform: translateX(-50%) scale(1.3);
}

.temp-timer-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 8px 0;
}

.temp-timer-label {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.7;
    margin-top: 2px;
}

.temp-timer-value-input {
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    border: none;
    background: transparent;
    color: inherit;
    outline: none;
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
}

.temp-timer-unit.editable .temp-timer-value-input {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 4px 0;
}

.temp-timer-colon {
    font-size: 2rem;
    font-weight: 300;
    color: #94a3b8;
    padding-top: 24px;
}


.temp-timer-boxes.countup-mode .temp-timer-unit {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}

.temp-timer-boxes.countup-mode .temp-timer-unit.minutes {
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
}

.temp-timer-boxes.countup-mode .temp-timer-unit.seconds {
    background: rgba(168, 85, 247, 0.08);
    color: #a855f7;
}


.temp-timer-boxes.countdown-mode .temp-timer-unit {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.temp-timer-boxes.countdown-mode .temp-timer-unit.editable {
    cursor: pointer;
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.temp-timer-boxes.countdown-mode .temp-timer-unit.editable:hover {
    background: rgba(239, 68, 68, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.15);
}


.temp-timer-boxes.pomodoro-mode .temp-timer-unit {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}


.temp-timer-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 20px 16px;
    padding: 10px 14px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}


.temp-pomodoro-status {
    margin: 0 20px 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.temp-pomodoro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.temp-pomodoro-phase-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.temp-pomodoro-phase-badge.work {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.temp-pomodoro-phase-badge.break {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.temp-pomodoro-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
}

.temp-pomodoro-settings-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.temp-pomodoro-settings-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.temp-pomodoro-progress {
    margin-bottom: 8px;
}

.temp-pomodoro-progress-track {
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.temp-pomodoro-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.temp-pomodoro-hint {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}


.temp-timer-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
}

.temp-timer-btn {
    flex: 1;
    max-width: 140px;
    padding: 14px 20px;
    border-radius: 14px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.temp-timer-btn.start {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.temp-timer-btn.start:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
}

.temp-timer-btn.pause {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.temp-timer-btn.pause:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.temp-timer-btn.resume {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.temp-timer-btn.resume:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.temp-timer-btn.stop {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.temp-timer-btn.stop:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}


@media (max-width: 480px) {
    #tempTimerModal .temp-timer-modal-content {
        width: 100%;
        max-width: none;
        border-radius: 0;
        margin: 0;
    }

    .temp-timer-display-container {
        padding: 25px 20px 15px;
    }

    .temp-timer-unit {
        width: 75px;
        padding: 24px 8px 20px;
    }

    .temp-timer-value {
        font-size: 2rem;
        margin: 6px 0;
    }

    .temp-timer-arrow {
        font-size: 0.7rem;
    }

    .temp-timer-arrow.up {
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
    }

    .temp-timer-arrow.down {
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
    }

    .temp-timer-arrow:hover {
        transform: translateX(-50%) scale(1.3);
    }

    .temp-timer-colon {
        font-size: 1.5rem;
        padding-top: 20px;
    }

    .temp-timer-boxes {
        gap: 4px;
    }

    .temp-timer-controls {
        gap: 10px;
        padding: 16px 12px;
    }

    .temp-timer-btn {
        max-width: none;
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .temp-timer-mode-tab {
        font-size: 0.78rem;
        padding: 8px 8px;
    }
}


.temp-timer-result-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.temp-timer-result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.temp-timer-result-content {
    position: relative;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    padding: 40px 36px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
    animation: modalPop 0.3s ease;
}

@keyframes modalPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.temp-timer-result-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.temp-timer-result-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px;
}

.temp-timer-result-time {
    font-size: 2.8rem;
    font-weight: 700;
    color: #6366f1;
    margin: 0 0 8px;
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
    letter-spacing: 2px;
}

.temp-timer-result-label {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 28px;
}

.temp-timer-result-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.temp-timer-result-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}


#pomodoroSettingsModal { z-index: 9999; }


#pomodoroSettingsModal .pomodoro-settings-content {
    background: #fff; border-radius: 16px; padding: 0; max-width: 360px; width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,.15); animation: modalPop .25s ease;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px 12px; border-bottom: 1px solid #f0f2f5;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-header h3 { margin: 0; font-size: 1.05rem; color: #1e293b; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-close {
    background: none; border: none; font-size: 1.5rem; color: #94a3b8; cursor: pointer; line-height: 1;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-body { padding: 16px 20px; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f8fafc;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row:last-child { border-bottom: none; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row label { font-size: .88rem; color: #334155; font-weight: 500; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row input {
    width: 80px; padding: 6px 10px; border: 1.5px solid #e1e8ed; border-radius: 8px;
    font-size: .9rem; text-align: center; color: #1e293b; outline: none;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row input:focus { border-color: #e74c3c; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-actions {
    display: flex; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid #f0f2f5;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-btn {
    flex: 1; padding: 10px; border: none; border-radius: 10px; font-size: .9rem; font-weight: 600; cursor: pointer;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-btn.save { background: #e74c3c; color: #fff; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-btn.cancel { background: #f0f2f5; color: #64748b; }














.import-options {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #4b6cb7;
}

.import-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.import-option:last-child {
    margin-bottom: 0;
}

.import-option input {
    margin-right: 10px;
}

.import-option label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.import-option i {
    margin-right: 8px;
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.option-description {
    margin-left: 30px;
    font-size: 0.9rem;
    color: #6c757d;
}

.custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px;
}

.dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #f0f7ff;
}

.dropdown-item .category-icon {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.dropdown-item .task-name {
    flex: 1;
}

.dropdown-item .category-name {
    color: #999;
    font-size: 0.8rem;
    margin-left: 10px;
}

.task-card.dragging {
    opacity: 0.8;
    transform: scale(0.7); 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 1100; 
    cursor: grabbing;
}

.task-card.drag-over {
    border: 3px dashed #4b6cb7;
    background-color: #e3f0ff;
    margin: 8px 0;
    box-shadow: 0 4px 12px rgba(75, 108, 183, 0.3);
}

.task-card.drag-insert-above {
    border-top: 4px solid #4b6cb7 !important;
}

.task-card.drag-insert-below {
    border-bottom: 4px solid #4b6cb7 !important;
}


.task-card {
    cursor: grab;
}

.task-card:active {
    cursor: grabbing;
}
.task-list-main {
    min-height: 500px;
}







.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 24px;
    margin-top: 24px;
    padding: 4px;
}

.badge-item {
    background: transparent;
    border-radius: 0;
    padding: 0;
    text-align: center;
    box-shadow: none;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: auto;
    max-height: none;
    overflow: visible;
    display: block;
    cursor: pointer;
    border: none;
}
.badge-item::before { display: none; }


.bdg-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px 16px 20px;
    position: relative;
    overflow: hidden;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
    border: 1px solid rgba(0,0,0,0.06);
}


.bdg-unlocked .bdg-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f2ff 35%, #eee2ff 100%);
    border-color: rgba(139, 92, 246, 0.22);
    box-shadow:
        0 6px 24px rgba(139, 92, 246, 0.12),
        0 2px 8px rgba(0,0,0,0.06);
}


.bdg-tier-silver.bdg-unlocked .bdg-card {
    background: linear-gradient(160deg, #fafafe 0%, #f4edff 35%, #e8dffc 100%);
    border-color: rgba(167, 139, 250, 0.28);
    box-shadow:
        0 6px 24px rgba(167, 139, 250, 0.16),
        0 0 36px rgba(180, 155, 255, 0.12);
}
.bdg-tier-gold.bdg-unlocked .bdg-card {
    background: linear-gradient(160deg, #fffef5 0%, #fff6e0 35%, #ffedc0 100%);
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow:
        0 6px 28px rgba(245, 158, 11, 0.22),
        0 0 48px rgba(255, 187, 30, 0.16);
}
.bdg-tier-diamond.bdg-unlocked .bdg-card {
    background: linear-gradient(160deg, #f2f8ff 0%, #e4f0ff 35%, #d0e8ff 100%);
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow:
        0 6px 28px rgba(59, 130, 246, 0.22),
        0 0 52px rgba(96, 165, 250, 0.18);
}


.bdg-locked .bdg-card {
    background: linear-gradient(180deg, #e8ebf0 0%, #dde1e8 100%);
    border: 1.5px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    opacity: 0.92;
}


.bdg-shine {
    position: absolute;
    top: -40%;
    left: -60%;
    width: 40%;
    height: 180%;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255,255,255,0.4) 45%,
        rgba(255,255,255,0.85) 50%,
        rgba(255,255,255,0.4) 55%,
        transparent 60%
    );
    transform: rotate(25deg);
    pointer-events: none;
    z-index: 1;
}
.bdg-unlocked .bdg-card:hover .bdg-shine {
    animation: bdgShine 0.8s forwards;
}
@keyframes bdgShine { from { left: -60%; } to { left: 120%; } }


.bdg-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(249,115,22,0.35);
    border: 2px solid rgba(255,255,255,0.6);
}


.bdg-icon-wrap {
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
}
.bdg-icon-ring {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 2.5px solid rgba(139, 92, 246, 0.15);
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 3;
    background: rgba(255,255,255,0.6);
    transition: all 0.35s ease;
}
.bdg-unlocked .bdg-icon-ring {
    background: rgba(255,255,255,0.85);
}
.bdg-unlocked .bdg-icon-ring i {
    font-size: 34px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.bdg-locked .bdg-icon-ring i {
    font-size: 34px;
    opacity: 0.3;
    filter: grayscale(0.85);
}


.bdg-icon-glow {
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(24px);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}


.bdg-tier-diamond .bdg-icon-ring::after {
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    background: #2563eb;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(37,99,235,0.7), 0 0 24px rgba(37,99,235,0.35);
    z-index: 5;
}


.bdg-info { position: relative; z-index: 2; width: 100%; padding: 0 4px; }
.bdg-name {
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
    line-height: 1.3;
}
.bdg-locked .bdg-name { color: #64748b; }
.bdg-desc {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.45;
}
.bdg-locked .bdg-desc { color: #94a3b8; }


.bdg-lock {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 3;
    color: #94a3b8;
    font-size: 1rem;
}


.badge-item:hover { transform: translateY(-6px); }
.bdg-unlocked:hover .bdg-card {
    box-shadow:
        0 12px 36px rgba(139, 92, 246, 0.16),
        0 4px 12px rgba(0,0,0,0.1);
}
.bdg-tier-gold:hover .bdg-card {
    box-shadow:
        0 12px 40px rgba(245, 158, 11, 0.26),
        0 4px 14px rgba(0,0,0,0.12);
}
.bdg-tier-diamond:hover .bdg-card {
    box-shadow:
        0 12px 40px rgba(59, 130, 246, 0.26),
        0 4px 14px rgba(0,0,0,0.12);
}


.bdg-hex-wrap, .bdg-hex-frame, .bdg-hex-inner,
.bdg-icon-area, .bdg-ribbon, .bdg-locked-mask,
.bdg-unlocked[data-theme] .bdg-hex-frame { display: none; }
.badge-recurring-count { display: none; }
.badge-item.badge-unlocked { border: none; background: none; }
.badge-item.badge-locked { border: none; background: none; opacity: 1; }
.badge-icon { display: none; }
.badge-info h4, .badge-info p { display: none; }
.badge-unlocked, .badge-locked { border: none; background: none; }
.badge-lock-icon { display: none; }


.badge-controls,
.score-controls {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    width: 100%;
    overflow-x: hidden;
    padding: 0 5px;
}

#unlockedBadgeModal .congrats-badge-content {
    position: relative;
    background: transparent;
    border-radius: 0;
    padding: 0;
    text-align: center;
    max-width: none;
    width: auto;
    box-shadow: none;
    border: none;
    animation: none;
    background-image: none;
}

.badge-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    background: linear-gradient(135deg, #ff8a65 0%, #ff5252 100%);
    color: white;
    font-weight: 600;
    font-size: .8rem;
    border-radius: 0 0 18px 18px;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(255, 82, 82, 0.35);
    z-index: 10;
    white-space: nowrap; 
}

.badge-title {
    font-size: 1.9rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}
.badge-title::after {
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    background: repeating-linear-gradient(to right, #d4a017 0 6px, transparent 6px 12px);
    margin: 14px auto 0;
    position: relative;
}

.badge-icon-container {
    position: relative;
    margin: 28px 0 18px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.badge-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.badge-icon {
    display: none; 
}

#unlockedBadgeIcon {
    font-size: 80px !important; 
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
    line-height: 1;
    display: block;
}

.badge-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(252, 211, 77, 0.55) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: badgePulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badgePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.badge-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 6px 0 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}

.badge-description {
    font-size: .95rem;
    color: #6b7280;
    margin-bottom: 18px;
    line-height: 1.5;
    font-style: normal;
}


.badge-footer {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed #d4a017;
    color: #6b7280;
    font-size: .85rem;
    line-height: 1.5;
}

#unlockedBadgeModal .confirmation-actions {
    padding: 2px 28px 14px;
    background: transparent;
    text-align: center;
}


#unlockedBadgeModal {
    background: rgba(0, 0, 0, 0.35); 
}

#unlockedBadgeModal .confirmation-content {
    background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 4px #fbbf24 inset;
    max-width: 440px;
    border-radius: 24px;
    padding: 0;
    overflow: visible;
    position: relative;
}

#unlockedBadgeModal .confirmation-body {
    padding: 40px 28px 16px;
    background: transparent;
    text-align: center;
    position: relative;
}


#unlockedBadgeModal .confirmation-body::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20px;
    background-image:
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px),
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px),
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px),
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px),
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px);
    background-size: 25% 100%;
    background-position: 0% 50%, 25% 50%, 50% 50%, 75% 50%, 100% 50%;
    background-repeat: no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

#unlockedBadgeModal .confirmation-actions .btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    color: white;
}

#unlockedBadgeModal .confirmation-actions .btn-primary:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}

#batchBadgeModal table {
    table-layout: fixed;
}

#batchBadgeModal th:nth-child(1) { width: 15%; }
#batchBadgeModal th:nth-child(2) { width: 15%; }
#batchBadgeModal th:nth-child(3) { width: 12%; }
#batchBadgeModal th:nth-child(4) { width: 12%; }
#batchBadgeModal th:nth-child(5) { width: 20%; }
#batchBadgeModal th:nth-child(6) { width: 10%; }
#batchBadgeModal th:nth-child(7) { width: 14%; }
#batchBadgeModal th:nth-child(8) { width: 2%; }

#batchBadgeTableBody tr:hover {
    background-color: #f8f9fa;
}

#batchBadgeTableBody input,
#batchBadgeTableBody select,
#batchBadgeTableBody textarea {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    color: #495057;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
    vertical-align: middle;
}

#batchBadgeTableBody input:focus,
#batchBadgeTableBody select:focus,
#batchBadgeTableBody textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#batchBadgeTableBody .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    width: 100%;
}

#batchBadgeTableBody .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}


#batchBadgeTableBody td {
    vertical-align: middle !important;
}

#batchBadgeTableBody textarea {
    min-height: 36px;
    resize: vertical;
    font-family: inherit;
}

.account-controls{position:absolute;top:20px;right:10px;z-index:9998;}
.account-dropdown{position:relative;display:inline-block;}
.account-trigger{background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.25);border-radius:14px;
  color:#fff;padding:3px 6px;cursor:pointer;font-size:.75rem;display:flex;align-items:center;gap:0;min-height:auto;}
.account-trigger:hover{background:rgba(255,255,255,.3);}
#currentAccountName { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 2px; }
#currentAccountName .account-trigger-avatar { font-size: 40px; line-height: 1; }
#currentAccountName img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
#currentAccountName .account-trigger-label { font-size: .65rem; font-weight: 600; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu{
  position: absolute;
  top: 70px;          
  right: 20px;        
  background: #fff;
  color: #333;
  list-style: none;
  padding: 4px 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  min-width: 140px;
  z-index: 9999;       
  display: none;
}
.account-menu li{padding:8px 12px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;gap:8px;}
.account-menu li:hover{background:#f5f7fa;}
.account-menu li.danger{color:#e74c3c;}
.account-menu hr{margin:4px 0;border:none;border-top:1px solid #e1e8ed;}


.acct-menu-section-title {
    padding: 6px 14px 4px;
    font-size: .65rem;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: .5px;
    pointer-events: none;
}
#accountMenu li.current {
    background: #f0f5ff;
    color: #4B6CB7;
    font-weight: 600;
}
.acct-menu-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}
.acct-menu-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.acct-menu-icon {
    width: 18px;
    text-align: center;
}
.accent-add { color: #4B6CB7; font-weight: 600; }
.accent-manage { color: #333; }


#accountManagementPage {
    background: linear-gradient(135deg, #f0f2f5 0%, #e4edf5 100%);
    min-height: 100vh;
}
.acct-mgmt-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}
.acct-mgmt-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    border: 1px solid #e1e8ed;
    position: relative;
}
.acct-mgmt-card.current {
    border-color: #4B6CB7;
    box-shadow: 0 0 0 1.5px rgba(75,108,183,.1), 0 4px 14px rgba(75,108,183,.08);
}
.acct-mgmt-card.current::after {
    content: "当前";
    position: absolute;
    top: 12px; right: 12px;
    background: #4B6CB7;
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.acct-mgmt-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.acct-mgmt-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f0fe, #d4e4fc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    overflow: hidden;
}
.acct-mgmt-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.acct-mgmt-info { flex: 1; min-width: 0; }
.acct-mgmt-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.acct-mgmt-name-text {
    line-height: 1.2;
}
.acct-mgmt-realname {
    font-weight: 400;
    font-size: .72rem;
    color: #94a3b8;
}
.acct-mgmt-default-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #4B6CB7, #6b8fd4);
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 8px;
    line-height: 1.4;
    letter-spacing: .5px;
}
.acct-mgmt-created {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 400;
    color: #b0b8c4;
    white-space: nowrap;
}
.acct-mgmt-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 14px;
    margin-left: 64px; 
    font-size: .75rem;
    color: #64748b;
}
.acct-mgmt-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}
.acct-mgmt-info-item {
    color: #64748b;
}
.acct-mgmt-info-item.muted {
    color: #b0b8c4;
}
.acct-mgmt-dot {
    color: #cbd5e1;
    margin: 0 2px;
}
.acct-mgmt-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.acct-mgmt-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid #e1e8ed;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.acct-mgmt-btn:hover {
    background: #f5f7fa;
    color: #4B6CB7;
}
.acct-mgmt-btn.danger:hover {
    color: #e74c3c;
    background: rgba(231,76,60,.06);
}
.acct-mgmt-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.acct-mgmt-stat {
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}
.acct-mgmt-stat-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4B6CB7;
}
.acct-mgmt-stat-lbl {
    font-size: .65rem;
    color: #94a3b8;
    margin-top: 2px;
}


.acct-mgmt-add-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    border: 2px dashed #e1e8ed;
    border-radius: 10px;
    background: #fff;
    color: #4B6CB7;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    transition: all .2s;
    margin-bottom: 20px;
}
.acct-mgmt-add-tile:hover {
    border-color: #4B6CB7;
    background: rgba(75,108,183,.03);
    transform: translateY(-2px);
}
.acct-mgmt-add-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(75,108,183,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.acct-mgmt-add-text { font-size: .95rem; }


.acct-mgmt-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.acct-mgmt-header-actions .add-task-main-btn {
    padding: 8px 16px;
    font-size: .85rem;
    border-radius: 20px;
}


.acct-mgmt-body {
    max-width: 720px;
    gap: 18px;
}
.acct-mgmt-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.acct-mgmt-section-a {
    background: linear-gradient(135deg, #eef4ff 0%, #e4edf8 100%);
    border: 1px solid #d6e2f5;
    border-radius: 14px;
    padding: 14px;
}
.acct-mgmt-section-b {
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 14px;
    padding: 14px;
}
.acct-mgmt-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.acct-mgmt-section-title i { color: #4B6CB7; }
.acct-mgmt-section-sub {
    font-size: .72rem;
    font-weight: 400;
    color: #94a3b8;
    margin-left: 4px;
}
.acct-mgmt-tip {
    font-size: .75rem;
    color: #6b7a90;
    line-height: 1.55;
    background: rgba(75,108,183,.05);
    border-left: 3px solid #4B6CB7;
    padding: 8px 10px;
    border-radius: 6px;
}


.acct-mgmt-login-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    border: 1px solid #e1e8ed;
}
.acct-login-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.acct-login-main { flex: 1; min-width: 0; }
.acct-login-username {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.acct-login-id {
    font-size: .68rem;
    font-weight: 400;
    color: #b0b8c4;
}
.acct-login-meta {
    font-size: .72rem;
    color: #94a3b8;
    margin-top: 3px;
}

.acct-vip-row-val {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.acct-vip-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;          
    font-size: .76rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7d774, #e0b030);
    color: #3a2a00;
    box-shadow: 0 2px 6px rgba(224,176,48,.3);
}
.acct-vip-pill.dim {
    background: #eef0f3;
    color: #64748b;
    box-shadow: none;
    font-weight: 600;
}
.acct-vip-pill-icon { font-size: .85rem; line-height: 1; }
.acct-vip-pill-exp { font-size: .72rem; color: #b8860b; }


.acct-vip-tl {
    margin: 2px 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fbfcff;
    border: 1px solid #eef2f9;
}
.acct-vip-tl-title {
    font-size: .74rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
}
.acct-vip-tl-list { list-style: none; margin: 0; padding: 0; }
.acct-vip-tl-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 0;
    border-bottom: 1px dashed #eef2f7;
}
.acct-vip-tl-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.acct-vip-tl-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 600;
    color: #334155;
    min-width: 0;
    overflow-wrap: anywhere;
}

.acct-vip-tl-label::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
}
.acct-vip-tl-trial .acct-vip-tl-label::before { background: #60a5fa; }
.acct-vip-tl-order .acct-vip-tl-label::before { background: #f0a020; }
.acct-vip-tl-code .acct-vip-tl-label::before { background: #10b981; }
.acct-vip-tl-ref_invitee .acct-vip-tl-label::before,
.acct-vip-tl-ref_inviter .acct-vip-tl-label::before { background: #a855f7; }
.acct-vip-tl-when {
    font-size: .73rem;
    color: #7b8698;
    line-height: 1.5;
    padding-left: 12px;      
    overflow-wrap: anywhere;
}
.acct-vip-tl-foot {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #eef2f7;
    font-size: .75rem;
    font-weight: 700;
    color: #b8860b;
    overflow-wrap: anywhere;
}
.acct-vip-tl-foot.is-expired { color: #d14343; }


@media (max-width: 560px) {
    .acct-vip-row { flex-wrap: wrap; }
    .acct-vip-row .acct-login-row-label { flex: 1 1 auto; min-width: 0; }
    .acct-vip-row .acct-vip-row-val { flex: 1 1 100%; order: 3; margin-top: 4px; }
}


.acct-login-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed #eef2f7;
    font-size: .82rem;
}
.acct-login-row-label {
    color: #475569;
    font-weight: 600;
    min-width: 90px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.acct-login-row-label i { color: #94a3b8; }
.acct-login-row-val {
    flex: 1;
    color: #64748b;
    min-width: 0;
}
.acct-login-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: flex-end;
}


.acct-mgmt-btn-text {
    border: none;
    background: transparent;
    color: #4B6CB7;
    cursor: pointer;
    font-size: .78rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s;
}
.acct-mgmt-btn-text:hover { background: rgba(75,108,183,.08); }
.acct-mgmt-btn-text.gold { color: #b8860b; }
.acct-mgmt-btn-text.gold:hover { background: rgba(184,134,11,.08); }
.acct-mgmt-btn-text.primary { color: #2e7d32; }
.acct-mgmt-btn-text.primary:hover { background: rgba(46,125,50,.08); }
.acct-mgmt-btn-danger-line {
    border: 1px solid #f3c2c0;
    background: #fff;
    color: #dc3545;
    cursor: pointer;
    font-size: .8rem;
    padding: 6px 14px;
    border-radius: 8px;
    transition: all .15s;
}
.acct-mgmt-btn-danger-line:hover { background: rgba(220,53,69,.06); border-color: #dc3545; }


.acct-mgmt-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.acct-mgmt-search {
    position: relative;
    flex: 1;
    min-width: 160px;
}
.acct-mgmt-search i {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: #b0b8c4;
    font-size: .8rem;
    pointer-events: none;
}
.acct-mgmt-search input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    font-size: .82rem;
    background: #fff;
    box-sizing: border-box;
}
.acct-mgmt-search input:focus {
    outline: none;
    border-color: #4B6CB7;
    box-shadow: 0 0 0 2px rgba(75,108,183,.1);
}
.acct-mgmt-sort select {
    padding: 7px 10px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    font-size: .82rem;
    background: #fff;
    color: #475569;
    cursor: pointer;
}
.acct-mgmt-add-btn {
    padding: 7px 14px !important;
    font-size: .82rem !important;
    border-radius: 8px !important;
    white-space: nowrap;
}
.acct-mgmt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 600px) {
    .acct-mgmt-grid { grid-template-columns: 1fr; }
    .acct-mgmt-body { max-width: 100%; }
}
.acct-mgmt-empty {
    text-align: center;
    color: #b0b8c4;
    font-size: .85rem;
    padding: 28px 10px;
}
.acct-mgmt-current-badge {
    display: inline-flex;
    align-items: center;
    background: #4B6CB7;
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 8px;
    line-height: 1.4;
}
.acct-mgmt-lastactive {
    font-size: .68rem;
    color: #b0b8c4;
    margin-top: 2px;
}
.acct-mgmt-card-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #eef2f7;
    text-align: center;
}

.acct-mgmt-card.current::after { display: none; }


.acct-small-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.acct-small-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
    overflow: hidden;
}
.acct-small-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f7;
}
.acct-small-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
}
.acct-small-modal-close {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 50%;
    transition: background .15s;
}
.acct-small-modal-close:hover { background: #f1f5f9; color: #475569; }
.acct-small-modal-body { padding: 16px 18px; }
.acct-small-form .form-label {
    display: block;
    font-size: .8rem;
    color: #475569;
    margin-bottom: 6px;
    font-weight: 600;
}
.acct-small-form .form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    font-size: .88rem;
    box-sizing: border-box;
}
.acct-small-form .form-input:focus {
    outline: none;
    border-color: #4B6CB7;
    box-shadow: 0 0 0 2px rgba(75,108,183,.1);
}
.acct-small-hint {
    font-size: .72rem;
    color: #94a3b8;
    margin-top: 8px;
    line-height: 1.5;
}
.acct-small-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #eef2f7;
}
.acct-small-modal-actions .btn {
    padding: 7px 18px;
    border-radius: 8px;
    font-size: .85rem;
    cursor: pointer;
}


.acct-edit-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.acct-edit-modal-overlay.hidden { display: none; }
.acct-edit-modal-overlay.show { display: flex; }

.acct-edit-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPop .25s ease;
}
@keyframes modalPop {
    from { opacity: 0; transform: translateY(-10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.acct-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e1e8ed;
    flex-shrink: 0;
}
.acct-edit-modal-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.acct-edit-modal-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.acct-edit-modal-close:hover {
    background: #e1e8ed;
    color: #1e293b;
}

.acct-edit-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.acct-form-card {
    background: #fff;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    max-width: none;
    margin: 0;
}


.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row .form-group { margin-bottom: 0; }
.form-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 7px;
}
.form-required { color: #e74c3c; margin-left: 2px; }
.form-optional { color: #94a3b8; font-weight: 400; }
.form-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e1e8ed;
    border-radius: 10px;
    font-size: .92rem;
    color: #1e293b;
    background: #fff;
    outline: none;
    transition: all .2s;
    font-family: inherit;
}
.form-input:hover {
    border-color: #c8d2dc;
}
.form-input:focus {
    border-color: #4B6CB7;
    box-shadow: 0 0 0 4px rgba(75,108,183,.1);
}
.form-input::placeholder { color: #94a3b8; }
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
input[type="date"].form-input {
    padding-right: 10px;
}

.acct-edit-modal-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    background: #fafbfc;
    border-top: 1px solid #e1e8ed;
    flex-shrink: 0;
}
.acct-edit-modal-actions .btn {
    padding: 12px 22px;
    border-radius: 10px;
    border: none;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acct-edit-modal-actions .btn-primary {
    background: #4B6CB7;
    color: #fff;
}
.acct-edit-modal-actions .btn-primary:hover { background: #3d5a9e; }
.acct-edit-modal-actions .btn-outline {
    background: #fff;
    color: #1e293b;
    border: 1.5px solid #e1e8ed;
}
.acct-edit-modal-actions .btn-outline:hover { background: #f0f2f5; }
.acct-edit-modal-actions .btn-danger {
    background: #e74c3c;
    color: #fff;
}
.acct-edit-modal-actions .btn-danger:hover { background: #c0392b; }


.acct-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.acct-avatar-opt {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: #f0f3f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: all .15s;
    overflow: hidden;
    position: relative;
}
.acct-avatar-opt img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.acct-avatar-opt:hover { background: #e0e7f3; transform: scale(1.08); }
.acct-avatar-opt.selected {
    border-color: #4B6CB7;
    background: #e8f0ff;
    box-shadow: 0 0 0 3px rgba(75,108,183,.12);
}
.acct-avatar-opt.upload-opt {
    background: #fff;
    border: 2px dashed #e1e8ed;
    color: #94a3b8;
    font-size: 18px;
}
.acct-avatar-opt.upload-opt:hover {
    border-color: #4B6CB7;
    color: #4B6CB7;
    background: rgba(75,108,183,.05);
}
.acct-avatar-opt.has-image {
    border-color: #27ae60;
}
.acct-avatar-remove {
    position: absolute;
    top: -4px; right: -4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}


.acct-theme-picker {
    display: flex;
    gap: 10px;
}
.acct-theme-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: all .15s;
}
.acct-theme-dot:hover { transform: scale(1.15); }
.acct-theme-dot.selected {
    border-color: #1e293b;
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}


.hl-body { padding: 14px; }
.hl-overview { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.hl-overview-card { background:#fff; border-radius:10px; padding:10px 4px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; }
.hl-ov-val { display:block; font-size:1.1rem; font-weight:700; color:#4B6CB7; }
.hl-ov-lbl { display:block; font-size:.6rem; color:#94a3b8; margin-top:2px; }
.hl-tabs { display:flex; gap:4px; overflow-x:auto; margin-bottom:14px; background:#fff; border-radius:10px; padding:4px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.hl-tab { flex:1; background:transparent; border:none; padding:8px 6px; border-radius:8px; font-size:.75rem; color:#64748b; cursor:pointer; white-space:nowrap; transition:all .15s; }
.hl-tab.active { background:#4B6CB7; color:#fff; font-weight:600; }
.hl-content { flex:1; }
.hl-chart-wrap { background:#fff; border-radius:10px; padding:10px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.hl-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hl-stats-grid .hl-chart-wrap { margin-bottom:0; }
.hl-chart-title { margin:0 0 8px; font-size:.8rem; font-weight:700; color:#334155; }


#healthPage .hl-body > .tm-type-tabs-bar { margin: 0 0 14px; }
#healthPage .hl-body > .tm-type-tabs-bar .tm-type-tab.active { color: #4B6CB7; }

.hl-form-row { display:flex; gap:10px; margin-bottom:14px; }
.hl-list { display:flex; flex-direction:column; gap:8px; }
.hl-empty { text-align:center; color:#94a3b8; padding:30px 0; font-size:.85rem; }
.hl-record-item { background:#fff; border-radius:10px; padding:12px; box-shadow:0 1px 4px rgba(0,0,0,.04); border:1px solid #e1e8ed; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hl-rec-date { font-size:.75rem; font-weight:700; color:#4B6CB7; min-width:80px; }
.hl-rec-body { flex:1; font-size:.8rem; color:#1e293b; min-width:0; }
.hl-rec-note { width:100%; font-size:.7rem; color:#94a3b8; margin-top:4px; }
.hl-rec-actions { display:flex; gap:4px; }
.hl-rec-btn { width:28px; height:28px; border-radius:50%; border:1px solid #e1e8ed; background:#fff; cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.hl-rec-btn.del { color:#e74c3c; }
.hl-rec-btn:hover { background:#f0f2f5; }


.hl-teeth-diagram { background:#fff; border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,.04); text-align:center; }
.hl-teeth-legend { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; font-size:.7rem; color:#64748b; }
.hl-legend-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:3px; vertical-align:middle; }


.hl-child-bar { display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:10px; padding:10px 14px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; }
.hl-child-age { font-size:.85rem; font-weight:600; color:#4B6CB7; }
.hl-child-edit-btn { background:transparent; border:1px solid #e1e8ed; border-radius:6px; padding:4px 10px; font-size:.7rem; color:#64748b; cursor:pointer; }


.hl-timeline { position:relative; padding-left:20px; }
.hl-tl-item { position:relative; padding:8px 0 12px 20px; }
.hl-tl-item:last-child .hl-tl-line { display:none; }
.hl-tl-dot { position:absolute; left:-18px; top:12px; width:12px; height:12px; border-radius:50%; border:2px solid #e1e8ed; background:#fff; z-index:1; }
.hl-tl-latest .hl-tl-dot { border-color:#4B6CB7; box-shadow:0 0 0 3px rgba(75,108,183,.15); }
.hl-tl-line { position:absolute; left:-13px; top:24px; bottom:0; width:2px; background:#e1e8ed; }
.hl-tl-content { background:#fff; border-radius:8px; padding:10px 12px; border:1px solid #e1e8ed; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem; color:#1e293b; }
.hl-tl-date { font-weight:700; color:#4B6CB7; min-width:80px; }
.hl-tl-icon { font-size:1rem; }
.hl-tl-type { font-weight:600; }
.hl-tl-detail { color:#64748b; font-size:.75rem; width:100%; }


.hl-who-panel { background:#fff; border-radius:12px; padding:14px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; }
.hl-who-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hl-who-title { margin:0; font-size:.9rem; font-weight:700; color:#334155; }
.hl-who-sub { font-size:.7rem; color:#94a3b8; line-height:1.5; margin:6px 0 12px; }

.hl-who-checks { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.hl-who-check { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; background:#f8fafc; font-size:.75rem; }
.hl-who-check.ok { background:#f2faf3; }
.hl-who-check.bad { background:#fff8ec; }
.hl-who-check-icon { width:16px; height:16px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; color:#fff; background:#4CAF50; }
.hl-who-check.bad .hl-who-check-icon { background:#e8a33d; }
.hl-who-check-label { color:#64748b; flex-shrink:0; }
.hl-who-check-val { color:#1e293b; font-weight:600; margin-left:auto; text-align:right; word-break:break-all; }
.hl-who-check-fix { font-size:.68rem; color:#b3701c; padding:2px 8px 4px 32px; line-height:1.5; }

.hl-who-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.hl-who-action-btn { flex:1 1 auto; min-width:150px; padding:8px 12px; border-radius:8px; border:1px solid #e1e8ed; background:#fff; color:#4B6CB7; font-size:.75rem; cursor:pointer; }
.hl-who-action-btn.primary { background:#4B6CB7; border-color:#4B6CB7; color:#fff; }

.hl-who-metrics { display:flex; flex-direction:column; gap:10px; }
.hl-who-metric { border:1px solid #eef2f7; border-radius:10px; padding:10px; background:#fcfdff; }
.hl-who-metric-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.hl-who-metric-name { font-size:.78rem; font-weight:700; color:#334155; }
.hl-who-metric-val { font-size:.95rem; font-weight:700; color:#4B6CB7; }
.hl-who-metric-val2 { font-size:.95rem; font-weight:700; color:#4B6CB7; margin-top:2px; }
.hl-who-metric-note { font-size:.7rem; color:#b3701c; line-height:1.55; margin-top:6px; }

.hl-who-scale { margin:12px 0 4px; }
.hl-who-scale-bar { position:relative; height:10px; border-radius:5px; background:#eef2f7; }
.hl-who-scale-seg { position:absolute; top:0; height:100%; display:block; }
.hl-who-scale-seg:first-child { border-radius:5px 0 0 5px; }
.hl-who-scale-seg:last-child { border-radius:0 5px 5px 0; }

.hl-who-scale-pin { position:absolute; top:-4px; width:2px; height:18px; background:#1e293b; border-radius:1px; transform:translateX(-1px); box-shadow:0 0 0 2px rgba(255,255,255,.9); z-index:2; }
.hl-who-scale-ticks { position:relative; height:12px; margin-top:4px; }
.hl-who-scale-ticks span { position:absolute; transform:translateX(-50%); font-size:.6rem; color:#94a3b8; white-space:nowrap; }

.hl-who-ref { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:.68rem; color:#64748b; }
.hl-who-ref-item b { color:#334155; }
.hl-who-ref-age { color:#94a3b8; margin-left:auto; }
.hl-who-verdict { margin-top:8px; font-size:.8rem; font-weight:700; }

.hl-who-channel { margin-top:14px; border-top:1px dashed #e1e8ed; padding-top:12px; }
.hl-who-channel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.hl-who-channel-title { font-size:.78rem; font-weight:700; color:#334155; }
.hl-who-channel-tabs { display:flex; gap:4px; background:#f1f5f9; border-radius:8px; padding:3px; }
.hl-who-ctab { border:none; background:transparent; font-size:.7rem; color:#64748b; padding:4px 10px; border-radius:6px; cursor:pointer; }
.hl-who-ctab.active { background:#4B6CB7; color:#fff; font-weight:600; }
.hl-who-channel-tip { font-size:.66rem; color:#94a3b8; text-align:center; margin-top:6px; }


.hl-form { padding:0; }


.lib-body { padding:14px; }


#libraryPage .lib-body > .tm-type-tabs-bar { margin:0 0 14px; }
#libraryPage .lib-body > .tm-type-tabs-bar .tm-type-tab { font-size:0.85rem; }
#libraryPage .lib-body > .tm-type-tabs-bar .tm-type-tab.active { color:#5CB85C; }


.lib-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lib-chart-title { margin:0 0 8px; font-size:.8rem; font-weight:700; color:#334155; }


.lib-top5-list { display:flex; flex-direction:column; gap:6px; }
.lib-top5-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:#f8fafc; border-radius:8px; }
.lib-top5-rank { width:22px; height:22px; border-radius:50%; background:#5CB85C; color:#fff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lib-top5-item:nth-child(1) .lib-top5-rank { background:#F0AD4E; }
.lib-top5-item:nth-child(2) .lib-top5-rank { background:#95a5a6; }
.lib-top5-item:nth-child(3) .lib-top5-rank { background:#cd7f32; }
.lib-top5-title { flex:1; font-size:.82rem; font-weight:600; color:#1e293b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-top5-time { font-size:.8rem; font-weight:700; color:#5CB85C; flex-shrink:0; }
.lib-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.lib-stat { background:#fff; border-radius:10px; padding:10px 4px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; }
.lib-stat-val { display:block; font-size:1.1rem; font-weight:700; color:#5CB85C; }
.lib-stat-lbl { display:block; font-size:.6rem; color:#94a3b8; margin-top:2px; }
.lib-toolbar { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.lib-search { flex:1; min-width:120px; padding:8px 12px; border:1.5px solid #e1e8ed; border-radius:8px; font-size:.85rem; outline:none; }
.lib-search:focus { border-color:#4B6CB7; }
.lib-filter { padding:8px 10px; border:1.5px solid #e1e8ed; border-radius:8px; font-size:.8rem; background:#fff; }
.lib-view-btn { width:34px; height:34px; border:1.5px solid #e1e8ed; border-radius:8px; background:#fff; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.lib-view-btn.active { background:#4B6CB7; color:#fff; border-color:#4B6CB7; }
.lib-books { display:flex; flex-direction:column; gap:8px; }
.lib-empty { text-align:center; color:#94a3b8; padding:30px 0; font-size:.85rem; }
.lib-empty.small { padding:10px 0; font-size:.75rem; }
.lib-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.lib-card { background:#fff; border-radius:12px; padding:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; position:relative; cursor:pointer; transition:all .15s; }
.lib-card:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.lib-card .lib-status-tag { position:absolute; top:6px; right:6px; }
.lib-card-cover { width:100%; height:160px; border-radius:6px; background:#f0f3f7; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:8px; }
.lib-card-cover img { width:100%; height:100%; object-fit:cover; }
.lib-no-cover { font-size:1.15rem; color:#94a3b8; font-weight:700; text-align:center; line-height:1.3; word-break:break-all; padding:6px; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.lib-no-cover.large { font-size:1rem; -webkit-line-clamp:4; }


.lib-cover-book {
  width:100%; height:100%; display:flex; flex-direction:row;
  background:#f5f2eb; border-radius:4px 6px 6px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), inset -2px 0 3px rgba(0,0,0,.04);
  overflow:hidden;
}
.lib-cover-spine {
  width:18px; min-width:18px; flex-shrink:0;
  background: var(--spine, #5B8C5A);
  border-right: 1px solid rgba(0,0,0,.1);
  position:relative;
}

.lib-cover-spine::after {
  content:''; position:absolute; top:8px; bottom:8px; left:50%; width:1px;
  background:rgba(255,255,255,.15); transform:translateX(-50%);
}
.lib-cover-pages {
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:8px 10px; min-width:0; position:relative;
}

.lib-cover-pages::before {
  content:''; position:absolute; top:0; right:0; bottom:0; width:4px;
  background:linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.06));
  border-radius:0 4px 4px 0;
}
.lib-cover-title {
  font-size:0.75rem; font-weight:800; color:#3d3226; text-align:center;
  line-height:1.25; word-break:break-word; max-width:100%;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.lib-cover-author {
  font-size:0.6rem; color:#8c7b6b; margin-top:3px; text-align:center;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.lib-cover-book.large { border-radius:3px 5px 5px 3px; }
.lib-cover-book.large .lib-cover-spine { width:11px; min-width:11px; }
.lib-cover-book.large .lib-cover-pages { padding:4px 6px; }
.lib-cover-book.large .lib-cover-title { font-size:0.6rem; -webkit-line-clamp:6; }
.lib-cover-book.large .lib-cover-author { font-size:0.48rem; margin-top:2px; }
.lib-card-title { font-size:.85rem; font-weight:700; color:#1e293b; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.2; }
.lib-card-author { font-size:.7rem; color:#94a3b8; }
.lib-card-info { flex:1; min-width:0; }
.lib-card-meta { font-size:.65rem; color:#64748b; margin-top:4px; }
.lib-status-tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.6rem; font-weight:600; }
.lib-status-unread { background:#e8f0ff; color:#4B6CB7; }
.lib-status-reading { background:#fff3cd; color:#F0AD4E; }
.lib-status-finished { background:#d4edda; color:#5CB85C; }
.lib-table { width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.lib-table th { background:#f8fafc; padding:8px 6px; font-size:.7rem; color:#64748b; text-align:left; border-bottom:1px solid #e1e8ed; }
.lib-table td { padding:8px 6px; font-size:.8rem; color:#1e293b; border-bottom:1px solid #f0f2f5; }
.lib-table tr { cursor:pointer; }
.lib-table tr:hover { background:#f8fafc; }
.lib-tbl-cover { width:30px; height:40px; background:#f0f3f7; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:.9rem; overflow:hidden; }
.lib-tbl-cover img { width:100%; height:100%; object-fit:cover; }
.lib-rec-btn { padding:4px 10px; border:1px solid #e1e8ed; border-radius:6px; background:#fff; cursor:pointer; font-size:.75rem; }
.lib-rec-btn.del { color:#e74c3c; border-color:#fdd; }
.lib-rec-btn:hover { background:#f5f7fa; }


.lib-detail textarea.form-input { resize:vertical; }
.lib-detail-cover { width:120px; height:170px; margin:0 auto 12px; border-radius:8px; background:#f0f3f7; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lib-detail-cover img { width:100%; height:100%; object-fit:cover; }
.lib-detail h3 { font-size:1.05rem; color:#1e293b; text-align:center; margin-bottom:4px; }
.lib-detail-author { font-size:.8rem; color:#94a3b8; text-align:center; margin-bottom:10px; }
.lib-detail-meta { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:10px; font-size:.75rem; color:#64748b; }
.lib-detail-cat { background:#f0f3f7; padding:2px 8px; border-radius:6px; }
.lib-detail-stats { display:flex; gap:14px; justify-content:center; background:#f8fafc; border-radius:8px; padding:8px; margin-bottom:14px; font-size:.8rem; color:#64748b; }
.lib-detail h4 { font-size:.85rem; color:#1e293b; margin:14px 0 8px; display:flex; align-items:center; gap:8px; }
.lib-detail h4 .add-task-main-btn.small { padding:4px 10px; font-size:.7rem; }
.lib-session-item { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px; border-bottom:1px solid #f0f2f5; font-size:.8rem; }
.lib-sess-date { font-weight:600; color:#4B6CB7; min-width:80px; }
.lib-sess-dur { color:#1e293b; }
.lib-sess-count { color:#94a3b8; font-size:.7rem; }
.lib-sess-tag { background:#e8f0ff; color:#4B6CB7; padding:1px 6px; border-radius:8px; font-size:.65rem; }
.lib-sess-review { width:100%; font-size:.75rem; color:#64748b; margin-top:2px; padding-left:90px; }
.lib-detail-notes h4 { margin-top:14px; }
.lib-detail-notes p { font-size:.8rem; color:#64748b; }
.lib-detail-actions { display:flex; gap:10px; margin-top:16px; }
.lib-detail-actions .btn { flex:1; padding:10px; border-radius:8px; border:none; font-weight:600; cursor:pointer; }
.lib-detail-actions .btn-primary { background:#4B6CB7; color:#fff; }
.lib-detail-actions .btn-outline { background:#fff; color:#e74c3c; border:1.5px solid #e1e8ed; }


.lib-detail-v2 { position:relative; }
.lib-detail-edit-btn { position:absolute; top:0; right:0; background:transparent; border:1px solid #e1e8ed; border-radius:8px; padding:6px 10px; font-size:.85rem; cursor:pointer; color:#64748b; }
.lib-detail-fixed { display:flex; gap:16px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #e1e8ed; }
.lib-detail-cover-v2 { width:80px; height:110px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#f0f2f5; display:flex; align-items:center; justify-content:center; }
.lib-detail-cover-v2 img { width:100%; height:100%; object-fit:cover; }
.lib-detail-info-v2 { flex:1; min-width:0; }
.lib-detail-title-v2 { margin:0 0 4px; font-size:1.1rem; font-weight:700; color:#1e293b; }
.lib-detail-sub-v2 { margin:0 0 8px; font-size:.8rem; color:#64748b; }
.lib-detail-tags-v2 { display:flex; flex-wrap:wrap; gap:6px; }
.lib-tag-v2 { background:#f0f2f5; border-radius:6px; padding:2px 8px; font-size:.7rem; color:#475569; }
.lib-detail-status { padding-top:4px; }
.lib-status-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lib-status-btns { display:flex; gap:6px; }
.lib-status-btn { background:#f0f2f5; border:1.5px solid transparent; border-radius:8px; padding:6px 14px; font-size:.78rem; cursor:pointer; color:#475569; transition:all .2s; }
.lib-status-btn.active { background:#4B6CB7; color:#fff; border-color:#4B6CB7; }
.lib-readcount { font-size:.78rem; color:#64748b; display:flex; align-items:center; gap:4px; }
.lib-rc-btn { background:#e1e8ed; border:none; border-radius:50%; width:20px; height:20px; font-size:.75rem; cursor:pointer; color:#475569; line-height:18px; }
.lib-progress-bar { height:8px; background:#e1e8ed; border-radius:4px; overflow:hidden; margin-bottom:6px; }
.lib-progress-fill { height:100%; background:linear-gradient(90deg,#4B6CB7,#5CB85C); border-radius:4px; transition:width .3s; }
.lib-progress-text { font-size:.75rem; color:#64748b; margin-bottom:12px; }
.lib-start-btn { display:block; width:100%; margin-bottom:14px; }
.lib-sessions-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.lib-sessions-header h4 { margin:0; font-size:.9rem; color:#1e293b; }
.lib-session-card { background:#f8f9fb; border-radius:10px; padding:10px 12px; margin-bottom:8px; border:1px solid #e1e8ed; position:relative; }
.lib-sess-top { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.8rem; }
.lib-sess-date { font-weight:700; color:#4B6CB7; min-width:70px; }
.lib-sess-dur { color:#1e293b; }
.lib-sess-page { color:#5CB85C; font-weight:600; }
.lib-sess-actions { margin-left:auto; display:flex; gap:4px; }
.lib-sess-review-v2 { font-size:.78rem; color:#475569; margin-top:6px; padding-top:6px; border-top:1px dashed #e1e8ed; line-height:1.5; }
.lib-detail-footer { margin-top:14px; text-align:center; }
.lib-detail-footer .btn-destructive { background:transparent; color:#e74c3c; border:1px solid #e1e8ed; padding:8px 20px; border-radius:8px; cursor:pointer; font-size:.8rem; }


.lib-cover-upload { display:flex; flex-direction:column; gap:8px; }
.lib-cover-upload .btn { padding:8px 14px; font-size:.8rem; }
.lib-cover-preview { margin-top:6px; }
.lib-cover-preview img { border-radius:6px; border:1px solid #e1e8ed; }




.icon-selection-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin-top: 10px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}


.icon-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #555;
    background: white;
    transition: all 0.3s ease;
}

.icon-option:hover {
    border-color: #4b6cb7;
    color: #4b6cb7;
    transform: scale(1.1);
}

.icon-option.selected {
    border-color: #4b6cb7;
    background-color: #e3f0ff;
    color: #4b6cb7;
    transform: scale(1.05);
}

.color-option {
    width: 32px;
    height: 32px;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.color-option:hover {
    transform: scale(1.2);
}

.color-option.selected {
    border-color: #4b6cb7;
    transform: scale(1.15);
}































.overdue-tag {
    background: #ffebee;
    color: #c62828;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: 8px;
    border: 1px solid #ffcdd2;
}

.overdue-task {
    border-left: 4px solid #f44336;
    background: #fff5f5;
}

.overdue-task .category-bar {
    opacity: 0.8;
}

#manualTimeModal .time-inputs {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

#manualTimeModal .time-inputs > div {
    display: flex;
    flex-direction: column;
}

#manualTimeModal .time-inputs label {
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: 500;
}








.onboarding-modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    overflow: auto;
    animation: onboardingFadeIn 0.3s ease;
}
@keyframes onboardingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.onboarding-modal-content {
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    max-width: 520px;
    width: 92%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: onboardingSlideUp 0.3s ease;
}
@keyframes onboardingSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.onboarding-header {
    padding: 20px 24px 16px;
    background: linear-gradient(135deg, #4B6CB7 0%, #6B7FD7 100%);
}
.onboarding-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.onboarding-progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}
.onboarding-progress-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.onboarding-progress-text {
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-weight: 600;
}
.onboarding-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}
.onboarding-footer {
    padding: 16px 24px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 12px;
}
.onboarding-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding-btn-skip {
    background: transparent;
    color: #64748b;
    border: 1.5px solid #cbd5e1;
}
.onboarding-btn-skip:hover {
    background: #f1f5f9;
    color: #475569;
}
.onboarding-btn-primary {
    background: linear-gradient(135deg, #4B6CB7 0%, #6B7FD7 100%);
    color: white;
}
.onboarding-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(75,108,183,0.4);
}
.onboarding-step-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}
.onboarding-step-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 20px;
    line-height: 1.5;
}
.onboarding-step-hint {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: -12px 0 16px;
    line-height: 1.6;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #F0AD4E;
}


.onboarding-welcome {
    text-align: center;
    padding: 8px 4px 0;
}
.onboarding-welcome-hero {
    background: linear-gradient(135deg, #4B6CB7 0%, #6B85D4 100%);
    color: #fff;
    margin: -8px -16px 24px;
    padding: 28px 20px 32px;
    border-radius: 0 0 20px 20px;
    position: relative;
    overflow: hidden;
}
.onboarding-welcome-hero::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.onboarding-welcome-hero::after {
    content: "";
    position: absolute;
    bottom: -50px; left: -30px;
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}
.onboarding-welcome-badge {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}
.onboarding-welcome-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}
.onboarding-welcome-tagline {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.92;
    position: relative;
    z-index: 1;
}
.onboarding-welcome-tagline b {
    color: #FFD54F;
    font-weight: 600;
}
.onboarding-welcome-steps {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    padding: 0 4px;
}
.onboarding-welcome-step-card {
    flex: 1;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 4px 10px;
    position: relative;
    text-align: center;
    transition: all 0.2s;
}
.onboarding-welcome-step-card:hover {
    border-color: #4B6CB7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 108, 183, 0.15);
}
.onboarding-welcome-step-num {
    position: absolute;
    top: -8px; left: -6px;
    width: 22px; height: 22px;
    background: #4B6CB7;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(75, 108, 183, 0.3);
}
.onboarding-welcome-step-icon {
    font-size: 1.4rem;
    color: #4B6CB7;
    margin: 4px 0 6px;
}
.onboarding-welcome-step-icon i {
    background: linear-gradient(135deg, #e8edf7 0%, #f0f4fc 100%);
    width: 36px; height: 36px;
    line-height: 36px;
    border-radius: 10px;
    display: inline-block;
}
.onboarding-welcome-step-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}
.onboarding-welcome-step-desc {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.3;
}
.onboarding-welcome-step-arrow {
    display: flex;
    align-items: center;
    color: #cbd5e1;
    font-size: 0.8rem;
    flex: 0 0 auto;
    padding: 0 2px;
}
@media (max-width: 480px) {
    .onboarding-welcome-step-arrow { display: none; }
    .onboarding-welcome-steps { flex-wrap: wrap; gap: 8px; }
    .onboarding-welcome-step-card { flex: 1 1 calc(50% - 4px); }
    .onboarding-cards-grid { grid-template-columns: repeat(3, 1fr); }
    .onboarding-card-box { font-size: 0.72rem; }
}
.onboarding-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.onboarding-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.onboarding-form-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 4px;
}
.onboarding-form-required {
    color: #e74c3c;
}
.onboarding-form-input {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    font-size: 0.95rem;
    color: #1e293b;
    background: #fff;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}
.onboarding-form-input:hover {
    border-color: #cbd5e1;
}
.onboarding-form-input:focus {
    border-color: #4B6CB7;
    box-shadow: 0 0 0 4px rgba(75,108,183,0.1);
}
.onboarding-form-input::placeholder {
    color: #94a3b8;
}
select.onboarding-form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}
.onboarding-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.onboarding-avatar-opt {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
}
.onboarding-avatar-opt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.onboarding-avatar-opt:hover {
    background: #e2e8f0;
    transform: scale(1.08);
}
.onboarding-avatar-opt.selected {
    border-color: #4B6CB7;
    background: #e8f0ff;
    box-shadow: 0 0 0 3px rgba(75,108,183,.15);
}
.onboarding-avatar-opt.onboarding-avatar-upload {
    background: #fff;
    border: 2px dashed #cbd5e1;
    color: #94a3b8;
    font-size: 20px;
}
.onboarding-avatar-opt.onboarding-avatar-upload:hover {
    border-color: #4B6CB7;
    color: #4B6CB7;
    background: rgba(75,108,183,.05);
}
.onboarding-templates {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 400px;
    overflow-y: auto;
}
.onboarding-template-category {
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
}
.onboarding-category-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
}
.onboarding-category-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.onboarding-recommended-tag {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: auto;
}
.onboarding-template-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 28px;
}
.onboarding-template-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: 0.85rem;
    color: #475569;
    transition: all 0.15s;
}
.onboarding-template-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.onboarding-template-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
}


.ob-group {
    margin: 0 0 12px 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 10px;
    overflow: hidden;
}
.ob-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5464;
    background: #fafbfd;
    border-bottom: 1px solid #eef1f6;
}
.ob-group-title i { color: var(--primary, #4b6cb7); }

.ob-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3c4658;
    white-space: nowrap;
}
.ob-name i { color: var(--primary, #4b6cb7); }
.ob-unit { font-size: 0.75rem; color: #8b95a6; white-space: nowrap; }

.ob-select {
    padding: 4px 8px;
    border: 1px solid #dfe4ec;
    border-radius: 6px;
    font-size: 0.78rem;
    background: #fff;
    color: #3c4658;
    cursor: pointer;
}

.ob-seg {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    background: #f1f4f9;
    border-radius: 9px;
}
.ob-seg-opt {
    position: relative;
    display: block;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64708a;
    cursor: pointer;
    user-select: none;
}
.ob-seg-opt input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.ob-seg-opt span {
    display: block;
    padding: 5px 14px;
    border-radius: 7px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.ob-seg-opt input:checked + span {
    background: #fff;
    color: var(--primary, #4b6cb7);
    box-shadow: 0 1px 3px rgba(24, 40, 72, 0.13);
}
.ob-seg-opt input:focus-visible + span {
    outline: 2px solid var(--primary, #4b6cb7);
    outline-offset: 1px;
}

.ob-switch {
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}
.ob-switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.ob-switch input:checked ~ .cv-toggle { background: var(--primary, #4b6cb7); }
.ob-switch input:checked ~ .cv-toggle::after { transform: translateX(18px); }
.ob-switch input:focus-visible ~ .cv-toggle {
    outline: 2px solid var(--primary, #4b6cb7);
    outline-offset: 2px;
}

.ob-hint {
    margin: 0;
    padding: 9px 14px 10px;
    border-top: 1px solid #f0f3f8;
    font-size: 0.72rem;
    color: #9aa4b5;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.ob-hint i { color: #b8c0cf; margin-right: 0; margin-top: 1px; }
@media (max-width: 640px) {
    .ob-seg { justify-self: start; }
}

.onboarding-cards {
    padding: 12px 14px;
}
.onboarding-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.onboarding-card-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 6px;
}

.onboarding-card-item:hover .onboarding-card-box {
    background: #f8fafc;
}
.onboarding-card-item input:checked + .onboarding-card-box {
    background: linear-gradient(135deg, rgba(75,108,183,0.1) 0%, rgba(75,108,183,0.05) 100%);
    
    box-shadow: 0 0 0 3px rgba(75,108,183,0.1);
}
.onboarding-card-checkbox {
    display: none;
}
.onboarding-card-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #475569;
    
    border: 2px solid var(--card-color, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    padding: 8px 4px;
    width: 100%;
    min-height: 60px;
    justify-content: center;
    transition: all 0.2s ease;
}
.onboarding-card-box i {
    font-size: 1.4rem;
}
.onboarding-card-checkmark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}
.onboarding-card-item input:checked + .onboarding-card-box .onboarding-card-checkmark {
    opacity: 1;
    background: #4B6CB7;
}
.onboarding-card-checkmark i {
    font-size: 0.7rem !important;
    color: white;
}
.onboarding-empty {
    text-align: center;
    color: #94a3b8;
    padding: 40px 0;
    font-size: 0.9rem;
}






.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4b6cb7;
}

input:checked + .slider:before {
    transform: translateX(26px);
}
.week-day-btn{
  width: 32px; height: 32px; border: 1px solid #4b6cb7;
  background: #fff; color: #4b6cb7; border-radius: 4px;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.week-day-btn.active{
  background: #4b6cb7; color: #fff;
}

#multiScoreEditPage { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1200; background: rgba(245,247,250,0.95); padding: 12px; box-sizing: border-box; }

#multiScoreEditPage.hidden { display: none; }
#multiScoreEditPage .stats-header {
    flex: 0 0 auto; width: 100%; background: var(--primary, #4B6CB7); color: #fff;
    padding: 16px 20px; border-radius: 16px 16px 0 0; display: flex;
    justify-content: space-between; align-items: center; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
#multiScoreEditPage .stats-header h2 { color: #fff; font-size: 1.3rem; margin: 0; }
#multiScoreEditPage .back-btn { background: rgba(255,255,255,0.2); border: none; color: #fff; padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: .85rem; }
#multiScoreEditPage .page-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px 30px;
    -webkit-overflow-scrolling: touch; width: 100%; max-width: 900px; margin: 0 auto;
    background: #fff;
}
#multiScoreEditPage .page-footer {
    flex: 0 0 auto; width: 100%; max-width: 900px; margin: 0 auto;
    padding: 12px 20px; background: #fff; border-top: 1px solid #e2e8f0;
    display: flex; gap: 12px; justify-content: flex-end;
    border-radius: 0 0 16px 16px;
}


.ms-section-header {
    display: flex; justify-content: flex-start; align-items: center; gap: 8px;
    margin-bottom: 12px; padding-bottom: 4px; border-bottom: 2px solid var(--primary);
}
.ms-section-header h4 { margin: 0; color: var(--primary); }
.ms-section-header .ms-checkbox-label { margin: 0; }


.ms-section-label {
    display: flex; justify-content: flex-start; align-items: center; gap: 8px;
    padding: 8px 0 4px; margin-bottom: 4px; font-size: .78rem; font-weight: 700; color: #475569;
}
.ms-section-add-btn {
    padding: 3px 10px; border: 1px dashed #4B6CB7; background: #eff6ff; color: #4B6CB7;
    border-radius: 12px; font-size: .72rem; cursor: pointer;
}
.ms-section-add-btn:hover { background: #4B6CB7; color: #fff; }.ms-subject-row {
    background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0;
    padding: 14px 50px 14px 16px; margin-bottom: 12px; position: relative;
}
.ms-subject-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ms-subject-index {
    width: 24px; height: 24px; background: #4B6CB7; color: #fff;
    border-radius: 50%; font-size: .75rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.ms-subject-header .form-input { margin: 0; }
.ms-subject-select { width: 160px; flex: 0 0 auto; min-width: 130px; }

.ms-subject-score-block { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ms-subject-score-label { font-size: .72rem; color: #64748b; flex: none; }
.ms-subject-score { width: 80px; text-align: center; }
.ms-subject-divider { color: #94a3b8; font-size: .8rem; flex: none; }
.ms-subject-total { width: 80px; text-align: center; }

.ms-subject-target-block { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ms-subject-target { width: 80px; text-align: center; }

.ms-subject-toggle {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border: 1px solid #cbd5e1; background: #fff; color: #4B6CB7;
    cursor: pointer; font-size: .72rem; border-radius: 14px; line-height: 1; flex: 0 0 auto;
    transition: all .2s; font-weight: 600;
}
.ms-subject-toggle:hover { border-color: #4B6CB7; background: #eff6ff; }
.ms-subject-toggle.open { background: #4B6CB7; color: #fff; border-color: #4B6CB7; }
.ms-subject-toggle .toggle-arrow { font-size: .65rem; transition: transform .2s; }
.ms-subject-toggle.open .toggle-arrow { transform: rotate(90deg); }

.ms-subject-delete {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border: none; background: #fee2e2; color: #dc2626;
    cursor: pointer; font-size: .85rem; border-radius: 50%; line-height: 1;
    display: flex; align-items: center; justify-content: center; z-index: 1;
}
.ms-subject-delete:hover { background: #fca5a5; color: #fff; }

.ms-subject-advanced { display: none; padding-top: 10px; margin-top: 10px; border-top: 1px dashed #e2e8f0; }
.ms-subject-advanced.show { display: block; }


.ms-adv-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ms-adv-col { flex: 1 1 100px; min-width: 80px; }
.ms-adv-col label { font-size: .68rem; color: #94a3b8; display: block; margin-bottom: 2px; }
.ms-adv-col .form-input { padding: 6px 8px; font-size: .82rem; }


.ms-ranking-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.ms-ranking-row .form-input { padding: 5px 8px; font-size: .8rem; }

.ms-row-del {
    padding: 2px 8px; border: none; background: none; color: #ef4444; cursor: pointer;
    font-size: .85rem; flex: none;
}
.ms-row-del:hover { background: #fee2e2; border-radius: 4px; }


.ms-weakness-item {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
}


.ms-add-subject-btn {
    width: 100%; padding: 8px; border: 2px dashed #cbd5e1; background: transparent;
    border-radius: 8px; color: #64748b; cursor: pointer; font-size: .85rem; transition: all .2s;
}
.ms-add-subject-btn:hover { border-color: #4B6CB7; color: #4B6CB7; background: #eff6ff; }


.ms-checkbox-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .9rem; font-weight: 600; color: #374151; }
.ms-checkbox-label input[type=checkbox] { width: auto; margin: 0; }
.ms-total-area { background: linear-gradient(135deg, #fef3c7, #fffbeb); border-radius: 12px; padding: 14px; margin-top: 10px; border: 1px solid #fcd34d; }
.ms-total-summary { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.ms-total-stat { display: flex; align-items: baseline; gap: 4px; }
.ms-total-label { font-size: .75rem; color: #92400e; }
.ms-total-val { font-size: 1.4rem; font-weight: 800; color: #d97706; }
.ms-total-val.rate { font-size: 1.1rem; color: #059669; }
.ms-total-unit { font-size: .8rem; color: #92400e; }
.ms-total-divider { color: #d4a017; font-size: 1.2rem; opacity: .5; }
.ms-total-breakdown { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: rgba(255,255,255,.7); border-radius: 8px; margin-top: 8px; }
.ms-breakdown-item { font-size: .78rem; color: #475569; background: #fff; padding: 4px 10px; border-radius: 6px; border: 1px solid #e2e8f0; }
.ms-breakdown-item .subj { font-weight: 600; }
.ms-breakdown-item .score { color: #d97706; font-weight: 600; }
.ms-add-ranking-btn {
    width: 100%; padding: 6px; border: 1px dashed #d4a017; background: rgba(255,255,255,.5);
    border-radius: 6px; color: #92400e; cursor: pointer; font-size: .8rem; margin-top: 6px;
}
.ms-add-ranking-btn:hover { background: #fff; }

.ms-section-label {
    font-size: .78rem; font-weight: 700; color: #475569;
    padding: 8px 0 4px; margin-bottom: 4px;
}


.score-card.total-score .score-category-bar { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }


.ms-detach-modal {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 4000;
}

.ms-detach-modal .ms-detach-content {
    max-width: 440px;
    width: calc(100% - 32px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25), 0 4px 16px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    padding: 0;
    background: #ffffff;
    animation: msDetachIn 0.25s cubic-bezier(.22,.61,.36,1);
}

@keyframes msDetachIn {
    from { transform: translateY(12px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.ms-detach-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 60%, #fcd34d 100%);
    padding: 26px 24px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ms-detach-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.5) 1.5px, transparent 2px),
        radial-gradient(circle at 88% 78%, rgba(255,255,255,0.45) 1.5px, transparent 2px),
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.35) 1px, transparent 1.5px);
    background-size: 120px 80px, 100px 90px, 70px 60px;
    background-repeat: repeat;
    opacity: 0.6;
    pointer-events: none;
}

.ms-detach-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 24px;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
    position: relative;
    z-index: 1;
}

.ms-detach-title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #78350f;
    position: relative;
    z-index: 1;
}

.ms-detach-title .ms-detach-subject {
    display: inline-block;
    background: rgba(255, 255, 255, 0.7);
    color: #92400e;
    padding: 2px 12px;
    border-radius: 999px;
    margin: 0 2px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(120, 53, 15, 0.15);
}

.ms-detach-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: #92400e;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}

.ms-detach-options {
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ms-detach-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
    color: #1e293b;
    position: relative;
}

.ms-detach-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.ms-detach-option:active {
    transform: translateY(0);
}

.ms-detach-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ms-detach-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ms-detach-option-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.ms-detach-option-desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.ms-detach-arrow {
    color: #cbd5e1;
    font-size: 12px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.ms-detach-option:hover .ms-detach-arrow {
    transform: translateX(2px);
    color: #94a3b8;
}

.ms-detach-option--safe {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
    color: #1e3a8a;
}
.ms-detach-option--safe .ms-detach-option-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}
.ms-detach-option--safe .ms-detach-option-desc { color: #475569; }
.ms-detach-option--safe:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
}

.ms-detach-option--danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
    color: #7f1d1d;
}
.ms-detach-option--danger .ms-detach-option-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}
.ms-detach-option--danger .ms-detach-option-desc { color: #b91c1c; opacity: 0.85; }
.ms-detach-option--danger:hover {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #fca5a5;
}

.ms-detach-footer {
    padding: 8px 16px 18px;
    display: flex;
    justify-content: center;
}

.ms-detach-cancel {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.ms-detach-cancel:hover {
    background: #f1f5f9;
    color: #334155;
}


@media (max-width: 480px) {
    .ms-detach-modal .ms-detach-content {
        max-width: calc(100% - 24px);
    }
    .ms-detach-header { padding: 22px 18px 18px; }
    .ms-detach-icon { width: 48px; height: 48px; font-size: 20px; }
    .ms-detach-title { font-size: 1.05rem; }
}


.score-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    
}

.score-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}


.score-category-bar {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    letter-spacing: 2px;
}


.score-card-content {
    flex: 1;
    display: flex;
    height: 100%;
}


.score-data-display-area {
    width: 70%;
    padding: 15px;
    display: flex;
    flex-direction: column;
}


.score-header {
    margin-bottom: 10px;
}

.score-main-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.score-main-title i {
    color: #4b6cb7;
}

.score-subtitle {
    display: flex;
    gap: 20px;
    color: var(--text-light);
    font-size: 0.9rem;
}


.score-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.score-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.score-info-label {
    font-size: 0.8rem;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
}

.score-info-value.target {
    color: #3498db;
}

.score-info-value.average {
    color: #9b59b6;
}

.score-info-value.max {
    color: #e74c3c;
}

.score-info-value.ranking {
    color: #27ae60;
}


.score-action-section {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border-left: 1px solid #f0f4f8;
    justify-content: center;
    align-items: center;
}

.score-circle-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.score-circle-svg {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

.score-circle-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.score-actual {
    font-size: 1.3rem;
    font-weight: bold;
    color: #2c3e50;
    display: block;
    line-height: 1.2;
}

.score-total {
    font-size: 0.9rem;
    color: var(--text-light);
    display: block;
    line-height: 1.2;
}

.score-performance {
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
    border-radius: 12px;
    background: #f8f9fa;
}

.score-performance.excellent {
    color: #4CAF50;
    background: #e8f5e8;
}

.score-performance.good {
    color: #2196F3;
    background: #e3f2fd;
}

.score-performance.average {
    color: #FF9800;
    background: #fff3e0;
}

.score-performance.poor {
    color: #F44336;
    background: #ffebee;
}


.score-card.scBP {
    
    --rail: #eef1f5;
    --ink2: #2c3e50;
    --muted: #8a94a6;
    --acc-blue: #3b82f6;
    --acc-gold: #e8a33d;
    --acc-bad: #ef4444;
    min-height: 150px;
}


.scBP .bp-hero {
    width: 280px;
    flex: 0 0 280px;
    padding: 15px 17px;
    color: #fff;
    display: flex;
    position: relative;
    overflow: hidden;
}

.scBP .bp-hero::after {
    content: "";
    position: absolute;
    right: -46px;
    top: -54px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}
.scBP .bp-hrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
    width: 100%;
}
.scBP .bp-subjbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.scBP .bp-subj {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .10);
    
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.scBP .bp-subj.long { font-size: 22px; }
.scBP .bp-subj.xs { font-size: 18px; }
.scBP .bp-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}
.scBP .bp-badge {
    font-size: 11.5px;
    font-weight: 800;
    background: #fff;
    color: #1f7a49;
    padding: 3px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.scBP .bp-badge.good { color: #1565c0; }
.scBP .bp-badge.average { color: #b26a00; }
.scBP .bp-badge.poor { color: #c62828; }

.scBP .bp-pct {
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, .22);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.scBP .bp-pct.na {
    background: rgba(255, 255, 255, .14);
    opacity: .88;
}


.scBP .bp-ring {
    position: relative;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
}
.scBP .bp-ring svg {
    width: 88px;
    height: 88px;
    display: block;
}
.scBP .bp-in {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scBP .bp-num {
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}
.scBP .bp-den {
    font-size: 10px;
    font-weight: 600;
    opacity: .82;
    margin-top: 1px;
}


.scBP .bp-body {
    flex: 1;
    padding: 14px 18px 15px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.scBP .bp-nm {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink2);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scBP .bp-mt {
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.scBP .a-scale { position: relative; }
.scBP .a-rail {
    position: relative;
    height: 9px;
    border-radius: 99px;
    background: var(--rail);
    overflow: visible;
}

.scBP .a-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #7fd0a1, #2f9e5f);
    z-index: 1;
}
.scBP .a-tick {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 15px;
    border-radius: 2px;
    background: #c3d0e0;
    z-index: 3;
}
.scBP .a-tick.t-max { background: var(--acc-bad); }
.scBP .a-tick.t-avg { background: var(--acc-blue); }
.scBP .a-tick.t-tgt { background: var(--acc-gold); }
.scBP .a-me {
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border-radius: 50%;
    background: #fff;
    border: 3.5px solid #2f9e5f;
    box-shadow: 0 1px 4px rgba(47, 158, 95, .4);
    z-index: 2;
}

.scBP .a-lbls {
    position: relative;
    height: 38px;
    margin-top: 7px;
}
.scBP .a-lbls.one { height: 22px; }
.scBP .a-lbls span {
    position: absolute;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    transform: translateX(-50%);
    font-weight: 600;
}
.scBP .a-lbls .l-line1 { top: 0; }
.scBP .a-lbls .l-line2 { top: 20px; }
.scBP .a-lbls span i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: 0;
}
.scBP .a-lbls .i-avg i { background: var(--acc-blue); }
.scBP .a-lbls .i-tgt i { background: var(--acc-gold); }
.scBP .a-lbls .i-max i { background: var(--acc-bad); }


.scBP .bp-foot {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 2px 14px;
    margin-top: 10px;
}
.scBP .bp-delta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 14px;
    font-size: 11.5px;
    color: var(--muted);
}
.scBP .bp-delta b {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.scBP .bp-delta .up b { color: #1f7a49; }
.scBP .bp-delta .dn b { color: #c9761a; }
.scBP .bp-rank {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    margin-left: auto;
    padding-left: 14px;
}
.scBP .bp-rank b { color: var(--ink2); }


.scBP .bp-break {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 8px;
}
.scBP .bp-bk {
    font-size: 11.5px;
    color: #5b6b82;
    background: #f4f7fb;
    border: 1px solid #e6edf6;
    border-radius: 8px;
    padding: 2px 7px;
    white-space: nowrap;
}
.scBP .bp-bk b {
    color: var(--ink2);
    font-weight: 700;
    margin-right: 3px;
}


@media (max-width: 768px) {
    .score-card.scBP {
        flex-direction: column;
        min-height: 0;
    }
    .scBP .bp-hero {
        width: 100%;
        flex: 0 0 auto;
        padding: 12px 15px;
    }
    .scBP .bp-hero::after {
        right: -50px;
        top: -60px;
    }
    .scBP .bp-subj { font-size: 26px; }
    .scBP .bp-subj.long { font-size: 20px; }
    .scBP .bp-subj.xs { font-size: 17px; }
    .scBP .bp-subjbox { gap: 8px; }
    .scBP .bp-ring { width: 76px; height: 76px; flex: 0 0 76px; }
    .scBP .bp-ring svg { width: 76px; height: 76px; }
    .scBP .bp-num { font-size: 24px; }
    .scBP .bp-den { font-size: 9.5px; }
    .scBP .bp-body { padding: 11px 14px 12px; }
    .scBP .bp-nm { font-size: 14.5px; }
    .scBP .bp-mt { font-size: 11px; }
    .scBP .a-lbls span { font-size: 10.5px; }
    
    .scBP .a-me {
        width: 12px;
        height: 12px;
        margin: -6px 0 0 -6px;
        border-width: 3px;
    }
    .scBP .bp-foot {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .scBP .bp-rank {
        margin-left: 0;
        padding-left: 0;
    }
}




.ranking-item {
    font-size: 0.85rem;
    margin-bottom: 4px;
    line-height: 1.3;
}

.ranking-item:last-child {
    margin-bottom: 0;
}

.preview-disabled {
    background-color: #f7f7f7 !important; 
    border: 1px solid #ddd !important;    
    pointer-events: none !important;      
    color: #555 !important;               
    opacity: 0.9;                        
}

.stats-page {
    display: none; 
    background: var(--light-bg);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 8px 16px var(--shadow);
    margin-top: 20px;

    
    position: relative; 
    z-index: 1000;       
    

}


.edit-page.hidden { display: none; }
.stats-page.hidden { display: none; }




.page-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}


.page-footer {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 12px 16px;
    border-top: 1px solid var(--border, #e0e0e0);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

.page-footer .btn {
    min-width: 100px;
}


.edit-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background: rgba(245, 247, 250, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}

.edit-page .stats-header,
.edit-page .page-body,
.edit-page .page-footer {
    width: 100%;
    max-width: 900px;
}

.edit-page .stats-header {
    flex-shrink: 0;
    padding: 16px 20px;
    margin-bottom: 0;
    margin-top: 0;
    background: var(--primary);
    color: white;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-page .stats-header h2 {
    color: white;
    font-size: 1.3rem;
    margin: 0;
}

.edit-page .stats-header h2 i {
    color: rgba(255, 255, 255, 0.9);
}

.edit-page .stats-header .back-btn {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
}

.edit-page .stats-header .back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.edit-page .stats-header .back-btn i {
    color: white;
}

.edit-page .page-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
    background: var(--light-bg);
}

.edit-page .page-footer {
    flex-shrink: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}


#overviewPage .stats-header,
#overviewPage .page-body {
    max-width: 1200px;
}
#overviewPage .page-body {
    padding: 0;
    background: white;
}


.unsaved-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.unsaved-confirm-box {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.unsaved-confirm-box h3 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    color: #333;
}

.unsaved-confirm-box p {
    margin: 0 0 20px 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

.unsaved-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.unsaved-confirm-actions .btn {
    flex: 1;
    max-width: 160px;
}


.edit-preview-section {
    margin-top: 20px;
    border-top: 2px solid var(--primary, #4a90d9);
    padding-top: 16px;
}

.edit-preview-section h4 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: #333;
}

.edit-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.edit-preview-table th,
.edit-preview-table td {
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.edit-preview-table th {
    background: #f5f5f5;
    font-weight: 600;
    white-space: nowrap;
}

.edit-preview-table td {
    background: white;
}

.edit-preview-table .preview-action-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.85rem;
}

.edit-preview-table .preview-action-btn:hover {
    text-decoration: underline;
}







.batch-task-split {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}


.batch-task-left,
.batch-task-right {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    align-self: stretch;
}

.batch-task-left {
    flex: 0 0 42%;
    max-width: 42%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.batch-task-right {
    flex: 1 1 58%;
    max-width: 58%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}


.batch-panel {
    background: #fafbfc;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 14px 14px 12px;
}

.batch-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.batch-panel-title-main {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.batch-panel-title-main i {
    color: var(--primary, #4a90d9);
}

.batch-panel-title-hint {
    color: #909399;
    font-size: 0.78rem;
}

.batch-link-btn {
    background: transparent;
    border: none;
    color: var(--primary, #4a90d9);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.batch-link-btn:hover {
    background: rgba(74, 144, 217, 0.08);
}


.batch-input-textarea {
    width: 100%;
    min-height: 160px;
    padding: 10px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.55;
    resize: vertical;
    font-family: inherit;
    background: white;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.batch-input-textarea:focus {
    outline: none;
    border-color: var(--primary, #4a90d9);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
}




.batch-pic-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 8px;
    padding: 11px 12px;
    border: 1px dashed #c9cdd4;
    border-radius: 8px;
    background: #fafbfc;
    color: #5b6472;
    font-family: inherit;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.batch-pic-bar:hover {
    border-color: var(--primary, #4a90d9);
    background: rgba(74, 144, 217, 0.05);
    color: var(--primary, #4a90d9);
}
.batch-pic-bar > i { flex: 0 0 auto; font-size: 1rem; }
.batch-pic-bar-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.batch-pic-bar-t { font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.batch-pic-bar-s { font-size: 0.72rem; color: #909399; line-height: 1.35; }

.batch-pic-bar.is-filled {
    border-style: solid;
    border-color: #d9d0ff;
    background: #f8f5ff;
    color: #5b4bd6;
}
.batch-pic-bar:disabled { opacity: 0.55; cursor: not-allowed; }


.batch-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    margin-top: 10px;
}

.batch-duo.is-single { grid-template-columns: minmax(0, 1fr); }
.batch-duo-c {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid #dcdfe6;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.batch-duo-t {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}
.batch-duo-d {
    max-width: 100%;
    font-size: 0.72rem;
    color: #8a93a2;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.batch-duo-c.is-on { border-color: var(--primary, #4a90d9); background: #f3f6fc; }
.batch-duo-c.is-on .batch-duo-t { color: var(--primary, #4a90d9); }
.batch-duo-c.is-on:hover { border-color: #3a7bc8; }
.batch-duo-c.is-ai { border-color: #d9d0ff; background: #f8f5ff; }
.batch-duo-c.is-ai .batch-duo-t { color: #5b4bd6; }
.batch-duo-c.is-ai:hover { border-color: #7c6ce8; background: #f2eeff; }

.batch-duo-c.is-ai.is-active { box-shadow: inset 0 0 0 2px #7c6ce8; }

.batch-duo-c:disabled,
.batch-duo-c.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f6f8;
    border-color: #e4e7ed;
    box-shadow: none;
}
.batch-duo-c:disabled .batch-duo-t { color: #a8adb5; }

.batch-duo-c.is-loading { pointer-events: none; }
.batch-duo-c.is-loading .batch-ai-label::after { content: "…"; }
@media (prefers-reduced-motion: no-preference) {
    .batch-duo-c.is-ai.is-loading { animation: batchAiPulse 1.2s ease-in-out infinite; }
}
@keyframes batchAiPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}


.batch-ln-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.batch-ln-btn {
    padding: 2px 0;
    border: none;
    background: none;
    color: #8a93a2;
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.2s;
}
.batch-ln-btn:hover { color: var(--primary, #4a90d9); }
.batch-ln-sep { color: #d0d4da; font-size: 0.78rem; }


.batch-ai-preview {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    margin-top: 8px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background: #fafbfc;
}
.batch-ai-preview.hidden { display: none; }
.batch-ai-preview-img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
    background: #fff;
}
.batch-ai-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.batch-ai-preview-name {
    font-size: 0.8rem;
    color: #4a5560;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.batch-ai-preview-tip {
    font-size: 0.72rem;
    color: #909399;
}
.batch-ai-preview-del {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #e4e7ed;
    border-radius: 50%;
    background: #fff;
    color: #909399;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.batch-ai-preview-del:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}


.batch-ai-result-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-top: 8px;
    border-radius: 6px;
    background: #f4f1ff;
    color: #5b4bd6;
    font-size: 0.78rem;
    line-height: 1.5;
}
.batch-ai-result-bar.hidden { display: none; }
.batch-ai-result-bar.is-stale {
    background: #fff8e6;
    color: #b8860b;
}


.batch-ai-quota {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #8a94a6;
    line-height: 1.5;
}
.batch-ai-quota:empty { display: none; }


.batch-duo-c.hidden,
.batch-pic-bar.hidden { display: none; }


.batch-card-ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #f4f1ff;
    color: #5b4bd6;
    font-size: 0.68rem;
    line-height: 1.5;
    flex-shrink: 0;
}


.batch-global-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.batch-global-field {
    flex: 1 1 0;
    
    min-width: 112px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.batch-global-field-grow {
    flex: 1 1 100%;
    min-width: 0;
}


.batch-global-field-dur {
    flex: 0 0 104px;
}

.batch-global-field-row {
    flex-direction: row;
    align-items: center;
}

.batch-global-field > label {
    font-size: 0.8rem;
    color: #606266;
    font-weight: 500;
}

.batch-global-field .form-control {
    height: 34px;
    padding: 4px 10px;
    font-size: 0.9rem;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    background: white;
    width: 100%;
    box-sizing: border-box;
    
    min-width: 0;
    max-width: 100%;
}


.batch-global-field input[type="time"].form-control {
    -webkit-appearance: none;
    appearance: none;
}

.batch-global-field .form-control:focus {
    outline: none;
    border-color: var(--primary, #4a90d9);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
}

.batch-global-field select.form-control {
    appearance: auto;
}

.batch-global-hint {
    color: #909399;
    font-size: 0.78rem;
    margin: 4px 0 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.batch-global-hint i {
    color: var(--primary, #4a90d9);
}


.batch-right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e6e8ec;
}

.batch-right-summary {
    color: #606266;
    font-size: 0.92rem;
}

.batch-right-summary #batchPreviewCount,
.batch-right-summary #batchPreviewCategoryCount {
    color: var(--primary, #4a90d9);
    font-weight: 700;
    margin: 0 2px;
}

.batch-right-divider {
    color: #dcdfe6;
    margin: 0 6px;
}

.batch-reset-btn {
    background: transparent;
    border: 1px solid var(--primary, #4a90d9);
    color: var(--primary, #4a90d9);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.batch-reset-btn:hover {
    background: var(--primary, #4a90d9);
    color: white;
}


.batch-preview-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    min-height: 0;
}

.batch-preview-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #c0c4cc;
    padding: 40px 20px;
    text-align: center;
    font-size: 0.9rem;
    gap: 10px;
}

.batch-preview-empty i {
    font-size: 2.4rem;
    color: #dcdfe6;
}


.batch-card {
    background: white;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.batch-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.batch-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f5;
}

.batch-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px 3px 10px;
    border-radius: 20px;
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
    max-width: 140px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.batch-card-tag i {
    font-size: 0.8rem;
}

.batch-card-cat-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 95px;
}

.batch-card-tag .batch-card-cat {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    color: transparent;
    font-size: 0.78rem;
    padding: 0;
}

.batch-card-cat-label {
    color: white;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.batch-card-tag-caret {
    font-size: 0.6rem !important;
    margin-left: 2px;
    opacity: 0.85;
    pointer-events: none;
}

.batch-card-tag select option {
    color: #2c3e50;
    background: white;
}

.batch-card-name {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    border: none;
    background: transparent;
    outline: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.2s;
    min-width: 0;
}

.batch-card-name:focus {
    background: #f5f7fa;
}

.batch-card-delete {
    background: transparent;
    border: none;
    color: #c0c4cc;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.batch-card-delete:hover {
    color: #e74c3c;
    background: #fdf2f2;
}

.batch-card-desc {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    padding: 6px 12px 2px;
    color: #909399;
    font-size: 0.85rem;
    resize: none;
    overflow: hidden;
    min-height: 26px;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.35;
}

.batch-card-desc::placeholder {
    color: #c0c4cc;
    font-style: italic;
}

.batch-card-desc:focus {
    color: #2c3e50;
    background: #fafbfc;
}

.batch-card-fields {
    padding: 4px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.batch-card-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.batch-card-field {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f7f8fb;
    border: 1px solid #ebeef3;
    border-radius: 6px;
    padding: 1px 6px 1px 8px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 30px;
    box-sizing: border-box;
}

.batch-card-field.batch-card-field-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.batch-card-field.batch-card-field-time {
    flex: 2 1 auto;
}

.batch-card-field.batch-card-field-dur {
    flex: 1 1 auto;
    min-width: 80px;
}

.batch-card-field.batch-card-field-date {
    flex: 1 1 auto;
}

.batch-card-field i {
    color: #909399;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.batch-card-field select,
.batch-card-field input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    color: #2c3e50;
    padding: 4px 2px;
    flex: 1;
    min-width: 0;
    width: 100%;
    font-family: inherit;
}

.batch-card-field select {
    cursor: pointer;
}

.batch-card-field input[type="time"] {
    min-width: 60px;
}

.batch-card-field input[type="number"] {
    min-width: 40px;
    max-width: 65px;
    text-align: right;
}

.batch-card-field input[type="date"] {
    cursor: pointer;
    color: #2c3e50;
    min-width: 0;
    flex: 1;
    padding: 4px 1px;
}

.batch-card-arrow {
    color: #c0c4cc;
    font-size: 0.78rem;
    flex-shrink: 0;
    padding: 0 1px;
    user-select: none;
}

.batch-card-unit {
    color: #909399;
    font-size: 0.75rem;
    flex-shrink: 0;
    padding-right: 1px;
    user-select: none;
}

.batch-card-sep {
    color: #dcdfe6;
    flex-shrink: 0;
    user-select: none;
}


.batch-card-footer {
    padding: 6px 12px 8px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #f0f2f5;
    background: #fafbfc;
    border-radius: 0 0 10px 10px;
}

.batch-card-toggle {
    background: transparent;
    border: 1px solid #dcdfe6;
    color: #4a5560;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.batch-card-toggle:hover {
    border-color: var(--primary, #4a90d9);
    color: var(--primary, #4a90d9);
}

.batch-card.batch-card-expanded .batch-card-toggle {
    background: var(--primary, #4a90d9);
    color: white;
    border-color: var(--primary, #4a90d9);
}

.batch-card-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 2px;
    font-size: 0.82rem;
    color: #606266;
    flex-wrap: wrap;
}

.batch-card-sub label {
    white-space: nowrap;
}

.batch-card-sub input[type="number"] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 4px;
    font-size: 0.82rem;
    outline: none;
    width: 46px;
    box-sizing: border-box;
    text-align: center;
}

.batch-card-sub input[type="number"]:focus {
    border-color: var(--primary, #4a90d9);
}

.batch-card-sub .week-day-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.8rem;
    border-radius: 50%;
    background: #f0f2f5;
    border: 1px solid transparent;
    cursor: pointer;
    color: #4a5560;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.batch-card-sub .week-day-btn.active {
    background: var(--primary, #4a90d9);
    color: white;
    border-color: var(--primary, #4a90d9);
}


.batch-card-points-row {
    padding: 4px 12px 0;
    gap: 6px;
    flex-wrap: nowrap;
}

.batch-card-points-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.batch-card-points-values {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.batch-card-pfield {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f7f8fb;
    border: 1px solid #ebeef3;
    border-radius: 5px;
    padding: 1px 5px;
    flex: 1 1 0;
    min-width: 0;
    height: 26px;
    box-sizing: border-box;
}

.batch-card-pfield span {
    font-size: 0.72rem;
    color: #909399;
    flex-shrink: 0;
    white-space: nowrap;
}

.batch-card-pfield input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.82rem;
    color: #2c3e50;
    width: 100%;
    min-width: 20px;
    padding: 2px 0;
    font-family: inherit;
}





.batch-rules-section {
    background: #f7f9fc;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    margin: 0 0 8px;
    overflow: hidden;
}

.batch-rules-content {
    padding: 10px 14px;
    font-size: 0.85rem;
    line-height: 1.65;
    color: #4a5560;
}

.batch-rules-content p {
    margin: 4px 0;
}

.batch-rules-content b {
    color: var(--primary, #4a90d9);
}


.batch-points-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #f7f8fb;
    padding: 10px;
    border-radius: 8px;
}

.batch-points-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.batch-points-cell label {
    font-size: 0.78rem;
    color: #606266;
    font-weight: 500;
}

.batch-points-cell .input-with-buttons {
    height: 30px;
}


.score-header {
    
    
    
    
    
    margin-bottom: 10px; 
}


.score-main-title {
    
    
    
    
    
    
    
    
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 5px; 
}

.score-main-title i {
    
    
}


.exam-name-text {
    font-size: inherit; 
    font-weight: inherit; 
    color: inherit; 
    flex: 1; 
    
    white-space: nowrap; 
}


.score-grade-semester-inline {
    display: flex;
    gap: 6px; 
     
    align-self: center; 
}


.grade-label {
    background-color: #e0e7ff; 
    color: #4f46e5; 
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem; 
    font-weight: 500;
    white-space: nowrap; 
}


.semester-label {
    background-color: #f0fdf4; 
    color: #16a34a; 
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem; 
    font-weight: 500;
    white-space: nowrap; 
}


.score-subtitle {
    
    
    
    
    
    display: flex;
    gap: 15px;
    color: var(--text-light);
    font-size: 0.85rem;
     
}


.score-data-display-area {
    
    
    
    
    
    width: 100%; 
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; 
}

.score-filters {
    background-color: var(--card-bg, #f8f9fa) !important; 
    border-radius: 8px !important; 
    padding: 10px !important; 
    
}


.score-filters label {
    font-size: 0.9rem; 
    color: var(--text-light, #6c757d); 
    margin: 0; 
    white-space: nowrap; 
}


.score-filters select {
    padding: 6px 8px !important; 
    border: 1px solid var(--border-color, #ced4da) !important; 
    border-radius: 4px !important; 
    font-size: 0.9rem; 
    background-color: var(--input-bg, #fff); 
    color: var(--input-text, #212529); 
    min-width: 0; 
    flex: 1; 
    
}


#resetScoreFilters {
    padding: 6px 12px !important; 
    margin-left: 5px !important; 
    background-color: var(--secondary, #6c757d) !important; 
    color: white !important; 
    border: none !important; 
    border-radius: 4px !important; 
    cursor: pointer !important; 
    font-size: 0.85rem; 
    transition: background-color 0.2s; 
}

#resetScoreFilters:hover {
    background-color: #5a6268 !important; 
}





    
    .points-exchange-content {
        padding: 0px;
        width: 100%; 
        margin: 0; 
        box-sizing: border-box; 
    }

    .tabs {
        display: flex;
        margin-bottom: 20px;
    }

    .tab-btn {
        padding: 10px 20px;
        background: #f0f0f0;
        border: none;
        cursor: pointer;
        border-radius: 5px 5px 0 0;
        margin-right: 5px;
    }

    .tab-btn.active {
        background: var(--primary);
        color: white;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .points-records-table {
        width: 100%;
        border-collapse: collapse;
    }

    .points-records-table th,
    .points-records-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .points-records-table th {
        background-color: #f2f2f2;
    }

    .rewards-header {
        margin-bottom: 20px;
    }

    .rewards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }

    .reward-item .icon {
        font-size: 2em;
        margin-bottom: 10px;
    }

    .reward-item h4 {
        margin: 10px 0 5px 0;
    }

    .reward-item p {
        color: #666;
        font-size: 0.9em;
        margin: 5px 0;
    }

    .reward-item .cost {
        font-weight: bold;
        color: var(--primary);
    }
    


.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 8px;
}

.rwd-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
}
.rwd-bar {
    height: 5px;
    width: 100%;
}
.rwd-body {
    padding: 20px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.rwd-icon-wrap {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}
.rwd-card:hover .rwd-icon-wrap { transform: scale(1.08); }
.rwd-icon-wrap i { font-size: 30px; }
.rwd-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
}
.rwd-desc {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 14px;
    line-height: 1.4;
    min-height: 1.4em;
}
.rwd-cost {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 14px;
}
.rwd-cost span {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent, #8b5cf6);
}
.rwd-btn {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.rwd-btn-buy {
    background: linear-gradient(135deg, var(--accent, #8b5cf6), var(--bar, #7c3aed));
    color: #fff;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.rwd-btn-buy:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}
.rwd-btn-locked {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}
.rwd-btn-disabled {
    background: #f1f5f9;
    color: #cbd5e1;
    cursor: not-allowed;
}
.rwd-count {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--accent, #8b5cf6);
    color: #fff;
    border-radius: 50%;
    width: 26px; height: 26px;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 2px solid #fff;
}
.rwd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}


.reward-item, .exchange-count-badge, .reward-item::before,
.reward-item .icon, .reward-item h4, .reward-item p,
.reward-item .cost, .reward-item .btn,
.reward-item:hover .icon i { display: none; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }







#cardVisibilityModal {
    display: none; 
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
}

#cardVisibilityModal .modal-content {
    background-color: var(--card-bg, white);
    margin: 10% auto;
    border: 1px solid var(--border, #ccc);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#cardVisibilityModal .modal-header {
    
    border-bottom: none;
}


#cardVisibilityModal .modal-description p {
    margin: 0;
    font-size: inherit;
    color: inherit;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

#cardVisibilityModal .modal-description i {
    color: #b8c0cf;
}

#cardVisibilityModal .modal-header h3 {
    margin: 0;
}

#cardVisibilityModal .modal-body {
    max-height: 60vh; 
    overflow-y: auto;
    padding-right: 5px; 
}

#cardVisibilityModal .visibility-options {
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

#cardVisibilityModal .visibility-option {
    display: flex;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    background-color: var(--light-bg, #f9f9f9); 
}

#cardVisibilityModal .visibility-option label {
    margin-left: 10px; 
    cursor: pointer;
    flex-grow: 1; 
    color: var(--text, #333);
}

#cardVisibilityModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    border-top: 1px solid var(--border, #ccc);
    padding-top: 15px;
}

#cardVisibilityModal .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

#cardVisibilityModal .btn-primary {
    background-color: var(--primary, #007bff);
    color: white;
}

#cardVisibilityModal .btn-secondary {
    background-color: var(--secondary, #6c757d);
    color: white;
}

#cardVisibilityModal .btn:hover {
    opacity: 0.9;
}

#cardVisibilityModal .drag-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

#cardVisibilityModal .drag-area {
    flex: 1;
    border: 2px dashed var(--border, #e0e0e0);
    border-radius: 12px;
    padding: 15px;
    min-height: 150px;
    position: relative;
    transition: all 0.3s ease;
    overflow-y: auto;
}

#cardVisibilityModal .drag-area-title {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--text, #333);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#cardVisibilityModal .drag-area-title i {
    color: var(--primary, #4b6cb7);
}

#cardVisibilityModal .drag-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 6px;
}

#cardVisibilityModal .visibility-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: 6px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
    min-height: 60px;
    user-select: none;
}

#cardVisibilityModal .visibility-card:hover {
    border-color: var(--primary, #4b6cb7);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

#cardVisibilityModal .visibility-card.in-visible-area {
    border-color: var(--primary, #4b6cb7);
    background: rgba(75, 108, 183, 0.05);
}

#cardVisibilityModal .visibility-card.in-hidden-area {
    border-color: #ddd;
    background: #f9f9f9;
    opacity: 0.85;
}

#cardVisibilityModal .visibility-card-icon {
    font-size: 16px;
    margin-bottom: 3px;
    color: var(--text, #333);
    transition: transform 0.2s ease;
}

#cardVisibilityModal .visibility-card:hover .visibility-card-icon {
    transform: scale(1.1);
}

#cardVisibilityModal .visibility-card-name {
    font-size: 0.6rem;
    color: var(--text, #333);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 3px;
}

#cardVisibilityModal .drag-area-empty {
    text-align: center;
    color: #999;
    
    font-size: 0.85rem;
}

#cardVisibilityModal .visibility-card.dragging {
    opacity: 0.5;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#cardVisibilityModal .drag-area-grid.drag-over {
    background: rgba(75, 108, 183, 0.08);
    border: 2px dashed var(--primary, #4b6cb7);
    border-radius: 8px;
}

#cardVisibilityModal .visibility-card-enter {
    margin-top: 2px;
    padding: 2px 6px;
    background: var(--primary, #4b6cb7);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.55rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 2px;
}

#cardVisibilityModal .visibility-card-enter:hover {
    background: #3a5f9b;
}


#cardVisibilityModal .card-manage-grid {
    display: grid;
    
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    padding: 5px 0;
}
#cardVisibilityModal .card-manage-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;              
    
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 6px;
    user-select: none;
}

#cardVisibilityModal .card-manage-item:hover .card-manage-box {
    background: #f8fafc;
}
#cardVisibilityModal .card-manage-checkbox {
    display: none;
}
#cardVisibilityModal .card-manage-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;              
    width: 100%;               
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text, #475569);
    
    border: 2px solid var(--card-color, #e2e8f0);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    padding: 8px 4px;
    min-height: 60px;
    justify-content: center;
    transition: all 0.2s ease;
}
#cardVisibilityModal .card-manage-checkbox:checked + .card-manage-box {
    background: linear-gradient(135deg, rgba(75,108,183,0.1) 0%, rgba(75,108,183,0.05) 100%);
    
    box-shadow: 0 0 0 3px rgba(75,108,183,0.1);
}
#cardVisibilityModal .card-manage-item.is-unchecked .card-manage-box {
    opacity: 0.55;
}
#cardVisibilityModal .card-manage-box i.card-icon {
    font-size: 1.4rem;
}
#cardVisibilityModal .card-manage-name {
    text-align: center;
    line-height: 1.2;
    
    overflow-wrap: anywhere;
}

#cardVisibilityModal .card-manage-checkmark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}
#cardVisibilityModal .card-manage-checkbox:checked + .card-manage-box .card-manage-checkmark {
    opacity: 1;
    background: var(--primary, #4B6CB7);
}
#cardVisibilityModal .card-manage-checkmark i {
    font-size: 0.7rem;
    color: #fff;
}

#cardVisibilityModal .card-enter-btn {
    margin-top: 2px;
    padding: 2px 8px;
    background: var(--primary, #4b6cb7);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
#cardVisibilityModal .card-enter-btn:hover { background: #3a5f9b; }


#cardVisibilityModal .card-manage-grid.sort-mode .card-manage-item {
    cursor: default;
}
#cardVisibilityModal .card-manage-grid.sort-mode .card-manage-checkmark,
#cardVisibilityModal .card-manage-grid.sort-mode .card-enter-btn {
    display: none;
}
#cardVisibilityModal .card-manage-grid.sort-mode .card-manage-box {
    opacity: 1 !important;
}
#cardVisibilityModal .card-sort-arrows {
    display: none;
    flex-direction: row;
    gap: 4px;
    margin-top: 4px;
}
#cardVisibilityModal .card-manage-grid.sort-mode .card-sort-arrows {
    display: flex;
    
    flex-direction: column;
    width: 100%;
}

#cardVisibilityModal .card-manage-grid.sort-mode .card-sort-arrow {
    width: 100%;
    padding: 3px 2px;
}
#cardVisibilityModal .card-sort-arrow {
    padding: 3px 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.6rem;
    color: var(--text, #475569);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
#cardVisibilityModal .card-sort-arrow:hover:not(:disabled) {
    background: var(--primary, #4b6cb7);
    color: #fff;
    border-color: var(--primary, #4b6cb7);
}
#cardVisibilityModal .card-sort-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


@media (max-width: 480px) {
    #cardVisibilityModal .card-manage-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}







.star-rating {
    display: inline-flex;
    gap: 5px;
}

.star-rating .star {
    cursor: pointer;
    font-size: 20px;
    color: #ddd; 
    transition: color 0.2s ease;
}

.star-rating .star:hover, 
.star-rating .star.selected {
    color: #FFD700; 
}

.star-rating .star:hover ~ .star {
    color: #ddd; 
}


.rating-item {
    display: flex;
    align-items: center;
}

.stat-card.card-hidden {
    display: none !important;
}



.points-exchange-content .tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0; 
    
    
     
}


.points-exchange-content .tab-btn {
    
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    color: #4a6572; 
    border: none; 
    border-bottom: 3px solid transparent; 
    cursor: pointer;
    padding: 12px 24px; 
    margin: 0; 
    font-size: 1rem; 
    font-weight: 500; 
    text-align: center; 
    transition: all 0.3s ease; 
    border-radius: 8px 8px 0 0; 
    position: relative; 
    z-index: 1; 
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.points-exchange-content .tab-btn:hover:not(.active) {
    background: linear-gradient(135deg, #e2eaf2 0%, #c5d5e4 100%); 
    color: #2b3e4d; 
    transform: translateY(-1px); 
}


.points-exchange-content .tab-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    border-bottom-color: #764ba2; 
    
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}



.points-exchange-content .tab-btn .tab-lock {
    display: none;
    margin-left: 5px;
    font-size: 11px;
    color: #c9a227;
    vertical-align: middle;
}
.points-exchange-content .tab-btn.is-vip-locked .tab-lock {
    display: inline-block;
}

.points-exchange-content .tab-btn.is-vip-locked:not(.active) {
    color: #8a7a4a;
}







.points-records-table {
    width: 100%; 
    table-layout: fixed; 
    border-collapse: collapse; 
    word-wrap: break-word; 
    overflow-wrap: break-word;
}


#recordsTab {
    overflow-x: hidden;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}


.points-exchange-content {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}



.points-records-table th:nth-child(1),
.points-records-table td:nth-child(1) {
    width: 13%; 
    text-align: center;
}
.points-records-table th:nth-child(2),
.points-records-table td:nth-child(2) {
    width: 18%; 
    text-align: center;
}
.points-records-table th:nth-child(3),
.points-records-table td:nth-child(3) {
    width: 20%; 
    text-align: left;
    
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
.points-records-table th:nth-child(4),
.points-records-table td:nth-child(4) {
    width: 12%; 
    text-align: center;
    white-space: normal;
}
.points-records-table th:nth-child(5),
.points-records-table td:nth-child(5) {
    width: 12%; 
    text-align: center;
    font-weight: bold;
    white-space: normal;
}
.points-records-table th:nth-child(6),
.points-records-table td:nth-child(6) {
    width: 13%; 
    text-align: center;
    font-weight: bold;
    white-space: normal;
}
.points-records-table th:nth-child(7),
.points-records-table td:nth-child(7) {
    width: 12%; 
    text-align: center;
    padding: 8px 4px;   
}


.rec-revoke-btn {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.5;
    color: #e67e22;
    background: #fff;
    border: 1px solid #e67e22;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.rec-revoke-btn:hover {
    background: #e67e22;
    color: #fff;
}
.rec-revoke-btn:active {
    transform: scale(0.96);
}


.rec-type {
    display: inline-block;
    font-size: 10px;
    line-height: 1.6;
    padding: 0 4px;
    margin-right: 4px;
    border-radius: 3px;
    background: #eef1f5;
    color: #6b7785;
    white-space: nowrap;
    vertical-align: 1px;
}
.rec-del {
    color: #aaa;
    font-size: 11px;
    white-space: nowrap;
}
.rec-res--ok { color: #1f9d55; }
.rec-res--bad { color: #d9534f; }
.rec-res--muted { color: #8a8f99; }


@media (max-width: 480px) {
    .points-records-table th:nth-child(3),
    .points-records-table td:nth-child(3),
    .points-records-table th:nth-child(4),
    .points-records-table td:nth-child(4) {
        font-size: 11px;
        padding: 6px 4px;
    }
    .rec-type {
        font-size: 9px;
        padding: 0 2px;
        margin-right: 2px;
    }
    .rec-del { font-size: 10px; }
}


.points-records-table th,
.points-records-table td {
    font-size: 0.9rem; 
    padding: 8px 10px;    
    border: 1px solid #e0e0e0; 
    vertical-align: top; 
    white-space: normal; 
    word-break: break-word; 
}


.points-records-table th {
    background-color: #f8f9fa;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    white-space: normal; 
    word-break: break-word; 
}




.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; 
}


.lib-pagination {
    margin: 14px 0 6px;
    flex-wrap: wrap;
}
.pagination-ellipsis {
    margin: 0 4px;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1;
}
.lib-page-info {
    margin-left: 10px;
    font-size: 0.85rem;
    color: #888;
    white-space: nowrap;
}

.pagination-btn {
    padding: 8px 12px;
    margin: 0 2px; 
    border: 1px solid #ddd; 
    background-color: #f8f9fa; 
    color: #007bff; 
    cursor: pointer;
    border-radius: 4px; 
    font-size: 0.9rem; 
    transition: background-color 0.2s, color 0.2s; 
}

.pagination-btn:hover:not(:disabled) {
    background-color: #e9ecef; 
    color: #0056b3; 
}

.pagination-btn:disabled {
    color: #6c757d; 
    cursor: not-allowed; 
    opacity: 0.6; 
}

.pagination-btn.page-number.active {
    background-color: #007bff; 
    color: white; 
    border-color: #007bff; 
}

.pagination-btn.page-number.active:hover {
    background-color: #0056b3; 
}

.points-change-badge {
    font-size: 0.8em; 
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px; 
    margin-left: 5px; 
    vertical-align: middle; 
    display: inline-block; 
    min-width: 20px; 
    text-align: center; 
    box-sizing: border-box; 
    white-space: nowrap; 
}

.points-gained {
    color: #27ae60; 
    background-color: #d5f5e3; 
    border: 1px solid #a8e6a1; 
}

.points-lost {
    color: #e74c3c; 
    background-color: #fadbd8; 
    border: 1px solid #e2a7a3; 
}



.timebank-main-content {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    align-items: stretch;
    flex-wrap: wrap;
}

.timebank-left-column {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
}

.timebank-jar-container {
    display: flex;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
}

.timebank-jar-container svg {
    max-width: 100%;
    
    max-height: calc(100% - 46px);
    width: auto;
    height: auto;
    flex: 0 0 auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
}


.timebank-jar-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.3;
    text-align: center;
    flex: 0 0 auto;
}

.timebank-jar-caption .tjc-pct {
    font-size: 15px;
    font-weight: 700;
    color: #4f3fb8;
}

.timebank-jar-caption .tjc-cap {
    font-size: 11.5px;
    font-weight: 600;
    color: #8b93aa;
}

.timebank-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 450px;
}

.timebank-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.timebank-stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 8px var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 100px;
}

.timebank-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow);
}

.timebank-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--time-bank-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--time-bank);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.timebank-icon-principal {
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107;
}

.timebank-icon-interest {
    background: rgba(76, 175, 80, 0.15);
    color: var(--success);
}

.timebank-stat-deposit .timebank-stat-icon {
    background: rgba(76, 175, 80, 0.15);
    color: var(--success);
}

.timebank-stat-exchange .timebank-stat-icon {
    background: rgba(33, 150, 243, 0.15);
    color: #1976D2;
}

.timebank-stat-deduction .timebank-stat-icon {
    background: rgba(244, 67, 54, 0.15);
    color: var(--danger);
}

.timebank-stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.2;
}

.timebank-stat-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--time-bank);
}

.timebank-stat-deposit .timebank-stat-value {
    color: var(--success);
}

.timebank-stat-exchange .timebank-stat-value {
    color: #1976D2;
}

.timebank-stat-deduction .timebank-stat-value {
    color: var(--danger);
}

.timebank-stat-subvalue {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 2px;
}

.timebank-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.timebank-action-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    color: var(--text);
}

.timebank-action-btn:hover {
    background: var(--time-bank-light);
    border-color: var(--time-bank);
    transform: translateY(-2px);
}

.timebank-settings-btn,
.timebank-activity-btn {
    background: var(--time-bank);
    color: white;
    border: none;
}

.timebank-settings-btn:hover,
.timebank-activity-btn:hover {
    background: #6950D8;
}

.stats-header .timebank-settings-btn {
    background: var(--time-bank);
    color: white;
    border: none;
}

.stats-header .timebank-settings-btn:hover {
    background: #6950D8;
}


.timebank-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timebank-header-left h2 {
    margin: 0;
    white-space: nowrap;
}

.timebank-records-section {
    margin-top: 25px;
}


.timebank-tabs {
    display: flex;
    
    flex-wrap: nowrap;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    gap: 5px;
}


.timebank-tab-btn {
    flex: 0 0 auto;          
    padding: 10px 20px;
    background: var(--time-bank-light);
    color: var(--time-bank);
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}


@media (max-width: 480px) {
    .timebank-tabs {
        gap: 4px;
    }
    .timebank-tab-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 10px 6px;
        font-size: 0.88rem;
        gap: 4px;
    }
    .timebank-tab-btn i {
        font-size: 0.88em;
    }
}

.timebank-tab-btn:hover:not(.active) {
    background: #DDD4F5;
}

.timebank-tab-btn.active {
    background: var(--time-bank);
    color: white;
}


.timebank-tab-content {
    display: none;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 8px var(--shadow);
}

.timebank-tab-content.active {
    display: block;
}


.timebank-record-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
}

.timebank-deposit-summary {
    background: rgba(76, 175, 80, 0.1);
}

.timebank-deduction-summary {
    background: rgba(244, 67, 54, 0.1);
}

.timebank-record-summary .summary-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

.timebank-record-summary .summary-value {
    font-size: 1.1rem;
    font-weight: bold;
}

.timebank-deposit-summary .summary-value {
    color: var(--success);
}

.timebank-deduction-summary .summary-value {
    color: var(--danger);
}

.timebank-record-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.timebank-record-table th {
    background: var(--time-bank-light);
    color: var(--time-bank);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}

.timebank-record-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.timebank-record-table tbody tr:last-child td {
    border-bottom: none;
}

.timebank-record-table tbody tr:hover {
    background: rgba(105, 80, 216, 0.05);
}

.timebank-section {
    margin-top: 25px;
}

.timebank-section h3 {
    color: var(--text);
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.timebank-exchange-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.exchange-item {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 4px 8px var(--shadow);
    transition: transform 0.2s;
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
}

.exchange-item:hover {
    transform: translateY(-3px);
}

.exchange-item.available {
    border-color: var(--time-bank);
}

.exchange-item.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.exchange-item-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(75, 108, 183, 0.15);
    color: var(--time-bank);
}

.exchange-item-name {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--text);
}

.exchange-item-time {
    font-size: 0.8rem;
    color: var(--text-light);
}

.add-activity-btn {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px 12px;
    border: 2px dashed var(--primary);
    color: var(--primary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    transition: all 0.3s;
    box-shadow: 0 4px 8px var(--shadow);
}

.add-activity-btn:hover {
    border-style: solid;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px var(--shadow);
}

.add-activity-btn i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(75, 108, 183, 0.15);
}

.add-activity-btn span {
    font-weight: bold;
    font-size: 0.95rem;
}

.exchange-do-btn {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--time-bank, #1abc9c);
    color: #fff;
    transition: all 0.2s;
    margin-top: 4px;
}
.exchange-do-btn:hover { opacity: 0.9; transform: scale(1.02); }
.exchange-do-btn:disabled {
    background: #ccc; color: #999; cursor: not-allowed;
}

.activity-manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--light-bg);
    border-radius: 8px;
    margin-bottom: 8px;
}

.record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
}

.record-item:last-child {
    border-bottom: none;
}

.record-info {
    flex: 1;
}

.record-date {
    font-size: 0.8rem;
    color: var(--text-light);
}

.record-amount {
    font-weight: bold;
    font-size: 1.1rem;
}

.record-amount.deposit {
    color: var(--success);
}

.record-amount.exchange {
    color: var(--danger);
}

.focus-deposit-section,
.focus-timebank-section {
    grid-column: span 2;
    margin-top: 15px;
    padding: 15px;
    background: var(--time-bank-light);
    border-radius: 10px;
    text-align: center;
}

.focus-deposit-btn {
    background: var(--time-bank);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.focus-deposit-btn:hover:not(:disabled) {
    background: #6950D8;
}

.focus-deposit-btn:disabled,
.focus-deposit-btn.focus-deposit-btn-done {
    background: #8bc34a;
    cursor: not-allowed;
    opacity: 0.9;
}

#timeBankCard p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.3;
}









.toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    min-width: 220px;
    text-align: center;
}

.toast-container.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.toast-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 0.9rem;
    opacity: 0.9;
}





        #scorePreviewBody .form-group{margin-bottom:12px}
        #scorePreviewBody input, #scorePreviewBody textarea, #scorePreviewBody select{
          background:#f7f7f7;
          border:none;
          pointer-events:none; 
        }




.tt-view-tabs {
    display: flex;
    gap: 4px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 12px;
}
.tt-view-tab {
    padding: 8px 20px;
    border: none;
    background: none;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    border-radius: 4px 4px 0 0;
}
.tt-view-tab:hover {
    color: var(--primary);
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.tt-view-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}


.timetable-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.timetable-week-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.timetable-nav-btn {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    transition: all 0.2s;
}
.timetable-nav-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.timetable-today-btn {
    font-weight: 600;
    margin-left: 4px;
}
.tt-sync-btn {
    padding: 6px 12px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}
.tt-sync-btn:hover {
    background: var(--primary);
    color: #fff;
}
.timetable-week-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 0 8px;
    min-width: 180px;
    text-align: center;
}
.tt-mgmt-filter {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tt-mgmt-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}



.timetable-grid-wrapper {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow);
    padding: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.timetable-grid {
    display: grid;
    
    grid-template-columns: 80px repeat(7, minmax(140px, 1fr));
    grid-auto-rows: minmax(56px, auto);
    gap: 4px;
    align-items: start;
    padding: 4px;
    background: var(--bg-gray, #f5f5f5);
    border-radius: 8px;
    
    overflow: visible;
    min-width: min-content;
}


.tt-show-weekends {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
    margin-left: 8px;
    user-select: none;
    white-space: nowrap;
}
.tt-show-weekends input {
    accent-color: var(--primary, #4b6cb7);
    cursor: pointer;
}
.timetable-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-light);
}
.timetable-empty-state i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 12px;
}
.timetable-empty-state p {
    font-size: 14px;
    margin: 0;
}


.tt-grid-header {
    display: contents;
}
.tt-corner-cell {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.tt-day-header {
    text-align: center;
    padding: 6px 0;
    border-radius: 8px;
    background: var(--light-bg);
}
.tt-day-header.tt-today {
    background: var(--today-bg);
}
.tt-day-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.tt-day-date {
    display: block;
    font-size: 11px;
    color: var(--text-light);
}


.tt-time-row {
    display: contents;
}
.tt-time-label {
    font-size: 11px;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: pre-line;
    text-align: center;
    padding: 4px;
    font-weight: 600;
}


.tt-section-label {
    padding: 4px 6px;
    text-align: center;
    font-size: 12px;
    color: var(--text);
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.tt-section-label .tt-section-name {
    font-weight: 600;
    font-size: 13px;
}
.tt-section-label .tt-section-time {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}

.tt-section-label.tt-section-pub {
    background: #f4faf6;
}
.tt-section-label.tt-section-pub .tt-section-name {
    color: #2f7d43;
}


.tt-external-label {
    padding: 4px 6px;
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg-gray, #f9f9f9);
    border-radius: 4px;
    border: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.tt-external-label .tt-external-name {
    font-size: 11px;
    color: var(--text-light);
}
.tt-external-label .tt-external-time {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}
.tt-day-cell {
    
    min-height: 0;
    height: 100%;
    border-radius: 8px;
    background: var(--light-bg);
    padding: 4px;
    
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.tt-day-cell.tt-today-cell {
    background: var(--today-bg);
}

.tt-day-cell.tt-merged-cell {
    border: 1.5px dashed var(--primary, #4b6cb7);
    box-sizing: border-box;
}

.tt-day-cell.tt-span-cell {
    background: #eef3fb;
    border: 1px solid #d7e3f7;
    box-sizing: border-box;
}


.tt-day-cell.tt-span-cell .tt-event-card {
    align-items: center;
    text-align: center;
}
.tt-day-cell.tt-span-cell .tt-event-card .tt-card-name {
    justify-content: center;
    padding-right: 0;
}
.tt-day-cell.tt-span-cell .tt-event-card .tt-card-loc {
    justify-content: center;
}
.tt-day-cell.tt-span-cell .tt-event-card .tt-card-sub {
    text-align: center;
}

.tt-day-cell.tt-span-cell .tt-event-card .tt-card-note {
    justify-content: center;
    text-align: left;
}

.tt-day-cell.tt-span-cell .tt-event-card .tt-card-time {
    align-self: center;
}


.tt-event-card {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--shadow);
    padding: 5px 8px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left-width: 4px;
    position: relative;
}



.tt-event-card.tt-school-card {
    background: color-mix(in srgb, var(--card-color, #4b6cb7) 15%, white);
    border: none;
    border-left: 4px solid var(--card-color, #4b6cb7);
    border-radius: 6px;
}


.tt-event-card.tt-external-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--card-color, #e67e22);
    border-radius: 6px;
    box-shadow: 0 1px 3px var(--shadow);
}


.tt-card-sub {
    font-size: 10px;
    color: var(--text-light);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.tt-card-time {
    font-size: 10px;
    color: var(--text-light);
    margin-bottom: 2px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    padding: 0 5px;
    line-height: 1.6;
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.tt-card-hours {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 4px;
}
.tt-card-progress-bar {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 2px;
    overflow: hidden;
}
.tt-card-progress-fill {
    height: 100%;
    background: var(--card-color, #e67e22);
    border-radius: 2px;
    transition: width 0.3s;
}


.tt-card-checkin {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #C9CED6;       
    background: transparent;
    color: transparent;              
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.tt-card-checkin:hover,
.tt-card-checkin:focus-visible {
    border-color: var(--card-color, #e67e22);
    color: var(--card-color, #e67e22);
}
.tt-card-checkin.tt-checked {
    border-color: var(--success, #2ecc71);
    background: var(--success, #2ecc71);
    color: #fff;
    cursor: default;
}
.tt-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}
.tt-event-card.status-checked {
    background: rgba(92, 184, 92, 0.08);
    border-color: rgba(92, 184, 92, 0.3);
}
.tt-event-card.status-missed {
    background: rgba(217, 83, 79, 0.06);
    border-color: rgba(217, 83, 79, 0.2);
}
.tt-event-card.status-abandoned {
    opacity: 0.5;
    background: var(--bg-gray, #f5f5f5);
}

.tt-card-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    
    overflow-wrap: anywhere;
    padding-right: 0;
}
.tt-card-name i {
    font-size: 15px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}

.tt-event-card.tt-external-card .tt-card-name {
    padding-right: 30px;
}
.tt-card-loc {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 10px;
    color: var(--text-light);
    overflow: hidden;
    
    overflow-wrap: anywhere;
}
.tt-card-loc i {
    font-size: 11px;
    flex-shrink: 0;
}

.tt-card-note {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    margin-top: 2px;
    font-size: 10px;
    color: var(--primary, #4b6cb7);
    line-height: 1.4;
}
.tt-card-note i {
    flex: 0 0 auto;
    font-size: 10px;
    margin-top: 2px;
}
.tt-card-note span {
    flex: 1 1 auto;
    min-width: 0;
    
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.tt-status-dot {
    position: absolute;
    bottom: 4px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: none;
    box-shadow: 0 0 0 2px var(--card-bg, #fff);
}
.tt-status-dot.status-checked {
    display: block;
    background: #5CB85C;
}
.tt-status-dot.status-missed {
    display: block;
    background: #D9534F;
}
.tt-status-dot.status-abandoned {
    display: block;
    background: #999;
}


.tt-idle-row {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}
.tt-idle-bar {
    grid-column: 1 / -1;
    height: 20px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 6px,
        rgba(0,0,0,0.05) 6px,
        rgba(0,0,0,0.05) 12px
    );
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-light);
    border: 1px dashed var(--border);
}


.tt-mgmt-section {
    margin-bottom: 20px;
}
.tt-mgmt-count {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 400;
}
.tt-course-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tt-course-grid > .tt-course-card {
    flex: 1 1 220px;
    min-width: 0;
    box-sizing: border-box;
}
.tt-mgmt-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-light);
}
.tt-mgmt-empty i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 12px;
}
.tt-mgmt-empty p {
    font-size: 14px;
    margin: 0;
}


.tt-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.tt-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.tt-progress-text {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
}


.tt-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.tt-type-btn {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg, #fff);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: var(--text);
}
.tt-type-btn.active {
    border-color: var(--primary, #4b6cb7);
    background: var(--primary, #4b6cb7);
    color: #fff;
}
.tt-schedule-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tt-schedule-slot-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tt-schedule-slot-row select,
.tt-schedule-slot-row input[type="time"] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}
.tt-schedule-slot-row select {
    width: 80px;
}
.tt-remove-slot-btn {
    border: none;
    background: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
}
.tt-add-slot-btn {
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    font-size: 13px;
    padding: 6px 12px;
    margin-top: 4px;
}
.tt-skip-schedule-btn {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    font-size: 13px;
}


.tt-course-card {
    padding: 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}
.tt-course-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.tt-course-card.abandoned {
    opacity: 0.6;
}
.tt-course-card.completed {
    border-color: rgba(92, 184, 92, 0.3);
}
.tt-course-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tt-course-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.tt-course-info {
    flex: 1;
    min-width: 0;
}
.tt-course-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-course-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-light);
    margin-top: 2px;
    flex-wrap: wrap;
}
.tt-badge {
    background: var(--primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
}
.tt-course-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.tt-course-status.active {
    background: rgba(75, 108, 183, 0.12);
    color: var(--primary);
}
.tt-course-status.completed {
    background: rgba(92, 184, 92, 0.12);
    color: #5CB85C;
}
.tt-course-status.abandoned {
    background: rgba(153, 153, 153, 0.12);
    color: #999;
}
.tt-course-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tt-course-valid {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 8px;
}


.tt-color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tt-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.tt-color-option:hover {
    transform: scale(1.1);
}
.tt-color-option.selected {
    border-color: var(--text);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text);
}


.tt-icon-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tt-icon-option {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border: 2px solid var(--border);
    transition: all 0.2s;
    color: var(--text-light);
}
.tt-icon-option:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.tt-icon-option.selected {
    border-color: var(--primary);
    background: rgba(75, 108, 183, 0.1);
    color: var(--primary);
}


.tt-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tt-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.tt-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.tt-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 22px;
    transition: 0.3s;
}
.tt-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.tt-switch input:checked + .tt-slider {
    background: var(--primary);
}
.tt-switch input:checked + .tt-slider:before {
    transform: translateX(18px);
}
.tt-toggle-hint {
    font-size: 12px;
    color: var(--text-light);
}


.tt-weekday-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tt-weekday-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.tt-weekday-chip:hover {
    border-color: var(--primary);
}
.tt-weekday-chip input {
    margin: 0;
}


.tt-schedule-slots-help {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
    line-height: 1.5;
}
.tt-schedule-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.tt-schedule-slot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-gray, #f9f9f9);
}
.tt-slot-time-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.tt-schedule-slot-row .tt-slot-day {
    width: 90px;
    flex-shrink: 0;
}
.tt-schedule-slot-row .tt-slot-start,
.tt-schedule-slot-row .tt-slot-end {
    width: 110px;
    flex-shrink: 0;
}
.tt-schedule-slot-row .tt-slot-separator {
    color: var(--text-light);
    font-size: 12px;
    flex-shrink: 0;
}
.tt-slot-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


@media (max-width: 768px) {
    .tt-schedule-slot-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .tt-slot-time-group {
        flex-wrap: wrap;
        gap: 6px;
    }
    .tt-schedule-slot-row .tt-slot-start,
    .tt-schedule-slot-row .tt-slot-end {
        width: 100px;
        font-size: 13px;
        padding: 6px 8px;
    }
    .tt-schedule-slot-row .tt-slot-day {
        width: 80px;
    }
    .tt-slot-actions {
        width: 100%;
        justify-content: space-between;
        padding-top: 6px;
        border-top: 1px dashed var(--border);
    }
}
.tt-remove-slot-btn {
    background: transparent;
    border: none;
    color: #D9534F;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.tt-remove-slot-btn:hover {
    background: rgba(217, 83, 79, 0.1);
}
.tt-add-slot-btn {
    background: transparent;
    border: 1px dashed var(--primary);
    color: var(--primary);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.tt-add-slot-btn:hover {
    background: rgba(75, 108, 183, 0.08);
}
.tt-add-slot-btn i {
    margin-right: 4px;
}


.tt-batch-preview {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-gray, #f9f9f9);
}
.tt-preview-header,
.tt-preview-row {
    display: grid;
    grid-template-columns: 40px 100px 60px 100px 1fr 40px;
    gap: 4px;
    padding: 6px 8px;
    align-items: center;
    font-size: 12px;
}
.tt-preview-header {
    background: var(--border);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tt-preview-row {
    border-bottom: 1px solid var(--border);
}
.tt-preview-row.tt-conflict {
    background: rgba(217, 83, 79, 0.08);
}
.tt-conflict-tag {
    color: #D9534F;
    font-size: 10px;
    font-weight: 600;
}
.tt-preview-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
    font-size: 13px;
}


.tt-detail-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    gap: 12px;
    align-items: center;
}
.tt-detail-label {
    width: 80px;
    color: var(--text-light);
    flex-shrink: 0;
    font-weight: 600;
}


.tt-status-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.tt-status-tag.status-pending {
    background: rgba(75, 108, 183, 0.12);
    color: var(--primary);
}
.tt-status-tag.status-checked {
    background: rgba(92, 184, 92, 0.12);
    color: #5CB85C;
}
.tt-status-tag.status-missed {
    background: rgba(217, 83, 79, 0.12);
    color: #D9534F;
}
.tt-status-tag.status-abandoned {
    background: rgba(153, 153, 153, 0.12);
    color: #999;
}


#courseDetailModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
#courseDetailModal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    white-space: nowrap;
}


#eventDetailModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
#eventDetailModal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    white-space: nowrap;
}


.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.modal-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    white-space: nowrap;
}
.tt-cd-header {
    margin-bottom: 16px;
}
.tt-cd-info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.tt-cd-info-row span:first-child {
    color: var(--text-light);
    font-weight: 600;
}
.tt-cd-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
.tt-cd-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 16px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.tt-cd-events-table {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.tt-cd-events-header,
.tt-cd-events-row {
    display: grid;
    grid-template-columns: 40px 100px 60px 80px 60px;
    gap: 4px;
    padding: 6px 8px;
    font-size: 12px;
    align-items: center;
}
.tt-cd-events-header {
    background: var(--border);
    font-weight: 600;
    position: sticky;
    top: 0;
}
.tt-cd-events-row {
    border-bottom: 1px solid var(--border);
}
.tt-cd-no-events {
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    font-size: 13px;
}
.tt-cd-checkin-list {
    max-height: 200px;
    overflow-y: auto;
}
.tt-cd-checkin-item {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.tt-cd-auto-tag {
    background: #EEF3FF;
    color: #4B6CB7;
    border: 1px solid #D6E0F7;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 16px;
    align-self: center;
    flex: none;
}

.tt-cd-manual-tag {
    background: #FAEEDA;
    color: #854F0B;
    border: 1px solid #F0D9AE;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 16px;
    align-self: center;
    flex: none;
}

.tt-cd-checkin-del {
    margin-left: auto;
    background: none;
    border: none;
    color: #a32d2d;
    font-size: 11px;
    cursor: pointer;
    padding: 0 2px;
    flex: none;
}
.tt-cd-checkin-del:hover {
    text-decoration: underline;
}
.tt-mini-checkin-btn {
    background: #5CB85C;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.tt-mini-checkin-btn:hover {
    background: #4cae4c;
}


.form-row {
    display: flex;
    gap: 12px;
}


.btn-success {
    background: #5CB85C;
    color: #fff;
    border: none;
}
.btn-success:hover {
    background: #4cae4c;
}
.btn-warning {
    background: #F0AD4E;
    color: #fff;
    border: none;
}
.btn-warning:hover {
    background: #ec971f;
}





.tm-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.tm-tabs-bar {
    display: flex;
    align-items: flex-start;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,0.06));
}
.tm-tabs-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.tm-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.82rem;
    color: #666;
    background: #f0f2f5;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    border: 1.5px solid transparent;
    user-select: none;
    line-height: 1.3;
}
.tm-tab:hover {
    background: rgba(75,108,183,0.1);
    color: var(--primary, #4b6cb7);
}
.tm-tab.active {
    background: var(--primary, #4b6cb7);
    color: #fff;
    font-weight: 600;
    border-color: var(--primary, #4b6cb7);
}
.tm-tab i {
    font-size: 0.78rem;
}
.tm-tab-add {
    background: transparent;
    border: 1.5px dashed #bbb;
    color: #999;
    padding: 6px 12px;
}
.tm-tab-add:hover {
    border-color: var(--primary, #4b6cb7);
    color: var(--primary, #4b6cb7);
    background: rgba(75,108,183,0.05);
}


.hxb-catsort-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: #8a9099;
    line-height: 1.45;
}
.hxb-catsort-hint i {
    margin-top: 2px;
    color: var(--primary, #4b6cb7);
}
.hxb-catsort-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 2px;
}
.hxb-catsort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f7f8fa;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
}
.hxb-catsort-idx {
    flex: 0 0 auto;
    min-width: 18px;
    text-align: center;
    font-size: 0.72rem;
    color: #9aa0a6;
    font-variant-numeric: tabular-nums;
}
.hxb-catsort-icon {
    flex: 0 0 auto;
    font-size: 0.85rem;
}
.hxb-catsort-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hxb-catsort-btns {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}
.hxb-catsort-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #666;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.hxb-catsort-btn:hover:not(:disabled) {
    background: rgba(75,108,183,0.1);
    border-color: var(--primary, #4b6cb7);
    color: var(--primary, #4b6cb7);
}
.hxb-catsort-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.hxb-catsort-empty {
    padding: 18px 10px;
    text-align: center;
    font-size: 0.82rem;
    color: #999;
}

@media (max-width: 480px) {
    .hxb-catsort-btn { width: 36px; height: 36px; font-size: 0.85rem; }
    .hxb-catsort-list { max-height: 46vh; }
}


.tm-tpl-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.tm-tpl-action-bar h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--primary, #4b6cb7);
    flex-shrink: 0;
}
.tm-tpl-action-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.tm-action-btn {
    background: #f0f2f5;
    color: #555;
    border: 1px solid #ddd;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s;
}
.tm-action-btn:hover {
    background: rgba(75,108,183,0.1);
    color: var(--primary, #4b6cb7);
    border-color: var(--primary, #4b6cb7);
}
.tm-action-del {
    color: #c62828;
}
.tm-action-del:hover {
    background: rgba(198,40,40,0.1);
    color: #c62828;
    border-color: #c62828;
}
.tm-main {
    width: 100%;
}
.tm-tpl-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tm-tpl-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,0.06));
    transition: all 0.2s;
}
.tm-tpl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--shadow, rgba(0,0,0,0.15));
}
.tm-tpl-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.85rem;
    gap: 8px;
}
.tm-tpl-cat {
    color: var(--primary, #4b6cb7);
    font-weight: 600;
    padding-top: 6px;
}
.tm-tpl-top-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.tm-tpl-icon-btn {
    background: #f0f7ff;
    border: none;
    color: #4b6cb7;
    cursor: pointer;
    font-size: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.tm-tpl-icon-btn:hover {
    background: #4b6cb7;
    color: #fff;
    transform: scale(1.1);
}
.tm-tpl-icon-del {
    color: #c62828;
    background: #ffebee;
}
.tm-tpl-icon-del:hover {
    background: #c62828;
    color: #fff;
}
.tm-tpl-points {
    color: #888;
}
.tm-tpl-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}
.tm-tpl-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}
.tm-tpl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.tm-tpl-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #888;
    background: #f0f2f5;
    padding: 3px 9px;
    border-radius: 12px;
}
.tm-tpl-del {
    background: #e74c3c;
}
.tm-tpl-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.tm-tpl-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
}


#sidebar { display: none !important; }







.attachment-section {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--light-bg);
}

.attachment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.attachment-header label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
    margin: 0;
}


.attachment-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 2px dashed #4B6CB7;
    border-radius: 8px;
    background: transparent;
    color: #4B6CB7;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
}

.attachment-add-btn:hover {
    background: rgba(75, 108, 183, 0.08);
    border-color: #3a5a9f;
    color: #3a5a9f;
}

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

.attachment-add-btn.disabled {
    border-color: #ccc;
    color: #999;
    cursor: not-allowed;
    background: transparent;
}


.attachment-format-hint {
    font-size: 0.75rem;
    color: #999;
    margin: 4px 0 8px 0;
    line-height: 1.4;
}


.attachment-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.attachment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.75rem;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    transition: all 0.15s;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.attachment-item:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.attachment-icon {
    font-size: 1.8rem;
    color: #4B6CB7;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.attachment-icon.img { color: #4CAF50; }
.attachment-icon.doc { color: #2196F3; }
.attachment-icon.audio { color: #FF9800; }
.attachment-icon.video { color: #E91E63; }
.attachment-icon.archive { color: #9C27B0; }
.attachment-icon.other { color: #607D8B; }

.attachment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

.attachment-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
    font-size: 0.7rem;
}

.attachment-name:hover {
    color: #4B6CB7;
    text-decoration: underline;
}

.attachment-size {
    font-size: 0.65rem;
    color: #999;
}

.attachment-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    border: 1px solid #ddd;
    color: #999;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 1px 4px;
    border-radius: 50%;
    transition: all 0.15s;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 10;
}

.attachment-delete-btn:hover {
    color: #F44336;
    background: #fff;
    border-color: #F44336;
    transform: scale(1.15);
}


.card-attachment-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #4B6CB7;
    padding: 2px 8px;
    background: rgba(75, 108, 183, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 4px;
}

.card-attachment-indicator:hover {
    background: rgba(75, 108, 183, 0.15);
}


.attachment-view-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.attachment-view-item:last-child {
    border-bottom: none;
}

.attachment-view-item:hover {
    background: var(--light-bg);
}

.attachment-view-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.attachment-view-icon.img { color: #4CAF50; }
.attachment-view-icon.doc { color: #2196F3; }
.attachment-view-icon.audio { color: #FF9800; }
.attachment-view-icon.video { color: #E91E63; }
.attachment-view-icon.archive { color: #9C27B0; }
.attachment-view-icon.other { color: #607D8B; }

.attachment-view-info {
    flex: 1;
    min-width: 0;
}

.attachment-view-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.attachment-view-size {
    font-size: 0.75rem;
    color: #999;
    margin-top: 2px;
}


.focus-attachment-grid-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(75, 108, 183, 0.15);
}

.focus-attachment-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4B6CB7;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.focus-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 70px);
    gap: 8px;
}

.focus-attachment-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 8px;
    background: rgba(75, 108, 183, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.focus-attachment-grid-item:hover {
    background: rgba(75, 108, 183, 0.1);
    border-color: rgba(75, 108, 183, 0.2);
    transform: translateY(-2px);
}

.focus-attachment-grid-icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.focus-attachment-grid-icon.img { color: #4CAF50; }
.focus-attachment-grid-icon.doc { color: #2196F3; }
.focus-attachment-grid-icon.audio { color: #FF9800; }
.focus-attachment-grid-icon.video { color: #E91E63; }
.focus-attachment-grid-icon.archive { color: #9C27B0; }
.focus-attachment-grid-icon.other { color: #607D8B; }

.focus-attachment-grid-name {
    font-size: 0.7rem;
    color: #666;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
    line-height: 1.2;
}




.radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
}

.radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4b6cb7;
}

.radio-label input[type="radio"]:checked + span {
    color: #4b6cb7;
    font-weight: 500;
}

.focus-timer-mode-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.focus-timer-mode-tab {
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #f0f2f5;
    color: #666;
    border: none;
}

.focus-timer-mode-tab.active {
    background: #4b6cb7;
    color: white;
}

.focus-timer-mode-tab.countdown-active {
    background: #e74c3c;
    color: white;
}

.focus-timer-mode-tab.pomodoro-active {
    background: #e74c3c;
    color: white;
}

.focus-timer-mode-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.focus-timer-display.countdown-mode {
    color: #e74c3c;
}

.focus-timer-display.countup-mode {
    color: #4b6cb7;
}


.focus-timer-boxes {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.focus-timer-boxes .timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 112px;
    border-radius: 18px;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
    color: #3A5AB8;
}


.focus-timer-boxes .timer-unit.hours {
    background: rgba(91, 127, 199, 0.14);
    border-color: rgba(91, 127, 199, 0.28);
}

.focus-timer-boxes .timer-unit.minutes {
    background: rgba(123, 180, 200, 0.15);
    border-color: rgba(123, 180, 200, 0.30);
}

.focus-timer-boxes .timer-unit.seconds {
    background: rgba(147, 150, 210, 0.14);
    border-color: rgba(147, 150, 210, 0.28);
}


.focus-timer-boxes.countdown-mode .timer-unit.hours {
    background: rgba(232, 108, 108, 0.14);
    border-color: rgba(232, 108, 108, 0.32);
    color: #D9534F;
}

.focus-timer-boxes.countdown-mode .timer-unit.minutes {
    background: rgba(245, 166, 120, 0.15);
    border-color: rgba(245, 166, 120, 0.32);
    color: #D9534F;
}

.focus-timer-boxes.countdown-mode .timer-unit.seconds {
    background: rgba(255, 200, 130, 0.15);
    border-color: rgba(255, 200, 130, 0.32);
    color: #D9534F;
}


.focus-timer-boxes.countdown-mode .timer-unit.hours.editable,
.focus-timer-boxes.countdown-mode .timer-unit.minutes.editable {
    border-color: rgba(217, 83, 79, 0.48);
}

.focus-timer-boxes.countdown-mode .timer-unit.hours.editable:hover,
.focus-timer-boxes.countdown-mode .timer-unit.minutes.editable:hover,
.focus-timer-boxes.countdown-mode .timer-unit.hours.editable:focus-within,
.focus-timer-boxes.countdown-mode .timer-unit.minutes.editable:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(217, 83, 79, 0.14);
    border-color: rgba(217, 83, 79, 0.68);
}

.focus-timer-boxes.countup-mode .timer-unit {
    pointer-events: none;
}


.focus-timer-boxes .timer-unit.hours,
.focus-timer-boxes .timer-unit.minutes,
.focus-timer-boxes .timer-unit.seconds {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.focus-timer-boxes .timer-value {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "zero" off;
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'PingFang SC', monospace;
    cursor: default;
    outline: none;
    border: none;
    background: transparent;
    color: inherit;
    width: 100%;
    text-align: center;
    padding: 0;
}

.focus-timer-boxes.countdown-mode .timer-unit.hours.editable .timer-value,
.focus-timer-boxes.countdown-mode .timer-unit.minutes.editable .timer-value {
    cursor: text;
}

.focus-timer-boxes .timer-value-input {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "zero" off;
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'PingFang SC', monospace;
    text-align: center;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    padding: 0;
}

.focus-timer-boxes .timer-label {
    font-size: 0.8rem;
    margin-top: 8px;
    font-weight: 500;
    color: inherit;
    opacity: 0.85;
}

.focus-timer-boxes .timer-colon {
    font-size: 2rem;
    font-weight: 700;
    color: #9aa3b2;
    margin-top: 28px;
    line-height: 1;
}

.focus-timer-boxes .timer-arrow {
    display: none;
    position: absolute;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 8px 16px;
    transition: color 0.2s, transform 0.15s, opacity 0.2s;
    line-height: 1;
    opacity: 0.7;
}

.focus-timer-boxes .timer-arrow:hover {
    opacity: 1;
    transform: scale(1.2);
}

.focus-timer-boxes .timer-arrow.up {
    top: 0;
}

.focus-timer-boxes .timer-arrow.down {
    bottom: 20px;
}

.focus-timer-boxes .timer-unit.editable .timer-arrow {
    display: block;
}

.focus-timer-boxes .timer-unit.editable .timer-value,
.focus-timer-boxes .timer-unit.editable .timer-value-input {
    margin-top: 12px;
}

.focus-timer-boxes .timer-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.focus-timer-hint {
    text-align: center;
    font-size: 0.75rem;
    color: #999;
    margin: 0 0 16px;
    min-height: 1.2em;
}






.main-tab-bar {
    display: flex;
    gap: 0;
    background: #f0f2f8;
    border-radius: 10px;
    padding: 4px;
    margin: 10px 0 12px 0;
    align-items: center;
}

.main-tab-btn {
    flex: 1;
    padding: 7px 0;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
    font-weight: 500;
}

.main-tab-btn.active {
    background: #fff;
    color: #4B6CB7;
    box-shadow: 0 2px 6px rgba(75,108,183,0.15);
    font-weight: 600;
}


.main-tab-btn .tab-label {
    position: relative;   
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tab-badge {
    position: absolute;
    top: -8px;
    right: -3px;
    min-width: 15px;
    height: 15px;
    box-sizing: border-box;
    padding: 0 4px;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(231, 76, 60, 0.45);
    pointer-events: none;
}

.tab-badge[hidden] {
    display: none;
}


.task-tab-with-sort {
    position: relative;
    gap: 4px;
}

.task-tab-with-sort .tab-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.task-tab-with-sort .sort-container {
    display: inline-flex;
    align-items: center;
}

.main-tab-bar .sort-btn {
    background: rgba(75, 108, 183, 0.12);
    border: 1px solid rgba(75, 108, 183, 0.3);
    border-radius: 6px;
    padding: 3px 8px;
    color: #4B6CB7;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

.main-tab-bar .sort-btn:hover {
    background: rgba(75, 108, 183, 0.22);
    border-color: rgba(75, 108, 183, 0.5);
    transform: scale(1.05);
}

.main-tab-bar .sort-btn:active {
    transform: scale(0.96);
}

.main-tab-btn.active .sort-btn {
    color: #4B6CB7;
}


.main-tab-btn:not(.active) .sort-container {
    display: none !important;
}


.sort-option.is-active {
    background: rgba(75, 108, 183, 0.14) !important;
    color: #35528f !important;
    font-weight: 700 !important;
}


.sort-option.is-active::after {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 10px;
    margin-left: auto;
    margin-right: 4px;
    border: solid #4B6CB7;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}


.sort-option.is-active:hover {
    background: rgba(75, 108, 183, 0.22) !important;
}




#habitListMain {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    margin: 0;
}


.habit-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    height: 120px;
}
.habit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.habit-card-left {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    padding: 5px 0;
    cursor: default;
}
.habit-card-left i {
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.habit-card-cat-name {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    text-align: center;
    max-height: 100%;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    line-height: 1.3;
}

.habit-card-middle {
    flex: 1;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    min-width: 0;
    display: flex;
    flex-direction: column;

    gap: 4px;
    cursor: pointer;
}
.habit-card-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.habit-name {
    font-weight: 700;
    font-size: 1.25rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.habit-name i {
    color: #4b6cb7;
}

.habit-mode-tag,
.habit-weekday-tag,
.habit-cat-tag {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: #eef0f7;
    color: #555;
    white-space: nowrap;
}

.habit-weekday-tag { background: #e3f2fd; color: #1976d2; }
.habit-cat-tag     { background: #f3e5f5; color: #6a1b9a; }

.habit-card-desc {
    font-size: 0.92rem;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    background: #f9fbfd;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    padding: 4px 8px;
    line-height: 1.3;
    max-height: 70px;
}

.habit-card-points {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.habit-point-reward,
.habit-point-penalty {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.habit-point-reward {
    color: #2ecc71;
    background: #f0fff4;
}

.habit-point-penalty {
    color: #e74c3c;
    background: #fff5f5;
}


.habit-card-action {
    flex-shrink: 0;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
    border-left: 1px solid #f0f4f8;
    transition: background 0.15s;
}

.habit-card-action:hover { background: #f8f9ff; }

.habit-card-action.checked { background: #f0faf0; }
.habit-card-action.failed  { background: #fff5f5; }
.habit-card-action.unchecked {}

.checkin-btn-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #B0B0B0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #B0B0B0;
    font-weight: 700;
    transition: all 0.3s ease;
}

.habit-card-action:hover .checkin-btn-circle {
    transform: scale(1.1);
}

.checked .checkin-btn-circle { border-color: #4CAF50; color: #4CAF50; }

.checkin-done-icon {
    font-size: 1.5rem;
}

.checkin-label {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    font-weight: 500;
}

.checked .checkin-label { color: #4CAF50; font-weight: 600; }
.failed  .checkin-label { color: #F44336; font-weight: 600; }

.sup-tag {
    display: inline-block;
    background: #FF9800;
    color: #fff;
    font-size: 0.65rem;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 2px;
}


@property --ring-progress {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.habit-ring-progress {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
}

.habit-ring-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e8ecf0;
}

.habit-ring-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        var(--ring-color, var(--habit-color, #4b6cb7)) 0deg,
        var(--ring-color, var(--habit-color, #4b6cb7)) var(--ring-progress, 0deg),
        transparent var(--ring-progress, 0deg)
    );
    mask: radial-gradient(transparent 44%, black 46%);
    -webkit-mask: radial-gradient(transparent 44%, black 46%);
}

.habit-ring-fill.animate {
    animation: ring-fill-anim 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ring-fill-anim {
    from { --ring-progress: var(--ring-start, 0deg); }
    to { --ring-progress: var(--ring-target, 0deg); }
}

.habit-ring-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: 78%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.habit-ring-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--habit-color, #4b6cb7);
    font-weight: 600;
}

.habit-ring-count {
    font-size: 0.58rem;
    color: #666;
    font-weight: 500;
    margin-top: -2px;
}

.habit-card-action:hover .habit-ring-inner {
    transform: translate(-50%, -50%) scale(1.05);
    transition: transform 0.2s ease;
}

.habit-card-action.checked .habit-ring-icon {
    color: #4CAF50;
}

.habit-card-action.failed .habit-ring-icon {
    color: #e74c3c;
}





.checkin-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f0f4ff 0%, #f8f0ff 100%);
    border-bottom: 1px solid #eee;
}
.checkin-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4B6CB7, #6a89d8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(75,108,183,0.3);
}
.checkin-info-text { flex: 1; min-width: 0; }
.checkin-info-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkin-info-date {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #888;
    font-size: 0.82rem;
    margin-top: 3px;
}
.checkin-info-date i { font-size: 0.75rem; }


.checkin-body-inner { padding: 16px 18px 4px; }


.checkin-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 12px;
}
.checkin-tip i { flex-shrink: 0; margin-top: 2px; }
.tip-warning { background: #fff8e1; color: #e65100; }
.tip-info    { background: #e3f2fd; color: #0277bd; }


.checkin-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.checkin-section-label i { color: #999; font-size: 0.78rem; }


.checkin-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.checkin-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid #eee;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.checkin-option-card:hover {
    border-color: #c8d6e5;
    background: #f8f9fb;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

.checkin-option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.checkin-option-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #fff;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.icon-completed { background: linear-gradient(135deg, #4CAF50, #66bb6a); box-shadow: 0 2px 6px rgba(76,175,80,0.3); }
.icon-failed    { background: linear-gradient(135deg, #f44336, #ef5350); box-shadow: 0 2px 6px rgba(244,67,54,0.3); }
.icon-cancel    { background: linear-gradient(135deg, #FF9800, #ffa726); box-shadow: 0 2px 6px rgba(255,152,0,0.3); }


.checkin-option-text { flex: 1; min-width: 0; }
.checkin-option-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
}
.checkin-option-desc {
    font-size: 0.76rem;
    color: #999;
    margin-top: 2px;
}


.checkin-option-check {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #ddd;
    transition: all 0.2s ease;
}


.checkin-option-card:has(input[value="completed"]:checked),
.checkin-option-card.selected[data-status="completed"] {
    border-color: #4CAF50;
    background: #f1f8f4;
}
.checkin-option-card:has(input[value="completed"]:checked) .checkin-option-check,
.checkin-option-card.selected[data-status="completed"] .checkin-option-check {
    color: #4CAF50;
    font-size: 0.85rem;
}

.checkin-option-card:has(input[value="failed"]:checked),
.checkin-option-card.selected[data-status="failed"] {
    border-color: #f44336;
    background: #fef3f2;
}
.checkin-option-card:has(input[value="failed"]:checked) .checkin-option-check,
.checkin-option-card.selected[data-status="failed"] .checkin-option-check {
    color: #f44336;
    font-size: 0.85rem;
}

.checkin-option-card:has(input[value="cancel"]:checked),
.checkin-option-card.selected[data-status="cancel"] {
    border-color: #FF9800;
    background: #fff8ef;
}
.checkin-option-card:has(input[value="cancel"]:checked) .checkin-option-check,
.checkin-option-card.selected[data-status="cancel"] .checkin-option-check {
    color: #FF9800;
    font-size: 0.85rem;
}


.checkin-note-section { margin-bottom: 4px; }
.checkin-note-input {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
}


.checkin-actions {
    padding: 12px 18px 16px;
    margin-top: 0;
}
.checkin-actions .btn {
    padding: 10px 20px;
    font-size: 0.95rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.checkin-actions .btn-primary {
    background: linear-gradient(135deg, #4B6CB7, #5b7fc7);
    box-shadow: 0 3px 10px rgba(75,108,183,0.3);
}
.checkin-actions .btn-primary:hover {
    background: linear-gradient(135deg, #3a5795, #4B6CB7);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(75,108,183,0.4);
}


.habit-modal-content {
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
}

.habit-mode-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.habit-mode-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.88rem;
}


.habit-icon-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.habit-icon-option {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #eee;
    background: #f8f9ff;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.15s;
}

.habit-icon-option:hover { border-color: #9B59B6; color: #9B59B6; }
.habit-icon-option.selected {
    border-color: #9B59B6;
    background: #f3e5f5;
    color: #9B59B6;
}


.habit-color-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.habit-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.habit-color-option:hover { transform: scale(1.15); }
.habit-color-option.selected {
    border-color: #333;
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}


.habit-weekday-picker {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.weekday-checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.weekday-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.weekday-checkbox span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: #666;
    transition: all 0.15s;
    font-weight: 500;
}

.weekday-checkbox input:checked + span {
    background: #4B6CB7;
    border-color: #4B6CB7;
    color: #fff;
}


.habit-detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.habit-detail-info-item {
    background: #f8f9ff;
    border-radius: 8px;
    padding: 10px 14px;
}

.info-label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 4px;
}

.info-val {
    font-size: 0.92rem;
    font-weight: 600;
    color: #333;
}

.habit-detail-desc {
    background: #f0f2f8;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #555;
    margin-bottom: 16px;
    min-height: 36px;
}

.habit-detail-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.habit-stat-card {
    flex: 1;
    text-align: center;
    background: linear-gradient(135deg, #4B6CB7 0%, #9B59B6 100%);
    color: #fff;
    border-radius: 10px;
    padding: 14px 10px;
}

.habit-stat-val {
    font-size: 1.4rem;
    font-weight: 700;
}

.habit-stat-label {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 4px;
}

.habit-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.habit-detail-checkin-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.habit-detail-checkin-item:last-child {
    border-bottom: none;
}


.archived-habit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9ff;
    border-radius: 8px;
    margin-bottom: 8px;
}

.archived-habit-name {
    flex: 1;
    font-size: 0.9rem;
    color: #555;
}

.btn-restore-habit {
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}


.tm-type-tabs-bar {
    display: flex;
    gap: 0;
    background: #f0f2f8;
    border-radius: 10px;
    padding: 4px;
    margin: 10px 16px;
}

.tm-type-tab {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
    font-weight: 500;
}

.tm-type-tab.active {
    background: #fff;
    color: #4B6CB7;
    box-shadow: 0 2px 6px rgba(75,108,183,0.15);
    font-weight: 600;
}


.btn-danger {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-danger:hover { background: #c82333; }


.ht-tpl-card {
    position: relative;
    display: flex;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: box-shadow 0.2s;
    cursor: pointer;
    border: 1px solid #f0f0f0;
}
.ht-tpl-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.ht-tpl-color-bar {
    width: 5px;
    min-height: 100%;
    flex-shrink: 0;
}
.ht-tpl-inner {
    flex: 1;
    padding: 14px 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ht-tpl-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ht-tpl-top-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.ht-tpl-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
}
.ht-tpl-name i {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ht-tpl-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}
.ht-tpl-point {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f8f9fa;
    color: #555;
}
.ht-tpl-reward { background: #fff8e1; color: #856404; }
.ht-tpl-penalty { background: #fdecea; color: #7d1515; }
.ht-tpl-milestone { background: #f3e8ff; color: #5b21b6; }


.fab-menu {
    position: fixed;
    bottom: 24px;
    right: 16px;
    width: 56px;
    height: 56px;
    z-index: 1100;
}

.fab-main {
    position: absolute;
    top: 0; left: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: #4B6CB7;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(75,108,183,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    z-index: 1101;
    transition: background 0.3s ease;
}
.fab-main i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-main:hover { background: #3a5795; }
.fab-menu.open .fab-main { background: #E74C3C; }
.fab-menu.open .fab-main:hover { background: #c0392b; }
.fab-menu.open .fab-main i { transform: rotate(45deg); }


.fab-sub-btn {
    position: absolute;
    top: 50%; left: 50%;
    width: 58px; height: 58px;
    border-radius: 50%;
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    padding: 4px;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 1101;
    
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    transition-delay: 0s;
}
.fab-sub-btn span {
    display: inline-block;
    transition: transform 0.2s ease;
}
.fab-sub-btn:hover { filter: brightness(1.1); }
.fab-sub-btn:hover span { transform: scale(1.08); }


.fab-menu.open .fab-sub-btn {
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-menu.open .fab-sub-1 {
    transform: translate(calc(-50% - 85px), calc(-50% - 85px)) scale(1);
    transition-delay: 0s;
}
.fab-menu.open .fab-sub-2 {
    transform: translate(calc(-50% - 125px), calc(-50% - 25px)) scale(1);
    transition-delay: 0.05s;
}
.fab-menu.open .fab-sub-3 {
    transform: translate(calc(-50% - 85px), calc(-50% + 25px)) scale(1);
    transition-delay: 0.1s;
}







.task-card.periodic-goal {
    min-height: 0; 
}


.task-card.periodic-goal .periodic-progress-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.periodic-progress-bar-wrapper {
    flex: 1;
    height: 8px;
    background: #e8ecf0;
    border-radius: 4px;
    overflow: hidden;
    min-width: 40px;
}
.periodic-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: #4b6cb7;
}
.periodic-progress-bar-fill.completed { background: #4CAF50; }
.periodic-progress-bar-fill.failed { background: #e74c3c; }

.periodic-progress-text {
    font-size: 0.72rem;
    color: #888;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.periodic-progress-text .count { font-weight: 600; color: #555; }
.periodic-progress-text .count.completed { color: #4CAF50; }
.periodic-progress-text .count.failed { color: #e74c3c; }
.periodic-progress-text .days-info { color: #aaa; }
.periodic-progress-text .days-info.completed { color: #4CAF50; }
.periodic-progress-text .days-info.failed { color: #e74c3c; }









.focus-period-overview {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.focus-period-overview .focus-period-bar-wrapper {
    height: 12px;
    background: #e8ecf0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.focus-period-overview .focus-period-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: #4b6cb7;
    transition: width 0.4s ease;
}
.focus-period-overview .focus-period-bar-fill.completed { background: #4CAF50; }
.focus-period-overview .focus-period-bar-fill.failed { background: #e74c3c; }
.focus-period-overview .focus-period-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
}
.focus-period-overview .focus-period-info .period-percent {
    font-weight: 700;
    font-size: 1rem;
    color: #4b6cb7;
}
.focus-period-overview .focus-period-info .period-percent.completed { color: #4CAF50; }
.focus-period-overview .focus-period-info .period-percent.failed { color: #e74c3c; }


.focus-period-records {
    margin-bottom: 16px;
}
.focus-period-records .records-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.focus-period-records table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.focus-period-records th {
    background: #f5f7fa;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: #777;
    border-bottom: 2px solid #e8ecf0;
    white-space: nowrap;
}
.focus-period-records td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f4f8;
    color: #555;
}
.focus-period-records tr:last-child td { border-bottom: none; }
.focus-period-records .no-records {
    text-align: center;
    padding: 20px;
    color: #bbb;
    font-size: 0.85rem;
}
.period-record-completed {
    color: #28a745;
    font-weight: 500;
}
.period-record-failed {
    color: #dc3545;
    font-weight: 500;
}
.focus-period-records .records-table-wrapper {
    max-height: 132px; 
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.focus-period-records .records-table-wrapper.expanded {
    max-height: none !important;
}
.records-expand-wrap {
    margin-top: 8px;
    text-align: center;
}
.records-expand-btn {
    background: none;
    border: 1px solid #d0d5dd;
    color: #777;
    font-size: 0.82rem;
    padding: 5px 18px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.records-expand-btn:hover {
    background: #f5f7fa;
    color: #555;
    border-color: #b0b8c4;
}


.pomodoro-sessions-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.pomodoro-sessions-section th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: #777;
    border-bottom: 2px solid #e8ecf0;
    white-space: nowrap;
    background: #f5f7fa;
}
.pomodoro-sessions-section td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f4f8;
    color: #555;
}
.pomodoro-sessions-section tr:last-child td { border-bottom: none; }
.pomodoro-session-active td {
    color: #e74c3c;
    font-weight: 500;
}
.pomodoro-session-total td {
    color: #4b6cb7;
    font-weight: 600;
    background: #f8f9ff;
}


.pomodoro-sessions-table-wrapper {
    max-height: 132px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.pomodoro-sessions-table-wrapper.expanded {
    max-height: none !important;
}


.share-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.85rem;
}
.share-btn:hover {
    background: var(--secondary);
    transform: scale(1.05);
}
.share-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
    padding-top: 20px;
}
.share-subtab {
    padding: 8px 24px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
}
.share-subtab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.share-subtab:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.share-subpanel {
    padding: 0 20px;
    max-height: 55vh;
    overflow-y: auto;
}
.share-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.share-date-item {
    padding: 10px 6px;
    border: 2px solid var(--border);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    user-select: none;
}
.share-date-item .day-name {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: #999;
}
.share-date-item .day-date {
    display: block;
}
.share-date-item.selected {
    background: #f0f4ff;
    border-color: var(--primary);
    color: var(--primary);
}
.share-date-item.today-date {
    background: #fff9e6;
    border-color: #ffa500;
}
.share-task-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}
.share-task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}
.share-task-item:last-child {
    border-bottom: none;
}
.share-task-item:hover {
    background: #f8f9ff;
}
.share-task-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.share-task-item .task-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.share-task-item .task-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-task-item .task-meta {
    font-size: 0.78rem;
    color: #999;
}


.share-level-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    flex: 1;
    transition: all 0.2s;
}
.share-level-option input[type="radio"] {
    display: none;
}
.share-level-option:has(input:checked) {
    border-color: var(--primary);
    background: #f0f4ff;
}
.share-level-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}
.share-level-desc {
    font-size: 0.75rem;
    color: #999;
}


#shareScreenshotArea {
    width: 700px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
    padding: 28px;
    border-radius: 20px;
}
.share-screenshot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--primary);
}
.share-screenshot-logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-screenshot-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.share-screenshot-date {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-bottom: 18px;
}
.share-screenshot-tasks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-screenshot-card {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.share-screenshot-card .card-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.share-screenshot-card .card-meta {
    font-size: 0.8rem;
    color: #999;
}
.share-screenshot-decor {
    position: absolute;
    opacity: 0.06;
    font-size: 5rem;
    color: var(--primary);
}
.share-screenshot-watermark {
    text-align: center;
    margin-top: 18px;
    font-size: 0.75rem;
    color: #bbb;
}
.share-preview-container {
    text-align: center;
}





.flex-center     { display: flex; align-items: center; }
.input-with-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.input-with-buttons .form-control {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.input-with-buttons button {
    flex-shrink: 0;
    min-width: 32px;
}
.flex-between    { display: flex; justify-content: space-between; align-items: center; }
.flex-gap-sm     { display: flex; align-items: center; gap: 5px; }
.flex-gap-md     { display: flex; align-items: center; gap: 10px; }
.flex-wrap-gap   { display: flex; flex-wrap: wrap; gap: 8px; }
.flex-col-gap    { display: flex; flex-direction: column; gap: 12px; }
.grid-2col       { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hidden          { display: none; }
.text-center     { text-align: center; }
.text-muted      { color: var(--text-muted); }
.mt-sm           { margin-top: 8px; }
.mt-md           { margin-top: 16px; }
.mb-sm           { margin-bottom: 8px; }
.mb-md           { margin-bottom: 16px; }
.p-sm            { padding: 8px; }
.p-md            { padding: 16px; }
.color-swatch    { width: 30px; height: 30px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }
.color-swatch.selected { border-color: var(--primary); }
.card-base       { background: var(--card-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.card-compact    { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }


        

        @media (max-width: 768px) {
            .timer-display {
                width: 100%;
                max-width: 100%;
                padding: 8px 8px 6px 8px;
                box-sizing: border-box;
            }
            .timer-value {
                font-size: 1.35rem;
            }
            .timer-mode-tag {
                font-size: 0.6rem;
            }
        }

        @media (max-width: 768px) {
            .focus-container {
                padding: 10px;
            }

            .focus-task-card {
                padding: 10px;
            }

            .focus-task-content {
                width: 100%; 
                max-width: none; 
                padding: 60px 20px 20px;
                margin: 0 -10px; 
                border-radius: 0; 
            }
        }

        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }

            .date-navigation {
                flex-direction: column;
                align-items: flex-start;
            }

            .date-controls {
                margin-left: 0;
                margin-top: 2px;
            }

            .week-days {
                flex-wrap: wrap;
            }

            .day-btn {
                min-width: calc(50% - 10px);
                margin-bottom: 10px;
            }

       
  .task-card {
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .category-bar {
    width: 40px; 
    height: auto; 
    padding: 10px 0; 
    justify-content: center; 
    font-size: 0.9rem;
    border-radius: 12px 0 0 12px; 
  }

.data-display-area {
   padding: 10px 12px;
}


.info-row {
    flex-wrap: nowrap;
    margin-bottom: 6px;
}

.task-title {
    font-size: 1.1rem;
    margin-right: 8px;
}

.description-box {
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 6px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    
}




            .stats-grid {
                grid-template-columns: 1fr;
            }

            .stat-chart {
                height: 300px;
            }

            .header-row {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }

            .action-buttons-container {
                width: 100%;
                justify-content: space-between;
            }

            .date-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .week-controls {
                width: 100%;
                justify-content: space-between;
            }

            
            .today-stats {
                gap: 8px;
            }

            .week-days {
                min-width: auto;
            }

            .day-btn {
                min-width: auto;
                flex: 1;
            }

            .sidebar {
                min-width: 100%;
            }

            .tasks-container {
                min-width: 100%;
            }

            .focus-task-content {
                padding: 60px 20px 20px;
            }

            .focus-details {
                grid-template-columns: 1fr;
            }

            .focus-task-title {
                font-size: 1.8rem;
            }

            .focus-timer-display {
                font-size: 3rem;
            }

            
            .congrats-content {
                padding: 22px 16px 20px;
            }

            .congrats-icon {
                font-size: 50px;
            }

            .congrats-content h2 {
                font-size: 1.4rem;
            }

            .congrats-message {
                font-size: .95rem;
            }

            .stats-card-item {
                padding: 10px 8px;
            }

            .stats-card-icon {
                width: 32px;
                height: 32px;
                font-size: 16px;
                border-radius: 10px;
            }

            .stats-card-value {
                font-size: 1rem;
            }

            .stats-card-label {
                font-size: .68rem;
            }

            .backup-btn {
                padding: 10px 28px;
                font-size: .95rem;
            }

            .congrats-message {
                font-size: 1rem;
            }

            .stats-details p {
                font-size: 1rem;
            }

            .backup-btn {
                padding: 12px 25px;
                font-size: 1.1rem;
            }
        }

@media (max-width: 768px) {

  .today-stats {
    
    display: grid;
    grid-template-columns: repeat(var(--card-columns, 5), 1fr);
  }

   
  .sidebar.collapsed .sidebar-header h2 {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    font-size: 1rem;
    white-space: nowrap;
  }
  .sidebar.collapsed .sidebar-header h2 i {
    transform: none;
    margin-bottom: 0;
  }

  
.week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    min-width: 0;
}
.day-btn {
    flex: none;
    min-width: 0;
    padding: 4px 1px;
    font-size: 0.75rem;
    border-radius: 6px;
    margin: 0;
}
.day-name {
    font-size: 0.7rem;
    margin-bottom: 2px;
}
.day-date {
    font-size: 0.9rem;
    font-weight: bold;
}
.day-btn.today {
    background: var(--warning);
    color: white;
}
.day-btn.active {
    background: var(--primary);
    color: white;
}

  
  .main-content {
    width: 100%;
    max-width: 100%;
  }
  .tasks-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  
  .focus-controls .focus-btn {
    padding: 8px 16px;
    font-size: 1rem;
  }
  .focus-timer-display {
    font-size: 3rem;
  }
  .focus-task-content {
    width: 100vw;                
    max-width: 100vw;
    border-radius: 0;
    margin-left: -20px;
    margin-right: -20px;
    padding: 60px 15px 15px;     
  }
}

@media (max-width: 768px) {
  
  .card-content {
    width: 100%;
    
  }

  
  .data-display-area {
    width: 100% !important;   
    flex: 1 1 0%;
    box-sizing: border-box;
    padding: 8px 12px;        
  }

  
  .action-section {
    width: auto;              
    min-width: 110px;         
    flex-shrink: 0;           
  }

  
  .info-row {
    flex-wrap: wrap;
    word-break: break-word;
  }
}

@media (max-width: 768px) {
  header {
    position: relative;
    padding: 0;
    text-align: left;
  }

  .header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }

  .header-left {
    align-items: flex-start;
    width: auto;
    padding: 15px 15px 15px 15px;
  }

  
  header h2 {
    margin: 0 5px 0 0;
    font-size: 2.2rem;
    color: white;
    font-weight: 700;
    display: inline-block;
  }

  header h3 {
    margin: 0;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    display: inline-block;
  }

  #subTitle {
    font-size: 0.9rem !important;
    margin: 5px 0 0 0 !important;
  }

  
  .header-right {
    width: auto;
    justify-content: flex-end;
    padding: 15px 15px 15px 15px;
  }

  .account-controls {
    position: static;
    margin-top: 0;
  }

  .account-trigger {
    background: transparent;
    padding: 2px 4px;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: auto;
    font-size: .75rem;
  }

  
  .account-menu {
    position: absolute;
    top: 70px;
    right: 10px;
    left: auto;
    z-index: 9999;
  }
}

@media (max-width: 768px) {
  .sidebar.collapsed {
    min-height: 0;          
    padding: 6px 4px;       
    height: 44px;           
  }

  .sidebar.collapsed .sidebar-header {
    line-height: 1;         
  }

  .sidebar.collapsed .sidebar-header h2 {
    font-size: 1.2rem;      
  }

  .sidebar.collapsed .sidebar-header h2 i {
    font-size: 1.2rem;        
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;          
  }

  .stat-chart {
    min-width: 0 !important;             
    width: 100%;                         
    overflow-x: hidden;                  
  }
}

@media (max-width: 768px) {
  
  .task-card {
    height: auto !important;
    min-height: 110px; 
    padding-bottom: 5px;
  }

  
  .action-section {
    padding-top: 0 !important;
    margin-top: -10px; 
    gap: 5px !important; 
  }

  
  .timer-display {
    font-size: 1.3rem !important;
    padding: 6px 8px !important;
    margin-bottom: 2px !important;
  }

  .timer-controls {
    gap: 4px !important; 
  }

  .timer-btn {
    width: 40px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  
  .data-display-area {
    padding-bottom: 2px !important;
  }

  .description-box {
    margin-bottom: 2px !important;
  }
}

@media (max-width: 768px) {
    
    .current-date-display {
        display: none !important;
    }

    
    .header-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px;   
        width: 100%;
    }

    
    .header-row h2 {
        flex: 1 1 auto;
        white-space: nowrap;
        margin: 0;
    }

    .add-task-main-btn {
        flex-shrink: 0;
        white-space: nowrap;
        margin-left: 0;   
    }
}

@media (max-width: 768px) {
    .task-list-main {
        gap: 10px !important;   
    }
    .task-card {
        margin: 0 !important;   
        width: 100% !important; 
        transform: none !important; 
    }
}

@media (max-width: 768px) {
    
    .week-days-container {
        padding: 2px 5px !important;   
        margin-bottom: 10px;           
    }

    
    .week-days {
        gap: 2px !important;           
        padding: 0 !important;         
        align-items: center;           
    }

    
    .day-btn {
        padding: 4px 2px !important;   
        font-size: 0.75rem;
        line-height: 1;                
    }
}

@media (max-width: 768px) {
    .add-task-main-btn {
        width: 50%; 
        padding: 2px; 
        margin: 0 2px; 
    }
	 }

@media (max-width: 768px) {
    .badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }

    .bdg-card {
        padding: 18px 10px 14px;
        min-height: 170px;
    }

    .bdg-icon-ring {
        width: 56px; height: 56px;
    }

    .bdg-icon-ring i {
        font-size: 28px !important;
    }

    .bdg-name {
        font-size: 0.85rem;
    }

    .bdg-desc {
        font-size: 0.72rem;
    }

    .bdg-icon-ring i {
        font-size: 26px !important;
    }

    .bdg-name {
        font-size: 0.85rem;
    }

    .bdg-desc {
        font-size: 0.72rem;
    }

    
    .badge-item::before {
        width: 50%;
        height: 12px;
        top: -6px;
    }
}

@media (max-width: 768px) {
  .badge-controls {
    flex-wrap: wrap;          
    gap: 8px 1px;             
    justify-content: left;  
  }

  .badge-controls .add-task-main-btn {
    flex: 1 1 auto;           
    min-width: 0;             
    max-width: 110px;         
    padding: 6px 8px;         
    font-size: 0.85rem;       
    white-space: nowrap;      
    overflow: hidden;
    text-overflow: ellipsis;  
  }
  
.sort-container {
    position: relative;
    display: inline-block;
}

.sort-btn {
    background: #6c757d;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-btn:hover {
    background: #5a6268;
    transform: scale(1.05);
}

.sort-dropdown {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1100; 
    min-width: 150px;
    top: 100%;
    left: 0;
}

.sort-option {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.sort-option:hover {
    background: #f0f7ff;
}

.sort-option:last-child {
    border-bottom: none;
}
@media (max-width: 768px) {
    
    .sort-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .sort-dropdown {
        min-width: 130px;
    }

    .sort-option {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    
}
}

@media (max-width: 768px) {
    .icon-selection-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .icon-option {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    
    .task-list-main {
        gap: 8px !important;
    }

    .task-card {
        margin-bottom: 6px !important;
        height: 100px !important; 
    }

    
    .data-display-area {
        padding: 6px 10px !important;
    }

    .info-row {
        margin-bottom: 4px !important;
    }

    .task-title {
        font-size: 1.1rem !important;
        margin-right: 6px !important;
    }

    .description-box {
        max-height: 50px !important;   
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        padding: 4px 6px !important;
    }

    
    .action-section {
        padding: 4px 6px !important;
        gap: 4px !important;
        min-width: 90px !important; 
    }

    .timer-display {
        font-size: 1.2rem !important;
        padding: 8px 10px !important;
        margin-bottom: 2px !important;
    }

    .timer-controls {
        gap: 4px !important;
    }

    .timer-btn {
        width: 36px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .timer-btn i {
        font-size: 12px !important;
    }

    
    .category-bar {
        width: 35px !important;
        font-size: 0.9rem !important;
    }

    
    .today-stats {
        gap: 6px !important;
    }

    .stat-card {
        padding: 8px 4px !important;
    }

    .stat-card h3 {
        font-size: 1.2rem !important;
    }

    .stat-card p {
        font-size: 0.75rem !important;
    }

    
    .week-days-container {
        padding: 2px 3px !important;
        margin-bottom: 8px !important;
    }

    .week-days {
        gap: 2px !important;
    }

    .day-btn {
        padding: 3px 1px !important;
        font-size: 0.7rem !important;
    }

    .day-name {
        font-size: 0.65rem !important;
        margin-bottom: 1px !important;
    }

    .day-date {
        font-size: 0.85rem !important;
    }

    
    .header-row {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .date-row {
        padding: 2px 2px !important;
    }

    
    .action-buttons-container {
        gap: 6px !important;
    }

    .add-task-main-btn {
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
        min-width: 0 !important;
    }

    
    .sidebar.collapsed {
        padding: 4px 2px !important;
        height: 40px !important;
    }

    .sidebar.collapsed .sidebar-header h2 {
        font-size: 1rem !important;
        gap: 4px !important;
    }

    
    .focus-controls {
        gap: 12px !important;
        margin-top: 20px !important;
    }

    .focus-btn {
        padding: 10px 18px !important;
        font-size: 0.95rem !important;
    }

    .focus-timer-display {
        font-size: 2.5rem !important;
        margin: 20px 0 !important;
    }
}

@media (max-width: 768px) {
  
  .container {
    padding: 10px;
  }

  
  .task-card {
    margin: 2px 0;
  }

  
  .category-bar {
    font-size: 0.9rem;
  }

  
  .task-title {
    font-size: 1.1rem;
  }

  .description-box {
    font-size: 0.9rem;
    max-height: 50px;
  }

  
  .timer-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .timer-display {
    font-size: 1.2rem;
    padding: 8px 10px;
  }

  
  .today-stats {
    gap: 8px;
  }

  .stat-card {
    padding: 8px 5px;
  }

  .stat-card h3 {
    font-size: 1.3rem;
  }

  .stat-card p {
    font-size: 0.8rem;
  }

  
  .day-btn {
    padding: 6px 2px;
    font-size: 0.8rem;
  }

  .day-name {
    font-size: 0.75rem;
  }

  .day-date {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  
  .data-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 5px !important;
    margin: 15px 0 !important;
  }

  
  .data-btn {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    flex: 1 !important; 
    min-width: 0 !important; 
    max-width: 120px !important; 
    text-align: center !important;
  }

  
  .data-btn i {
    font-size: 0.8rem !important;
    margin-right: 4px !important;
  }

  
  @media (max-width: 480px) {
    .data-buttons {
      gap: 5px !important;
    }

    .data-btn {
      padding: 6px 8px !important;
      font-size: 0.75rem !important;
      max-width: 100px !important;
    }

    .data-btn i {
      font-size: 0.7rem !important;
      margin-right: 3px !important;
    }
  }

  
  @media (max-width: 360px) {
    .data-btn {
      padding: 5px 6px !important;
      font-size: 0.7rem !important;
      max-width: 90px !important;
    }

    
    .data-btn .btn-text {
      display: inline-block;
      max-width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

@media (max-width: 768px) {
  .data-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 2px !important;
    margin: 12px 0 !important;
  }

  .data-btn {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .data-btn i {
    font-size: 0.75rem !important;
    margin-right: 4px !important;
  }
}

@media (max-width: 768px) {
  
  body {
    padding: 10px 5px !important; 
  }

  .container {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  
  .task-card {
    width: 100% !important;
    margin: 0 0 8px 0 !important;
  }

  .card-content {
    width: 100% !important;
    overflow: hidden !important; 
  }

  .data-display-area {
    width: 65% !important; 
    min-width: 0 !important; 
    flex-shrink: 1 !important;
  }

  .action-section {
    width: 35% !important; 
    min-width: 100px !important; 
    flex-shrink: 0 !important; 
  }

  
  .header-row {
    padding: 0 2px !important; 
    margin-bottom: 10px !important;
  }

  .action-buttons-container {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .add-task-main-btn {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-shrink: 1 !important; 
  }

  
  .week-days-container {
    margin: 0 -2px 10px -2px !important; 
    padding: 2px !important;
  }

  .week-days {
    gap: 1px !important;
  }

  .day-btn {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 4px 1px !important;
  }

  
  .data-buttons {
    margin: 15px -2px !important; 
    padding: 0 2px !important;
    gap: 5px !important;
  }

  .data-btn {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 8px 5px !important;
    font-size: 0.75rem !important;
  }

  
  .main-content {
    gap: 10px !important;
    margin: 0 -2px !important; 
  }

  .tasks-container {
    padding: 2px 5px !important; 
    margin: 0 !important;
  }

  
  .today-stats {
    margin: 10px -2px !important; 
    padding: 0 2px !important;
    gap: 4px !important;
  }

  .stat-card {
    padding: 8px 3px !important;
  }
}

@media (max-width: 768px) {
  
  #categoryModal .modal-content {
    max-width: 95% !important;
    margin: 0 auto !important;
  }

  
  .icon-selection-container {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .icon-option {
    width: 35px !important;
    height: 35px !important;
    font-size: 1rem !important;
  }

  
  #colorPicker {
    gap: 6px !important;
  }

  .color-option {
    width: 28px !important;
    height: 28px !important;
  }

  
  header #subTitle {
    font-size: 0.9rem !important;
    margin: 4px 0 0 0 !important;
  }

  
  @media (max-width: 480px) {
    .icon-selection-container {
      gap: 4px !important;
      padding: 8px !important;
    }

    .icon-option {
      width: 32px !important;
      height: 32px !important;
      font-size: 0.9rem !important;
    }

    header #subTitle {
      font-size: 0.8rem !important;
    }
  }

  
  @media (max-width: 360px) {
    .icon-selection-container {
      gap: 2px !important;
      padding: 6px !important;
    }

    .icon-option {
      width: 30px !important;
      height: 30px !important;
      font-size: 0.85rem !important;
    }

    .color-option {
      width: 26px !important;
      height: 26px !important;
    }
  }
}

@media (max-width: 768px) {
  
  .task-card {
    width: 100% !important;
    transform: none !important;
  }

  .task-card .repeat-info { display: none; }
  
  .focus-task-title .repeat-info { display: inline; }
  
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px !important;
  }

  .plan-time {
    font-size: 0.8rem !important;
    color: #666;
    order: 2; 
    width: 100%;
    margin-top: 2px;
  }

  .task-title {
    order: 1; 
    width: 100%;
  }

  
  .data-display-area {
    padding: 8px 10px !important;
  }

  .description-box {
    margin-top: 4px;
    order: 3; 
  }
}

@media (max-width: 768px) {
  
  .task-card {
    height: auto !important;
    min-height: 0 !important;
  }

  
  .description-box {
    max-height: 60px !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    font-size: 0.9rem !important;
    
    overflow-y: auto !important;
    padding: 6px 8px !important;
  }

  
  .data-display-area {
    padding: 8px 10px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  
  .info-row {
    margin-bottom: 8px !important;
    flex: 0 0 auto; 
  }


  .timer-btn {
    width: 34px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 768px) {
  
  .plan-time {
    font-size: 0.75rem !important;
    color: #666;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    order: 3; 
    width: 100%;
  }

  
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px !important;
  }

  .task-title {
    order: 1;
    width: 100%;
    margin-right: 0 !important;
  }

  .repeat-info {
    order: 2;
    margin-left: 0 !important;
    margin-top: 2px;
  }

  
  .plan-time::before {
    content: "⏰ ";
    font-size: 0.7rem;
  }
}

@media (max-width: 768px) {
  
  .focus-details {
    grid-template-columns: 1fr 1fr !important; 
    gap: 12px !important;
  }

  
  .focus-detail-item {
    min-width: 0 !important; 
    min-height: 60px; 
    padding: 10px !important;
    word-break: break-word; 
  }

  
  .focus-detail-item:nth-child(1),
  .focus-detail-item:nth-child(2) {
    flex: 1;
    min-width: 45%; 
  }

  
  .focus-detail-item:nth-child(3),
  .focus-detail-item:nth-child(4) {
    flex: 1;
    min-width: 45%;
  }

  
  .focus-description-section {
    grid-column: 1 / span 2 !important; 
    margin-top: 10px !important;
  }

  .focus-description-content {
    max-height: 100px !important;
    padding: 10px !important;
    font-size: 0.9rem;
  }

  
  .focus-task-content {
    padding: 60px 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 -2px !important;
    border-radius: 0 !important;
  }

  
  .focus-timer-display {
    font-size: 2.8rem !important;
    margin: 10px 0 !important;
  }

  
  .focus-controls {
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .focus-btn {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    min-width: 80px;
  }

  
  .focus-detail-item h4 {
    font-size: 0.9rem;
    margin-bottom: 6px;
  }

  .focus-detail-item p {
    font-size: 0.85rem;
    line-height: 1.3;
  }
}

@media (max-width: 768px) {
  header h1 {
    font-size: 2.2rem !important;
  }

  .app-slogan {
    font-size: 1.1rem !important; 
    margin: 0 0 0 10px !important;
  }

  header #subTitle {
    font-size: 0.8rem !important;
    margin: 2px 0 0 0 !important;
  }

  .title-container {
    flex-direction: row;
  }
}

@media (max-width: 768px) {
    .score-card {
        height: auto;
        flex-direction: column;
    }

    .score-category-bar {
        width: 100%;
        height: 40px;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
    }

    .score-card-content {
        flex-direction: column;
    }

    .score-data-display-area {
        width: 100%;
        padding: 12px;
    }

    .score-action-section {
        width: 100%;
        padding: 12px;
        border-left: none;
        border-top: 1px solid #f0f4f8;
    }

    .score-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .score-main-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .edit-page .stats-header {
        padding: 12px;
    }

    .edit-page .stats-header h2 {
        font-size: 1.1rem;
    }

    .edit-page .page-body {
        padding: 12px;
    }

    .edit-page .page-footer {
        padding: 10px 12px;
    }

    .edit-page .form-group label {
        font-size: 0.9rem;
    }

    .edit-page .form-control {
        font-size: 0.95rem;
        min-height: 44px;
    }

    .edit-page {
        padding: 0;
        background: var(--light-bg);
    }

    .edit-page .stats-header,
    .edit-page .page-body,
    .edit-page .page-footer {
        max-width: none;
        border-radius: 0;
    }

    .edit-page .stats-header {
        margin-top: 0;
    }

    .page-footer .btn {
        flex: 1;
    }

    .unsaved-confirm-actions .btn {
        max-width: none;
    }
}

@media (max-width: 768px) {
  
  .score-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  
  .score-filters > div {
    display: flex !important;
    flex: 1 1 48% !important;          
    flex-direction: column !important;
    gap: 6px !important;
  }

  
  .score-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    row-gap: 12px;
    column-gap: 4%;
  }
  
  #resetScoreFilters {
    grid-column: 1 / -1;               
    justify-self: end;
    width: 80px;
    font-size: 0.9rem;
    padding: 6px 0;
    margin: 0 !important;
  }

  
  .score-filters label   { font-size: 0.8rem; }
  .score-filters select,
  .score-filters input[type="date"] {
    width: 100% !important;
    font-size: 0.9rem;
    padding: 6px 8px;
  }
}

@media (max-width: 768px) {
  
  .score-analysis-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  
  .score-analysis-filters > div {
    display: flex !important;
    flex: 1 1 48% !important;   
    flex-direction: column !important;
    gap: 6px !important;
  }

  
  .score-analysis-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    row-gap: 12px;
    column-gap: 4%;
  }

  
  .score-analysis-filters::after {
    content: "";
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  #applyAnalysisDateFilter,
  #resetAnalysisDateFilter {
    width: 80px;
    font-size: 0.9rem;
    padding: 6px 0;
    margin: 0 !important;
  }

  
  .score-analysis-filters label {
    font-size: 0.8rem;
  }
  .score-analysis-filters input[type="date"] {
    width: 100% !important;
    font-size: 0.9rem;
    padding: 6px 8px;
  }
}

@media (max-width: 768px) {
    .rewards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
        padding: 14px 6px;
    }

    .rwd-body {
        padding: 14px 10px 12px;
    }

    .rwd-icon-wrap {
        width: 52px; height: 52px;
    }

    .rwd-icon-wrap i {
        font-size: 24px;
    }

    .rwd-name {
        font-size: 0.9rem;
    }

    .rwd-cost span {
        font-size: 1.1rem;
    }

    .rwd-btn {
        font-size: 0.85rem;
        padding: 8px 0;
    }

    .reward-item h4 {
        font-size: 1.1rem; 
    }

    .reward-item p {
        font-size: 0.85rem; 
    }

    .reward-item .cost {
        font-size: 0.95rem; 
    }

    .reward-item .btn {
        padding: 6px 10px; 
        font-size: 0.95rem; 
    }
}

@media (max-width: 768px) {
    .points-exchange-content .tab-btn {
        padding: 10px 18px; 
        font-size: 0.95rem; 
        border-radius: 6px 6px 0 0; 
    }
}

@media (max-width: 768px) {
    
    .back-btn,
    .add-task-main-btn,
    .btn.btn-danger,
    .data-btn {
        
        padding: 8px 12px;
        height: auto;
        min-height: 36px;

        
        font-size: 0.85rem;

        
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        
        border: none;
        border-radius: 8px;

        
        transition: all 0.3s ease;

        
        width: auto;
        min-width: fit-content;
        max-width: none;

        
        white-space: nowrap;

        
        margin: 0 2px;
    }

    
    .badge-controls,
    .score-controls,
    .rewards-header,
    .data-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;

        
        overflow-x: hidden;

        
        padding: 0 5px;
        width: 100%;
    }

    
    .badge-controls {
        margin-bottom: 15px;
    }

    .score-controls {
        margin-bottom: 15px;
    }

    .rewards-header {
        margin-bottom: 15px;
    }

    .data-buttons {
        justify-content: center;
        margin: 15px 0;
    }

    
    .badge-controls > button,
    .score-controls > button,
    .rewards-header > button,
    .data-buttons > button {
        flex: 1 1 auto;
        min-width: 80px;
        max-width: calc(33.333% - 5px);
    }

    
    .stats-header .back-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
        min-width: auto;
        max-width: auto;
        flex: none;
    }

    
    #addBatchBadgeBtn,
    #addBatchTaskBtn,
    #addScoreBtn,
    #scoreAnalysisBtn {
        background-color: inherit;
        background: var(--primary);
    }

    
    #addBatchBadgeBtn,
    #addBatchTaskBtn,
    #scoreAnalysisBtn {
        background: #5bc0de !important;
    }

    
    .btn.btn-danger {
        background: #e74c3c !important;
    }
}

@media (max-width: 768px) {
    .points-records-table th,
    .points-records-table td {
        font-size: 0.8rem; 
        padding: 6px 8px; 
    }

    
    .points-records-table th:nth-child(1),
    .points-records-table td:nth-child(1) {
        width: 15%; 
    }
    .points-records-table th:nth-child(2),
    .points-records-table td:nth-child(2) {
        width: 20%; 
    }
    .points-records-table th:nth-child(3),
    .points-records-table td:nth-child(3) {
        width: 20%; 
    }
    .points-records-table th:nth-child(4),
    .points-records-table td:nth-child(4) {
        width: 15%; 
    }
    .points-records-table th:nth-child(5),
    .points-records-table td:nth-child(5) {
        width: 15%; 
    }
    .points-records-table th:nth-child(6),
    .points-records-table td:nth-child(6) {
        width: 15%; 
    }
}

@media (max-width: 768px) {
    
    
    .tt-preview-header,
    .tt-preview-row {
        grid-template-columns: 30px 80px 50px 80px 1fr 30px;
        font-size: 11px;
    }
    .tt-cd-events-header,
    .tt-cd-events-row {
        grid-template-columns: 30px 80px 50px 70px 50px;
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .focus-timer-boxes {
        gap: 6px;
        margin: 12px 0 6px;
    }

    .focus-timer-boxes .timer-unit {
        width: 78px;
        height: 86px;
        border-radius: 14px;
    }

    .focus-timer-boxes .timer-value,
    .focus-timer-boxes .timer-value-input {
        font-size: 2.4rem;
        letter-spacing: 1px;
    }

    .focus-timer-boxes .timer-label {
        font-size: 0.7rem;
        margin-top: 6px;
    }

    .focus-timer-boxes .timer-colon {
        font-size: 1.5rem;
        margin-top: 20px;
    }

    .focus-timer-boxes .timer-arrow {
        font-size: 0.6rem;
        padding: 6px 12px;
    }

    .focus-timer-boxes .timer-arrow.up {
        top: 0;
    }

    .focus-timer-boxes .timer-arrow.down {
        bottom: 14px;
    }

    .focus-timer-boxes .timer-unit.editable .timer-value,
    .focus-timer-boxes .timer-unit.editable .timer-value-input {
        margin-top: 10px;
    }

    .focus-timer-hint {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .task-card.periodic-goal {
        min-height: 0 !important; 
        height: auto !important;
    }
    .task-card.periodic-goal .data-display-area {
        justify-content: flex-start !important;
    }
    .task-card.periodic-goal .description-box {
        order: 2 !important;
    }
    .task-card.periodic-goal .card-attachment-indicator {
        order: 3 !important;
    }
    .task-card.periodic-goal .periodic-progress-area {
        order: 4 !important;
    }
}


   @media (max-width: 480px) {
  .today-stats {
    gap: 4px;
  }

  .stat-card {
    min-width: 0; 
    padding: 8px 3px;
  }

  .stat-card h3 {
    font-size: 1.4rem;
  }

  .stat-card p {
    font-size: 0.75rem;
  }

  .stat-card::after {
    height: 3px;
  }

  
  .header-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .header-left {
    padding: 5px 15px 5px 5px;
    width: auto;
  }

  .header-right {
    padding: 5px 5px 5px 15px;
    width: auto;
    justify-content: flex-end;
  }

  
  header h2 {
    font-size: 2.2rem;
    margin-bottom: 0;
    display: inline-block;
  }

  header h3 {
    font-size: 1.1rem;
    margin-bottom: 0;
    display: inline-block;
  }

  
  .account-trigger {
    background: transparent;
    padding: 2px 4px;
    border: none;
    align-items: center;
    min-height: auto;
  }
}

@media (max-width: 480px) {
    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .task-card {
        height: auto !important; 
    }

    .action-section {
        min-width: 85px !important;
    }

    .timer-display {
        font-size: 1.1rem !important;
        padding: 6px 8px !important;
    }

    .timer-btn {
        width: 32px !important;
        height: 26px !important;
    }

    .today-stats {
        gap: 4px !important;
    }

    .stat-card h3 {
        font-size: 1.1rem !important;
    }

    .stat-card p {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 480px) {
  .timer-btn {
    width: 28px;
    height: 28px;
  }

  .timer-display {
    font-size: 1.1rem;
    padding: 6px 8px;
  }

  .stat-card h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  body {
    padding: 8px 3px !important;
  }

  .data-display-area {
    width: 60% !important;
  }

  .action-section {
    width: 40% !important;
    min-width: 90px !important;
  }

  .add-task-main-btn {
    padding: 5px 5px !important;
    font-size: 0.75rem !important;
  }

  .data-btn {
    padding: 6px 4px !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 480px) {
  .task-card {
    height: auto !important; 
    min-height: 0 !important;
  }

  .description-box {
    max-height: 75px !important;
    min-height: 0 !important; 
    
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 480px) {
  
  .plan-time {
    font-size: 0.7rem !important;
  }

  
  .repeat-info {
    display: none;
  }

}

@media (max-width: 480px) {
  
  .focus-task-content {
    padding: 60px 5px 20px !important;
  }

  .focus-task-title {
    font-size: 1.4rem !important;
    margin-bottom: 15px !important;
  }

  .focus-timer-display {
    font-size: 2.2rem !important;
  }

  .focus-controls {
    gap: 5px !important;
  }

  .focus-btn {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    min-width: 70px;
  }

  
  .focus-details {
    gap: 8px !important;
  }

  .focus-detail-item {
    padding: 8px !important;
    min-height: 55px;
  }

  .focus-detail-item h4 {
    font-size: 0.85rem;
  }

  .focus-detail-item p {
    font-size: 0.8rem;
  }

  
  .focus-task-title .repeat-info {
    display: none;
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.8rem !important;
  }

  .app-slogan {
    font-size: 0.9rem !important; 
    margin: 0 0 0 8px !important;
  }

  header #subTitle {
    font-size: 0.75rem !important;
    margin: 2px 0 0 0 !important;
  }

  .title-container {
    flex-direction: row;
    align-items: center !important;
    font-size: clamp(1rem, 3.5vw, 2rem);
  }
}

@media (max-width: 480px) {
    .rewards-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
        gap: 12px; 
        padding: 10px; 
    }

    .icon i {
        font-size: 2rem; 
    }

    .reward-item h4 {
        font-size: 1rem; 
    }

    .reward-item .cost {
        font-size: 0.9rem; 
    }
}

@media (max-width: 480px) {
    .task-card.periodic-goal {
        min-height: 0 !important; 
    }
}


@media (max-width: 600px) {
    .lib-stats-grid { grid-template-columns:1fr; }
    .hl-stats-grid { grid-template-columns:1fr; }
}


@media (max-width: 600px) {
    .hl-who-panel { padding:12px; }
    .hl-who-ref-age { margin-left:0; width:100%; }
    .hl-who-action-btn { min-width:0; flex:1 1 100%; }
    .hl-who-scale-ticks span { font-size:.55rem; }
}


@media (max-width: 480px) {
    .lib-stats { grid-template-columns:repeat(2,1fr); gap:6px; }
    .lib-stat { padding:8px 4px; }
    .lib-stat-val { font-size:.95rem; }
}


@media (max-width: 350px) {
    .stat-card h3 {
        font-size: 1.2rem;
    }
    .stat-card p {
        font-size: 0.7rem;
    }
}


@media (max-width: 360px) {
  body {
    padding: 5px 2px !important;
  }

  .data-display-area {
    width: 55% !important;
  }

  .action-section {
    width: 45% !important;
    min-width: 85px !important;
  }

  
  .add-task-main-btn span {
    display: none; 
  }

  .add-task-main-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

@media (max-width: 360px) {
  .task-card {
    height: auto !important; 
    min-height: 0 !important;
  }

  .description-box {
    max-height: 80px !important;
    min-height: 0 !important; 
  }
}

@media (max-width: 360px) {
  .focus-details {
    grid-template-columns: 1fr !important; 
  }

  .focus-detail-item:nth-child(1),
  .focus-detail-item:nth-child(2),
  .focus-detail-item:nth-child(3),
  .focus-detail-item:nth-child(4) {
    grid-column: 1 !important;
    min-width: 100% !important;
  }

  .focus-description-section {
    grid-column: 1 !important;
  }
}

@media (max-width: 360px) {
  header h1 {
    font-size: 1.6rem !important;
  }

  .app-slogan {
    font-size: 0.8rem !important; 
  }

  header #subTitle {
    font-size: 0.7rem !important;
    margin: 1px 0 0 0 !important;
  }
}

@media (max-width: 360px) {
    .task-card.periodic-goal {
        min-height: 0 !important; 
    }
}


@media (max-width: 600px) {
  header h1 {
    font-size: 2rem !important;
  }

  .app-slogan {
    font-size: 1rem !important; 
    margin: 0 0 0 8px !important;
  }
}

@media (max-width: 600px) {
    .tm-body { padding: 8px; gap: 12px; }
    .tm-tabs-bar { padding: 8px 10px; border-radius: 10px; }
    .tm-tabs-scroll { gap: 6px; }
    .tm-tab {
        padding: 5px 10px;
        font-size: 0.78rem;
        border-radius: 14px;
        border-width: 1.5px;
    }
    .tm-tab i { font-size: 0.72rem; }
    .tm-tab-add { padding: 5px 9px; }
    .tm-tpl-action-bar { margin-bottom: 10px; gap: 8px; }
    .tm-tpl-action-bar h3 { font-size: 0.95rem; }
    .tm-tpl-list { gap: 8px; }
    .tm-tpl-card { padding: 12px 14px; }
    .tm-tpl-name { font-size: 1rem; }
    .tm-tpl-desc { font-size: 0.82rem; }
}

@media (max-width: 600px) {
    .attachment-item {
        min-width: 100%;
        max-width: 100%;
    }
    .attachment-name {
        max-width: 140px;
    }
    .attachment-view-name {
        max-width: 200px;
    }
    
    .focus-attachment-grid {
        grid-template-columns: repeat(auto-fill, 60px);
        gap: 6px;
    }
    
    .focus-attachment-grid-item {
        height: 60px;
        padding: 6px;
    }
    
    .focus-attachment-grid-icon {
        font-size: 1.2rem;
    }
    
    .focus-attachment-grid-name {
        font-size: 0.65rem;
        max-width: 50px;
    }
}

@media (max-width: 600px) {
    .share-date-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .share-tabs button {
        font-size: 0.85rem;
        padding: 10px 6px;
    }
}


@media (max-width: 900px) {
    .batch-task-split {
        flex-direction: column;
    }
    .batch-task-left,
    .batch-task-right {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
        position: static;
    }
    .batch-preview-list {
        max-height: none;
    }
    .batch-card-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .timebank-left-column {
        width: 160px;
    }

    .timebank-right-column {
        min-width: 360px;
    }

    .timebank-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .timebank-stat-label {
        font-size: 0.75rem;
    }

    .timebank-stat-value {
        font-size: 1rem;
    }
}


@media (max-width: 640px) {
    .timebank-main-content {
        flex-direction: column;
        align-items: stretch;
    }

    .timebank-left-column {
        width: 100%;
        margin-bottom: 16px;
    }

    .timebank-jar-container svg {
        max-height: 180px;
    }

    .timebank-right-column {
        min-width: 0;
        width: 100%;
    }

    .timebank-cards-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .timebank-stat-card {
        padding: 12px 8px;
        min-height: 90px;
    }

    .timebank-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .timebank-stat-label {
        font-size: 0.7rem;
    }

    .timebank-stat-value {
        font-size: 0.95rem;
    }

    .timebank-exchange-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .exchange-item {
        padding: 12px 8px;
        min-height: 90px;
    }

    .exchange-item-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .exchange-item-name {
        font-size: 0.85rem;
    }

    .exchange-item-time {
        font-size: 0.75rem;
    }

    .add-activity-btn {
        padding: 12px 8px;
        min-height: 90px;
    }

    .add-activity-btn i {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .add-activity-btn span {
        font-size: 0.85rem;
    }
}


@media (min-width: 1024px) {
    .fab-menu { bottom: 40px; right: 40px; width: 72px; height: 72px; }
    .fab-main { width: 72px; height: 72px; font-size: 2.8rem; }
    .fab-sub-btn { width: 74px; height: 74px; font-size: 14px; }
    .fab-menu.open .fab-sub-1 {
        transform: translate(calc(-50% - 110px), calc(-50% - 110px)) scale(1);
    }
    .fab-menu.open .fab-sub-2 {
        transform: translate(calc(-50% - 160px), calc(-50% - 35px)) scale(1);
    }
    .fab-menu.open .fab-sub-3 {
        transform: translate(calc(-50% - 110px), calc(-50% + 35px)) scale(1);
    }
}


.flex-1          { flex: 1; }
.flex-wrap       { flex-wrap: wrap; }
.cursor-pointer  { cursor: pointer; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.text-sm         { font-size: 0.9rem; }
.text-xs         { font-size: 0.82rem; }
.m-0             { margin: 0; }
.mb-lg           { margin-bottom: 20px; }
.w-full          { width: 100%; }


.pet-page {
    
}
.pet-header-actions {
    display: flex;
    gap: 10px;
}


.pet-slot-section {
    background: linear-gradient(135deg, #fff8e7 0%, #fff 100%);
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pet-slot-title {
    margin: 0 0 4px;
    font-size: 16px;
    color: #8b6f4e;
}
.pet-slot-hint {
    margin: 0 0 12px;
    font-size: 12px;
    color: #a89677;
}
.pet-slot-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pet-slot {
    width: 90px;
    height: 100px;
    border-radius: 12px;
    background: #f8f8f8;
    border: 2px dashed #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.pet-slot:hover {
    transform: translateY(-2px);
    border-color: #ff6b9d;
}
.pet-slot-selected {
    background: #e3f2fd !important;
    border: 2px solid #4fc3f7 !important;
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3);
}
.pet-slot-sick {
    border-color: #ff9800 !important;
    background: #fff3e0 !important;
}
.pet-slot-deceased {
    opacity: 0.75;
    border-color: #999 !important;
    background: #f0f0f0 !important;
    filter: grayscale(0.85);
}
.pet-slot-deceased:hover {
    transform: none;
    border-color: #999 !important;
    box-shadow: none;
}
.pet-slot-deceased .pet-slot-name {
    color: #999;
}
.pet-slot-deceased .pet-slot-avatar {
    background: #e6e6e6;
}
.pet-slot-empty {
    cursor: default;
    color: #ccc;
}
.pet-slot-add {
    background: #fff8e7 !important;
    border: 2px dashed #ff6b9d !important;
    color: #ff6b9d;
}
.pet-slot-add i {
    font-size: 28px;
}

.pet-empty-add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #fff8e7 0%, #fff0f5 100%);
    border: 2px dashed #ff6b9d;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.3s;
}
.pet-empty-add-card:hover {
    background: linear-gradient(135deg, #fff0f5 0%, #ffe0ec 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 107, 157, 0.2);
}
.pet-empty-add-icon {
    font-size: 48px;
    color: #ff6b9d;
    opacity: 0.6;
}
.pet-empty-add-text {
    font-size: 15px;
    color: #999;
    text-align: center;
}
.pet-empty-add-btn {
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-empty-add-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}
.pet-slot-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 4px;
    background: #fff;
}
.pet-slot-name {
    font-size: 12px;
    color: #555;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pet-slot-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff9800;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
}
.pet-slot-badge-dead {
    background: #888;
}


.pet-main-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.pet-main-stage {
    flex: 1;
    min-width: 320px;
    background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 50%, #66bb6a 100%);
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    position: relative;
    min-height: 380px;
}
.pet-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.pet-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pet-nickname {
    font-size: 22px;
    font-weight: bold;
}
.pet-edit-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
}
.pet-edit-btn:hover {
    background: rgba(255,255,255,0.4);
}

.pet-stage-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pet-bg-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(255,255,255,0.2);
    padding: 6px 10px;
    border-radius: 20px;
    
}
.pet-bg-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.pet-bg-dot:hover {
    transform: scale(1.2);
}
.pet-bg-dot-active {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.25);
}
.pet-stage-music {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    background: rgba(255,255,255,0.15);
    padding: 4px 10px;
    border-radius: 12px;
}
.pet-stage-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    margin: 8px 0;
}
.pet-stage-image {
    width: 300px;
    height: 300px;
    max-width: 100%;
    
    border-radius: 26px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.pet-stage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px;
}

@keyframes petAnimFeed {
    0%   { transform: translateY(0) scale(1, 1); }
    20%  { transform: translateY(-3px) scale(.996, 1.005); }
    40%  { transform: translateY(0) scale(1.005, .996); }
    60%  { transform: translateY(-3px) scale(1, 1); }
    80%  { transform: translateY(0) scale(1.003, .997); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes petAnimWash {
    0%   { transform: rotate(0deg) translateY(0); }
    16%  { transform: rotate(-1.2deg) translateY(-3px); }
    36%  { transform: rotate(1.2deg) translateY(0); }
    56%  { transform: rotate(-0.9deg) translateY(-3px); }
    76%  { transform: rotate(0.6deg) translateY(0); }
    100% { transform: rotate(0deg) translateY(0); }
}
@keyframes petAnimPlay {
    0%   { transform: translateY(0) scale(1, 1); }
    18%  { transform: translateY(-8px) scale(.994, 1.008); }
    34%  { transform: translateY(0) scale(1.006, .995); }
    52%  { transform: translateY(-5px) scale(.997, 1.005); }
    70%  { transform: translateY(0) scale(1.003, .998); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes petAnimSleep {
    0%   { transform: translateY(0) scale(1, 1); }
    35%  { transform: translateY(4px) scale(1.006, .992); }
    65%  { transform: translateY(3px) scale(.997, 1.004); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes petAnimRevive {
    0%   { transform: translateY(0) scale(1, 1); }
    25%  { transform: translateY(-7px) scale(.994, 1.008); }
    50%  { transform: translateY(0) scale(1.006, .995); }
    75%  { transform: translateY(-3px) scale(1, .999); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes petAnimTap {
    0%   { transform: translateY(0) scale(1, 1); }
    30%  { transform: translateY(-6px) scale(.994, 1.008); }
    62%  { transform: translateY(0) scale(1.005, .996); }
    100% { transform: translateY(0) scale(1, 1); }
}
.pet-anim-on {
    
    transform-origin: center bottom;
}
.pet-anim-on.pet-anim-feed   { animation: petAnimFeed .72s ease-in-out 1; }
.pet-anim-on.pet-anim-wash   { animation: petAnimWash .8s ease-in-out 1; }
.pet-anim-on.pet-anim-play   { animation: petAnimPlay .8s ease-in-out 1; }
.pet-anim-on.pet-anim-sleep  { animation: petAnimSleep 1.4s ease-in-out 1; }
.pet-anim-on.pet-anim-revive { animation: petAnimRevive .9s ease-in-out 1; }
.pet-anim-on.pet-anim-tap    { animation: petAnimTap .6s ease-in-out 1; }

.pet-stage-image { cursor: pointer; }

.pet-interact-sparkles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.pet-interact-sparkle {
    position: absolute;
    font-size: 20px;
    line-height: 1;
    opacity: 0;                 
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    animation: petAnimSparkle .9s ease-out 1 both;
}

.pet-interact-sparkle.s1 { left: 11%; top: 20%; animation-delay: 0s; }
.pet-interact-sparkle.s2 { right: 13%; top: 24%; animation-delay: .1s; }
.pet-interact-sparkle.s3 { left: 15%; bottom: 22%; animation-delay: .2s; }
.pet-interact-sparkle.s4 { right: 17%; bottom: 18%; animation-delay: .3s; }
@keyframes petAnimSparkle {
    0%   { opacity: 0;   transform: translateY(6px) scale(.6) rotate(-6deg); }
    22%  { opacity: 1;   transform: translateY(0) scale(1) rotate(0deg); }
    60%  { opacity: .9;  transform: translateY(-8px) scale(1.08) rotate(4deg); }
    100% { opacity: 0;   transform: translateY(-16px) scale(.9) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pet-anim-on { animation: none !important; }
    .pet-interact-sparkle { animation: none !important; display: none; }
}


.pet-chat-bubble {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 240px;
    background: #fff;
    color: #333;
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 5;
    opacity: 0;
    
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pet-chat-bubble::after {
    content: '';
    position: absolute;
    left: var(--pet-tail-x, 50%);
    bottom: -8px;
    margin-left: -7px;
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #fff;
}

.pet-chat-bubble.pet-bubble-tail-l {
    border-radius: 6px 16px 16px 16px;
}
.pet-chat-bubble.pet-bubble-tail-l::after {
    left: -8px;
    top: var(--pet-tail-y, 55%);
    bottom: auto;
    margin-left: 0;
    margin-top: -7px;
    border-left: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid #fff;
}

.pet-chat-bubble.pet-bubble-tail-r {
    border-radius: 16px 6px 16px 16px;
}
.pet-chat-bubble.pet-bubble-tail-r::after {
    left: auto;
    right: -8px;
    top: var(--pet-tail-y, 55%);
    bottom: auto;
    margin-left: 0;
    margin-top: -7px;
    border-right: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid #fff;
}
.pet-bubble-in { opacity: 1; transform: translateY(0); }
.pet-bubble-out { opacity: 0; transform: translateY(-4px); }
.pet-img-sick {
    filter: grayscale(0.5) brightness(0.85);
}
.pet-sick-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,152,0,0.9);
    color: #fff;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    z-index: 2;
}
.pet-stage-mood {
    text-align: center;
    font-size: 14px;
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 16px;
    margin-top: 12px;
}

.pet-stage-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
    padding: 6px;
}
.pet-stage-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 6px 10px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.pet-stage-action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}
.pet-stage-action:hover {
    transform: translateY(-4px) scale(1.04);
    background: rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.55);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.pet-stage-action:active { transform: translateY(-1px) scale(1.0); }
.pet-stage-action-disabled,
.pet-stage-action:disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    filter: grayscale(0.6);
}
.pet-stage-action-disabled:hover,
.pet-stage-action:disabled:hover {
    transform: none;
    box-shadow: none;
}
.pet-stage-action .pet-act-ico { font-size: 26px; position: relative; z-index: 1; }
.pet-stage-action .pet-act-label { font-size: 13px; font-weight: 600; position: relative; z-index: 1; }
.pet-stage-action .pet-act-cost {
    font-size: 10px;
    color: #fff;
    background: rgba(0,0,0,0.35);
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 2px;
    position: relative;
    z-index: 1;
    font-weight: 600;
}
.pet-stage-action .pet-act-cost { font-size: 11px; color: #888; }
.pet-stage-action[data-action="feed"] .pet-act-ico { color: #e65100; }
.pet-stage-action[data-action="wash"] .pet-act-ico { color: #01579b; }
.pet-stage-action[data-action="play"] .pet-act-ico { color: #1b5e20; }
.pet-stage-action[data-action="sleep"] .pet-act-ico { color: #4a148c; }
.pet-empty-stage {
    text-align: center;
    color: #fff;
    padding: 60px 20px;
}
.pet-empty-stage i {
    font-size: 60px;
    opacity: 0.5;
    margin-bottom: 12px;
}


.pet-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.pet-switch input {
    display: none;
}
.pet-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 20px;
    transition: 0.3s;
}
.pet-switch-slider:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.pet-switch input:checked + .pet-switch-slider {
    background: rgba(255,255,255,0.6);
}
.pet-switch input:checked + .pet-switch-slider:before {
    transform: translateX(16px);
}


.pet-side-panel {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pet-profile {
    border: 1px solid var(--pet-border, #f48fb1);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.pet-profile::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, var(--pet-accent, #ff6b9d) 0%, transparent 70%);
    opacity: 0.12;
    border-radius: 50%;
    pointer-events: none;
}
.pet-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.pet-profile-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pet-light, #fce4ec), var(--pet-chip, #f8bbd0));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--pet-glow, rgba(236,64,122,0.25));
    flex-shrink: 0;
    border: 3px solid #fff;
}
.pet-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pet-profile-head-info { flex: 1; min-width: 0; }
.pet-profile-name-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.pet-profile-name {
    font-size: 18px; font-weight: 700; color: #333;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pet-profile-gender {
    font-size: 18px; font-weight: 700;
}
.pet-profile-type {
    font-size: 12px;
    background: var(--pet-light, #fce4ec);
    color: var(--pet-accent, #ec407a);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    font-weight: 500;
}
.pet-profile-edit-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid var(--pet-accent, #ff6b9d);
    background: #fff;
    color: var(--pet-accent, #ff6b9d);
    cursor: pointer; font-size: 14px; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pet-profile-edit-btn:hover {
    background: var(--pet-accent, #ff6b9d);
    color: #fff;
    transform: rotate(15deg);
}
.pet-profile-desc {
    background: linear-gradient(135deg, var(--pet-light, #fce4ec), rgba(255,255,255,0));
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    font-style: italic;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}
.pet-profile-desc i {
    color: var(--pet-accent, #ff6b9d); opacity: 0.35; margin-right: 4px;
}
.pet-profile-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.pet-profile-chip {
    display: inline-block;
    background: var(--pet-chip, #f8bbd0);
    color: var(--pet-chip-color, #ad1457);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
}
.pet-profile-empty {
    font-size: 12px; color: #ccc; font-style: italic;
}
.pet-profile-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.pet-profile-info-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #666;
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.pet-profile-info-item i { color: var(--pet-accent, #ff6b9d); font-size: 11px; }
.pet-profile-row {
    display: none; 
}
.pet-profile-tags { display: none; }
.pet-tag { display: none; }
.pet-profile-footer {
    
    display: flex;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.pet-profile-footer > button {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-profile-footer > button i { font-size: 12px; }
.pet-btn-release {
    background: #fff;
    border: 1.5px solid #e0e0e0;
    color: #999;
}
.pet-btn-release:hover {
    border-color: #ef5350;
    color: #ef5350;
    background: #fff5f5;
}

.pet-btn-guide {
    background: #fff;
    border: 1.5px solid #d6e9f8;
    color: #4fc3f7;
}
.pet-btn-guide:hover {
    border-color: #4fc3f7;
    background: #e3f4fd;
    color: #2196f3;
}

.pet-btn-growth {
    background: #fff;
    border: 1.5px solid #dcd0f0;
    color: #7e57c2;
}
.pet-btn-growth:hover {
    border-color: #7e57c2;
    background: #f3eefb;
    color: #5e35b1;
}
.pet-form-hint { margin: 4px 0 0; font-size: 11px; color: #999; }
.pet-sick-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff3e0;
    padding: 12px 16px;
    border-radius: 12px;
    gap: 12px;
    flex-wrap: wrap;
}
.pet-sick-tip { 
    color: #e65100; 
    font-weight: 600; 
    font-size: 14px; 
    padding-top: 10px;
    border-top: 1px dashed #eee;
}
.pet-attrs {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.pet-attr-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
}
.pet-attr-icon {
    width: 18px;
    text-align: center;
}
.pet-attr-label {
    width: 36px;
    font-size: 13px;
    color: #666;
}
.pet-attr-bar {
    flex: 1;
    height: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}
.pet-attr-fill {
    height: 100%;
    transition: width 0.4s;
    border-radius: 5px;
}
.pet-attr-val {
    width: 30px;
    text-align: right;
    font-size: 12px;
    color: #888;
}


.pet-level-section {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.pet-level-bar {
    display: block;
    margin-bottom: 8px;
}
.pet-level-section {
    background: linear-gradient(160deg, #fff, var(--pet-light, #fce4ec));
    border: 1px solid var(--pet-border, #f48fb1);
    border-radius: 16px;
    padding: 14px 16px;
    margin-top: 8px;
    box-shadow: 0 4px 14px var(--pet-glow, rgba(236,64,122,0.10));
}
.pet-lv-track {
    display: flex;
    height: 36px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.pet-lv-seg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    transition: all 0.3s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-right: 1px solid rgba(255,255,255,0.3);
    background: #e8e8e8;
}
.pet-lv-seg:last-child { border-right: none; }
.pet-lv-seg-filled {
    background: linear-gradient(180deg, var(--pet-accent, #ff6b9d), var(--pet-chip, #f8bbd0)) !important;
}
.pet-lv-seg-current {
    background: linear-gradient(180deg, var(--pet-accent, #ff6b9d), var(--pet-chip, #f8bbd0)) !important;
    box-shadow: inset 0 0 16px rgba(255,255,255,0.5), 0 0 12px var(--pet-glow, rgba(236,64,122,0.4));
    z-index: 1;
    transform: scaleY(1.05);
}
@keyframes lvSegPulse {
    0%, 100% { filter: brightness(1.0); }
    50% { filter: brightness(1.2); }
}
.pet-lv-progress {
    height: 8px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.pet-lv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pet-chip, #f8bbd0), var(--pet-accent, #ff6b9d), var(--pet-accent, #ff6b9d));
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px var(--pet-glow, rgba(236,64,122,0.5));
}
.pet-exp-text {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: #666;
}


.pet-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: #f3e5f5;
    padding: 16px;
    border-radius: 16px;
}
.pet-action-btn {
    flex: 1;
    min-width: 120px;
    padding: 14px 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.pet-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pet-action-feed   { background: #ffe0b2; color: #e65100; }
.pet-action-wash   { background: #b3e5fc; color: #01579b; }
.pet-action-play   { background: #c8e6c9; color: #1b5e20; }
.pet-action-sleep  { background: #e1bee7; color: #4a148c; }
.pet-action-revive { background: #ffcdd2; color: #b71c1c; }
.pet-deceased-hint {
    text-align: center;
    color: #888;
    padding: 20px;
    width: 100%;
    font-style: italic;
}


.pet-modal-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pet-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pet-modal-sm {
    max-width: 380px;
}
.pet-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}
.pet-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.pet-modal-close:hover { color: #333; }
.pet-modal-body {
    padding: 20px;
    overflow-y: auto;
}
.pet-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.pet-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-btn-primary { background: #ff6b9d; color: #fff; }
.pet-btn-primary:hover { background: #e91e63; }
.pet-btn-secondary { background: #f0f0f0; color: #666; }
.pet-btn-secondary:hover { background: #e0e0e0; }


.pet-levelup-mask {
    background: rgba(0,0,0,0.6);
    animation: pet-fade-in 0.3s ease;
}
.pet-levelup-mask.pet-levelup-fadeout {
    animation: pet-fade-out 0.3s ease forwards;
}
@keyframes pet-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pet-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
.pet-levelup-card {
    background: linear-gradient(160deg, #fff7e6 0%, #fff0f5 40%, #e8f4fd 100%);
    border-radius: 24px;
    max-width: 360px;
    width: 90%;
    padding: 32px 24px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(255,107,157,0.3), 0 8px 20px rgba(0,0,0,0.15);
    animation: pet-levelup-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pet-levelup-pop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.pet-levelup-confetti {
    position: absolute;
    top: -30px;
    animation: pet-confetti-fall 3s linear forwards;
    pointer-events: none;
    z-index: 0;
}
@keyframes pet-confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(450px) rotate(720deg); opacity: 0; }
}
.pet-levelup-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    padding: 8px 24px;
    border-radius: 30px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(255,107,157,0.4);
    position: relative;
    z-index: 1;
}
.pet-levelup-img-wrap {
    width: 180px;
    height: 180px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}
.pet-levelup-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.pet-levelup-title {
    font-size: 26px;
    color: #333;
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
}
.pet-levelup-name {
    font-size: 18px;
    color: #ff6b9d;
    font-weight: 600;
    margin: 0 0 4px;
    position: relative;
    z-index: 1;
}
.pet-levelup-sub {
    font-size: 14px;
    color: #888;
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
}
.pet-levelup-close {
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(255,107,157,0.3);
}
.pet-levelup-close:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255,107,157,0.5);
}


.pet-guide-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px 20px !important;
}
.pet-guide-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.pet-guide-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.pet-guide-section h3 {
    font-size: 16px;
    color: #333;
    margin: 0 0 12px;
    padding: 0;
}
.pet-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}
.pet-guide-item:last-child {
    margin-bottom: 0;
}
.pet-guide-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 1px;
}
.pet-guide-item strong {
    color: #333;
}
.pet-guide-item em {
    font-style: normal;
    color: #ff6b9d;
    font-weight: 600;
}
.pet-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 8px 0 12px;
}
.pet-guide-table th {
    background: #f8f9fa;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}
.pet-guide-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    line-height: 1.6;
}
.pet-guide-table tr:hover td {
    background: #fafafa;
}
.pet-guide-note {
    font-size: 12px;
    color: #ff9800;
    margin: 8px 0 0;
    padding: 8px 12px;
    background: #fff8e1;
    border-radius: 8px;
    line-height: 1.6;
}


.pr-modal {
    max-width: 680px;
    width: 92%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;          
}
.pr-modal .modal-header { flex: 0 0 auto; }
.pr-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    background: var(--light-bg);   
}


.pr-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px var(--shadow);
}
.pr-stat { text-align: center; min-width: 0; }
.pr-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.pr-num-pending { color: var(--warning); }
.pr-num-handled { color: var(--success); }
.pr-num-points { color: #e6a700; }
.pr-stat-label {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
    white-space: nowrap;
}
.pr-num-types {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
    font-size: 11px;
    font-weight: 600;
}
.pr-mini {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    line-height: 1.7;
    white-space: nowrap;
}
.pr-mini-task { background: rgba(75, 108, 183, 0.12); color: var(--primary); }
.pr-mini-habit { background: rgba(123, 104, 238, 0.14); color: var(--time-bank); }


.pr-batch {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pr-batch-btn {
    flex: 1 1 0;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pr-batch-approve {
    background: var(--success);
    color: #fff;
    border: 1px solid var(--success);
}
.pr-batch-approve:hover { background: #3f9a43; border-color: #3f9a43; }
.pr-batch-reject {
    background: var(--card-bg);
    color: var(--danger);
    border: 1px solid #f0b4b0;      
}
.pr-batch-reject:hover { background: #fdecea; }
.pr-batch-hint {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
}


.pr-list { padding-bottom: 4px; }
.pr-item {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px 12px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px var(--shadow);
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.pr-item::before {                  
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}
.pr-item--habit::before { background: var(--time-bank); }
.pr-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }


.pr-item--done { opacity: 0.88; background: #fafbfc; }
.pr-item--approved::before { background: var(--success); }
.pr-item--rejected::before { background: #c4c9d1; }
.pr-item--rejected .pr-name { color: var(--text-light); font-weight: 500; }

.pr-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}
.pr-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.pr-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.pr-type--task { background: rgba(75, 108, 183, 0.12); color: var(--primary); }
.pr-type--habit { background: rgba(123, 104, 238, 0.14); color: var(--time-bank); }
.pr-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}
.pr-points {
    font-size: 17px;
    font-weight: 700;
    color: #e6a700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pr-points--void {
    color: #b9bfc9;
    text-decoration: line-through;
}
.pr-meta {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 10px;
}
.pr-dot { color: #c8ccd4; }


.pr-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pr-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.pr-score-input {
    width: 62px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text);
}
.pr-score-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(75, 108, 183, 0.15);
}
.pr-score-unit { font-size: 12px; color: var(--text-light); }
.pr-btns {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pr-btn-approve { background: var(--success); color: #fff; }
.pr-btn-approve:hover { background: #3f9a43; }
.pr-btn-reject {
    background: var(--card-bg);
    color: var(--danger);
    border-color: #f0b4b0;
}
.pr-btn-reject:hover { background: #fdecea; }


.pr-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.pr-done--ok { color: var(--success); }
.pr-done--no { color: var(--text-light); }
.pr-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #2e7d32;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
}
.pr-banner i { font-size: 18px; }
.pr-empty {
    text-align: center;
    padding: 36px 16px;
}
.pr-empty-icon {
    display: block;
    font-size: 42px;
    color: var(--success);
    margin-bottom: 12px;
}
.pr-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.pr-empty-text { font-size: 13px; color: var(--text-light); }
.pr-footer {
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
}
.pr-progress { font-size: 12px; color: var(--text-light); }


@media (max-width: 640px) {
    .pr-modal { width: 94%; max-height: 90vh; }
    .pr-summary { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
    .pr-actions { flex-direction: column; align-items: stretch; }
    .pr-btns { margin-left: 0; }
    .pr-btn { flex: 1 1 0; padding: 10px; }
    .pr-score { justify-content: flex-start; }
    .pr-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }
    .pr-footer .btn { width: 100%; }
    .pr-progress { text-align: center; }
}


.action-card {
    cursor: pointer;
    transition: all 0.3s ease;
}
.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


.pet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.pet-tab {
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    background: #fff;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.pet-tab:hover { border-color: #ff6b9d; color: #ff6b9d; }
.pet-tab-active { background: #ff6b9d; color: #fff; border-color: #ff6b9d; }


.pet-codex-grid { overflow-y: auto; max-height: 50vh; }


.pet-codex-card {
    display: inline-block;
    width: calc(33.33% - 12px);
    margin: 6px;
    padding: 12px;
    border: 2px solid #eee;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: top;
}
.pet-codex-card:hover {
    border-color: #ff6b9d;
    transform: translateY(-2px);
}
.pet-codex-owned { border-color: #66bb6a; background: #e8f5e9; cursor: not-allowed; }
.pet-codex-locked { opacity: 0.6; cursor: not-allowed; }

.pet-codex-img {
    width: 80px;
    height: 80px;
    margin: 0 auto 8px;
    border-radius: 12px;
    background: #f8f8f8;
    overflow: hidden;
}
.pet-codex-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pet-codex-name {
    font-weight: bold;
    margin-bottom: 4px;
}
.pet-codex-status {
    font-size: 12px;
    color: #888;
}

.pet-codex-adopt-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-codex-adopt-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(255,107,157,0.4);
}
.pet-codex-adopt-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


.pet-detail-split {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.pet-detail-side {
    min-width: 0;
}
.pet-detail-hero {
    position: relative;
    height: 200px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
    overflow: hidden;
}
.pet-detail-hero::before {
    content: '';
    position: absolute;
    width: 166px;
    height: 166px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 72%);
}
.pet-detail-hero-img {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
.pet-detail-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pet-detail-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: #999;
}
.pet-detail-strip-dots {
    display: flex;
    gap: 4px;
}
.pet-detail-strip-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #eee;
    display: block;
}
.pet-detail-strip-dots i.on {
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
}
.pet-detail-info {
    min-width: 0;
}
.pet-detail-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 8px;
}
.pet-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}
.pet-detail-meta-label {
    min-width: 70px;
    color: #999;
    font-size: 12px;
}
.pet-detail-personality {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.pet-detail-tag {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.pet-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.pet-detail-info-tag {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}
.pet-detail-status {
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.pet-detail-owned { background: #e8f5e9; color: #2e7d32; }
.pet-detail-free { background: #e8f5e9; color: #2e7d32; }
.pet-detail-cost { background: #fff3e0; color: #e65100; }

.pet-detail-status i,
.pet-detail-section-title i,
.pet-modal-header i { margin-right: 5px; }
.pet-detail-section-title i { color: #ff6b9d; }
.pet-detail-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 16px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ff6b9d;
}

.pet-detail-gallery {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.pet-detail-gallery-item {
    min-width: 0;
    text-align: center;
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 4px;
    transition: all 0.2s;
    cursor: pointer;
}
.pet-detail-gallery-item.is-active {
    border-color: #ff6b9d;
    background: #fff5f7;
}
.pet-detail-gallery-item:hover {
    border-color: #ff6b9d;
    background: #fff5f7;
}
.pet-detail-gallery-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 7px;
    background: #f8f8f8;
    overflow: hidden;
}
.pet-detail-gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.pet-detail-gallery-label {
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 4px;
}
.pet-detail-gallery-item.is-active .pet-detail-gallery-label {
    color: #ff6b9d;
    font-weight: 700;
}
.pet-detail-adopt-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-detail-adopt-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(255,107,157,0.4);
}


@media (max-width: 559px) {
    .pet-detail-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pet-detail-strip { display: none; }
    .pet-detail-hero { height: 150px; }
    .pet-detail-hero-img { width: 150px; height: 150px; }
    .pet-detail-desc { margin: 14px 0 10px; }
    .pet-detail-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pet-confirm-img {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f8f8f8;
    overflow: hidden;
}
.pet-confirm-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pet-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 8px;
    box-sizing: border-box;
}
.pet-gender-row {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 14px;
}
.pet-form-row {
    margin-bottom: 12px;
}
.pet-form-row label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #666;
}
.pet-memory-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    max-height: 240px;
    overflow-y: auto;
}
.pet-memory-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    gap: 12px;
    font-size: 13px;
}
.pet-memory-time {
    color: #999;
    min-width: 130px;
}
.pet-memory-text {
    flex: 1;
}
.pet-memory-empty {
    text-align: center;
    color: #999;
    font-style: italic;
}
.pet-memory-ellipsis {
    justify-content: center !important;
    color: #aaa;
    font-style: italic;
    font-size: 12px;
    padding: 10px 0 !important;
    background: linear-gradient(to right, transparent, #f7f7f7 20%, #f7f7f7 80%, transparent);
    border: none !important;
}


.pg-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px 20px;
}


.pg-summary {
    background: linear-gradient(135deg, #fff8e7 0%, #fff 100%);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.pg-sum-head { margin-bottom: 12px; }
.pg-sum-name { font-size: 17px; font-weight: 700; color: #5d4037; }
.pg-sum-sub { font-size: 12px; color: #a1887f; margin-top: 2px; }
.pg-sum-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.pg-sum-card {
    background: #fff;
    border: 1px solid #f0e6d2;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pg-sum-k { font-size: 12px; color: #a1887f; }
.pg-sum-v { font-size: 20px; font-weight: 700; color: #6d4c41; }
.pg-sum-note { font-size: 11px; color: #9e9e9e; line-height: 1.5; overflow-wrap: anywhere; }
.pg-ok { color: #2e7d32; }
.pg-warn { color: #ef6c00; }


.pg-toolbar { display: flex; flex-direction: column; gap: 8px; }
.pg-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-chip {
    border: 1px solid #e0d5c0;
    background: #fff;
    color: #8d6e63;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.18s;
}
.pg-chip-on {
    background: #8d6e63;
    border-color: #8d6e63;
    color: #fff;
}


.pg-timeline { display: flex; flex-direction: column; gap: 16px; }
.pg-day {
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.pg-day-head {
    font-size: 13px;
    font-weight: 700;
    color: #8d6e63;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
    margin-bottom: 10px;
}
.pg-day-list { display: flex; flex-direction: column; }
.pg-item {
    display: grid;
    
    grid-template-columns: 62px 16px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 7px 0;
    position: relative;
}

.pg-item::before {
    content: '';
    position: absolute;
    left: 78px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #eee;
}
.pg-item:first-child::before { top: 10px; }
.pg-item:last-child::before { bottom: auto; height: 10px; }
.pg-item-time { font-size: 12px; color: #9e9e9e; padding-top: 3px; text-align: right; }
.pg-item-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff8a65;          
    margin: 5px auto 0;
    z-index: 1;
    box-shadow: 0 0 0 3px #fff;   
}
.pg-dot-sys {
    background: #fff;             
    border: 2px solid #bdbdbd;
}
.pg-item-body { min-width: 0; }
.pg-item-title {
    font-size: 14px;
    color: #4e342e;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    line-height: 1.5;
}
.pg-item-title i { color: #bcaaa4; width: 16px; }
.pg-item-note { font-size: 12px; color: #a1887f; font-weight: 400; overflow-wrap: anywhere; }
.pg-item-deltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }


.pg-badge {
    font-size: 11.5px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.pg-up   { background: #ffebee; color: #c62828; }   
.pg-down { background: #e8f5e9; color: #2e7d32; }   
.pg-cost { background: #f5f5f5; color: #9e9e9e; }

.pg-empty {
    text-align: center;
    color: #a1887f;
    font-size: 13px;
    line-height: 1.9;
    padding: 40px 16px;
}

@media (max-width: 520px) {
    .pg-sum-grid { grid-template-columns: minmax(0, 1fr); }
    
    .pg-item { grid-template-columns: 58px 14px minmax(0, 1fr); }
    .pg-item::before { left: 73px; }
    .pg-item-time { font-size: 11px; }
    .pg-item:first-child::before { top: 9px; }
    .pg-item:last-child::before { height: 9px; }
}


@media (max-width: 768px) {
    .pet-main-row {
        flex-direction: column;
    }
    .pet-side-panel {
        width: 100%;
    }
    .pet-slot {
        width: 70px;
        height: 80px;
    }
    .pet-slot-avatar {
        width: 44px;
        height: 44px;
    }
    .pet-stage-image {
        width: 240px;
        height: 240px;
    }
    .pet-stage-actions { grid-template-columns: repeat(2, 1fr); }
    .pet-codex-card {
        width: calc(50% - 12px);
    }
}
@media (max-width: 480px) {
    .pet-page { padding: 12px; }
    
    .pet-profile-footer { gap: 4px; }
    .pet-profile-footer > button { padding: 6px 4px; font-size: 11.5px; }
    .pet-profile-footer > button i { font-size: 11px; }
    .pet-slot-bar { gap: 6px; }
    .pet-slot { width: 56px; height: 70px; }
    .pet-slot-avatar { width: 36px; height: 36px; }
    .pet-slot-name { font-size: 10px; }
    .pet-empty-add-card { padding: 24px 16px; }
    .pet-empty-add-icon { font-size: 36px; }
    .pet-empty-add-text { font-size: 13px; }
    .pet-stage-image { width: 200px; height: 200px; }
    .pet-nickname { font-size: 18px; }
    .pet-bg-dot { width: 22px; height: 22px; }
    .pet-stage-action .pet-act-ico { font-size: 18px; }
    .pet-stage-action .pet-act-label { font-size: 12px; }
    
    .pet-codex-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .pet-codex-card {
        display: block;
        width: auto;
        margin: 0;
        padding: 10px;
    }
    
    .pet-codex-img {
        width: 100%;
        max-width: 96px;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-bottom: 6px;
    }
    
    .pet-codex-grid > p {
        grid-column: 1 / -1;
        margin: 0;
    }
}

@media (max-width: 520px) {
    #petSettingsModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        margin: 5px auto !important;
    }
    #petSettingsModal .modal-body {
        padding: 10px !important;
        max-height: 85vh !important;
    }
}

@media (max-width: 420px) {
    #petSettingsModal .modal-content {
        max-width: 99% !important;
        width: 99% !important;
        margin: 2px auto !important;
    }
}


        #wheelPage .wheel-content * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        #wheelPage {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        #wheelPage .wheel-content {
            max-width: 1000px;
            width: 100%;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .wheel-title-container {
            width: 100%;
            margin-bottom: 20px;
            text-align: center;
        }

        .wheel-title-input {
            color: #2c3e50;
            text-align: center;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            background: transparent;
            border: 2px dashed transparent;
            border-radius: 10px;
            padding: 5px 15px;
            outline: none;
            width: 100%;
            max-width: 600px;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .wheel-title-input:focus {
            border-color: #3498db;
            background: rgba(255, 255, 255, 0.3);
        }

        .wheel-title-input::placeholder {
            color: #95a5a6;
        }

        .wheel-mode-selector {
            display: flex;
            gap: 20px;
            margin: 15px 0;
            flex-wrap: wrap;
            justify-content: center;
        }

        .wheel-mode-btn {
            padding: 12px 25px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .wheel-mode-btn.active {
            box-shadow: 0 0 15px rgba(75, 108, 183, 0.3);
        }

        .wheel-container {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 20px auto;
            display: block;
        }

        #wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            transition: transform 0s;
        }

        
        .horse-race-container {
            display: none;
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 200px;
            margin: 20px auto;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            background: #2c3e50;
        }

        .horse-race-track {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            display: flex;
            transition: transform 0.1s linear;
        }

        .horse-race-item {
            width: 150px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            font-size: 1.5rem;
            text-align: center;
            padding: 15px;
            box-sizing: border-box;
            border-right: 2px solid rgba(255, 255, 255, 0.1);
            position: relative;
            transition: all 0.3s ease;
        }

        .horse-race-item.highlight {
            box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.7);
            background: rgba(255, 215, 0, 0.1);
            z-index: 2;
            transform: scale(1.05);
        }

        .horse-race-item::after {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            pointer-events: none;
        }

        .horse-race-pointer {
            position: absolute;
            top: 0%;
            left: 50%;
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 50px solid #e74c3c;
            transform: translate(-50%, -50%);
            z-index: 10;
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
        }

        
        #wheelPage .pointer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #wheelPage .pointer-arrow {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 30px solid #e74c3c;
            position: relative;
            z-index: 2;
        }

        #wheelPage .pointer-stem {
            width: 6px;
            height: 180px;
            background: #e74c3c;
            position: relative;
            top: -1px;
        }

        
        .new-pointer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 180px;
            background: #e74c3c;
            transform-origin: center center;
            transform: translate(-50%, -50%) rotate(0deg);
            z-index: 10;
            border-radius: 4px 4px 0 0;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            transition: none;
        }

        
        .new-pointer::after {
            content: '';
            position: absolute;
            top: -15px;
            left: -10px;
            width: 0;
            height: 0;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-bottom: 20px solid #e74c3c;
            z-index: 11;
        }

        #wheelPage .spin-btn {
            padding: 15px 40px;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            margin: 20px 0;
            width: 80%;
            max-width: 300px;
        }

        #wheelPage button {
            padding: 12px 25px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        #wheelPage .template-btn {
            background: var(--primary);
            color: white;
        }

        #wheelPage button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        #wheelPage button:active {
            transform: translateY(1px);
        }

        
        .wheel-tabs-container {
            width: 100%;
            max-width: 800px;
            margin-top: 20px;
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .wheel-tabs-header {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .wheel-tab-btn {
            padding: 10px 20px;
            font-size: 1rem;
            background: #f0f0f0;
            border: none;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
            color: #7f8c8d;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .wheel-tab-btn.active {
            background: var(--primary);
            color: white;
        }

        .wheel-tab-content {
            display: none;
        }

        .wheel-tab-content.active {
            display: block;
        }

        
        #wheelPage #options-list {
            display: flex;
            flex-wrap: wrap;
       
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        
        .option-tag {
            display: inline-flex;
            align-items: center;
            position: relative;
            background: #fff;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            padding: 8px 28px 8px 14px;
            animation: wheelFadeIn 0.3s ease;
            font-size: 13px;
            color: #333;
            font-weight: 500;
            transition: all 0.2s ease;
            margin: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .option-tag:hover {
            background: #f8f9fa;
            border-color: var(--primary);
            box-shadow: 0 2px 6px rgba(75,108,183,0.15);
        }

        .tag-text {
            color: #333;
        }

        
        .delete-tag {
            position: absolute;
            top: 50%;
            right: 8px;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #f0f0f0;
            color: #999;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
            transition: all 0.2s ease;
            border: none;
        }

        .delete-tag:hover {
            background: #e74c3c;
            color: #fff;
        }

        .wheel-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            width: 100%;
        }

        
        .wheel-templates-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
            max-height: 300px;
            overflow-y: auto;
            padding: 12px;
            border: 1px solid #e1e8ed;
            border-radius: 10px;
            margin-bottom: 20px;
            background: #fafafa;
        }

        .template-tag {
            display: flex;
            flex-direction: column;
            position: relative;
            background: #fff;
            border: 1px solid #e1e8ed;
            border-radius: 10px;
            padding: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            min-height: 80px;
            justify-content: center;
        }

        .template-tag:hover {
            border-color: var(--primary);
            background: #fff;
            box-shadow: 0 4px 12px rgba(75,108,183,0.15);
            transform: translateY(-2px);
        }

        .template-name {
            font-size: 14px;
            color: #333;
            font-weight: 600;
            margin-bottom: 6px;
            word-break: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .template-options {
            font-size: 12px;
            color: #888;
            word-break: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2; 
            -webkit-box-orient: vertical;
        }

        
        .modal-header-actions {
            display: flex;
            gap: 8px;
            margin-right: 10px;
        }
        .modal-header-actions .btn-sm {
            padding: 4px 12px;
            font-size: 0.75rem;
        }
        .wheel-template-preview-name {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }
        .wheel-template-preview-content ul {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 300px;
            overflow-y: auto;
        }
        .wheel-template-preview-content li {
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 6px;
            border-left: 3px solid var(--primary, #4b6cb7);
            font-size: 0.9rem;
        }

        
        .wheel-template-edit-form {
            width: 100%;
        }
        .wheel-template-edit-name-row,
        .wheel-template-edit-content-row {
            margin-bottom: 15px;
        }
        .wheel-template-edit-name-row label,
        .wheel-template-edit-content-row label {
            display: block;
            font-weight: 500;
            color: #555;
            margin-bottom: 6px;
            font-size: 0.9rem;
        }
        .wheel-template-edit-name-row .form-control,
        .wheel-template-edit-content-row .form-control {
            width: 100%;
            box-sizing: border-box;
        }

        #wheelPage .templates-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        
        #wheelPage .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        #wheelPage .modal-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            animation: wheelModalAppear 0.4s ease;
        }

        #wheelPage .modal-title {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        #wheelPage #option-textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 2px solid #3498db;
            border-radius: 10px;
            font-size: 1.1rem;
            resize: none;
            margin-bottom: 20px;
        }

        #wheelPage .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        #wheelPage .modal-btn {
            padding: 10px 25px;
            border-radius: 8px;
        }

        #wheelPage .confirm-btn {
            background: #2ecc71;
            color: white;
        }

        #wheelPage .cancel-btn {
            background: #e74c3c;
            color: white;
        }

        #wheelPage .save-template-btn {
            background: linear-gradient(to right, #9b59b6, #1abc9c);
            color: white;
        }

        
        #wheelResultModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        #wheelResultModal .result-content {
            background: white;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            animation: wheelResultAppear 0.5s ease;
        }

        #wheelResultModal .result-title {
            color: #9b59b6;
            margin-bottom: 10px;
            font-size: 2rem;
        }

        #wheelResultModal .result-subtitle {
            font-size: 1.5rem;
            color: #7f8c8d;
            margin: 10px 0;
        }

        #wheelResultModal .result-text {
            font-size: 2.5rem;
            color: #e74c3c;
            font-weight: bold;
            margin: 20px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        
        .template-name-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 2px solid #3498db;
            border-radius: 8px;
            font-size: 1rem;
        }

        
        #wheelAlertModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        #wheelAlertModal .alert-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            animation: wheelModalAppear 0.4s ease;
        }

        #wheelAlertModal .alert-message {
            font-size: 1.2rem;
            margin-bottom: 25px;
            color: #2c3e50;
        }

        
        @keyframes wheelFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes wheelModalAppear {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes wheelResultAppear {
            from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
            to { opacity: 1; transform: scale(1) rotate(0); }
        }

        
        @keyframes wheelHighlightPulse {
            0% { transform: scale(1); box-shadow: 0 0 0px rgba(255, 215, 0, 0.7); }
            50% { transform: scale(1.15); box-shadow: 0 0 25px rgba(255, 215, 0, 0.9); }
            100% { transform: scale(1); box-shadow: 0 0 0px rgba(255, 215, 0, 0.7); }
        }

        
        @media (max-width: 768px) {
            .wheel-container {
                width: 300px;
                height: 300px;
            }

            .wheel-title-input {
                font-size: 2rem;
            }

        #wheelPage .spin-btn {
                font-size: 1.2rem;
                padding: 12px 30px;
            }

            .new-pointer {
                height: 140px;
            }

            .new-pointer::after {
                top: -12px;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                border-bottom: 16px solid #e74c3c;
            }

            .wheel-templates-list {
                justify-content: center;
            }

            .template-tag {
                width: calc(33.333% - 8px); 
            }

            .horse-race-container {
                height: 150px;
            }

            .horse-race-item {
                width: 130px;
                font-size: 1.3rem;
            }

            
            .template-name, .template-options {
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }

            
            .card-flip-container {
                height: 250px;
            }
        #wheelPage .card {
                width: 100px;
                height: 130px;
            }
        }

        @media (max-width: 480px) {
            .wheel-container {
                width: 250px;
                height: 250px;
            }

            .wheel-title-input {
                font-size: 1.8rem;
                padding: 5px 10px;
            }

        #wheelPage button {
                width: 100%;
                max-width: none;
            }

            .wheel-controls {
                flex-direction: row;
                flex-wrap: wrap;
            }

        #wheelPage .controls button {
                flex: 1;
                min-width: 120px;
                padding: 10px;
                font-size: 1rem;
            }

            .option-tag {
                min-width: 100px;
                padding: 8px 25px 8px 12px;
            }

            .new-pointer {
                height: 120px;
                width: 6px;
            }

            .new-pointer::after {
                top: -10px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 14px solid #e74c3c;
            }

        #wheelPage .modal-buttons {
                flex-wrap: wrap;
            }

        #wheelPage .modal-buttons button {
                flex: 1;
                min-width: 120px;
            }

            .template-tag {
                width: calc(50% - 6px); 
            }

            .horse-race-container {
                height: 120px;
            }

            .horse-race-item {
                width: 110px;
                font-size: 1.1rem;
            }

            .wheel-mode-selector {
                flex-direction: column;
                gap: 10px;
            }

            
            .template-tag {
                padding: 8px 12px;
            }

            .template-name {
                font-size: 0.9rem;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                -webkit-line-clamp: 2; 
            }

            .template-options {
                font-size: 0.7rem;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                -webkit-line-clamp: 2; 
            }

            
            .card-flip-container {
                height: 200px;
            }
        #wheelPage .card {
                width: 80px;
                height: 100px;
            }
        #wheelPage .card .card-front {
                font-size: 0.9rem;
            }
        }

        
        .card-flip-container {
            display: none;
            width: 100%;
            max-width: 800px;
            height: 350px;
            margin: 20px auto;
            perspective: 1000px;
        }

        .card-flip-inner {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            padding: 10px;
            overflow: hidden; 
        }

        #wheelPage .card {
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s, box-shadow 0.3s, z-index 0.3s;
            cursor: pointer;
            z-index: 1;
            transform-origin: center; 
            border-radius: 12px; 
            border: 2px solid transparent; 
        }

        #wheelPage .card.flipped {
            transform: rotateY(180deg);
        }

        #wheelPage .card.winner {
            transform: scale(1.1) rotateY(180deg);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
            z-index: 10;
        }

        
        #wheelPage .card.highlight {
            animation: wheelHighlightPulse 0.3s ease-out forwards;
            z-index: 2;
            border: 2px solid gold;
        }

        #wheelPage .card.highlight .card-back {
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
        }

        #wheelPage .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        #wheelPage .card-front {
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            transform: rotateY(180deg);
        }

        #wheelPage .card-back {
            background: linear-gradient(135deg, #9b59b6, #e74c3c);
            color: white;
        }

        .card-back::before {
            content: "?";
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .card-flip-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #95a5a6;
            font-size: 1.5rem;
            text-align: center;
        }

        
        .card-deal-container {
            display: none;
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 450px;
            margin: 20px auto;
            border-radius: 15px;
            background: linear-gradient(135deg, #3a7bd5, #00d2ff);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding: 20px;
            box-sizing: border-box;
            
            position: relative;
        }

        #wheelPage .card-deck-area {
            position: absolute;
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
            width: 120px;
            height: 170px;
            z-index: 5;
        }

        #wheelPage .card-stack {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #wheelPage .card-stack .card {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.5s;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background: linear-gradient(135deg, #9b59b6, #e74c3c);
        }

        .card-stack .card::before {
            content: "?";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
            backface-visibility: hidden;
        }

        #wheelPage .card-table {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding: 20px 20px 20px 180px;
            box-sizing: border-box;
            
            overflow: auto;
            
            align-content: flex-start;
        }

        #wheelPage .card-table .card {
            position: relative;
            width: 120px;
            height: 170px;
            transform-style: preserve-3d;
            transition: transform 0.5s, box-shadow 0.3s;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            opacity: 0; 
            transform: translateY(20px);
        }

        #wheelPage .card-table .card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        
        #wheelPage .card-table .card.visible.flipped {
            transform: translateY(0) rotateY(180deg) !important;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
            z-index: 10;
        }

        #wheelPage .card-table .card .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        #wheelPage .card-table .card .card-back {
            background: linear-gradient(135deg, #9b59b6, #e74c3c);
            color: white;
        }

        .card-table .card .card-back::before {
            content: "?";
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
        }

        #wheelPage .card-table .card .card-front {
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            transform: rotateY(180deg);
        }

        .card-deal-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 1.5rem;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            z-index: 2;
        }

        
        #wheelPage .card-clone {
            position: absolute;
            transform-style: preserve-3d;
            z-index: 20;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.5s ease-out;
            
            display: block;
            opacity: 1;
        }

        #wheelPage .card-clone .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        #wheelPage .card-clone .card-back {
            background: linear-gradient(135deg, #9b59b6, #e74c3c);
            color: white;
        }

        .card-clone .card-back::before {
            content: "?";
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
        }






#wheelPage {
    background: var(--light-bg) !important;
    padding: 25px !important;
    min-height: auto !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 16px var(--shadow) !important;
    margin-top: 20px !important;
}
#wheelPage .stats-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}
#wheelPage .stats-header h2 {
    font-size: 1.5rem !important;
    margin: 0 !important;
    color: #333 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
#wheelPage .stats-header h2 i {
    color: var(--primary) !important;
}
#wheelPage .back-btn {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}
#wheelPage .back-btn:hover {
    background: #3a5a99 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(75,108,183,0.3) !important;
}
#wheelPage .wheel-content {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
#wheelPage .wheel-title-input {
    color: #2c3e50 !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto 20px !important;
    display: block !important;
    padding: 10px 16px !important;
    outline: none !important;
}
#wheelPage .wheel-title-input:focus {
    border-color: #4b6cb7 !important;
}
#wheelPage .wheel-mode-selector {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin: 0 0 20px !important;
    flex-wrap: wrap !important;
}
#wheelPage .wheel-mode-btn {
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}
#wheelPage .wheel-mode-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
#wheelPage .spin-btn {
    padding: 12px 30px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 20px auto !important;
    display: block !important;
    box-shadow: 0 4px 10px rgba(75,108,183,0.3) !important;
}
#wheelPage .spin-btn:hover { background: #3a5a99 !important; }
#wheelPage .spin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#wheelPage .wheel-tabs-container {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#wheelPage .wheel-tabs-header {
    display: flex !important;
    border-bottom: 2px solid #f0f0f0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}
#wheelPage .wheel-tab-btn {
    flex: 1 !important;
    background: #f0f0f0 !important;
    border: none !important;
    padding: 14px !important;
    cursor: pointer !important;
    color: #888 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    border-radius: 5px 5px 0 0 !important;
    margin-right: 5px !important;
}
#wheelPage .wheel-tab-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
}
#wheelPage .wheel-tab-content {
    padding: 16px !important;
    display: none !important;
    background: #fff !important;
}
#wheelPage .wheel-tab-content.active { display: block !important; }
#wheelPage .wheel-controls {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 16px !important;
    padding: 0 !important;
}
#wheelPage .wheel-add-btn,
#wheelPage .wheel-clear-btn {
    padding: 8px 20px !important;
    font-size: 13px !important;
}


#wheelPage .option-tag {
    background: #fff !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 8px !important;
    padding: 8px 28px 8px 14px !important;
    font-size: 13px !important;
    color: #333 !important;
    margin: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
#wheelPage .option-tag:hover {
    background: #f8f9fa !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 6px rgba(75,108,183,0.15) !important;
}
#wheelPage .delete-tag {
    width: 18px !important;
    height: 18px !important;
    right: 8px !important;
    background: #f0f0f0 !important;
    color: #999 !important;
}
#wheelPage .delete-tag:hover {
    background: #e74c3c !important;
    color: #fff !important;
}


#wheelPage .wheel-templates-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    max-height: 300px !important;
    padding: 12px !important;
    border: 1px solid #e1e8ed !important;
    background: #fafafa !important;
}
#wheelPage .template-tag {
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 10px !important;
    padding: 14px !important;
    min-height: 80px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
#wheelPage .template-tag:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(75,108,183,0.15) !important;
    transform: translateY(-2px) !important;
}
#wheelPage .template-name {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}
#wheelPage .template-options {
    font-size: 12px !important;
    color: #888 !important;
}


#wheelOptionModal, #wheelSaveTemplateModal, #wheelConfirmModal { z-index: 9999 !important; }
#wheelResultModal { z-index: 99999 !important; }
#wheelAlertModal { z-index: 99999 !important; }


#wheelPage.stats-page.hidden { display: none !important; }


@media (max-width: 768px) {
    
    #wheelPage .back-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
        min-width: 0 !important;
        width: auto !important;
    }
    #wheelPage .stats-header h2 {
        font-size: 1.2rem !important;
    }
    #wheelPage .stats-header {
        gap: 8px;
    }

    
    #wheelPage .wheel-mode-selector {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    #wheelPage .wheel-mode-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    #wheelPage .wheel-mode-btn i {
        font-size: 0.85rem !important;
    }

    
    #wheelPage .wheel-templates-list {
        grid-template-columns: repeat(2, 1fr) !important;
        max-height: 360px !important;
    }

    
    .new-pointer::after {
        left: -8px !important;
    }
}

@media (max-width: 480px) {
    
    #wheelPage .wheel-mode-selector {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        justify-content: center !important;
    }
    #wheelPage .wheel-mode-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        line-height: 1.2 !important;
    }
    #wheelPage .wheel-mode-btn i {
        font-size: 0.8rem !important;
    }

    
    #wheelPage .wheel-controls {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    #wheelPage .wheel-add-btn,
    #wheelPage .wheel-clear-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 8px 6px !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
    }
    #wheelPage .wheel-add-btn i,
    #wheelPage .wheel-clear-btn i {
        font-size: 0.85rem;
    }

    
    #wheelPage .wheel-templates-list {
        grid-template-columns: repeat(2, 1fr) !important;
        max-height: 400px !important;
        padding: 8px !important;
        gap: 8px !important;
    }
    #wheelPage .template-tag {
        width: auto !important;
        padding: 10px !important;
        min-height: 70px !important;
    }

    
    .new-pointer::after {
        left: -7px !important;
    }
}


.score-preview-action {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.2s;
}
.score-preview-action:hover {
    background: rgba(255, 255, 255, 0.3);
}
#btnPreviewDel:hover { background: rgba(231, 76, 60, 0.8); }


.avatar-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
    overflow-x: auto;
}
.avatar-tab {
    flex: 1;
    min-width: 44px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: .75rem;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    text-align: center;
}
.avatar-tab:hover { color: #334155; background: rgba(75,108,183,.08); }
.avatar-tab.active {
    background: #4B6CB7;
    color: #fff;
    font-weight: 600;
}


.avatar-grid-wrap {
    max-height: 170px;
    overflow-y: auto;
    padding: 2px 0;
    scrollbar-width: thin;
}
.avatar-grid-wrap::-webkit-scrollbar { width: 4px; }
.avatar-grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}


.acct-avatar-grid-wrap {
    max-height: 155px;
    overflow-y: auto;
    padding: 2px 0;
    scrollbar-width: thin;
}
.acct-avatar-grid-wrap::-webkit-scrollbar { width: 4px; }
.acct-avatar-grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }


.avatar-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
}
.avatar-upload-preview {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: all .15s;
}
.avatar-upload-preview:hover {
    border-color: #4B6CB7;
    background: rgba(75,108,183,.05);
}
.avatar-upload-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.avatar-upload-preview.has-image {
    border-style: solid;
    border-color: #27ae60;
}
.avatar-upload-plus {
    font-size: 24px;
    color: #94a3b8;
}
.avatar-upload-hint {
    font-size: .7rem;
    color: #94a3b8;
    text-align: center;
}
.avatar-upload-remove {
    font-size: .7rem;
    color: #e74c3c;
    cursor: pointer;
}


.avatar-crop-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.85);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.avatar-crop-container {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.3);
}
.avatar-crop-image {
    position: absolute;
    top: 0; left: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}
.avatar-crop-image:active { cursor: grabbing; }
.avatar-crop-toolbar {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 280px;
}
.avatar-crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.avatar-crop-zoom-label {
    color: #94a3b8;
    font-size: .75rem;
    flex-shrink: 0;
}
.avatar-crop-zoom-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #475569;
    outline: none;
}
.avatar-crop-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4B6CB7;
    cursor: pointer;
}
.avatar-crop-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}
.avatar-crop-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 10px;
    border: none;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.avatar-crop-btn-cancel {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.avatar-crop-btn-cancel:hover { background: rgba(255,255,255,.25); }
.avatar-crop-btn-confirm {
    background: #4B6CB7;
    color: #fff;
}
.avatar-crop-btn-confirm:hover { background: #3d5a9b; }




#hanziStrokeCard h3 { color: #e8590c; }


.stroke-search-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 15px 20px;
    max-width: 500px;
    margin: 0 auto;
}


.stroke-tags-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
}

.stroke-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    background: #f0f0f0;
    color: #333;
    cursor: pointer;
    user-select: none;
    border: 1.5px solid transparent;
    transition: all 0.15s;
}

.stroke-tag:hover {
    background: #ffe0e0;
    border-color: #ffb3b3;
}

.stroke-tag-active {
    background: #d32f2f;
    color: #fff;
    border-color: #b71c1c;
}

.stroke-search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.stroke-search-wrapper:focus-within {
    border-color: #e8590c;
}

.stroke-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 20px;
    font-size: 18px;
    background: transparent;
    min-width: 0;
}

.stroke-search-input::placeholder {
    color: #bbb;
    font-size: 15px;
}

.stroke-search-btn {
    width: 48px;
    height: 48px;
    border: none;
    background: #e8590c;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.stroke-search-btn:hover { background: #d04e0a; }


.stroke-grid-container {
    display: flex;
    justify-content: center;
    padding: 10px 20px 20px;
}

.tian-zi-ge {
    position: relative;
    width: min(300px, calc(100vw - 60px));
    aspect-ratio: 1 / 1;
    background: #fffdf5;
    border: 3px solid #333;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: 0 auto;
}


.tian-zi-ge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    border-left: 1.5px dashed #d0d0d0;
    z-index: 1;
    pointer-events: none;
}

.tian-zi-ge::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 0;
    border-top: 1.5px dashed #d0d0d0;
    z-index: 1;
    pointer-events: none;
}

.tian-zi-ge-inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tian-zi-ge-inner svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}


.tian-zi-ge-inner svg {
    margin: 0 auto;
}


.stroke-list-area {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px 4px;
}

.stroke-list-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
}


.stroke-list-row {
    --stroke-gap: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill,
        minmax(clamp(56px, calc((100% - (var(--stroke-cols, 8) - 1) * var(--stroke-gap)) / var(--stroke-cols, 8)), 92px), 1fr));
    gap: var(--stroke-gap);
}

.stroke-list-cell {
    min-width: 0;   
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.stroke-list-cell:hover {
    border-color: #ffc7a8;
}

.stroke-list-cell:focus-visible {
    outline: 2px solid #e8590c;
    outline-offset: 1px;
}

.stroke-list-cell svg {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

.stroke-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 2px 0 3px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    font-size: 12px;
    color: #9aa0a8;
    line-height: 1.4;
}

.stroke-list-sym {
    font-size: 13px;
    color: #6b7280;
}

.stroke-list-name {
    text-align: center;
    font-size: 13px;
    color: #374151;
    padding: 4px 2px 6px;
    line-height: 1.3;
    
    overflow-wrap: anywhere;
}


.stroke-list-cell-active {
    border-color: #d32f2f;
    background: #fff6f6;
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.14);
}

.stroke-list-cell-active .stroke-list-meta {
    background: #fff0f0;
    color: #d32f2f;
}

.stroke-list-cell-active .stroke-list-sym,
.stroke-list-cell-active .stroke-list-name {
    color: #d32f2f;
}

.stroke-list-cell-active .stroke-list-name {
    font-weight: 600;
}


.stroke-info {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 13px;
    color: #999;
    z-index: 3;
    pointer-events: none;
}


.stroke-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 15px;
    max-width: 500px;
    margin: 0 auto;
}

.stroke-ctrl-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    background: #fff;
    color: #555;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.stroke-ctrl-btn:hover:not(:disabled) {
    border-color: #e8590c;
    color: #e8590c;
    background: #fff5f0;
}

.stroke-ctrl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.stroke-ctrl-pause {
    padding: 10px 24px;
    font-weight: 600;
}


.stroke-quiz-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;                 
    padding: 0 20px 18px;
}

.stroke-quiz-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    padding: 14px 18px;
    border: none;
    border-radius: 28px;
    background: linear-gradient(135deg, #e8590c, #f76707);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(232, 89, 12, 0.35);
    transition: all 0.2s;
    
    white-space: nowrap;
    flex: 0 0 auto;
}

.stroke-quiz-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 89, 12, 0.45);
}

.stroke-quiz-btn:active {
    transform: translateY(0);
}


.char-info-card {
    margin: 12px 20px 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.char-info-pinyin {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
}

.pinyin-label {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.pinyin-label i {
    color: #d32f2f;
    font-size: 14px;
}

.pinyin-value {
    font-size: 22px;
    font-weight: 700;
    color: #d32f2f;
    letter-spacing: 1px;
}

.char-info-words {
    padding: 14px 20px;
}

.char-info-words .words-label {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.char-info-words .words-label i {
    color: #e68a00;
    font-size: 14px;
}

.words-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.word-chip {
    display: inline-block;
    padding: 6px 14px;
    background: #fff8f0;
    border: 1px solid #ffe0b2;
    border-radius: 20px;
    font-size: 14px;
    color: #e65100;
    cursor: default;
    transition: all 0.2s;
    user-select: none;
}

.word-chip:hover {
    background: #ff9800;
    color: #fff;
    border-color: #ff9800;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.no-data {
    color: #ccc;
    font-size: 14px;
}


.quiz-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-modal-content {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 92%;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: quizFadeIn 0.25s ease;
}

@keyframes quizFadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.quiz-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.quiz-modal-header h3 {
    font-size: 18px;
    color: #333;
    margin: 0;
}

.quiz-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.quiz-close-btn:hover { background: #e74c3c; color: #fff; }

.quiz-grid-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.quiz-tian-zi-ge {
    width: min(320px, calc(100vw - 60px));
    aspect-ratio: 1 / 1;
}

.quiz-message {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 16px;
    min-height: 24px;
    line-height: 24px;
}

.quiz-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}


@media (max-width: 480px) {
    .stroke-controls {
        gap: 8px;
    }

    .stroke-ctrl-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    
    .stroke-quiz-area {
        gap: 8px;
        padding: 0 14px 16px;
    }

    .stroke-quiz-btn {
        padding: 12px 16px;
        font-size: 15px;
        gap: 6px;
    }
}


#comboEditPage .combo-item {
    padding: 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
}
#comboEditPage .combo-item-basic {
    margin-bottom: 10px;
}
#comboEditPage .combo-item-advanced {
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    margin-top: 10px;
}
#comboEditPage .combo-item-advanced label {
    font-weight: 500;
    color: #666;
    font-size: 0.85rem;
}
#comboEditPage .combo-item-advanced .form-control {
    font-size: 0.85rem;
}
#comboEditPage .week-day-btn {
    padding: 4px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
#comboEditPage .week-day-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
#comboEditPage .combo-item-toggle-advanced {
    font-size: 0.85rem;
}
#comboEditPage .combo-item-delete {
    font-size: 0.85rem;
}


#comboEditPage .combo-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

#comboEditPage .combo-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
}

#comboEditPage .combo-item-type {
    font-size: 0.85rem;
    color: #666;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 4px;
}


.combo-card-preview {
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.combo-card-preview:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.combo-card-action {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    text-align: right;
}


.combo-copy-cat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.combo-copy-cat-btn {
    padding: 4px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.combo-copy-cat-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.combo-copy-cat-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}


.combo-preview-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary);
}

.combo-preview-header h2 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 1.4rem;
}

.combo-preview-header p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.combo-preview-section {
    margin-bottom: 20px;
}

.combo-preview-section h4 {
    margin: 0 0 12px 0;
    color: var(--primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.combo-preview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.combo-preview-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
}

.combo-preview-num {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

.combo-preview-info {
    flex: 1;
}

.combo-preview-name {
    font-weight: bold;
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.combo-preview-cat {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 8px;
}

.combo-preview-desc {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 6px;
}

.combo-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
    color: #888;
}


.combo-copy-tpl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.combo-copy-tpl-card {
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.combo-copy-tpl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.combo-copy-tpl-card.selected {
    border-color: var(--primary);
    background: rgba(75, 108, 183, 0.05);
}

.combo-copy-check-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    position: relative;
}

.combo-copy-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 2;
}

.combo-copy-check-mark {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: all 0.2s;
}

.combo-copy-checkbox:checked + .combo-copy-check-mark {
    background: var(--primary);
    border-color: var(--primary);
}

.combo-copy-checkbox:checked + .combo-copy-check-mark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


.combo-repeat-extra {
    padding: 8px 10px;
    background: #f9f9f9;
    border-radius: 5px;
    margin-top: 5px;
}

.combo-repeat-extra label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
    color: #555;
}

.combo-repeat-weekly-multi .week-day-btn,
.combo-repeat-extra .week-day-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.combo-repeat-weekly-multi .week-day-btn:hover,
.combo-repeat-extra .week-day-btn:hover {
    border-color: var(--primary);
}

.combo-repeat-weekly-multi .week-day-btn.active,
.combo-repeat-extra .week-day-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}



.auth-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.auth-locked {
    overflow: hidden;
}
.auth-overlay.hidden { display: none; }

.auth-container {
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.auth-header {
    text-align: center;
    margin-bottom: 28px;
}
.auth-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}
.auth-header p {
    font-size: 13px;
    color: #999;
    margin: 0;
}
.auth-field {
    margin-bottom: 16px;
}
.auth-field label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    font-weight: 500;
}
.auth-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.auth-field input:focus {
    border-color: var(--primary);
}
.auth-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 8px;
}
.auth-btn:hover { opacity: 0.9; }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-switch {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: #999;
}
.auth-switch a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.auth-msg {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    min-height: 20px;
}
.auth-msg.error { color: #e74c3c; }
.auth-msg.success { color: #27ae60; }



.wc-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 9px;
    background: #f5ede1;
    color: #d35400;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    vertical-align: 1px;
}
.wc-tab-on .wc-tab-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.wc-add-area {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.wc-add-input {
    flex: 1;
    border: 2px solid #f0c8a0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 16px;
    background: #fff;
    outline: none;
    min-width: 0;
}
.wc-add-input:focus { border-color: #e67e22; }
.wc-add-input::placeholder { color: #bbb; font-size: 15px; }
.wc-add-btn {
    border: none;
    background: #e67e22;
    color: #fff;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.wc-add-btn:hover { background: #d35400; }
.wc-add-btn:active { transform: scale(0.97); }

.wc-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
}
.wc-tab {
    padding: 6px 16px;
    border-radius: 16px;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
}
.wc-tab-on { background: #e67e22; border-color: #e67e22; color: #fff; }
.wc-tab-spacer { flex: 1; }
.wc-sort-btn {
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fff;
    color: #888;
    font-size: 0.75rem;
    cursor: pointer;
}
.wc-sort-on { background: #fdf0e0; border-color: #e67e22; color: #d35400; }
.wc-clear-btn {
    border: none;
    background: transparent;
    color: #bbb;
    font-size: 0.9rem;
    cursor: pointer;
}
.wc-clear-btn:hover { color: #e74c3c; }

.wc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    padding: 12px;
}
.wc-card {
    background: #fff;
    border: 1px solid #f0e0c8;
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: transform .1s;
}
.wc-card:active { transform: scale(.97); }
.wc-card-char {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    color: #333;
    position: relative;
}
.wc-wrong-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.62rem;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 400;
}
.wc-card-pin { font-size: 0.75rem; color: #999; margin-bottom: 2px; }
.wc-card-meta { font-size: 0.65rem; color: #bbb; margin-top: 2px; }
.wc-mv-btn {
    margin-top: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: #777;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 10px;
    cursor: pointer;
}
.wc-mv-btn:hover { border-color: #e67e22; color: #d35400; }
.wc-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #bbb;
    padding: 40px 0;
    font-size: 0.9rem;
}
.wc-empty-icon {
    font-size: 2.2rem;
    color: #f0c8a0;
    margin-bottom: 8px;
}


.wc-review-pinyin { font-size: 0.85rem; color: #999; margin-left: 6px; }
.wc-review-detail {
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    padding: 2px 0 6px;
}
.wc-review-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
}
.wc-judge-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
}
.wc-judge-ok { background: #2ecc71; color: #fff; }
.wc-judge-no { background: #e74c3c; color: #fff; }
.wc-quiz-hint {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    padding: 6px 0;
}
.wc-quiz-hint .wc-mv-btn { margin: 4px 6px 0; }
.wc-review-words {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 4px;
    font-size: 0.8rem;
}
.wc-word-chip {
    background: #fdf0e0;
    color: #a06a28;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
}


.wc-stroke-add-btn {
    background: #fff8f0 !important;
    color: #d35400 !important;
    border: 1px solid #f0c8a0;
}
.wc-btn-added {
    background: #f0f0f0 !important;
    color: #aaa !important;
    border-color: #e0e0e0 !important;
    cursor: default;
}


.wc-del-btn {
    margin-top: 4px;
    border: 1px solid #f0c0c0;
    background: #fff;
    color: #d98080;
    font-size: 0.68rem;
    padding: 2px 10px;
    border-radius: 10px;
    cursor: pointer;
}
.wc-del-btn:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }


.wc-review-actions { flex-direction: column; align-items: center; }
.wc-review-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.wc-review-del-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #f0c0c0;
    background: #fff;
    color: #d98080;
    font-size: 0.85rem;
    cursor: pointer;
}
.wc-review-del-btn:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.wc-judge-btn:disabled {
    opacity: 0.55;
    cursor: default;
}


.wc-grid-err {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 18px;
    text-align: center;
}
.wc-grid-err i { font-size: 26px; color: #d9a441; }
.wc-grid-err p { margin: 0; font-size: 15px; font-weight: 600; color: #5a5a5a; line-height: 1.4; }
.wc-grid-err span { font-size: 12.5px; color: #8a8a8a; line-height: 1.5; }




.wcprint-actions { display: flex; align-items: center; gap: 10px; }

.wcprint-entry {
    background: #e67e22;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(230, 126, 34, .3);
}
.wcprint-entry:hover { background: #d35400; }

.wcprint-entry.on { background: #2ecc71; box-shadow: 0 2px 8px rgba(46, 204, 113, .3); }
.wcprint-entry.on:hover { background: #27ae60; }


.wcprint-chk {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.wcprint-chk i {
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
    display: block;
    visibility: hidden;
}
.wc-card.wcprint-sel { border-color: #e67e22; background: #fff9ef; box-shadow: 0 0 0 2px rgba(230, 126, 34, .15); }
.wc-card.wcprint-sel .wcprint-chk { background: #e67e22; border-color: #e67e22; }

.wc-card.wcprint-sel .wcprint-chk i { visibility: visible; }


.wcprint-pickbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 12px 2px;
    padding: 9px 12px;
    background: #fff8ef;
    border: 1px dashed #f0c8a0;
    border-radius: 10px;
    font-size: .82rem;
    color: #a06a28;
}
.wcprint-pick-lk {
    border: none;
    background: none;
    padding: 0;
    color: #d35400;
    text-decoration: underline;
    cursor: pointer;
    font-size: .82rem;
    font-family: inherit;
}
.wcprint-pick-sp { flex: 1; }
.wcprint-pick-pill {
    background: #e67e22;
    color: #fff;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: .78rem;
}


.wcprint-footbar {
    position: sticky;
    bottom: 8px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 12px 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    font-size: .82rem;
    color: #666;
}
.wcprint-foot-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcprint-foot-sp { flex: 1; }
.wcprint-mini {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    font-size: .84rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.wcprint-mini.main { background: #e67e22; border-color: #e67e22; color: #fff; }
.wcprint-mini:disabled { opacity: .5; cursor: default; }


.wcprint-mask {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(17, 24, 39, .55);
    display: flex;
    padding: 16px;
    overflow-y: auto;
}
.wcprint-panel {
    width: 100%;
    max-width: 520px;
    margin: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
.wcprint-phead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    font-weight: 600;
    font-size: .95rem;
    color: #1f2937;
}
.wcprint-phead i { color: #e67e22; }
.wcprint-x {
    margin-left: auto;
    border: none;
    background: none;
    color: #9ca3af;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.wcprint-prow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid #f2f5f9;
}
.wcprint-plbl .t { font-size: .88rem; color: #1f2937; }
.wcprint-plbl .d { font-size: .74rem; color: #9ca3af; margin-top: 2px; }
.wcprint-seg {
    display: flex;
    border: 1px solid #d5dbe4;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}
.wcprint-seg b {
    padding: 6px 13px;
    font-size: .8rem;
    font-weight: 400;
    color: #4b5563;
    cursor: pointer;
    border-right: 1px solid #e3e9f0;
    white-space: nowrap;
}
.wcprint-seg b:last-child { border-right: none; }
.wcprint-seg b.on { background: #e67e22; color: #fff; }


.wcprint-swg { display: flex; gap: 8px; }
.wcprint-swg i {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid #d5dbe4;
    display: block;
    position: relative;
    cursor: pointer;
}
.wcprint-swg i b { position: absolute; inset: 6px; border-radius: 3px; display: block; }
.wcprint-swg i.on { outline: 2px solid #e67e22; outline-offset: 1px; }


.wcprint-tglwrap { display: flex; align-items: center; }
.wcprint-tgl {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #e67e22;
    position: relative;
    display: block;
    cursor: pointer;
    flex: 0 0 auto;
}
.wcprint-tgl b {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    display: block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.wcprint-tgl.off { background: #d5dbe4; }
.wcprint-tgl.off b { right: auto; left: 2px; }
.wcprint-tgltxt { font-size: .76rem; color: #6b7280; margin-left: 8px; }


.wcprint-pdftip,
.wcprint-pvtip {
    display: flex;
    gap: 9px;
    margin: 12px 16px;
    padding: 11px 13px;
    border-radius: 10px;
    background: #eef4ff;
    border: 1px solid #cfe0ff;
    color: #1f4e9c;
    font-size: .82rem;
    line-height: 1.62;
}
.wcprint-pdftip i,
.wcprint-pvtip i { color: #3b74d1; margin-top: .12em; }
.wcprint-pdftip b,
.wcprint-pvtip b { color: #123c85; }
.wcprint-pdftip kbd,
.wcprint-pvtip kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #b9cdf0;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: .95em;
    color: #123c85;
}
.wcprint-pfoot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 13px 16px;
    background: #f8fafc;
}


.wcprint-preview {
    position: fixed;
    inset: 0;
    z-index: 10060;
    background: #eef1f6;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
.wcprint-pvbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    background: #fff;
    padding: 10px 14px;
    border-bottom: 1px solid #e3e9f0;
    font-size: .82rem;
    color: #4b5563;
}
.wcprint-pvgrp { display: flex; align-items: center; gap: 7px; }
.wcprint-pvgrp .k { color: #9ca3af; font-size: .76rem; }
.wcprint-pvbar .sp { flex: 1; }
.wcprint-seg.sm b { padding: 4px 9px; font-size: .76rem; }
.wcprint-tgl.sm { width: 34px; height: 19px; }
.wcprint-tgl.sm b { width: 15px; height: 15px; }
.wcprint-pvtip { margin: 10px 14px 0; }
.wcprint-pvscroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    position: relative;
}
.wcprint-pvpages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.wcprint-pvbox {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .16);
}
.wcprint-pvinner { transform-origin: top left; }


.wcprint-prog {
    position: fixed;
    inset: 0;
    z-index: 10070;
    background: rgba(15, 23, 42, .42);
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.wcprint-progbox {
    width: 100%;
    max-width: 340px;
    margin: auto;
    background: #fff;
    border-radius: 14px;
    padding: 22px 20px 18px;
    text-align: center;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .26);
}
.wcprint-progttl { font-size: .98rem; font-weight: 600; color: #1f2937; margin-bottom: 14px; }
.wcprint-progttl i { color: #d64545; margin-right: 4px; }
.wcprint-progbar { height: 8px; border-radius: 4px; background: #eef1f6; overflow: hidden; }
.wcprint-progbar b { display: block; height: 100%; width: 0; border-radius: 4px; background: #3b74d1; }
.wcprint-progtxt { margin-top: 10px; font-size: .82rem; color: #4b5563; }
.wcprint-progtip { margin-top: 6px; font-size: .74rem; color: #9ca3af; }


@media (max-width: 560px) {
    .wcprint-prow { grid-template-columns: minmax(0, 1fr); }
    .wcprint-prow .wcprint-seg,
    .wcprint-prow .wcprint-swg,
    .wcprint-prow .wcprint-tglwrap { justify-self: start; }
    .wcprint-actions { gap: 8px; }
    .wcprint-entry { padding: 9px 12px; font-size: .92rem; }
    .wcprint-pvbar { gap: 6px 12px; padding: 8px 10px; }
    .wcprint-pvscroll { padding: 10px; }
}



.sn-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 14px;
    border-bottom: 1px solid #f2f2f0;
    margin-bottom: 14px;
}
.sn-input {
    flex: 1;
    border: 1.5px solid #e8e4dc;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    background: #fafaf8;
    outline: none;
    min-width: 0;
    transition: border-color .15s, background .15s;
}
.sn-input:focus { border-color: #f0b429; background: #fff; }
.sn-input::placeholder { color: #c0bdb6; }
.sn-add-btn {
    border: none;
    background: linear-gradient(135deg, #f7b733, #f39c12);
    color: #fff;
    padding: 0 18px;
    height: 42px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(243,156,18,.25);
    transition: transform .1s, box-shadow .15s;
}
.sn-add-btn:hover { box-shadow: 0 3px 10px rgba(243,156,18,.35); }
.sn-add-btn:active { transform: scale(.97); }
.sn-cancel-btn {
    border: 1px solid #e0dcd2;
    background: #fff;
    color: #777;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.sn-list { display: flex; flex-direction: column; gap: 12px; }
.sn-empty { text-align: center; color: #c0bdb6; padding: 44px 0 30px; font-size: 0.9rem; }
.sn-empty-icon { font-size: 2.4rem; margin-bottom: 10px; color: #f0d9a8; }



.sn-card {
    display: flex;
    gap: 10px;
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(60,50,30,.08);
    transition: box-shadow .15s, transform .1s;
}
.sn-card:active { transform: scale(.995); }
.sn-card-converted {
    background: #fbfbf9;
    box-shadow: none;
}
.sn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }

.sn-content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.95rem;
    color: #3d3d38;
    line-height: 1.6;
    word-break: break-all;
}
.sn-time { font-size: 0.72rem; color: #b5b2aa; margin-top: 8px; }
.sn-time i { margin-right: 3px; }


.sn-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sn-convert-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: linear-gradient(135deg, #ff9f43, #f77f00);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 10px 6px;
    border-radius: 9px;
    cursor: pointer;
    width: 34px;
    min-height: 92px;
    box-shadow: 0 1px 4px rgba(247,127,0,.2);
    transition: box-shadow .15s, transform .1s;
}
.sn-convert-btn span { display: block; line-height: 1.3; }
.sn-convert-btn:hover { box-shadow: 0 2px 8px rgba(247,127,0,.3); }
.sn-convert-btn:active { transform: scale(.96); }
.sn-converted {
    background: #ecece8 !important;
    color: #a0a09a !important;
    box-shadow: none !important;
    cursor: default;
}
.sn-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
.sn-act-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e6e2d8;
    background: #fff;
    color: #9a968c;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.sn-act-btn:hover { color: #4a463c; border-color: #c9c4b8; background: #fafaf7; }
.sn-act-btn.sn-del:hover { color: #e74c3c; border-color: #f0b4ac; background: #fef6f5; }


.rb-tip {
    margin: 12px 16px 0;
    padding: 8px 14px;
    background: #E6F1FB;
    color: #185FA5;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rb-toolbar {
    margin: 12px 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.rb-btn {
    border: 1px solid #d3d1c7;
    background: #fff;
    color: #444441;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}
.rb-btn:hover { background: #fafaf7; border-color: #b4b2a9; }
.rb-btn-restore { color: #0F6E56; border-color: #9fe1cb; background: #f0faf6; }
.rb-btn-restore:hover { background: #e1f5ee; border-color: #5dcaa5; }
.rb-btn-purge { color: #A32D2D; border-color: #f0b4ac; background: #fef6f5; }
.rb-btn-purge:hover { background: #fcebeb; border-color: #f09595; }
.rb-list { margin: 0 16px 24px; }
.rb-group {
    background: #fff;
    border: 1px solid #eae7df;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}
.rb-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #faf9f5;
    border-bottom: 1px solid #eeece4;
    font-size: 14px;
    font-weight: 500;
    color: #444441;
}
.rb-group-label { flex: 1; }
.rb-group-actions { display: flex; gap: 8px; }
.rb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f1ea;
}
.rb-item:last-child { border-bottom: none; }
.rb-item-main { flex: 1; min-width: 0; }
.rb-item-title {
    font-size: 14px;
    color: #2c2c2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-item-time {
    font-size: 12px;
    color: #888780;
    margin-top: 2px;
}
.rb-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
.rb-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888780;
}
.rb-empty-icon { font-size: 40px; color: #d3d1c7; margin-bottom: 12px; }
.rb-empty p { margin: 4px 0; font-size: 15px; }
.rb-empty-sub { font-size: 13px; color: #b4b2a9; }
.rb-error { color: #A32D2D; }


.rb-type-tabs {
    margin: 10px 16px 0;
    display: flex;
    flex-wrap: wrap;   
    gap: 8px;
}
.rb-type-tab {
    flex-shrink: 0;
    border: 1px solid #e0ddd3;
    background: #fff;
    color: #5f5e5a;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rb-type-tab i { font-size: 12px; }
.rb-type-tab:hover { border-color: #b4b2a9; background: #faf9f5; }
.rb-type-tab.active {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}


.rb-item-sub {
    font-size: 12px;
    color: #0F6E56;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rb-item-sub i { font-size: 11px; }
.rb-item-sub-sep { color: #d3d1c7; }
.rb-item-sub-note { color: #b4b2a9; font-size: 11px; }


.overview-paper-stage {
    padding: 18px 16px 30px;
    overflow: auto;
    background: #e9e7e2;
    min-height: 60vh;
}
.overview-paper-scale {
    margin: 0 auto;
    transform-origin: top left;
}
.overview-paper {
    display: flex;
    flex-direction: column;
    gap: 14mm;
}
.overview-sheet {
    background: #fff;
    box-shadow: 0 2px 14px rgba(0,0,0,.18);
    padding: 14mm 16mm 20mm;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.overview-sheet.portrait  { width: 210mm; min-height: 297mm; }
.overview-sheet.landscape { width: 297mm; min-height: 210mm; }


.ov-sheet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: .6pt solid #bbb;
    padding-bottom: 2.5mm;
    margin-bottom: 5mm;
}
.ov-sheet-title { font-size: 15pt; font-weight: bold; color: #222; }
.ov-sheet-sub { font-size: 9.5pt; color: #666; margin-top: 1mm; }


.ov-sheet-footer {
    position: absolute;
    bottom: 6mm; left: 16mm; right: 16mm;
    display: flex;
    justify-content: space-between;
    font-size: 8.5pt;
    color: #999;
    border-top: .4pt solid #eee;
    padding-top: 1.5mm;
}


.ov-grid {
    display: grid;
    width: 100%;
    border: .5pt solid #c9c9c9;
    border-collapse: collapse;
}
.ov-cell {
    border: .5pt solid #d8d8d8;
    padding: 1.4mm 1.8mm;
    font-size: 8.5pt;
    min-height: 9mm;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-all;
}
.ov-cell.ov-head {
    background: #f4f4f4;
    font-weight: bold;
    text-align: center;
    font-size: 8.5pt;
    color: #333;
}
.ov-cell.ov-time { text-align: center; color: #777; background: #fafafa; font-size: 8pt; }


.ov-task-block {
    font-size: 8pt;
    line-height: 1.35;
    margin-bottom: 1mm;
    border-left: 1.2mm solid #4b6cb7;
    padding-left: 1.2mm;
}
.ov-task-block.completed { color: #999; border-left-color: #4CAF50; }
.ov-task-block .t-name { font-weight: bold; color: #333; }
.ov-task-block.completed .t-name { color: #999; }
.ov-task-block .t-time { color: #888; font-size: 7.5pt; }
.ov-section-title {
    font-size: 10.5pt;
    font-weight: bold;
    color: #333;
    margin: 5mm 0 2mm;
}


.ov-day-axis { display: flex; }
.ov-day-timecol {
    width: 20mm;
    flex-shrink: 0;
}
.ov-day-timecol .ov-cell { border-right: .8pt solid #bbb; }
.ov-day-body {
    flex: 1;
    position: relative;
    border-left: .5pt solid #d8d8d8;
}
.ov-day-slot {
    border-bottom: .4pt dashed #e5e5e5;
    box-sizing: border-box;
    position: relative;
}
.ov-day-slot.has-task { background: #f7f9fd; border-bottom: .4pt solid #d8d8d8; }
.ov-day-task {
    font-size: 8pt;
    margin: .8mm 1.5mm;
    border-left: 1.2mm solid #4b6cb7;
    padding-left: 1.2mm;
    line-height: 1.3;
}
.ov-day-task .t-name { font-weight: bold; color: #222; }
.ov-day-task .t-time { color: #888; font-size: 7.5pt; }


.ov-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: .5pt solid #c9c9c9; }
.ov-cal-cell {
    border: .4pt solid #e0e0e0;
    min-height: 16mm;
    padding: 1.2mm;
    font-size: 8pt;
    box-sizing: border-box;
    overflow: hidden;
}
.ov-cal-cell .d-num { font-weight: bold; color: #444; font-size: 8.5pt; }
.ov-cal-cell.inactive { background: #fafafa; }
.ov-cal-cell.today .d-num { color: #185FA5; }
.ov-cal-cell .t-item {
    font-size: 7pt;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .5mm;
}


#overviewZoomSelect { font-size: 13px; }


.ov-cell.ov-check {
    text-align: center;
    font-size: 12pt;
    color: #333;
}
.ov-cell.ov-check.done { color: #4CAF50; }


.ov-month-grid { display: grid; border: .5pt solid #c9c9c9; }
.ov-month-cell {
    border: .4pt solid #e0e0e0;
    padding: .8mm 1mm;
    font-size: 7pt;
    box-sizing: border-box;
    min-height: 7mm;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ov-month-cell.ov-month-head { background: #f4f4f4; font-weight: bold; font-size: 8pt; }
.ov-month-cell.ov-month-corner { font-size: 7.5pt; color: #555; }
.ov-month-cell.ov-month-task { justify-content: flex-start; gap: 1mm; padding: .3mm 1mm; font-weight: 500; }
.ov-month-task-color {
    width: 1.2mm; align-self: stretch;
    border-radius: 1px;
    flex-shrink: 0;
}
.ov-month-task-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7pt;
}
.ov-month-cell.ov-month-check { padding: 0; font-size: 8pt; color: #999; }
.ov-month-cell.ov-month-check.done { background: #e8f5e9; color: #2e7d32; font-weight: bold; }


.ov-month-cell.ov-month-check.na { position: relative; overflow: hidden; }
.ov-na-strike {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%; display: block;
    pointer-events: none;                 
}

.ov-month-cell.ov-month-add { padding: 3mm; background: #faf9f5; }
.ov-month-cell.ov-month-add button {
    padding: 2mm 8mm;
    border: .5pt dashed #b4b2a9;
    background: #fff;
    color: #5f5e5a;
    border-radius: 999px;
    cursor: pointer;
    font-size: 8pt;
}
.ov-month-cell.ov-month-add button:hover { background: #f0faf6; border-color: #5dcaa5; color: #0F6E56; }
.ov-month-remove {
    background: none; border: none; color: #999; cursor: pointer; font-size: 9pt; padding: 0 1mm;
}
.ov-month-remove:hover { color: #e74c3c; }


.ov-month-modal-list { padding: 8px 16px; max-height: 55vh; overflow-y: auto; }
.ov-month-modal-item {
    display: block;
    padding: 5px 0;
    border-bottom: .4pt solid #eee;
    font-size: 13px;
    cursor: pointer;
}
.ov-month-modal-item:last-child { border-bottom: none; }
.ov-month-modal-item input[type=checkbox] { margin-right: 6px; vertical-align: middle; }


.ov-month-cell.ov-month-cat {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: bold;
    font-size: 11pt;
    color: #fff;
    
    padding: 2mm 0;
    letter-spacing: 1pt;
}
.ov-month-cell.ov-month-task {
    justify-content: flex-start;
    gap: 1mm;
    padding: .3mm 1.5mm;
    font-weight: 500;
    
}


.ov-month-modal { z-index: 100000 !important; }


.ov-month-cell.ov-month-head { flex-direction: column; line-height: 1.35; }
.ov-month-cell.ov-month-desc {
    justify-content: flex-start;
    font-size: 7pt;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.ov-month-task-name,
.ov-month-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    line-height: 1.35;
}


.ov-month-modal-toolbar {
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555;
}
.ov-month-modal-toolbar label { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ov-month-modal-toolbar input[type=checkbox] { vertical-align: middle; }
.ov-month-modal-cat {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}
.ov-month-modal-dup { color: #f39c12; font-size: 11px; margin-left: 4px; }


.ov-month-task-name,
.ov-month-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-all !important;
    line-height: 1.35 !important;
}
.ov-month-task-name { flex: 1; }



.overview-sheet.portrait  { width: 210mm; min-height: 297mm; }
.overview-sheet.landscape { width: 297mm; min-height: 210mm; }


.ov-sec-wrap { margin-top: 6mm; }
.ov-sec-holder { width: 178mm; }
.ov-sec {
    border: .5pt solid #d8d8d8;
    border-radius: 2mm;
    padding: 3mm 4mm;
    margin-bottom: 3mm;
    background: #fcfcfb;
}
.ov-sec:last-child { margin-bottom: 0; }
.ov-sec-title {
    font-size: 9.5pt;
    font-weight: bold;
    color: #333;
    border-bottom: .4pt solid #e0e0e0;
    padding-bottom: 1.2mm;
    margin-bottom: 2mm;
}
.ov-sec-row {
    font-size: 8.5pt;
    color: #444;
    line-height: 1.6;
    display: flex;
    gap: 6mm;
    flex-wrap: wrap;
}
.ov-sec-cats { margin-top: 1mm; gap: 4mm; }
.ov-sec-line {
    border-bottom: .5pt solid #bbb;
    height: 5mm;
    margin-top: 2.5mm;
}
.ov-sec-sign {
    margin-top: 3mm;
    font-size: 8.5pt;
    color: #555;
}
.ov-sec-star { color: #BA7517; letter-spacing: 1.5mm; font-size: 10pt; }
.ov-sec-note { font-size: 7.5pt; color: #aaa; margin-top: 1mm; }


.ov-sheet-title-editable {
    cursor: text;
    border-bottom: .5pt dashed transparent;
    padding: 0 1mm;
    border-radius: 1mm;
    min-width: 2em;
}
.ov-sheet-title-editable:hover {
    border-bottom-color: #b4b2a9;
    background: #fafaf7;
}
.ov-sheet-title-editable[contenteditable="true"] {
    border-bottom-color: #185FA5;
    background: #E6F1FB;
    outline: none;
}


.ov-sec-blank {
    display: inline-block;
    border-bottom: .5pt solid #888;
    min-width: 12mm;
    height: 5mm;
    vertical-align: bottom;
}


.ov-sec-summary-head {
    font-size: 11pt;
    font-weight: bold;
    color: #222;
    margin-bottom: 2mm;
}
.ov-sec-summary-stars {
    font-size: 8.5pt;
    color: #444;
    line-height: 1.6;
    display: flex;
    gap: 3mm;
    flex-wrap: nowrap;
    margin-top: 1mm;
    margin-bottom: 1mm;
}
.ov-sec-summary-stars > span {
    white-space: nowrap;
    flex-shrink: 0;
}


.ov-month-remove {
    background: none; border: none; color: #bbb; cursor: pointer; font-size: 10pt;
    padding: 0 1mm; flex-shrink: 0; line-height: 1; margin-left: auto;
}
.ov-month-remove:hover { color: #e74c3c; }
.ov-month-task { flex-wrap: nowrap; }
.ov-cell-name { display: flex; align-items: center; gap: 2px; }
.ov-cell-name .ov-month-remove { margin-left: 0; font-size: 9pt; }



#moneyBookPage { overflow-y: auto; background: #f5f6f8; }
#mbContent { padding-bottom: 76px; }


.mb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: 12px; padding: 11px 18px; font-size: 14px; cursor: pointer;
    transition: transform .1s, opacity .15s; font-family: inherit;
}
.mb-btn:active { transform: scale(.96); }
.mb-btn-primary { background: #0e9f6e; color: #fff; }
.mb-btn-primary:hover { opacity: .9; }
.mb-btn-info { background: #185fa5; color: #fff; }
.mb-btn-warn { background: #d97706; color: #fff; }
.mb-btn-danger { background: #e5484d; color: #fff; }
.mb-btn-ghost { background: #fff; color: #3a3f45; border: 1px solid #e4e7eb; }
.mb-btn-mini { padding: 6px 12px; font-size: 12px; border-radius: 9px; }
.mb-btn-parent { background: #fff; color: #3a3f45; border: 1px solid #e4e7eb; padding: 7px 13px; font-size: 12px; border-radius: 10px; }
.mb-full { width: 100%; }


.mb-hero {
    background: linear-gradient(135deg, #0b8a60, #10b981 60%, #34d399);
    border-radius: 20px; padding: 20px 22px 18px; color: #fff; margin: 12px 12px 0;
    box-shadow: 0 8px 24px rgba(11,138,96,.28); position: relative; overflow: hidden;
}
.mb-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.08); }
.mb-hero-label { font-size: 12px; opacity: .85; }
.mb-hero-amount { font-size: 34px; font-weight: 700; letter-spacing: .5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mb-hero-stats { display: flex; gap: 12px; margin-top: 16px; position: relative; z-index: 1; }
.mb-hero-stat { flex: 1; background: rgba(255,255,255,.16); border-radius: 12px; padding: 9px 10px; }
.mb-hero-stat .mb-hs-label { font-size: 11px; opacity: .8; }
.mb-hero-stat .mb-hs-val { font-size: 14px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }


.mb-wallet-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 12px 12px 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.mb-wallet-scroll::-webkit-scrollbar { display: none; }

.mb-wallet-card {
    flex: 0 0 152px; scroll-snap-align: start; background: #fff; border-radius: 14px; padding: 9px 11px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05); cursor: pointer; display: flex; align-items: center; gap: 9px;
    position: relative; height: 64px; box-sizing: border-box;
}
.mb-wallet-card.mb-goal-card { border-top: 3px solid #7c3aed; }
.mb-wallet-icon {
    width: 34px; height: 34px; border-radius: 10px; background: var(--mbc-50, #e8f5ef);
    display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--mbc, #0e9f6e); flex-shrink: 0;
}
.mb-wallet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-wallet-name { font-size: 11.5px; color: #8a8f98; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-wallet-bal { font-size: 15px; font-weight: 500; color: #23272d; font-variant-numeric: tabular-nums; }
.mb-wallet-bal.mb-total { color: #0e9f6e; }
.mb-neg { color: #e5484d !important; }
.mb-wallet-warn { font-size: 10px; color: #e5484d; background: #fdecec; border-radius: 5px; padding: 1px 5px; display: inline-block; }

.mb-wallet-card .mb-goal-name { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; font-size: 11.5px; color: #8a8f98; font-weight: 400; }
.mb-wallet-card .mb-goal-amt { font-size: 12.5px; font-weight: 500; color: #7c3aed; flex-shrink: 0; }
.mb-wallet-card .mb-goal-bar { height: 3px; background: #f3e8ff; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.mb-wallet-card .mb-goal-bar i { display: block; height: 100%; background: #7c3aed; border-radius: 2px; transition: width .4s; }
.mb-wallet-card .mb-goal-pct { font-size: 10px; color: #7c3aed; }
.mb-total-card { background: linear-gradient(135deg, #0e9f6e, #34d399); border-top: none; }
.mb-total-card .mb-wallet-name, .mb-total-card .mb-wallet-bal { color: #fff; }


.mb-loan-banner {
    background: #fff7e6; border: 1px solid #f5d78e; border-radius: 12px; padding: 9px 14px;
    margin: 8px 12px 4px; font-size: 12px; color: #8a6d1a; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.mb-loan-banner span { display: inline-flex; align-items: center; gap: 5px; }
.mb-loan-banner em { color: #e5484d; font-style: normal; font-weight: 600; }


.mb-section-title { font-size: 13px; color: #8a8f98; padding: 14px 14px 6px; display: flex; justify-content: space-between; align-items: center; }
.mb-record-list { background: #fff; border-radius: 16px; margin: 0 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); overflow: hidden; }
.mb-day-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 4px; color: #9aa0a8; font-size: 11px; }
.mb-day-tot { color: #b8bcc4; }
.mb-record-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; transition: background .12s; }
.mb-record-item:hover { background: #f8fafb; }
.mb-record-item + .mb-record-item { border-top: 1px solid #f2f3f5; }
.mb-rec-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: var(--mbc-50, #f0f1f3); color: var(--mbc, #5b6068); }
.mb-rec-main { flex: 1; min-width: 0; }
.mb-rec-name { font-size: 14px; color: #23272d; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mb-rec-desc { font-size: 11px; color: #9aa0a8; margin-top: 2px; }
.mb-rec-amount { font-size: 15px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mb-income { color: #e5484d; }
.mb-expense { color: #0e9f6e; }
.mb-transfer { color: #185fa5; }
.mb-person-tag { background: #eaf2fb; color: #185fa5; border-radius: 5px; padding: 1px 6px; font-size: 10px; }
.mb-note { color: #b8bcc4; font-size: 11px; }
.mb-empty { text-align: center; color: #9aa0a8; padding: 44px 12px; font-size: 13px; }
.mb-empty i { font-size: 36px; display: block; margin-bottom: 10px; color: #d3d6db; }


.mb-filter-bar { display: flex; gap: 8px; padding: 10px 12px; }
.mb-filter-bar select {
    flex: 1; border: 1px solid #e4e7eb; border-radius: 10px; padding: 8px 10px; font-size: 12px;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%239aa0a8" fill="none" stroke-width="1.5"/></svg>') no-repeat right 10px center;
    background-size: 10px 6px; appearance: none; -webkit-appearance: none; color: #3a3f45; padding-right: 26px;
}


.mb-range-list { background: #fff; border-radius: 16px; margin: 0 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); overflow: hidden; }
.mb-range-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; }
.mb-range-item + .mb-range-item { border-top: 1px solid #f2f3f5; }
.mb-range-item:active { background: #fafafa; }
.mb-range-icon {
    width: 44px; height: 44px; border-radius: 12px; background: #e8f5ef; color: #0e9f6e;
    display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.mb-range-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-range-title { font-size: 14px; font-weight: 600; color: #23272d; }
.mb-range-sub { font-size: 11.5px; color: #9aa0a8; }
.mb-range-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12.5px; }
.mb-range-exp { color: #27ae60; font-weight: 500; }
.mb-range-inc { color: #e74c3c; font-weight: 500; }
.mb-range-arrow { color: #d3d6db; font-size: 13px; }


.mb-list-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.mb-list-back { border: none; background: none; font-size: 16px; color: #3a3f45; cursor: pointer; padding: 4px 6px; }
.mb-list-title { flex: 1; font-size: 15px; font-weight: 600; color: #23272d; }
.mb-range-chips { display: flex; gap: 6px; padding: 6px 12px 2px; overflow-x: auto; }
.mb-range-chips::-webkit-scrollbar { display: none; }
.mb-range-chip {
    flex-shrink: 0; border: 1px solid #e4e7eb; background: #fff; border-radius: 16px; padding: 5px 13px;
    font-size: 12px; color: #5b6068; cursor: pointer; font-family: inherit;
}
.mb-range-chip.active { border-color: #0e9f6e; background: #e8f5ef; color: #0e9f6e; font-weight: 600; }


.mb-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f8faf9; cursor: pointer; }
.mb-group-ic { font-size: 11px; color: #9aa0a8; width: 12px; }
.mb-group-name { font-size: 13px; font-weight: 600; color: #3a3f45; }
.mb-group-tot { margin-left: auto; font-size: 12px; color: #9aa0a8; }


.mb-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 14px 12px; }
.mb-page-info { font-size: 12px; color: #9aa0a8; margin-left: 6px; }


.mb-tabbar {
    position: sticky; bottom: 0; display: flex; align-items: flex-end; background: rgba(255,255,255,.96);
    border-top: 1px solid #eef0f3; padding: 6px 4px 8px; backdrop-filter: blur(8px); z-index: 50;
}
.mb-tab-item { flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #8a8f98; cursor: pointer; padding: 4px 0; font-family: inherit; }
.mb-tab-item.active { color: #0e9f6e; font-weight: 600; }
.mb-tab-item i { font-size: 17px; }
.mb-tab-add {
    flex: 1; border: none; background: none; display: flex; justify-content: center; cursor: pointer; padding: 0;
}

.mb-tab-add span {
    min-width: 66px; height: 34px; border-radius: 18px; background: #0e9f6e; color: #fff;
    font-size: 14px; font-weight: 500; letter-spacing: 1px;
    display: flex; align-items: center; justify-content: center; margin-top: -8px;
    box-shadow: 0 4px 12px rgba(11,138,96,.35); transition: transform .12s;
}
.mb-tab-add:active span { transform: scale(.94); }
.mb-vip-tag { color: #d97706; font-style: normal; font-size: 9px; }


.mb-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 3000; display: none; align-items: flex-end; justify-content: center; }
.mb-overlay-center { align-items: center; padding: 20px; }
.mb-sheet {
    background: #f5f6f8; border-radius: 22px 22px 0 0; width: 100%; max-width: 480px; max-height: 92vh;
    overflow-y: auto; box-shadow: 0 -8px 32px rgba(15,23,42,.16); animation: mbSheetUp .22s ease;
}
@keyframes mbSheetUp { from { transform: translateY(40px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
.mb-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 0; }
.mb-sheet-head h3 { font-size: 15px; color: #23272d; margin: 0; font-weight: 600; }
.mb-sheet-close { border: none; background: #eef0f3; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; color: #8a8f98; cursor: pointer; }
.mb-modal {
    background: #fff; border-radius: 16px; width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
    box-shadow: 0 10px 40px rgba(15,23,42,.2); animation: mbModalIn .18s ease;
}
@keyframes mbModalIn { from { transform: scale(.96); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.mb-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 0; }
.mb-modal-header h3 { font-size: 15px; color: #23272d; margin: 0; font-weight: 600; }
.mb-modal-close { border: none; background: #eef0f3; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; color: #8a8f98; cursor: pointer; }
.mb-modal-body { padding: 4px 18px 18px; }
.mb-modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 4px 18px 18px; }


.mb-type-switch { display: flex; background: #eef0f3; border-radius: 12px; padding: 4px; gap: 4px; }
.mb-type-btn { flex: 1; border: none; border-radius: 9px; padding: 9px; font-size: 14px; background: transparent; color: #8a8f98; cursor: pointer; font-family: inherit; }
.mb-type-btn.active { background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.08); font-weight: 600; }
.mb-type-income.active { color: #e5484d; }
.mb-type-expense.active { color: #0e9f6e; }
.mb-amount-display { text-align: center; font-size: 40px; font-weight: 700; color: #23272d; padding: 14px 0 6px; font-variant-numeric: tabular-nums; }
.mb-amount-display.mb-amt-income { color: #e5484d; }
.mb-amount-display.mb-amt-expense { color: #0e9f6e; }
.mb-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 14px 6px; max-height: 142px; overflow-y: auto; }
.mb-cat-item { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; cursor: pointer; padding: 2px 0; font-family: inherit; }
.mb-cat-item span {
    width: 40px; height: 40px; border-radius: 50%; background: #f0f1f3; display: flex; align-items: center;
    justify-content: center; font-size: 17px; transition: transform .12s; border: 2px solid transparent;
}
.mb-cat-item b { font-size: 10px; line-height: 1.3; color: #5b6068; font-weight: 400; }
.mb-cat-item.active span { border-color: #0e9f6e; background: #e8f5ef; transform: scale(1.06); }
.mb-cat-item.active b { color: #0e9f6e; font-weight: 600; }
.mb-quick-chips { display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; }
.mb-quick-chips::-webkit-scrollbar { display: none; }
.mb-quick-chip { flex-shrink: 0; border: 1px solid #e4e7eb; background: #fff; border-radius: 16px; padding: 5px 13px; font-size: 12px; color: #3a3f45; cursor: pointer; font-family: inherit; }
.mb-quick-chip:hover { border-color: #0e9f6e; color: #0e9f6e; }
.mb-meta-row { display: flex; gap: 8px; padding: 6px 14px; flex-wrap: wrap; }
.mb-meta-chip {
    flex: 1; min-width: 92px; display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e4e7eb;
    border-radius: 10px; padding: 8px 11px; font-size: 12px; color: #5b6068; cursor: pointer; font-family: inherit;
}
.mb-meta-chip:hover { border-color: #0e9f6e; }

.mb-date-chip {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 38px;
    line-height: normal;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
}
.mb-date-chip::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .6;
}
.mb-meta-chip i { color: #9aa0a8; font-size: 12px; }
.mb-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 8px 14px 2px; }
.mb-key { border: none; background: #fff; border-radius: 11px; padding: 12px 0; font-size: 20px; font-weight: 500; color: #23272d; cursor: pointer; font-family: inherit; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.mb-key:active { background: #eef0f3; }
.mb-key-func { background: #eef0f3; color: #8a8f98; font-size: 16px; }
.mb-save-btn { margin: 10px 14px 14px; background: #0e9f6e; color: #fff; border: none; border-radius: 12px; padding: 13px 0; font-size: 15px; font-weight: 600; cursor: pointer; width: calc(100% - 28px); font-family: inherit; }
.mb-save-btn:active { transform: scale(.98); }


.mb-recur-row { padding: 4px 14px 0; }
.mb-recur-row .mb-meta-chip { flex: 0 0 auto; min-width: 0; }
.mb-meta-chip.mb-chip-on { border-color: #0e9f6e; background: #e8f5ef; color: #0e9f6e; font-weight: 600; }
.mb-meta-chip.mb-chip-on i { color: #0e9f6e; }
.mb-weekday-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-wd-chip { border: 1px solid #e4e7eb; background: #fff; border-radius: 16px; padding: 6px 13px; font-size: 12px; color: #5b6068; cursor: pointer; font-family: inherit; }
.mb-wd-chip.on { border-color: #0e9f6e; background: #e8f5ef; color: #0e9f6e; font-weight: 600; }
.mb-manage-main { flex: 1; min-width: 0; }
.mb-manage-sub { display: block; font-size: 11.5px; color: #9aa0a8; margin-top: 2px; }


.mb-emoji-picker {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background: #fff; border: 1px solid #e4e7eb;
    border-radius: 12px; padding: 8px; margin: 4px 0 0; max-height: 190px; overflow-y: auto; box-shadow: 0 4px 14px rgba(15,23,42,.12); z-index: 30;
}
.mb-emoji-picker button { border: none; background: none; font-size: 19px; padding: 4px 0; border-radius: 8px; cursor: pointer; line-height: 1.2; }
.mb-emoji-picker button:hover { background: #eef7f2; transform: scale(1.15); }
.mb-emoji-input { cursor: pointer; }


.mb-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 6px; }
.mb-form label { font-size: 12px; color: #8a8f98; margin-top: 4px; }
.mb-form input[type="text"], .mb-form input[type="number"], .mb-form input[type="date"], .mb-form select {
    border: 1px solid #e4e7eb; border-radius: 11px; padding: 10px 12px; font-size: 14px; background: #fff; color: #23272d; width: 100%; box-sizing: border-box; font-family: inherit;
}
.mb-form input:focus, .mb-form select:focus { outline: none; border-color: #0e9f6e; box-shadow: 0 0 0 3px rgba(14,159,110,.12); }
.mb-tip { font-size: 12px; color: #8a8f98; background: #eef0f3; border-radius: 10px; padding: 8px 12px; margin: 8px 14px; line-height: 1.6; }


.mb-stats-hero { background: #fff; border-radius: 16px; margin: 12px 12px 0; padding: 16px; box-shadow: 0 2px 10px rgba(15,23,42,.05); display: flex; align-items: center; gap: 16px; }
.mb-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.mb-ring svg { transform: rotate(-90deg); }
.mb-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mb-ring-center b { font-size: 17px; font-weight: 700; color: #23272d; }
.mb-ring-center span { font-size: 10px; color: #9aa0a8; }
.mb-stats-hero-info { flex: 1; }
.mb-stats-hero-info .mb-sh-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.mb-sh-income { color: #e5484d; font-weight: 600; }
.mb-sh-expense { color: #0e9f6e; font-weight: 600; }
.mb-sh-bal { color: #23272d; font-weight: 700; }
.mb-chart-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
.mb-cat-rank { background: #fff; border-radius: 16px; margin: 10px 12px; padding: 6px 14px; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
.mb-rank-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.mb-rank-item + .mb-rank-item { border-top: 1px solid #f2f3f5; }
.mb-rank-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #f0f1f3; }
.mb-rank-main { flex: 1; min-width: 0; }
.mb-rank-name { font-size: 13px; color: #23272d; }
.mb-rank-bar { height: 5px; background: #eef0f3; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.mb-rank-bar i { display: block; height: 100%; background: #0e9f6e; border-radius: 3px; }
.mb-rank-amt { font-size: 13px; font-weight: 600; color: #23272d; font-variant-numeric: tabular-nums; }
.mb-rank-pct { font-size: 11px; color: #9aa0a8; width: 40px; text-align: right; }


.mb-goal-item { background: #fff; border-radius: 16px; padding: 15px; margin: 8px 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.mb-goal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-goal-icon { width: 36px; height: 36px; border-radius: 11px; background: #f3e8ff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mb-goal-name { font-size: 14px; color: #23272d; flex: 1; font-weight: 600; }
.mb-goal-done { color: #d97706; font-style: normal; font-size: 11px; }
.mb-goal-amount { font-size: 13px; color: #8a8f98; font-variant-numeric: tabular-nums; }
.mb-goal-bar { height: 7px; background: #eef0f3; border-radius: 4px; overflow: hidden; margin: 9px 0 2px; }
.mb-goal-bar i { display: block; height: 100%; background: #7c3aed; border-radius: 4px; transition: width .4s; }
.mb-goal-pct { font-size: 11px; color: #7c3aed; }
.mb-goal-ops { display: flex; gap: 8px; margin-top: 10px; }
.mb-page-title { font-size: 17px; color: #23272d; margin: 14px 14px 4px; display: flex; align-items: center; gap: 8px; font-weight: 600; }


.mb-parent-tabs { display: flex; gap: 6px; padding: 12px 12px 4px; overflow-x: auto; }
.mb-parent-tabs::-webkit-scrollbar { display: none; }
.mb-parent-tab { border: none; background: #fff; border-radius: 10px; padding: 8px 15px; font-size: 13px; color: #8a8f98; cursor: pointer; box-shadow: 0 1px 3px rgba(15,23,42,.05); white-space: nowrap; font-family: inherit; }
.mb-parent-tab.active { background: #0e9f6e; color: #fff; font-weight: 600; }
.mb-parent-toolbar { padding: 10px 12px 4px; }
.mb-parent-subtitle { font-size: 12px; color: #9aa0a8; padding: 12px 14px 4px; }
.mb-manage-list { background: #fff; border-radius: 16px; margin: 6px 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); overflow: hidden; }
.mb-manage-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; flex-wrap: wrap; }
.mb-manage-row + .mb-manage-row { border-top: 1px solid #f2f3f5; }
.mb-manage-avatar { width: 30px; height: 30px; border-radius: 9px; background: #f0f1f3; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.mb-manage-name { flex: 1; font-size: 13px; color: #23272d; min-width: 70px; }
.mb-manage-rel { font-size: 12px; color: #8a8f98; }
.mb-sys-tag { color: #b8bcc4; font-style: normal; font-size: 10px; }
.mb-overdue { border-left: 3px solid #e5484d; }

.mb-manage-row-click { cursor: pointer; transition: background .12s; }
.mb-manage-row-click:hover { background: #f7f9f8; }
.mb-manage-arrow { color: #c8ccd2; font-size: 12px; flex-shrink: 0; }
.mb-parent-op { display: flex; gap: 6px; }


.mb-picker-body { padding: 6px 18px 18px; }
.mb-picker-self { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed #c8ccd2; border-radius: 11px; cursor: pointer; margin: 10px 0; font-size: 14px; color: #23272d; }
.mb-picker-self:hover { border-color: #0e9f6e; color: #0e9f6e; }
.mb-picker-section-title { font-size: 12px; color: #9aa0a8; margin: 12px 0 8px; }
.mb-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.mb-picker-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #f5f6f8; border-radius: 12px; padding: 10px 4px; cursor: pointer; font-size: 12px; color: #23272d; border: none; font-family: inherit; }
.mb-picker-item:hover { background: #e8f5ef; color: #0e9f6e; }
.mb-picker-avatar { font-size: 22px; }
.mb-picker-add { margin-top: 12px; text-align: center; border: 1px dashed #0e9f6e; color: #0e9f6e; border-radius: 11px; padding: 10px; cursor: pointer; font-size: 13px; }
.mb-rel-group { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-rel-btn { border: 1px solid #e4e7eb; background: #fff; border-radius: 9px; padding: 8px 12px; cursor: pointer; font-size: 12px; color: #3a3f45; font-family: inherit; }
.mb-rel-btn.active { border-color: #0e9f6e; background: #e8f5ef; color: #0e9f6e; }
.mb-avatar-group { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-avatar-opt { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #e4e7eb; border-radius: 9px; cursor: pointer; font-size: 17px; }
.mb-avatar-opt.active { border-color: #0e9f6e; background: #e8f5ef; }
.mb-person-row { display: flex; align-items: center; gap: 10px; }
.mb-person-current { flex: 1; font-size: 13px; color: #23272d; background: #f5f6f8; border-radius: 10px; padding: 9px 12px; }


.mb-quick-actions { display: flex; gap: 10px; padding: 12px 12px 0; }
.mb-quick-act { flex: 1; background: #fff; border: 1px solid #e4e7eb; color: #3a3f45; box-shadow: 0 1px 4px rgba(15,23,42,.04); }
.mb-quick-act i { color: #0e9f6e; }


.mb-type-switch-4 .mb-type-btn { font-size: 13px; padding: 9px 2px; }

#mbDynArea { min-height: 190px; }
#mbDynArea::-webkit-scrollbar { display: none; }
.mb-dyn-row { display: flex; align-items: center; gap: 8px; padding: 4px 14px; }
.mb-dyn-row .mb-acc-select { flex: 1; min-width: 0; }
.mb-dyn-label { font-size: 11px; color: #9aa0a8; flex-shrink: 0; white-space: nowrap; }

.mb-date-row .mb-acc-select { flex: 1; min-width: 0; }
.mb-dyn-hint {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    margin: 6px 14px 4px; border-radius: 10px; background: #f7f9f8; color: #b8bcc4; font-size: 10.5px;
}
.mb-dyn-hint i { font-size: 10px; }

.mb-type-switch-ln { flex: 1; display: flex; gap: 4px; padding: 4px; }
.mb-type-switch-ln .mb-type-btn { flex: 1; padding: 7px 0; font-size: 12px; white-space: nowrap; }
.mb-dyn-hidden { display: none !important; }
.mb-type-transfer.active, .mb-type-loan.active { color: #185fa5; }
.mb-transfer-row { align-items: center; }
.mb-acc-select {
    flex: 1; min-width: 0; border: 1px solid #e4e7eb; border-radius: 11px; padding: 9px 10px;
    font-size: 13px; background: #fff; color: #23272d; font-family: inherit; appearance: none; -webkit-appearance: none;
}
.mb-arrow { color: #9aa0a8; font-size: 16px; flex-shrink: 0; }
.mb-person-chip { min-width: 0; flex: 1.6; }


.mb-note-input {
    width: calc(100% - 28px); margin: 2px 14px 6px; box-sizing: border-box;
    border: 1px solid #e4e7eb; border-radius: 11px; padding: 10px 12px;
    font-size: 13px; background: #fff; color: #23272d; font-family: inherit;
}
.mb-note-input:focus { outline: none; border-color: #0e9f6e; box-shadow: 0 0 0 3px rgba(14,159,110,.12); }


.mb-sum-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 12px 12px 2px;
}
.mb-sum-card {
    background: #fff; border-radius: 14px; padding: 12px 14px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05); display: flex; flex-direction: column; gap: 4px;
}
.mb-sum-label { font-size: 12px; color: #8a8f98; }
.mb-sum-income { font-size: 16px; font-weight: 700; color: #e5484d; font-variant-numeric: tabular-nums; }
.mb-sum-expense { font-size: 16px; font-weight: 700; color: #0e9f6e; font-variant-numeric: tabular-nums; }
.mb-sum-budget-val { font-size: 14px; font-weight: 700; color: #d97706; font-variant-numeric: tabular-nums; }
.mb-budget-bar { height: 5px; background: #eef0f3; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.mb-budget-bar i { display: block; height: 100%; background: #f39c12; border-radius: 3px; transition: width .4s; }

.mb-sum-bal-card, .mb-sum-assets-card { grid-column: span 1; }
.mb-sum-bal { font-size: 16px; font-weight: 700; color: #23272d; font-variant-numeric: tabular-nums; }
.mb-sum-assets { font-size: 16px; font-weight: 700; color: #0e9f6e; font-variant-numeric: tabular-nums; }
.mb-sum-bal-card, .mb-sum-assets-card { position: relative; }
.mb-sum-bal-card::before, .mb-sum-assets-card::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; }
.mb-sum-bal-card::before { background: #0e9f6e; }
.mb-sum-assets-card::before { background: #7c3aed; }


.mb-hero-card {
    background: #fff; border-radius: 16px; margin: 12px 12px 2px; padding: 13px 14px 11px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05); display: flex; gap: 12px; align-items: stretch;
}
.mb-hero-grid { flex: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: space-between; min-width: 0; }
.mb-hero-cell { background: #f8faf9; border-radius: 12px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; }
.mb-hero-cell.mb-hero-bal { background: #e8f5ef; }
.mb-hero-label { font-size: 10.5px; color: #9aa0a8; }
.mb-hero-cell.mb-hero-bal .mb-hero-label { color: #0f6e56; }
.mb-hero-val { font-size: 15.5px; font-weight: 500; color: #23272d; font-variant-numeric: tabular-nums; }
.mb-hero-income { color: #e5484d; }
.mb-hero-expense { color: #0e9f6e; }
.mb-hero-cell.mb-hero-bal .mb-hero-val { color: #0e9f6e; }
.mb-hero-ring {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-left: 1px solid #f2f3f5; padding-left: 10px; min-width: 0;
}
.mb-hero-ring svg { flex-shrink: 0; }
.mb-hero-ring-sub { font-size: 10.5px; color: #9aa0a8; }


.mb-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }


.mb-refund-note {
    background: #f5f6f8; border-radius: 10px; padding: 10px 12px;
    font-size: 13px; color: #3a3f45; line-height: 1.9;
}


body.sb-mode .container { padding-left: 262px; padding-top: 117px; }


body.sb-mode .container > header {
    position: fixed;
    top: 0;
    left: 20px;
    right: 20px;
    width: auto;
    
    z-index: 1050;
}

body.sb-mode > .stats-page { margin-left: 262px; }
body.sb-mode .container > .today-stats {
    position: fixed;
    
    left: 20px;
    
    top: 117px;
    bottom: 20px;
    
    width: 232px;
    margin: 0;
    padding: 14px 10px;
    z-index: 45;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    overflow-y: auto;
    background: var(--card-bg, #fff);
    box-shadow: 2px 0 12px rgba(15, 23, 42, .08);
}

body.sb-mode .container > .today-stats .stat-card {
    min-height: 0;
    padding: 8px 10px;
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
body.sb-mode .container > .today-stats .stat-card p { margin: 0; flex: 1; font-size: 0.75rem; line-height: 1.2; }
body.sb-mode .container > .today-stats .stat-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; }

body.sb-mode .container > .today-stats .stat-card-info { width: calc(50% - 4px); }
body.sb-mode .container > .today-stats .stat-card-info h3 { font-size: 1rem; }

.stat-card-info p br { display: none; }
body.sb-mode .container > .today-stats .stat-card-info p { font-size: 0.62rem; line-height: 1.1; white-space: nowrap; }
body.sb-mode .container > .today-stats .stat-card-info p br { display: inline; }


@media (min-width: 1024px) {
    
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) {
        height: 41px;
        padding: 0 8px;
        gap: 9px;
        
        margin: 0 0 -6px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        transition: background .16s, border-color .16s, box-shadow .16s;
    }
    
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info)::after { display: none; }

    
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) h3 {
        order: -1;
        flex: 0 0 auto;
        position: relative;
        width: 27px;
        height: 27px;
        margin: 0;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12.5px;
        line-height: 1;
        overflow: hidden;
        transition: transform .16s;
    }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) h3::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--card-accent, var(--primary, #4b6cb7));
        opacity: .13;
    }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) h3 i {
        position: relative;
        z-index: 1;
        font-size: 12.5px;
        color: var(--card-accent, var(--primary, #4b6cb7));
    }

    
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) p {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 12.5px;
        line-height: 1.3;
        color: #3a4453;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info):hover { background: #f6f9fd; }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info):hover h3 { transform: scale(1.07); }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info).sb-active {
        background: #fff;
        border-color: rgba(75, 108, 183, .38);
        box-shadow: 0 3px 10px rgba(75, 108, 183, .16);
    }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info).sb-active p {
        color: #2f4d86;
        font-weight: 600;
    }

    
    body.sb-mode .container > .today-stats #pointsCard p {
        order: -1;
        display: flex;
        align-items: center;
        gap: 9px;
    }
    body.sb-mode .container > .today-stats #pointsCard p::before {
        content: "\f06b";                       
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        flex: 0 0 auto;
        width: 27px;
        height: 27px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12.5px;
        line-height: 1;
        color: #3498db;
        background: rgba(52, 152, 219, .13);
    }
    body.sb-mode .container > .today-stats #pointsCard h3 {
        order: 0;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        margin: 0 0 0 auto;
        padding: 1px 8px;
        border-radius: 999px;
        background: rgba(52, 152, 219, .13);
        color: #2b7fc4;
        font-size: 11.5px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        overflow: visible;
    }
    body.sb-mode .container > .today-stats #pointsCard h3::before { display: none; }

    
    body.sb-mode .container > .today-stats > #moreCardsCard,
    body.sb-mode .container > .today-stats > .card-fold-bar { width: 100%; }
    body.sb-mode .container > .today-stats > .card-fold-bar { margin: 6px 0 0; }
    body.sb-mode .container > .today-stats .card-fold-btn { font-size: 11px; }
}

@media (max-width: 1023px) {
    body.sb-mode .container { padding-left: 0 !important; padding-top: 0 !important; }
    body.sb-mode .container > header { position: relative; left: auto; right: auto; top: auto; width: auto; z-index: auto; }
    body.sb-mode > .stats-page { margin-left: 0 !important; }
    body.sb-mode .container > .today-stats {
        position: static;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        margin: 5px 0;
        padding: 5px 0;
        display: grid;
        grid-template-columns: repeat(var(--card-columns, 8), 1fr) !important;
        overflow: visible;
        box-shadow: none;
    }
    body.sb-mode .container > .today-stats .stat-card,
    body.sb-mode .container > .today-stats .stat-card-info {
        width: auto;
        flex: 1 1 0%;
        display: block;
        text-align: center;
    }
    body.sb-mode .container > .today-stats .stat-card p,
    body.sb-mode .container > .today-stats .stat-card h3 { margin: 0 0 5px; }
}


.tt-slot-no { display: block; font-size: 12px; font-weight: 700; color: #3a3f45; }
.tt-slot-range { display: block; font-size: 10px; color: #9aa0a8; font-weight: 400; margin-top: 2px; }
.tt-add-cell {
    
    flex: 1; min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center;
    border: 1px dashed #c8ccd2; border-radius: 8px; color: #c8ccd2; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.tt-add-cell:hover { border-color: var(--primary, #4b6cb7); color: var(--primary, #4b6cb7); background: rgba(75, 108, 183, .05); }
.tt-add-cell i { font-size: 16px; }

.tt-pick-groups { display: flex; flex-direction: column; gap: 14px; max-height: 56vh; overflow-y: auto; }
.tt-pick-group-hd {
    display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
    font-size: 12px; font-weight: 700; color: #4a5361;
}
.tt-pick-group-hd em { font-style: normal; font-weight: 600; color: #9aa0a8; }
.tt-pick-group-bar { flex: 1; height: 1px; background: #eef1f6; }
.tt-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tt-pick-item {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 9px 10px; border: 1px solid #e4e7eb; border-radius: 10px;
    cursor: pointer; transition: background .12s, border-color .12s;
}
.tt-pick-item:hover { background: #f5f8ff; border-color: var(--primary, #4b6cb7); }

.tt-pick-av {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; color: #fff;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tt-pick-tx { flex: 1 1 auto; min-width: 0; }
.tt-pick-name {
    display: block; font-size: 13.5px; font-weight: 600; color: #23272d;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt-pick-meta {
    display: block; font-size: 11px; color: #9aa0a8;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt-pick-tip { margin: 10px 0 0; font-size: 12px; color: #9aa0a8; text-align: center; }

.tt-pick-tip-lead { margin: 0 0 12px; }
.tt-pick-tip b { color: #4b6cb7; }

@media (max-width: 640px) {
    .tt-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



.tt-se-sum {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 0 0 10px; padding: 9px 13px; background: #f7f9fc; border-radius: 9px;
    font-size: 0.75rem; color: #7a8697;
}
.tt-se-sum i { font-style: normal; margin-left: auto; color: #4b6cb7; font-weight: 600; }


.tt-se-chips { display: flex; gap: 6px; }
.tt-se-chip { position: relative; display: block; flex: 1 1 0; min-width: 0; margin: 0; cursor: pointer; user-select: none; }
.tt-se-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.tt-se-chip span {
    display: block; width: 100%; padding: 7px 0; text-align: center;
    border: 1px solid #e3e8f0; border-radius: 8px; background: #fff;
    font-size: 0.78rem; font-weight: 600; color: #64708a;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.tt-se-chip input:checked + span { background: var(--primary, #4b6cb7); border-color: var(--primary, #4b6cb7); color: #fff; }
.tt-se-chip input:focus-visible + span { outline: 2px solid var(--primary, #4b6cb7); outline-offset: 1px; }


.tt-se-pace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tt-se-pace-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #4a5361; font-weight: 600; }
.tt-se-pace-num {
    width: 56px; flex: 0 0 56px; padding: 6px 8px; text-align: center;
    border: 1px solid #dfe4ec; border-radius: 7px; background: #fff;
    font-size: 0.78rem; color: #3c4658; font-family: inherit;
}
.tt-se-pace-num:focus { outline: none; border-color: var(--primary, #4b6cb7); }

.tt-se-pace-hint { margin: 8px 0 0; font-size: 0.72rem; line-height: 1.6; }
.tt-se-pace-hint.muted { color: #9aa0a8; }
.tt-se-pace-hint.ok { color: #2f7d43; }
.tt-se-pace-hint.warn { color: #b06d00; }
.tt-se-pace-hint.bad { color: #d93a3a; font-weight: 600; }

.tt-slot-editor-row.tt-se-conflict { background: #fdf3f3; box-shadow: inset 3px 0 0 #e5484d; }
.tt-slot-editor-row.tt-se-conflict .tt-se-start,
.tt-slot-editor-row.tt-se-conflict .tt-se-end { border-color: #e5484d; background: #fff8f8; }



.tt-se-thead {
    display: flex; align-items: center; gap: 6px; margin: 0 0 7px; padding: 0 0 6px;
    border-bottom: 1px solid #f0f3f8; font-size: 0.66rem; color: #a8b1c0;
}
.tt-th-idx { flex: 0 0 auto; width: 22px; }
.tt-th-name { flex: 0 0 96px; width: 96px; }
.tt-th-time { width: 82px; flex: 0 0 82px; text-align: center; }
.tt-th-dash { flex: 0 0 auto; width: 9px; }
.tt-th-dur { flex: 0 0 34px; text-align: right; }
.tt-th-shared { flex: 0 0 48px; text-align: center; }
.tt-th-del { flex: 0 0 auto; width: 28px; }


.tt-slot-editor-row { display: block; padding: 6px 12px; }
.tt-slot-editor-row + .tt-slot-editor-row { border-top: 1px solid #f0f3f8; }
.tt-se-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tt-se-times { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tt-se-idx {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
    background: #eef2fa; color: #7a8697; font-size: 0.66rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tt-se-idx.pub { background: #e8f5ee; color: #2f7d43; }


.tt-se-label {
    width: 96px; flex: 0 0 96px; min-width: 0; padding: 6px 9px;
    border: 1px solid #dfe4ec; border-radius: 7px;
    font-size: 0.78rem; color: #3c4658; background: #fff; font-family: inherit;
}
.tt-se-label.pub { border-color: #bfe0cb; background: #f6fbf7; }

.tt-se-start, .tt-se-end {
    width: 82px; flex: 0 0 82px; padding: 6px 6px;
    border: 1px solid #dfe4ec; border-radius: 7px;
    font-size: 0.78rem; color: #3c4658; background: #fff; font-family: inherit; text-align: center;
}
.tt-se-dash { flex: 0 0 auto; color: #b8c0cf; font-size: 0.78rem; }
.tt-se-dur { flex: 0 0 34px; text-align: right; font-size: 0.72rem; color: #9aa4b5; }
.tt-se-shared { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; user-select: none; }
.tt-se-shared input { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--primary, #4b6cb7); flex: 0 0 auto; }
.tt-se-del {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: none; background: none;
    color: #c2cad6; cursor: pointer; border-radius: 7px;
}
.tt-se-del:hover { background: #fdecec; color: #e5484d; }
.tt-se-del svg { width: 14px; height: 14px; }

.tt-se-add {
    display: block; width: 100%; margin-top: 7px; padding: 8px;
    border: 1px dashed #c8ccd2; background: none; border-radius: 8px;
    color: #7a8697; font-size: 0.76rem; font-family: inherit; cursor: pointer; text-align: center;
}
.tt-se-add:hover { border-color: var(--primary, #4b6cb7); color: var(--primary, #4b6cb7); }

.tt-se-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tt-se-cancel, .tt-se-save { border: none; border-radius: 10px; padding: 9px 20px; font-size: 13px; cursor: pointer; font-family: inherit; }
.tt-se-cancel { background: #eef0f3; color: #5b6068; }
.tt-se-save { background: var(--primary, #4b6cb7); color: #fff; }
.tt-se-tip { margin: 10px 0 0; font-size: 12px; color: #9aa0a8; line-height: 1.6; }


.tt-choice-body { font-size: 13px; }
.tt-choice-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.tt-choice-btn {
    border: 1px solid #e0e4ea; background: #fff; color: #5b6068;
    border-radius: 10px; padding: 9px 16px; font-size: 13px;
    cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s;
}
.tt-choice-btn:hover { background: #f5f7fa; }

.tt-choice-btn.pri { background: var(--primary, #4b6cb7); border-color: var(--primary, #4b6cb7); color: #fff; font-weight: 600; }
.tt-choice-btn.pri:hover { background: var(--primary, #4b6cb7); filter: brightness(1.06); }

.tt-choice-btn.danger { color: #c0392b; border-color: #f0c4bf; background: #fdf5f4; }
.tt-choice-btn.danger:hover { background: #fdecec; border-color: #e5484d; }

@media (max-width: 480px) {
    .tt-choice-actions { flex-direction: column-reverse; }
    .tt-choice-btn { width: 100%; }
}

.tt-section-template .set-group-title svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--primary, #4b6cb7); }
.tt-slots-btn { margin-left: 8px; }


@media (max-width: 640px) {
    .tt-se-chips { gap: 4px; }
    .tt-se-chip span { padding: 6px 0; font-size: 0.7rem; }
    .tt-se-sum { font-size: 0.7rem; padding: 8px 10px; }
    .tt-se-idx, .tt-th-idx { display: none; }
    .tt-se-dur, .tt-th-dur { display: none; }
    
    .tt-se-thead { display: none; }
    .tt-se-line { flex-wrap: wrap; gap: 5px; }
    .tt-se-times { order: 10; flex: 1 0 100%; gap: 6px; }
    .tt-se-label { width: auto; flex: 1 1 auto; min-width: 0; padding: 6px 8px; }
    .tt-se-start, .tt-se-end { width: auto; flex: 1 1 0; min-width: 0; font-size: 0.72rem; padding: 6px 5px; }
    .tt-se-shared { flex: 0 0 34px; }
    .tt-se-del { width: 28px; }
    .tt-slot-editor-row { padding: 7px 10px; }
}



.tt-day-tab-group { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tt-day-tab {
    flex: 1; min-width: 36px; text-align: center; padding: 7px 2px; border-radius: 9px;
    border: 1px solid #e4e7eb; background: #fff; cursor: pointer; transition: all .15s;
    font-size: 12px; color: #5b6068; font-family: inherit;
}
.tt-day-tab:hover { border-color: var(--primary, #4b6cb7); color: var(--primary, #4b6cb7); }
.tt-day-tab.active { background: var(--primary, #4b6cb7); border-color: var(--primary, #4b6cb7); color: #fff; font-weight: 600; }

.tt-se-editor { border: 1px solid #e4e7eb; border-radius: 12px; padding: 10px 12px; background: #f7f9f8; margin-bottom: 12px; }
.tt-se-editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tt-se-editor-head b { color: #23272d; }
.tt-se-count { font-size: 11px; color: #9aa0a8; }

.tt-slot-editor-row[data-isnew="1"] input { border-color: #85b7eb; background: #e6f1fb; }

.tt-se-apply-title { font-size: 12px; color: #5b6068; margin: 4px 0 6px; }
.tt-se-apply-title i { margin-right: 4px; color: #9aa0a8; }
.tt-se-apply-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-se-apply {
    flex: 1; min-width: 40px; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 2px; border-radius: 9px; border: 1px solid #e4e7eb; background: #fff;
    cursor: pointer; user-select: none; transition: border-color .15s;
}
.tt-se-apply:hover { border-color: var(--primary, #4b6cb7); }
.tt-se-apply input[type="checkbox"] { width: 13px; height: 13px; margin: 0; cursor: pointer; accent-color: var(--primary, #4b6cb7); }
.tt-se-apply span { font-size: 12px; color: #5b6068; }

.tt-section-template { padding: 12px; }
.tt-slot-editor-rows { display: flex; flex-direction: column; margin-bottom: 8px; }

.tt-slot-section { max-width: 132px; flex-shrink: 0; }


.tt-pick-options { margin-top: 12px; border-top: 1px dashed #e4e7eb; padding-top: 10px; }
.tt-pick-repeat {
    display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3a3f45; cursor: pointer;
    user-select: none; margin-bottom: 8px;
}
.tt-pick-repeat input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--primary, #4b6cb7); }
.tt-pick-until-row { display: flex; align-items: center; gap: 8px; }
.tt-pick-until-label { font-size: 12px; color: #8a8f98; flex-shrink: 0; }
.tt-pick-until-row input[type="date"] {
    flex: 1; border: 1px solid #e4e7eb; border-radius: 8px; padding: 7px 8px;
    font-size: 13px; font-family: inherit; color: #23272d; background: #fff;
}



.tt-pick-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tt-pick-cancel, .tt-pick-save {
    border: none; border-radius: 10px; padding: 9px 20px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.tt-pick-cancel { background: #eef0f3; color: #5b6068; }
.tt-pick-save { background: var(--primary, #4b6cb7); color: #fff; }
.tt-pick-save:hover { opacity: .9; }

.tt-bpick-container { display: flex; flex-direction: column; }
.tt-bpick-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    padding: 8px; border: 1px solid #e4e7eb; border-radius: 10px; background: #fbfcfd;
}
.tt-bpick-row select,
.tt-bpick-row input[type="time"] {
    border: 1px solid #e4e7eb; border-radius: 8px; padding: 6px 8px; font-size: 13px;
    font-family: inherit; color: #23272d; background: #fff;
}
.tt-bpick-day { flex-shrink: 0; }
.tt-bpick-time { display: flex; align-items: center; gap: 4px; flex: 1; }
.tt-bpick-time select,
.tt-bpick-time input[type="time"] { flex: 1; min-width: 0; }
.tt-bpick-del {
    border: none; background: none; color: #e5484d; cursor: pointer; padding: 6px 8px;
    border-radius: 8px; flex-shrink: 0; font-size: 14px;
}
.tt-bpick-del:hover { background: #fdecec; }
.tt-bpick-preview {
    margin-top: 8px; padding: 10px; border: 1px solid #e4e7eb; border-radius: 10px; background: #f8f9fa;
    max-height: 200px; overflow-y: auto;
}
.tt-slot-section {
    border: 1px solid #e4e7eb; border-radius: 8px; padding: 6px 8px; font-size: 13px;
    font-family: inherit; color: #23272d; background: #fff; flex-shrink: 0;
}





.landing-page {
    display: none;                      
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;                     
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    background: #fff;
    color: var(--text);
}
html:not(.hxb-authed) .landing-page { display: block; }

html:not(.hxb-authed) .loading-overlay { display: none; }

html:not(.hxb-authed),
html:not(.hxb-authed) body {
    overflow: hidden;
    height: 100%;
}


.landing-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.landing-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px clamp(16px, 4vw, 40px);
    display: flex;
    align-items: center;
    gap: 16px;
}
.landing-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.landing-brand-mark {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 17px;
    box-shadow: var(--shadow-sm);
}
.landing-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.landing-brand-text strong { font-size: 16px; font-weight: 700; color: var(--text-heading); letter-spacing: .5px; }
.landing-brand-text small { font-size: 11px; color: var(--text-muted); }

.landing-nav-links {
    display: flex;
    gap: 22px;
    margin-left: auto;
}
.landing-nav-links a {
    font-size: 14px;
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.landing-nav-links a:hover { color: var(--primary); }

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.landing-nav-links + .landing-nav-actions { margin-left: 0; }


.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                background var(--transition-fast), color var(--transition-fast);
}
.landing-btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 10px; }
.landing-btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #35508f 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(75, 108, 183, 0.32);
}
.landing-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(75, 108, 183, 0.42); }
.landing-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.landing-btn-ghost:hover { background: var(--bg-hover); border-color: var(--primary); color: var(--primary); }
.landing-btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.landing-btn-outline:hover { background: var(--primary); color: #fff; }
.landing-btn-outline-light {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.landing-btn-outline-light:hover { background: rgba(255, 255, 255, 0.26); }


.landing-hero-actions .landing-btn-primary {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.landing-hero-actions .landing-btn-primary:hover {
    background: #f2f6ff;
    color: var(--secondary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
}


.landing-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(430px, 38vw, 560px);
    color: #fff;
    padding: clamp(46px, 6.5vw, 88px) clamp(16px, 4vw, 40px);
    background:
        radial-gradient(115% 92% at 84% 20%, rgba(125, 157, 224, 0.46), rgba(125, 157, 224, 0) 55%),
        linear-gradient(116deg, #16233f 0%, #27406a 48%, #3d5c96 100%);
    
    border-radius: 0;
    box-shadow: none;
}

.landing-hero::before { display: none; }
.landing-hero-inner {
    position: relative;                 
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    
    display: grid;
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    align-items: center;
}
.landing-hero-text { max-width: 100%; min-width: 0; }

.landing-hero-eyebrow,
.landing-hero-text h1,
.landing-hero-sub {
    text-shadow: 0 2px 16px rgba(8, 16, 34, 0.5);
}
.landing-hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 18px;
}
.landing-hero-text h1 {
    
    font-size: clamp(26px, 3.4vw, 42px) !important;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 18px;
}
.landing-hero-sub {
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.86);
    max-width: 100%;
    text-wrap: balance;                 
    margin-bottom: 26px;
}
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }


.landing-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.landing-hero-media-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    height: 100%;
}
.landing-hero-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
    display: block;
}
.landing-hero-media.has-img .hero-devices { display: none; }


.landing-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    
    background: linear-gradient(90deg,
        rgba(14, 23, 44, 0.94) 0%,
        rgba(14, 23, 44, 0.82) 26%,
        rgba(14, 23, 44, 0.56) 46%,
        rgba(14, 23, 44, 0.24) 60%,
        rgba(14, 23, 44, 0) 74%);
}


.hero-devices {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: min(50%, 600px);
    aspect-ratio: 1.75 / 1;
}
.hero-dev {
    position: absolute;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 22px 50px rgba(8, 18, 42, 0.42), 0 3px 10px rgba(8, 18, 42, 0.24);
}
.hero-dev::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(155deg, rgba(255,255,255,.42), rgba(255,255,255,0) 40%);
}

.hero-dev-browser {
    left: 0; top: 10%; width: 70%;
    aspect-ratio: 1.55 / 1;
    z-index: 1;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.hd-bar { height: 6%; flex: none; background: #eef1f7; display: flex; align-items: center; gap: 4px; padding: 0 2%; }
.hd-dot { width: 1.3%; aspect-ratio: 1 / 1; border-radius: 50%; background: #c6cede; flex: none; }
.hd-url { height: 36%; flex: 1; max-width: 44%; margin-left: 1.5%; border-radius: 99px; background: #dde3ee; }
.hd-screen { flex: 1; display: flex; background: #fbfcff; overflow: hidden; min-height: 0; }
.hd-side {
    width: 25%; background: #f2f5fb; border-right: 1px solid #e6ebf5; padding: 9px 7px;
    display: flex; flex-direction: column; gap: 6px;
}
.hd-side span { height: 6%; border-radius: 99px; background: #dbe3f1; flex: none; }
.hd-side span:first-child { background: #a9bde6; width: 72%; }
.hd-main { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hd-title { height: 7%; width: 44%; flex: none; border-radius: 99px; background: #c7d5ee; }
.hd-cards { display: flex; gap: 7px; flex: 0 0 26%; }
.hd-cards i { flex: 1; border-radius: 5px; background: #eaf0fa; }
.hd-cards i:first-child { background: #dbe7fb; }
.hd-bars { display: flex; align-items: flex-end; gap: 6px; flex: 1; min-height: 0; }
.hd-bars b { flex: 1; background: linear-gradient(180deg, #8aa6e3, #4b6cb7); border-radius: 3px 3px 0 0; }
.hd-bars b:nth-child(1) { height: 38%; }
.hd-bars b:nth-child(2) { height: 64%; }
.hd-bars b:nth-child(3) { height: 48%; }
.hd-bars b:nth-child(4) { height: 82%; }
.hd-bars b:nth-child(5) { height: 58%; }
.hd-bars b:nth-child(6) { height: 95%; }

.hero-dev-tablet {
    right: 1%; top: 0; width: 32%;
    aspect-ratio: .74 / 1;
    z-index: 2;
    border: 5px solid #212a3b; border-radius: 13px;
    padding: 8px;
    background: #fbfcff;
    display: flex; flex-direction: column; gap: 8px;
}
.hd-cam { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 16px; height: 3px; border-radius: 99px; background: #3a465c; }
.hd-tab-head { height: 5%; width: 52%; flex: none; border-radius: 99px; background: #c7d5ee; }
.hd-tab-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 7px; min-height: 0; }
.hd-tab-grid i { border-radius: 6px; background: #e6ecf9; }
.hd-tab-grid i:nth-child(1) { background: #dbe7fb; }
.hd-tab-grid i:nth-child(4) { background: #dbe7fb; }
.hd-tab-grid i:nth-child(5) { grid-column: span 2; background: #dbe7fb; }

.hero-dev-phone {
    right: 16%; bottom: 0; width: 18%;
    aspect-ratio: .49 / 1;
    z-index: 3;
    border: 4px solid #212a3b; border-radius: 14px;
    padding: 11px 7px 8px;
    background: #fbfcff;
    display: flex; flex-direction: column; gap: 5px;
}
.hd-notch { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 34%; height: 4px; border-radius: 99px; background: #212a3b; }
.hd-ph-head { height: 4%; width: 56%; flex: none; border-radius: 99px; background: #c7d5ee; }
.hd-ph-row { flex: 0 0 12%; border-radius: 5px; background: #eef3fb; }
.hd-ph-row.hd-a { background: #dbe7fb; }
.hd-ph-big { flex: 1; min-height: 0; border-radius: 7px; background: linear-gradient(135deg, #8aa6e3, #4b6cb7); }


@media (max-width: 900px) {
    .landing-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding-bottom: 0;
    }
    
    .landing-hero-scrim {
        background: linear-gradient(180deg,
            rgba(14, 23, 44, 0.88) 0%,
            rgba(14, 23, 44, 0.64) 28%,
            rgba(14, 23, 44, 0.22) 46%,
            rgba(14, 23, 44, 0) 58%);
    }
    .landing-hero-inner { order: 1; grid-template-columns: 1fr; text-align: center; }
    .landing-hero-text { margin: 0 auto; }
    
    .landing-hero-text h1 { font-size: clamp(26px, 4.6vw, 34px) !important; }
    .landing-hero-sub { margin-left: auto; margin-right: auto; }
    .landing-hero-actions { justify-content: center; }
    .landing-hero-media { position: relative; inset: auto; order: 2; }
    .landing-hero-media-inner { max-width: 620px; height: auto; padding: 26px 0; }
    .landing-hero-media img { height: auto; object-fit: contain; }
    .hero-devices { position: relative; top: auto; right: auto; transform: none; width: 100%; }
    .hero-dev-tablet { border-width: 4px; }
    .hero-dev-phone { border-width: 3px; }
}















.landing-perks {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    padding: 26px clamp(16px, 4vw, 40px);
}
.landing-perks-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2.4vw, 30px);
}
.landing-perk { display: flex; align-items: center; gap: 13px; min-width: 0; }
.landing-perk > i {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 12px;
    background: rgba(75, 108, 183, 0.1);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.landing-perk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.landing-perk-text strong { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.landing-perk-text span { font-size: 12.5px; color: var(--text-light); }

@keyframes landingFlash {
    0%, 100% { background: transparent; }
    20% { background: rgba(75, 108, 183, 0.08); }
}





.landing-footer {
    padding: 30px clamp(16px, 4vw, 40px) 40px;
    text-align: center;
    background: #fff;
    border-top: 1px solid var(--border);
}
.landing-footer p { font-size: 13px; color: var(--text-light); }
.landing-footer-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; }


.auth-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100000;                    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-modal.hidden { display: none; }
.auth-modal-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(24, 40, 72, 0.55);
}
.auth-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    animation: hxbAuthModalIn 0.22s ease-out;
}
.auth-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: transparent;
    color: #b0b7c3;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.auth-modal-close:hover { background: var(--bg-neutral); color: var(--text); }
@keyframes hxbAuthModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-modal-card { animation: none; }
}


@media (max-width: 1023px) {
    .landing-nav-links { display: none; }
    .landing-hero-inner { grid-template-columns: 1fr; }
    .landing-hero-media { order: 2; }
    .landing-hero-text { order: 1; }
    .landing-hero-sub { max-width: none; }
}
@media (max-width: 767px) {
    
    
    .landing-hero-text h1 br { display: inline; }
    .landing-brand-text small { display: none; }
    .landing-nav-actions { gap: 8px; }
    .landing-btn { padding: 9px 14px; font-size: 13px; }
    .landing-btn-lg { padding: 12px 20px; font-size: 14px; width: 100%; }
    .landing-hero-actions .landing-btn { flex: 1 1 46%; }
    
    .landing-perks { padding: 20px clamp(16px, 4vw, 40px); }
    .landing-perks-inner { grid-template-columns: 1fr; gap: 14px; }
    
    .landing-hero-eyebrow { font-size: 11.5px; padding: 4px 12px; margin-bottom: 13px; }
    .landing-hero-sub { margin-bottom: 20px; }
}
@media (max-width: 480px) {
    .landing-hero-actions .landing-btn { flex: 1 1 100%; }
    .auth-modal-card { padding: 32px 20px; }
}

@media (max-width: 374px) {
    .landing-hero-text h1 { font-size: 24px !important; }
}





.stat-card.vip-locked { background: #F4F6F9; box-shadow: 0 3px 7px rgba(15, 23, 42, .055); }
.stat-card.vip-locked::after { background: linear-gradient(90deg, #CCD5DF, #E7EBF0) !important; }

.stat-card.vip-locked h3,
.stat-card.vip-locked h3 i,
.stat-card.vip-locked h3 .num { color: #AEB9C6 !important; }
.stat-card.vip-locked p { color: #98A5B3 !important; }

.stat-card.vip-locked:hover { transform: translateY(-2px); }


.stat-card.vip-locked[data-vip="none"]    { --lk: #6B7C90; }   
.stat-card.vip-locked[data-vip="expired"] { --lk: #EF9103; }   



.stat-card .lk-float {
    display: none;
    position: absolute; top: 0; right: 0; z-index: 2;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff; color: var(--lk, #6B7C90);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3), 0 0 0 1px rgba(15, 23, 42, .06);
    pointer-events: none;
}
.stat-card.vip-locked .lk-float { display: flex; width: 12px; height: 12px; font-size: 8px; }
.stat-card .lk-float svg { width: 1em; height: 1em; display: block; }



.stat-card.vip-locked p,
.stat-card.vip-locked h3 { transform: translateY(4px); }



@media (min-width: 1024px) {
    body.sb-mode .container > .today-stats .stat-card.vip-locked p,
    body.sb-mode .container > .today-stats .stat-card.vip-locked h3 { transform: none; }
    body.sb-mode .container > .today-stats .stat-card.vip-locked { background: transparent; box-shadow: none; }
    
    body.sb-mode .container > .today-stats .stat-card.vip-locked h3::before { background: #8A98A8; }
    
    body.sb-mode .container > .today-stats .stat-card.vip-locked .lk-float { top: 50%; right: 0; transform: translateY(-50%); }
    
    body.sb-mode .container > .today-stats .stat-card.vip-locked#pointsCard h3 { margin-right: 14px; }
}


#dataManagerPage {
    overflow-y: auto;
    background: #f5f6f8;
    border-radius: 0;
    box-shadow: none;
    padding: 0 12px 28px;
}
.dm-wrap { max-width: 1040px; margin: 0 auto; }


.dm-panel {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    margin: 12px 0 0;
    overflow: hidden;
}


.dm-hero-top { display: flex; align-items: center; gap: 10px; }
.dm-idbar {
    padding: 13px 18px; margin-bottom: 0;
    background: #FAFBFD; border-bottom: 1px solid #EEF2F7;
}
.dm-avatar {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #607D8B, #8CA0AE);
    color: #fff; font-size: 19px;
}
.dm-hero-who { min-width: 0; flex: 0 1 auto; }
.dm-hero-name { font-size: 16px; font-weight: 700; color: #24303F; line-height: 1.3; }
.dm-hero-sub { font-size: 12px; color: #8A98A8; margin-top: 2px; }
.dm-pill {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: #E8F5EC; color: #2E7D4F;
}
.dm-pill--warn { background: #FFF4E5; color: #B26A00; }


.dm-idbar .dm-hero-foot {
    margin-left: auto; margin-top: 0; padding-top: 0; border-top: none;
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; flex: 0 1 auto;
    font-size: 12px; color: #7C8B9B;
}
.dm-hero-foot i { color: #A8B6C4; }
.dm-hero-foot .dm-foot-time { color: #4B5B6B; font-weight: 600; white-space: nowrap; }
.dm-hero-foot .dm-foot-tail {
    color: #A3B0BD; font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-hero-foot--never .dm-foot-time { color: #D9822B; }


.dm-metrics {
    display: flex; align-items: flex-end; gap: 0;
    padding: 15px 18px 13px; border-bottom: 1px solid #EEF2F7;
}
.dm-metric { padding: 0 24px; border-left: 1px solid #EDF0F4; }
.dm-metric:first-child { padding-left: 0; border-left: none; }
.dm-metric-num { font-size: 23px; font-weight: 700; color: #24303F; letter-spacing: -.4px; line-height: 1.15; }
.dm-metric-num small { font-size: 11.5px; font-weight: 600; color: #8A98A8; margin-left: 2px; }
.dm-metric-label { font-size: 11.5px; color: #8A98A8; margin-top: 3px; }
.dm-metric.is-skeleton .dm-metric-num { color: #C7D0DA; }

.dm-sum-tip { margin-left: auto; padding-bottom: 4px; flex: 0 0 auto; font-size: 11px; color: #A3B0BD; }


.dm-breakdown { padding: 4px 18px 12px; }
.dm-group { padding-top: 2px; }
.dm-ghead { display: flex; align-items: center; gap: 11px; padding: 11px 0 6px; }
.dm-gname { flex: 0 0 82px; font-size: 12.5px; font-weight: 700; color: #3D5A9E; }

.dm-gbar { flex: 0 1 220px; height: 5px; border-radius: 3px; background: #EEF2F7; overflow: hidden; }
.dm-gbar i { display: block; height: 100%; min-width: 3px; border-radius: 3px; background: #6B8FD4; }
.dm-gsum { flex: 0 0 auto; margin-left: auto; text-align: right; font-size: 12px; font-weight: 700; color: #24303F; }
.dm-gsum small { font-size: 10.5px; font-weight: 600; color: #9AA9B8; margin-left: 1px; }

.dm-gitems { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }


.dm-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #55636F;
    margin: 18px 2px 8px;
}
.dm-title i { color: #9AA9B8; font-size: 12px; }
.dm-title .dm-title-hint { margin-left: auto; font-size: 11px; font-weight: 500; color: #A3B0BD; }
@media (max-width: 560px) { .dm-title .dm-title-hint { display: none; } }



.dm-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dm-action {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    background: #fff; border-radius: 14px; padding: 11px 12px;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
    cursor: pointer; border: 1px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-action:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, .09); }
.dm-action:active { transform: scale(.99); }
.dm-action:focus-visible { outline: 2px solid #607D8B; outline-offset: 2px; }
.dm-action-icon {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.dm-action-main { min-width: 0; flex: 1 1 auto; }
.dm-action-name { font-size: 13px; font-weight: 700; color: #24303F; display: flex; align-items: center; gap: 5px; }
.dm-action-desc {
    font-size: 10.5px; color: #8A98A8; margin-top: 2px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-action-tag {
    font-size: 10.5px; font-weight: 600; white-space: nowrap;
    padding: 2px 7px; border-radius: 999px; background: #F2F5F8; color: #7C8B9B;
}
.dm-action-tag--warn { background: #FFF4E5; color: #B26A00; }

.dm-action--backup .dm-action-icon { background: #E8F5EC; color: #2E9E5B; }
.dm-action--import .dm-action-icon { background: #EFEAFB; color: #7E57C2; }
.dm-action--clear  .dm-action-icon { background: #FDECEC; color: #E05252; }
.dm-action--clear .dm-action-name { color: #C0392B; }
.dm-action--clear:hover { border-color: #F6D5D5; }

.dm-action--restore .dm-action-icon { background: #E7F1FB; color: #2F80C8; }
.dm-action--restore:hover { border-color: #D5E6F6; }


.dm-brow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #F4F7FA; }
.dm-brow-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.dm-brow-name {
    flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #55636F;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-brow-num { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #24303F; }
.dm-brow-num small { font-size: 10.5px; font-weight: 600; color: #9AA9B8; margin-left: 1px; }
.dm-brow.is-zero .dm-brow-name, .dm-brow.is-zero .dm-brow-num { color: #C3CDD8; }


@media (max-width: 560px) {
    .dm-idbar { flex-wrap: wrap; gap: 9px; padding: 12px 15px; }
    .dm-idbar .dm-hero-foot { width: 100%; margin-left: 0; padding-top: 9px; border-top: 1px dashed #EDF0F4; }
    .dm-metrics { flex-wrap: wrap; padding: 13px 15px 11px; }
    .dm-metric { flex: 1 1 0; padding: 0 8px; text-align: center; }
    .dm-metric:first-child { padding-left: 8px; }
    .dm-metric-num { font-size: 18px; letter-spacing: -.2px; }
    .dm-sum-tip {
        flex: 1 1 100%; margin-left: 0; margin-top: 9px; padding: 9px 0 0;
        text-align: center; border-top: 1px dashed #EDF0F4;
    }
    .dm-breakdown { padding: 4px 15px 10px; }
    .dm-gname { flex: 0 0 76px; }
    .dm-gbar { flex: 0 1 108px; }
    .dm-gitems { grid-template-columns: 1fr; gap: 0; }
    .dm-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
    .dm-action { padding: 10px; }
    .dm-action-desc { display: none; }
}


.dm-danger-note {
    display: flex; gap: 9px; align-items: flex-start;
    background: #FFF7F6; border: 1px solid #FBDFDC; border-radius: 12px;
    padding: 12px 13px; margin-top: 18px;
    font-size: 11.5px; line-height: 1.65; color: #A8534A;
}
.dm-danger-note i { color: #E07B70; margin-top: 2px; }
.dm-danger-note b { color: #8E3B32; }
.dm-note {
    display: flex; gap: 9px; align-items: flex-start;
    background: #F0F4F9; border-radius: 12px; padding: 12px 13px;
    margin-top: 12px;
    font-size: 11.5px; line-height: 1.65; color: #6D7C8B;
}
.dm-note i { color: #93A5B7; margin-top: 2px; }
.dm-note b { color: #4B5B6B; }


@media (max-width: 560px) {
    #clearDataChecklist { grid-template-columns: 1fr !important; gap: 6px !important; }
}


.lgimp-precheck { margin: 6px 0 4px; text-align: left; }
.lgimp-tip {
    display: flex; align-items: flex-start; gap: 8px;
    background: #FFF8E1; border: 1px solid #FFE082; border-radius: 10px;
    padding: 11px 13px; font-size: 14px; line-height: 1.7; color: #6B5300;
    
    white-space: pre-line;
}
.lgimp-tip i { margin-top: 3px; color: #F39C12; font-size: 15px; flex: 0 0 auto; }

.lgimp-title { margin: 13px 0 8px; font-size: 14px; font-weight: 600; color: #333; }
.lgimp-list { display: flex; flex-direction: column; gap: 8px; max-height: 186px; overflow-y: auto; padding-right: 2px; }
.lgimp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 2px solid #e3e7ee; border-radius: 10px;
    background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.lgimp-item:hover { border-color: #b9c6dd; }
.lgimp-item.is-on { border-color: #4b6cb7; background: #f2f6ff; }
.lgimp-item input { margin: 0; flex: 0 0 auto; }
.lgimp-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    background: #4b6cb7; color: #fff; font-size: 14px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lgimp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lgimp-meta { flex: 1; min-width: 0; }
.lgimp-name { font-size: 14px; font-weight: 600; color: #333; }
.lgimp-self {
    font-size: 11px; color: #4b6cb7; background: #eaf0fb;
    border-radius: 4px; padding: 1px 6px; margin-left: 6px; font-weight: 500;
}
.lgimp-stat { font-size: 12px; color: #8a94a6; margin-top: 3px; white-space: nowrap; }
.lgimp-warn { margin-top: 10px; font-size: 13px; line-height: 1.65; color: #C0392B; }
.lgimp-merge { margin-top: 10px; font-size: 13px; line-height: 1.65; color: #58657a; background: #f5f7fb; border-radius: 8px; padding: 8px 11px; }
@media (max-width: 560px) {
    .lgimp-list { max-height: 150px; }
    .lgimp-tip { font-size: 13px; padding: 9px 11px; }
}



.site-beian {
    margin-top: 6px;
    line-height: 1.8;
}
.landing-footer p.site-beian,
footer p.site-beian,
p.site-beian {
    font-size: 12px;
    color: #8a94a6;
    letter-spacing: .2px;
}
.site-beian a,
.site-beian a:link,
.site-beian a:visited {
    color: #8a94a6;
    text-decoration: none;
    transition: color .2s ease;
}
.site-beian a:hover,
.site-beian a:focus {
    color: #4b6cb7;
    text-decoration: underline;
}




.hxb-foot-links {
    display: flex;
    flex-wrap: wrap;                 
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto 16px;
}

.hxb-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #dfe6f3;
    border-radius: 999px;
    background: #fff;
    color: #4b6cb7;
    font-size: 13px;
    font-family: inherit;            
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.hxb-foot-link i { font-size: 13px; }

.hxb-foot-link:hover,
.hxb-foot-link:focus-visible {
    background: #f2f6ff;
    border-color: #4b6cb7;
    color: #35509a;
    box-shadow: 0 2px 8px rgba(75, 108, 183, .16);
}
.hxb-foot-link:active { background: #e8efff; }



.hxb-guide-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12000;                  
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 30, 55, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.hxb-guide-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 22px 22px 18px;
    box-shadow: 0 12px 40px rgba(20, 30, 55, .28);
    color: #2b3445;
    animation: hxbGuideIn .22s ease-out;
}
@keyframes hxbGuideIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.hxb-guide-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #2b3445;
}

.hxb-guide-lead {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.7;
    color: #55627a;
}

.hxb-guide-steps {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.85;
    color: #35405a;
}
.hxb-guide-steps li { margin-bottom: 4px; }

.hxb-guide-tip {
    margin: 0 0 16px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #fff8e8;
    border: 1px solid #ffe3a8;
    font-size: 12.5px;
    line-height: 1.7;
    color: #96631a;
}
.hxb-guide-tip:empty { display: none; }   


.hxb-guide-recover {
    margin: 0 0 14px;
    padding: 9px 12px;
    border: 1px solid #e3e9f5;
    border-radius: 9px;
    background: #fbfcff;
    font-size: 12.5px;
    line-height: 1.7;
    color: #55617a;
}
.hxb-guide-recover-sum {
    cursor: pointer;
    font-weight: 600;
    color: #4b6cb7;
    -webkit-tap-highlight-color: transparent;
}
.hxb-guide-recover-lead { margin: 8px 0 6px; }
.hxb-guide-recover-steps { margin: 0 0 6px; padding-left: 20px; }
.hxb-guide-recover-steps li { margin-bottom: 4px; }
.hxb-guide-recover-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 8px;
}
.hxb-guide-recover-url {
    padding: 5px 10px;
    border: 1px dashed #c9d6ee;
    border-radius: 7px;
    background: #fff;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #2f4a86;
    user-select: all;              
    -webkit-user-select: all;
}
.hxb-guide-recover-note { margin: 0; color: #6b7689; }


.hxb-guide-banner {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.7;
}
.hxb-guide-banner.is-info { background: #eef4ff; border: 1px solid #cfe0ff; color: #2f4a86; }
.hxb-guide-banner.is-warn { background: #fff3ef; border: 1px solid #ffcfbf; color: #a4451f; }


.hxb-guide-browsers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}
.hxb-guide-br {
    padding: 5px 14px;
    border: 1px solid #dfe6f3;
    border-radius: 999px;
    background: #fff;
    color: #5c6b86;
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hxb-guide-br:hover { border-color: #b9c9ea; color: #4b6cb7; }
.hxb-guide-br.is-on { background: #4b6cb7; border-color: #4b6cb7; color: #fff; }


.hxb-guide-figure { margin: 0 0 12px; }

.hxb-guide-figcap {
    margin: -6px 0 12px;
    color: #8a94a6;
    font-size: 12px;
    line-height: 1.6;
}
.hxb-guide-figcap:empty { display: none; }
.hxb-mock {
    border: 1px solid #e3e9f4;
    border-radius: 10px;
    background: #fafcff;
    padding: 10px;
}
.hxb-mock-win { display: flex; align-items: center; gap: 8px; }
.hxb-mock-url {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    background: #eef2f8;
    color: #6b7686;
    font-size: 12px;
}
.hxb-mock-url .fa-lock { font-size: 10px; color: #9aa6b8; }
.hxb-mock-install {
    position: absolute;
    right: 4px;
    top: 3px;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 26px;
    padding: 0 9px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 122, 69, .5);
    color: #4b6cb7;
    font-size: 11px;
}
.hxb-mock-dots { color: #8a94a6; font-size: 15px; }

.hxb-mock-dots.is-ring {
    padding: 2px 5px;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 122, 69, .5);
    color: #4b6cb7;
}
.hxb-mock-share {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 122, 69, .5);
    color: #4b6cb7;
    font-size: 15px;
}

.hxb-mock-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #ff7a45;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}
.hxb-mock-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid #e3e9f4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(75, 108, 183, .08);
}
.hxb-mock-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    color: #55627a;
    font-size: 12px;
}
.hxb-mock-row.is-hl { background: #eef4ff; color: #2f4a86; font-weight: 600; }
.hxb-mock-more { margin-left: auto; font-size: 10px; color: #9aa6b8; }
.hxb-mock-menubar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 7px;
    background: #eef2f8;
    color: #55627a;
    font-size: 12px;
}
.hxb-mock-mb { position: relative; padding: 2px 6px; border-radius: 5px; }
.hxb-mock-mb.is-hl {
    background: #fff;
    color: #2f4a86;
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(255, 122, 69, .5);
}

.hxb-guide-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.hxb-guide-btn {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.hxb-guide-btn-ghost { background: #fff; border-color: #dfe6f3; color: #4b6cb7; }
.hxb-guide-btn-ghost:hover { background: #f2f6ff; border-color: #4b6cb7; }
.hxb-guide-btn-primary { background: #4b6cb7; color: #fff; }
.hxb-guide-btn-primary:hover { background: #3d5a9b; }

.hxb-guide-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9aa5b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.hxb-guide-close:hover { background: #f0f3f9; color: #4b6cb7; }


@media (max-width: 560px) {
    .hxb-foot-links { gap: 8px; margin-bottom: 12px; }
    .hxb-foot-link { padding: 7px 12px; font-size: 12px; }
    .hxb-foot-link i { font-size: 12px; }

    .hxb-guide-card { padding: 20px 16px 16px; border-radius: 14px; }
    .hxb-guide-title { font-size: 16px; }
    .hxb-guide-lead,
    .hxb-guide-steps { font-size: 13.5px; }
    .hxb-guide-banner { font-size: 12px; }
    .hxb-mock { padding: 8px; }
    .hxb-mock-url {
        height: 30px;
        padding: 0 8px;
        font-size: 11px;
    }
    .hxb-mock-install { height: 24px; padding: 0 7px; font-size: 10px; }
    .hxb-mock-menu { margin-top: 6px; padding: 5px; }
    .hxb-mock-row { padding: 5px 7px; font-size: 11.5px; }
    .hxb-guide-actions { flex-direction: column-reverse; }   
    .hxb-guide-btn { width: 100%; }
    
    .hxb-guide-recover-copy { flex-direction: column; align-items: stretch; }
    .hxb-guide-recover-copy .hxb-guide-btn { width: auto; padding: 7px 12px; font-size: 12.5px; }
}




.stats-main-tabs { margin: 0 0 14px; }


.habit-sum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 14px;
    margin: 0 0 20px;
}

.habit-sum-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 13px 16px 14px;
    box-shadow: 0 4px 12px rgba(75, 108, 183, 0.07);
    border-left: 4px solid var(--primary);
    min-width: 0;
}

.habit-sum-rate   { border-left-color: #4B6CB7; }
.habit-sum-times  { border-left-color: #5CB85C; }
.habit-sum-streak { border-left-color: #FFA726; }
.habit-sum-track  { border-left-color: #9C27B0; }

.habit-sum-k {
    font-size: 12.5px;
    color: #7c8398;
    margin: 0 0 4px;
}

.habit-sum-v {
    font-size: 26px;
    font-weight: 700;
    color: #2f3646;
    line-height: 1.15;
}

.habit-sum-v small {
    font-size: 13px;
    font-weight: 500;
    color: #98a0b3;
    margin-left: 3px;
}

.habit-sum-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 5px 0 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


.habit-empty {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 40px 20px 44px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.habit-empty-icon {
    font-size: 34px;
    color: #c3cbdd;
    margin-bottom: 10px;
}

.habit-empty-title {
    font-size: 15.5px;
    font-weight: 600;
    color: #4a5266;
    margin: 0 0 6px;
}

.habit-empty-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.7;
}

.habit-empty-btn {
    margin-top: 16px;
    padding: 8px 22px;
    border: none;
    border-radius: 20px;
    background: var(--primary);
    color: #fff;
    font-size: 13.5px;
    cursor: pointer;
    transition: filter 0.2s;
}

.habit-empty-btn:hover { filter: brightness(1.07); }



.habit-heat-chart,
.habit-rank-chart {
    grid-column: 1 / -1;
    height: auto;
    min-width: 0;
}

.habit-heat-chart { min-height: 200px; }
.habit-rank-chart { min-height: 190px; }


.habit-heat-range {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin: -6px 0 12px;
}

.habit-heat-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
}


.habit-heat-inner {
    --heat-cell: 12px;
    width: max-content;
    margin: 0 auto;
}

.habit-heat-months {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--heat-cell);
    gap: 3px;
    height: 15px;
    margin-left: calc(var(--heat-cell) + 5px);   
    font-size: 10px;
    color: var(--text-muted);
}

.habit-heat-months span {
    white-space: nowrap;
    line-height: 15px;
}

.habit-heat-body { display: flex; gap: 3px; }

.habit-heat-weekdays {
    display: grid;
    grid-template-rows: repeat(7, var(--heat-cell));
    gap: 3px;
    width: calc(var(--heat-cell) + 2px);
    flex: 0 0 calc(var(--heat-cell) + 2px);
    font-size: 9.5px;
    line-height: var(--heat-cell);
    color: var(--text-muted);
    text-align: center;
}

.habit-heat-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, var(--heat-cell));
    grid-auto-columns: var(--heat-cell);
    gap: 3px;
}

.habit-heat-cell {
    display: block;
    width: var(--heat-cell, 12px);
    height: var(--heat-cell, 12px);
    border-radius: 2.5px;
    background: #f1f3f8;
}

.habit-heat-cell.is-void { background: transparent; }


.habit-heat-cell.is-today { box-shadow: 0 0 0 2px #4b6cb7; }

.habit-heat-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-muted);
}

.habit-heat-legend .habit-heat-cell {
    width: 11px;
    height: 11px;
}

.habit-heat-tip { margin-left: 10px; }


.habit-rank-list { margin-top: 2px; }

.habit-rank-row {
    display: grid;
    grid-template-columns: 112px 1fr 46px;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(75, 108, 183, 0.12);
}

.habit-rank-row:last-child { border-bottom: none; }

.habit-rank-name {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 13px;
    color: #3d4457;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.habit-rank-track {
    grid-column: 2;
    grid-row: 1;
    display: block;
    height: 14px;
    border-radius: 7px;
    background: #eef1f7;
    overflow: hidden;
}

.habit-rank-bar {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 7px;
    transition: width 0.35s ease;
}

.habit-rank-val {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
}

.habit-rank-extra {
    grid-column: 2 / span 2;
    grid-row: 2;
    font-size: 11px;
    color: var(--text-muted);
}

.habit-rank-empty {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 26px 0;
    margin: 0;
}

.habit-rank-note {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 12px 0 0;
    line-height: 1.9;
}

.habit-lamp {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 3px 0 8px;
    vertical-align: middle;
}


@media (max-width: 768px) {
    .habit-sum-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .habit-sum-card { padding: 11px 13px 12px; }
    .habit-sum-v { font-size: 22px; }
    .habit-rank-row { grid-template-columns: 84px 1fr 40px; column-gap: 8px; }
    .habit-rank-name { font-size: 12.5px; }
    .habit-rank-val { font-size: 12px; }
}

@media (max-width: 430px) {
    .habit-sum-card { padding: 10px 11px 11px; border-left-width: 3px; }
    .habit-sum-v { font-size: 20px; }
    .habit-sum-sub { font-size: 11px; }
    .habit-rank-row { grid-template-columns: 76px 1fr 38px; column-gap: 6px; }
    .habit-empty { padding: 30px 16px 34px; }
}





.hxb-pick { margin-top: 8px; }

.hxb-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 8px;
}

.hxb-icon-btn {
    border: 1px solid #dbe3f0;
    background: #fff;
    color: #55637a;
    border-radius: 10px;
    min-height: 46px;
    font-size: 1.15rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.hxb-icon-btn:hover { border-color: #9db2d6; background: #f7faff; }

.hxb-icon-btn.is-on {
    border-color: #4b6cb7;
    background: #eef3ff;
    color: #4b6cb7;
    box-shadow: 0 0 0 2px rgba(75, 108, 183, 0.18);
}

.hxb-swatches { display: flex; flex-wrap: wrap; gap: 10px; }

.hxb-swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .08);
    color: #fff;
    font-size: .8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.hxb-swatch i { display: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.hxb-swatch.is-on { border-color: #2c3e50; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(44, 62, 80, .22); }
.hxb-swatch.is-on i { display: block; }


.hxb-badge-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px dashed #dbe3f0;
    border-radius: 12px;
    background: #fbfcff;
}

.hxb-bp-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 1.45rem;
    color: #fff;
    
    background: var(--hxb-prev-color, #FFD700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.hxb-bp-text { min-width: 0; }
.hxb-bp-text b { display: block; font-size: 1rem; color: #2c3e50; }
.hxb-bp-text em { display: block; font-style: normal; font-size: .8rem; color: #7b8798; margin-top: 2px; }


.bgb-modal { max-width: 1000px; }

.bgb-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bgb-tip { color: #667085; font-size: .85rem; }

.bgb-scroll {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.bgb-table { width: 100%; border-collapse: collapse; }


.bgb-th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f4f7fb;
    text-align: left;
    font-weight: 600;
    color: #55637a;
    font-size: .78rem;
    padding: 7px 8px;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}

.bgb-th-name { width: 17%; }
.bgb-th-style { width: 9%; }
.bgb-th-desc { width: 24%; }
.bgb-th-cond { width: 24%; }
.bgb-th-val { width: 10%; }
.bgb-th-ops { width: 16%; text-align: center; }

.bgb-cell { padding: 5px 6px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }

.bgb-table .form-control { font-size: .82rem; padding: 5px 8px; height: auto; }


.bgb-table .badge-name { font-size: .82rem; font-weight: 400; margin: 0; color: #333; }
.bgb-table .badge-description { font-size: .82rem; color: #333; margin: 0; line-height: 1.45; }
.bgb-table .badge-description { resize: vertical; min-height: 44px; }


.bgb-table .badge-icon,
.bgb-table .badge-color { display: none; }

.bgb-style-btn {
    border: 1px solid #dbe3f0;
    background: #fff;
    border-radius: 9px;
    padding: 4px 8px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bgb-style-btn .bgb-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.bgb-c-style.is-open .bgb-style-btn { border-color: #4b6cb7; background: #eef3ff; }


.bgb-style-pop {
    display: none;
    position: fixed;
    z-index: 2600;                                  
    padding: 10px;
    border: 1px solid #dbe3f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(30, 50, 90, .22);
    width: 330px;
    max-width: 92vw;
    max-height: 70vh;                               
    overflow-y: auto;
}

.bgb-c-style.is-open .bgb-style-pop { display: block; }
.bgb-pop-block + .bgb-pop-block { margin-top: 10px; }
.bgb-pop-label { display: block; font-size: .75rem; color: #7b8798; margin-bottom: 6px; }


.bgb-style-pop .hxb-icon-grid { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
.bgb-style-pop .hxb-icon-btn { min-height: 36px; font-size: .95rem; border-radius: 8px; }
.bgb-style-pop .hxb-swatches { gap: 8px; }
.bgb-style-pop .hxb-swatch { width: 26px; height: 26px; }

.bgb-c-ops { white-space: nowrap; text-align: center; }
.bgb-c-ops .btn { padding: 4px 8px; font-size: .78rem; }
.bgb-c-ops .copy-row-btn { margin-right: 5px; }


.badge-extra-select-cell { display: none; margin-top: 6px; }


.bgb-hint {
    display: none;
    margin: 10px 0 0;
    padding: 8px 10px;
    font-size: .82rem;
    color: #667085;
    background: #f5f8fd;
    border: 1px solid #e3e9f4;
    border-radius: 10px;
}


.bgb-head { display: none; }
.bgb-mhead { cursor: default; }


@media (max-width: 600px) {

    
    .bgb-modal {
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .bgb-modal .modal-header { flex: 0 0 auto; }
    .bgb-modal .modal-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; }

    
    .bgb-scroll { max-height: none; overflow: visible; border: none; border-radius: 0; }

    
    .bgb-table thead { display: none; }
    .bgb-table, .bgb-table tbody, .bgb-row, .bgb-cell { display: block; width: 100%; }

    .bgb-row {
        border: 1px solid #e3e9f4;
        border-radius: 12px;
        background: #fff;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .bgb-cell { padding: 0; border-bottom: none; }

    
    .bgb-head { display: block; }
    .bgb-mhead { padding: 9px 10px; cursor: pointer; }
    .bgb-mline { display: flex; align-items: center; gap: 8px; }
    .bgb-mhead .bgb-micon { flex: 0 0 auto; font-size: 1.05rem; }
    .bgb-mhead .bgb-mname {
        flex: 1;
        min-width: 0;
        font-weight: 600;
        font-size: .92rem;
        color: #2c3e50;
        
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bgb-mcaret { flex: 0 0 auto; color: #9aa6b8; font-size: .78rem; transition: transform .18s; }
    .bgb-row.is-open .bgb-mcaret { transform: rotate(180deg); }
    .bgb-mcond {
        margin-top: 3px;
        padding-left: 25px;
        font-size: .72rem;
        color: #9aa6b8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    
    .bgb-mops { display: flex; gap: 6px; flex: 0 0 auto; }
    .bgb-mini {
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid #c3cfe4;
        border-radius: 9px;
        background: #fff;
        color: #55637a;
        font-size: .9rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .bgb-mini.remove-row-btn { color: #c0392b; border-color: #edc7c2; }
    .bgb-row:not(.is-open) .bgb-head { border-bottom: none; }
    .bgb-row.is-open .bgb-head { border-bottom: 1px solid #eef2f9; }

    
    .bgb-c-name, .bgb-c-style, .bgb-c-desc, .bgb-c-cond, .bgb-c-val, .bgb-c-ops { display: none; }
    .bgb-row.is-open .bgb-c-name,
    .bgb-row.is-open .bgb-c-style,
    .bgb-row.is-open .bgb-c-desc,
    .bgb-row.is-open .bgb-c-cond,
    .bgb-row.is-open .bgb-c-val { display: block; padding: 0 10px 10px; }
    
    .bgb-row.is-open .bgb-c-ops { display: none; }

    
    .bgb-table .form-control { font-size: .9rem; padding: 8px 10px; }
    .bgb-table .badge-name { font-size: .9rem; }
    .bgb-table .badge-description { font-size: .9rem; min-height: 64px; }

    .bgb-style-btn { padding: 8px 10px; font-size: 1.05rem; }
    
    .bgb-style-pop {
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: 8px !important;
        width: auto !important;
        max-width: none;
        max-height: 64vh;
    }
    .bgb-style-pop .hxb-icon-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
    .bgb-style-pop .hxb-icon-btn { min-height: 42px; }
    .bgb-style-pop .hxb-swatch { width: 30px; height: 30px; }

    .bgb-hint { display: block; }
    .bgb-actions { position: sticky; bottom: 0; background: #fff; padding-top: 10px; }

    
    .hxb-icon-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
    .hxb-icon-btn { min-height: 48px; }
    .hxb-badge-preview { gap: 12px; }
}





.ntc-slot { margin: 0; padding: 0; }
.ntc-slot > * { margin-bottom: 8px; }

.ntc-strip {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: 10px;
    border-left: 4px solid #94a3b8; background: #f8fafc;
    font-size: 0.84rem; min-width: 0; cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
    transition: transform .15s;
    
    min-height: calc(0.95rem + 4px + 18px);
}
.ntc-strip:hover { transform: translateY(-1px); }


@keyframes ntc-swap-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ntc-swap-in { from { opacity: 0; } to { opacity: 1; } }

.ntc-strip.ntc-swap-out { animation: ntc-swap-out .15s ease-in both; pointer-events: none; }
.ntc-strip.ntc-swap-in { animation: ntc-swap-in .15s ease-out both; }
.ntc-ico { font-size: 1rem; flex: none; line-height: 1; }

.ntc-title {
    flex: 0 0 auto; font-weight: 700; max-width: 42%; min-width: 0; color: #2c3e50;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntc-main {
    flex: 0 1 auto; min-width: 0; color: #4b5563;
    
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntc-sub {
    
    flex: 0 1 auto;
    
    min-width: 2.4em; color: #94a3b8; font-size: 0.78rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntc-pin {
    flex: none; font-size: 0.66rem; color: #fff; background: #ef4444;
    padding: 2px 6px; border-radius: 4px; font-weight: 600;
}

.ntc-u4 { border-left-color: #dc2626; background: #fef2f2; }
.ntc-u3 { border-left-color: #ef4444; background: #fef6f5; }
.ntc-u2 { border-left-color: #f39c12; background: #fffbeb; }
.ntc-u1 { border-left-color: #4b6cb7; background: #f0f7ff; }
.ntc-u0 { border-left-color: #cbd5e1; background: #f8fafc; }


.ntc-tail { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }


.ntc-dots { display: flex; align-items: center; gap: 4px; flex: none; }
.ntc-dot {
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background: #cbd5e1; cursor: pointer; flex: none;
}
.ntc-dot.on { background: #4b6cb7; width: 16px; border-radius: 3px; }
.ntc-dot:hover { background: #94a3b8; }



.ntc-x {
    flex: none; border: none; background: transparent; color: #cbd5e1; cursor: pointer;
    font-size: 0.95rem; line-height: 1; padding: 2px 4px; border-radius: 50%;
    opacity: .5; transition: opacity .15s; font-family: inherit;
}
.ntc-strip:hover .ntc-x { opacity: 1; }
.ntc-x:hover { background: #e2e8f0; color: #64748b; }


.ntc-badge-read {
    background: #f1f5f9; color: #94a3b8; font-size: 0.62rem;
    padding: 1px 5px; border-radius: 4px; font-weight: 600;
}

.ntc-read-btn {
    flex: none; border: 1px solid #cbd5e1; background: #fff; color: #4b6cb7;
    font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    cursor: pointer; font-family: inherit; white-space: nowrap; line-height: 1.35;
}
.ntc-read-btn:hover { background: #e8effc; border-color: #4b6cb7; }


.ntc-hint-read {
    padding: 8px 14px; font-size: 0.72rem; line-height: 1.6; color: #64748b;
    background: #f8fafc; border-top: 1px solid #e2e8f0; text-align: left;
}
.ntc-hint-read span { color: #4b6cb7; font-weight: 600; }


.ntc-bell { position: relative; }
.ntc-bell-badge {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: #ef4444; color: #fff; font-size: 0.64rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; box-sizing: border-box; white-space: nowrap;
}


.ntc-panel {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 3200;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}


#announcementModal { z-index: 3300; }
.ntc-panel-box {
    background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
    max-height: 84vh; display: flex; flex-direction: column;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
}
.ntc-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid #e8ecf2; flex: none;
}
.ntc-panel-head h3 { font-size: 1rem; color: #2c3e50; }
.ntc-panel-stat { font-size: 0.76rem; font-weight: 500; color: #94a3b8; margin-left: 4px; }
.ntc-panel-close {
    border: none; background: #f1f5f9; width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; font-size: 0.95rem; color: #64748b; font-family: inherit;
}
.ntc-panel-body { padding: 12px 16px; overflow-y: auto; flex: 1; }

.ntc-panel-foot {
    padding: 10px 16px 12px; border-top: 1px solid #e8ecf2; flex: none;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ntc-ivl-label { font-size: 0.74rem; color: #94a3b8; font-weight: 600; margin-right: 2px; }
.ntc-ivl-btn {
    padding: 4px 9px; border-radius: 7px; border: 1px solid #e2e8f0;
    background: #fff; color: #64748b; font-size: 0.74rem; cursor: pointer; font-family: inherit;
}
.ntc-ivl-btn.on { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; font-weight: 700; }
.ntc-panel-actions {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 0 16px 14px; flex: none; flex-wrap: wrap;
}

.ntc-actions-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ntc-text-btn {
    border: none; background: transparent; color: #4b6cb7; font-size: 0.8rem;
    cursor: pointer; padding: 4px 2px; font-family: inherit;
}
.ntc-text-btn:hover { text-decoration: underline; }


.ntc-grp { margin-bottom: 14px; }
.ntc-grp > h4 {
    font-size: 0.74rem; color: #94a3b8; font-weight: 600; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.ntc-grp > h4::after { content: ""; flex: 1; height: 1px; background: #e8ecf2; }

.ntc-row {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    background: #fff; border: 1px solid #e8ecf2; border-radius: 10px;
    margin-bottom: 8px; cursor: pointer; min-width: 0;
}
.ntc-row:hover { border-color: #c8d2dc; }
.ntc-row.is-read { background: #fbfcfd; }
.ntc-row-ico {
    flex: none; width: 30px; height: 30px; border-radius: 9px; background: #f1f5f9;
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.ntc-row-body { flex: 1; min-width: 0; }
.ntc-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ntc-row-title {
    font-size: 0.86rem; font-weight: 700; color: #2c3e50; max-width: 60%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntc-row.is-read .ntc-row-title { color: #64748b; font-weight: 600; }
.ntc-badge { flex: none; font-size: 0.66rem; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.ntc-badge-pin { background: #fee2e2; color: #b91c1c; }
.ntc-badge-kind { background: #eef3fd; color: #4b6cb7; }
.ntc-dot-unread {
    flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-left: auto;
}
.ntc-row-main { font-size: 0.78rem; color: #4b5563; margin-top: 3px; line-height: 1.55; word-break: break-word; }
.ntc-row-sub { font-size: 0.74rem; color: #94a3b8; margin-top: 3px; }

.ntc-row-panel {
    font-size: 0.78rem; color: #4b5563; margin-top: 4px;
    line-height: 1.65; word-break: break-word;
}
.ntc-row-panel > div + div { margin-top: 2px; }

.ntc-row-detail {
    margin-top: 6px; background: #f8fafc; border: 1px solid #e8ecf2;
    border-radius: 8px; padding: 5px 8px;
}
.ntc-detail-line { display: flex; gap: 8px; font-size: 0.74rem; color: #4b5563; padding: 2px 0; flex-wrap: wrap; }
.ntc-dl-time { flex: none; color: #94a3b8; font-variant-numeric: tabular-nums; }
.ntc-dl-name { flex: none; font-weight: 600; color: #2c3e50; }
.ntc-dl-note { color: #b45309; }

.ntc-empty { padding: 26px 12px; color: #94a3b8; font-size: 0.82rem; text-align: center; line-height: 1.9; }
.ntc-empty span { font-size: 0.74rem; color: #b7c1cc; }



.ntc-center-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ntc-tabs { display: flex; gap: 6px; padding: 0 4px 10px; flex-wrap: wrap; }
.ntc-tab {
    padding: 6px 12px; border: 1px solid #e8ecf2; background: #fff; color: #64748b;
    border-radius: 999px; font-size: 0.78rem; cursor: pointer; font-family: inherit;
}
.ntc-tab.active { background: #4b6cb7; border-color: #4b6cb7; color: #fff; font-weight: 600; }
.ntc-center-body { padding: 2px 4px 16px; }


@media (max-width: 768px) {
    
    .ntc-sub-lead { display: none; }
    
    .ntc-dots { display: none; }
    
    .ntc-pin { display: none; }
    .ntc-title { max-width: 44%; }
    .ntc-strip { padding: 9px 10px; gap: 7px; font-size: 0.8rem; }
    .ntc-row-title { max-width: 100%; }
    .ntc-panel-box { max-height: 88vh; }
}




.tt-sync-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 4px;
    font-size: 13px;
    color: #23272d;
    cursor: pointer;
    user-select: none;
}
.tt-sync-label input {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.tt-sync-help {
    font-size: 12px;
    line-height: 1.5;
    color: #9aa0a8;
    margin-bottom: 4px;
}
.tt-sync-help b { color: #4b6cb7; }

.tt-sync-count {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #eef3fb;
    color: #185fa5;
    font-size: 12.5px;
}
.tt-sync-count b { font-size: 14px; }


.tt-note-block {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e6e9ee;
}
.tt-note-block .tt-note-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #23272d;
}
.tt-note-block .tt-note-title span {
    font-size: 11.5px;
    font-weight: 400;
    color: #9aa0a8;
}

.tt-note-ro-value {
    padding: 7px 10px;
    border-radius: 6px;
    background: #f6f7f9;
    color: #5a6068;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}


.cd-body { padding: 14px; }
#countdownPage .cd-body > .tm-type-tabs-bar { margin: 0 0 14px; }
#countdownPage .cd-body > .tm-type-tabs-bar .tm-type-tab.active { color: #e67e22; }


.cd-list { display: flex; flex-direction: column; gap: 8px; }
.cd-row {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #eef2f6; border-radius: 12px;
    padding: 10px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.cd-row.cd-hot { border-color: #ffd9d4; background: #fffafa; }
.cd-row.cd-past { opacity: .55; }
.cd-row-ico { font-size: 1.2rem; flex: none; }
.cd-row-main { flex: 1; min-width: 0; }
.cd-row-name { font-size: .92rem; font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row-src { font-size: .74rem; color: #94a3b8; margin-top: 3px; line-height: 1.45; word-break: keep-all; }
.cd-row-next { font-size: .72rem; color: #a8b3c2; margin-top: 2px; line-height: 1.45; }
.cd-tag {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
    background: #eef3ff; color: #4b6cb7; font-size: .66rem; font-weight: 600; vertical-align: middle;
    
    white-space: nowrap;
}

.cd-tag-once { background: #eef3ff; color: #4b6cb7; }
.cd-tag-week { background: #e6fffa; color: #0d7a70; }
.cd-tag-month { background: #fbeaf0; color: #993556; }
.cd-row-days { flex: none; text-align: right; min-width: 46px; }
.cd-row-days b {
    display: block; font-size: 1.3rem; font-weight: 800; color: #e67e22;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.cd-row.cd-hot .cd-row-days b { color: #F44336; }
.cd-row-days span { font-size: .66rem; color: #94a3b8; }
.cd-row-ops { display: flex; gap: 4px; flex: none; }
.cd-op {
    width: 28px; height: 28px; border: none; background: #f4f7fb; border-radius: 8px;
    cursor: pointer; font-size: .82rem; line-height: 1; padding: 0;
}
.cd-op:hover { background: #eef3fb; }


.cd-actions { display: flex; gap: 10px; margin-top: 14px; }
.cd-actions .btn { flex: 1; }
.cd-always {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 14px; padding: 10px 12px; background: #fff;
    border: 1px solid #eef2f6; border-radius: 10px;
    font-size: .82rem; color: #334155; cursor: pointer;
}
.cd-always input { width: 16px; height: 16px; flex: none; margin: 0; }
.cd-always-hint { flex-basis: 100%; font-size: .7rem; color: #94a3b8; line-height: 1.5; }


.cd-empty {
    text-align: center; padding: 30px 12px; background: #fff;
    border: 1px dashed #dbe3ec; border-radius: 12px; color: #94a3b8;
}
.cd-empty-ico { font-size: 2rem; margin-bottom: 8px; }
.cd-empty p { font-size: .86rem; margin: 0 0 6px; color: #64748b; }
.cd-empty .cd-empty-sub { font-size: .74rem; color: #a8b3c2; margin-bottom: 14px; }


.cd-year { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cd-year-cell { background: #fff; border: 1px solid #eef2f6; border-radius: 10px; padding: 9px 11px; min-width: 0; }
.cd-year-head {
    font-size: .8rem; font-weight: 700; color: #334155; margin-bottom: 5px;
    display: flex; justify-content: space-between; align-items: baseline;
}
.cd-year-head span { font-weight: 500; color: #a8b3c2; font-size: .7rem; }
.cd-year-none { font-size: .74rem; color: #cdd6e0; }
.cd-year-item { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: #64748b; line-height: 1.8; }
.cd-year-item.hot { color: #F44336; font-weight: 600; }

.cd-year-item.faint { color: #b8c0cc; }
.cd-year-item.faint .cd-year-d { color: #c7ced8; }
.cd-year-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-year-d { flex: none; font-size: .7rem; color: #a8b3c2; }
.cd-year-item.hot .cd-year-d { color: #F44336; }
.cd-year-tip { font-size: .72rem; color: #94a3b8; margin-top: 10px; line-height: 1.5; }

.cd-year-faint-demo { color: #b8c0cc; }


.cd-f-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.cd-f-row > label:first-child { width: 62px; flex: none; font-size: .82rem; color: #64748b; padding-top: 8px; }
.cd-f-row input[type=text], .cd-f-row input[type=date], .cd-f-row input[type=number], .cd-f-row select {
    padding: 7px 10px; border: 1.5px solid #e1e8ed; border-radius: 8px;
    font-size: .85rem; outline: none; background: #fff; color: #1e293b;
    max-width: 100%; box-sizing: border-box;
}
.cd-f-row input[type=text], .cd-f-row input[type=date] { flex: 1; min-width: 0; }
.cd-f-inline { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.cd-f-icons { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.cd-ico-pick {
    width: 34px; height: 34px; border: 1.5px solid #e1e8ed; background: #fff;
    border-radius: 9px; font-size: 1rem; cursor: pointer; line-height: 1; padding: 0;
}
.cd-ico-pick.on { border-color: #e67e22; background: #fff7ef; }
.cd-f-seg { display: flex; gap: 8px; flex: 1; }
.cd-seg {
    padding: 7px 16px; border: 1.5px solid #e1e8ed; border-radius: 8px;
    background: #fff; font-size: .84rem; color: #64748b; cursor: pointer;
}
.cd-seg.on { border-color: #e67e22; background: #fff7ef; color: #e67e22; font-weight: 700; }

.cd-f-seg-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1; }
.cd-f-seg-wrap .cd-seg { padding: 7px 4px; text-align: center; min-width: 0; white-space: nowrap; }

.cd-seg:disabled { opacity: .4; cursor: not-allowed; background: #f7f9fc; }
.cd-f-check {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: .84rem; color: #334155; flex: 1; cursor: pointer;
}
.cd-f-check input { width: 16px; height: 16px; flex: none; margin: 0; }
.cd-f-hint { font-size: .72rem; color: #94a3b8; line-height: 1.45; }
.cd-preview {
    margin: 4px 0 12px; padding: 10px 12px; background: #f6f8fc;
    border-radius: 9px; font-size: .84rem; color: #334155; line-height: 1.6;
}
.cd-preview b { color: #e67e22; }


@media (max-width: 560px) {
    .cd-f-seg-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .cd-year { grid-template-columns: 1fr; }
    
    .cd-f-row > label:first-child { width: 60px; }
}


.gl-body { padding: 14px; }
.gl-body > .tm-type-tabs-bar { margin: 0 0 14px; }
#goalPage .tm-type-tab.active { color: #4B6CB7; }


.gl-tip {
    font-size: .74rem; color: #7c8aa0; line-height: 1.55;
    background: #f6f9ff; border: 1px solid #e6eefc; border-radius: 10px;
    padding: 8px 11px; margin-bottom: 12px;
}
.gl-tip b { color: #4B6CB7; }


.gl-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.gl-card {
    position: relative; overflow: hidden;
    background: #fff; border: 1.5px solid #e8edf5; border-radius: 14px;
    padding: 13px 14px 11px 17px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.gl-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--glc, #4B6CB7);
}
.gl-click { cursor: pointer; transition: box-shadow .18s, transform .18s; }
.gl-click:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .09); transform: translateY(-1px); }
.gl-dead { border-color: #f6d5d1; }
.gl-ok { border-color: #c9ebd8; }
.gl-arch { opacity: .7; }

.gl-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gl-ico {
    width: 30px; height: 30px; flex: none; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .82rem;
}
.gl-name {
    flex: 1; min-width: 0; font-size: .95rem; font-weight: 700; color: #1e293b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


.gl-badge {
    flex: none; font-size: .67rem; font-weight: 700; line-height: 1.5;
    padding: 1px 7px; border-radius: 20px;
    background: #eef2fa; color: #4B6CB7;
}
.gl-badge.time { background: #e8f1fd; color: #2d7ff9; }
.gl-badge.cnt { background: #fff4e5; color: #e67e22; }
.gl-badge.mix { background: #f3e8ff; color: #8b5cf6; }
.gl-badge.ok { background: #e8f8ef; color: #1f9d55; }
.gl-badge.red { background: #fdecec; color: #e74c3c; }
.gl-badge.gray { background: #f0f2f5; color: #94a3b8; }


.gl-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: .76rem; }
.gl-bar-row.has-flag { padding-top: 19px; }              
.gl-bar-label { flex: none; width: 26px; color: #94a3b8; }
.gl-bar-track { --gl-barh: 9px; position: relative; flex: 1; min-width: 0; height: var(--gl-barh);
                background: #eef1f6; border-radius: 6px; }

.gl-bar-row.has-flag .gl-bar-track { margin-right: 11px; }
.gl-bar-fill { display: block; height: 100%; border-radius: 6px; transition: width .35s ease; }
.gl-bar-text { flex: none; color: #475569; font-size: .72rem; font-variant-numeric: tabular-nums; }
.gl-bar-hint { color: #94a3b8; font-size: .72rem; display: block; }


.gl-flag { position: absolute; bottom: var(--gl-barh); width: 1.5px; height: 14px; border-radius: 1px;
           background: var(--glc-f, #b3c0d1); transform: translateX(-.75px); }
.gl-flag::after { content: ''; position: absolute; left: 1.5px; top: 1px; width: 0; height: 0;
           border-top: 4px solid transparent; border-bottom: 4px solid transparent;
           border-left: 7px solid var(--glc-f, #b3c0d1); }
.gl-flag.on { --glc-f: var(--glc, #4B6CB7); }
.gl-flag-end { left: 100%; width: 2px; height: 17px; }
.gl-flag-end::after { left: 2px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 9px; }

.gl-dead .gl-flag.on { --glc-f: #cbd5e1; }


.gl-bar-note { font-size: .7rem; color: #94a3b8; margin: -2px 0 9px 34px; line-height: 1.5; }
.gl-bar-note b { color: #4B6CB7; }
.gl-dead .gl-bar-note b { color: #94a3b8; }


.gl-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-top: 9px; border-top: 1px dashed #eef1f6;
    font-size: .72rem; color: #94a3b8;
}
.gl-foot-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-foot-r { flex: none; display: flex; align-items: center; gap: 6px; color: #64748b; }
.gl-done-text { color: #1f9d55; font-weight: 700; }
.gl-over-text { color: #e74c3c; font-weight: 700; }


.gl-mini {
    font-size: .7rem; padding: 3px 9px; border-radius: 20px;
    border: 1.5px solid #e1e8ed; background: #fff; color: #4B6CB7;
    cursor: pointer; font-family: inherit; line-height: 1.4;
}
.gl-mini:hover { background: #f5f8ff; }
.gl-mini-del { color: #e74c3c; border-color: #fadbd8; }
.gl-mini-del:hover { background: #fef6f5; }


.gl-empty { text-align: center; padding: 46px 20px; }
.gl-empty-ico { font-size: 2.6rem; line-height: 1; margin-bottom: 12px; }
.gl-empty p { margin: 0 0 6px; font-size: .95rem; color: #64748b; }
.gl-empty .gl-empty-sub { font-size: .78rem; color: #a8b3c1; max-width: 330px; margin: 0 auto 16px; line-height: 1.6; }


.gl-detail { padding-bottom: 18px; }
.gl-d-head { background: #fff; border: 1.5px solid #e8edf5; border-radius: 14px; padding: 13px 14px; margin-bottom: 14px; }
.gl-back {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: none; padding: 0 0 10px;
    color: #4B6CB7; font-size: .8rem; cursor: pointer; font-family: inherit;
}
.gl-d-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gl-d-name { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 700; color: #1e293b; }
.gl-d-desc { margin-top: 9px; font-size: .83rem; color: #64748b; line-height: 1.65; }
.gl-d-meta { margin-top: 8px; font-size: .78rem; color: #94a3b8; }
.gl-d-sec {
    font-size: .82rem; font-weight: 700; color: #334155;
    margin: 18px 0 9px; padding-left: 9px; border-left: 3px solid #4B6CB7;
}
.gl-panel { background: #fff; border: 1.5px solid #e8edf5; border-radius: 12px; padding: 12px 14px; }
.gl-note { font-size: .76rem; color: #94a3b8; line-height: 1.65; padding: 4px 0; }


.gl-cg-title { font-size: .78rem; font-weight: 700; color: #64748b; margin: 10px 0 4px; }
.gl-cg-title:first-child { margin-top: 0; }
.gl-cg-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed #f1f4f9; font-size: .8rem; }
.gl-cg-row:last-child { border-bottom: none; }
.gl-kind { flex: none; font-size: .66rem; padding: 1px 6px; border-radius: 4px; background: #eef2fa; color: #4B6CB7; }
.gl-kind.h { background: #fff4e5; color: #e67e22; }
.gl-cg-nm { flex: 1; min-width: 0; color: #334155; line-height: 1.45; word-break: break-all; }
.gl-cg-sub { font-size: .7rem; color: #e67e22; }
.gl-cg-val { flex: none; font-size: .78rem; font-weight: 700; color: #4B6CB7; }


.gl-timeline { display: flex; flex-direction: column; }
.gl-tl-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #f1f4f9; font-size: .76rem; }
.gl-tl-row:last-child { border-bottom: none; }
.gl-tl-row > i { flex: none; font-size: .35rem; color: #cbd5e1; }
.gl-tl-date { flex: none; color: #94a3b8; font-variant-numeric: tabular-nums; }
.gl-tl-src { flex: 1; min-width: 0; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-tl-val { flex: none; font-weight: 700; color: #4B6CB7; }


.gl-d-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 20px; padding-top: 14px; border-top: 1px solid #eef1f6;
}

.gl-d-actions .btn {
    flex: none;
    padding: 9px 18px; border-radius: 10px;
    border: 1.5px solid #e1e8ed; background: #fff; color: #1e293b;
    font-size: .84rem; font-weight: 600; font-family: inherit; line-height: 1.35;
    cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.gl-d-actions .btn:hover { background: #f0f2f5; }
.gl-d-actions .btn:active { transform: translateY(1px); }
.gl-d-actions .btn-primary { background: #4B6CB7; border-color: #4B6CB7; color: #fff; }
.gl-d-actions .btn-primary:hover { background: #3d5a9e; border-color: #3d5a9e; }
.gl-d-actions .btn:focus-visible { outline: 2px solid #4B6CB7; outline-offset: 2px; }

.gl-danger { color: #e74c3c !important; border-color: #fadbd8 !important; }
.gl-danger:hover { background: #fef6f5 !important; }


.gl-f-sec {
    font-size: .82rem; font-weight: 700; color: #334155;
    margin: 16px 0 9px; padding-left: 9px; border-left: 3px solid #4B6CB7;
}
.gl-f-sec:first-child { margin-top: 0; }
.gl-f-row { margin-bottom: 12px; }
.gl-f-row > label { display: block; font-size: .8rem; color: #64748b; margin-bottom: 6px; }
.gl-f-in {
    display: block; width: 100%; box-sizing: border-box;
    padding: 8px 10px; border: 1.5px solid #e1e8ed; border-radius: 9px;
    font-size: .85rem; font-family: inherit; color: #1e293b; background: #fff; outline: none;
}
.gl-f-in:focus { border-color: #4B6CB7; }
.gl-f-in.sm { display: inline-block; width: 76px; }
.gl-f-in.xs { display: inline-block; width: 58px; padding: 3px 6px; font-size: .74rem; border-radius: 6px; }
.gl-f-ta { min-height: 56px; resize: vertical; line-height: 1.55; }
.gl-f-inline { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #64748b; flex-wrap: wrap; }
.gl-f-inline em { font-style: normal; }
.gl-f-hint { font-size: .72rem; color: #94a3b8; line-height: 1.55; margin-top: 6px; }


.gl-m-now {
    font-size: .78rem; color: #64748b; line-height: 1.65;
    background: #f6f8fc; border: 1px solid #e8eef7; border-radius: 9px;
    padding: 9px 12px; margin-bottom: 14px;
}
.gl-m-now b { color: #4B6CB7; }
.gl-m-sec { margin-bottom: 14px; }
.gl-m-sec-t { font-size: .78rem; font-weight: 700; color: #334155; margin-bottom: 7px; }
.gl-m-grid { display: flex; gap: 10px; }
.gl-m-field { position: relative; display: block; flex: 1; min-width: 0; }
.gl-m-field .gl-m-num {
    padding-right: 48px; font-variant-numeric: tabular-nums;
}
.gl-m-unit {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: .74rem; color: #94a3b8; pointer-events: none;
}

.gl-m-num::-webkit-outer-spin-button,
.gl-m-num::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.gl-m-num[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.gl-m-num::placeholder { color: #cbd5e1; }

.gl-m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.gl-m-chip {
    padding: 5px 11px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid #e1e8ed; background: #fff; color: #64748b;
    font-size: .74rem; font-weight: 600; font-family: inherit;
    transition: background .18s, border-color .18s, color .18s;
}
.gl-m-chip:hover { background: #f0f4fa; border-color: #cfdcec; color: #4B6CB7; }
.gl-req { color: #e74c3c; font-style: normal; }


.gl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gl-chip { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #e1e8ed; background: #fff; border-radius: 9px; cursor: pointer; }
.gl-chip-ico { width: 34px; height: 34px; font-size: .9rem; color: #64748b; }
.gl-chip-ico.on { border-color: #4B6CB7; background: #f4f7ff; color: #4B6CB7; }
.gl-chip-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #e1e8ed; }
.gl-chip-color.on { box-shadow: 0 0 0 2.5px #4B6CB7; }
.gl-chip-mode { flex-direction: column; gap: 1px; padding: 7px 15px; font-size: .82rem; color: #64748b; line-height: 1.35; }
.gl-chip-mode small { font-size: .66rem; color: #a8b3c1; }
.gl-chip-mode.on { border-color: #4B6CB7; background: #f4f7ff; color: #4B6CB7; font-weight: 700; }
.gl-chip-mode.on small { color: #7d92c4; }


.gl-cand-tabs { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; }
.gl-cand-tab { border: none; background: #f1f4f9; color: #64748b; font-size: .78rem; font-family: inherit; padding: 6px 13px; border-radius: 20px; cursor: pointer; }
.gl-cand-tab.on { background: #4B6CB7; color: #fff; font-weight: 700; }
.gl-cand-count { margin-left: auto; font-size: .72rem; color: #94a3b8; }
.gl-cand-search { margin-bottom: 8px; }
.gl-cand-list { max-height: 220px; overflow-y: auto; border: 1.5px solid #eef1f6; border-radius: 10px; padding: 2px 9px; background: #fcfdff; }
.gl-cand-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px dashed #eef1f6; font-size: .82rem; color: #334155; cursor: pointer; }
.gl-cand-row:last-child { border-bottom: none; }
.gl-cand-row > i { flex: none; color: #cbd5e1; }
.gl-cand-row.on > i { color: #4B6CB7; }
.gl-cand-row.on { color: #1e293b; font-weight: 600; }
.gl-cand-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-cand-nm small { font-weight: 400; color: #a8b3c1; }
.gl-cand-factor { flex: none; font-size: .72rem; color: #94a3b8; }
.gl-cand-empty { padding: 14px 4px; font-size: .78rem; color: #a8b3c1; text-align: center; }
.gl-cand-new { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gl-cand-new .gl-f-hint { margin-top: 0; }


.gl-picker { position: relative; }
.gl-picker-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
    padding: 8px 10px; border: 1.5px solid #e1e8ed; border-radius: 9px;
    background: #fff; font-size: .84rem; font-family: inherit; color: #475569; cursor: pointer;
}
.gl-picker-btn.open { border-color: #4B6CB7; }
.gl-picker-btn > span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-picker-caret { flex: none; font-size: .72rem; color: #a8b3c1; }
.gl-picker-menu {
    margin-top: 6px; border: 1.5px solid #e1e8ed; border-radius: 10px; background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08); max-height: 220px; overflow-y: auto;
}
.gl-picker-item { display: flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: .83rem; color: #334155; cursor: pointer; }
.gl-picker-item:hover { background: #f7faff; }
.gl-picker-item > i { flex: none; font-size: .85rem; color: #cbd5e1; }
.gl-picker-item.on > i { color: #4B6CB7; }
.gl-picker-item.dis { opacity: .55; }
.gl-picker-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-picker-pct { flex: none; font-size: .72rem; color: #94a3b8; }
.gl-picker-empty { padding: 14px; font-size: .78rem; color: #a8b3c1; text-align: center; }
.gl-picker-new { padding: 10px 11px; border-top: 1px solid #eef1f6; font-size: .8rem; font-weight: 700; color: #4B6CB7; cursor: pointer; }
.gl-picker-new:hover { background: #f7faff; }


.gl-unit-dd { position: relative; display: inline-block; margin-left: 8px; }
.gl-unit-btn { border: 1.5px solid #dde4ee; background: #fff; color: #334155; font-size: .82rem;
    font-family: inherit; padding: 6px 10px; border-radius: 8px; cursor: pointer; min-width: 72px; }
.gl-unit-btn:hover { border-color: #4B6CB7; color: #4B6CB7; }
.gl-unit-btn i { font-size: .68rem; color: #94a3b8; margin-left: 3px; }
.gl-unit-panel { position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; width: 228px;
    background: #fff; border: 1.5px solid #e6ebf3; border-radius: 10px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
    padding: 8px; max-height: 216px; overflow-y: auto; }
.gl-unit-opt { display: inline-block; padding: 4px 10px; margin: 0 4px 6px 0; font-size: .76rem;
    color: #64748b; border: 1px solid #e6ebf3; border-radius: 999px; cursor: pointer; }
.gl-unit-opt.on { border-color: #4B6CB7; background: #f4f7ff; color: #4B6CB7; font-weight: 700; }
.gl-unit-custom { display: flex; gap: 6px; align-items: center;
    border-top: 1px dashed #eef1f6; padding-top: 8px; margin-top: 2px; }
.gl-unit-custom .gl-f-in { flex: 1; min-width: 0; }


.gl-cand-cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.gl-cat-chip { padding: 3px 11px; font-size: .74rem; color: #64748b; background: #f1f4f9;
    border-radius: 999px; cursor: pointer; }
.gl-cat-chip.on { background: #4B6CB7; color: #fff; font-weight: 700; }


.acct-edit-modal-overlay.gl-top { z-index: 1200; }


@media (max-width: 600px) {
    .gl-body { padding: 10px; }
    .gl-grid { grid-template-columns: 1fr; }
    .gl-f-row > label { font-size: .78rem; }
    .gl-d-actions .btn { font-size: .8rem; }
    .gl-unit-in { width: 56px; }
}


.cd-sec {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: .8rem; font-weight: 700; color: #475569; margin: 14px 0 8px;
}
.cd-sec:first-child { margin-top: 0; }
.cd-sec span { font-size: .7rem; font-weight: 500; color: #a8b3c2; }
.cd-sec-up { color: #0d9488; }
.cd-sec-up span { color: #94b8b4; }

.cd-row-up { background: #f7fdfc; border-color: #d7f0ee; border-left: 3px solid #0d9488; }
.cd-row-up.cd-up-mil { background: #fffdf6; border-left-color: #eab308; }
.cd-row-up .cd-row-days b { color: #0d9488; }
.cd-row-up.cd-up-mil .cd-row-days b { color: #d97706; }
.cd-tag-up { background: #e6fffa; color: #0d7a70; }
.cd-tag-mil { background: #fef9c3; color: #a16207; }
.cd-tag-push { background: #fff7ef; color: #c2410c; }

.cd-days-up { min-width: 56px; }
.cd-days-up .cd-already { display: block; font-size: .64rem; color: #94b8b4; line-height: 1.2; }

.cd-days-up .cd-num-today { font-size: .92rem; letter-spacing: 0; }

.cd-seg-up.on { border-color: #0d9488; background: #f0fbfa; color: #0d7a70; }
.cd-f-switch {
    display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap;
    font-size: .84rem; color: #334155; cursor: pointer;
}
.cd-f-switch input { width: 16px; height: 16px; flex: none; margin: 0; }

.cd-f-row.cd-f-wide > label:first-child { width: 80px; }
.cd-radio-row { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.cd-radio {
    display: flex; align-items: center; gap: 5px; padding: 6px 10px;
    border: 1.5px solid #e1e8ed; border-radius: 8px; background: #fff;
    font-size: .78rem; color: #475569; cursor: pointer;
}
.cd-radio.on { border-color: #0d9488; background: #f0fbfa; color: #0d7a70; font-weight: 600; }
.cd-radio input { width: 14px; height: 14px; margin: 0; }


@media (max-width: 480px) {
    .cd-tag-up { display: none; }
    .cd-row-up .cd-row-days { min-width: 52px; }
}





@media (max-width: 1023px) {
    .landing-nav-links { display: flex; gap: 14px; margin-left: auto; }
    .landing-nav-links a { display: none; }
    .landing-nav-links a[href="VIP会员.html"] { display: inline-block; font-size: 13px; font-weight: 600; }
}









.account-controls { display: flex; align-items: center; gap: 8px; }




.account-card {
    position: relative;
    display: inline-flex;
    padding: 6px 14px 7px;
    border: 2px solid rgba(176, 188, 208, .48);
    border-radius: 16px;
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}


.account-card:not(.is-vip):not(.is-perm):hover { border-color: #e8c25a; background: rgba(255, 255, 255, .13); }
.account-card:not(.is-vip):not(.is-perm):active { border-color: #f0c24a; background: rgba(255, 255, 255, .16); }


.account-card.is-vip {
    border-color: #dcae37;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}


.account-card.is-perm {
    border-color: transparent;
    background: rgba(255, 255, 255, .15);
    box-shadow:
        0 0 16px rgba(240, 194, 74, .6),
        0 0 0 1px rgba(255, 246, 208, .32),
        inset 0 0 0 1px rgba(255, 246, 208, .42),
        0 4px 16px rgba(0, 0, 0, .26);
}

.account-card.is-perm::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg,
        #fffbe8 0%, #e8bc45 20%, #a9761a 42%, #ffe08a 62%, #9c6a10 82%, #fff6d0 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}


.account-card .account-trigger,
.account-card .account-trigger:hover {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: block;
}


.account-card #currentAccountName { gap: 3px; }
.account-card #currentAccountName .account-trigger-avatar { font-size: 34px; line-height: 1; }
.account-card #currentAccountName img {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}
.account-card #currentAccountName .account-trigger-label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.account-card #vipCenterBtn {
    position: absolute;
    top: -9px;
    right: 9px;
    z-index: 2;
    width: 20px;
    height: 20px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1.6px solid #22335a;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.account-card #vipCenterBtn:hover { transform: scale(1.1); box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.account-card #vipCenterBtn:active { transform: scale(1); }
.account-card #vipCenterBtn .vip-center-ico { width: 11px; height: 11px; flex-shrink: 0; }
.account-card.is-perm #vipCenterBtn {
    width: 22px;
    height: 22px;
    top: -10px;
    right: 8px;
    border-color: #2b1d00;
    box-shadow:
        0 0 0 1.5px rgba(255, 246, 208, .9),
        0 0 9px rgba(240, 194, 74, .75),
        0 1px 4px rgba(0, 0, 0, .45);
}
.account-card.is-perm #vipCenterBtn .vip-center-ico { width: 12px; height: 12px; }

.account-card #vipCenterBtn #vipCenterLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}


@media (max-width: 600px) {
    .account-card { padding: 5px 11px 6px; border-radius: 14px; }
    .account-card #currentAccountName .account-trigger-avatar { font-size: 30px; }
    .account-card #currentAccountName img { width: 30px; height: 30px; }
    .account-card #vipCenterBtn { width: 18px; height: 18px; top: -9px; right: 7px; }
    .account-card #vipCenterBtn .vip-center-ico { width: 10px; height: 10px; }
    .account-card.is-perm #vipCenterBtn { width: 20px; height: 20px; top: -10px; right: 6px; }
}




.edit-page.sc-page .stats-header,
.edit-page.sc-page .sc-body { max-width: 820px; }

.sc-head-actions { display: flex; align-items: center; gap: 8px; }


.edit-page.sc-page .sc-body { padding: 0; }


.sc-wrap {
    min-height: 100%;
    box-sizing: border-box;
    padding: 8px 16px 16px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}


.sc-list { min-width: 0; }


.sc-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 2px;
    border: 0;
    border-bottom: 1px solid #f2f4f8;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.sc-item:last-child { border-bottom: 0; }
.sc-item:hover { background: #f8fafe; }


.sc-ico {
    width: 32px; height: 32px;
    border-radius: 9px;
    flex: 0 0 auto;
    
    color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}


.sc-txt { display: block; min-width: 0; }
.sc-name {
    display: block;
    font-size: 14.5px; font-weight: 600; color: #2f3844;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-desc {
    display: block;
    margin-top: 3px;
    font-size: 12.5px; line-height: 1.45; color: #98a2b3;
}

.sc-tail { display: flex; align-items: center; gap: 6px; }
.sc-val { font-size: 12.5px; color: #7b8794; }
.sc-chev { width: 15px; height: 15px; flex: 0 0 auto; opacity: .45; }


@media (max-width: 780px) {
    .edit-page.sc-page { padding: 0; }
    .edit-page.sc-page .stats-header { max-width: none; border-radius: 0; }
    .edit-page.sc-page .sc-body { max-width: none; }
    .sc-wrap {
        padding: 6px 14px 12px;
        border-radius: 0; box-shadow: none;
    }
    .sc-item { padding: 12px 2px; gap: 11px; }
}








#habitDetailModal .modal-content { max-width: 760px; }

.hd-modal .modal-body { padding: 16px 18px 18px; }


.hd-modal .modal-header h3 > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
}

.hd-modal .modal-header h3 > span:first-child i { font-size: 14px; }


.hd-hero { margin-bottom: 14px; }

.hd-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.hd-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    background: #eef2fa;
    color: #4b6cb7;
    font-size: 12px;
    line-height: 1.6;
}

.hd-hero-desc {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-light);
    overflow-wrap: anywhere;
}

.hd-hero-desc:empty { display: none; }


.hd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.hd-col {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
}


.hd-block { min-width: 0; }

.hd-block-t {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.hd-block-t i { color: #4b6cb7; font-size: 13px; }

.hd-block-sub {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-muted);
    text-align: right;
}


.hd-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.hd-card {
    min-width: 0;
    padding: 9px 10px 10px;
    border-radius: 10px;
    background: #f6f8fd;
    border: 1px solid #e8eef8;
    border-left-width: 3px;
}

.hd-card-k {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-card-v {
    margin-top: 2px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    color: #2f3646;
}

.hd-card-v small {
    margin-left: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-light);
}

.hd-c-blue   { border-left-color: #4B6CB7; }
.hd-c-green  { border-left-color: #5CB85C; }
.hd-c-orange { border-left-color: #FFA726; }
.hd-c-purple { border-left-color: #9C27B0; }
.hd-c-blue   .hd-card-v { color: #4B6CB7; }
.hd-c-green  .hd-card-v { color: #4CAF50; }
.hd-c-orange .hd-card-v { color: #F08A24; }
.hd-c-purple .hd-card-v { color: #9C27B0; }


.hd-heat .habit-heat-scroll { padding-bottom: 2px; }
.hd-heat .habit-heat-legend { margin-top: 10px; }


.hd-heat-lg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
}

.hd-heat-lg b { font-weight: 600; color: #5a6378; }


.hd-trend-body { display: flex; gap: 6px; }

.hd-trend-y {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 96px;
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
}

.hd-trend-y span {
    position: absolute;
    right: 0;
    line-height: 1;
    transform: translateY(-50%);
}

.hd-trend-y span:nth-child(1) { top: 8px; }
.hd-trend-y span:nth-child(2) { top: 49px; }
.hd-trend-y span:nth-child(3) { top: 90px; }

.hd-trend-plot { flex: 1 1 auto; min-width: 0; }

.hd-trend-svg { display: block; width: 100%; height: 96px; }

.hd-trend-grid { stroke: #edf0f6; stroke-width: 1; }

.hd-trend-area { fill: rgba(75, 108, 183, 0.10); }

.hd-trend-line {
    fill: none;
    stroke: #4b6cb7;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.hd-trend-dot { fill: #fff; stroke: #4b6cb7; stroke-width: 1.5; }

.hd-trend-x {
    position: relative;
    height: 14px;
    margin: 3px 0 0 38px;
    font-size: 10px;
    color: var(--text-muted);
}

.hd-trend-x span {
    position: absolute;
    top: 0;
    line-height: 14px;
    white-space: nowrap;
}

.hd-trend-empty {
    padding: 26px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}


.hd-wd-list .habit-rank-row {
    grid-template-columns: 34px minmax(0, 1fr) 46px;
    grid-template-rows: auto;
}

.hd-wd-list .habit-rank-name { grid-row: 1; }
.hd-wd-list .habit-rank-extra { display: none; }


.hd-fold {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.hd-fold-head {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: #f7f9fc;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.hd-fold-t i { margin-right: 6px; color: #4b6cb7; }

.hd-fold-ico {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}

.hd-fold-body { padding: 12px; border-top: 1px solid var(--border); }

.hd-fold-body.is-collapsed { display: none; }

.hd-cfg .habit-detail-info-grid { margin-bottom: 0; }
.hd-cfg .habit-goal-wrap:not(:empty) { margin-top: 12px; }

.hd-log-list { max-height: 260px; overflow-y: auto; }


.hd-actions {
    margin-top: 16px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    text-align: left;
}


.hd-actions .btn {
    padding: 10px 12px;
    font-size: 14px;
}


@media (max-width: 1000px) {
    
    #habitDetailModal .modal-content { max-width: 480px; }

    .hd-grid { grid-template-columns: minmax(0, 1fr); }

    
    .hd-col { display: contents; }
    .hd-cards   { order: 1; }
    .hd-heat    { order: 2; }
    .hd-trend   { order: 3; }
    .hd-weekday { order: 4; }
    .hd-cfg     { order: 5; }
    .hd-log     { order: 6; }
}




.habit-archived {
    margin: 16px 0 8px;
    padding: 14px 14px 6px;
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(75, 108, 183, 0.07);
}

.habit-archived-t {
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-light);
}

.habit-archived-t i { margin-right: 6px; color: var(--text-muted); }




.auth-ref-fold { margin-top: 10px; text-align: center; }
.auth-ref-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 10px;
    background: none; border: 0; border-radius: 8px;
    color: #8a93a6; font-size: 13px; font-family: inherit; line-height: 1.3;
    cursor: pointer;
}
.auth-ref-toggle:hover,
.auth-ref-toggle.is-open,
.auth-ref-toggle.is-filled { color: #2b6cff; }
.auth-ref-toggle:active { opacity: 0.7; }

.auth-ref-caret { font-size: 10px; transition: transform 0.18s ease; }
.auth-ref-toggle.is-open .auth-ref-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .auth-ref-caret { transition: none; }
}


.auth-referrer { margin-top: 4px; margin-bottom: 16px; }
.auth-referrer label {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.auth-ref-opt { font-style: normal; font-weight: 400; color: #9aa3b5; font-size: 12px; }

.auth-referrer.has-ref .auth-ref-opt { display: none; }
.auth-ref-who {
    font-size: 12px; color: #2b6cff; font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auth-ref-line { display: flex; gap: 8px; align-items: stretch; }

.auth-ref-line input { flex: 1 1 0%; width: auto; min-width: 0; }

.auth-ref-line input.is-locked { background: #f6f8fc; color: #333; }
.auth-ref-btn {
    flex: 0 0 auto; padding: 0 16px; border: 0; border-radius: 10px;
    background: #2b6cff; color: #fff; font-size: 14px; cursor: pointer;
}
.auth-ref-btn:active { background: #1f57d6; }
.auth-ref-tip { margin: 6px 0 0; font-size: 11px; color: #8a93a6; line-height: 1.4; }

.auth-ref-tip.is-warn { color: #d14343; }

.auth-ref-line input.is-invalid { border-color: #d14343; }


.rf-wrap { max-width: 720px; margin: 0 auto; padding: 12px 14px 32px; }
.rf-card { background: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.rf-code { font-size: 26px; letter-spacing: 4px; font-weight: 700; color: #2b6cff; text-align: center; }
.rf-link { display: block; word-break: break-all; font-size: 12px; color: #5a6478;
    background: #f5f7fb; border-radius: 8px; padding: 8px 10px; margin: 10px 0; }
.rf-funnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.rf-funnel b { display: block; font-size: 20px; color: #1f2937; }
.rf-funnel span { font-size: 11px; color: #8a93a6; }
.rf-row { display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0; border-bottom: 1px solid #f0f2f7; font-size: 13px; }
.rf-row:last-child { border-bottom: 0; }


@media (max-width: 400px) {
    .hxb-foot-links { gap: 6px; flex-wrap: nowrap; }
    .hxb-foot-links .hxb-foot-link { flex: 0 1 auto; padding: 7px 9px; font-size: 11px; gap: 4px; }
    .hxb-foot-links .hxb-foot-link i { font-size: 11px; }
}
@media (max-width: 340px) {
    .hxb-foot-links { gap: 4px; }
    .hxb-foot-links .hxb-foot-link { padding: 7px 7px; font-size: 10.5px; gap: 3px; }
}