/* ===========================
   Global Styles & Variables
   =========================== */

/* Definition von CSS-Variablen für Farben, Schatten und andere Design-Elemente, die in der gesamten Anwendung verwendet werden.*/
:root {
    --primary-color: #6F766B;
    --primary-dark: #51574F;
    --secondary-color: #5D6B72;
    --accent-color: #A6957C;
    --success-color: #6A7C66;
    --background-light: #EFEAE2;
    --background-paper: #F7F4EE;
    --background-white: #FFFDF9;
    --navbar-bg: rgba(255, 253, 249, 0.94);
    --text-dark: #2C2A27;
    --text-light: #5F5B55;
    --border-color: #DDD6CB;
    --shadow-light: 0 8px 18px rgba(37, 35, 31, 0.08);
    --shadow-medium: 0 14px 26px rgba(37, 35, 31, 0.12);
    --shadow-heavy: 0 22px 40px rgba(37, 35, 31, 0.14);
}

/* Dunkle Farbvariablen, die aktiviert werden, wenn das `data-theme` Attribut auf "dark" gesetzt ist. */
html[data-theme="dark"] {
    --primary-color: #BBAE97;
    --primary-dark: #A08E7A;
    --secondary-color: #7D8C93;
    --accent-color: #C8B79F;
    --success-color: #7A8E78;
    --background-light: #181714;
    --background-paper: #201E1A;
    --background-white: #26231E;
    --navbar-bg: rgba(38, 35, 30, 0.94);
    --text-dark: #F3EFE8;
    --text-light: #B7B0A7;
    --border-color: #3A352E;
    --shadow-light: 0 8px 18px rgba(0, 0, 0, 0.32);
    --shadow-medium: 0 14px 26px rgba(0, 0, 0, 0.38);
    --shadow-heavy: 0 22px 40px rgba(0, 0, 0, 0.42);
}

/* Grundlegender Stil, um ein konsistentes Erscheinungsbild über verschiedene Browser hinweg zu gewährleisten. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Festlegen der Schriftart, Hintergrundfarbe, Textfarbe und Zeilenhöhe für die gesamte Seite. */
html, body {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    background:
        linear-gradient(135deg, var(--background-light) 0%, var(--background-paper) 45%, var(--background-white) 100%);
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100%;
}

/* ===========================
   Navigation Bar
   =========================== */

.navbar {
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-light);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.nav-container {
    width: 100%;
    padding: 10px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    gap: 16px;
    flex-wrap: wrap;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.back-to-classes-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-light);
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
}

.back-to-classes-btn:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-light);
}

.navbar.navbar--hidden {
    transform: translateY(-100%);
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-dark);
}

.logo-subtitle {
    font-size: 12px;
    color: var(--text-light);
}

.theme-toggle-btn {
    padding: 10px 16px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.theme-toggle-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: rgba(255, 94, 43, 0.08);
}

.login-theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
    background-color: var(--background-white);
}

.nav-tools-row {
    display: none;
    width: 100%;
    padding: 0 24px 12px;
}

.toolbar-nav {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--navbar-bg);
    box-shadow: var(--shadow-light);
    padding: 8px 10px;
}

.toolbar-nav .toolbar-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
}

.toolbar-nav .toolbar-section {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--background-light);
    min-height: 42px;
}

.toolbar-nav .toolbar-section h3,
.toolbar-nav .toolbar-section label {
    display: none;
}

.toolbar-nav .tool-btn,
.toolbar-nav .action-btn,
.toolbar-nav .save-btn,
.toolbar-nav .export-btn,
.toolbar-nav .control-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 8px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.toolbar-nav .size-section {
    position: relative;
}

.toolbar-nav #colorPicker {
    width: 34px;
    min-width: 34px;
    flex-shrink: 0;
    height: 34px;
    border-radius: 8px;
}

.toolbar-nav #brushSize {
    width: 70px;
}

.toolbar-nav #brushSizeValue {
    font-size: 12px;
    color: var(--text-light);
}

.user-info {
    padding: 8px 16px;
    background-color: var(--background-light);
    border-radius: 20px;
    font-size: 14px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 15px;
}

