/* ========== ENHANCED TOOL FORMATTING FOR KIDS ========== */
/* Professional, engaging, and easy to read for classroom use */

/* ========== WORD SEARCH ENHANCED STYLING ========== */
.word-search-display {
    display: grid !important;
    grid-template-columns: 1fr clamp(240px, 25%, 300px);
    gap: clamp(16px, 2vw, 28px);
    margin: clamp(16px, 2vh, 24px) 0;
}

.word-search-grid {
    background: white;
    padding: clamp(16px, 2.5vw, 28px);
    border-radius: clamp(12px, 1.5vw, 16px);
    border: 3px solid #6D8196;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.word-search-grid table {
    border-collapse: separate;
    border-spacing: 2px;
    margin: 0 auto;
}

.word-search-grid td {
    width: clamp(24px, 5vw, 40px);
    height: clamp(24px, 5vw, 40px);
    text-align: center;
    font-weight: 700;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    text-transform: uppercase;
    color: #2d3748;
}

.word-search-grid td:hover {
    background: rgba(109, 129, 150, 0.2);
    border-color: #6D8196;
    transform: scale(1.05);
}

.word-search-grid td.selected {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    border-color: #1976D2;
    transform: scale(1.05);
}

.word-search-grid td.found {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important;
    color: white !important;
    border-color: #388E3C !important;
    animation: foundPulse 0.5s ease;
}

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

.word-search-words {
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.1) 0%, rgba(198, 131, 70, 0.1) 100%);
    padding: clamp(14px, 2vw, 22px);
    border-radius: clamp(12px, 1.5vw, 16px);
    border: 3px solid #C68346;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.word-search-words h4 {
    color: #485566;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
}

.word-search-words ul {
    list-style: none;
    padding: 0;
}

.word-search-words li {
    padding: 12px;
    margin-bottom: 8px;
    background: white;
    border-radius: 12px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.1rem;
    transition: all 0.2s;
    border: 2px solid #e2e8f0;
    color: #2d3748;
    cursor: pointer;
    position: relative;
}

.word-search-words li:hover {
    background: #f0f4f8;
    border-color: #6D8196;
    transform: translateX(4px);
}

.word-search-words li:hover::before {
    content: "👆 ";
    position: absolute;
    left: -20px;
}

.word-search-words li.found {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: white;
    text-decoration: line-through;
    border-color: #388E3C;
}

/* ========== CROSSWORD ENHANCED STYLING ========== */
.crossword-display {
    display: grid !important;
    grid-template-columns: 1fr clamp(260px, 28%, 320px);
    gap: clamp(16px, 2vw, 28px);
    margin: clamp(16px, 2vh, 24px) 0;
}

.crossword-grid {
    background: white;
    padding: clamp(16px, 2.5vw, 28px);
    border-radius: clamp(12px, 1.5vw, 16px);
    border: 3px solid #6D8196;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    max-width: 100%;
}

.crossword-grid table {
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 1rem;
}

.crossword-grid td {
    width: clamp(24px, 4.5vw, 32px);
    height: clamp(24px, 4.5vw, 32px);
    border: 1px solid #cbd5e0;
    position: relative;
    padding: 0;
}

.crossword-grid td.black {
    background: #2d3748;
}

.crossword-grid td input {
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0;
    background: transparent;
}

.crossword-grid td input:focus {
    outline: 2px solid #6D8196;
    background: rgba(109, 129, 150, 0.1);
}

.crossword-grid .cell-number {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #6D8196;
    z-index: 1;
    pointer-events: none;
}

.crossword-grid td.correct {
    background: rgba(76, 175, 80, 0.2);
}

.crossword-grid td.correct input {
    color: #2e7d32;
}

.crossword-clues {
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.1) 0%, rgba(198, 131, 70, 0.1) 100%);
    padding: 20px;
    border-radius: 16px;
    border: 3px solid #C68346;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-height: 600px;
    overflow-y: auto;
}

.clue-section {
    margin-bottom: 20px;
}

.clue-section h4 {
    color: #485566;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 3px solid #6D8196;
}

.clue-section ol {
    padding-left: 20px;
}

.clue-section li {
    padding: 8px;
    margin-bottom: 8px;
    background: white;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.6;
    border-left: 3px solid #C68346;
    padding-left: 12px;
}

/* ========== WORKSHEET GENERATOR (CLOZE) ENHANCED STYLING ========== */
.cloze-worksheet {
    background: white;
    padding: 32px;
    border-radius: 24px;
    border: 3px solid #6D8196;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.cloze-worksheet h3 {
    color: #485566;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cloze-instructions {
    background: rgba(109, 129, 150, 0.1);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    border-left: 4px solid #6D8196;
}

.cloze-instructions p {
    font-size: 1.1rem;
    color: #2d3748;
    line-height: 1.6;
    margin: 0;
}

.word-bank {
    background: linear-gradient(135deg, rgba(198, 131, 70, 0.1) 0%, rgba(198, 131, 70, 0.2) 100%);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 24px;
    border: 3px solid #C68346;
}

.word-bank h4 {
    color: #C68346;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}

#wordBankList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

#wordBankList span {
    background: white;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    border: 2px solid #C68346;
    color: #2d3748;
}

.cloze-passage {
    background: white;
    padding: 24px;
    border-radius: 12px;
    font-size: 1.2rem;
    line-height: 2;
    color: #2d3748;
}

.cloze-blank {
    display: inline-block;
    min-width: 100px;
    border-bottom: 3px solid #6D8196;
    margin: 0 4px;
    height: 1.5em;
    vertical-align: baseline;
    text-align: center;
    line-height: 1.2em;
    position: relative;
    top: -0.2em;
}

/* ========== BRAIN BREAKS & SIMON SAYS ENHANCED STYLING ========== */
.simon-countdown {
    font-size: 6rem;
    font-weight: 700;
    color: #FF9800;
    text-align: center;
    margin: 32px 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.command-display {
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.15) 0%, rgba(198, 131, 70, 0.15) 100%);
    padding: 32px;
    border-radius: 24px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 4px solid #6D8196;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.command-display h2 {
    font-size: 3rem;
    color: #2d3748;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.simon-settings {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.simon-settings .setting-group {
    flex: 1;
    min-width: 200px;
}

.simon-settings label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    display: block;
    margin-bottom: 8px;
}

.simon-settings select {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 2px solid #cbd5e0;
    border-radius: 8px;
    background: white;
}

/* ========== DISABLED BUTTON STATES ========== */
/* Global disabled button styling */
.btn-primary:disabled,
.btn-secondary:disabled,
button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #a0aec0 !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

.btn-primary:disabled:hover,
.btn-secondary:disabled:hover,
button:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
}

/* Simon Says specific (maintain backward compatibility) */
#simon-says-break .btn-primary:disabled,
#simon-says-break .btn-secondary:disabled,
#simon-says-break button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #a0aec0 !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none;
}

#simon-says-break .btn-primary:disabled:hover,
#simon-says-break .btn-secondary:disabled:hover,
#simon-says-break button:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ========== MODERN DROPDOWN STYLING FOR WORD SEARCH, CROSSWORD, MATCHY MATCH, WORKSHEET GENERATOR, SPELLING TEST ========== */
#word-search .setting-group,
#crossword .setting-group,
#matchy-match .setting-group,
#cloze-activity .setting-group,
#spelling-test .setting-group {
    margin-bottom: 24px;
}

#word-search .setting-group label,
#crossword .setting-group label,
#matchy-match .setting-group label,
#cloze-activity .setting-group label,
#spelling-test .setting-group label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#word-search select,
#crossword select,
#matchy-match select,
#cloze-activity select,
#spelling-test select {
    width: 100%;
    padding: 14px 40px 14px 16px;
    font-size: 1rem;
    font-weight: 500;
    color: #2d3748;
    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image:
        linear-gradient(135deg, #ffffff 0%, #f7fafc 100%),
        url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236D8196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 14px center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#word-search select:hover,
#crossword select:hover,
#matchy-match select:hover,
#cloze-activity select:hover,
#spelling-test select:hover {
    border-color: #6D8196;
    box-shadow:
        0 4px 12px rgba(109, 129, 150, 0.15),
        0 0 0 4px rgba(109, 129, 150, 0.08);
    transform: translateY(-1px);
}

#word-search select:focus,
#crossword select:focus,
#matchy-match select:focus,
#cloze-activity select:focus,
#spelling-test select:focus {
    outline: none;
    border-color: #6D8196;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    box-shadow:
        0 4px 16px rgba(109, 129, 150, 0.2),
        0 0 0 4px rgba(109, 129, 150, 0.12);
    transform: translateY(-2px);
}

#word-search select:active,
#crossword select:active,
#matchy-match select:active,
#cloze-activity select:active,
#spelling-test select:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(109, 129, 150, 0.15),
        0 0 0 4px rgba(109, 129, 150, 0.08);
}

/* Dark Mode Styling for Modern Dropdowns */
body.dark-mode #word-search select,
body.dark-mode #crossword select,
body.dark-mode #matchy-match select,
body.dark-mode #cloze-activity select,
body.dark-mode #spelling-test select {
    background: linear-gradient(135deg, var(--dm-surface-3) 0%, var(--dm-surface-2) 100%);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
    background-image:
        linear-gradient(135deg, var(--dm-surface-3) 0%, var(--dm-surface-2) 100%),
        url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 14px center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode #word-search select:hover,
body.dark-mode #crossword select:hover,
body.dark-mode #matchy-match select:hover,
body.dark-mode #cloze-activity select:hover,
body.dark-mode #spelling-test select:hover {
    border-color: var(--dm-blue);
    box-shadow:
        0 4px 12px rgba(96, 165, 250, 0.25),
        0 0 0 4px rgba(96, 165, 250, 0.15);
}

body.dark-mode #word-search select:focus,
body.dark-mode #crossword select:focus,
body.dark-mode #matchy-match select:focus,
body.dark-mode #cloze-activity select:focus,
body.dark-mode #spelling-test select:focus {
    border-color: var(--dm-blue);
    background: linear-gradient(135deg, var(--dm-surface-3) 0%, #1e3a5f 100%);
    box-shadow:
        0 4px 16px rgba(96, 165, 250, 0.3),
        0 0 0 4px rgba(96, 165, 250, 0.2);
}

body.dark-mode #word-search .setting-group label,
body.dark-mode #crossword .setting-group label,
body.dark-mode #matchy-match .setting-group label,
body.dark-mode #cloze-activity .setting-group label,
body.dark-mode #spelling-test .setting-group label {
    color: var(--dm-text-primary);
}

/* ========== WORD OF THE DAY ENHANCED STYLING ========== */
.word-header {
    text-align: center;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.1) 0%, rgba(198, 131, 70, 0.1) 100%);
    border-radius: 24px;
    border: 3px solid #6D8196;
}

.word-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.word-syllables {
    font-size: 1.5rem;
    color: #6D8196;
    font-weight: 500;
    margin-top: 8px;
}

