* { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            width: 100%;
        }
        h1 {
            color: white;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        .teacher-auth-bar {
            margin-bottom: 16px;
            display: flex;
            justify-content: center;
        }
        .teacher-auth-form {
            display: flex;
            gap: 10px;
            width: 100%;
            max-width: 560px;
        }
        .teacher-auth-form input {
            flex: 1;
            padding: 12px 14px;
            border: 2px solid rgba(255,255,255,0.6);
            border-radius: 8px;
            background: rgba(255,255,255,0.95);
            font-size: 16px;
        }
        .teacher-auth-active {
            width: 100%;
            max-width: 560px;
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.35);
            border-radius: 10px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            font-weight: 500;
        }
        .login-route-container {
            min-height: calc(100vh - 40px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            width: 100%;
            max-width: 520px;
            background: rgba(255,255,255,0.95);
            border-radius: 18px;
            box-shadow: 0 16px 40px rgba(0,0,0,0.2);
            padding: 36px 28px;
        }
        .login-card h1 {
            color: #4a5ec9;
            text-shadow: none;
            margin-bottom: 10px;
        }
        .login-subtitle {
            color: #5f6481;
            text-align: center;
            margin-bottom: 20px;
        }
        .login-route-form {
            max-width: none;
        }
        .login-route-form .btn {
            min-width: 130px;
        }
        .login-authed-actions {
            text-align: center;
        }
        .login-success {
            color: #4a5ec9;
            font-weight: 600;
            margin-bottom: 14px;
        }
        .login-action-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .tabs {
            display: flex;
            gap: 5px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .tab {
            flex: 1;
            min-width: 120px;
            padding: 12px 20px;
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border-radius: 8px 8px 0 0;
            transition: background 0.3s;
        }
        .tab:hover { background: rgba(255,255,255,0.3); }
        .tab.active { background: white; color: #667eea; }
        .panel {
            background: white;
            border-radius: 0 0 16px 16px;
            padding: 30px;
            display: none;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        .panel.active { display: block; }
        .flashcard-panel { touch-action: pan-y; }

        /* View Mode Toggle */
        .view-toggle {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .view-btn {
            padding: 8px 16px;
            border: 2px solid #667eea;
            background: white;
            color: #667eea;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .view-btn.active {
            background: #667eea;
            color: white;
        }

        /* Flashcard - All Forms View */
        .all-forms-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            padding: 40px;
            text-align: center;
            color: white;
            margin-bottom: 20px;
        }
        .flashcard-transition-card {
            will-change: transform, opacity;
        }
        .flashcard-transition-card.anim-next {
            animation: flashcard-slide-next 0.24s ease-out both;
        }
        .flashcard-transition-card.anim-prev {
            animation: flashcard-slide-prev 0.24s ease-out both;
        }
        @keyframes flashcard-slide-next {
            from { opacity: 0; transform: translateX(44px) scale(0.985); }
            to { opacity: 1; transform: translateX(0) scale(1); }
        }
        @keyframes flashcard-slide-prev {
            from { opacity: 0; transform: translateX(-44px) scale(0.985); }
            to { opacity: 1; transform: translateX(0) scale(1); }
        }
        .all-forms-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }
        .form-box {
            background: rgba(255,255,255,0.2);
            border-radius: 12px;
            padding: 20px;
        }
        .form-box .label {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            opacity: 0.8;
            margin-bottom: 8px;
        }
        .form-box .word {
            font-size: 28px;
            font-weight: bold;
        }
        .verb-group-label {
            font-size: 14px;
            opacity: 0.7;
            margin-bottom: 5px;
        }

        /* Flashcard - Rotating Prism View */
        .prism-container {
            perspective: 1000px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        .prism {
            width: 300px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .prism-face {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            backface-visibility: hidden;
            border-radius: 16px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .prism-face .label {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            opacity: 0.8;
            margin-bottom: 10px;
        }
        .prism-face .word {
            font-size: 42px;
            font-weight: bold;
        }
        .face-1 {
            background: linear-gradient(135deg, #11998e, #38ef7d);
            transform: rotateY(0deg) translateZ(150px);
        }
        .face-2 {
            background: linear-gradient(135deg, #ee0979, #ff6a00);
            transform: rotateY(120deg) translateZ(150px);
        }
        .face-3 {
            background: linear-gradient(135deg, #4776E6, #8E54E9);
            transform: rotateY(240deg) translateZ(150px);
        }
        .prism.face-0 { transform: rotateY(0deg); }
        .prism.face-1 { transform: rotateY(-120deg); }
        .prism.face-2 { transform: rotateY(-240deg); }

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

        /* Buttons */
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .btn-primary { background: #667eea; color: white; }
        .btn-secondary { background: #e0e0e0; color: #333; }
        .btn-success { background: #38ef7d; color: #333; }
        .btn-danger { background: #ee0979; color: white; }
        .is-hidden { display: none; }
        .u-text-center { text-align: center; }
        .u-mb-10 { margin-bottom: 10px; }
        .u-mt-20 { margin-top: 20px; }

        /* Group Filter Toggle */
        .filter-toggle {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            background: none;
            border: none;
            color: #667eea;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            padding: 6px 0;
            margin-bottom: 8px;
        }
        .filter-toggle:hover { color: #764ba2; }
        .filter-toggle-icon {
            display: inline-block;
            font-size: 10px;
            transition: transform 0.2s;
        }
        .filter-toggle-icon.open { transform: rotate(90deg); }

        /* Group Filter */
        .group-filter {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .group-filter.collapsed {
            display: none;
        }
        .group-chip {
            padding: 6px 14px;
            background: #f0f0f0;
            border: 2px solid transparent;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .group-chip:hover { background: #e0e0e0; }
        .group-chip.active { background: #667eea; color: white; border-color: #667eea; }

        /* Quiz Mode */
        .quiz-card {
            background: linear-gradient(135deg, #11998e, #38ef7d);
            border-radius: 16px;
            padding: 40px;
            text-align: center;
            color: white;
            margin-bottom: 20px;
        }
        .quiz-prompt {
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .quiz-word {
            font-size: 48px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        .quiz-group {
            font-size: 14px;
            opacity: 0.7;
            margin-top: 10px;
        }
        .quiz-inputs {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .quiz-input-group {
            flex: 1;
        }
        .quiz-input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        .quiz-input-group input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 18px;
            transition: border-color 0.3s;
        }
        .quiz-input-group input:focus { border-color: #667eea; outline: none; }
        .quiz-input-group input.correct { border-color: #38ef7d; background: #e8fff0; }
        .quiz-input-group input.incorrect { border-color: #ee0979; background: #fff0f5; }
        .quiz-feedback {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
        }
        .quiz-feedback.show { display: block; }
        .quiz-feedback.correct { background: #e8fff0; color: #11998e; }
        .quiz-feedback.incorrect { background: #fff0f5; color: #ee0979; }
        .quiz-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        .stat { text-align: center; }
        .stat-value { font-size: 32px; font-weight: bold; color: #667eea; }
        .stat-label { font-size: 14px; color: #888; }

        /* Manage Verbs */
        .cloud-sync-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }
        .cloud-sync-title { margin: 0; }
        .cloud-sync-subtitle {
            margin: 5px 0 0;
            opacity: 0.9;
            font-size: 14px;
        }
        .cloud-save-btn {
            background: white;
            color: #667eea;
            font-weight: bold;
        }
        .manage-auth-actions {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 15px;
        }
        .section-title { margin-bottom: 20px; }
        .groups-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 12px;
        }
        .groups-title { margin-bottom: 15px; }
        .groups-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .group-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;
        }
        .group-modal-card {
            background: white;
            padding: 30px;
            border-radius: 16px;
            max-width: 400px;
            width: 90%;
        }
        .group-modal-title { margin-bottom: 20px; }
        .modal-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        .modal-group-input {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            margin-bottom: 15px;
        }
        .modal-delete-section { margin-bottom: 15px; }
        .modal-delete-help { margin-bottom: 10px; }
        .modal-choice-row {
            display: block;
            margin-bottom: 8px;
        }
        .modal-move-select {
            padding: 5px;
            margin-left: 5px;
        }
        .modal-actions-row {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        .verbs-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            gap: 10px;
            flex-wrap: wrap;
        }
        .verb-form {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr auto;
            gap: 10px;
            margin-bottom: 20px;
            align-items: end;
        }
        .verb-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
            font-size: 14px;
        }
        .verb-form input, .verb-form select {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }
        .verb-form input:focus, .verb-form select:focus { border-color: #667eea; outline: none; }
        .verb-list {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .verb-item {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr auto;
            gap: 10px;
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            align-items: center;
        }
        .verb-item > div {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .verb-item:last-child { border-bottom: none; }
        .verb-item:hover { background: #f9f9f9; }
        .verb-group-tag {
            background: #667eea;
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
        }
        .btn-icon {
            width: 36px;
            height: 36px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        /* Import Section */
        .import-section {
            margin-top: 30px;
            padding-top: 30px;
            border-top: 2px solid #eee;
        }
        .import-section h3 { margin-bottom: 15px; color: #333; }
        .import-section textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-family: 'Consolas', monospace;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .import-section textarea:focus { border-color: #667eea; outline: none; }
        .import-help {
            background: #f5f5f5;
            padding: 15px;
            border-radius: 8px;
            font-size: 13px;
            color: #666;
            margin-bottom: 15px;
        }
        .import-help code {
            background: #e0e0e0;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .import-help-list { margin: 10px 0 0 20px; }
        .clear-verbs-btn { float: right; }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #888;
        }
        .empty-state h3 { margin-bottom: 10px; color: #666; }

        /* Progress indicator */
        .progress-bar {
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transition: width 0.3s;
        }
        .verb-counter {
            text-align: center;
            color: #888;
            margin-bottom: 10px;
            font-size: 14px;
        }

        /* Keyboard hints */
        .keyboard-hints {
            text-align: center;
            color: #aaa;
            font-size: 12px;
            margin-top: 15px;
        }
        .keyboard-hints kbd {
            background: #f0f0f0;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid #ddd;
            font-family: monospace;
        }
        .translation {
            font-size: 0.5em;
            font-style: italic;
            opacity: 0.7;
            font-weight: normal;
            margin-top: 4px;
        }
        /* Quiz completion overlay */
        .quiz-complete-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            animation: fadeIn 0.3s;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .quiz-complete-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .quiz-complete-card .score-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 36px;
            font-weight: bold;
            color: white;
        }
        .quiz-complete-card h2 { margin-bottom: 10px; }
        .quiz-complete-card p { color: #666; margin-bottom: 20px; }

        /* Confetti */
        .confetti-piece {
            position: fixed;
            width: 10px;
            height: 10px;
            top: -10px;
            z-index: 2001;
            animation: confettiFall linear forwards;
        }
        @keyframes confettiFall {
            to { top: 110vh; transform: rotate(720deg); }
        }

        .mobile-only { display: none; }

        /* Quiz by group */
        .quiz-mode-toggle {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        .group-picker {
            display: none;
        }
        .group-picker h3 {
            text-align: center;
            color: #555;
            margin-bottom: 20px;
        }
        .group-picker-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 12px;
        }
        .group-pick-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 20px 16px;
            cursor: pointer;
            text-align: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .group-pick-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        .group-pick-card.selected {
            background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%);
            box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);
        }
        .group-pick-card .group-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 6px;
        }
        .group-pick-card .group-count {
            font-size: 13px;
            opacity: 0.8;
        }
        .group-quiz-back {
            display: none;
            margin-bottom: 15px;
        }

        .swipe-hint {
            text-align: center;
            color: #aaa;
            font-size: 13px;
            margin-top: 15px;
        }

        /* Mobile responsive */
        @media (max-width: 600px) {
            body { padding: 10px; }
            h1 { font-size: 22px; margin-bottom: 12px; }
            .login-route-container { min-height: calc(100vh - 20px); }
            .login-card { padding: 20px 16px; }
            .login-subtitle { font-size: 14px; }
            .login-action-buttons { flex-direction: column; }
            .panel { padding: 15px; }
            .tabs { gap: 8px; }
            .tab { padding: 10px 8px; font-size: 14px; min-width: calc(50% - 8px); }
            .teacher-auth-form { flex-direction: column; }
            .teacher-auth-active { gap: 10px; align-items: stretch; flex-direction: column; text-align: center; }
            .teacher-auth-active .btn { width: 100%; }

            .all-forms-card { padding: 20px 15px; }
            .flashcard-transition-card.anim-next,
            .flashcard-transition-card.anim-prev {
                animation-duration: 0.2s;
            }
            .all-forms-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .form-box { padding: 12px; }
            .form-box .word { font-size: 22px; }
            .filter-toggle { display: flex; width: 100%; }

            .prism-container { height: 220px; }
            .prism { width: 220px; height: 150px; }
            .face-1 { transform: rotateY(0deg) translateZ(110px); }
            .face-2 { transform: rotateY(120deg) translateZ(110px); }
            .face-3 { transform: rotateY(240deg) translateZ(110px); }
            .prism-face .word { font-size: 30px; }

            .quiz-card { padding: 25px 15px; }
            .quiz-word { font-size: 32px; }
            .quiz-inputs { flex-direction: column; gap: 10px; }
            .quiz-stats { gap: 12px; }
            .btn { width: 100%; }
            .flashcard-controls .btn { width: 100%; max-width: 260px; }
            .flashcard-controls .flashcard-nav-btn { display: none; }
            .cloud-sync-card { flex-direction: column; align-items: stretch; text-align: center; }
            .cloud-save-btn { width: 100%; }
            .verbs-header-row .btn { width: 100%; }
            .groups-list > div { width: 100%; flex-wrap: wrap; }

            .verb-form { grid-template-columns: 1fr 1fr; }
            .verb-form > button { grid-column: span 2; }
            .verb-item { grid-template-columns: 1fr 1fr; font-size: 13px; }
            .verb-item > div:last-child { grid-column: span 2; justify-self: end; }
            .verb-item .verb-group-tag { display: none; }
            .group-picker-grid { grid-template-columns: 1fr; }

            .nav-btn { display: none; }
            .desktop-only { display: none; }
            .mobile-only { display: block; }
        }
        @media (prefers-reduced-motion: reduce) {
            .flashcard-transition-card.anim-next,
            .flashcard-transition-card.anim-prev {
                animation: none;
            }
        }