.logout-btn {
    padding: 6px 12px;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

/* ===========================
   Login Seite
   =========================== */

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(180deg, var(--background-light), var(--background-white));
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.login-content {
    background: linear-gradient(180deg, var(--background-white), var(--background-paper));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 48px 36px;
    box-shadow: var(--shadow-heavy);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.login-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.login-header h1 {
    font-size: 32px;
    color: var(--text-dark);
    margin: 0;
}

.login-header p {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
}

.login-description {
    font-size: 13px;
    color: var(--text-light);
}

.login-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.name-input {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-dark);
    background-color: var(--background-light);
    transition: border-color 0.3s ease;
}

.name-input:focus {
    outline: none;
    border-color: var(--primary-color);
    color: var(--text-dark);
    background-color: var(--background-white);
}

.continue-btn {
    padding: 12px 18px;
    background-color: var(--primary-color);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.continue-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.continue-btn:active {
    transform: translateY(0);
}

/* ===========================
   Seiten- und Animationsstile
   =========================== */

.page {
    display: none;
    min-height: calc(100vh - 60px);
    animation: fadeIn 0.3s ease-in;
}

.page.active {
    display: block;
}

/* Login- und Passwortseite haben keine Navbar: volle Höhe, sonst bleibt unten
   ein 60px-Streifen mit anderem Hintergrund. */
.page.login-page {
    min-height: 100vh;
}

/* .page.active setzt display: block und würde das Grid-Zentrieren aufheben. */
.page.login-page.active {
    display: grid;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===========================
   Ladezustände (Spinner, Buttons, Skeletons, App-Start)
   =========================== */

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Kleiner Inline-Spinner; erbt die Textfarbe des umgebenden Buttons */
.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.15em;
    animation: spin 0.6s linear infinite;
}

.spinner--lg {
    width: 38px;
    height: 38px;
    border-width: 3px;
}

/* Beschäftigter Button: Breite bleibt erhalten, kein erneuter Klick möglich */
.btn--loading {
    cursor: progress;
    opacity: 0.85;
}

.btn--loading .spinner {
    margin-right: 0.5em;
}

/* Ladebalken für die KI-Analyse: füllt sich langsam (JS-gesteuert) und wird
   kurz vor dem Ergebnis vollständig gefüllt. Die Breite setzt das Skript,
   die transition sorgt für den weichen Anstieg. */
.analysis-loading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.loading-bar {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background-color: var(--border-color);
    overflow: hidden;
}

.loading-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

/* Skeleton-Platzhalterkarten für Galerie / Klassengitter */
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    pointer-events: none;
    border: 1px solid var(--border-color);
    background: linear-gradient(
        90deg,
        var(--background-paper) 25%,
        var(--background-light) 37%,
        var(--background-paper) 63%
    );
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton .gallery-item-info,
.skeleton img {
    visibility: hidden;
}

/* Voll deckender App-Start-Splash (verhindert auch Theme-/Inhaltsflackern) */
#appBootOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--background-light);
    color: var(--text-light);
    transition: opacity 0.35s ease;
}

#appBootOverlay .spinner--lg {
    color: var(--primary-color);
}

#appBootOverlay .app-boot-label {
    font-size: 15px;
    letter-spacing: 0.02em;
}

#appBootOverlay.app-boot--hidden {
    opacity: 0;
    pointer-events: none;
}

/* Tipp-Indikator im KI-Chat */
.typing-indicator {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-light);
    opacity: 0.4;
    animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-4px); opacity: 1; }
}

/* ===========================
   Schüler*innenseite
   =========================== */

.student-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    padding: 40px 20px;
    min-height: calc(100vh - 80px);
}

.planning-panel {
    grid-column: 1;
    grid-row: 1;
    max-width: 560px;
    width: 100%;
    margin: 0 auto 20px;
    background: linear-gradient(180deg, var(--background-paper), var(--background-white));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow-heavy);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.canvas-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
}

.display-top-divider {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 10px;
    padding: 20px 20px 10px 20px;
}

.canvas-header {
    padding-bottom: 15px;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.toolbar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: none;
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    z-index: 12;
    transition: width 0.25s ease, padding 0.25s ease, opacity 0.25s ease, top 0.2s ease;
}

.toolbar-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: space-between;
}

.toolbar.collapsed {
    width: auto;
    padding: 10px 10px;
}

#studentPage:fullscreen .canvas-container {
    position: fixed;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    background: white;
    overflow: hidden;
}

#studentPage:fullscreen .canvas-header {
    display: none;
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 25;
    background: rgba(12, 15, 17, 0.86);
    color: #edf2f5;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

#studentPage:fullscreen .canvas-header h2,
#studentPage:fullscreen .canvas-header p {
    color: #edf2f5;
}

#studentPage:fullscreen .whiteboard-panel {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    height: 100vh;
    padding: 0;
    background: transparent;
    z-index: 0;
}

#studentPage:fullscreen .display-shell {
    position: absolute;
    inset: 0;
    width: 100%;        /* ← add: overrides the 90% */
    margin: 0;          /* ← add: overrides margin auto */
    aspect-ratio: unset; /* ← add: removes the 4/3 constraint */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100vh;
}

#studentPage:fullscreen .canvas-footer {
    display: none;
}

#studentPage:fullscreen .display-screen {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: none;
    background: white;
    box-shadow: none;
}

#studentPage:fullscreen .drawing-canvas {
    width: 100vw;
    height: 100vh;
    display: block;
}

#studentPage:fullscreen .toolbar {
    position: fixed;
    top: 72px;
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    z-index: 30;
}

#studentPage:not(:fullscreen) .toolbar {
    position: relative;
}


.toolbar.collapsed .toolbar-content {
    display: none;
}

.toolbar-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.toolbar-section h3 {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-light);
}

.tool-btn,
.action-btn,
.save-btn,
.export-btn,
.control-btn {
    width: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-white);
    color: var(--text-dark);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar.collapsed .tool-btn,
.toolbar.collapsed .action-btn,
.toolbar.collapsed .save-btn,
.toolbar.collapsed .export-btn {
    pointer-events: none;
}

.tool-btn:hover,
.action-btn:hover,
.save-btn:hover,
.export-btn:hover {
    border-color: var(--primary-color);
    color: var(--text-dark);
    background-color: rgba(111, 118, 107, 0.10);
    transform: translateY(-1px);
    box-shadow: var(--shadow-light);
}

.tool-btn.active {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: white;
}

.action-btn {
    background-color: var(--background-light);
}

.save-btn {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.save-btn:hover {
    border-color: var(--success-color);
    color: white;
    background-color: #4f8f60;
}

.export-btn {
    background-color: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

.export-btn:hover {
    border-color: var(--secondary-color);
    color: white;
    background-color: #ff624e;
}

#colorPicker {
    width: 50px;
    height: 38px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
}

#brushSize {
    width: 80px;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

#brushSize::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: var(--shadow-light);
}

#brushSize::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

