/* --- Google Font & Global Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');
:root {
    --font-family: 'Nunito', sans-serif;
    /* Default Theme (Blue) */
    --primary-color: #3a86ff; --primary-light: #a8d0ff; --secondary-color: #ffbe0b; --secondary-light: #ffd670; --tertiary-color: #06d6a0; --danger-color: #ef476f; --success-color: #8ac926;
    --background-color: #f4f5f7; --panel-bg: #ffffff; --card-background: #ffffff; --text-color: #1c2b36; --text-light: #607d8b; --border-color: #d8e2e7;
    --shadow-light: rgba(0, 0, 0, 0.05); --shadow-medium: rgba(0, 0, 0, 0.08);
    --border-radius: 8px; --border-radius-small: 5px;
    --left-panel-width: 380px; --left-panel-collapsed-width: 0px; /* Width when collapsed */
    --base-font-size: 1.2rem;
    --toast-success-bg: #d1e7dd; --toast-success-text: #0f5132; --toast-error-bg: #f8d7da; --toast-error-text: #842029; --toast-info-bg: #cff4fc; --toast-info-text: #055160;
    --transition-speed: 0.3s; /* Nhanh hơn */
}

/* --- Theme Definitions --- */
body[data-theme="orange"] { --primary-color: #fca311; --primary-light: #ffc971; --secondary-color: #3a86ff; --secondary-light: #a8d0ff; --tertiary-color: #14213d; }
body[data-theme="green"] { --primary-color: #2a9d8f; --primary-light: #83c5be; --secondary-color: #e9c46a; --secondary-light: #f4e2a6; --tertiary-color: #e76f51; }
body[data-theme="purple"] { --primary-color: #6a4c93; --primary-light: #b5a6c9; --secondary-color: #ffca3a; --secondary-light: #ffe17a; --tertiary-color: #8ac926; }

/* --- Base Styles --- */
html { font-size: 100%; scroll-behavior: smooth;}
body { font-family: var(--font-family); line-height: 1.7; margin: 0; padding: 0; background-color: var(--background-color); color: var(--text-color); overflow-x: hidden; font-size: var(--base-font-size); transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; }
h1, h2, h3, h4, legend { font-weight: 800; transition: color var(--transition-speed) ease; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.6rem; display: flex; align-items: center; gap: 0.7rem; border-bottom: 2px solid var(--primary-light); padding-bottom: 0.6rem; margin-top: 0; margin-bottom: 1.5rem; color: var(--primary-color); transition: border-color var(--transition-speed) ease, color var(--transition-speed) ease; }
h3 { font-size: 1.4rem; font-weight: 700; color: var(--text-color); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;}
h4 { font-size: 1.2rem; color: var(--tertiary-color); margin-top: 1.5rem; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; transition: color var(--transition-speed) ease; }
legend { font-size: 1.1rem; color: var(--text-color); margin-bottom: 0.8rem; transition: color var(--transition-speed) ease; }

/* --- Layout Container --- */
.layout-container { display: flex; min-height: 100vh; }

/* --- Left Panel (Collapsible) --- */
.left-panel {
    width: var(--left-panel-width); flex-shrink: 0; background-color: var(--panel-bg);
    border-right: 1px solid var(--border-color); padding: 1.5rem; box-sizing: border-box;
    height: 100vh; overflow-y: auto; position: sticky; top: 0; display: flex; flex-direction: column;
    transition: width var(--transition-speed) ease, padding var(--transition-speed) ease, opacity calc(var(--transition-speed) / 2) ease var(--transition-speed), border-color var(--transition-speed) ease, background-color var(--transition-speed) ease; /* Delay opacity */
    opacity: 1;
}
body.left-panel-collapsed .left-panel {
    width: var(--left-panel-collapsed-width);
    padding-left: 0; padding-right: 0;
    opacity: 0;
    border-right: none;
    overflow: hidden;
    pointer-events: none; /* Important: Prevent interaction when hidden */
}

.panel-section { margin-bottom: 1.5rem; transition: opacity calc(var(--transition-speed) / 1.5) ease; }
.panel-section:last-child { margin-bottom: 0; }
body.left-panel-collapsed .panel-section { opacity: 0; } /* Hide content immediately */

/* ... (rest of left panel styles: textarea, input-actions, theme selector) ... */
.panel-section h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.panel-section textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-small); box-sizing: border-box; font-size: 1rem; font-family: var(--font-family); box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); transition: border-color var(--transition-speed) ease, box-shadow 0.3s; min-height: 200px; resize: vertical; margin-bottom: 1rem; flex-grow: 1; }
.panel-section textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.panel-section .input-actions { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; transition: border-color var(--transition-speed) ease;}
.status-message { margin-top: 0.5rem; padding: 0.6rem 1rem; border-radius: var(--border-radius-small); font-style: normal; font-weight: bold; min-height: 1.3em; text-align: center; opacity: 0; transition: opacity 0.5s ease-in-out; font-size: 0.9rem; }
.status-message:not(:empty) { opacity: 1; } .status-message:empty { padding: 0; min-height: 0;}
.theme-selector { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); transition: border-color var(--transition-speed) ease;}
.theme-selector h4 { margin-top: 0; font-size: 1.1rem; color: var(--text-light); margin-bottom: 0.8rem; }
.theme-buttons { display: flex; gap: 0.8rem; justify-content: center; }
.theme-button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-color); cursor: pointer; padding: 0; background-clip: content-box; transition: border-color 0.2s, transform 0.2s; }
.theme-button:hover { transform: scale(1.1); }
.theme-button.active { border-color: var(--text-color); border-width: 3px;}
.theme-button.theme-blue { background-color: #3a86ff; } .theme-button.theme-orange { background-color: #fca311; } .theme-button.theme-green { background-color: #2a9d8f; } .theme-button.theme-purple { background-color: #6a4c93; }

/* --- Main Panel --- */
.main-panel { flex-grow: 1; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; /* margin-left removed, handled by container */ transition: margin-left var(--transition-speed) ease; }
/* body.left-panel-visible .main-panel { margin-left: var(--left-panel-width); } */
/* No need for margin, flexbox handles it */

/* --- Header (trong Main Panel) --- */
.main-header { background: var(--card-background); color: var(--text-color); padding: 0.8rem 1.5rem; /* Reduce padding slightly */ text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); display: flex; align-items: center; position: sticky; top: 0; z-index: 900; transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; }
.toggle-panel-btn.main-header-btn { /* Style for the toggle button in header */
    background: none; border: 1px solid var(--border-color); border-radius: var(--border-radius-small);
    color: var(--text-light); font-size: 1.2rem; cursor: pointer;
    padding: 0.4rem 0.6rem; margin-right: 1rem; line-height: 1;
    transition: color var(--transition-speed) ease, border-color var(--transition-speed) ease, background-color 0.2s;
}
.toggle-panel-btn.main-header-btn:hover { background-color: #f0f0f0; color: var(--primary-color); border-color: var(--primary-light); }
.header-title { flex-grow: 1; text-align: left; }
.main-header h1 { margin: 0; font-size: 1.6rem; color: var(--primary-color); display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 800;}
.header-menu { display: flex; align-items: center; gap: 1rem; color: var(--text-light); font-size: 1rem; font-weight: 700; transition: color var(--transition-speed) ease; }
.header-menu span { cursor: default; }
.header-menu span:nth-child(2) { color: var(--border-color); transition: color var(--transition-speed) ease; }
#fullscreenBtn.main-header-btn { margin-left: 1rem; padding: 0.4rem 0.6rem; font-size: 1.2rem; width: auto; height: auto; line-height: 1;}

/* --- Main Tabs --- */
.main-tabs { background-color: color-mix(in srgb, var(--panel-bg) 90%, #e9ecef); padding: 0.5rem 2rem 0 2rem; display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border-color); transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; }
.main-tab-btn { padding: 0.8rem 1.5rem; /* Slightly less padding */ font-size: 1.15rem; font-weight: 700; color: var(--text-light); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: color var(--transition-speed) ease, border-color var(--transition-speed) ease, background-color var(--transition-speed) ease; margin-bottom: -1px; border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; }
.main-tab-btn i { margin-right: 0.6rem; }
.main-tab-btn:hover { color: var(--primary-color); background-color: color-mix(in srgb, var(--background-color) 50%, transparent); }
.main-tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background-color: var(--background-color); }

/* --- Main Content Area --- */
.main-content-area { max-width: 1200px; width: 100%; margin: 2rem auto; padding: 0 2rem; flex-grow: 1; box-sizing: border-box; }
.card { background-color: var(--card-background); border-radius: var(--border-radius); padding: 2rem 2.5rem; margin-bottom: 2.5rem; box-shadow: 0 4px 15px var(--shadow-light); border: 1px solid var(--border-color); display: none; transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; }
.card.active-section { display: block; animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- Buttons --- */
.icon-button { padding: 0.6rem; font-size: 1rem; background-color: var(--primary-color); color: white; border: none; border-radius: var(--border-radius-small); cursor: pointer; transition: all 0.2s ease-in-out; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px var(--shadow-light); }
.icon-button i { font-size: 1.2em; width: 1.2em; text-align: center; }
.icon-button .btn-text { display: none; }
.icon-button.secondary { background-color: var(--text-light); }
.icon-button.danger { background-color: var(--danger-color); }
.icon-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 8px var(--shadow-medium); }
.icon-button.secondary:hover:not(:disabled) { background-color: color-mix(in srgb, var(--text-light) 85%, black); }
.icon-button.danger:hover:not(:disabled) { background-color: color-mix(in srgb, var(--danger-color) 85%, black); }
.icon-button:active:not(:disabled) { transform: translateY(0px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.playful-button { padding: 12px 30px; font-size: 1.2rem; gap: 10px; border: none; border-radius: 50px; color: white; font-weight: 700; cursor: pointer; box-shadow: 3px 3px 10px var(--shadow-light), -2px -2px 5px rgba(255, 255, 255, 0.6); transition: all 0.2s ease-in-out; display: inline-flex; align-items: center; }
.playful-button.primary { background: linear-gradient(145deg, var(--secondary-light), var(--secondary-color)); color: color-mix(in srgb, var(--secondary-color) 70%, black); }
.playful-button.secondary { background: linear-gradient(145deg, var(--primary-light), var(--primary-color)); }
.playful-button.tertiary { background: linear-gradient(145deg, color-mix(in srgb, var(--tertiary-color) 80%, white), var(--tertiary-color)); }
.playful-button.success { background: linear-gradient(145deg, color-mix(in srgb, var(--success-color) 80%, white), var(--success-color)); }
.playful-button.danger { background: linear-gradient(145deg, color-mix(in srgb, var(--danger-color) 80%, white), var(--danger-color)); }
.playful-button.large-button { padding: 15px 40px; font-size: 1.6rem; }
.playful-button i { font-size: 1.3em; }
.playful-button:hover:not(:disabled) { box-shadow: 5px 5px 15px var(--shadow-medium), -3px -3px 8px rgba(255, 255, 255, 0.8); transform: translateY(-2px) scale(1.02); }
.playful-button:active:not(:disabled) { box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.5); transform: translateY(0px) scale(0.98); }
.playful-button:disabled, .icon-button:disabled { cursor: not-allowed; opacity: 0.6; box-shadow: none; transform: none; background: #ccc; }
.file-upload-label { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem; }

/* --- Tooltip --- */
.tooltip { position: relative; }
.tooltip:before { content: attr(data-tooltip); position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.85); color: white; padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s; z-index: 10; }
.tooltip:hover:before { opacity: 1; visibility: visible; }
.toggle-panel-btn.tooltip:before { left: 105%; bottom: auto; top: 50%; transform: translateY(-50%); }

/* --- Name Picker --- */
.picker-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; margin-bottom: 2.5rem; }
.control-group { display: flex; align-items: center; gap: 1rem; }
.toggle-label { font-weight: 700; color: var(--text-color); font-size: 1.2rem; transition: color var(--transition-speed) ease; }
.switch.large-switch { width: 74px; height: 38px; }
.switch.large-switch .slider:before { height: 30px; width: 30px; left: 4px; bottom: 4px; }
.switch.large-switch input:checked + .slider:before { transform: translateX(36px); }
.switch { position: relative; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--success-color); transition: background-color var(--transition-speed) ease;}
input:focus + .slider { box-shadow: 0 0 1px var(--success-color); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
#pickerModeText { font-style: normal; font-weight: 700; color: var(--text-light); min-width: 140px; font-size: 1.2rem; transition: color var(--transition-speed) ease; }

/* Vertical Slot Display */
.vertical-display.large-slots { min-height: 200px; padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 95%, white), var(--panel-bg)); border: 3px solid var(--primary-light); border-radius: var(--border-radius); text-align: center; box-shadow: inset 0 0 15px rgba(0,0,0,0.08); position: relative; overflow: hidden; transition: border-color var(--transition-speed) ease, background var(--transition-speed) ease; }
.v-slot { display: block; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease-out, color var(--transition-speed) ease; will-change: transform, opacity; padding: 0.3rem 0.5rem; }
.v-slot-main { font-size: 4.5rem; font-weight: 800; color: var(--primary-color); z-index: 2; position: relative; line-height: 1.2; }
.v-slot-prev, .v-slot-next { font-size: 1.8rem; color: var(--text-light); opacity: 0.5; line-height: 1.3; }
.v-slot-prev { margin-bottom: 0.5rem; }
.v-slot-next { margin-top: 0.5rem; }
.vertical-display.spinning .v-slot { /* Applied by JS */ }
.vertical-display.result .v-slot-main { animation: popResult 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
@keyframes popResult { 0% { transform: scale(0.7); opacity: 0.5; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.v-slot.flip { animation: flipDown 0.15s ease-out forwards; } /* Keep flip animation */
@keyframes flipDown { from { transform: translateY(-10px) scaleY(0.8); opacity: 0.3; } to { transform: translateY(0) scaleY(1); opacity: 1; } }

/* Picker Info Lists (Moved back to main panel) */
.picker-info-lists { margin-top: 2.5rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; transition: border-color var(--transition-speed) ease; }
.info-list-section h4 { margin-top: 0; font-size: 1.4rem; font-weight: 700; color: var(--text-color); transition: color var(--transition-speed) ease; display: flex; align-items: center; gap: 0.5rem;}
.info-list-section h4 strong { color: var(--primary-color); transition: color var(--transition-speed) ease; }
.info-list { list-style-type: none; padding: 0; margin: 0; max-height: 40vh; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 0.8rem 1rem; background-color: color-mix(in srgb, var(--background-color) 50%, white) ; font-size: 1.2rem; transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease; }
.info-list li { padding: 0.6rem 0.2rem; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.2s, color var(--transition-speed) ease; }
.info-list li:last-child { border-bottom: none; }
.info-list li:hover { background-color: color-mix(in srgb, var(--border-color) 20%, transparent); }
#remainingNamesList li { color: var(--text-color); font-weight: 700; }
#pickerHistory li { color: var(--text-light); font-style: italic; }

/* --- Group Splitter --- */
.splitter-controls legend { font-size: 1.3rem; }
.horizontal-fieldset { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); transition: border-color var(--transition-speed) ease; }
.horizontal-radio-group { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.radio-label.large-radio-label { padding: 0.8rem 1rem; font-size: 1.2rem; gap: 0.8rem; border-radius: 30px; display: flex; align-items: center; background-color: #f8f9fa; border: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.3s, border-color 0.3s, color var(--transition-speed) ease; }
.radio-label i { font-size: 1.2em; margin-right: 0.4rem; }
.radio-label:has(input:checked) { background-color: color-mix(in srgb, var(--primary-color) 10%, white); border-color: var(--primary-light); box-shadow: 0 0 5px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.radio-label input[type="radio"] { margin-right: 0.5rem; transform: scale(1.3); accent-color: var(--primary-color); transition: accent-color var(--transition-speed) ease; }
.number-input.large-number-input { padding: 0.7rem 0.9rem; font-size: 1.2rem; width: 90px; border: 1px solid var(--border-color); border-radius: var(--border-radius-small); text-align: center; transition: border-color var(--transition-speed) ease; }
.number-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.button-group { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 1rem; }
.groups-display.large-groups-display { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; padding: 0; background-color: transparent; border: none; text-align: left; display: grid; }
.group-card { padding: 1.2rem 1.5rem; border-radius: var(--border-radius); background-color: var(--card-background); box-shadow: 0 3px 8px var(--shadow-light); border: 2px solid; border-color: var(--border-color); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color var(--transition-speed) ease, background-color var(--transition-speed) ease; }
.group-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px var(--shadow-medium); }
.group-card:nth-child(4n+1) { border-color: var(--primary-color); background-color: color-mix(in srgb, var(--primary-color) 8%, white); }
.group-card:nth-child(4n+2) { border-color: var(--secondary-color); background-color: color-mix(in srgb, var(--secondary-color) 10%, white); }
.group-card:nth-child(4n+3) { border-color: var(--tertiary-color); background-color: color-mix(in srgb, var(--tertiary-color) 8%, white); }
.group-card:nth-child(4n+4) { border-color: var(--danger-color); background-color: color-mix(in srgb, var(--danger-color) 8%, white); }
.group-card h4 { font-size: 1.4rem; margin: 0 0 1rem 0; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(0,0,0,0.1); color: var(--text-color); transition: color var(--transition-speed) ease; cursor: pointer; outline: none; }
.group-card h4:focus { background-color: color-mix(in srgb, var(--secondary-color) 15%, white); }
.group-card ul { list-style: none; padding: 0; margin: 0; }
.group-card li { padding: 0.5rem 0; font-size: 1.2rem; display: flex; align-items: center; gap: 0.4rem; justify-content: space-between; border-bottom: 1px dashed #eee; transition: color var(--transition-speed) ease; }
.group-card li:last-child { border-bottom: none; }
.group-card li strong { color: var(--success-color); font-size: 0.9em; transition: color var(--transition-speed) ease; }
.group-card li strong i { font-size: 1.2em; margin-left: 0.3em; }

/* --- Tools Section --- */
.tool-content-wrapper { /* New wrapper for layout within tool tabs */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 2rem;
}
.timer-stopwatch-area { /* Area for timer/stopwatch controls */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center controls */
}
.notes-area-container { /* Area for notes */
    display: flex;
    flex-direction: column;
}

.tool-card { /* Removed - using wrapper now */ }
.tool-card h3 { /* Style applied to wrapper h3 */ }
.timer-display { font-size: 4rem; font-weight: 800; color: var(--primary-color); text-align: center; margin: 1rem 0 1.5rem; font-variant-numeric: tabular-nums; transition: color var(--transition-speed) ease; }
.timer-display.alarm { animation: flashAlarm 1s infinite; }
@keyframes flashAlarm { 0%, 100% { color: var(--danger-color); } 50% { color: var(--text-color); } }
.timer-inputs { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: bold; }
.timer-inputs input[type="number"] { width: 70px; text-align: center; font-size: 1.5rem; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-small); }
.timer-controls, .stopwatch-controls { justify-content: space-around; width: 100%; /* Make button group take full width */ }
/* Quick Notes */
.quick-notes-area { width: 100%; box-sizing: border-box; min-height: 200px; /* Taller notes area */ font-size: 1.1rem; /* Larger notes font */ padding: 0.8rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-small); resize: vertical; transition: border-color var(--transition-speed) ease; }
.quick-notes-area:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.notes-indicator { display: block; text-align: right; font-size: 0.9rem; color: var(--text-light); margin-top: 0.5rem; min-height: 1.2em; opacity: 0; transition: opacity 0.3s ease; }
.notes-indicator.visible { opacity: 1; }

/* --- Footer --- */
.main-footer { text-align: center; margin-top: auto; padding: 2rem; font-size: 1rem; color: var(--text-light); background: var(--panel-bg); border-top: 1px solid var(--border-color); transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, color var(--transition-speed) ease;}

/* --- Coffee Button & Popup --- */
.coffee-button { position: fixed; bottom: 20px; right: 20px; width: 55px; height: 55px; background-color: #6f4e37; color: white; border: none; border-radius: 50%; font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 1000; transition: transform 0.2s ease, background-color 0.2s; }
.coffee-button:hover { transform: scale(1.1); background-color: #8b6b51; }
.popup-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1010; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; }
.popup-modal.active { opacity: 1; pointer-events: auto; }
.popup-content { background-color: white; padding: 2rem 2.5rem; border-radius: var(--border-radius); max-width: 550px; width: 90%; box-shadow: 0 5px 20px rgba(0,0,0,0.2); position: relative; text-align: center; animation: slideInPopup 0.4s ease-out; }
@keyframes slideInPopup { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.popup-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2rem; color: var(--text-light); cursor: pointer; line-height: 1; padding: 0.3rem; }
.popup-close-btn:hover { color: var(--danger-color); }
.popup-content h3 { font-size: 1.6rem; color: var(--primary-color); margin-top: 0; margin-bottom: 1rem; }
.popup-content p { margin-bottom: 1rem; line-height: 1.6; font-size: 1.1rem; }
.account-info { background-color: #f8f9fa; padding: 1rem 1.5rem; border-radius: var(--border-radius-small); border: 1px dashed var(--border-color); margin-top: 1.5rem; }
.account-info p { margin-bottom: 0.5rem; text-align: left; }
.account-info strong { color: var(--text-color); }
#accountNumber { color: var(--primary-color); font-weight: bold; margin-right: 0.5rem; }
.copy-button { background: none; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-light); cursor: pointer; padding: 3px 6px; margin-left: 5px; font-size: 0.9rem; vertical-align: middle;}
.copy-button:hover { background-color: #eee; color: var(--text-color); }
.copy-button i { pointer-events: none; }
.qr-code { max-width: 150px; margin-top: 1rem; border: 1px solid var(--border-color); padding: 5px; background: white; }

/* --- Toast Notification --- */
#toastContainer { position: fixed; bottom: 20px; right: 20px; z-index: 1050; display: flex; flex-direction: column-reverse; gap: 10px; }
.toast { background-color: var(--toast-info-bg); color: var(--toast-info-text); padding: 12px 20px; border-radius: var(--border-radius-small); box-shadow: 0 3px 10px rgba(0,0,0,0.15); font-size: 1rem; font-weight: 700; opacity: 0; transform: translateY(100%); animation: slideInToast 0.4s ease-out forwards; max-width: 350px; display: flex; align-items: center; gap: 10px; transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; }
.toast.toast-success { background-color: var(--toast-success-bg); color: var(--toast-success-text); }
.toast.toast-error { background-color: var(--toast-error-bg); color: var(--toast-error-text); }
.toast i { font-size: 1.2em; }
.toast.exit { animation: slideOutToast 0.4s ease-in forwards; }
@keyframes slideInToast { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideOutToast { from { transform: translateY(0); opacity: 1; } to { transform: translateY(110%); opacity: 0; } }


/* --- Responsive Adjustments --- */
@media (max-width: 1300px) { .groups-display.large-groups-display { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1200px) { :root { --left-panel-width: 320px; } main { padding: 0 1.5rem; } .card { padding: 1.5rem 2rem; } }
@media (max-width: 992px) {
    .layout-container { flex-direction: column; }
    .left-panel { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--border-color); max-height: none; overflow-y: visible; padding-bottom: 1rem; }
    .toggle-panel-btn { display: none; } /* Hide toggle on stack */
    .main-panel { margin-left: 0 !important; }
    header { position: static; }
    .main-tabs { padding-left: 1rem; padding-right: 1rem; }
    main { margin: 1.5rem auto; padding: 0 1rem; max-width: 95%; }
    .card { padding: 1.5rem; }
    h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; }
    .vertical-display.large-slots { font-size: 3.5rem; min-height: 100px; }
    .picker-info-lists { grid-template-columns: 1fr; gap: 1.5rem;}
    .info-list { max-height: 25vh; }
    .groups-display.large-groups-display { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    #fullscreenBtn { display: none; }
    .tool-content-wrapper { grid-template-columns: 1fr; } /* Stack tools */
}
@media (max-width: 768px) {
    :root { --base-font-size: 1.1rem; }
    .main-header { flex-direction: column; padding-bottom: 0.5rem; }
    .header-title { text-align: center; width: 100%; margin-bottom: 0.5rem; }
    .header-menu { display: none; }
    .main-tabs { padding: 0.5rem; flex-wrap: wrap; } /* Allow tabs wrap */
    .main-tab-btn { padding: 0.7rem 0.8rem; font-size: 1rem; flex-grow: 1; text-align: center;}
    main { margin: 1rem auto; }
    .card { padding: 1.2rem; }
    .vertical-display.large-slots { font-size: 3rem; min-height: 90px;}
    .groups-display.large-groups-display { grid-template-columns: 1fr; }
    .horizontal-radio-group { flex-direction: column; align-items: stretch; gap: 1rem;}
    .splitter-controls.large-splitter-controls { gap: 1.5rem; }
    .playful-button.large-button { font-size: 1.4rem; padding: 12px 30px;}
    .coffee-button { width: 50px; height: 50px; font-size: 1.6rem; bottom: 15px; right: 15px;}
    .popup-content { padding: 1.5rem; }
    .picker-info-lists { gap: 1rem; }
    .info-list { font-size: 1.1rem; padding: 0.8rem; max-height: 20vh;}
    .info-list li { padding: 0.4rem 0.1rem; }
    #toastContainer { right: 10px; bottom: 10px; top: auto; width: calc(100% - 20px); max-width: 350px; }
    .timer-display { font-size: 3rem; }
}
@media (max-width: 480px) {
     :root { --base-font-size: 1rem; }
     .left-panel { padding: 1rem; }
     .panel-section .input-actions { flex-direction: row; }
     .panel-section .input-actions .icon-button { flex: 1; justify-content: center; }
     .picker-controls { flex-direction: column; gap: 1rem; }
     .playful-button.large-button { padding: 12px 25px; font-size: 1.3rem; width: 100%; }
     .vertical-display.large-slots { font-size: 2.5rem; min-height: 80px;}
     .radio-label.large-radio-label { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.8rem; }
     .number-input.large-number-input { width: 100%; }
     .button-group { flex-direction: column; align-items: stretch; }
     .info-list { font-size: 1rem; }
     .groups-display.large-groups-display { gap: 1rem;}
     .group-card { padding: 1rem 1.2rem;}
     .popup-content { padding: 1.5rem 1rem; }
     .popup-content h3 { font-size: 1.4rem; }
     .popup-content p { font-size: 1rem; }
     .timer-display { font-size: 2.5rem; }
     .timer-inputs { font-size: 1.2rem; }
     .timer-inputs input { font-size: 1.2rem; width: 60px; }
}