.word-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.word-section {
    background: white;
    padding: 24px;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.word-section h4 {
    color: #485566;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 3px solid #6D8196;
}

.word-examples {
    list-style: none;
    padding: 0;
}

.word-examples li {
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(109, 129, 150, 0.05);
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1.6;
    border-left: 4px solid #C68346;
    padding-left: 16px;
}

.word-examples li::before {
    content: "💡 ";
    margin-right: 8px;
}

.word-etymology {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a5568;
    font-style: italic;
}

.word-activity {
    background: linear-gradient(135deg, rgba(198, 131, 70, 0.1) 0%, rgba(198, 131, 70, 0.15) 100%);
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #C68346;
}

.activity-instruction {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 16px;
}

.activity-prompts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.option-number {
    background: linear-gradient(135deg, #6D8196 0%, #485566 100%);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.option-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #2d3748;
}

/* ========== WRITING STARTER & DAILY MECHANICS BUTTONS ========== */
.writing-mode-selector,
.mechanics-type-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    justify-content: center;
    padding: 16px;
    background: rgba(109, 129, 150, 0.05);
    border-radius: 16px;
}

.writing-mode-btn,
.mechanics-btn {
    background: white;
    color: #485566;
    border: 2px solid #e2e8f0;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.writing-mode-btn:hover,
.mechanics-btn:hover {
    background: #f7fafc;
    border-color: #6D8196;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.writing-mode-btn.active,
.mechanics-btn.active {
    background: linear-gradient(135deg, #6D8196 0%, #485566 100%);
    color: white;
    border-color: #485566;
    box-shadow: 0 4px 12px rgba(109, 129, 150, 0.3);
}

.writing-mode-btn:active,
.mechanics-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Daily Mechanics Display */
.mechanics-display {
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.05) 0%, rgba(198, 131, 70, 0.05) 100%);
    padding: 32px;
    border-radius: 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.mechanics-sentence {
    font-size: 1.8rem;
    line-height: 1.8;
    color: #2d3748;
    text-align: center;
    font-weight: 500;
    padding: 24px;
    background: white;
    border-radius: 16px;
    border: 3px solid #6D8196;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 900px;
}

.mechanics-answer {
    width: 100%;
    max-width: 900px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.12) 100%);
    padding: 28px;
    border-radius: 16px;
    border: 3px solid #4CAF50;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15);
    margin-top: 16px;
}

.mechanics-answer-header {
    font-size: 1.3rem;
    color: #2d7a2e;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(76, 175, 80, 0.3);
}

.mechanics-highlighted-sentence {
    font-size: 1.6rem;
    line-height: 1.9;
    color: #2d3748;
    padding: 20px;
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mechanics-answer-list {
    font-size: 1.2rem;
    color: #2d3748;
    background: rgba(255, 255, 255, 0.7);
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    border-left: 4px solid #4CAF50;
}

.mechanics-explanation {
    font-size: 1.1rem;
    color: #4a5568;
    padding: 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    border-left: 4px solid #C68346;
}

/* ========== WOULD YOU RATHER - DAILY MECHANICS STYLE ========== */
.wyr-question {
    font-size: 1.8rem;
    line-height: 1.8;
    color: #2d3748;
    text-align: center;
    font-weight: 500;
    padding: 24px;
    background: white;
    border-radius: 16px;
    border: 3px solid #6D8196;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    margin: 20px auto;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== BREATHING EXERCISE - DAILY MECHANICS STYLE ========== */

/* Compact Layout - Fit on Screen */
.breathing-display-box {
    min-height: 250px !important;
    padding: 25px 20px !important;
    margin: 0 0 15px 0 !important;
}

.breathing-circle {
    display: none !important; /* Hidden in non-fullscreen mode */
    width: 140px !important;
    height: 140px !important;
    margin-bottom: 20px !important;
}

.breathing-text {
    font-size: 1.8rem;
    line-height: 1.8;
    color: #2d3748;
    text-align: center;
    font-weight: 500;
    padding: 24px;
    background: white;
    border-radius: 16px;
    border: 3px solid #6D8196;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 800px;
    margin: 0 auto 20px !important;
    transition: color 0.8s ease;
    z-index: 3;
    position: relative;
}

/* Counter - Bordered Box Style */
.breathing-counter {
    background: white !important;
    border: 3px solid #6D8196 !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    margin: 10px auto 0 !important;
    width: fit-content !important;
}

/* Enhanced Settings Panel - Horizontal Layout */
.breathing-side-panel {
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.03) 0%, rgba(198, 131, 70, 0.03) 100%),
                white !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 20px !important;
    align-items: center !important;
}

.side-panel-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #6D8196 0%, #C68346 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 !important;
    padding: 0 20px 0 0 !important;
    border-right: 3px solid #E5E7EB !important;
    border-bottom: none !important;
    white-space: nowrap;
}

.breathing-container-grid {
    gap: 30px !important;
}

.breathing-settings-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.breathing-setting-group {
    background: rgba(109, 129, 150, 0.02);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(109, 129, 150, 0.1);
    transition: all 0.3s ease;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 1 auto;
}

.breathing-setting-group:hover {
    background: rgba(109, 129, 150, 0.04);
    border-color: rgba(109, 129, 150, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.breathing-setting-group > label {
    font-weight: 600 !important;
    color: #6D8196 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.3px;
    margin: 0 !important;
    white-space: nowrap;
}

/* ========== DESK YOGA - DAILY MECHANICS STYLE ========== */
.yoga-pose {
    font-size: 2.2rem;
    line-height: 1.6;
    color: #2d3748;
    text-align: center;
    font-weight: 600;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    max-width: 900px;
    margin: 20px auto 10px;
}

.yoga-instructions {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #2d3748;
    text-align: center;
    font-weight: 400;
    padding: 24px;
    background: white;
    border-radius: 16px;
    border: 3px solid #6D8196;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    margin: 20px auto;
}

.yoga-timer,
.yoga-countdown {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #2d3748;
    text-align: center;
    font-weight: 600;
    padding: 20px 24px;
    background: white;
    border-radius: 16px;
    border: 3px solid #6D8196;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    margin: 20px auto;
}

/* ========== BRAIN BREAKS - TITLES & SUBTITLES ========== */
.break-activity h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 15px;
}

.breathing-subtitle,
.eye-rest-instructions {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #4a5568;
    text-align: center;
    font-weight: 400;
    margin: 15px auto 5px !important;
    max-width: 700px;
}

/* ========== EYE REST - CANVAS CONTAINER ========== */
.eye-rest-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    max-width: 100%;
    overflow: visible;
}

#eyeRestCanvas {
    border: 3px solid #6D8196;
    border-radius: 16px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ========== PICTURE OF THE DAY ENHANCED STYLING ========== */
.picture-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.05) 0%, rgba(198, 131, 70, 0.05) 100%);
    border-radius: 24px;
    min-height: 400px;
    position: relative;
}

.picture-display img {
    max-width: 100%;
    width: 500px;
    height: 333px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 3px solid #6D8196;
    display: block;
    margin: 0 auto;
}

.picture-display img.loading {
    opacity: 0.3;
    filter: blur(5px);
}

/* Loading spinner removed
.picture-loading-spinner {
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 6px solid rgba(109, 129, 150, 0.2);
    border-top: 6px solid #6D8196;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 100;
    display: none;
    pointer-events: none;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
*/

.picture-display p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #2d3748;
    font-weight: 500;
    text-align: center;
    max-width: 500px;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    border: 2px solid #C68346;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* .picture-counter - REMOVED: No longer needed */

/* Responsive adjustments */
@media (max-width: 1400px) {
    .word-search-display,
    .crossword-display {
        gap: clamp(14px, 1.8vw, 24px);
    }

    .word-search-grid,
    .crossword-grid {
        padding: clamp(14px, 2.2vw, 24px);
    }
}

@media (max-width: 1200px) {
    .word-search-display,
    .crossword-display {
        gap: clamp(12px, 1.6vw, 20px);
    }

    .word-search-words h4,
    .crossword-clues h4 {
        font-size: clamp(1.2rem, 2vw, 1.4rem);
    }
}

@media (max-width: 1024px) {
    .word-search-display,
    .crossword-display {
        grid-template-columns: 1fr;
        gap: clamp(16px, 2vh, 24px);
    }

    .word-search-words,
    .crossword-clues {
        max-width: 100%;
    }

    .word-search-grid,
    .crossword-grid {
        padding: clamp(12px, 2vw, 20px);
    }
}

@media (max-width: 768px) {
    .word-search-display,
    .crossword-display {
        grid-template-columns: 1fr;
        margin: clamp(12px, 2vh, 20px) 0;
    }

    .word-search-grid,
    .crossword-grid {
        padding: clamp(10px, 1.8vw, 16px);
    }

    .word-search-words,
    .crossword-clues {
        padding: clamp(12px, 1.5vw, 18px);
    }

    .command-display h2 {
        font-size: 2rem;
    }

    .word-title {
        font-size: 3rem;
    }

    .picture-display img {
        width: 100%;
        height: auto;
    }

    .picture-display p {
        font-size: 1.1rem;
    }

    .picture-loading-spinner {
        top: 30%;
    }
}

@media (max-width: 480px) {
    .word-search-grid,
    .crossword-grid {
        padding: clamp(8px, 1.5vw, 14px);
    }

    .word-search-words h4,
    .crossword-clues h4 {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }
}

/* ========== DISCUSSION BOARD ENHANCED STYLING ========== */
.discussion-create {
    margin-bottom: 32px;
}

.discussion-create input[type="text"] {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    border: 2px solid #6D8196;
    border-radius: 12px;
    margin-top: 8px;
}

.discussion-room {
    background: white;
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.room-header {
    border-bottom: 3px solid #6D8196;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.room-header h3 {
    color: #2d3748;
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.room-info {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: center;
}

.room-code-display {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.1) 0%, rgba(198, 131, 70, 0.1) 100%);
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid #6D8196;
}

.room-code-display .label {
    font-weight: 600;
    color: #2d3748;
}

.room-code-display .code {
    font-size: 1.8rem;
    font-weight: 700;
    color: #C68346;
    letter-spacing: 3px;
    font-family: monospace;
}

.participant-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
}

.participant-count .label {
    margin-right: 8px;
}

.room-join-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.05) 0%, rgba(198, 131, 70, 0.05) 100%);
    border-radius: 16px;
}

.qr-code-container,
.manual-join {
    text-align: center;
}