/* Whiteboard */
.canvas-container {
    background: transparent;   
    border: none;              
    border-radius: 0;          
    padding: 0 0 18px 0;
    box-shadow: none;          
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.planning-header h2 {
    margin-bottom: 8px;
    color: var(--text-dark);
}

.planning-header p {
    font-size: 14px;
    color: var(--text-light);
}

.planning-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.planning-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

/* Label mit Fragezeichen-Hilfe (persönlicher Code). Die Zeile ist der
   Bezugsrahmen des Tooltips, damit er immer bündig unter dem Feld aufgeht
   und auch auf schmalen Bildschirmen nicht über den Rand ragt. */
.planning-label-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.required-mark {
    color: var(--accent-color);
}

.code-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--background-paper);
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    cursor: help;
    user-select: none;
}

.code-help:hover,
.code-help:focus-visible {
    color: var(--text-dark);
    border-color: var(--primary-color);
    outline: none;
}

.code-help-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    width: 100%;
    max-width: 420px;
    padding: 14px 16px;
    background: var(--background-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    cursor: default;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.code-help:hover .code-help-tip,
.code-help:focus .code-help-tip,
.code-help:focus-within .code-help-tip {
    visibility: visible;
    opacity: 1;
}

.code-help-tip ol {
    margin: 8px 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.code-help-tip em {
    color: var(--text-light);
}

.code-help-example {
    display: block;
    color: var(--text-light);
}

.code-input {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Höhere Spezifität als .step-input:focus: Nach dem Fehler hat das Feld den
   Fokus, die Fehlermarkierung soll trotzdem sichtbar bleiben. */
.step-input.code-input.invalid {
    border-color: #B5634F;
    box-shadow: 0 0 0 3px rgba(181, 99, 79, 0.18);
}

.code-input::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
}

.step-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--background-white);
    color: var(--text-dark);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    resize: vertical;
}

.step-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: rgba(94, 95, 255, 0.02);
}

.control-btn {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: transparent;
    color: var(--text-dark);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.control-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: rgba(255, 94, 43, 0.08);
}

.whiteboard-panel {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0 40px 40px 40px;
    background: transparent;
    overflow: visible;
}

.display-shell {
    position: relative;
    width: 90%;
    margin: 0 auto;
    background: url('Screen.png') no-repeat center top / 100% auto;
    aspect-ratio: 4 / 3;
}

.display-screen {
    position: absolute;
    top: 2%;
    left: 1%;
    right: 1%;
    bottom: 28%;
    border-radius: 4px;
    background: #ffffff;
    overflow: hidden;
    border: none;
}

.drawing-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    /* Browser-eigene Touch-Gesten (Scrollen/Zoom) unterbinden -> eigene
       Pinch-Zoom-/Zwei-Finger-Verschieben-Logik in script.js greift */
    touch-action: none;
}

.canvas-header h2 {
    font-size: 24px;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.canvas-footer {
    padding-top: 15px;
    border-top: 2px solid var(--border-color);
    text-align: center;
    color: var(--text-light);
    font-size: 12px;
}

/* ===========================
   Lehrer*innenseite
   =========================== */

.teacher-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: calc(100vh - 80px);
    transition: grid-template-columns 0.35s ease;
}

/* Sobald eine Schüler*innen-Arbeit ausgewählt ist: Galerie schmal an den
   linken Rand, damit die KI-Analyse den frei werdenden Platz bekommt
   (größeres Vorschaubild, mehr Lesebreite für die Analyse). */
.teacher-container.gallery-collapsed {
    grid-template-columns: 280px 1fr;
}

.teacher-container.gallery-collapsed .gallery-controls {
    flex-direction: column;
}

/* X-Button geklickt: KI-Analyse ganz ausblenden, Galerie nimmt die volle Breite ein */
.teacher-container.analysis-hidden {
    grid-template-columns: 1fr;
}

.teacher-container.analysis-hidden .discussion-section {
    display: none;
}

.close-analysis-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--background-light);
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-analysis-btn:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Gallerie Bereich */
.gallery-section {
    background: linear-gradient(180deg, var(--background-white), var(--background-paper));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
    box-shadow: var(--shadow-light);
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

.gallery-header {
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}

.gallery-header h2 {
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 12px;
}

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

.search-input,
.sort-dropdown {
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background-color: var(--background-light);
    color: var(--text-dark);
    transition: border-color 0.3s ease;
}

.search-input {
    flex: 1;
    min-width: 150px;
}

.search-input:focus,
.sort-dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: white;
}

.sort-dropdown {
    min-width: 120px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    /* Zeilen oben bündeln: Ohne das verteilt das Raster die freie Höhe auf
       die Zeilen, und bei wenigen Arbeiten entstehen große Lücken, sobald die
       Galerie neben der (hohen) Analyse steht. */
    align-content: start;
    overflow-y: auto;
    flex: 1;
    padding-right: 5px;
}

.gallery-grid::-webkit-scrollbar {
    width: 6px;
}

.gallery-grid::-webkit-scrollbar-track {
    background: var(--background-light);
    border-radius: 10px;
}

.gallery-grid::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.gallery-grid::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

.gallery-item {
    aspect-ratio: 1;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-light);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.gallery-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

.gallery-item.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(111, 118, 107, 0.16);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    padding: 8px;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item-info {
    opacity: 1;
}

.gallery-placeholder {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    text-align: center;
    color: var(--text-light);
}

.gallery-placeholder p {
    font-size: 18px;
}

.gallery-placeholder small {
    font-size: 13px;
}

