* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            line-height: 1.5;
            color: #1a1a1a;
            background: #ffffff;
        }

        .app-header {
            background: #ffffff;
            border-bottom: 1px solid #e5e5e5;
            padding: 16px 24px;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .app-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 0 1 auto;
        }

        .app-logo {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: #0b4d85;
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.4px;
            flex-shrink: 0;
        }

        .app-header h1 {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Search styles */
        .search-container {
            position: relative;
            flex: 1;
            max-width: 400px;
        }

        .search-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.15s;
        }

        .search-input:focus {
            outline: none;
            border-color: #0066cc;
        }

        .search-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 4px;
            background: white;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            max-height: 400px;
            overflow-y: auto;
            display: none;
            z-index: 1000;
        }

        .search-results.show {
            display: block;
        }

        .search-result-item {
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background 0.15s;
        }

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

        .search-result-item:hover {
            background: #f8f8f8;
        }

        .search-result-subject {
            font-size: 11px;
            color: #0066cc;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .search-result-unit {
            font-size: 11px;
            color: #999;
            margin-bottom: 4px;
        }

        .search-result-topic {
            font-size: 13px;
            color: #0066cc;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .search-result-title {
            font-size: 14px;
            color: #1a1a1a;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .search-result-description {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
        }

        .search-highlight {
            background: #fff3cd;
            padding: 0 2px;
            border-radius: 2px;
        }

        .search-no-results {
            padding: 20px;
            text-align: center;
            color: #999;
            font-size: 14px;
        }

        @keyframes highlight-flash {
            0%, 100% { background: #ffffff; }
            50% { background: #fff3cd; }
        }

        /* Subject selection styles */
        .subject-view {
            display: none;
        }

        .subject-view.active {
            display: block;
        }

        .subject-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            padding: 32px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .subject-card {
            background: white;
            border: 2px solid #e5e5e5;
            border-radius: 8px;
            padding: 24px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .subject-card:hover {
            border-color: #0066cc;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        .subject-icon {
            font-size: 36px;
            margin-bottom: 12px;
        }

        .subject-name {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        .subject-name-en {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }

        .subject-units {
            font-size: 13px;
            color: #999;
        }

        .subject-progress {
            margin-top: 12px;
            font-size: 12px;
            color: #0066cc;
        }

        .back-button {
            padding: 8px 16px;
            background: #f0f0f0;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            color: #1a1a1a;
            transition: all 0.15s;
        }

        .back-button:hover {
            background: #e5e5e5;
        }

        /* New Layout Styles */
        .app-container {
            display: flex;
            height: calc(100vh - 60px);
            overflow: hidden;
        }

        /* Subjects Sidebar */
        .subjects-sidebar {
            width: 240px;
            background: #f8f9fa;
            border-right: 1px solid #e5e5e5;
            overflow-y: auto;
            transition: transform 0.3s ease;
            position: relative;
            flex-shrink: 0;
        }

        .subjects-sidebar.collapsed {
            transform: translateX(-240px);
        }

        .sidebar-toggle {
            position: absolute;
            right: -40px;
            top: 20px;
            width: 40px;
            height: 40px;
            background: #f8f9fa;
            border: 1px solid #e5e5e5;
            border-left: none;
            border-radius: 0 8px 8px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            z-index: 10;
        }

        .sidebar-toggle:hover {
            background: #e9ecef;
        }

        .subjects-list {
            padding: 16px;
        }

        .subjects-list-header {
            font-size: 14px;
            font-weight: 600;
            color: #666;
            padding: 8px 12px;
            margin-bottom: 8px;
        }

        /* Category Filter Styles */
        .category-filters {
            padding: 12px;
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 12px;
        }

        .category-filter-title {
            font-size: 12px;
            font-weight: 600;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            padding: 0 4px;
        }

        .category-filter-btn {
            display: block;
            width: 100%;
            padding: 8px 12px;
            margin-bottom: 4px;
            background: white;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            color: #1a1a1a;
            text-align: left;
            transition: all 0.15s;
        }

        .category-filter-btn:hover {
            border-color: #0066cc;
            background: #f0f7ff;
        }

        .category-filter-btn.active {
            border-color: #0066cc;
            background: #0066cc;
            color: white;
            font-weight: 500;
        }

        .category-count {
            float: right;
            font-size: 11px;
            opacity: 0.7;
        }

        .subject-item {
            padding: 12px;
            margin-bottom: 4px;
            background: white;
            border: 1px solid #e5e5e5;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .subject-item:hover {
            border-color: #0066cc;
            background: #f0f7ff;
        }

        .subject-item.active {
            border-color: #0066cc;
            background: #e8f4ff;
        }

        .subject-item-icon {
            font-size: 20px;
            flex-shrink: 0;
        }

        .subject-item-text {
            flex: 1;
            min-width: 0;
        }

        .subject-item-name {
            font-size: 14px;
            font-weight: 500;
            color: #1a1a1a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .subject-item-name-en {
            font-size: 11px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Main Area */
        .main-area {
            flex: 1;
            overflow-y: auto;
            background: white;
        }

        /* Welcome View */
        .welcome-view {
            display: none;
            max-width: 900px;
            margin: 0 auto;
            padding: 60px 40px;
        }

        .welcome-view.active {
            display: block;
        }

        .welcome-title {
            font-size: 42px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
        }

        .welcome-subtitle {
            font-size: 20px;
            color: #666;
            margin-bottom: 40px;
            line-height: 1.6;
        }

        .welcome-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        .welcome-feature {
            padding: 24px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e5e5e5;
        }

        .welcome-feature-icon {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .welcome-feature-title {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        .welcome-feature-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }

        .welcome-cta {
            text-align: center;
            padding: 40px 0;
        }

        .welcome-cta-text {
            font-size: 18px;
            color: #666;
            margin-bottom: 20px;
        }

        .welcome-cta-arrow {
            font-size: 32px;
            color: #0066cc;
            animation: bounce 2s infinite;
        }

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

        /* Subject Content View */
        .subject-content-view {
            display: none;
            height: 100%;
        }

        .subject-content-view.active {
            display: block;
        }

        .unit-view {
            display: none;
        }

        .unit-view.active {
            display: flex;
        }

        /* Quiz modal styles */
        .quiz-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .quiz-modal.show {
            display: flex;
        }

        .quiz-container {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .quiz-header {
            padding: 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .quiz-header h3 {
            font-size: 18px;
            font-weight: 600;
        }

        .quiz-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 0;
            width: 30px;
            height: 30px;
        }

        .quiz-body {
            padding: 20px;
        }

        .quiz-question {
            margin-bottom: 20px;
        }

        .quiz-question-text {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 16px;
            line-height: 1.6;
        }

        .quiz-options {
            list-style: none;
        }

        .quiz-option {
            padding: 12px 16px;
            margin-bottom: 8px;
            border: 2px solid #e5e5e5;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
        }

        .quiz-option:hover {
            border-color: #0066cc;
            background: #f8f8f8;
        }

        .quiz-option.selected {
            border-color: #0066cc;
            background: #e8f4ff;
        }

        .quiz-option.correct {
            border-color: #28a745;
            background: #d4edda;
        }

        .quiz-option.incorrect {
            border-color: #dc3545;
            background: #f8d7da;
        }

        .quiz-option.disabled {
            cursor: not-allowed;
            opacity: 0.7;
        }

        .quiz-explanation {
            margin-top: 16px;
            padding: 16px;
            background: #f8f9fa;
            border-left: 4px solid #0066cc;
            border-radius: 4px;
            display: none;
        }

        .quiz-explanation.show {
            display: block;
        }

        .quiz-explanation-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: #1a1a1a;
        }

        .quiz-explanation-text {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
        }

        .quiz-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .quiz-button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.15s;
        }

        .quiz-button-primary {
            background: #0066cc;
            color: white;
        }

        .quiz-button-primary:hover:not(:disabled) {
            background: #0052a3;
        }

        .quiz-button-primary:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .quiz-button-secondary {
            background: #f0f0f0;
            color: #1a1a1a;
        }

        .quiz-button-secondary:hover {
            background: #e5e5e5;
        }

        .quiz-progress {
            font-size: 14px;
            color: #666;
            margin-bottom: 16px;
        }

        .quiz-score {
            text-align: center;
            padding: 30px 20px;
        }

        .quiz-score-number {
            font-size: 48px;
            font-weight: 700;
            color: #0066cc;
            margin-bottom: 12px;
        }

        .quiz-score-text {
            font-size: 18px;
            color: #666;
            margin-bottom: 24px;
        }

        .practice-button {
            padding: 6px 12px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            margin-left: 8px;
            transition: background 0.15s;
        }

        .practice-button:hover {
            background: #218838;
        }

        /* Flashcard Modal Styles */
        .flashcard-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .flashcard-modal.show {
            display: flex;
        }

        .flashcard-container {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .flashcard-header {
            padding: 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .flashcard-header h3 {
            font-size: 18px;
            font-weight: 600;
        }

        .flashcard-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 0;
            width: 30px;
            height: 30px;
        }

        .flashcard-progress {
            padding: 16px 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .flashcard-progress span {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e5e5e5;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #0066cc;
            transition: width 0.3s ease;
        }

        .flashcard-body {
            padding: 40px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .flashcard {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1000px;
            cursor: pointer;
        }

        .flashcard-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flashcard-inner.flipped {
            transform: rotateY(180deg);
        }

        .flashcard-front,
        .flashcard-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border: 2px solid #e5e5e5;
            border-radius: 12px;
            padding: 32px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: white;
        }

        .flashcard-front {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
        }

        .flashcard-back {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border-color: #f093fb;
            transform: rotateY(180deg);
        }

        .card-label {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.8;
            margin-bottom: 16px;
        }

        .card-content {
            font-size: 24px;
            font-weight: 500;
            text-align: center;
            line-height: 1.5;
        }

        .flashcard-hint {
            font-size: 13px;
            color: #999;
            text-align: center;
        }

        .flashcard-controls {
            padding: 20px;
            border-top: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
        }

        .flashcard-nav-btn {
            padding: 10px 20px;
            background: #f0f0f0;
            border: 1px solid #e5e5e5;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.15s;
        }

        .flashcard-nav-btn:hover {
            background: #e5e5e5;
        }

        .flashcard-nav-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .flashcard-actions {
            display: flex;
            gap: 12px;
        }

        .flashcard-action-btn {
            padding: 10px 20px;
            border: 2px solid;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.15s;
        }

        .know-btn {
            background: white;
            border-color: #10b981;
            color: #10b981;
        }

        .know-btn:hover {
            background: #10b981;
            color: white;
        }

        .study-btn {
            background: white;
            border-color: #f59e0b;
            color: #f59e0b;
        }

        .study-btn:hover {
            background: #f59e0b;
            color: white;
        }

        /* Learn Mode Modal Styles */
        .learn-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .learn-modal.show {
            display: flex;
        }

        .learn-container {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .learn-header {
            padding: 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .learn-header h3 {
            font-size: 18px;
            font-weight: 600;
        }

        .learn-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 0;
            width: 30px;
            height: 30px;
        }

        .learn-progress {
            padding: 16px 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .learn-progress span {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }

        .learn-body {
            padding: 32px 20px;
        }

        .learn-question {
            margin-bottom: 24px;
        }

        .learn-question-text {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .learn-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e5e5e5;
            border-radius: 6px;
            font-size: 16px;
            font-family: inherit;
            transition: border-color 0.15s;
        }

        .learn-input:focus {
            outline: none;
            border-color: #0066cc;
        }

        .learn-feedback {
            margin-top: 16px;
            padding: 16px;
            border-radius: 6px;
            display: none;
        }

        .learn-feedback.show {
            display: block;
        }

        .learn-feedback.correct {
            background: #d4edda;
            border: 1px solid #28a745;
            color: #155724;
        }

        .learn-feedback.incorrect {
            background: #f8d7da;
            border: 1px solid #dc3545;
            color: #721c24;
        }

        .learn-answer {
            margin-top: 12px;
            font-weight: 500;
        }

        .learn-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .learn-button {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.15s;
        }

        .learn-button-primary {
            background: #0066cc;
            color: white;
        }

        .learn-button-primary:hover {
            background: #0052a3;
        }

        .learn-button-secondary {
            background: #f0f0f0;
            color: #1a1a1a;
        }

        .learn-button-secondary:hover {
            background: #e5e5e5;
        }

        .learn-summary {
            text-align: center;
            padding: 40px 20px;
        }

        .learn-summary-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .learn-summary-stats {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin-top: 24px;
        }

        .learn-stat {
            text-align: center;
        }

        .learn-stat-number {
            font-size: 32px;
            font-weight: 700;
            color: #0066cc;
        }

        .learn-stat-label {
            font-size: 14px;
            color: #666;
            margin-top: 4px;
        }

        /* Match Game Modal Styles */
        .match-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .match-modal.show {
            display: flex;
        }

        .match-container {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .match-header {
            padding: 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .match-header h3 {
            font-size: 18px;
            font-weight: 600;
        }

        .match-stats {
            display: flex;
            gap: 20px;
            font-size: 14px;
            font-weight: 500;
            color: #666;
        }

        .match-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 0;
            width: 30px;
            height: 30px;
        }

        .match-body {
            padding: 32px 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px;
        }

        .match-card {
            padding: 20px;
            background: white;
            border: 2px solid #e5e5e5;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .match-card:hover {
            border-color: #0066cc;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .match-card.selected {
            border-color: #0066cc;
            background: #e8f4ff;
        }

        .match-card.matched {
            border-color: #10b981;
            background: #d1fae5;
            cursor: default;
            opacity: 0.6;
        }

        .match-card.wrong {
            border-color: #ef4444;
            background: #fee2e2;
            animation: shake 0.5s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }

        .match-result {
            padding: 40px 20px;
            text-align: center;
        }

        .match-result h2 {
            font-size: 32px;
            margin-bottom: 20px;
        }

        .result-time {
            font-size: 18px;
            color: #666;
            margin-bottom: 24px;
        }

        .result-time span {
            font-weight: 700;
            color: #0066cc;
        }

        .match-restart-btn {
            padding: 12px 32px;
            background: #0066cc;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background 0.15s;
        }

        .match-restart-btn:hover {
            background: #0052a3;
        }

        .tool-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1100;
            align-items: center;
            justify-content: center;
        }

        .tool-modal.show {
            display: flex;
        }

        .tool-container {
            width: min(920px, 92vw);
            max-height: 88vh;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
        }

        .tool-header {
            padding: 16px 20px;
            border-bottom: 1px solid #ececec;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }

        .tool-header h3 {
            font-size: 18px;
            font-weight: 600;
        }

        .tool-close {
            border: none;
            background: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            line-height: 1;
        }

        .tool-body {
            padding: 16px 20px 20px;
            overflow-y: auto;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }

        .stat-card {
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            padding: 12px;
            background: #fafafa;
        }

        .stat-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
        }

        .stat-value {
            font-size: 22px;
            font-weight: 700;
            color: #0f172a;
        }

        .simple-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .simple-list-item {
            border: 1px solid #e7e7e7;
            border-radius: 8px;
            padding: 12px;
            background: #fff;
        }

        .inline-tools {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .inline-tools input,
        .inline-tools button {
            padding: 8px 10px;
            border-radius: 6px;
            border: 1px solid #d6d6d6;
            font-size: 14px;
            font-family: inherit;
        }

        .inline-tools button {
            background: #0066cc;
            color: #fff;
            border-color: #0066cc;
            cursor: pointer;
        }

        .inline-tools button.secondary {
            background: #fff;
            color: #1a1a1a;
            border-color: #d6d6d6;
        }

        .wrong-question {
            margin-bottom: 10px;
            border: 1px solid #ececec;
            border-radius: 8px;
            padding: 12px;
            background: #fff;
        }

        .wrong-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .wrong-option {
            font-size: 13px;
            color: #444;
            margin-bottom: 4px;
        }

        .wrong-option.correct {
            color: #15803d;
            font-weight: 600;
        }

        .wrong-option.user-choice {
            color: #b91c1c;
            font-weight: 600;
        }

        .mock-timer {
            font-size: 14px;
            font-weight: 600;
            color: #b91c1c;
        }

        .mock-question {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .mock-option {
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 8px;
            cursor: pointer;
        }

        .mock-option.selected {
            border-color: #0066cc;
            background: #f0f7ff;
        }

        .today-task-card {
            border: 1px solid #dbeafe;
            background: #f8fbff;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .group-title {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
            margin: 14px 0 8px;
        }

        .mock-layout {
            display: grid;
            grid-template-columns: 1fr 220px;
            gap: 14px;
            align-items: start;
        }

        .mock-main {
            min-width: 0;
        }

        .mock-nav {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 10px;
            background: #fafafa;
            position: sticky;
            top: 0;
        }

        .mock-nav-title {
            font-size: 13px;
            color: #555;
            margin-bottom: 8px;
        }

        .mock-nav-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
        }

        .mock-nav-item {
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: #fff;
            font-size: 12px;
            line-height: 1;
            padding: 8px 0;
            text-align: center;
            cursor: pointer;
        }

        .mock-nav-item.answered {
            border-color: #16a34a;
            background: #f0fdf4;
            color: #166534;
        }

        .mock-nav-item.current {
            border-color: #0066cc;
            background: #e8f4ff;
            color: #0b4d85;
            font-weight: 600;
        }

        @media (max-width: 900px) {
            .mock-layout {
                grid-template-columns: 1fr;
            }
        }

        .chat-toggle {
            padding: 8px 16px;
            background: #0066cc;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.15s;
        }

        .chat-toggle:hover {
            background: #0052a3;
        }

        .app-layout {
            display: flex;
            height: calc(100vh - 57px);
        }

        .subject-main-content {
            width: 100%;
        }

        .subject-exam-meta {
            display: none;
            margin-top: 8px;
            font-size: 12px;
            color: #004f9e;
            background: #eef6ff;
            border: 1px solid #b5d9ff;
            border-radius: 6px;
            padding: 6px 8px;
            line-height: 1.4;
        }

        .subject-exam-meta.show {
            display: block;
        }

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

        .unit-list.unit-list-hidden {
            display: none;
        }

        .unit-item {
            border-bottom: 1px solid #e5e5e5;
        }

        .unit-button {
            width: 100%;
            padding: 14px 16px;
            background: none;
            border: none;
            text-align: left;
            cursor: pointer;
            font-size: 14px;
            color: #1a1a1a;
            transition: background 0.15s;
        }

        .unit-button:hover {
            background: #f0f0f0;
        }

        .unit-button.active {
            background: #ffffff;
            font-weight: 600;
            border-left: 3px solid #0066cc;
        }

        .unit-number {
            font-size: 12px;
            color: #666;
            display: block;
            margin-bottom: 2px;
        }

        .unit-name {
            display: block;
            font-weight: 600;
        }

        .unit-weight {
            display: block;
            margin-top: 2px;
            font-size: 11px;
            color: #7a7a7a;
        }

        .main-content {
            flex: 1;
            min-width: 0;
            overflow-y: auto;
            padding: 24px 32px;
            transition: padding-right 0.3s ease;
        }

        .main-content.chat-open {
            padding-right: 28px;
        }

        .content-header {
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e5e5e5;
        }

        .content-header h2 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .content-header .unit-meta {
            font-size: 14px;
            color: #666;
            margin-top: 4px;
        }

        .header-actions {
            margin-top: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .header-action-btn {
            padding: 8px 12px;
            border: 1px solid #d6d6d6;
            border-radius: 6px;
            background: #fff;
            color: #1a1a1a;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s;
        }

        .header-action-btn:hover {
            border-color: #0066cc;
            background: #f0f7ff;
        }

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

        .topic-item {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 6px;
            margin-bottom: 12px;
            padding: 16px 20px;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .topic-item:hover {
            border-color: #0066cc;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .topic-item.topic-highlight {
            border-color: #ffb100;
            box-shadow: 0 0 0 2px rgba(255, 177, 0, 0.2);
            animation: highlight-flash 1s;
        }

        .topic-number {
            font-size: 13px;
            color: #0066cc;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .topic-title {
            font-size: 16px;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        .topic-description {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

        .subtopic-list {
            list-style: none;
            margin-top: 12px;
            padding-left: 16px;
        }

        .subtopic-item {
            font-size: 14px;
            color: #444;
            padding: 4px 0;
            position: relative;
        }

        .subtopic-item::before {
            content: '•';
            position: absolute;
            left: -16px;
            color: #999;
        }

        /* Progress tracking styles */
        .progress-bar {
            width: 100%;
            height: 4px;
            background: #e5e5e5;
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #0066cc;
            transition: width 0.3s;
        }

        .progress-text {
            font-size: 11px;
            color: #666;
            margin-top: 4px;
            display: block;
        }

        .topic-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }

        .topic-info {
            flex: 1;
        }

        .topic-item.completed {
            background: #f0f8ff;
            border-color: #b3d9ff;
        }

        .topic-item.completed .topic-title {
            color: #666;
        }

        .unit-card-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .unit-card {
            background: #ffffff;
            border: 1px solid #dfe5ee;
            border-radius: 10px;
            padding: 16px;
        }

        .unit-card.active {
            border-color: #0066cc;
            box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.18);
        }

        .unit-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            cursor: pointer;
        }

        .unit-card-label {
            font-size: 12px;
            color: #0b4d85;
            font-weight: 700;
            letter-spacing: 0.2px;
            margin-bottom: 2px;
        }

        .unit-card-title {
            font-size: 20px;
            line-height: 1.3;
            margin: 0;
            color: #1a1a1a;
        }

        .unit-card-meta {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 12px;
            color: #4e5b6b;
            text-align: right;
            white-space: nowrap;
        }

        .unit-card-progress {
            margin-top: 12px;
        }

        .unit-card-topic-list {
            list-style: none;
            margin-top: 14px;
            padding: 0;
        }

        .unit-card-empty {
            padding: 12px 4px;
            font-size: 14px;
            color: #7a7a7a;
        }

        .unit-card .topic-item {
            margin-bottom: 10px;
            padding: 0;
            border: 1px solid #e7ebf1;
            border-radius: 8px;
            overflow: hidden;
        }

        .unit-card .topic-item:last-child {
            margin-bottom: 0;
        }

        .unit-card .topic-item:hover {
            border-color: #b6cff5;
            box-shadow: none;
        }

        .unit-card .topic-item.completed {
            background: #f5fbff;
            border-color: #c9e2ff;
        }

        .topic-header-inline {
            margin-bottom: 0;
            cursor: pointer;
            padding: 12px 14px;
        }

        .topic-header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: 12px;
        }

        .topic-expand-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #c5d6ea;
            color: #0b4d85;
            font-weight: 600;
            font-size: 15px;
            background: #f4f9ff;
        }

        .topic-inline-details {
            display: none;
            border-top: 1px solid #edf2f8;
            padding: 14px;
        }

        .topic-inline-details.open {
            display: block;
        }

        .ask-topic-btn {
            margin-top: 12px;
            border: 1px solid #0066cc;
            background: #eef6ff;
            color: #004f9e;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            padding: 8px 12px;
            cursor: pointer;
        }

        .ask-topic-btn:hover {
            background: #ddeeff;
        }

        /* Custom checkbox */
        .checkbox-container {
            display: inline-block;
            position: relative;
            cursor: pointer;
            user-select: none;
            padding-left: 28px;
            font-size: 13px;
            color: #666;
        }

        .checkbox-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #fff;
            border: 2px solid #ccc;
            border-radius: 4px;
            transition: all 0.15s;
        }

        .checkbox-container:hover .checkmark {
            border-color: #0066cc;
        }

        .checkbox-container input:checked ~ .checkmark {
            background-color: #0066cc;
            border-color: #0066cc;
        }

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .checkbox-container input:checked ~ .checkmark:after {
            display: block;
        }

        .checkbox-container .checkmark:after {
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        /* Study modes styles */
        .study-modes {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            flex-wrap: wrap;
        }

        .study-mode-btn {
            flex: 1;
            min-width: 100px;
            padding: 10px 16px;
            border: 2px solid #e5e5e5;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

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

        .study-mode-btn .mode-icon {
            font-size: 24px;
        }

        .study-mode-btn .mode-text {
            font-size: 13px;
            font-weight: 500;
            color: #1a1a1a;
        }

        .flashcards-btn {
            border-color: #6366f1;
        }

        .flashcards-btn:hover {
            background: #f0f0ff;
            border-color: #4f46e5;
        }

        .learn-btn {
            border-color: #10b981;
        }

        .learn-btn:hover {
            background: #f0fdf4;
            border-color: #059669;
        }

        .match-btn {
            border-color: #f59e0b;
        }

        .match-btn:hover {
            background: #fffbeb;
            border-color: #d97706;
        }

        .quiz-btn {
            border-color: #ef4444;
        }

        .quiz-btn:hover {
            background: #fef2f2;
            border-color: #dc2626;
        }

        /* Notes system styles */
        .notes-section {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #e5e5e5;
        }

        .notes-toggle {
            padding: 6px 12px;
            background: #f0f0f0;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            color: #666;
            transition: all 0.15s;
        }

        .notes-toggle:hover {
            background: #e5e5e5;
            color: #1a1a1a;
        }

        .notes-toggle.has-note {
            background: #fff3cd;
            border-color: #ffc107;
            color: #856404;
        }

        .notes-content {
            margin-top: 8px;
            display: none;
        }

        .notes-content.show {
            display: block;
        }

        .notes-textarea {
            width: 100%;
            min-height: 80px;
            padding: 8px;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            font-size: 13px;
            font-family: inherit;
            resize: vertical;
            margin-bottom: 8px;
        }

        .notes-textarea:focus {
            outline: none;
            border-color: #0066cc;
        }

        .notes-actions {
            display: flex;
            gap: 8px;
        }

        .notes-save, .notes-delete {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.15s;
        }

        .notes-save {
            background: #0066cc;
            color: white;
        }

        .notes-save:hover {
            background: #0052a3;
        }

        .notes-delete {
            background: #dc3545;
            color: white;
        }

        .notes-delete:hover {
            background: #c82333;
        }

        .notes-display {
            background: #fffbf0;
            border: 1px solid #ffc107;
            border-radius: 4px;
            padding: 12px;
            margin-top: 8px;
            font-size: 13px;
            line-height: 1.6;
            white-space: pre-wrap;
            color: #333;
        }

        .chat-panel {
            width: 0;
            min-width: 0;
            height: 100%;
            background: #ffffff;
            border-left: 0 solid #e5e5e5;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            overflow: hidden;
            transition: width 0.3s ease, border-left-width 0.3s ease;
        }

        .chat-panel.open {
            width: 400px;
            border-left-width: 1px;
        }

        .chat-header {
            padding: 16px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chat-header h3 {
            font-size: 16px;
            font-weight: 600;
        }

        .chat-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #666;
            padding: 4px 8px;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }

        .message {
            margin-bottom: 16px;
            padding: 12px;
            border-radius: 6px;
            font-size: 14px;
            line-height: 1.6;
        }

        .message-text {
            white-space: pre-wrap;
            word-break: break-word;
        }

        .message.user {
            background: #f0f0f0;
            margin-left: 20px;
        }

        .message.assistant {
            background: #e8f4ff;
            margin-right: 20px;
        }

        .message.error {
            background: #ffe8e8;
            color: #cc0000;
        }

        .message.assistant .message-text h1,
        .message.assistant .message-text h2,
        .message.assistant .message-text h3 { font-weight: 600; margin: 8px 0 4px; }
        .message.assistant .message-text ul,
        .message.assistant .message-text ol { padding-left: 20px; margin: 4px 0; }
        .message.assistant .message-text code { background: #f0f0f0; padding: 1px 4px; border-radius: 3px; font-size: 0.9em; font-family: monospace; }
        .message.assistant .message-text pre { background: #f5f5f5; padding: 8px; border-radius: 4px; overflow-x: auto; }
        .message.assistant .message-text p { margin: 4px 0; }
        .message.assistant .message-text strong { font-weight: 600; }

        .related-topic-card {
            margin-top: 10px;
            padding: 10px 12px;
            background: #ffffff;
            border: 1px solid #b5d9ff;
            border-radius: 6px;
        }

        .related-topic-title {
            font-size: 12px;
            font-weight: 600;
            color: #0066cc;
            margin-bottom: 4px;
        }

        .related-topic-path {
            font-size: 13px;
            color: #1a1a1a;
            line-height: 1.5;
            margin-bottom: 8px;
        }

        .related-topic-btn {
            border: 1px solid #0066cc;
            background: #eef6ff;
            color: #004f9e;
            border-radius: 4px;
            font-size: 12px;
            padding: 4px 8px;
            cursor: pointer;
        }

        .related-topic-btn:hover {
            background: #ddeeff;
        }

        .chat-input-area {
            padding: 16px;
            border-top: 1px solid #e5e5e5;
        }

        .chat-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
            min-height: 60px;
        }

        .chat-input:focus {
            outline: none;
            border-color: #0066cc;
        }

        .chat-send {
            width: 100%;
            margin-top: 8px;
            padding: 10px;
            background: #0066cc;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }

        .chat-send:hover:not(:disabled) {
            background: #0052a3;
        }

        .chat-send:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .image-upload-area {
            padding: 12px;
            border: 2px dashed #e5e5e5;
            border-radius: 4px;
            text-align: center;
            margin-bottom: 12px;
            cursor: pointer;
            transition: border-color 0.15s;
        }

        .image-upload-area:hover {
            border-color: #0066cc;
        }

        .image-upload-area.drag-over {
            border-color: #0066cc;
            background: #f0f8ff;
        }

        .upload-icon {
            font-size: 32px;
            color: #999;
            margin-bottom: 8px;
        }

        .upload-text {
            font-size: 13px;
            color: #666;
        }

        .image-preview {
            max-width: 100%;
            max-height: 200px;
            border-radius: 4px;
            margin-top: 8px;
        }

        .image-preview-container {
            position: relative;
            display: inline-block;
            margin-bottom: 8px;
        }

        .remove-image {
            position: absolute;
            top: 4px;
            right: 4px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
        }

        .remove-image:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .camera-button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            background: #f0f0f0;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        .camera-button:hover {
            background: #e5e5e5;
        }

        @media (max-width: 900px) {
            .app-header {
                padding: 12px 14px;
                gap: 10px;
            }

            .app-header h1 {
                font-size: 16px;
            }

            .search-container {
                max-width: none;
            }

            .app-container {
                height: calc(100vh - 59px);
            }

            .subjects-sidebar {
                position: fixed;
                top: 59px;
                left: 0;
                bottom: 0;
                width: 240px;
                z-index: 120;
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
                background: #f8f9fa;
            }

            .subjects-sidebar.collapsed {
                transform: translateX(-240px);
            }

            .main-area {
                width: 100%;
            }

            .sidebar-toggle {
                right: -36px;
                width: 36px;
                height: 36px;
                font-size: 18px;
            }
        }

        .fab-ask-ai {
            display: none;
            position: fixed;
            right: 16px;
            bottom: 24px;
            padding: 12px 20px;
            background: #0066cc;
            color: white;
            border: none;
            border-radius: 24px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            z-index: 130;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .fab-ask-ai:hover {
            background: #0052a3;
        }

        @media (max-width: 900px) {
            .fab-ask-ai {
                display: block;
            }
        }

        @media (max-width: 768px) {
            .main-content {
                padding: 16px;
            }

            .content-header h2 {
                font-size: 20px;
            }

            .unit-card {
                padding: 14px;
            }

            .unit-card-header {
                flex-direction: column;
                gap: 8px;
            }

            .unit-card-meta {
                text-align: left;
                white-space: normal;
            }

            .topic-header-inline {
                padding: 10px 12px;
            }

            .topic-title {
                font-size: 15px;
                margin-bottom: 0;
            }

            .topic-header-actions {
                gap: 8px;
            }

            .topic-inline-details {
                padding: 12px;
            }

            .main-content.chat-open {
                padding-right: 16px;
            }

            .chat-panel {
                position: fixed;
                top: 59px;
                right: -100%;
                width: 100%;
                height: calc(100vh - 59px);
                border-left-width: 1px;
                z-index: 140;
                transition: right 0.3s ease;
            }

            .chat-panel.open {
                right: 0;
                width: 100%;
            }
        }