.qr-code-container h4,
.manual-join h4 {
    color: #2d3748;
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.qr-code {
    display: inline-block;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.join-url {
    background: white;
    padding: 16px;
    border-radius: 12px;
    margin: 12px 0;
    border: 2px solid #6D8196;
    word-break: break-all;
}

.join-url strong {
    color: #C68346;
}

.responses-section {
    margin-bottom: 24px;
}

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

.responses-header h4 {
    color: #2d3748;
    font-size: 1.3rem;
}

.response-controls {
    display: flex;
    gap: 12px;
}

.responses-list {
    max-height: 600px;
    overflow-y: auto;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
}

.response-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    border-left: 4px solid #C68346;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.response-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.response-name {
    font-weight: 700;
    color: #2d3748;
    font-size: 1.05rem;
}

.response-time {
    font-size: 0.9rem;
    color: #718096;
}

.response-text {
    color: #2d3748;
    line-height: 1.6;
    font-size: 1rem;
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #718096;
}

.empty-state p {
    font-size: 1.2rem;
}

.discussion-actions {
    display: flex;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
    .room-join-section {
        grid-template-columns: 1fr;
    }

    .room-info {
        flex-direction: column;
        gap: 16px;
    }

    .response-controls {
        flex-direction: column;
    }
}


/* ========== BRAINSTORMING CLOUD STYLING ========== */
.brainstorm-create input[type="text"]{width:100%;padding:16px;font-size:1.1rem;border:2px solid #6D8196;border-radius:12px;margin-top:8px}
.brainstorm-session{background:white;padding:32px;border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.session-header{border-bottom:3px solid #6D8196;padding-bottom:24px;margin-bottom:24px}
.session-header h3{color:#2d3748;font-size:1.8rem;margin-bottom:16px}
.session-info{display:flex;gap:32px;flex-wrap:wrap;align-items:center}
.session-code-display{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(109,129,150,.1) 0%,rgba(198,131,70,.1) 100%);padding:12px 20px;border-radius:12px;border:2px solid #6D8196}
.session-code-display .code{font-size:1.8rem;font-weight:700;color:#C68346;letter-spacing:3px;font-family:monospace}
.idea-count{font-size:1.1rem;font-weight:600;color:#2d3748}
.brainstorm-content-area{display:grid;grid-template-columns:1fr 2fr;gap:24px;margin-bottom:24px}
.pending-ideas-panel,.mind-map-panel{background:#f8f9fa;padding:24px;border-radius:16px}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.panel-header h4{color:#2d3748;font-size:1.3rem;margin:0}
.panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.ideas-list{max-height:500px;overflow-y:auto}
.idea-card{background:white;padding:16px;border-radius:12px;margin-bottom:12px;border-left:4px solid #C68346;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.idea-card.pending{border-left-color:#F59E0B}
.idea-author{font-weight:700;color:#6D8196;font-size:.9rem;margin-bottom:4px}
.idea-text{color:#2d3748;line-height:1.6;margin-bottom:12px}
.idea-actions{display:flex;gap:8px}
.btn-approve,.btn-reject{padding:8px 16px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;font-size:.9rem}
.btn-approve{background:#4CAF50;color:white;box-shadow:0 2px 0 0 rgba(56,142,60,.8)}
.btn-reject{background:#f44336;color:white;box-shadow:0 2px 0 0 rgba(198,40,40,.8)}
.btn-approve:hover,.btn-reject:hover{transform:translateY(-1px)}
.btn-approve:active,.btn-reject:active{transform:translateY(1px)}
.mind-map-canvas{background:white;border-radius:12px;padding:16px;min-height:600px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
@media (max-width:1024px){.brainstorm-content-area{grid-template-columns:1fr}.panel-actions{flex-direction:column}}

/* ========== WORDLE BRAIN BREAK STYLING ========== */
.wordle-mode-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.wordle-mode-selector label {
    font-weight: 600;
    color: #555;
}

.wordle-difficulty-btn {
    padding: 8px 16px;
    background: rgba(248, 250, 252, 1);
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #475569;
}

.wordle-difficulty-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.wordle-difficulty-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.wordle-instructions {
    text-align: center;
    font-size: 1.1em;
    color: #666;
    margin-bottom: 20px;
}

.wordle-board {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 5px;
    max-width: 350px;
    margin: 0 auto 20px;
}

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

.wordle-tile {
    width: 62px;
    height: 62px;
    border: 2px solid #d3d6da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    background: white;
    transition: all 0.3s;
}

.wordle-tile.correct {
    background: #6aaa64;
    color: white;
    border-color: #6aaa64;
}

.wordle-tile.present {
    background: #c9b458;
    color: white;
    border-color: #c9b458;
}

.wordle-tile.absent {
    background: #787c7e;
    color: white;
    border-color: #787c7e;
}

.wordle-tile.filled {
    border-color: #878a8c;
}

.wordle-keyboard {
    max-width: 500px;
    margin: 20px auto;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.key {
    padding: 12px;
    min-width: 43px;
    background: #d3d6da;
    border: none;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s;
}

.key:hover {
    background: #bbb;
}

.key.wide {
    min-width: 65px;
    font-size: 0.75em;
}

.wordle-result {
    font-size: 1.3em;
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
}

.wordle-result.correct {
    background: #e8f5e9;
    color: #4CAF50;
}

.wordle-result.incorrect {
    background: #ffebee;
    color: #f44336;
}

/* ========== POLLS & VOTING STYLING ========== */
.poll-create input[type="text"], .poll-create select{width:100%;padding:14px;font-size:1rem;border:2px solid #cbd5e0;border-radius:8px;margin-top:6px}
.poll-options-container{margin:20px 0}
.poll-options-container label{display:block;margin-bottom:8px;font-weight:600;color:#4a5568}
.poll-options-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.poll-option-input{padding:12px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem}
.poll-session{background:white;padding:32px;border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.poll-header{border-bottom:3px solid #6D8196;padding-bottom:24px;margin-bottom:24px}
.poll-header h3{color:#2d3748;font-size:1.8rem;margin-bottom:16px;line-height:1.4}
.poll-info{display:flex;gap:32px;flex-wrap:wrap;align-items:center}
.poll-code-display{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(109,129,150,.1)0%,rgba(198,131,70,.1)100%);padding:12px 20px;border-radius:12px;border:2px solid #6D8196}
.poll-code-display .code{font-size:1.8rem;font-weight:700;color:#C68346;letter-spacing:3px;font-family:monospace}
.vote-count{font-size:1.1rem;font-weight:600;color:#2d3748}
.poll-join-section{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px;padding:24px;background:linear-gradient(135deg,rgba(109,129,150,.05)0%,rgba(198,131,70,.05)100%);border-radius:16px}
.poll-results-section{background:#f8f9fa;padding:24px;border-radius:16px;margin-bottom:24px}
.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}
.results-header h4{color:#2d3748;font-size:1.3rem;margin:0}
.viz-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.viz-controls label{font-weight:600;color:#4a5568;margin-right:8px}
.viz-btn{padding:10px 16px;background:white;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s;font-size:.9rem}
.viz-btn:hover{background:#f7fafc;border-color:#cbd5e1;transform:translateY(-1px)}
.viz-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border-color:transparent;box-shadow:0 4px 12px rgba(102,126,234,.3)}
.viz-view{background:white;padding:24px;border-radius:12px;min-height:400px}
.percentage-card{background:white;padding:20px;border-radius:12px;margin-bottom:16px;border:2px solid #e2e8f0;transition:all .2s}
.percentage-card:hover{border-color:#667eea;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.percentage-option{font-size:1.2rem;font-weight:700;color:#2d3748;margin-bottom:12px}
.percentage-bar-container{width:100%;height:32px;background:#e2e8f0;border-radius:16px;overflow:hidden;margin-bottom:12px}
.percentage-bar{height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;transition:width .5s ease}
.percentage-stats{display:flex;justify-content:space-between;align-items:center}
.percentage-value{font-size:1.4rem;font-weight:700;color:#667eea}
.vote-count{color:#718096;font-size:.9rem}
.live-feed-list{max-height:600px;overflow-y:auto}
.vote-card{background:white;padding:20px;border-radius:12px;margin-bottom:12px;border-left:4px solid #667eea;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .2s}
.vote-card:hover{transform:translateX(4px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.vote-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #e0e0e0}
.vote-name{font-weight:700;color:#2d3748;font-size:1.05rem}
.vote-time{font-size:.9rem;color:#718096}
.vote-response{color:#2d3748;line-height:1.6;font-size:1rem}
.poll-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
@media (max-width:768px){.poll-join-section,.results-header{grid-template-columns:1fr}.viz-controls{flex-direction:column;align-items:flex-start}}

/* ========== MEMORY CHALLENGE GAME STYLING ========== */
.memory-instructions{text-align:center;font-size:1.1rem;color:#718096;margin-bottom:20px}
.memory-settings{display:flex;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.memory-settings .setting-group{flex:1;min-width:200px}
.memory-game-container{background:#f8f9fa;padding:32px;border-radius:16px;margin-bottom:24px;min-height:400px;display:flex;align-items:center;justify-content:center}
.memory-countdown{text-align:center}
.countdown-number{font-size:8rem;font-weight:700;color:#667eea;text-shadow:0 4px 12px rgba(102,126,234,.3);animation:pulse 1s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.memory-countdown p{font-size:1.5rem;color:#4a5568;margin-top:20px}
.memory-image-display{position:relative;width:100%;max-width:800px;margin:0 auto}
.memory-timer{position:absolute;top:-40px;right:0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:12px 24px;border-radius:12px;font-size:1.5rem;font-weight:700;box-shadow:0 4px 12px rgba(102,126,234,.3)}
#memoryCanvas{width:100%;height:auto;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);background:white}
.memory-answer-phase{width:100%;max-width:600px;margin:0 auto;text-align:center}
.memory-prompt{font-size:1.2rem;color:#2d3748;margin-bottom:16px;font-weight:600}
#memoryAnswerInput{width:100%;padding:16px;font-size:1rem;border:2px solid #cbd5e0;border-radius:12px;font-family:inherit;resize:vertical;margin-bottom:16px}
#memoryAnswerInput:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px rgba(102,126,234,.2)}
.memory-answer-reveal{background:linear-gradient(135deg,rgba(109,129,150,.1)0%,rgba(198,131,70,.1)100%);padding:24px;border-radius:12px;margin-top:20px;border:3px solid #6D8196}
.memory-answer-reveal h4{color:#2d3748;font-size:1.3rem;margin-bottom:16px}
.memory-answer-reveal ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.memory-answer-reveal li{background:white;padding:12px 20px;border-radius:8px;font-size:2rem;box-shadow:0 2px 8px rgba(0,0,0,.1);border:2px solid #6D8196}

/* ========== MEMORY CHALLENGE ADDITIONAL STYLING ========== */
.memory-choice-item{display:flex;align-items:center;gap:12px;padding:16px;background:white;border:3px solid #e2e8f0;border-radius:12px;margin-bottom:12px;cursor:pointer;transition:all .3s}
.memory-choice-item:hover{border-color:#667eea;background:#f7fafc;transform:scale(1.02)}
.memory-choice-item input[type="checkbox"]{width:24px;height:24px;cursor:pointer}
.memory-choice-emoji{font-size:2.5rem}
.memory-choices-list{max-width:600px;margin:0 auto 20px}
.memory-feedback{background:linear-gradient(135deg,rgba(109,129,150,.1)0%,rgba(198,131,70,.1)100%);padding:24px;border-radius:12px;margin-top:20px;border:3px solid #6D8196}
.feedback-results p{font-size:1.1rem;margin:8px 0;color:#2d3748}
.feedback-items{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.feedback-emoji{font-size:2rem;background:white;padding:12px;border-radius:8px;border:2px solid #6D8196;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.memory-hint{text-align:center;font-size:1rem;color:#718096;font-style:italic;margin:12px 0}

/* ========================================
   STORYSPARK - CREATIVE WRITING TOOL
   ======================================== */

.storyspark-container{display:flex;gap:24px;width:100%}
.storyspark-main{flex:1;min-width:0}
.storyspark-sidebar{width:280px;flex-shrink:0}

/* Intro */
.storyspark-intro{background:linear-gradient(135deg,rgba(109,129,150,.1)0%,rgba(198,131,70,.1)100%);padding:16px 20px;border-radius:12px;margin-bottom:24px;text-align:center;border:2px solid #6D8196}
.storyspark-intro p{margin:0;color:#2d3748;font-size:1rem;font-weight:500}

/* Spinner Grid */
.spinner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.spinner-card{background:white;border:3px solid #e2e8f0;border-radius:16px;padding:20px;text-align:center;transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.spinner-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.12);border-color:#6D8196}
.spinner-icon{font-size:2.5rem;margin-bottom:8px}
.spinner-title{font-size:1rem;font-weight:700;color:#2d3748;margin:8px 0}
.spinner-display{min-height:50px;background:#f7fafc;border-radius:8px;padding:12px;font-size:0.95rem;color:#4a5568;margin:12px 0;display:flex;align-items:center;justify-content:center;border:2px solid #e2e8f0}
.spin-single-btn{background:linear-gradient(135deg,#6D8196,#8599ae);color:white;border:none;padding:8px 16px;border-radius:8px;font-size:0.9rem;cursor:pointer;font-weight:600;transition:all .2s;box-shadow:0 3px 0 0 rgba(0,0,0,.2),0 4px 8px rgba(0,0,0,.15)}
.spin-single-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 0 rgba(0,0,0,.2),0 6px 12px rgba(0,0,0,.2)}
.spin-single-btn:active{transform:translateY(1px);box-shadow:0 2px 0 0 rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.15)}

/* Generate Section */
.storyspark-generate-section{text-align:center;margin-bottom:32px}
.storyspark-generate-section label{justify-content:center;font-size:0.95rem;color:#4a5568;cursor:pointer}

/* Story Idea Display */
.story-idea-display{background:linear-gradient(135deg,rgba(109,129,150,.15)0%,rgba(198,131,70,.15)100%);padding:28px;border-radius:16px;margin-bottom:32px;border:3px solid #6D8196;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.story-idea-display h3{color:#2d3748;font-size:1.4rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.story-idea-display p{color:#1a202c;font-size:1.1rem;line-height:1.7;margin:0}

/* Writing Scaffold */
.writing-scaffold{background:white;padding:32px;border-radius:16px;border:3px solid #e2e8f0;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.writing-scaffold h3{color:#2d3748;font-size:1.5rem;margin-bottom:8px}
.scaffold-instructions{color:#718096;font-size:0.95rem;margin-bottom:24px}
.scaffold-section{margin-bottom:28px;padding-bottom:28px;border-bottom:2px solid #e2e8f0}
.scaffold-section:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.scaffold-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.scaffold-header h4{color:#2d3748;font-size:1.15rem;margin:0}
.toggle-help-btn{background:#f7fafc;border:2px solid #e2e8f0;padding:6px 14px;border-radius:8px;font-size:0.85rem;cursor:pointer;color:#4a5568;font-weight:600;transition:all .2s}
.toggle-help-btn:hover{background:#edf2f7;border-color:#cbd5e0}
.scaffold-help{background:#f7fafc;padding:16px;border-radius:8px;margin-bottom:12px;border-left:4px solid #C68346}
.help-content strong{color:#2d3748;display:block;margin-bottom:8px;font-size:0.95rem}
.help-content ul{margin:8px 0 16px 20px;padding:0;color:#4a5568}
.help-content li{margin:4px 0;font-size:0.9rem}
.vocab-tags{display:inline-block;font-size:0.9rem;color:#667eea;font-style:italic}
.scaffold-textarea{width:100%;padding:14px;border:2px solid #e2e8f0;border-radius:8px;font-family:inherit;font-size:1rem;resize:vertical;transition:all .2s;min-height:100px}
.scaffold-textarea:focus{outline:none;border-color:#6D8196;box-shadow:0 0 0 4px rgba(109,129,150,.15)}
.scaffold-textarea::placeholder{color:#a0aec0}

/* Word Count */
.word-count-tracker{background:linear-gradient(135deg,#6D8196,#8599ae);padding:16px;border-radius:12px;text-align:center;margin-top:24px;box-shadow:0 3px 0 0 rgba(0,0,0,.2)}
.word-count-label{color:white;font-size:1rem;font-weight:600;margin-right:8px}
.word-count-value{color:white;font-size:1.8rem;font-weight:700}

/* Sidebar */
.storyspark-sidebar{display:flex;flex-direction:column;gap:20px}
.sidebar-section{background:white;border:3px solid #e2e8f0;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.sidebar-section h4{color:#2d3748;font-size:1.1rem;margin:0 0 8px 0;font-weight:700}
.sidebar-description{color:#718096;font-size:0.85rem;margin:0 0 12px 0;line-height:1.4}
.genre-pack-select{width:100%;padding:10px;border:2px solid #e2e8f0;border-radius:8px;font-size:0.95rem;font-family:inherit;background:white;cursor:pointer;transition:all .2s}
.genre-pack-select:focus{outline:none;border-color:#6D8196;box-shadow:0 0 0 4px rgba(109,129,150,.15)}
.challenge-display{background:#f7fafc;padding:12px;border-radius:8px;margin-top:12px;border-left:4px solid #C68346}
.challenge-display strong{color:#2d3748;font-size:0.95rem}
.collaborative-info{background:#f7fafc;padding:12px;border-radius:8px;margin-top:12px;text-align:center}
.collaborative-info p{margin:0 0 8px 0;color:#4a5568;font-size:0.9rem}
.collaborative-info strong{color:#2d3748;font-size:1.1rem;font-weight:700}

/* Responsive */
@media(max-width:1200px){.storyspark-container{flex-direction:column}.storyspark-sidebar{width:100%}.spinner-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.spinner-grid{grid-template-columns:1fr}}

/* ========================================
   SENSESCAPE - 5 SENSES WRITING TOOL
   ======================================== */

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

/* Header */
.sensescape-header{background:linear-gradient(135deg,rgba(109,129,150,.1)0%,rgba(198,131,70,.1)100%);padding:20px;border-radius:16px;margin-bottom:24px;border:2px solid #6D8196}
.scene-input-group{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.scene-input-group label{font-weight:700;color:#2d3748;font-size:1.1rem}
#sceneInput{flex:1;min-width:300px;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;font-family:inherit}
#sceneInput:focus{outline:none;border-color:#6D8196;box-shadow:0 0 0 4px rgba(109,129,150,.15)}
.scene-display{margin-top:16px;padding:16px;background:#f7fafc;border-radius:8px;font-size:1.1rem;color:#1a202c;font-style:italic;border-left:4px solid #6D8196}

/* Sense Cards Grid */
.sense-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:32px}
.sense-card{background:white;border:3px solid var(--card-color,#e2e8f0);border-radius:20px;padding:24px;transition:all .3s;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.sense-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.sense-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sense-icon{font-size:2.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.sense-card-header h3{font-size:1.4rem;color:#2d3748;margin:0}
.guiding-question{color:#4a5568;font-size:0.95rem;margin-bottom:12px;font-weight:500}
.sense-textarea{width:100%;padding:12px;border:2px solid #e2e8f0;border-radius:12px;font-family:inherit;font-size:0.95rem;resize:vertical;transition:all .2s;min-height:100px}
.sense-textarea:focus{outline:none;border-color:var(--card-color);box-shadow:0 0 0 4px rgba(var(--card-color-rgb),.15)}
.sense-tools{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.vocab-dice-btn,.starter-btn{background:var(--card-color);color:white;border:none;padding:8px 14px;border-radius:8px;font-size:0.85rem;cursor:pointer;font-weight:600;transition:all .2s;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.vocab-dice-btn:hover,.starter-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.2)}
.vocab-dice-btn:active,.starter-btn:active{transform:translateY(0)}
.vocab-suggestions,.sentence-starter{background:#f7fafc;padding:12px;border-radius:8px;margin-top:12px;font-size:0.9rem;color:#2d3748;border-left:3px solid var(--card-color)}

/* Summary Builder */
.summary-builder{background:white;border:3px solid #6D8196;border-radius:20px;padding:28px;margin-bottom:24px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.summary-builder h3{color:#2d3748;font-size:1.5rem;margin-bottom:12px}
.summary-instructions{color:#718096;font-size:0.95rem;margin-bottom:16px}
.generated-summary{background:linear-gradient(135deg,rgba(109,129,150,.1)0%,rgba(198,131,70,.1)100%);padding:20px;border-radius:12px;margin-bottom:16px;font-size:1.05rem;line-height:1.7;color:#1a202c;border:2px solid #6D8196}
.final-prose{width:100%;padding:16px;border:2px solid #e2e8f0;border-radius:12px;font-family:inherit;font-size:1rem;resize:vertical;line-height:1.6;transition:all .2s}
.final-prose:focus{outline:none;border-color:#6D8196;box-shadow:0 0 0 4px rgba(109,129,150,.15)}
.word-count{text-align:right;margin-top:8px;font-size:0.9rem;color:#718096;font-weight:600}

/* Controls */
.sensescape-controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;justify-content:center}
.sensescape-controls button{transition:all .2s}

/* Panels */
.challenge-panel,.teacher-panel{background:white;border:3px solid #e2e8f0;border-radius:16px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.challenge-panel h4,.teacher-panel h4{color:#2d3748;font-size:1.3rem;margin:0 0 16px 0}
.sensescape-challenge{background:linear-gradient(135deg,rgba(147,112,219,.1)0%,rgba(147,112,219,.2)100%);padding:16px;border-radius:12px;margin-bottom:12px;border-left:4px solid #9370DB;font-size:1rem;line-height:1.6}
.teacher-settings{display:grid;gap:16px}
.teacher-settings .setting-group{display:flex;flex-direction:column;gap:8px}
.teacher-settings label{font-weight:600;color:#4a5568;font-size:0.95rem}
.teacher-settings select{padding:10px;border:2px solid #e2e8f0;border-radius:8px;font-size:0.95rem;font-family:inherit;cursor:pointer}
.teacher-settings select:focus{outline:none;border-color:#6D8196;box-shadow:0 0 0 3px rgba(109,129,150,.15)}

/* Responsive */
@media(max-width:768px){.sense-cards-grid{grid-template-columns:1fr}.sensescape-controls{flex-direction:column}.sensescape-controls button{width:100%}}

/* ========================================
   WHITEBOARD DISPLAY MODE
   ======================================== */
.sensescape-container.whiteboard-mode{background:#1a202c;padding:40px;border-radius:0;min-height:100vh;overflow-y:auto}.sensescape-container.whiteboard-mode .sensescape-header{background:rgba(109,129,150,.2);border-color:#6D8196}.sensescape-container.whiteboard-mode .scene-display{font-size:2rem;background:#2d3748;color:white;padding:24px;border-left-color:#C68346;border-width:6px}.sensescape-container.whiteboard-mode .sense-card{transform:none!important;font-size:1.3rem;padding:32px}.sensescape-container.whiteboard-mode .sense-card-header{margin-bottom:20px}.sensescape-container.whiteboard-mode .sense-icon{font-size:3.5rem}.sensescape-container.whiteboard-mode .sense-card-header h3{font-size:2rem}.sensescape-container.whiteboard-mode .sense-textarea{font-size:1.4rem;line-height:1.8;min-height:120px;background:white;border-width:3px}.sensescape-container.whiteboard-mode .vocab-dice-btn,.sensescape-container.whiteboard-mode .starter-btn{font-size:1rem;padding:10px 18px}.sensescape-container.whiteboard-mode .vocab-suggestions,.sensescape-container.whiteboard-mode .sentence-starter{font-size:1.1rem;padding:16px;background:#f7fafc;border-width:3px}.sensescape-container.whiteboard-mode .whiteboard-display{font-size:1.5rem;line-height:1.8;color:#1a202c;background:#f7fafc;padding:20px;border-radius:12px;margin-top:16px;border:3px solid var(--card-color)}.sensescape-container.whiteboard-mode .summary-builder{font-size:1.4rem;padding:40px;border-width:4px}.sensescape-container.whiteboard-mode .summary-builder h3{font-size:2.5rem;margin-bottom:20px}.sensescape-container.whiteboard-mode .generated-summary{font-size:1.6rem;line-height:2;padding:28px;border-width:3px}.sensescape-container.whiteboard-mode .final-prose{font-size:1.8rem;line-height:1.8;padding:24px;border-width:3px;background:#f7fafc}
@media(max-width:1024px){.sensescape-container.whiteboard-mode .sense-card{font-size:1.1rem}.sensescape-container.whiteboard-mode .whiteboard-display{font-size:1.3rem}}

/* StorySpark Whiteboard Mode */
.storyspark-container.whiteboard-mode{background:#1a202c;padding:40px;border-radius:0;min-height:100vh;overflow-y:auto}.storyspark-container.whiteboard-mode .spinner-grid{grid-template-columns:repeat(4,1fr);gap:24px}.storyspark-container.whiteboard-mode .spinner-card{padding:28px;transform:none!important}.storyspark-container.whiteboard-mode .spinner-icon{font-size:3.5rem}.storyspark-container.whiteboard-mode .spinner-title{font-size:1.3rem}.storyspark-container.whiteboard-mode .spinner-display{font-size:1.2rem;min-height:60px;padding:16px}.storyspark-container.whiteboard-mode .story-idea-display{font-size:1.4rem;padding:36px;background:linear-gradient(135deg,#f7fafc 0%,#ffffff 100%)!important;border:4px solid #C68346!important}.storyspark-container.whiteboard-mode .story-idea-display h3{font-size:2.2rem;color:#1a202c!important;font-weight:700}.storyspark-container.whiteboard-mode .story-idea-display p{font-size:1.6rem;line-height:2;color:#1a202c!important;font-weight:500}.storyspark-container.whiteboard-mode .writing-scaffold{background:#2d3748;border-color:#6D8196}.storyspark-container.whiteboard-mode .writing-scaffold h3{font-size:2rem;color:white}.storyspark-container.whiteboard-mode .scaffold-instructions{color:#cbd5e0}.storyspark-container.whiteboard-mode .scaffold-section{border-bottom-color:#4a5568}.storyspark-container.whiteboard-mode .scaffold-header h4{font-size:1.5rem;color:white}.storyspark-container.whiteboard-mode .whiteboard-display{font-size:1.3rem;line-height:1.8;color:#1a202c;background:#f7fafc;padding:20px;border-radius:12px;margin-top:16px;border:3px solid #6D8196}.storyspark-container.whiteboard-mode .word-count-tracker{font-size:1.2rem;padding:24px}.storyspark-container.whiteboard-mode .word-count-value{font-size:2.5rem}
@media(max-width:1024px){.storyspark-container.whiteboard-mode .spinner-grid{grid-template-columns:repeat(2,1fr)}.storyspark-container.whiteboard-mode .spinner-icon{font-size:2.5rem}.storyspark-container.whiteboard-mode .whiteboard-display{font-size:1.1rem}}

/* Whiteboard Exit Button */
.whiteboard-exit-btn{position:fixed;top:20px;right:20px;background:linear-gradient(135deg,#C68346,#d69a5d);color:white;border:none;padding:16px 28px;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .3s;border:3px solid rgba(255,255,255,.3)}.whiteboard-exit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.4);background:linear-gradient(135deg,#d69a5d,#e4b077)}.whiteboard-exit-btn:active{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,.3)}

/* ========================================
   EXTERNAL LINKS PAGE
   ======================================== */
.external-links-intro{text-align:center;font-size:1.1rem;color:#718096;margin-bottom:32px}
.external-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;max-width:1200px;margin:0 auto}
.external-link-card{display:flex;flex-direction:column;align-items:center;background:white;border:4px solid var(--link-color,#e2e8f0);border-radius:24px;padding:40px;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px rgba(0,0,0,.08);position:relative;overflow:hidden}
.external-link-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--link-color),transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.external-link-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 28px rgba(0,0,0,.15);border-color:var(--link-color)}
.external-link-card:hover::before{transform:scaleX(1)}
.external-link-card:active{transform:translateY(-4px) scale(0.98)}
.link-icon{width:120px;height:120px;display:flex;align-items:center;justify-content:center;border-radius:20px;margin-bottom:20px;box-shadow:0 8px 20px rgba(0,0,0,.15);transition:all .3s}
.external-link-card:hover .link-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.link-title{font-size:1.8rem;font-weight:700;color:#2d3748;margin:0 0 12px 0;text-align:center;transition:color .3s}
.external-link-card:hover .link-title{color:var(--link-color)}
.link-description{font-size:1.05rem;color:#718096;text-align:center;margin:0 0 16px 0;line-height:1.6}
.link-badge{background:linear-gradient(135deg,rgba(0,0,0,.05),rgba(0,0,0,.08));padding:8px 16px;border-radius:20px;font-size:0.85rem;font-weight:600;color:#4a5568;text-transform:uppercase;letter-spacing:1px;transition:all .3s}
.external-link-card:hover .link-badge{background:var(--link-color);color:white;transform:scale(1.05)}
@media(max-width:768px){.external-links-grid{grid-template-columns:1fr;max-width:400px}.link-icon{width:100px;height:100px}.link-title{font-size:1.5rem}}

/* ========================================
   AUSSIE'S ROUND-UP ANIMATION
   ======================================== */
.animation-tier{margin-bottom:16px}.tier-label{display:block;font-size:0.9rem;font-weight:700;color:#6D8196;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.aussie-canvas{width:100%;max-width:800px;margin:0 auto;display:block;border-radius:16px;box-shadow:none;background:transparent}.name-card{position:absolute;background:white;padding:12px 20px;border-radius:12px;font-size:1.1rem;font-weight:700;color:#2d3748;border:3px solid #4CAF50;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:all .3s;cursor:pointer}.name-card.selected{border-color:#FFD700;background:linear-gradient(135deg,#FFD700 0%,#FFA500 100%);color:white;transform:scale(1.2);box-shadow:0 8px 24px rgba(255,165,0,.4);animation:celebrateBounce .6s ease}.name-card.scattered{animation:scatter .5s ease}@keyframes scatter{from{transform:scale(0) rotate(0deg);opacity:0}to{transform:scale(1) rotate(calc(var(--random-rotation)*1deg));opacity:1}}@keyframes celebrateBounce{0%,100%{transform:scale(1.2) translateY(0)}50%{transform:scale(1.3) translateY(-10px)}}
.book-spine{position:absolute;width:60px;height:280px;background:linear-gradient(135deg,#D32F2F,#C62828);border:3px solid #8B0000;border-radius:8px 8px 0 0;box-shadow:0 4px 12px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;transform-origin:bottom;transition:all .8s;cursor:pointer}.book-spine span{writing-mode:vertical-rl;text-orientation:mixed;color:white;font-weight:700;font-size:1rem;padding:12px}.book-spine.selected{transform:translateY(-30px) scale(1.1);box-shadow:0 12px 24px rgba(255,215,0,.5);border-color:#FFD700;animation:bookGlow 1s ease infinite}@keyframes bookGlow{0%%,100%%{box-shadow:0 12px 24px rgba(255,215,0,.5)}50%%{box-shadow:0 12px 32px rgba(255,215,0,.8)}}.beaker-orb{position:absolute;width:80px;height:80px;background:radial-gradient(circle,rgba(100,200,255,.8),rgba(50,150,255,.6));border:3px solid #4FC3F7;border-radius:50%%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:0.95rem;text-align:center;padding:8px;box-shadow:0 4px 12px rgba(79,195,247,.4);transition:all .5s;animation:float 3s ease-in-out infinite}.beaker-orb.selected{background:radial-gradient(circle,rgba(255,215,0,1),rgba(255,165,0,.9));border-color:#FFD700;transform:scale(1.3);box-shadow:0 8px 24px rgba(255,215,0,.8);animation:pop .8s ease}@keyframes float{0%%,100%%{transform:translateY(0)}50%%{transform:translateY(-20px)}}@keyframes pop{0%%{transform:scale(.5)}50%%{transform:scale(1.4)}100%%{transform:scale(1.3)}}.compass-needle{position:absolute;width:4px;height:120px;background:linear-gradient(180deg,#D32F2F 0%%,#333 50%%,#666 100%%);border-radius:2px;transform-origin:center;top:50%%;left:50%%;margin-left:-2px;margin-top:-60px;transition:transform .1s linear;box-shadow:0 2px 8px rgba(0,0,0,.3)}.compass-dial{position:absolute;width:300px;height:300px;border:8px solid #8B4513;border-radius:50%%;background:radial-gradient(circle,#F4E4C1 0%%,#D4AF37 70%%,#8B4513 100%%);box-shadow:inset 0 4px 12px rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}.curtain{position:absolute;top:0;width:50%%;height:100%%;background:linear-gradient(90deg,#8B0000 0%%,#DC143C 50%%,#8B0000 100%%);box-shadow:inset 0 0 40px rgba(0,0,0,.5);transition:transform 2s ease;z-index:10}.curtain.left{left:0;transform-origin:left}.curtain.right{right:0;transform-origin:right}.curtain.open.left{transform:translateX(-100%%)}.curtain.open.right{transform:translateX(100%%)}.marquee-sign{position:absolute;top:50%%;left:50%%;transform:translate(-50%%,-50%%);background:#1a1a1a;padding:40px 60px;border:12px solid #FFD700;border-radius:20px;font-size:2.5rem;font-weight:900;color:#FFD700;text-align:center;box-shadow:0 0 40px rgba(255,215,0,.6);animation:marqueeFlash 1.5s ease infinite}@keyframes marqueeFlash{0%%,100%%{box-shadow:0 0 40px rgba(255,215,0,.6)}50%%{box-shadow:0 0 60px rgba(255,215,0,1)}}

/* ========================================
   COLLAPSIBLE SIDEBAR
   ======================================== */
.sidebar-toggle{position:fixed;left:10px;top:50%;transform:translateY(-50%);width:44px;height:44px;background:linear-gradient(135deg,#6D8196,#8599ae);border:none;border-radius:50%;cursor:pointer;z-index:1001;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .3s}
.sidebar-toggle:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.sidebar-toggle .toggle-icon{color:white;font-size:1.3rem;font-weight:700;transition:transform .3s}
.tool-nav.collapsed{width:0;padding:0;overflow:hidden}
.tool-nav.collapsed .sidebar-toggle{left:10px}
.tool-nav.collapsed .sidebar-toggle .toggle-icon{transform:rotate(180deg)}
.tool-nav.collapsed .nav-category{display:none}
.app-container{transition:grid-template-columns .3s ease}
.app-container:has(.tool-nav.collapsed){grid-template-columns:0 1fr}
main{transition:all .3s ease;width:100%}

/* ========================================
   DISCUSSION OF THE DAY ENHANCEMENTS
   ======================================== */
.discussion-display{background:linear-gradient(135deg,rgba(109,129,150,.08),rgba(198,131,70,.08));padding:2rem;border-radius:20px;border:3px solid rgba(109,129,150,.2)}
#discussionStatement{font-size:2rem;font-weight:700;color:#2d3748;text-shadow:0 2px 4px rgba(0,0,0,.05);line-height:1.6;margin-bottom:2rem}
.scale-labels{display:flex;justify-content:space-between;margin-bottom:20px;gap:8px}
.scale-labels span{flex:1;text-align:center;font-size:1.1rem;font-weight:700;color:#4a5568;background:rgba(255,255,255,.9);padding:12px 8px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .3s}
.scale-labels span:nth-child(1){background:linear-gradient(135deg,#FEE2E2,#FECACA);color:#991B1B}
.scale-labels span:nth-child(2){background:linear-gradient(135deg,#FED7AA,#FDBA74);color:#9A3412}
.scale-labels span:nth-child(3){background:linear-gradient(135deg,#E5E7EB,#D1D5DB);color:#374151}
.scale-labels span:nth-child(4){background:linear-gradient(135deg,#D9F99D,#BEF264);color:#3F6212}
.scale-labels span:nth-child(5){background:linear-gradient(135deg,#86EFAC,#4ADE80);color:#14532D}
.arrow-container{position:relative;width:100%;max-width:none;margin:0 auto;padding:20px 0}
.double-arrow{width:100%;height:100px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}
.position-marker{width:28px;height:28px;border:5px solid #1e293b;background:white;box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:20;animation:pulse-marker 1.5s ease-in-out infinite}
@keyframes pulse-marker{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}
.selected-position{font-size:1.8rem;font-weight:800;min-height:60px;margin-top:30px;padding:20px;background:white;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:3px solid #4CAF50;color:#2d3748;display:none}
.selected-position:not(:empty){display:block}
.fullscreen-container .discussion-display{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);max-width:95%;margin:0 auto}
.fullscreen-container #discussionStatement{font-size:3.5rem;color:#1a202c;text-shadow:0 4px 8px rgba(0,0,0,.1);margin-bottom:3rem}
.fullscreen-container .scale-labels span{font-size:1.4rem;padding:16px 12px}
.fullscreen-container .double-arrow{height:140px}
.fullscreen-container .position-marker{width:36px;height:36px;border-width:6px}
.fullscreen-container .selected-position{font-size:2.5rem;padding:30px;margin-top:40px}
@media (max-width:768px){.scale-labels{flex-direction:column;gap:8px}.scale-labels span{font-size:1rem;padding:10px}.double-arrow{height:80px}.selected-position{font-size:1.4rem}}

/* Fix for random square - make click zones invisible but clickable */
.zone{background:transparent !important;border:none !important;opacity:1 !important}
.zone:hover{background:transparent !important;opacity:1 !important}
.position-marker{display:none;pointer-events:none}
.position-marker.active{display:block;pointer-events:none}

/* ========================================
   DARK MODE STYLES - COLOR THEORY OPTIMIZED
   WCAG AAA Compliant (15:1+ contrast ratios)
   ======================================== */

/* Core Dark Mode Variables */
body.dark-mode {
    /* Surface Colors - Semantic Depth */
    --dm-surface-1: #0f172a;     /* Deepest - Main background (slate-900) */
    --dm-surface-2: #1e293b;     /* Cards & containers (slate-800) */
    --dm-surface-3: #334155;     /* Elevated elements (slate-700) */
    --dm-surface-4: #475569;     /* Highest elevation (slate-600) */

    /* Text Colors - Optimal Contrast */
    --dm-text-primary: #f1f5f9;  /* 15:1 contrast - Headings (slate-100) */
    --dm-text-secondary: #cbd5e1;/* 11:1 contrast - Body text (slate-300) */
    --dm-text-muted: #94a3b8;    /* 7:1 contrast - Hints (slate-400) */
    --dm-text-disabled: #64748b; /* 4.5:1 contrast - Disabled (slate-500) */

    /* Accent Colors - Brand Aligned */
    --dm-blue: #60a5fa;          /* Blue-400 - Primary actions */
    --dm-blue-hover: #3b82f6;    /* Blue-500 - Hover state */
    --dm-copper: #fb923c;        /* Orange-400 - Secondary accent */
    --dm-copper-hover: #f97316;  /* Orange-500 - Hover state */

    /* Semantic Colors - Status Communication */
    --dm-success: #86efac;       /* Green-300 */
    --dm-warning: #fcd34d;       /* Yellow-300 */
    --dm-error: #fca5a5;         /* Red-300 */
    --dm-info: #93c5fd;          /* Blue-300 */

    /* Border & Dividers */
    --dm-border: rgba(148, 163, 184, 0.2);  /* Subtle borders */
    --dm-border-strong: rgba(148, 163, 184, 0.4);  /* Emphasis borders */
}

/* Main Background */
body.dark-mode {
    background: linear-gradient(135deg, var(--dm-surface-1) 0%, var(--dm-surface-2) 50%, var(--dm-surface-1) 100%);
    color: var(--dm-text-secondary);
}

/* Header */
body.dark-mode .premium-tools-header {
    background: linear-gradient(135deg, var(--dm-surface-2) 0%, var(--dm-surface-1) 50%, var(--dm-surface-3) 100%);
    border-bottom: 1px solid var(--dm-border);
}

/* Navigation Sidebar */
body.dark-mode .tool-nav {
    background: var(--dm-surface-2);
    border-right: 1px solid var(--dm-border);
}

body.dark-mode .nav-category {
    background: var(--dm-surface-3);
    border-color: var(--dm-border-strong);
}

body.dark-mode .category-label {
    color: var(--dm-text-primary);
    font-weight: 600;
}

body.dark-mode .nav-btn {
    background: var(--dm-surface-3);
    color: var(--dm-text-secondary);
    border: 1px solid var(--dm-border);
}

body.dark-mode .nav-btn:hover {
    background: var(--dm-surface-4);
    color: var(--dm-text-primary);
    border-color: var(--dm-border-strong);
}

body.dark-mode .nav-btn.active {
    background: linear-gradient(135deg, var(--dm-blue), var(--dm-blue-hover));
    color: var(--dm-text-primary);
    border-color: var(--dm-blue-hover);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
}

/* Tool Sections */
body.dark-mode .tool-section {
    background: var(--dm-surface-2);
    color: var(--dm-text-secondary);
}

body.dark-mode .tool-content {
    background: var(--dm-surface-2);
    border: 1px solid var(--dm-border);
}

/* Typography */
body.dark-mode h1,
body.dark-mode h2 {
    color: var(--dm-text-primary);
}

body.dark-mode h3,
body.dark-mode h4 {
    color: var(--dm-text-secondary);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode label {
    color: var(--dm-text-secondary);
}

/* Buttons */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--dm-blue), var(--dm-blue-hover));
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-blue-hover);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}

body.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, var(--dm-blue-hover), #2563eb);
    box-shadow: 0 6px 16px rgba(96, 165, 250, 0.3);
    transform: translateY(-2px);
}

body.dark-mode .btn-secondary {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-border-strong);
    box-shadow: 0 4px 0 0 rgba(71, 85, 105, 0.8), 0 6px 12px rgba(15, 23, 42, 0.2);
}

body.dark-mode .btn-secondary:hover {
    background: var(--dm-surface-4);
    border-color: var(--dm-text-muted);
    box-shadow: 0 5px 0 0 rgba(71, 85, 105, 0.8), 0 8px 16px rgba(15, 23, 42, 0.3);
}

body.dark-mode .btn-secondary:active {
    box-shadow: 0 2px 0 0 rgba(71, 85, 105, 0.8), 0 4px 8px rgba(15, 23, 42, 0.2);
}

body.dark-mode .btn-approve {
    box-shadow: 0 2px 0 0 rgba(96, 165, 250, 0.6);
}

body.dark-mode .btn-reject {
    box-shadow: 0 2px 0 0 rgba(71, 85, 105, 0.8);
}

body.dark-mode button,
body.dark-mode .btn {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.4);
}

body.dark-mode button:hover,
body.dark-mode .btn:hover {
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.5);
}

body.dark-mode .spin-single-btn {
    box-shadow: 0 3px 0 0 rgba(71, 85, 105, 0.6), 0 4px 8px rgba(15, 23, 42, 0.3);
}

body.dark-mode .spin-single-btn:hover {
    box-shadow: 0 5px 0 0 rgba(71, 85, 105, 0.6), 0 6px 12px rgba(15, 23, 42, 0.4);
}

body.dark-mode .spin-single-btn:active {
    box-shadow: 0 2px 0 0 rgba(71, 85, 105, 0.6), 0 3px 6px rgba(15, 23, 42, 0.3);
}

body.dark-mode .vocab-dice-btn,
body.dark-mode .starter-btn {
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.4);
}

body.dark-mode .vocab-dice-btn:hover,
body.dark-mode .starter-btn:hover {
    box-shadow: 0 4px 8px rgba(71, 85, 105, 0.5);
}

body.dark-mode .viz-btn.active {
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

/* Form Inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border);
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--dm-blue);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-mode input[type="text"]::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-muted);
}

/* Discussion of the Day */
body.dark-mode #discussionStatement {
    color: var(--dm-text-primary);
    font-weight: 600;
}

body.dark-mode .discussion-display {
    background: linear-gradient(135deg, var(--dm-surface-2), var(--dm-surface-3));
    border: 2px solid var(--dm-border-strong);
}

body.dark-mode .scale-labels span {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    font-weight: 600;
    border: 1px solid var(--dm-border);
}

body.dark-mode .scale-labels span:nth-child(1) {
    background: linear-gradient(135deg, #991b1b, #b91c1c);
    color: #fecaca;
}

body.dark-mode .scale-labels span:nth-child(2) {
    background: linear-gradient(135deg, #c2410c, #ea580c);
    color: #fed7aa;
}

body.dark-mode .scale-labels span:nth-child(3) {
    background: linear-gradient(135deg, var(--dm-surface-3), var(--dm-surface-4));
    color: #e5e7eb;
}

body.dark-mode .scale-labels span:nth-child(4) {
    background: linear-gradient(135deg, #4d7c0f, #65a30d);
    color: #d9f99d;
}

body.dark-mode .scale-labels span:nth-child(5) {
    background: linear-gradient(135deg, #15803d, #16a34a);
    color: var(--dm-success);
}

body.dark-mode .selected-position {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
    border: 3px solid var(--dm-success);
    box-shadow: 0 0 20px rgba(134, 239, 172, 0.3);
}

body.dark-mode .position-marker {
    background: var(--dm-text-primary);
    border: 4px solid var(--dm-blue);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
}

/* Content Displays */
body.dark-mode .name-display,
body.dark-mode .riddle-display,
body.dark-mode .starter-prompt,
body.dark-mode .picture-container {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border);
}

body.dark-mode .riddle-text {
    color: var(--dm-text-primary);
    font-weight: 500;
}

body.dark-mode #riddleQuestion {
    color: var(--dm-text-primary) !important;
    font-weight: 600;
}

body.dark-mode .riddle-answer {
    background: var(--dm-surface-3);
    color: var(--dm-success);
    border: 2px solid var(--dm-success);
}

body.dark-mode .picture-display p {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
    border-color: var(--dm-copper);
}

/* body.dark-mode .picture-counter - REMOVED: No longer needed */

/* Word of the Day */
body.dark-mode .word-title {
    color: var(--dm-text-primary);
}

body.dark-mode .word-syllables {
    color: var(--dm-text-muted);
}

body.dark-mode .word-phonetic {
    color: var(--dm-text-muted);
}

body.dark-mode .word-definition {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border-left-color: var(--dm-blue);
}

body.dark-mode .word-display {
    background: var(--dm-surface-2);
    color: var(--dm-text-secondary);
}

body.dark-mode .word-section {
    background: var(--dm-surface-3);
    border: 2px solid var(--dm-border);
}

body.dark-mode .word-section h4 {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-blue);
}

body.dark-mode .word-examples li {
    background: var(--dm-surface-2);
    color: var(--dm-text-secondary);
    border-left-color: var(--dm-copper);
}

body.dark-mode .word-etymology {
    color: var(--dm-text-secondary);
}

body.dark-mode .word-activity {
    background: var(--dm-surface-3);
    border-color: var(--dm-copper);
}

body.dark-mode .activity-instruction {
    color: var(--dm-text-primary);
}

body.dark-mode .activity-option {
    background: var(--dm-surface-3);
    border: 2px solid var(--dm-border);
}

body.dark-mode .option-text {
    color: var(--dm-text-secondary);
}

/* Writing Starter & Daily Mechanics */
body.dark-mode .writing-mode-selector,
body.dark-mode .mechanics-type-selector {
    background: var(--dm-surface-3);
}

body.dark-mode .mechanics-display {
    background: var(--dm-surface-2);
}

body.dark-mode .mechanics-sentence {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border-color: var(--dm-blue);
}

body.dark-mode .wyr-question {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border-color: var(--dm-blue);
}

body.dark-mode .breathing-text {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border-color: var(--dm-blue);
}

body.dark-mode .breathing-counter {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-blue) !important;
}

body.dark-mode .breathing-side-panel {
    background: linear-gradient(135deg, rgba(109, 129, 150, 0.05) 0%, rgba(198, 131, 70, 0.05) 100%),
                var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .side-panel-title {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .breathing-setting-group {
    background: rgba(109, 129, 150, 0.05);
    border-color: rgba(109, 129, 150, 0.15);
}

body.dark-mode .breathing-setting-group:hover {
    background: rgba(109, 129, 150, 0.08);
    border-color: rgba(109, 129, 150, 0.25);
}

body.dark-mode .breathing-setting-group > label {
    color: var(--dm-blue) !important;
}

body.dark-mode .yoga-pose,
body.dark-mode .yoga-instructions,
body.dark-mode .yoga-timer,
body.dark-mode .yoga-countdown {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border-color: var(--dm-blue);
}

body.dark-mode .break-activity h3 {
    color: var(--dm-text-primary);
}

body.dark-mode .breathing-subtitle,
body.dark-mode .eye-rest-instructions {
    color: var(--dm-text-secondary);
}

body.dark-mode #eyeRestCanvas {
    background: var(--dm-surface-3);
    border-color: var(--dm-blue);
}

body.dark-mode .mechanics-answer {
    background: linear-gradient(135deg, rgba(134, 239, 172, 0.08) 0%, rgba(134, 239, 172, 0.12) 100%);
    border-color: var(--dm-success);
    box-shadow: 0 4px 16px rgba(134, 239, 172, 0.15);
}

body.dark-mode .mechanics-answer-header {
    color: var(--dm-success);
    border-bottom-color: rgba(134, 239, 172, 0.3);
}

body.dark-mode .mechanics-highlighted-sentence {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
}

body.dark-mode .mechanics-answer-list {
    background: var(--dm-surface-2);
    color: var(--dm-text-secondary);
    border-left-color: var(--dm-success);
}

body.dark-mode .mechanics-explanation {
    background: var(--dm-surface-2);
    color: var(--dm-text-secondary);
    border-left-color: var(--dm-copper);
}

body.dark-mode .writing-mode-btn,
body.dark-mode .mechanics-btn {
    background: var(--dm-surface-2);
    color: var(--dm-text-secondary);
    border: 2px solid var(--dm-border);
}

body.dark-mode .writing-mode-btn:hover,
body.dark-mode .mechanics-btn:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-blue);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}

body.dark-mode .writing-mode-btn.active,
body.dark-mode .mechanics-btn.active {
    background: linear-gradient(135deg, var(--dm-blue), var(--dm-blue-hover));
    color: var(--dm-text-primary);
    border-color: var(--dm-blue-hover);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

/* Fullscreen Mode */
body.dark-mode .fullscreen-container {
    background: var(--dm-surface-1);
}

body.dark-mode .fullscreen-container .discussion-display {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
}

body.dark-mode .fullscreen-container #discussionStatement {
    color: var(--dm-text-primary) !important;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .fullscreen-container .word-title {
    color: var(--dm-text-primary);
}

body.dark-mode .fullscreen-container .word-syllables {
    color: var(--dm-text-muted);
}

body.dark-mode .fullscreen-container .word-phonetic {
    color: var(--dm-text-muted);
}

body.dark-mode .fullscreen-container .word-definition {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border-left-color: var(--dm-blue);
}

body.dark-mode .fullscreen-container .word-section {
    background: var(--dm-surface-3);
    border: 2px solid var(--dm-border);
}

body.dark-mode .fullscreen-container .word-section h4 {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-blue);
}

body.dark-mode .fullscreen-container .word-examples li {
    background: var(--dm-surface-2);
    color: var(--dm-text-secondary);
    border-left-color: var(--dm-copper);
}

body.dark-mode .fullscreen-container .word-etymology {
    color: var(--dm-text-secondary);
}

body.dark-mode .fullscreen-container .word-activity {
    background: var(--dm-surface-3);
    border-color: var(--dm-copper);
}

body.dark-mode .fullscreen-container .activity-instruction {
    color: var(--dm-text-primary);
}

body.dark-mode .fullscreen-container .activity-option {
    background: var(--dm-surface-3);
    border: 2px solid var(--dm-border);
}

body.dark-mode .fullscreen-container .option-text {
    color: var(--dm-text-secondary);
}

/* Word Search */
body.dark-mode .word-search-grid {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border-strong);
}

body.dark-mode .word-search-grid td {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-border);
    font-weight: 600;
}

body.dark-mode .word-search-grid td:hover {
    background: var(--dm-surface-4);
    border-color: var(--dm-blue);
}

body.dark-mode .word-search-words {
    background: linear-gradient(135deg, var(--dm-surface-2), var(--dm-surface-3));
    border: 2px solid var(--dm-border);
}

body.dark-mode .word-search-words h4 {
    color: var(--dm-text-primary);
}

body.dark-mode .word-search-words li {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-border);
}

body.dark-mode .word-search-words li:hover {
    background: var(--dm-surface-4);
    border-color: var(--dm-blue);
}

body.dark-mode .crossword-grid {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border-strong);
}

body.dark-mode .crossword-clues {
    background: linear-gradient(135deg, var(--dm-surface-2), var(--dm-surface-3));
    border: 2px solid var(--dm-border);
    color: var(--dm-text-secondary);
}

body.dark-mode .crossword-clues h4 {
    color: var(--dm-text-primary);
}

body.dark-mode .word-list {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border);
}

/* Timer & Controls */
body.dark-mode .timer-display {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border-strong);
    font-weight: 700;
}

body.dark-mode .controls {
    background: transparent;
}

/* External Links */
body.dark-mode .external-links-grid {
    background: var(--dm-surface-1);
}

body.dark-mode .external-link-card {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border);
}

body.dark-mode .external-link-card:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-blue);
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2);
    transform: translateY(-8px);
}

/* StorySpark & SenseScape Containers */
body.dark-mode .storyspark-container,
body.dark-mode .sensescape-container {
    background: var(--dm-surface-1);
    border: 2px solid var(--dm-border);
}

body.dark-mode .story-controls,
body.dark-mode .sense-controls {
    background: var(--dm-surface-2);
    border-bottom: 1px solid var(--dm-border);
}

body.dark-mode .story-idea-display {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border-strong);
}

body.dark-mode .story-idea-display h3 {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .story-idea-display p {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .generated-summary {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border-strong);
}

body.dark-mode .final-prose {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border);
}

body.dark-mode .final-prose:focus {
    border-color: var(--dm-blue);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-mode .sense-textarea {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border);
}

body.dark-mode .sense-textarea:focus {
    border-color: var(--dm-blue);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* Interactive Elements */
body.dark-mode .vocab-die {
    background: linear-gradient(135deg, var(--dm-blue), var(--dm-blue-hover));
    color: var(--dm-text-primary);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

body.dark-mode .sentence-starter-card {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border);
}

/* Canvas & Name Cards */
body.dark-mode .aussie-canvas {
    background: linear-gradient(135deg, var(--dm-surface-1) 0%, var(--dm-surface-2) 50%, var(--dm-surface-1) 100%);
}

body.dark-mode .name-card {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
    border: 3px solid var(--dm-success);
    box-shadow: 0 4px 16px rgba(134, 239, 172, 0.2);
    font-weight: 600;
}

body.dark-mode .book-spine {
    background: linear-gradient(135deg, #991b1b, #b91c1c);
    color: var(--dm-text-primary);
}

body.dark-mode .sidebar-toggle {
    background: linear-gradient(135deg, var(--dm-blue), var(--dm-blue-hover));
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-blue-hover);
}

/* Whiteboard Mode Dark Support */
body.dark-mode .whiteboard-mode {
    background: var(--dm-surface-1) !important;
}

body.dark-mode .whiteboard-display {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-strong) !important;
}

body.dark-mode .whiteboard-exit-btn {
    background: linear-gradient(135deg, var(--dm-blue), var(--dm-blue-hover)) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.5) !important;
}

body.dark-mode .result-display {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-strong) !important;
    box-shadow:
        0 0 40px rgba(109, 129, 150, 0.3),
        0 0 80px rgba(109, 129, 150, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .name-display-panel {
    background: #1e293b;
}

body.dark-mode .name-picker-layout {
    background: transparent;
}

body.dark-mode #random-name {
    background: #1e293b !important;
}

body.dark-mode .whiteboard-exit-btn:hover {
    box-shadow: 0 6px 16px rgba(71, 85, 105, 0.6) !important;
}

body.dark-mode .whiteboard-exit-btn:active {
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.5) !important;
}

/* Whiteboard Mode Specific Overrides */
body.dark-mode .whiteboard-mode .sense-textarea,
body.dark-mode .whiteboard-mode .final-prose {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .whiteboard-mode .vocab-suggestions,
body.dark-mode .whiteboard-mode .sentence-starter {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .whiteboard-mode .generated-summary {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-strong) !important;
}

body.dark-mode .whiteboard-mode .story-idea-display {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-copper) !important;
}

body.dark-mode .whiteboard-mode .story-idea-display h3,
body.dark-mode .whiteboard-mode .story-idea-display p {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .whiteboard-mode .scene-display {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .whiteboard-mode .writing-scaffold {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border-strong) !important;
}

/* Spinner Cards */
body.dark-mode .spinner-card {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border);
}

body.dark-mode .spinner-card h4 {
    color: var(--dm-text-primary);
}

body.dark-mode .spinner-value {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border-strong);
    font-weight: 700;
}

/* Sense Cards */
body.dark-mode .sense-card {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border);
}

body.dark-mode .sense-card h4 {
    color: var(--dm-text-primary);
}

/* Help Sections */
body.dark-mode .vocab-suggestions,
body.dark-mode .sentence-starters {
    background: var(--dm-surface-3);
    color: var(--dm-text-secondary);
    border: 1px solid var(--dm-border);
}

/* Word Counter */
body.dark-mode .word-count {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border);
    font-weight: 700;
}

/* Scaffold Sections */
body.dark-mode .scaffold-section {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border);
}

body.dark-mode .scaffold-section h4 {
    color: var(--dm-text-primary);
}

body.dark-mode .scaffold-textarea {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border);
}

/* Sidebar Sections */
body.dark-mode .sidebar-section {
    background: var(--dm-surface-2);
    border: 1px solid var(--dm-border);
}

body.dark-mode .sidebar-section h4 {
    color: var(--dm-text-primary);
    border-bottom-color: var(--dm-border);
}

/* Challenge Displays */
body.dark-mode .challenge-display {
    background: linear-gradient(135deg, #c2410c, #ea580c);
    color: #fff7ed;
    border: 2px solid #ea580c;
}

body.dark-mode #challengeText {
    color: #fff7ed;
    font-weight: 600;
}

/* Story Categories */
body.dark-mode .story-category {
    background: var(--dm-surface-3);
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-border);
}

/* Additional Tool-Specific Elements */
body.dark-mode .poll-option {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
    border: 2px solid var(--dm-border);
}

body.dark-mode .poll-option:hover {
    background: var(--dm-surface-3);
    border-color: var(--dm-blue);
}

body.dark-mode .memory-card {
    background: var(--dm-surface-2);
    border: 2px solid var(--dm-border);
}

body.dark-mode .memory-card.flipped {
    background: var(--dm-surface-3);
}

/* Scrollbars for Dark Mode */
body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-surface-2);
    border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-surface-4);
    border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-muted);
}

/* ========================================
   STORYSPARK TOGGLE SETTINGS
   ======================================== */
.toggle-settings{margin-top:12px;padding:12px;background:rgba(109,129,150,0.08);border-radius:12px;border:1px solid rgba(109,129,150,0.2)}
.toggle-option{display:flex;align-items:center;gap:10px;padding:8px 4px;cursor:pointer;transition:all 0.2s;border-radius:6px;margin-bottom:6px}
.toggle-option:hover{background:rgba(109,129,150,0.1)}
.toggle-option input[type="checkbox"]{width:20px;height:20px;cursor:pointer;accent-color:#6D8196}
.toggle-option span{font-size:0.9rem;color:#2d3748;font-weight:500;user-select:none}
body.dark-mode .toggle-settings{background:rgba(45,55,72,0.6);border-color:rgba(255,255,255,0.2)}
body.dark-mode .toggle-option:hover{background:rgba(255,255,255,0.1)}
body.dark-mode .toggle-option span{color:#e2e8f0}
body.dark-mode .toggle-option input[type="checkbox"]{accent-color:#4299e1}

/* Smooth collapsible transition for options panel */
.toggle-settings{transition:all 0.3s ease;max-height:2000px;overflow:hidden;display:block !important}
.toggle-settings.hidden{max-height:0 !important;padding:0 !important;margin:0 !important;border:none !important;opacity:0 !important}

/* ========================================
   PROFESSIONAL OPTIONS MODAL
   ======================================== */
.options-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease}
.options-modal.hidden{opacity:0;pointer-events:none}
.options-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}
.options-modal-content{position:relative;background:white;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:600px;width:90%;max-height:85vh;display:flex;flex-direction:column;animation:modalSlideIn .3s ease;z-index:10001}
@keyframes modalSlideIn{from{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}
.options-modal-header{padding:24px 28px;border-bottom:2px solid rgba(109,129,150,0.15);display:flex;justify-content:space-between;align-items:center}
.options-modal-header h3{margin:0;font-size:1.5rem;color:#2d3748;font-weight:700}
.modal-close-btn{background:transparent;border:none;font-size:1.8rem;color:#6D8196;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}
.modal-close-btn:hover{background:rgba(109,129,150,0.1);color:#485566;transform:rotate(90deg)}
.options-modal-body{padding:24px 28px;overflow-y:auto;flex:1}
.options-modal-body .toggle-settings{background:transparent;padding:0;border:none;margin:0;max-height:none}
.options-modal-footer{padding:20px 28px;border-top:2px solid rgba(109,129,150,0.15);display:flex;justify-content:flex-end;gap:12px}
.options-modal-footer .btn-primary{min-width:120px}
body.dark-mode .options-modal-content {
    background: var(--dm-surface-2);
    color: var(--dm-text-primary);
}

body.dark-mode .options-modal-header {
    border-bottom-color: var(--dm-border);
}

body.dark-mode .options-modal-header h3 {
    color: var(--dm-text-primary);
}

body.dark-mode .modal-close-btn {
    color: var(--dm-text-primary);
}

body.dark-mode .modal-close-btn:hover {
    background: var(--dm-surface-3);
}

body.dark-mode .options-modal-footer {
    border-top-color: var(--dm-border);
}

/* ========================================
   DARK MODE DOG TOGGLE - CREATIVE MASCOT
   ======================================== */
.dark-mode-dog-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 120px;
    height: 140px;
    cursor: pointer;
    z-index: 9998;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: dogBounceIn 0.8s ease 0.5s both;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.dark-mode-dog-toggle:hover {
    transform: scale(1.1);
}

.dark-mode-dog-toggle:active {
    transform: scale(0.95);
}

/* Mode Status Text */
.mode-status-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6D8196, #8899aa);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    white-space: nowrap;
}

body.dark-mode .mode-status-text {
    background: linear-gradient(135deg, #2d3748, #1a202c);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dark-mode-dog-toggle .dog-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    transition: opacity 0.15s ease, filter 0.3s ease;
    position: absolute;
    top: 32px;
    left: 10px;
    filter: drop-shadow(0 0 20px rgba(109, 129, 150, 0.6));
}

.dark-mode-dog-toggle:hover .dog-img {
    filter: drop-shadow(0 0 30px rgba(109, 129, 150, 0.8));
}

.dark-mode-dog-toggle .dog-light {
    opacity: 1;
    pointer-events: auto;
}

.dark-mode-dog-toggle .dog-dark {
    opacity: 0;
    pointer-events: none;
}

/* When dark mode is active */
body.dark-mode .dark-mode-dog-toggle .dog-img {
    filter: drop-shadow(0 0 25px rgba(198, 131, 70, 0.7));
}

body.dark-mode .dark-mode-dog-toggle:hover .dog-img {
    filter: drop-shadow(0 0 35px rgba(198, 131, 70, 0.9));
}

body.dark-mode .dark-mode-dog-toggle .dog-light {
    opacity: 0;
    pointer-events: none;
}

body.dark-mode .dark-mode-dog-toggle .dog-dark {
    opacity: 1;
    pointer-events: auto;
}

/* Entrance animation */
@keyframes dogBounceIn {
    0% {
        opacity: 0;
        transform: scale(0) translateY(100px);
    }
    50% {
        transform: scale(1.1) translateY(-10px);
    }
    70% {
        transform: scale(0.9) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive - smaller on mobile */
@media (max-width: 768px) {
    .dark-mode-dog-toggle {
        width: 100px;
        height: 120px;
        bottom: 20px;
        right: 20px;
    }

    .dark-mode-dog-toggle .dog-img {
        width: 80px;
        height: 80px;
        top: 28px;
        left: 10px;
    }

    .mode-status-text {
        font-size: 0.65rem;
        padding: 3px 10px;
    }
}

/* Responsive crossword */
@media (max-width: 768px) {
    .crossword-display {
        grid-template-columns: 1fr !important;
    }

    .crossword-grid {
        padding: 12px;
    }

    .crossword-grid td {
        width: 28px;
        height: 28px;
    }

    .crossword-grid td input {
        font-size: 0.9rem;
    }

    .crossword-clues {
        max-height: 400px;
    }
}

/* ========================================
   DYNAMIC PREMIUM BUTTON STATES
   ======================================== */

/* Premium button - Active state (for premium users) */
.btn-premium-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 0 0 rgba(5, 150, 105, 0.8), 0 6px 16px rgba(16, 185, 129, 0.4) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-premium-active:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 0 0 rgba(5, 150, 105, 0.8), 0 8px 24px rgba(16, 185, 129, 0.5) !important;
}

.btn-premium-active:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 0 rgba(5, 150, 105, 0.8), 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

/* Premium button - Locked state (for free users) */
.btn-premium-locked {
    background: linear-gradient(135deg, #C68346 0%, #B8713D 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    box-shadow: 0 3px 0 0 rgba(198, 131, 70, 0.6), 0 5px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-premium-locked:hover {
    background: linear-gradient(135deg, #C68346 0%, #B8713D 100%) !important;
    transform: none !important;
    box-shadow: 0 3px 0 0 rgba(198, 131, 70, 0.6), 0 5px 12px rgba(0, 0, 0, 0.15) !important;
}

.btn-premium-locked:disabled {
    pointer-events: none;
}

/* ========================================
   LUCIDE ICONS STYLING
   ======================================== */

/* Hide uninitialized Lucide icons to prevent FOUC */
i[data-lucide]:not([data-lucide-rendered]) {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* Icon styles for navigation buttons and category labels */
.nav-btn i[data-lucide],
.category-label i[data-lucide] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    display: inline-block;
    stroke-width: 2;
    transition: opacity 0.2s ease;
}

/* Icon styles for section headings (h2 tags) */
h2 i[data-lucide] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    vertical-align: middle;
    display: inline-block;
    stroke-width: 2;
    transition: opacity 0.2s ease;
}

/* Ensure icons don't affect button layout */
.nav-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.category-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Dark mode icon color inheritance */
body.dark-mode .nav-btn i[data-lucide],
body.dark-mode .category-label i[data-lucide],
body.dark-mode h2 i[data-lucide] {
    color: inherit;
    stroke: currentColor;
}