.class-card {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.class-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.class-card-info span {
    font-size: 12px;
    color: var(--text-light);
}

/* Klassen- und Lehrkräfte-Karten brauchen mehr Breite als Bild-Kacheln
   (Galerie: 120px), sonst brechen Klassenname und Schuljahr mehrfach um. */
#classGrid,
#teacherGrid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

#classGrid .class-card,
#teacherGrid .class-card {
    min-height: 150px;
}

.class-card-add {
    border-style: dashed;
    color: var(--text-light);
    font-weight: 600;
}

.credentials-warning {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 13px;
}

.credentials-list {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
    align-content: start;
}

/* Schüler*innen-Zugangsdaten: feste Spalten Nummer | Nutzername | Passwort */
.credentials-row--student {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 12px;
}

.credentials-row--student span {
    white-space: nowrap;
    overflow-wrap: normal;
}

.credentials-row--student span:last-child {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.credentials-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-light);
    font-family: monospace;
    font-size: 13px;
}

.credentials-row span:not(.credentials-number) {
    flex: 1;
}

.credentials-number {
    color: var(--text-light);
    min-width: 24px;
}

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

/* Klasse verwalten: Verwalten-Button auf der Klassenkarte */
.class-card {
    position: relative;
}

.class-card-manage-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--background-white);
    color: var(--text-light);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.class-card:hover .class-card-manage-btn,
.class-card-manage-btn:focus-visible {
    opacity: 1;
}

.class-card-manage-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Klasse verwalten: Schüler*innen-Liste */
.student-admin-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-content: start;
}

.student-admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-light);
}

.student-admin-name {
    flex: 1;
    font-family: monospace;
    font-size: 14px;
    color: var(--text-dark);
}

.student-reset-btn {
    flex-shrink: 0;
}

/* Klasse verwalten: einmalige Anzeige des neu erzeugten Logins */
.reset-login-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    background-color: var(--background-light);
}

/* Gefährliche Aktion (Klasse löschen) */
/* .detail-btn.danger-btn: sonst überschreibt die später definierte .detail-btn-Regel das Rot */
.danger-btn,
.detail-btn.danger-btn {
    background-color: #B4524A;
    border-color: #B4524A;
    color: #fff;
}

.danger-btn:hover,
.detail-btn.danger-btn:hover {
    background-color: #9C453E;
    border-color: #9C453E;
}

/* Diskussions Bereich */
.discussion-section {
    position: relative;
    background: linear-gradient(180deg, var(--background-white), var(--background-paper));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
    box-shadow: var(--shadow-light);
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

.discussion-header {
    padding-bottom: 12px;
    padding-right: 36px;
    border-bottom: 2px solid var(--border-color);
}

.discussion-header h2 {
    font-size: 22px;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.selected-work {
    font-size: 13px;
    color: var(--text-light);
}

#selectedWorkTitle {
    color: var(--primary-color);
    font-weight: 600;
}

.discussion-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

/* Analyse-Panel nimmt den verbleibenden Platz; das Chat-Panel ist schmal als
   Standard und wird über die Ziehleiste (.panel-resizer) vergrößert. */
.discussion-container .analysis-panel {
    flex: 1 1 auto;
    min-height: 80px;
}

.discussion-container .chat-panel {
    flex: 0 0 auto;
    /* Standardhöhe so gewählt, dass die erste Chat-Nachricht samt Eingabefeld
       vollständig sichtbar ist; per Ziehleiste weiter anpassbar. */
    height: 300px;
    min-height: 96px;
}

/* Ziehleiste zwischen Analyse- und Chat-Panel */
.panel-resizer {
    flex: 0 0 auto;
    height: 10px;
    margin: -1px 0;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.panel-resizer::before {
    content: '';
    width: 48px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--border-color);
    transition: background-color 0.2s ease;
}

.panel-resizer:hover::before {
    background-color: var(--primary-color);
}

/* Panel Styles */
.analysis-panel,
.chat-panel,
.categories-panel {
    background-color: var(--background-paper);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.project-detail-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.project-detail-card img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: max-height 0.35s ease;
}

.teacher-container.gallery-collapsed .project-detail-card img {
    max-height: 420px;
}

.project-details-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.detail-btn {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--background-white);
    color: var(--text-dark);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.detail-btn.secondary {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.detail-btn:hover {
    transform: translateY(-1px);
    background-color: rgba(111, 118, 107, 0.08);
}

.analysis-placeholder {
    padding: 14px;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 14px;
}

.project-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.project-viewer-content {
    width: 100%;
    height: 100%;
    background: var(--background-white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-heavy);
    display: flex;
    flex-direction: column;
}

.viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.viewer-close {
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.viewer-image-wrapper {
    flex: 1;
    background: #000;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    cursor: grab;
}

.viewer-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    transition: transform 0.2s ease;
    background: black;
}

.viewer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 18px;
    background: var(--background-light);
}

.viewer-actions .detail-btn {
    padding: 10px 16px;
}

.panel-title {
    padding: 12px 15px;
    background-color: var(--background-white);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analysis-content,
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.placeholder-text {
    color: var(--text-light);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px;
    margin: auto;
}

.placeholder-text p {
    font-size: 14px;
}

.placeholder-hint {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 8px;
}

.placeholder-text ul {
    list-style-position: inside;
    text-align: left;
    font-size: 12px;
    margin-top: 8px;
}

.placeholder-text li {
    margin: 4px 0;
}

/* KI Chat Nachrichten */
.message {
    display: flex;
    gap: 10px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user-message {
    justify-content: flex-end;
}

.message-content {
    background-color: var(--background-white);
    border-radius: 8px;
    padding: 10px 14px;
    max-width: 80%;
    word-wrap: break-word;
    font-size: 13px;
    line-height: 1.5;
}

.user-message .message-content {
    background-color: var(--primary-color);
    color: white;
}

.ai-message .message-content {
    background-color: var(--background-white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
}

/* Markdown-formatierte KI-Antworten im Chat: kompakte Abstände, damit
   Überschriften, Listen und Trennlinien in der Sprechblase ordentlich sitzen. */
.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }

.message-content p {
    margin: 0 0 8px;
}

.message-content h4 {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.message-content ul,
.message-content ol {
    margin: 6px 0;
    padding-left: 20px;
}

.message-content li {
    margin: 2px 0;
}

.message-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 10px 0;
}

/* Chat Eingabe Bereich */
.chat-input-area {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    border-top: 2px solid var(--border-color);
    background-color: var(--background-white);
}

.chat-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-dark);
    background-color: var(--background-light);
    /* Auch das Eingabefeld selbst lässt sich nach Bedarf vergrößern. */
    resize: vertical;
    min-height: 40px;
    transition: border-color 0.3s ease;
}

.chat-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--background-white);
}

.send-btn {
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}

.send-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.send-btn:active {
    transform: translateY(0);
}

/* Categories Panel */
.categories-panel {
    grid-column: 1 / -1;
}

.categories-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* ===========================
   Scrollbar Styles
   =========================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-light);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ===========================
   Responsive Design
   =========================== */

@media (max-width: 1200px) {
    .canvas-container {
        grid-template-columns: 1fr;
    }

    .toolbar {
        position: static;
        max-width: none;
        width: 100%;
    }

    .teacher-container {
        grid-template-columns: 1fr;
    }

    .student-container {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - 80px);
    }

    .toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: 120px;
    }

    .toolbar-section {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 200px;
    }

    .toolbar-section h3 {
        margin-right: auto;
    }
}

@media (max-width: 768px) {

    .student-container {
        grid-template-columns: 1fr;
    }

    .toolbar {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .toolbar-section {
        grid-column: span 1;
    }

    .drawing-canvas {
        min-height: 300px;
    }

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

    .search-input {
        width: 100%;
    }

    .message-content {
        max-width: 90%;
    }

    .chat-input-area {
        flex-direction: column;
    }

    .login-content {
        padding: 40px 30px;
    }

    .login-container {
        max-width: 450px;
    }
}

@media (max-width: 480px) {
    .nav-container {
        flex-direction: column;
        height: auto;
        padding: 10px 15px;
        gap: 10px;
    }

    .student-container,
    .teacher-container {
        padding: 10px;
        gap: 10px;
    }

    .toolbar-section h3 {
        display: none;
    }

    .tool-btn,
    .action-btn {
        padding: 8px 6px;
        font-size: 12px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .analysis-panel,
    .chat-panel,
    .categories-panel {
        border-radius: 6px;
    }

    .message-content {
        max-width: 95%;
    }

    .send-btn {
        width: 100%;
    }

    .login-content {
        padding: 30px 20px;
    }

    .login-header h1 {
        font-size: 24px;
    }





    .continue-btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .name-input {
        padding: 10px 12px;
        font-size: 13px;
    }
}

.fs-toolbar { display: none; }
.fs-tab     { display: none; }

#studentPage:fullscreen .fs-toolbar {
    display: flex;
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    align-items: center;
    gap: 6px;
    background: rgba(255, 253, 249, 0.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 12px;
    padding: 6px 10px;
    white-space: nowrap;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}

#studentPage:fullscreen .fs-toolbar.fs-hidden {
    transform: translateX(-50%) translateY(calc(-100% - 20px));
    opacity: 0;
    pointer-events: none;
}

#studentPage:fullscreen .fs-tab {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    background: rgba(255, 253, 249, 0.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,0.09);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 5px 20px 7px;
    font-size: 16px;
    font-family: inherit;
    color: var(--text-light);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    gap: 4px;
}

#studentPage:fullscreen .fs-toolbar.fs-hidden ~ .fs-tab {
    opacity: 1;
    pointer-events: all;
}

.fs-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-white);
    color: var(--text-dark);
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.fs-btn:hover { background: var(--background-light); }

.fs-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

#fsColorPicker {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    flex-shrink: 0;
    padding: 2px;
}

.fs-size-group {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-light);
    flex-shrink: 0;
}

.fs-size-group input[type="range"] { width: 70px; }

.fs-collapse-btn {
    margin-left: 8px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fs-collapse-btn:hover { background: var(--background-light); }

/* Der Wrapper liegt genau auf dem Textursprung (oben links der Box). Die
   Werkzeugleiste hängt darüber, damit der Text beim Bestätigen nicht springt. */
.text-tool-wrapper {
    position: fixed;
    z-index: 9999;
}

.text-tool-wrapper .text-tool-toolbar {
    position: absolute;
    left: -6px;
    bottom: calc(100% + 6px);
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
}

.text-tool-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--background-white, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 3px 5px;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.12);
    user-select: none;
}

.text-font-size {
    width: 50px;
    padding: 2px 4px;
    font-size: 12px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 3px;
    text-align: center;
    background: var(--background-white, #fff);
    color: var(--text-color, #333);
}

.text-fmt-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 3px;
    background: var(--background-white, #fff);
    color: var(--text-color, #333);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s, color 0.1s;
    line-height: 1;
}

.text-fmt-btn:hover {
    background: var(--background-light, #f0f0f0);
}

.text-fmt-btn.active {
    background: var(--primary-color, #4a90e2);
    color: #fff;
    border-color: var(--primary-color, #4a90e2);
}

.bold-btn { font-weight: bold; }
.italic-btn { font-style: italic; }
.underline-btn { text-decoration: underline; }

/* Breite und Mindesthöhe setzt script.js (Weltkoordinaten × Zoom). Kein
   Innenabstand und kein Rahmen im Layout: Der Textbereich entspricht exakt
   der Box auf der Zeichenfläche, Umbrüche stimmen also überein. Der sichtbare
   Rahmen ist eine outline mit Abstand und beeinflusst den Umbruch nicht. */
.text-tool-input {
    box-sizing: content-box;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    font-family: sans-serif;
    line-height: 1.3;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    cursor: text;
    overflow: visible;
    outline: 1px solid var(--border-color, #ccc);
    outline-offset: 5px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 2px 10px 6px rgba(0, 0, 0, 0.12);
}

.text-tool-input:focus {
    outline-color: var(--primary-color, #4a90e2);
    background: rgba(255, 255, 255, 0.98);
}

.text-tool-resize {
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 12px;
    height: 12px;
    background: var(--background-white, #fff);
    border: 1.5px solid var(--primary-color, #4a90e2);
    border-radius: 2px;
    cursor: nwse-resize;
    touch-action: none;
}

/* Größerer Greifbereich für Finger */
.text-tool-resize::after {
    content: '';
    position: absolute;
    inset: -10px;
}

/* Text box hover edit button */
.text-hover-overlay {
    position: fixed;
    z-index: 9997;
    transform: translateX(-100%) translateY(-100%);
    pointer-events: auto;
}

.text-hover-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--primary-color, #4a90e2);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: background 0.15s, transform 0.1s;
}

.text-hover-edit-btn:hover {
    background: #2f78d4;
    transform: scale(1.1);
}

/* Separator and delete button inside text editor toolbar */
.text-toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--border-color, #ccc);
    margin: 0 3px;
    flex-shrink: 0;
    align-self: center;
}

.text-delete-btn {
    color: #e53e3e !important;
    border-color: rgba(229, 62, 62, 0.4) !important;
    background: rgba(229, 62, 62, 0.05) !important;
    font-size: 11px !important;
    font-weight: bold;
}

.text-delete-btn:hover {
    background: rgba(229, 62, 62, 0.15) !important;
}

/* App Summary — normal view */
.app-summary {
    background: var(--background-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 20px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-light);
}

.app-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-summary-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.app-summary-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-light);
    line-height: 1;
    padding: 0 2px;
}

.app-summary-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: all 0.2s ease;
}

.app-summary-body.collapsed {
    display: none;
}

.summary-row {
    display: flex;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.4;
}

.summary-label {
    font-weight: 500;
    color: var(--text-light);
    min-width: 84px;
    flex-shrink: 0;
}

.summary-value {
    color: var(--text-dark);
}

/* App Summary — fullscreen */
#studentPage:fullscreen .app-summary {
    position: fixed;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 210px;
    max-height: 70vh;
    overflow-y: auto;
    background: rgba(255, 253, 249, 0.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 12px;
    margin: 0;
    padding: 16px;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}

#studentPage:fullscreen .app-summary.fs-collapsed {
    transform: translateY(-50%) translateX(calc(-100% - 20px));
    opacity: 0;
    pointer-events: none;
}

.app-summary-fs-tab {
    display: none;
}

#studentPage:fullscreen .app-summary-fs-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 101;
    background: rgba(255, 253, 249, 0.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,0.09);
    border-left: none;
    border-radius: 0 8px 8px 0;
    padding: 14px 7px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-light);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#studentPage:fullscreen .app-summary-fs-tab.visible {
    opacity: 1;
    pointer-events: all;
}

.summary-value[contenteditable] {
    outline: none;
    border-radius: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    cursor: text;
    transition: background 0.15s;
}

.summary-value[contenteditable]:hover {
    background: var(--background-light);
}

.summary-value[contenteditable]:focus {
    background: var(--background-light);
    box-shadow: 0 0 0 1px var(--border-color);
}

/* Non-blocking toast notifications (replaces alert() for status messages) */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    min-width: 220px;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: var(--shadow-heavy);
    background: #37474f;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success { background: #2e7d32; }
.toast-error   { background: #c62828; }
.toast-warning { background: #ef6c00; }
.toast-info    { background: #37474f; }
/* ===========================
   Icons (SVG-Sprite in index.html)
   =========================== */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.icon-sm {
    width: 14px;
    height: 14px;
}

.fs-btn .icon,
.text-hover-edit-btn .icon {
    width: 16px;
    height: 16px;
}

.fs-collapse-btn .icon {
    width: 14px;
    height: 14px;
}

/* Passwortfeld mit Anzeigen/Verbergen-Button */
.password-field {
    position: relative;
    display: flex;
}

.password-field .name-input {
    flex: 1;
    min-width: 0;
    padding-right: 44px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
    color: var(--text-dark);
    background-color: rgba(0, 0, 0, 0.06);
}

/* Edge-eigenen Anzeigen-Button ausblenden, sonst doppeltes Auge */
.password-field .name-input::-ms-reveal,
.password-field .name-input::-ms-clear {
    display: none;
}

/* ===========================
   TSD-SE-Analyse und Kodiervorschlag
   =========================== */
.tsdse-analysis h4,
.tsdse-categories h4 {
    margin: 16px 0 6px;
}

/* Der globale Reset (* { padding: 0 }) nimmt Listen die Einrückung; ohne
   diese Regel säßen die Aufzählungspunkte auf dem Rand der Boxen. */
.ai-evaluation ul,
.ai-evaluation ol,
.tsdse-categories ul,
.tsdse-categories ol {
    padding-left: 22px;
    margin: 4px 0 8px;
}

.ai-evaluation li,
.tsdse-categories li {
    margin-bottom: 4px;
}

.ai-evaluation p {
    margin-bottom: 6px;
}

.tsdse-analysis small,
.tsdse-categories small {
    display: block;
    color: var(--text-light);
    font-size: 12px;
    margin-top: 2px;
}

.tsdse-roadmap {
    padding-left: 24px;
}

.tsdse-roadmap > li {
    margin-bottom: 10px;
}

.tsdse-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.tsdse-proposal {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}

.tsdse-roadmap ul {
    margin-top: 2px;
}

.tsdse-alert {
    border: 1px solid #c0634f;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 4px 14px 8px;
    background: rgba(192, 99, 79, 0.08);
}

.tsdse-limits {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 14px;
    background: var(--background-light);
}

.tsdse-limits summary {
    cursor: pointer;
    font-weight: 600;
}

.tsdse-meta {
    margin-top: 12px;
}

/* Fahrplan je Kriterium: Gesamteindruck, Punkteübersicht, Schritte */
.roadmap-impression {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 4px 14px 10px;
    background: var(--background-white);
}

.roadmap-impression h4 {
    margin-top: 10px;
}

.ai-evaluation .roadmap-overview {
    margin-bottom: 0;
    color: var(--text-light);
    font-size: 13px;
}

.roadmap-table th {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.roadmap-table th:last-child {
    text-align: right;
}


.roadmap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roadmap-group {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-white);
    padding: 0 14px;
}

.roadmap-group[open] {
    padding-bottom: 10px;
}

.roadmap-group > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none;
}

.roadmap-group > summary::-webkit-details-marker {
    display: none;
}

.roadmap-group > summary::after {
    content: '▸';
    margin-left: 4px;
    color: var(--text-light);
    transition: transform 0.15s ease;
}

.roadmap-group[open] > summary::after {
    transform: rotate(90deg);
}

.roadmap-step {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--background-white);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.roadmap-group-title {
    font-weight: 700;
}

.roadmap-badge {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--text-light);
}

.roadmap-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
}

.roadmap-count.has-items {
    color: #b0672a;
    font-weight: 600;
}

.roadmap-group-finding {
    font-size: 13px;
    color: var(--text-light);
}

.roadmap-ai-hints {
    border-radius: 6px;
    padding: 6px 10px 2px;
    margin-bottom: 8px;
    background: var(--background-light);
    font-size: 13px;
}

.roadmap-criterion {
    border-top: 1px solid var(--border-color);
    padding: 8px 0 2px;
}

.roadmap-criterion-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.roadmap-code {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
}

.roadmap-finding {
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--text-light);
}

.roadmap-points {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.tsdse-analysis small.roadmap-rule {
    font-style: italic;
}

/* „Worauf achten“: hervorgehoben, damit die Prüfpunkte beim Überfliegen auffallen */
.ai-evaluation .roadmap-attention {
    list-style: none;
    padding-left: 0;
    margin: 6px 0 4px;
}

.ai-evaluation .roadmap-attention li {
    position: relative;
    padding: 4px 8px 4px 26px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: rgba(214, 140, 60, 0.12);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ai-evaluation .roadmap-attention li::before {
    content: '!';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 12px;
    font-weight: 700;
    text-align: center;
    color: #b0672a;
}

.roadmap-ok {
    font-size: 12px;
    color: var(--text-light);
    margin: 4px 0;
}

/* Vorauswertung nach Manual v2: Gesamtpunktzahl, Boxen K1–K5, Warnungen */
.v3-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding-top: 10px;
}

.v3-total-label {
    font-weight: 700;
}

.v3-total-value {
    margin-left: auto;
    font-size: 28px;
    font-weight: 700;
}

.v3-total .v3-unrated {
    flex-basis: 100%;
    text-align: right;
}

.v3-unrated {
    color: #b0672a;
    font-weight: 600;
    font-size: 12px;
}

.v3-step {
    flex-basis: auto;
    width: auto;
    padding: 0 7px;
    border-radius: 11px;
}

.v3-warn-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    color: #b0672a;
    background: rgba(214, 140, 60, 0.14);
}

.v3-group-points {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}

.ai-evaluation .v3-details {
    margin: 4px 0;
    font-size: 13px;
}

.ai-evaluation .v3-details li {
    margin-bottom: 2px;
    overflow-wrap: anywhere;
}

/* ⚠: von der KI nicht sicher bewertbar, nicht gezählt */
.ai-evaluation .v3-warnings {
    list-style: none;
    padding-left: 0;
    margin: 6px 0;
}

.ai-evaluation .v3-warnings li {
    position: relative;
    padding: 4px 8px 4px 28px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: rgba(214, 140, 60, 0.12);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ai-evaluation .v3-warnings li::before {
    content: '⚠';
    position: absolute;
    left: 8px;
    top: 4px;
    color: #b0672a;
}

.ai-evaluation .v3-notes {
    padding-left: 18px;
    margin: 6px 0;
    font-size: 13px;
    color: var(--text-light);
}

.v3-units {
    border-top: 1px dashed var(--border-color);
    margin-top: 8px;
    padding-top: 8px;
    font-size: 13px;
}

.ai-evaluation .v3-units ul {
    margin-top: 4px;
}

.v3-id {
    font-weight: 700;
    font-size: 12px;
    color: var(--text-light);
    margin-right: 4px;
}

.v3-unit-unsure {
    opacity: 0.75;
}

.v3-score-table .v3-table-group td {
    font-weight: 700;
    color: var(--text-dark);
    background: var(--background-light);
}

.v3-score-table td:first-child {
    width: 40px;
}

.tsdse-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.tsdse-categories > .placeholder-hint {
    grid-column: 1 / -1;
    margin: 0;
}

.tsdse-block {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px 14px 12px;
    background: var(--background-white);
    min-width: 0;
}

.tsdse-score-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.tsdse-code {
    flex: 0 0 38px;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-light);
}

.tsdse-label {
    flex: 1;
    min-width: 0;
}

.tsdse-points {
    font-weight: 700;
    white-space: nowrap;
}

.tsdse-items {
    padding-left: 20px;
    margin: 8px 0 0;
}

.tsdse-items li {
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.tsdse-concepts {
    list-style: none;
    padding-left: 0;
}

.tsdse-flag {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-right: 4px;
}

.tsdse-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.tsdse-tags span {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--text-light);
}

.tsdse-confidence--niedrig {
    border-color: #c0634f !important;
    color: #c0634f !important;
}

.tsdse-classification {
    margin-bottom: 8px;
}

/* ===========================
   Admin-Bereich
   =========================== */
.analysis-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 6px;
}

.readonly-badge,
.teacher-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--text-light);
    white-space: nowrap;
}

.teacher-status-badge {
    align-self: flex-start;
    border-color: var(--accent-color);
}

.admin-category {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--background-white);
}

.admin-category p {
    margin: 4px 0 0;
}

.admin-score-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-score-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-color);
}

.admin-score-table td:first-child {
    font-weight: 700;
    color: var(--text-light);
    width: 48px;
}

.admin-score-table td:last-child {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

.admin-score-table tfoot td {
    font-weight: 700;
    border-bottom: none;
    border-top: 2px solid var(--text-dark);
    color: var(--text-dark);
}


/* Admin: Lehrkräfte verwalten (gleiches Zeilenlayout wie "Klasse verwalten") */
.admin-manage-btn {
    align-self: flex-start;
    margin-top: 6px;
}

.teacher-admin-row .student-admin-name {
    font-family: inherit;
}

.teacher-admin-row .student-admin-name small {
    display: block;
    font-family: monospace;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
}

.teacher-admin-row .detail-btn {
    flex-shrink: 0;
}

.teacher-admin-row.is-focused {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}

@media (max-width: 640px) {
    .teacher-admin-row {
        flex-wrap: wrap;
    }
}


/* ===========================
   Tablets und Touch-Bedienung
   =========================== */
/* Werkzeugleisten brechen in eine zweite Zeile um, statt seitlich aus dem
   Bild zu laufen (auf Tablets ist seitliches Wischen in der Leiste kaum
   auffindbar). Am Desktop passt alles weiterhin in eine Zeile. */
.toolbar-nav .toolbar-content {
    flex-wrap: wrap;
    overflow-x: visible;
}

#studentPage:fullscreen .fs-toolbar {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    max-width: calc(100vw - 24px);
}

/* Geräte ohne Hover (Touch): Was sonst erst beim Überfahren mit der Maus
   erscheint, ist immer sichtbar. */
@media (hover: none) {
    .class-card-manage-btn,
    .gallery-item-info {
        opacity: 1;
    }

    /* Verwalten-Knopf unter den Kartendaten statt oben rechts darüber */
    .class-card {
        flex-direction: column;
        gap: 10px;
    }

    .class-card-manage-btn {
        position: static;
    }

    /* Anhebe-Effekte bleiben auf Touchgeräten nach dem Tippen "hängen". */
    .logout-btn:hover,
    .continue-btn:hover,
    .tool-btn:hover,
    .action-btn:hover,
    .save-btn:hover,
    .export-btn:hover,
    .gallery-item:hover,
    .detail-btn:hover,
    .send-btn:hover,
    .text-hover-edit-btn:hover {
        transform: none;
    }
}

/* Bedienung mit dem Finger: Touch-Ziele mindestens 44px (Apple-Richtlinie,
   WCAG 2.5.5). Mit der Maus bleibt alles wie bisher. */
@media (pointer: coarse) {
    .toolbar-nav .tool-btn,
    .toolbar-nav .action-btn,
    .toolbar-nav .save-btn,
    .toolbar-nav .export-btn,
    .toolbar-nav .control-btn,
    .toolbar-nav #colorPicker,
    .fs-btn,
    #fsColorPicker,
    .fs-collapse-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .theme-toggle-btn,
    .logout-btn,
    .back-to-classes-btn,
    .detail-btn,
    .send-btn,
    .class-card-manage-btn,
    .search-input,
    .sort-dropdown,
    #studentPage:fullscreen .fs-tab {
        min-height: 44px;
    }

    .close-analysis-btn,
    .viewer-close,
    .password-toggle-btn,
    .app-summary-toggle,
    .text-hover-edit-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Werkzeugleiste des Textfelds (B, I, U, Löschen, Schriftgröße) */
    .text-fmt-btn {
        width: 44px;
        height: 44px;
    }

    .text-font-size {
        height: 44px;
        width: 64px;
    }

    /* Größen-Griff: sichtbar 12px, greifbar 44px */
    .text-tool-resize::after {
        inset: -16px;
    }

    /* Stärke-Regler: greifbar 44px hoch, sichtbar bleibt die 6px-Linie in der Mitte */
    #brushSize,
    .toolbar-nav #brushSize {
        width: 110px;
        height: 44px;
        background: linear-gradient(var(--border-color), var(--border-color)) center / 100% 6px no-repeat;
    }

    #brushSize::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
    }

    #brushSize::-moz-range-thumb {
        width: 26px;
        height: 26px;
    }
}