/* ═══════════════════════════════════════════════════
   SVT TECHNIK-BOT — Design System v3
   Clean · Minimal · Premium
   ═══════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --black: #0a0a0a;
    --white: #ffffff;
    --gray-50: #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;

    --accent: #3b82f6;
    --accent-light: #60a5fa;
    --danger: #ef4444;
    --danger-soft: #fef2f2;
    --success: #22c55e;
    --success-soft: #f0fdf4;
    --warning: #f59e0b;
    --warning-soft: #fffbeb;

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms var(--ease-in-out);
    --transition-base: 250ms var(--ease-out);
    --transition-slow: 350ms var(--ease-out);
}

html, body {
    height: 100%;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-900);
    background: var(--gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── Screens ──────────────────────────────────────── */
.screen {
    display: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}
.screen.active {
    display: flex;
}

/* ══════════════════════════════════════════════════
   LOGIN SCREEN
   ══════════════════════════════════════════════════ */
#login-screen {
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--white);
    overflow: hidden;
}

.login-bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(0,0,0,0.015) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0,0,0,0.01) 0%, transparent 50%),
        radial-gradient(circle at 60% 80%, rgba(0,0,0,0.015) 0%, transparent 50%);
    pointer-events: none;
}

.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: 2.5rem;
    animation: fadeSlideUp 0.6s var(--ease-out);
}

.login-brand {
    text-align: center;
    margin-bottom: 2.5rem;
}

.brand-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    animation: float 3s ease-in-out infinite;
}

.login-brand h1 {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--black);
}

.brand-subtitle {
    font-size: 0.8rem;
    color: var(--gray-500);
    letter-spacing: 1px;
    margin-top: 0.25rem;
    text-transform: uppercase;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.input-group label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray-500);
}

.input-group input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font);
    font-size: 0.92rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--black);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.input-group input:focus {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.input-group input::placeholder {
    color: var(--gray-400);
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
.btn-primary:hover {
    background: var(--gray-800);
    border-color: var(--gray-800);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--gray-700);
    border-color: var(--gray-200);
}
.btn-outline:hover {
    border-color: var(--gray-400);
    color: var(--black);
}

.btn-ghost {
    background: transparent;
    color: var(--gray-500);
    border: none;
    padding: 0.5rem;
}
.btn-ghost:hover {
    color: var(--black);
    background: var(--gray-100);
    border-radius: var(--radius-sm);
}

.btn-compact {
    padding: 0.55rem 1rem;
    font-size: 0.72rem;
    border-radius: var(--radius-xs);
}

.btn-full {
    width: 100%;
}

.btn-arrow {
    transition: transform var(--transition-fast);
}
.btn-primary:hover .btn-arrow {
    transform: translateX(4px);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.error-msg {
    color: var(--danger);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
    padding: 0.5rem;
    animation: shake 0.4s ease;
}
.success-msg {
    color: var(--success);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem;
}
.hidden { display: none !important; }

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    font-size: 0.72rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════ */
#dashboard-screen {
    flex-direction: column;
    overflow-y: auto;
    background: var(--white);
}

.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 10;
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-icon {
    font-size: 1.5rem;
}

.dash-brand h1 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--gray-900);
}

/* ── Mode Cards ──────────────────────────────────── */
.mode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.mode-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.75rem 1.5rem;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font);
    overflow: hidden;
}

.mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--black);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.mode-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mode-card:hover::before {
    transform: scaleX(1);
}

.mode-card--accent {
    grid-column: span 2;
}

.mode-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
}

.mode-card-content {
    flex: 1;
    min-width: 0;
}

.mode-card h2 {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 0.35rem;
    color: var(--black);
}

.mode-card p {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.mode-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray-400);
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    margin-top: auto;
    display: inline-block;
}

/* ── Today Bar ───────────────────────────────────── */
.today-bar {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}
.today-bar:hover {
    box-shadow: var(--shadow-sm);
}

.today-bar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    user-select: none;
}

.today-bar-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.today-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
}
.today-dot.no-event {
    background: var(--gray-300);
    animation: none;
}

.today-day {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--black);
}

.today-info {
    font-size: 0.78rem;
    color: var(--gray-500);
}

.today-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 0.3rem;
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
}
.today-expand-btn:hover {
    color: var(--black);
    background: var(--gray-100);
}
.today-expand-btn.expanded svg {
    transform: rotate(180deg);
}
.today-expand-btn svg {
    transition: transform var(--transition-base);
}

.today-schedule {
    border-top: 1px solid var(--gray-100);
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    animation: fadeSlideDown 0.25s var(--ease-out);
}

.today-schedule .schedule-item.is-today {
    background: var(--black);
    color: var(--white);
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
}
.today-schedule .schedule-item.is-today .schedule-day,
.today-schedule .schedule-item.is-today .schedule-label,
.today-schedule .schedule-item.is-today .schedule-time {
    color: var(--white);
}
.today-schedule .schedule-item.is-today .schedule-label {
    opacity: 0.7;
}

/* ── Schedule Grid ───────────────────────────────── */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.schedule-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-xs);
    transition: background var(--transition-fast);
}

.schedule-day {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--black);
}

.schedule-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-400);
}

.schedule-time {
    font-size: 0.72rem;
    color: var(--gray-600);
    margin-top: 0.1rem;
}

/* ── Primary Cards ───────────────────────────────── */
.mode-card--primary {
    border-color: var(--gray-300);
    background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
}
.mode-card--primary::before {
    background: var(--accent);
}
.mode-card--primary:hover {
    border-color: var(--accent-light);
    box-shadow: var(--shadow-lg);
}

/* ── Compact Cards ───────────────────────────────── */
.mode-grid--compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
}

.mode-card--compact {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    text-align: left;
}
.mode-card--compact h2 {
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    margin: 0;
}

.mode-icon-sm {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mode-card--warn {
    border-color: #fecdd3;
}
.mode-card--warn::before {
    background: #e11d48;
}

/* ── Bottom Navigation ───────────────────────────── */
.bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    padding: 0.35rem 0.5rem;
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
    z-index: 20;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
}

.bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.85rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    font-family: var(--font);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
}

.bnav-item svg {
    transition: all var(--transition-fast);
}

.bnav-item:hover {
    color: var(--gray-700);
}

.bnav-item.active {
    color: var(--black);
}
.bnav-item.active svg {
    transform: scale(1.1);
}
.bnav-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2.5px;
    background: var(--black);
    border-radius: 0 0 3px 3px;
}

/* ── Dashboard adjustments ───────────────────────── */
.dash-main {
    flex: 1;
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 1rem;
    overflow-y: auto;
}

.dash-section {
    margin-bottom: 1.5rem;
}

.dash-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gray-400);
    margin-bottom: 0.65rem;
}

/* ── Animations ──────────────────────────────────── */
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════
   CHAT SCREEN
   ══════════════════════════════════════════════════ */
#chat-screen {
    flex-direction: row;
}

/* Sidebar */
.chat-sidebar {
    width: 260px;
    min-width: 260px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-right: 1px solid var(--gray-100);
    padding: 1.5rem;
    transition: transform var(--transition-base);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.sidebar-header h2 {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.sidebar-mode {
    margin-bottom: 1.5rem;
}

.mode-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    background: var(--black);
    color: var(--white);
}

.mode-badge-sm {
    font-size: 0.55rem;
    padding: 0.22rem 0.55rem;
}

.sidebar-schedule {
    flex: 1;
}
.sidebar-schedule h4 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray-400);
    margin-bottom: 0.75rem;
}

.schedule-mini {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.5;
}
.schedule-mini strong {
    color: var(--black);
}

.sidebar-actions {
    padding-top: 1rem;
    border-top: 1px solid var(--gray-100);
}

/* Chat Main Area */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    background: var(--gray-50);
}

.chat-topbar {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 10;
}
.chat-topbar h2 {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Messages container */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    scroll-behavior: smooth;
}

.message {
    max-width: 700px;
    display: flex;
    gap: 0.75rem;
    animation: fadeSlideUp 0.3s ease;
}
.message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.message.bot {
    align-self: flex-start;
}

.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.message.bot .msg-avatar {
    background: var(--black);
    color: var(--white);
}
.message.user .msg-avatar {
    background: var(--gray-200);
    color: var(--gray-700);
}

.msg-bubble {
    padding: 0.8rem 1.1rem;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    line-height: 1.65;
    word-break: break-word;
}
.message.bot .msg-bubble {
    background: var(--white);
    color: var(--gray-900);
    border: 1px solid var(--gray-100);
    border-bottom-left-radius: 4px;
}
.message.user .msg-bubble {
    background: var(--black);
    color: var(--white);
    border-bottom-right-radius: 4px;
}

.msg-bubble p {
    margin-bottom: 0.5rem;
}
.msg-bubble p:last-child {
    margin-bottom: 0;
}
.msg-bubble strong {
    font-weight: 700;
}
.msg-bubble ul, .msg-bubble ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}
.msg-bubble li {
    margin-bottom: 0.25rem;
}
.msg-bubble code {
    background: rgba(0,0,0,0.05);
    padding: 0.12rem 0.35rem;
    border-radius: 4px;
    font-size: 0.82rem;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 0.6rem 0;
}
.typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gray-400);
    animation: bounce-dot 1.4s infinite both;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.32s; }

/* Input Area */
.chat-input-area {
    padding: 0.85rem 2rem 1.25rem;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}

.chat-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 0.3rem 0.5rem 0.3rem 1.1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chat-form:focus-within {
    border-color: var(--gray-400);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.03);
}

.chat-form input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 0.9rem;
    color: var(--gray-900);
    outline: none;
    padding: 0.5rem 0;
}
.chat-form input::placeholder {
    color: var(--gray-400);
}

.btn-send {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.btn-send:hover:not(:disabled) {
    background: var(--gray-800);
    transform: scale(1.05);
}
.btn-send:disabled {
    background: var(--gray-300);
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════
   MEETING SCREEN — Redesigned
   ══════════════════════════════════════════════════ */
#meeting-screen {
    flex-direction: column;
    background: var(--white);
    overflow: hidden;
}

.meeting-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

.meeting-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    flex-shrink: 0;
    background: var(--white);
}

.meeting-header-title h1 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--black);
    line-height: 1.2;
}

.meeting-header-title p {
    font-size: 0.62rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.meeting-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.meeting-calendly {
    width: 100%;
    max-width: 800px;
    height: 100%;
    min-height: 600px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-md);
}

@media (max-width: 480px) {
    .meeting-header {
        padding: 0.7rem 0.85rem;
    }
    .meeting-header-title h1 {
        font-size: 0.95rem;
    }
    .meeting-body {
        padding: 0.5rem;
    }
    .meeting-calendly {
        border-radius: var(--radius-sm);
        min-height: 500px;
    }
}

/* ══════════════════════════════════════════════════
   TEAM TASKS SCREEN — Redesigned
/* ══════════════════════════════════════════════════
   BOARD SCREENS (Standort-Board & Leiter-Bereich)
   ══════════════════════════════════════════════════ */
#board-screen,
#leader-screen {
    flex-direction: column;
    background: var(--gray-50);
    overflow: hidden;
}

.board-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
    gap: 0.75rem;
}

.board-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.board-header-left .btn-ghost {
    flex-shrink: 0;
}

.board-header-title {
    min-width: 0;
}

.board-header-title h1 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--black);
    line-height: 1.2;
    white-space: nowrap;
}

.board-header-sub {
    font-size: 0.62rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-header--leader {
    border-bottom-color: rgba(139, 92, 246, 0.15);
}

/* Board Form */
.board-form-panel {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin: 1rem 0 0;
    flex-shrink: 0;
    animation: slideDown 0.3s var(--ease-out);
}

.board-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.85rem;
    align-items: end;
}

.board-date-fields .form-row {
    display: flex;
    gap: 0.5rem;
}

.board-date-fields .form-row input {
    flex: 1;
}

/* Board Filter */
.board-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 0;
    flex-shrink: 0;
}

/* Board List */
.board-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 2rem;
}

/* Board Entry Card */
.board-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    transition: all var(--transition-fast);
}

.board-entry:hover {
    border-color: var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.board-entry--done {
    opacity: 0.55;
}

.board-entry--done .board-entry-title {
    text-decoration: line-through;
    color: var(--gray-400);
}

.board-entry--ack {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.03);
}

.board-entry--ack .board-entry-title {
    color: var(--accent);
}

/* Type Icon */
.board-type-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.board-type-icon--task { background: rgba(245, 158, 11, 0.1); }
.board-type-icon--note { background: rgba(59, 130, 246, 0.1); }
.board-type-icon--meeting { background: rgba(16, 185, 129, 0.1); }

/* Entry Content */
.board-entry-body {
    flex: 1;
    min-width: 0;
}

.board-entry-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.35;
}

.board-entry-desc {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.45;
    margin-top: 0.15rem;
}

.board-entry-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.board-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray-400);
    padding: 0.15rem 0.45rem;
    background: var(--gray-50);
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-100);
}

.board-meta-badge svg {
    width: 11px;
    height: 11px;
}

.board-meta-badge--date {
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.05);
}

/* Entry Actions */
.board-entry-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.board-entry:hover .board-entry-actions {
    opacity: 1;
}

/* ── Leader Auth Overlay ─────────────────────────────── */
.leader-auth-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
    padding: 1.5rem;
}

.leader-auth-overlay.hidden {
    display: none;
}

.leader-auth-card {
    text-align: center;
    max-width: 340px;
    width: 100%;
}

.leader-auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-sm);
    background: rgba(31, 58, 46, 0.1);
    color: var(--svt-green, var(--black));
    margin-bottom: 0.75rem;
}

.leader-auth-icon svg {
    width: 1.55rem;
    height: 1.55rem;
}

.leader-auth-card h2 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 0.35rem;
    color: var(--black);
}

.leader-auth-card > p {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-bottom: 1.25rem;
}

.leader-auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.leader-auth-form input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font);
    font-size: 0.88rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--black);
    text-align: center;
    letter-spacing: 2px;
    outline: none;
    transition: border-color var(--transition-fast);
}

.leader-auth-form input:focus {
    border-color: var(--black);
}

.leader-board-content.hidden {
    display: none !important;
}

   ══════════════════════════════════════════════════ */
#tasks-screen,
#reports-screen {
    flex-direction: column;
    background: var(--gray-50);
    overflow: hidden;
}

.tasks-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.reports-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 6rem;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

/* ── Tasks Header ────────────────────────────────── */
.tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
    gap: 0.75rem;
}

.tasks-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.tasks-header-left .btn-ghost {
    flex-shrink: 0;
}

.tasks-header-title {
    min-width: 0;
}

.tasks-header-title h1 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--black);
    line-height: 1.2;
    white-space: nowrap;
}

.tasks-header-sub {
    font-size: 0.62rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Stats Bar ───────────────────────────────────── */
.tasks-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0;
    flex-shrink: 0;
}

.stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.85rem;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    min-width: 0;
    flex: 0 0 auto;
}

.stat-chip--open {
    border-color: rgba(59,130,246,0.15);
    background: rgba(59,130,246,0.04);
}

.stat-chip--ack {
    border-color: rgba(245, 158, 11, 0.15);
    background: rgba(245, 158, 11, 0.04);
}

.stat-chip--done {
    border-color: rgba(34,197,94,0.15);
    background: rgba(34,197,94,0.04);
}

.stat-number {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--black);
    line-height: 1;
}

.stat-chip--open .stat-number { color: var(--accent); }
.stat-chip--ack .stat-number { color: rgba(245, 158, 11, 1); }
.stat-chip--done .stat-number { color: var(--success); }

.stat-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-400);
    font-weight: 700;
    margin-top: 0.15rem;
    white-space: nowrap;
}

.stat-progress {
    flex: 1;
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    min-width: 40px;
}

.stat-progress-bar {
    height: 100%;
    background: var(--success);
    border-radius: var(--radius-full);
    transition: width 0.6s var(--ease-out);
}

/* ── Task Form Panel ─────────────────────────────── */
.task-form-panel {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
    animation: slideDown 0.3s var(--ease-out);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.task-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 0.85rem;
    align-items: end;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-field label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray-400);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font-family: var(--font);
    font-size: 0.82rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-xs);
    background: var(--gray-50);
    color: var(--black);
    transition: border-color var(--transition-fast);
    outline: none;
    -webkit-appearance: none;
}

.form-field input:focus,
.form-field select:focus {
    border-color: var(--black);
    background: var(--white);
}

.form-field input::placeholder {
    color: var(--gray-400);
}

.form-field--action {
    align-self: end;
}

.form-field--action .btn {
    height: 100%;
    min-height: 38px;
}

/* ── Filter Tabs ─────────────────────────────────── */
.task-filter-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0 1rem;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.task-filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    color: var(--gray-500);
    letter-spacing: 0.3px;
}

.filter-chip:hover {
    border-color: var(--gray-300);
    color: var(--black);
}

.filter-chip.active {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.filter-chip.active .filter-dot {
    background: var(--white) !important;
}

.filter-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Task List ───────────────────────────────────── */
.task-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 2rem;
    scroll-behavior: smooth;
}

.task-list::-webkit-scrollbar {
    width: 4px;
}
.task-list::-webkit-scrollbar-track {
    background: transparent;
}
.task-list::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
}

/* ── Subteam Group ───────────────────────────────── */
.task-group {
    margin-bottom: 0.75rem;
}

.task-group-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0;
    cursor: pointer;
    user-select: none;
}

.task-group-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-group-name {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gray-700);
    flex: 1;
}

.task-group-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
}

.task-group-chevron {
    width: 16px;
    height: 16px;
    color: var(--gray-400);
    transition: transform var(--transition-fast);
}

.task-group.collapsed .task-group-chevron {
    transform: rotate(-90deg);
}

.task-group.collapsed .task-group-items {
    display: none;
}

.task-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: 1rem;
}

/* ── Subteam Members ─────────────────────────────── */
.task-group-members {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0 0.5rem 1rem;
}

.task-group.collapsed .task-group-members {
    display: none;
}

.member-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    padding: 0.15rem 0.5rem;
    line-height: 1.4;
    white-space: nowrap;
}

.member-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
    border-radius: 50%;
    transition: all var(--transition-fast);
    line-height: 1;
}

.member-remove:hover {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.member-add-row {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.member-input {
    width: 80px;
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    font-family: var(--font);
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--gray-600);
    outline: none;
    transition: border-color var(--transition-fast);
}

.member-input:focus {
    border-color: var(--gray-400);
    border-style: solid;
    width: 100px;
}

.member-input::placeholder {
    color: var(--gray-300);
}

.member-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--gray-100);
    border: none;
    border-radius: 50%;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0;
    transition: all var(--transition-fast);
    line-height: 1;
}

.member-add-btn:hover {
    background: var(--black);
    color: var(--white);
}

/* ── Individual Task Item ────────────────────────── */
.task-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    animation: fadeSlideUp 0.35s var(--ease-out);
}

.task-card:hover {
    border-color: var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.task-card--done {
    opacity: 0.55;
}

.task-card--done .task-card-title {
    text-decoration: line-through;
    color: var(--gray-400);
}

.task-card--ack {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.03);
}

.task-card--ack .task-card-title {
    color: var(--accent);
}

/* Checkbox */
.task-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    margin-top: 1px;
    background: var(--white);
}

.task-check:hover {
    border-color: var(--success);
    background: var(--success-soft);
}

.task-check--done {
    background: var(--success);
    border-color: var(--success);
}

.task-check--done:hover {
    background: var(--gray-300);
    border-color: var(--gray-300);
}

.task-check--ack {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.8);
    color: rgba(245, 158, 11, 1);
}

.task-check--ack:hover {
    background: rgba(245, 158, 11, 0.25);
}

.task-check svg {
    width: 12px;
    height: 12px;
    color: var(--white);
}

/* Deadline Badges */
.deadline-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.deadline-badge svg {
    width: 10px;
    height: 10px;
}

.deadline-ok {
    background: var(--success-soft);
    color: var(--success);
}

.deadline-warn {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.deadline-missed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.task-timestamp {
    display: block;
    font-size: 0.65rem;
    color: var(--gray-400);
    margin-top: 0.25rem;
}

/* Task Content */
.task-card-body {
    flex: 1;
    min-width: 0;
}

.task-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.35;
}

.task-card-desc {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.45;
    margin-top: 0.2rem;
}

.task-card-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.task-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-400);
}

.task-meta-tag svg {
    width: 12px;
    height: 12px;
}

/* Task Actions */
.task-card-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.task-card:hover .task-card-actions {
    opacity: 1;
}

.task-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--gray-400);
}

.task-action-btn:hover {
    background: var(--gray-100);
    color: var(--danger);
}

.task-action-btn svg {
    width: 14px;
    height: 14px;
}

/* ── Empty State ─────────────────────────────────── */
.task-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-sm);
    background: rgba(31, 58, 46, 0.1);
    color: var(--svt-green, var(--gray-500));
    margin-bottom: 0.75rem;
    opacity: 1;
}

.empty-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.task-empty-state p {
    font-size: 0.82rem;
    color: var(--gray-400);
    font-weight: 500;
}

/* ══════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════ */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes bounce-dot {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

/* ── Tablet ───────────────────────────────────────── */
@media (max-width: 820px) {
    .mode-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mode-grid--compact {
        grid-template-columns: repeat(2, 1fr);
    }
    .schedule-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-main {
        padding: 1.25rem 1rem 1rem;
    }

    /* Task Form → stacked */
    .task-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .form-field--action {
        grid-column: span 2;
    }
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Chat Sidebar → hidden off-screen */
    .chat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
    }
    .chat-sidebar.open {
        transform: translateX(0);
    }

    /* Chat Topbar → visible */
    .chat-topbar {
        display: flex;
    }

    /* Chat messages → tighter spacing */
    .chat-messages {
        padding: 0.75rem;
    }
    .chat-input-area {
        padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
    }

    /* Messages → full width on mobile */
    .message {
        max-width: 92%;
    }
    .msg-bubble {
        padding: 0.7rem 0.9rem;
        font-size: 0.86rem;
    }
    .msg-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    /* ── Board Mobile ─────────────────────────────── */
    .board-page {
        padding: 0 0.85rem;
    }
    .board-header {
        gap: 0.5rem;
        padding: 0.85rem 0;
    }
    .board-header-title h1 {
        font-size: 1.05rem;
    }
    .board-form-grid {
        grid-template-columns: 1fr;
    }
    .board-form-panel {
        padding: 1rem;
    }
    .board-entry-actions {
        opacity: 1;
    }
    .board-entry {
        padding: 0.75rem;
        gap: 0.65rem;
    }
    .board-type-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    /* ── Tasks Mobile ─────────────────────────────── */
    .tasks-page {
        padding: 0 0.85rem;
    }

    .tasks-header {
        gap: 0.5rem;
        padding: 0.85rem 0;
        flex-wrap: nowrap;
    }

    .tasks-header-left {
        gap: 0.35rem;
    }

    .tasks-header-left .btn-ghost {
        padding: 0.35rem;
    }

    .tasks-header-title h1 {
        font-size: 1.05rem;
        letter-spacing: 0;
    }

    .tasks-header-sub {
        font-size: 0.56rem;
        letter-spacing: 0.8px;
    }

    #toggle-task-form-btn {
        padding: 0.45rem 0.75rem;
        font-size: 0.65rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .tasks-stats {
        gap: 0.35rem;
        padding: 0.65rem 0;
    }

    .stat-chip {
        padding: 0.4rem 0.6rem;
        flex: 1;
        min-width: 0;
    }

    .stat-number {
        font-size: 1.05rem;
    }

    .stat-label {
        font-size: 0.5rem;
        letter-spacing: 0.5px;
    }

    .stat-progress {
        display: none;
    }

    .task-filter-bar {
        padding: 0.35rem 0 0.75rem;
        gap: 0.3rem;
    }

    .filter-chip {
        padding: 0.35rem 0.7rem;
        font-size: 0.65rem;
    }

    .task-form-grid {
        grid-template-columns: 1fr;
    }

    .form-field--action {
        grid-column: span 1;
    }

    .task-form-panel {
        padding: 1rem;
    }

    .task-group-header {
        padding: 0.5rem 0;
    }

    .task-group-name {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }

    .task-group-items {
        padding-left: 0.35rem;
    }

    .task-card {
        padding: 0.75rem;
        gap: 0.65rem;
    }

    .task-card-title {
        font-size: 0.84rem;
    }

    .task-card-desc {
        font-size: 0.74rem;
    }

    .task-card-meta {
        margin-top: 0.35rem;
    }

    .task-check {
        width: 20px;
        height: 20px;
    }

    /* Show task actions always on mobile */
    .task-card-actions {
        opacity: 1;
    }

    .task-empty-state {
        padding: 3rem 1.5rem;
    }

    .empty-icon {
        font-size: 2rem;
    }
}

/* ── Small Mobile (≤480px) ────────────────────────── */
@media (max-width: 480px) {
    /* Dashboard → compact header */
    .dash-header {
        padding: 0.65rem 0.85rem;
    }
    .dash-brand h1 {
        font-size: 0.82rem;
        letter-spacing: 2px;
    }
    .dash-icon {
        font-size: 1.15rem;
    }

    /* Dashboard → compact main */
    .dash-main {
        padding: 0.85rem 0.85rem 0.5rem;
    }

    /* Mode Cards → stacked */
    .mode-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .mode-card {
        flex-direction: row;
        align-items: center;
        padding: 0.85rem 1rem;
        gap: 0.85rem;
        border-radius: var(--radius-sm);
    }
    .mode-card:hover {
        transform: none;
    }
    .mode-card:active {
        transform: scale(0.98);
        border-color: var(--black);
    }
    .mode-icon {
        font-size: 1.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
        width: 1.5rem;
    }
    .mode-card h2 {
        font-size: 0.78rem;
        letter-spacing: 1.5px;
        margin-bottom: 0.1rem;
    }
    .mode-card p {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mode-tag {
        font-size: 0.52rem;
        padding: 0.15rem 0.4rem;
        display: inline-flex;
    }

    /* Compact cards on mobile → 2-column stays */
    .mode-grid--compact {
        grid-template-columns: repeat(2, 1fr);
    }
    .mode-card--compact {
        padding: 0.65rem 0.75rem;
    }
    .mode-card--compact h2 {
        font-size: 0.58rem;
    }

    /* Today Bar → compact */
    .today-bar-main {
        padding: 0.7rem 0.85rem;
    }
    .today-day {
        font-size: 0.75rem;
    }
    .today-info {
        font-size: 0.7rem;
    }

    /* Schedule Grid → 2 col on mobile */
    .schedule-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    .schedule-day {
        font-size: 0.82rem;
    }
    .schedule-label {
        font-size: 0.6rem;
    }
    .schedule-time {
        font-size: 0.68rem;
    }

    /* Bottom Nav → slightly smaller */
    .bnav-item {
        padding: 0.35rem 0.5rem;
        font-size: 0.52rem;
    }
    .bnav-item svg {
        width: 20px;
        height: 20px;
    }

    /* Chat */
    .chat-topbar {
        padding: 0.5rem 0.5rem 0.5rem 0.35rem;
        gap: 0.35rem;
    }
    .chat-topbar h2 {
        font-size: 0.78rem;
        letter-spacing: 1.5px;
    }
    .mode-badge-sm {
        font-size: 0.52rem;
        padding: 0.18rem 0.45rem;
    }
    .chat-form {
        border-radius: var(--radius-md);
        padding: 0.25rem 0.35rem 0.25rem 0.85rem;
    }
    .chat-form input {
        font-size: 0.86rem;
        padding: 0.4rem 0;
    }
    .btn-send {
        width: 34px;
        height: 34px;
    }
    .btn-send svg {
        width: 15px;
        height: 15px;
    }
    .message {
        max-width: 88%;
        gap: 0.5rem;
    }
    .msg-bubble {
        padding: 0.6rem 0.8rem;
        font-size: 0.84rem;
        line-height: 1.55;
    }
    .msg-avatar {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }

    /* Login */
    .login-container {
        padding: 1.5rem;
    }
    .brand-icon {
        font-size: 2.5rem;
    }
    .login-brand h1 {
        font-size: 1.6rem;
        letter-spacing: 3px;
    }
    .brand-subtitle {
        font-size: 0.7rem;
    }

    #logout-btn {
        padding: 0.5rem;
    }
    #logout-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Tasks on small mobile */
    .tasks-page {
        padding: 0 0.75rem;
    }

    .tasks-header {
        padding: 0.75rem 0;
    }

    .tasks-header-title h1 {
        font-size: 0.95rem;
    }

    .tasks-header-sub {
        font-size: 0.52rem;
    }

    #toggle-task-form-btn {
        padding: 0.4rem 0.65rem;
        font-size: 0.6rem;
    }

    #toggle-task-form-btn svg {
        width: 13px;
        height: 13px;
    }

    .stat-chip {
        padding: 0.35rem 0.5rem;
    }

    .stat-number {
        font-size: 0.95rem;
    }

    .filter-chip {
        padding: 0.3rem 0.55rem;
        font-size: 0.6rem;
    }

    .filter-dot {
        width: 6px;
        height: 6px;
    }

    .task-card {
        padding: 0.65rem 0.75rem;
        gap: 0.55rem;
    }

    .task-card-title {
        font-size: 0.82rem;
    }

    .task-card-desc {
        font-size: 0.72rem;
    }

    .task-check {
        width: 18px;
        height: 18px;
        border-radius: 5px;
    }

    .task-check svg {
        width: 10px;
        height: 10px;
    }
}

/* ── Sidebar Overlay (mobile) ─────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

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

/* ── Touch Feedback ──────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .mode-card:hover,
    .dash-priority-action:hover {
        border-color: var(--gray-200);
        box-shadow: none;
        transform: none;
    }
    .mode-card:active,
    .dash-priority-action:active {
        border-color: var(--black);
        background: var(--gray-50);
        transform: scale(0.98);
    }
    .dash-priority-action--primary:active {
        background: var(--svt-green);
    }
    .btn:active {
        transform: scale(0.97);
    }
    .btn-ghost:active {
        background: var(--gray-100);
    }
    .task-card:active {
        background: var(--gray-50);
    }
}

/* Scrollbar */
.chat-messages::-webkit-scrollbar {
    width: 4px;
}
.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 100px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ══════════════════════════════════════════════════
   LOADING SPINNER
   ══════════════════════════════════════════════════ */
.btn.loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.btn-primary:hover.loading::after {
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: var(--black);
}

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

/* ── Glass effect utility ────────────────────────── */
.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ══════════════════════════════════════════════════
   RULES & PENALTIES SCREEN
   ══════════════════════════════════════════════════ */
.rules-content {
    background: var(--gray-50);
    padding: 1.5rem;
    padding-bottom: 5rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.rules-section {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.rules-section h3 {
    font-size: 1.1rem;
    color: var(--black);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.rules-list li {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.5;
    position: relative;
    padding-left: 1.5rem;
}

.rules-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 700;
}

.rules-list li strong {
    color: var(--gray-800);
}

/* Penalties */
.penalties-section {
    margin-top: 2rem;
}

.penalties-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.penalties-header h3 {
    font-size: 1.4rem;
    color: var(--danger);
    margin-bottom: 0.25rem;
}

.penalties-header p {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-style: italic;
}

.penalty-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

.penalty-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.penalty-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.penalty-info {
    flex: 1 1 200px;
}

.penalty-info h4 {
    font-size: 0.95rem;
    color: var(--black);
    margin: 0 0 0.25rem 0;
}

.penalty-info p {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.4;
}

.penalty-amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--white);
    background: var(--gray-800);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.penalty-card--medium .penalty-amount {
    background: #f59e0b; /* Orange */
}

.penalty-card--high .penalty-amount {
    background: #ef4444; /* Red */
}

.penalty-card--severe .penalty-amount {
    background: #991b1b; /* Dark Red */
}

@media (min-width: 768px) {
    .rules-content {
        padding: 2rem;
    }
    .penalty-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* ══════════════════════════════════════════════════
   ATTENDANCE SCREEN
   ══════════════════════════════════════════════════ */
.att-content {
    background: var(--gray-50);
    padding: 1rem;
    padding-bottom: 5rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.att-form-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

.att-select, .att-date-input, .att-textarea, .att-name-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

.att-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.att-status-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 2px solid var(--gray-100);
    border-radius: var(--radius-md);
    background: var(--white);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.att-status-icon {
    font-size: 1.5rem;
}

.att-status-btn.selected {
    border-color: currentColor;
    background: var(--gray-50);
}

.att-status--present.selected { color: var(--success); border-color: var(--success); }
.att-status--online.selected { color: #f59e0b; border-color: #f59e0b; }
.att-status--absent.selected { color: var(--danger); border-color: var(--danger); }

.att-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.att-history-header h3 {
    font-size: 1.1rem;
    color: var(--black);
}

.att-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.att-record-card {
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid var(--gray-300);
    box-shadow: var(--shadow-sm);
}

.att-record-card--present { border-left-color: var(--success); }
.att-record-card--online { border-left-color: #f59e0b; }
.att-record-card--absent { border-left-color: var(--danger); }

.att-record-info h4 {
    font-size: 0.95rem;
    margin: 0;
    color: var(--black);
}

.att-record-info p {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 2px 0 0 0;
}

.att-record-reason {
    margin-top: 4px;
    padding: 4px 8px;
    background: var(--gray-50);
    border-radius: 4px;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--gray-600);
}

.att-record-status-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
}

.status-tag--present { background: var(--success-soft); color: var(--success); }
.status-tag--online { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.status-tag--absent { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

/* ══════════════════════════════════════════════════
   APPLE MUSIC STYLE AUDIO PLAYER
   ══════════════════════════════════════════════════ */
.apple-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    margin-top: 0.5rem;
}

.apple-player-cover {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff2a5f, #ff7b54);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(255, 42, 95, 0.3);
}

.apple-player-cover svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.apple-player-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.apple-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-100);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    color: var(--black);
}

.apple-play-btn:hover {
    background: var(--gray-200);
    transform: scale(1.05);
}

.apple-play-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Specific optical adjustment for the play icon */
.apple-play-btn svg.icon-play {
    margin-left: 2px;
}

.apple-player-progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.apple-progress-bar {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 4px 0;
}

.apple-progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff2a5f;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}

.apple-progress-bar::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.apple-time-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE DASHBOARD (Override-Block)
   Scoped auf #dashboard-screen + neue .dash-list-Klassen.
   Ändert nichts an anderen Screens.
   ══════════════════════════════════════════════════ */

#dashboard-screen {
    background: var(--gray-50);
    --ios-accent: #007aff;
    --ios-tint-blue: rgba(0, 122, 255, 0.1);
    --ios-tint-orange: rgba(255, 149, 0, 0.12);
    --ios-tint-green: rgba(52, 199, 89, 0.12);
    --ios-tint-red: rgba(255, 59, 48, 0.12);
    --ios-tint-purple: rgba(175, 82, 222, 0.12);
    --ios-tint-gray: rgba(142, 142, 147, 0.12);
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Header ─────────────────────────────────────── */
#dashboard-screen .dash-header {
    padding: 1.25rem 1.25rem 0.5rem;
    background: transparent;
    border-bottom: none;
}

#dashboard-screen .dash-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

#dashboard-screen .dash-icon {
    display: none;
}

#dashboard-screen .dash-brand h1 {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--gray-900);
}

#dashboard-screen .dash-brand .dash-greeting-sub {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 400;
    letter-spacing: 0;
}

#dashboard-screen #logout-btn {
    color: var(--gray-500);
}

/* ── Today / Live-Activity ──────────────────────── */
#dashboard-screen .today-bar {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#dashboard-screen .today-bar:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#dashboard-screen .today-bar-main {
    padding: 0.95rem 1.15rem;
}

#dashboard-screen .today-day {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ios-accent);
}

#dashboard-screen .today-info {
    font-size: 0.92rem;
    color: var(--gray-900);
    font-weight: 400;
}

#dashboard-screen .today-bar-left {
    gap: 0.55rem;
}

#dashboard-screen .today-dot {
    width: 7px;
    height: 7px;
    background: #34c759;
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4);
    animation: ios-pulse 2.4s var(--ease-out) infinite;
}

#dashboard-screen .today-dot.no-event {
    background: var(--gray-300);
    box-shadow: none;
    animation: none;
}

@keyframes ios-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

/* ── Section Titles ─────────────────────────────── */
#dashboard-screen .dash-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    margin: 0 0.4rem 0.5rem;
}

/* ── Mode Cards (Operativ-Grid) ─────────────────── */
#dashboard-screen .mode-card {
    border: none;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.18s var(--ios-spring), box-shadow var(--transition-fast);
    padding: 1.25rem 1.15rem;
}

#dashboard-screen .mode-card::before {
    display: none;
}

#dashboard-screen .mode-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border-color: transparent;
}

#dashboard-screen .mode-card:active {
    transform: scale(0.97);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#dashboard-screen .mode-card--primary {
    background: var(--white);
}

#dashboard-screen .mode-card--primary:hover {
    border-color: transparent;
}

#dashboard-screen .mode-icon {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ios-tint-blue);
    border-radius: var(--radius-sm);
    margin-bottom: 0.85rem;
}

/* Tints per category */
#dashboard-screen #mode-attendance .mode-icon { background: var(--ios-tint-orange); }
#dashboard-screen #mode-tasks      .mode-icon { background: var(--ios-tint-blue); }
#dashboard-screen #mode-board      .mode-icon { background: var(--ios-tint-purple); }
#dashboard-screen #mode-reports    .mode-icon { background: var(--ios-tint-green); }

#dashboard-screen .mode-card h2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--gray-900);
    margin-bottom: 0.2rem;
}

#dashboard-screen .mode-card p {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin-bottom: 0.6rem;
}

#dashboard-screen .mode-tag {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ios-accent);
    background: var(--ios-tint-blue);
    border: none;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
}

/* Live Badge auf Tasks-Karte */
#dashboard-screen .mode-tag--live {
    background: #ff3b30;
    color: white;
}

/* ── Settings-Liste (Support / Organisation) ────── */
.dash-list {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.dash-list-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    background: var(--white);
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: background var(--transition-fast);
    position: relative;
}

.dash-list-item + .dash-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 3.5rem;
    right: 0;
    height: 0.5px;
    background: var(--gray-200);
}

.dash-list-item:hover {
    background: var(--gray-50);
}

.dash-list-item:active {
    background: var(--gray-100);
}

.dash-list-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.dash-list-label {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.dash-list-chevron {
    color: var(--gray-300);
    flex-shrink: 0;
    display: flex;
}

/* Tints für Listen-Icons */
.dash-list-item[data-mode="live"]       .dash-list-icon { background: var(--ios-tint-red); }
.dash-list-item[data-mode="onboarding"] .dash-list-icon { background: var(--ios-tint-blue); }
.dash-list-item[data-mode="training"]   .dash-list-icon { background: var(--ios-tint-purple); }
.dash-list-item[data-mode="rules"]      .dash-list-icon { background: var(--ios-tint-orange); }
.dash-list-item[data-mode="archive"]    .dash-list-icon { background: var(--ios-tint-gray); }
.dash-list-item[data-mode="meeting"]    .dash-list-icon { background: var(--ios-tint-green); }
.dash-list-item[data-mode="leader"]     .dash-list-icon { background: var(--ios-tint-purple); }

/* ── Push-Toggle (iOS-Style) ────────────────────── */
.dash-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dash-toggle-row .dash-list-icon {
    background: var(--ios-tint-red);
}

.dash-toggle-label {
    flex: 1;
    font-size: 0.95rem;
    color: var(--gray-900);
}

.dash-toggle-label small {
    display: block;
    font-size: 0.78rem;
    color: var(--gray-500);
    margin-top: 0.1rem;
}

.dash-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 51px;
    height: 31px;
    background: var(--gray-200);
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s var(--ease-out);
    flex-shrink: 0;
    border: none;
    margin: 0;
}

.dash-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s var(--ios-spring);
}

.dash-toggle:checked {
    background: #34c759;
}

.dash-toggle:checked::after {
    transform: translateX(20px);
}

.dash-toggle:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Bottom-Nav ─────────────────────────────────── */
#dashboard-screen ~ .bottom-nav,
.bottom-nav {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

.bnav-item.active {
    color: var(--ios-accent);
}

.bnav-item.active svg {
    transform: scale(1);
    stroke-width: 2;
}

.bnav-item.active::after {
    display: none;
}

.bnav-item:active {
    transform: scale(0.92);
    transition: transform 0.12s var(--ease-out);
}

/* ── Dash-Main: spacing + iOS-feel scrolling ────── */
#dashboard-screen .dash-main {
    padding: 0.5rem 1rem 1.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

#dashboard-screen .dash-section {
    margin-bottom: 1.25rem;
}

#dashboard-screen .mode-grid {
    gap: 0.7rem;
    margin-bottom: 0;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    #dashboard-screen .dash-brand h1 { font-size: 1.5rem; }
    #dashboard-screen .mode-card { padding: 1.05rem 1rem; }
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE TASKS-SCREEN (Override-Block)
   Scoped auf #tasks-screen. Andere Screens unverändert.
   ══════════════════════════════════════════════════ */

#tasks-screen {
    background: var(--gray-50);
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
    --ios-orange: #ff9500;
    --ios-orange-soft: rgba(255, 149, 0, 0.12);
    --ios-green: #34c759;
    --ios-green-soft: rgba(52, 199, 89, 0.12);
    --ios-red: #ff3b30;
    --ios-red-soft: rgba(255, 59, 48, 0.12);
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Page-Container ─────────────────────────────── */
#tasks-screen .tasks-page {
    padding: 0 1rem;
}

/* ── Header ─────────────────────────────────────── */
#tasks-screen .tasks-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 0.95rem 0 0.85rem;
}

#tasks-screen .tasks-header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--gray-900);
}

#tasks-screen .tasks-header-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 0.1rem;
}

#tasks-screen #tasks-back-btn {
    color: var(--ios-accent);
    padding: 0.4rem;
    margin-left: -0.4rem;
}

#tasks-screen #toggle-task-form-btn {
    background: var(--ios-accent);
    border-radius: var(--radius-full);
    padding: 0.5rem 0.95rem;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: -0.005em;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2);
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
}

#tasks-screen #toggle-task-form-btn:hover {
    background: #0066d6;
}

#tasks-screen #toggle-task-form-btn:active {
    transform: scale(0.96);
}

/* ── Stats: kompakte Card mit Bar oben ──────────── */
#tasks-screen .tasks-stats {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 0.85rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

#tasks-screen .stat-chip {
    flex-direction: column;
    align-items: flex-start;
    background: transparent;
    border: none;
    padding: 0.15rem 0.35rem;
    border-radius: 0;
    border-right: 0.5px solid var(--gray-200);
    box-shadow: none;
}

#tasks-screen .stat-chip:nth-child(3) {
    border-right: none;
}

/* Hide "Gesamt" stat — implizit aus offen+vermerkt+erledigt */
#tasks-screen .stat-chip:first-child {
    display: none;
}

#tasks-screen .stat-number {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

#tasks-screen .stat-chip--open .stat-number  { color: var(--ios-accent); }
#tasks-screen .stat-chip--ack .stat-number   { color: var(--ios-orange); }
#tasks-screen .stat-chip--done .stat-number  { color: var(--ios-green); }

#tasks-screen .stat-label {
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-500);
    font-weight: 400;
    margin-top: 0.2rem;
}

#tasks-screen .stat-progress {
    height: 6px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    grid-column: 1 / -1;
    margin-top: 0.5rem;
}

#tasks-screen .stat-progress-bar {
    background: var(--ios-green);
    border-radius: var(--radius-full);
}

/* ── Form-Panel ─────────────────────────────────── */
#tasks-screen .task-form-panel {
    background: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.15rem;
    margin-bottom: 0.85rem;
}

#tasks-screen .form-field label {
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-700);
    font-weight: 500;
}

#tasks-screen .form-field input,
#tasks-screen .form-field select,
#tasks-screen .form-field textarea {
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
}

#tasks-screen .form-field input:focus,
#tasks-screen .form-field select:focus {
    border-color: var(--ios-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-accent-soft);
}

#tasks-screen #task-submit-btn {
    background: var(--ios-accent);
    border-radius: var(--radius-md);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2);
    transition: transform 0.18s var(--ios-spring);
}

#tasks-screen #task-submit-btn:active {
    transform: scale(0.97);
}

/* ── Filter-Chips: Pill-Style ───────────────────── */
#tasks-screen .task-filter-bar {
    padding: 0.35rem 0 0.85rem;
    gap: 0.45rem;
}

#tasks-screen .filter-chip {
    background: var(--white);
    border: 0.5px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.45rem 0.95rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s var(--ios-spring), background 0.15s ease;
}

#tasks-screen .filter-chip:hover {
    border-color: var(--gray-300);
}

#tasks-screen .filter-chip:active {
    transform: scale(0.95);
}

#tasks-screen .filter-chip.active {
    background: var(--ios-accent);
    border-color: var(--ios-accent);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
}

/* ── Subteam-Gruppen-Header (iOS-Section-Style) ── */
#tasks-screen .task-group {
    margin-bottom: 1rem;
}

#tasks-screen .task-group-header {
    padding: 0.5rem 0.25rem 0.45rem;
    gap: 0.55rem;
}

#tasks-screen .task-group-name {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.005em;
    color: var(--gray-900);
}

#tasks-screen .task-group-count {
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.18rem 0.55rem;
}

#tasks-screen .task-group-dot {
    width: 8px;
    height: 8px;
}

#tasks-screen .task-group-items {
    padding-left: 0;
    gap: 0.45rem;
}

#tasks-screen .task-group-members {
    padding: 0.3rem 0.25rem 0.55rem;
}

#tasks-screen .member-tag {
    background: var(--white);
    border: 0.5px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.74rem;
    font-weight: 500;
    padding: 0.18rem 0.55rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
}

#tasks-screen .member-input {
    border-color: var(--gray-300);
    color: var(--gray-700);
    font-size: 0.7rem;
}

#tasks-screen .member-input:focus {
    border-color: var(--ios-accent);
    background: var(--white);
}

#tasks-screen .member-add-btn {
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
}

#tasks-screen .member-add-btn:hover {
    background: var(--ios-accent);
    color: white;
}

/* ── Task-Card (iOS-Style) ──────────────────────── */
#tasks-screen .task-card {
    background: var(--white);
    border: 0.5px solid rgba(17, 24, 39, 0.06);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
    gap: 0.75rem;
    padding: 0.9rem 0.95rem;
    transition: transform 0.18s var(--ios-spring), box-shadow 0.15s ease;
}

#tasks-screen .task-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

#tasks-screen .task-card:active {
    transform: scale(0.99);
}

#tasks-screen .task-card--done {
    opacity: 0.72;
    background: var(--gray-50);
}

#tasks-screen .task-card--ack {
    background: var(--white);
    border: none;
    border-left: 3px solid var(--ios-orange);
    border-radius: var(--radius-md);
    padding-left: calc(1rem - 3px);
}

#tasks-screen .task-card--ack .task-card-title {
    color: var(--gray-900);
}

/* Checkbox: iOS-runder Tap-Target */
#tasks-screen .task-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-300);
    transition: all 0.18s var(--ios-spring);
}

#tasks-screen .task-check:hover {
    border-color: var(--ios-green);
    background: var(--ios-green-soft);
    transform: scale(1.05);
}

#tasks-screen .task-check--done {
    background: var(--ios-green);
    border-color: var(--ios-green);
}

#tasks-screen .task-check--ack {
    background: var(--ios-orange-soft);
    border-color: var(--ios-orange);
    color: var(--ios-orange);
}

#tasks-screen .task-check svg {
    width: 14px;
    height: 14px;
}

#tasks-screen .task-check--ack svg {
    color: var(--ios-orange);
}

#tasks-screen .task-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

#tasks-screen .task-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

#tasks-screen .task-card-copy {
    min-width: 0;
}

#tasks-screen .task-card-title {
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--gray-900);
    line-height: 1.25;
}

#tasks-screen .task-status-note {
    color: var(--gray-400);
    font-size: 0.72rem;
    line-height: 1.35;
    margin-top: 0.12rem;
}

#tasks-screen .task-status-pill {
    border-radius: var(--radius-full);
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.34rem 0.58rem;
    white-space: nowrap;
}

#tasks-screen .task-status-pill--open {
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
}

#tasks-screen .task-status-pill--ack {
    background: var(--ios-orange-soft);
    color: var(--ios-orange);
}

#tasks-screen .task-status-pill--done {
    background: var(--ios-green-soft);
    color: var(--ios-green);
}

#tasks-screen .task-card-desc {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.4;
    margin-top: 0;
}

#tasks-screen .task-card-meta {
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0;
}

#tasks-screen .task-meta-tag {
    background: var(--gray-50);
    border: 0.5px solid var(--gray-200);
    border-radius: var(--radius-full);
    gap: 0.26rem;
    padding: 0.23rem 0.55rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-600);
}

#tasks-screen .task-meta-tag svg {
    width: 13px;
    height: 13px;
}

#tasks-screen .task-timestamp {
    font-size: 0.72rem;
    color: var(--gray-400);
    margin-top: 0.4rem;
}

#tasks-screen .task-card-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.08rem;
}

/* Deadline-Badges: subtile iOS-Pills */
#tasks-screen .deadline-badge {
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    padding: 0.22rem 0.65rem;
    margin-top: 0;
}

#tasks-screen .deadline-ok      { background: var(--ios-green-soft);  color: var(--ios-green); }
#tasks-screen .deadline-warn    { background: var(--ios-orange-soft); color: var(--ios-orange); }
#tasks-screen .deadline-missed  { background: var(--ios-red-soft);    color: var(--ios-red); }

#tasks-screen .task-status-action {
    align-items: center;
    background: var(--gray-900);
    border: none;
    border-radius: var(--radius-full);
    color: var(--white);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font);
    font-size: 0.74rem;
    font-weight: 650;
    min-height: 30px;
    padding: 0.35rem 0.72rem;
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
}

#tasks-screen .task-status-action--open {
    background: var(--ios-accent);
}

#tasks-screen .task-status-action--ack {
    background: var(--ios-orange);
}

#tasks-screen .task-status-action--done {
    background: var(--gray-700);
}

#tasks-screen .task-status-action:hover {
    transform: translateY(-1px);
}

#tasks-screen .task-status-action:active {
    transform: scale(0.96);
}

/* Action-Buttons: iOS-System-Look, immer dezent sichtbar auf Mobile */
#tasks-screen .task-card-actions {
    align-self: stretch;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

#tasks-screen .task-card:hover .task-card-actions,
#tasks-screen .task-card:focus-within .task-card-actions {
    opacity: 1;
}

#tasks-screen .task-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--gray-500);
}

#tasks-screen .task-action-btn:hover {
    background: var(--gray-100);
    color: var(--ios-red);
}

#tasks-screen .task-action-btn:active {
    transform: scale(0.92);
}

/* ── Empty State ────────────────────────────────── */
#tasks-screen .task-empty-state {
    background: var(--white);
    border: 0.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-top: 0.5rem;
    padding: 2.75rem 1.25rem;
}

#tasks-screen .task-empty-icon {
    align-items: center;
    background: var(--gray-50);
    border: 0.5px solid var(--gray-200);
    border-radius: 50%;
    color: var(--gray-500);
    display: flex;
    height: 46px;
    justify-content: center;
    margin-bottom: 0.85rem;
    width: 46px;
}

#tasks-screen .task-empty-icon svg {
    height: 22px;
    width: 22px;
}

#tasks-screen .task-empty-state--error .task-empty-icon {
    background: var(--ios-red-soft);
    border-color: rgba(255, 59, 48, 0.18);
    color: var(--ios-red);
}

#tasks-screen .task-empty-icon--loading svg {
    animation: taskEmptyPulse 1s ease-in-out infinite;
}

#tasks-screen .task-empty-state strong {
    color: var(--gray-900);
    display: block;
    font-size: 0.98rem;
    font-weight: 650;
    margin-bottom: 0.25rem;
}

#tasks-screen .task-empty-state p {
    font-size: 0.86rem;
    color: var(--gray-500);
    font-weight: 400;
    max-width: 320px;
}

@keyframes taskEmptyPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1); }
}

/* ── Mobile tweaks ──────────────────────────────── */
@media (max-width: 480px) {
    #tasks-screen .tasks-header-title h1 { font-size: 1.3rem; }
    #tasks-screen .tasks-stats { padding: 0.7rem 0.85rem; }
    #tasks-screen .stat-number { font-size: 1.3rem; }
    #tasks-screen #toggle-task-form-btn { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
    #tasks-screen #toggle-task-form-btn span { display: none; }
    #tasks-screen .task-form-grid { grid-template-columns: 1fr 1fr; }
    #tasks-screen .form-field--action { grid-column: 1 / -1; }
    #tasks-screen .task-card { padding: 0.85rem; }
    #tasks-screen .task-card-head { align-items: flex-start; flex-direction: column; gap: 0.4rem; }
    #tasks-screen .task-status-pill { align-self: flex-start; }
    #tasks-screen .task-status-action { width: 100%; justify-content: center; }
    #tasks-screen .task-card-actions { opacity: 1; }
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE REPORTS-SCREEN (Override-Block)
   Scoped auf #reports-screen. Andere Screens unverändert.
   ══════════════════════════════════════════════════ */

#reports-screen {
    background: var(--gray-50);
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
    --ios-orange: #ff9500;
    --ios-green: #34c759;
    --ios-green-soft: rgba(52, 199, 89, 0.12);
    --ios-red: #ff3b30;
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#reports-screen .tasks-page {
    padding: 0 1rem;
}

/* ── Header (gleicher Stil wie Tasks) ───────────── */
#reports-screen .tasks-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 0.95rem 0 0.85rem;
}

#reports-screen .tasks-header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--gray-900);
}

#reports-screen .tasks-header-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 0.1rem;
}

#reports-screen #reports-back-btn {
    color: var(--ios-accent);
    padding: 0.4rem;
    margin-left: -0.4rem;
}

/* ── Content Container ──────────────────────────── */
#reports-screen .reports-content {
    position: relative;
    padding: 0.85rem 0 4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

/* ── Filter-Bar ─────────────────────────────────── */
#reports-screen .reports-filter-bar {
    margin-bottom: 1rem;
    padding: 0;
}

#reports-screen .filter-chip {
    background: var(--white);
    border: 0.5px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.45rem 0.95rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s var(--ios-spring), background 0.15s ease;
}

#reports-screen .filter-chip:active {
    transform: scale(0.95);
}

#reports-screen .filter-chip.active {
    background: var(--ios-accent);
    border-color: var(--ios-accent);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
}

#reports-screen .filter-chip--leader {
    border-color: var(--ios-accent);
    color: var(--ios-accent);
}

.filter-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-lock svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* ── Sektion-Card ───────────────────────────────── */
#reports-screen .reports-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.1rem 1.1rem 1.15rem;
    margin-bottom: 1rem;
}

#reports-screen .reports-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

#reports-screen .reports-section-head h3 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    margin: 0;
}

#reports-screen .reports-section-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    font-weight: 400;
}

#reports-screen .reports-refresh {
    color: var(--gray-500);
    padding: 0.35rem;
    border-radius: var(--radius-sm);
}

#reports-screen .reports-refresh:hover {
    color: var(--ios-accent);
    background: var(--ios-accent-soft);
}

/* ── Form Fields (iOS-Style Inputs) ─────────────── */
#reports-screen .reports-form-grid,
#reports-screen .reports-inline-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: end;
}

#reports-screen .form-field--full {
    grid-column: 1 / -1;
}

#reports-screen .form-field label {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

#reports-screen .form-field label .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

#reports-screen .dot--green { background: var(--ios-green); }
#reports-screen .dot--red { background: var(--ios-red); }
#reports-screen .dot--blue { background: var(--ios-accent); }

#reports-screen .form-field input,
#reports-screen .form-field select,
#reports-screen .form-field textarea {
    width: 100%;
    font-family: var(--font);
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    color: var(--gray-900);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    -webkit-appearance: none;
}

#reports-screen .form-field textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.5;
    font-family: var(--font);
}

#reports-screen .form-field input:focus,
#reports-screen .form-field select:focus,
#reports-screen .form-field textarea:focus {
    border-color: var(--ios-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-accent-soft);
}

#reports-screen .form-field input::placeholder,
#reports-screen .form-field textarea::placeholder {
    color: var(--gray-400);
}

/* ── Submit Buttons ─────────────────────────────── */
#reports-screen #report-submit-btn,
#reports-screen .reports-add-btn {
    background: var(--ios-accent);
    border: none;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--radius-md);
    padding: 0.75rem 1.15rem;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2);
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
    cursor: pointer;
}

#reports-screen #report-submit-btn {
    margin-top: 0.4rem;
    padding: 0.85rem 1.2rem;
}

#reports-screen #report-submit-btn:hover,
#reports-screen .reports-add-btn:hover {
    background: #0066d6;
}

#reports-screen #report-submit-btn:active,
#reports-screen .reports-add-btn:active {
    transform: scale(0.97);
}

/* ── Lists (att-list inside reports) ────────────── */
#reports-screen .reports-list-clean {
    margin-bottom: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#reports-screen .reports-list-clean:empty {
    display: none;
}

/* ── Leader Auth Overlay (iOS) ──────────────────── */
#reports-screen .leader-auth-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fadeSlideDown 0.3s var(--ease-out);
}

#reports-screen .leader-auth-overlay.hidden {
    display: none;
}

#reports-screen .leader-auth-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

#reports-screen .leader-auth-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

#reports-screen .leader-auth-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    margin: 0 0 0.25rem;
    text-transform: none;
}

#reports-screen .leader-auth-card p {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 0 0 1.15rem;
}

#reports-screen .leader-auth-form input {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.75rem 0.9rem;
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    color: var(--gray-900);
    margin-bottom: 0.65rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    text-align: center;
}

#reports-screen .leader-auth-form input:focus {
    border-color: var(--ios-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-accent-soft);
}

#reports-screen .leader-auth-form .btn-primary {
    background: var(--ios-accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
    cursor: pointer;
    transition: transform 0.18s var(--ios-spring);
}

#reports-screen .leader-auth-form .btn-primary:active {
    transform: scale(0.97);
}

#reports-screen .reports-leader-back {
    margin-top: 0.85rem;
    color: var(--ios-accent);
}

#reports-screen .error-msg {
    color: var(--ios-red);
    font-size: 0.85rem;
    margin: 0.6rem 0 0;
}

/* ── Mobile tweaks ──────────────────────────────── */
@media (max-width: 480px) {
    #reports-screen .tasks-header-title h1 { font-size: 1.3rem; }
    #reports-screen .reports-form-grid { grid-template-columns: 1fr; }
    #reports-screen .reports-inline-form { grid-template-columns: 1fr; }
    #reports-screen .reports-add-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE ATTENDANCE-SCREEN (Override-Block)
   Scoped auf #attendance-screen. Andere Screens unverändert.
   ══════════════════════════════════════════════════ */

#attendance-screen {
    background: var(--gray-50);
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
    --ios-orange: #ff9500;
    --ios-orange-soft: rgba(255, 149, 0, 0.12);
    --ios-green: #34c759;
    --ios-green-soft: rgba(52, 199, 89, 0.12);
    --ios-red: #ff3b30;
    --ios-red-soft: rgba(255, 59, 48, 0.12);
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#attendance-screen .tasks-page {
    padding: 0 1rem;
}

/* ── Header ─────────────────────────────────────── */
#attendance-screen .tasks-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 0.95rem 0 0.85rem;
}

#attendance-screen .tasks-header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--gray-900);
}

#attendance-screen .tasks-header-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 0.1rem;
}

#attendance-screen #att-back-btn {
    color: var(--ios-accent);
    padding: 0.4rem;
    margin-left: -0.4rem;
}

/* ── Content Container ──────────────────────────── */
#attendance-screen .att-content {
    padding: 0.85rem 0 4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    background: transparent;
}

/* ── Card-Container ─────────────────────────────── */
#attendance-screen .att-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.1rem;
    margin-bottom: 1rem;
    border: none;
}

/* ── Form-Fields ────────────────────────────────── */
#attendance-screen .form-field + .form-field {
    margin-top: 0.85rem;
}

#attendance-screen .att-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 0.85rem;
}

#attendance-screen .att-form-row .form-field + .form-field {
    margin-top: 0;
}

#attendance-screen .form-field label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-700);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-bottom: 0.35rem;
}

#attendance-screen .form-field input,
#attendance-screen .form-field select,
#attendance-screen .form-field textarea,
#attendance-screen .att-name-input,
#attendance-screen .att-select,
#attendance-screen .att-date-input,
#attendance-screen .att-textarea {
    width: 100%;
    font-family: var(--font);
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    color: var(--gray-900);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    -webkit-appearance: none;
    margin-top: 0;
}

#attendance-screen .att-textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

#attendance-screen .form-field input:focus,
#attendance-screen .form-field select:focus,
#attendance-screen .form-field textarea:focus {
    border-color: var(--ios-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-accent-soft);
}

/* ── Status-Buttons (Segmented-Control-Style) ───── */
#attendance-screen .att-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin: 1rem 0 0.85rem;
}

#attendance-screen .att-status-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 0.5rem;
    background: var(--gray-50);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    color: var(--gray-700);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.18s var(--ios-spring), background 0.15s ease, border-color 0.15s ease;
}

#attendance-screen .att-status-btn:hover {
    background: var(--white);
}

#attendance-screen .att-status-btn:active {
    transform: scale(0.96);
}

#attendance-screen .att-status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gray-300);
    transition: background 0.15s ease, transform 0.18s var(--ios-spring);
}

#attendance-screen .att-status--present .att-status-dot { background: var(--ios-green); }
#attendance-screen .att-status--online  .att-status-dot { background: var(--ios-orange); }
#attendance-screen .att-status--absent  .att-status-dot { background: var(--ios-red); }

#attendance-screen .att-status-label {
    line-height: 1;
}

#attendance-screen .att-status-btn.selected {
    background: var(--white);
}

#attendance-screen .att-status--present.selected {
    border-color: var(--ios-green);
    background: var(--ios-green-soft);
    color: var(--ios-green);
}

#attendance-screen .att-status--online.selected {
    border-color: var(--ios-orange);
    background: var(--ios-orange-soft);
    color: var(--ios-orange);
}

#attendance-screen .att-status--absent.selected {
    border-color: var(--ios-red);
    background: var(--ios-red-soft);
    color: var(--ios-red);
}

#attendance-screen .att-status-btn.selected .att-status-dot {
    transform: scale(1.15);
}

/* Reason container (slides in when absent/online selected) */
#attendance-screen #att-reason-container {
    margin-top: 0;
    margin-bottom: 0.85rem;
    animation: fadeSlideDown 0.25s var(--ease-out);
}

#attendance-screen #att-reason-container.hidden {
    display: none;
}

/* ── Submit ─────────────────────────────────────── */
#attendance-screen #att-submit-btn {
    background: var(--svt-black);
    border: none;
    color: var(--svt-white);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--radius-md);
    padding: 0.85rem 1.2rem;
    box-shadow: none;
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
    cursor: pointer;
    width: 100%;
    margin-top: 0.4rem;
}

#attendance-screen #att-submit-btn:hover {
    background: var(--svt-green);
}

#attendance-screen #att-submit-btn:active {
    transform: scale(0.97);
}

/* ── Section Head (history) ─────────────────────── */
#attendance-screen .att-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

#attendance-screen .att-section-head h3 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    margin: 0;
}

#attendance-screen .att-refresh {
    color: var(--gray-500);
    padding: 0.35rem;
    border-radius: var(--radius-sm);
}

#attendance-screen .att-refresh:hover {
    color: var(--ios-accent);
    background: var(--ios-accent-soft);
}

/* ── Records-Liste ──────────────────────────────── */
#attendance-screen .att-list-clean {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#attendance-screen .att-list-clean:empty::after {
    content: 'Noch keine Meldungen.';
    display: block;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.88rem;
    padding: 1.5rem 0;
}

#attendance-screen .att-record-card {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--gray-300);
    box-shadow: none;
    transition: transform 0.18s var(--ios-spring);
}

#attendance-screen .att-record-card:hover {
    transform: translateX(2px);
}

#attendance-screen .att-record-card--present { border-left-color: var(--ios-green); }
#attendance-screen .att-record-card--online  { border-left-color: var(--ios-orange); }
#attendance-screen .att-record-card--absent  { border-left-color: var(--ios-red); }

#attendance-screen .att-record-info h4 {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.005em;
}

#attendance-screen .att-record-info p {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0.15rem 0 0;
}

#attendance-screen .att-record-reason {
    margin-top: 0.4rem;
    padding: 0.35rem 0.55rem;
    background: var(--white);
    border-radius: var(--radius-xs);
    font-size: 0.78rem;
    font-style: normal;
    color: var(--gray-600);
    border: 0.5px solid var(--gray-200);
}

#attendance-screen .att-record-status-tag {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.22rem 0.6rem;
    border-radius: var(--radius-full);
}

#attendance-screen .status-tag--present { background: var(--ios-green-soft);  color: var(--ios-green); }
#attendance-screen .status-tag--online  { background: var(--ios-orange-soft); color: var(--ios-orange); }
#attendance-screen .status-tag--absent  { background: var(--ios-red-soft);    color: var(--ios-red); }

/* ── View Toggle ─────────────────────────────────── */
#attendance-screen .att-view-toggle {
    display: flex;
    gap: 0.3rem;
    margin: 0 1rem 0.75rem;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    padding: 0.25rem;
}

#attendance-screen .att-view-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-md) - 2px);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

#attendance-screen .att-view-btn.active {
    background: var(--white);
    color: var(--gray-900);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: 600;
}

/* ── Report Card ─────────────────────────────────── */
#attendance-screen .att-report-card {
    padding: 1.1rem;
}

#attendance-screen .att-report-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--svt-line);
}

#attendance-screen .att-report-month-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    white-space: nowrap;
}

#attendance-screen .att-month-picker {
    flex: 1;
    border: 1px solid var(--svt-line);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--svt-green);
    font-weight: 600;
    background: var(--svt-cream);
    outline: none;
    cursor: pointer;
}

#attendance-screen .att-month-picker:focus {
    border-color: var(--svt-green);
    background: var(--svt-white);
}

/* ── Summary Chips ───────────────────────────────── */
#attendance-screen .att-report-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

#attendance-screen .att-summary-chip {
    background: var(--svt-white);
    border: 1px solid var(--svt-line);
    border-radius: 10px;
    padding: 0.75rem 0.6rem;
    text-align: center;
}

#attendance-screen .att-summary-chip:last-child {
    background: var(--svt-green);
    border-color: var(--svt-green);
}

#attendance-screen .att-summary-chip:last-child .chip-val,
#attendance-screen .att-summary-chip:last-child .chip-label {
    color: var(--svt-white);
}

#attendance-screen .att-summary-chip .chip-val {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--svt-green);
    line-height: 1.1;
}

#attendance-screen .att-summary-chip .chip-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    margin-top: 0.25rem;
}

/* ── Report Table ────────────────────────────────── */
#attendance-screen .att-report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#attendance-screen .att-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

#attendance-screen .att-report-table th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid var(--svt-line);
    white-space: nowrap;
}

#attendance-screen .att-report-table .col-th--present { color: var(--ios-green); }
#attendance-screen .att-report-table .col-th--online  { color: var(--ios-orange); }
#attendance-screen .att-report-table .col-th--absent  { color: var(--ios-red); }

#attendance-screen .att-report-table td {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--svt-line);
    vertical-align: middle;
    color: var(--gray-900);
}

#attendance-screen .att-report-table tbody tr:hover td {
    background: rgba(31, 58, 46, 0.04);
}

#attendance-screen .att-report-table tr:last-child td {
    border-bottom: none;
}

#attendance-screen .att-report-table .col-name {
    font-weight: 500;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#attendance-screen .att-report-table .col-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#attendance-screen .att-report-table .col-num--present { color: var(--ios-green); font-weight: 600; }
#attendance-screen .att-report-table .col-num--online  { color: var(--ios-orange); font-weight: 600; }
#attendance-screen .att-report-table .col-num--absent  { color: var(--ios-red); font-weight: 600; }

/* Progress bar column */
#attendance-screen .att-report-table .col-bar {
    min-width: 90px;
}

#attendance-screen .att-report-bar-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

#attendance-screen .att-report-bar-track {
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: 99px;
    overflow: hidden;
}

#attendance-screen .att-report-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--ios-green);
    transition: width 0.4s var(--ios-spring);
}

#attendance-screen .att-report-bar-fill--mid {
    background: var(--ios-orange);
}

#attendance-screen .att-report-bar-fill--low {
    background: var(--ios-red);
}

#attendance-screen .att-report-bar-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    white-space: nowrap;
    min-width: 30px;
    text-align: right;
}

#attendance-screen .att-report-empty {
    text-align: center;
    color: var(--gray-400);
    font-size: 0.88rem;
    padding: 1.5rem 0;
    margin: 0;
}

/* ── Mobile tweaks ──────────────────────────────── */
@media (max-width: 480px) {
    #attendance-screen .tasks-header-title h1 { font-size: 1.3rem; }
    #attendance-screen .att-form-row { grid-template-columns: 1fr; gap: 0.85rem; }
    #attendance-screen .att-status-btn { padding: 0.7rem 0.4rem; font-size: 0.8rem; }
    #attendance-screen .att-report-table th,
    #attendance-screen .att-report-table td { padding: 0.5rem 0.4rem; }
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE ARCHIVE-SCREEN (Override-Block)
   Scoped auf #archive-screen. Andere Screens unverändert.
   ══════════════════════════════════════════════════ */

#archive-screen {
    background: var(--gray-50);
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
    --ios-green: #34c759;
    --ios-red: #ff3b30;
    --ios-red-soft: rgba(255, 59, 48, 0.12);
    --ios-gray-soft: rgba(142, 142, 147, 0.12);
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#archive-screen .tasks-page {
    padding: 0 1rem;
}

#archive-screen .tasks-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 0.95rem 0 0.85rem;
}

#archive-screen .tasks-header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--gray-900);
}

#archive-screen .tasks-header-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 0.1rem;
}

#archive-screen #btn-back-archive {
    color: var(--ios-accent);
    padding: 0.4rem;
    margin-left: -0.4rem;
}

#archive-screen .archive-content {
    padding: 0.85rem 0 4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    background: transparent;
}

#archive-screen .archive-card {
    background: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.1rem;
    margin-bottom: 1rem;
}

#archive-screen .archive-upload-card {
    padding: 0;
    overflow: hidden;
}

#archive-screen .archive-upload-card[open] {
    padding-bottom: 1.1rem;
}

#archive-screen .archive-upload-card form {
    padding: 0 1.1rem;
}

#archive-screen .archive-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

#archive-screen summary.archive-section-head {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
    padding: 1.05rem 1.1rem;
}

#archive-screen summary.archive-section-head::-webkit-details-marker {
    display: none;
}

#archive-screen .archive-upload-card[open] summary.archive-section-head {
    margin-bottom: 0.2rem;
}

#archive-screen summary.archive-section-head::after {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.18s var(--ios-spring);
}

#archive-screen .archive-upload-card[open] summary.archive-section-head::after {
    content: '−';
    transform: rotate(180deg);
}

#archive-screen .archive-section-head h3 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    margin: 0;
}

#archive-screen .archive-section-head span {
    font-size: 0.74rem;
    color: var(--gray-500);
    background: var(--ios-gray-soft);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

#archive-screen summary.archive-section-head > span {
    margin-left: auto;
}

#archive-screen .archive-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 0.85rem;
}

#archive-screen .form-field + .form-field {
    margin-top: 0.85rem;
}

#archive-screen .archive-form-row .form-field + .form-field {
    margin-top: 0;
}

#archive-screen .archive-file-hint {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin: 0.4rem 0 0;
    line-height: 1.4;
}

#archive-screen .archive-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-left: 0.4rem;
}

#archive-screen .archive-controls {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.5rem 0 0.9rem;
}

#archive-screen .archive-search-wrap {
    position: relative;
    flex: 1;
}
#archive-screen .archive-search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}
#archive-screen .archive-search {
    width: 100%;
    padding: 0.55rem 0.75rem 0.55rem 2.1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}
#archive-screen .archive-search:focus {
    outline: none;
    border-color: var(--ios-accent);
}

#archive-screen .archive-sort {
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

#archive-screen .archive-filter-tabs {
    display: flex;
    gap: 0.35rem;
    background: var(--bg-secondary);
    padding: 0.25rem;
    border-radius: 10px;
}
#archive-screen .archive-filter-tab {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
#archive-screen .archive-filter-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#archive-screen .archive-filter-tab:hover:not(.active) {
    color: var(--text-primary);
}

#archive-screen .archive-month-header {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}
#archive-screen .archive-month-header:first-child {
    margin-top: 0;
}

#archive-screen .form-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-700);
    text-transform: none;
    letter-spacing: 0;
}

#archive-screen .form-field input {
    width: 100%;
    font-family: var(--font);
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    color: var(--gray-900);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#archive-screen .form-field select {
    width: 100%;
    font-family: var(--font);
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    color: var(--gray-900);
    outline: none;
}

#archive-screen .form-field input:focus,
#archive-screen .form-field select:focus {
    border-color: var(--ios-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-accent-soft);
}

#archive-screen input[type="file"] {
    cursor: pointer;
}

#archive-screen input[type="file"]::file-selector-button {
    border: none;
    border-radius: var(--radius-full);
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
    font-family: var(--font);
    font-weight: 600;
    padding: 0.38rem 0.7rem;
    margin-right: 0.75rem;
    cursor: pointer;
}

#archive-screen .archive-drive-folder-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.55rem;
    width: 100%;
    min-height: 2.2rem;
    border-radius: var(--radius-md);
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

#archive-screen #archive-submit-btn {
    margin-top: 1rem;
    background: var(--ios-accent);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.85rem 1.2rem;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2);
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
}

#archive-screen #archive-submit-btn:hover {
    background: #0066d6;
}

#archive-screen #archive-submit-btn:active {
    transform: scale(0.97);
}

#archive-screen #archive-upload-status {
    display: none;
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ios-accent);
}

#archive-screen .archive-refresh-btn {
    color: var(--gray-500);
    padding: 0.35rem;
    border-radius: var(--radius-sm);
}

#archive-screen .archive-refresh-btn:hover {
    color: var(--ios-accent);
    background: var(--ios-accent-soft);
}

#archive-screen .archive-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#archive-screen .archive-list:empty::after {
    content: 'Noch keine Dateien.';
    display: block;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.88rem;
    padding: 1.5rem 0;
}

#archive-screen .archive-category-section {
    border-top: 0.5px solid var(--gray-200);
    padding-top: 0.95rem;
}

#archive-screen .archive-category-section:first-child {
    border-top: none;
    padding-top: 0;
}

#archive-screen .archive-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

#archive-screen .archive-category-head h4 {
    margin: 0;
    color: var(--gray-900);
    font-size: 0.98rem;
    font-weight: 650;
    letter-spacing: 0;
}

#archive-screen .archive-category-head span {
    display: inline-flex;
    margin-top: 0.15rem;
    color: var(--gray-500);
    font-size: 0.75rem;
    font-weight: 500;
}

#archive-screen .archive-category-items {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#archive-screen .archive-section-empty {
    color: var(--gray-400);
    font-size: 0.85rem;
    padding: 0.7rem 0;
}

#archive-screen .archive-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--white);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.85rem 0.95rem;
    box-shadow: inset 0 0 0 0.5px var(--gray-200);
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
}

#archive-screen .archive-item:hover {
    background: var(--gray-50);
    transform: translateY(-1px);
}

#archive-screen .archive-item-head,
#archive-screen .archive-item-main {
    display: flex;
    align-items: flex-start;
}

#archive-screen .archive-item-head {
    justify-content: space-between;
    gap: 0.75rem;
}

#archive-screen .archive-item-main {
    gap: 0.65rem;
    min-width: 0;
}

#archive-screen .archive-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    background: var(--ios-gray-soft);
    flex-shrink: 0;
    font-size: 1.05rem;
}

#archive-screen .archive-item h4 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    overflow-wrap: anywhere;
}

#archive-screen .archive-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

#archive-screen .archive-item-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.14rem 0.5rem;
}

#archive-screen .delete-archive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border: none;
    border-radius: 50%;
    background: var(--ios-red-soft);
    color: var(--ios-red);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
    flex-shrink: 0;
}

#archive-screen .delete-archive-btn:hover {
    background: rgba(255, 59, 48, 0.18);
}

#archive-screen .delete-archive-btn:active {
    transform: scale(0.9);
}

#archive-screen .archive-doc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.35rem;
    border-radius: var(--radius-md);
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}

#archive-screen .apple-player {
    background: var(--gray-50);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.75rem;
    margin-top: 0;
}

#archive-screen .apple-player-cover {
    background: linear-gradient(135deg, #ff2d55, #ff9500);
    box-shadow: 0 2px 8px rgba(255, 45, 85, 0.22);
}

#archive-screen .apple-play-btn {
    background: var(--gray-100);
    color: var(--gray-900);
}

#archive-screen .apple-play-btn.playing {
    background: var(--ios-accent);
    color: white;
}

#archive-screen .apple-progress-bar::-webkit-slider-thumb {
    background: var(--ios-accent);
}

@media (max-width: 480px) {
    #archive-screen .tasks-header-title h1 { font-size: 1.3rem; }
    #archive-screen .archive-form-row { grid-template-columns: 1fr; gap: 0.85rem; }
    #archive-screen .archive-card { padding: 1rem; }
    #archive-screen .archive-upload-card { padding: 0; }
    #archive-screen .archive-upload-card[open] { padding-bottom: 1rem; }
    #archive-screen .archive-upload-card form { padding: 0 1rem; }
    #archive-screen summary.archive-section-head { padding: 1rem; }
    #archive-screen .apple-player {
        align-items: flex-start;
    }
    #archive-screen .apple-player-body {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }
    #archive-screen .apple-player-progress {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE MOBILE CHAT (Override-Block)
   Focused auf KI-Mentor/Chat-Lesbarkeit auf kleinen Screens.
   ══════════════════════════════════════════════════ */

#chat-screen {
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
    --ios-green: #34c759;
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#chat-screen #clear-chat-btn {
    color: var(--ios-accent);
    border-color: var(--ios-accent-soft);
    text-transform: none;
    letter-spacing: 0;
}

.chat-topbar-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.chat-topbar-title h2 {
    margin: 0;
}

@media (max-width: 768px) {
    #chat-screen {
        background: var(--gray-50);
    }

    #chat-screen .chat-main {
        height: 100svh;
        background: var(--gray-50);
    }

    #chat-screen .chat-topbar {
        min-height: 3.6rem;
        padding: calc(0.55rem + env(safe-area-inset-top)) 0.85rem 0.55rem;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        gap: 0.65rem;
    }

    #chat-screen .chat-topbar .btn-ghost {
        width: 2.15rem;
        height: 2.15rem;
        padding: 0;
        color: var(--ios-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    #chat-screen .chat-topbar h2 {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-transform: none;
        color: var(--gray-900);
    }

    #chat-screen .chat-topbar .mode-badge {
        align-self: flex-start;
        width: fit-content;
        background: var(--ios-accent-soft);
        color: var(--ios-accent);
        border-radius: var(--radius-full);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        padding: 0.16rem 0.48rem;
    }

    #chat-screen .chat-messages {
        padding: 0.85rem 0.75rem 0.75rem;
        gap: 0.65rem;
    }

    #chat-screen .message {
        max-width: 100%;
        gap: 0.45rem;
    }

    #chat-screen .message.user {
        max-width: 88%;
        align-self: flex-end;
    }

    #chat-screen .message.bot {
        align-self: stretch;
    }

    #chat-screen .message.user .msg-avatar {
        display: none;
    }

    #chat-screen .message.bot .msg-avatar {
        width: 1.65rem;
        height: 1.65rem;
        font-size: 0.72rem;
        background: var(--ios-accent);
        margin-top: 0.25rem;
    }

    #chat-screen .msg-bubble {
        border-radius: 1.05rem;
        padding: 0.72rem 0.88rem;
        font-size: 0.92rem;
        line-height: 1.52;
    }

    #chat-screen .message.bot .msg-bubble {
        width: min(100%, 42rem);
        background: var(--white);
        border: none;
        border-bottom-left-radius: 0.35rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    #chat-screen .message.user .msg-bubble {
        background: var(--ios-accent);
        border-bottom-right-radius: 0.35rem;
    }

    #chat-screen .msg-bubble p {
        margin-bottom: 0.45rem;
    }

    #chat-screen .msg-bubble ul,
    #chat-screen .msg-bubble ol {
        padding-left: 1rem;
    }

    #chat-screen .chat-input-area {
        padding: 0.55rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
        border-top: 0.5px solid rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    #chat-screen .chat-form {
        border: 0.5px solid var(--gray-300);
        border-radius: 1.35rem;
        background: var(--gray-50);
        padding: 0.24rem 0.34rem 0.24rem 0.9rem;
    }

    #chat-screen .chat-form:focus-within {
        border-color: var(--ios-accent);
        box-shadow: 0 0 0 3px var(--ios-accent-soft);
        background: var(--white);
    }

    #chat-screen .chat-form input {
        min-height: 2.25rem;
        font-size: 1rem;
        padding: 0.35rem 0;
    }

    #chat-screen .btn-send {
        width: 2.25rem;
        height: 2.25rem;
        background: var(--ios-accent);
        transition: transform 0.18s var(--ios-spring), opacity 0.15s ease;
    }

    #chat-screen .btn-send:active {
        transform: scale(0.94);
    }

    #chat-screen .btn-send:disabled {
        opacity: 0.35;
        background: var(--ios-accent);
    }

    #chat-screen .chat-sidebar {
        width: min(82vw, 300px);
        min-width: 0;
        background: var(--white);
        padding: calc(1rem + env(safe-area-inset-top)) 1rem 1rem;
    }
}

@media (max-width: 390px) {
    #chat-screen .chat-topbar {
        gap: 0.45rem;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    #chat-screen .chat-topbar .btn-ghost {
        width: 2rem;
        height: 2rem;
    }

    #chat-screen .msg-bubble {
        font-size: 0.9rem;
    }
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE LOGIN + MEETING POLISH
   ══════════════════════════════════════════════════ */

#login-screen {
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
    --ios-green: #34c759;
    background: var(--gray-50);
}

#login-screen .login-bg-pattern {
    background-image: none;
}

#login-screen .login-container {
    max-width: 380px;
    padding: 1.25rem;
}

#login-screen .login-brand {
    margin-bottom: 1.6rem;
}

#login-screen .brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    margin-bottom: 0.9rem;
    border-radius: 1.25rem;
    background: var(--white);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    font-size: 2.2rem;
    animation: none;
}

#login-screen .login-brand h1 {
    color: var(--gray-900);
    font-size: 1.7rem;
    font-weight: 750;
    letter-spacing: -0.03em;
}

#login-screen .brand-subtitle {
    max-width: 17rem;
    margin: 0.35rem auto 0;
    color: var(--gray-500);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

#login-screen .login-form {
    padding: 1rem;
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    gap: 0.9rem;
}

#login-screen .input-group {
    gap: 0.35rem;
}

#login-screen .input-group label {
    color: var(--gray-700);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#login-screen .input-group input {
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    color: var(--gray-900);
    font-size: 1rem;
    padding: 0.82rem 0.9rem;
}

#login-screen .input-group input:focus {
    border-color: var(--ios-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-accent-soft);
}

#login-screen #login-btn {
    border: none;
    border-radius: var(--radius-md);
    background: var(--ios-accent);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.85rem 1.1rem;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2);
}

#login-screen #login-btn:hover {
    background: #0066d6;
}

#login-screen .login-footer {
    margin-top: 1.25rem;
    color: var(--gray-500);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#login-screen .status-dot {
    background: var(--ios-green);
}

#meeting-screen {
    background: var(--gray-50);
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
}

#meeting-screen .meeting-page {
    padding: 0 1rem;
    max-width: 880px;
    margin: 0 auto;
}

#meeting-screen .meeting-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    padding: 0.95rem 0 0.85rem;
}

#meeting-screen #meeting-back-btn {
    color: var(--ios-accent);
    padding: 0.4rem;
    margin-left: -0.4rem;
}

#meeting-screen .meeting-header-title h1 {
    color: var(--gray-900);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
}

#meeting-screen .meeting-header-title p {
    color: var(--gray-500);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 0.1rem;
    text-transform: none;
}

#meeting-screen .meeting-body {
    padding: 0.85rem 0 4rem;
}

#meeting-screen .meeting-calendly {
    max-width: none;
    min-height: min(720px, calc(100svh - 6rem));
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

@media (max-width: 480px) {
    #login-screen .login-container {
        padding: 1rem;
    }

    #login-screen .login-brand h1 {
        font-size: 1.55rem;
    }

    #meeting-screen .meeting-page {
        padding: 0 1rem;
    }

    #meeting-screen .meeting-header-title h1 {
        font-size: 1.3rem;
    }

    #meeting-screen .meeting-body {
        padding-top: 0.75rem;
    }

    #meeting-screen .meeting-calendly {
        min-height: calc(100svh - 5.7rem);
        border-radius: var(--radius-md);
    }
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE BOARD SCREENS (Override-Block)
   Scoped auf Standort-Board + Leiter-Bereich.
   ══════════════════════════════════════════════════ */

#board-screen,
#leader-screen {
    background: var(--gray-50);
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
    --ios-orange: #ff9500;
    --ios-orange-soft: rgba(255, 149, 0, 0.12);
    --ios-green: #34c759;
    --ios-green-soft: rgba(52, 199, 89, 0.12);
    --ios-red: #ff3b30;
    --ios-red-soft: rgba(255, 59, 48, 0.12);
    --ios-purple: #af52de;
    --ios-purple-soft: rgba(175, 82, 222, 0.12);
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#board-screen .board-page,
#leader-screen .board-page {
    max-width: 880px;
    padding: 0 1rem;
}

#board-screen .board-header,
#leader-screen .board-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 0.95rem 0 0.85rem;
}

#board-screen .board-header-title h1,
#leader-screen .board-header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--gray-900);
}

#board-screen .board-header-sub,
#leader-screen .board-header-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 0.1rem;
}

#board-screen #board-back-btn,
#leader-screen #leader-back-btn {
    color: var(--ios-accent);
    padding: 0.4rem;
    margin-left: -0.4rem;
}

#leader-screen #leader-back-btn {
    color: var(--ios-purple);
}

#board-screen #toggle-board-form-btn,
#leader-screen #toggle-leader-form-btn {
    background: var(--ios-accent);
    border: none;
    border-radius: var(--radius-full);
    padding: 0.5rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2);
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
}

#leader-screen #toggle-leader-form-btn {
    background: var(--ios-purple);
    box-shadow: 0 1px 2px rgba(175, 82, 222, 0.18);
}

#board-screen #toggle-board-form-btn:hover {
    background: #0066d6;
}

#leader-screen #toggle-leader-form-btn:hover {
    background: #9548c4;
}

#board-screen #toggle-board-form-btn:active,
#leader-screen #toggle-leader-form-btn:active {
    transform: scale(0.96);
}

#board-screen .board-form-panel,
#leader-screen .board-form-panel {
    background: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.15rem;
    margin: 0.85rem 0 0;
}

#board-screen .board-form-grid,
#leader-screen .board-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

#board-screen .board-form-grid .form-field:nth-child(3),
#leader-screen .board-form-grid .form-field:nth-child(3) {
    grid-column: 1 / -1;
}

#board-screen .form-field label,
#leader-screen .form-field label {
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-700);
    font-weight: 500;
}

#board-screen .form-field input,
#board-screen .form-field select,
#leader-screen .form-field input,
#leader-screen .form-field select {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    color: var(--gray-900);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#board-screen .form-field input:focus,
#board-screen .form-field select:focus {
    border-color: var(--ios-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-accent-soft);
}

#leader-screen .form-field input:focus,
#leader-screen .form-field select:focus {
    border-color: var(--ios-purple);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-purple-soft);
}

#board-screen .form-field--action,
#leader-screen .form-field--action {
    grid-column: 1 / -1;
}

#board-screen #board-submit-btn,
#leader-screen #leader-submit-btn {
    border: none;
    border-radius: var(--radius-md);
    background: var(--ios-accent);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.8rem 1rem;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2);
    transition: transform 0.18s var(--ios-spring), background 0.15s ease;
}

#leader-screen #leader-submit-btn {
    background: var(--ios-purple);
    box-shadow: 0 1px 2px rgba(175, 82, 222, 0.18);
}

#board-screen #board-submit-btn:active,
#leader-screen #leader-submit-btn:active {
    transform: scale(0.97);
}

#board-screen .board-filter-bar,
#leader-screen .board-filter-bar {
    gap: 0.45rem;
    padding: 0.85rem 0;
}

#board-screen .filter-chip,
#leader-screen .filter-chip {
    background: var(--white);
    border: 0.5px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.45rem 0.95rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s var(--ios-spring), background 0.15s ease;
}

#board-screen .filter-chip:active,
#leader-screen .filter-chip:active {
    transform: scale(0.95);
}

#board-screen .filter-chip.active {
    background: var(--ios-accent);
    border-color: var(--ios-accent);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
}

#leader-screen .filter-chip.active {
    background: var(--ios-purple);
    border-color: var(--ios-purple);
    color: white;
    box-shadow: 0 2px 6px rgba(175, 82, 222, 0.22);
}

#board-screen .board-list,
#leader-screen .board-list {
    padding: 0 0 4rem;
    -webkit-overflow-scrolling: touch;
}

#board-screen .board-entry,
#leader-screen .board-entry {
    background: var(--white);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 0.95rem 1rem;
    margin-bottom: 0.55rem;
    transition: transform 0.18s var(--ios-spring), box-shadow 0.15s ease, opacity 0.15s ease;
}

#board-screen .board-entry:hover,
#leader-screen .board-entry:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

#board-screen .board-entry:active,
#leader-screen .board-entry:active {
    transform: scale(0.99);
}

#board-screen .board-entry--done,
#leader-screen .board-entry--done {
    background: var(--gray-50);
    opacity: 0.58;
}

#board-screen .board-entry--ack,
#leader-screen .board-entry--ack {
    border: none;
    border-left: 3px solid var(--ios-orange);
    border-radius: var(--radius-md);
    background: var(--white);
    padding-left: calc(1rem - 3px);
}

#leader-screen .board-entry--ack {
    border-left-color: var(--ios-purple);
}

#board-screen .board-type-icon,
#leader-screen .board-type-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

#board-screen .board-type-icon--task,
#leader-screen .board-type-icon--task {
    background: var(--ios-orange-soft);
}

#board-screen .board-type-icon--note,
#leader-screen .board-type-icon--note {
    background: var(--ios-accent-soft);
}

#board-screen .board-type-icon--meeting,
#leader-screen .board-type-icon--meeting {
    background: var(--ios-green-soft);
}

#board-screen .board-entry-title,
#leader-screen .board-entry-title {
    font-size: 0.96rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-900);
}

#board-screen .board-entry-desc,
#leader-screen .board-entry-desc {
    font-size: 0.84rem;
    color: var(--gray-500);
    line-height: 1.42;
    margin-top: 0.22rem;
}

#board-screen .board-entry-meta,
#leader-screen .board-entry-meta {
    gap: 0.4rem;
    margin-top: 0.55rem;
}

#board-screen .board-meta-badge,
#leader-screen .board-meta-badge {
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.22rem 0.6rem;
}

#board-screen .board-meta-badge--date,
#leader-screen .board-meta-badge--date {
    color: var(--ios-green);
    background: var(--ios-green-soft);
}

#board-screen .board-entry-actions,
#leader-screen .board-entry-actions {
    opacity: 0.45;
}

#board-screen .board-entry:hover .board-entry-actions,
#leader-screen .board-entry:hover .board-entry-actions,
#board-screen .board-entry:focus-within .board-entry-actions,
#leader-screen .board-entry:focus-within .board-entry-actions {
    opacity: 1;
}

#board-screen .task-action-btn,
#leader-screen .task-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--gray-500);
}

#board-screen .task-action-btn:hover {
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
}

#leader-screen .task-action-btn:hover {
    background: var(--ios-purple-soft);
    color: var(--ios-purple);
}

#board-screen .task-action-btn:active,
#leader-screen .task-action-btn:active {
    transform: scale(0.92);
}

#leader-screen .leader-auth-overlay {
    background: rgba(242, 242, 247, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#leader-screen .leader-auth-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 1.35rem;
}

#leader-screen .leader-auth-icon {
    font-size: 2rem;
    margin-bottom: 0.65rem;
}

#leader-screen .leader-auth-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
}

#leader-screen .leader-auth-card > p {
    font-size: 0.88rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

#leader-screen .leader-auth-form input {
    border: 0.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    padding: 0.8rem 0.9rem;
    font-size: 0.95rem;
    text-align: center;
}

#leader-screen .leader-auth-form input:focus {
    border-color: var(--ios-purple);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--ios-purple-soft);
}

#leader-screen .leader-auth-form .btn-primary {
    background: var(--ios-purple);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

#leader-screen .leader-auth-back {
    margin-top: 0.75rem;
    color: var(--ios-purple);
    font-size: 0.88rem;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 640px) {
    #board-screen .board-header-title h1,
    #leader-screen .board-header-title h1 {
        font-size: 1.3rem;
    }

    #board-screen #toggle-board-form-btn,
    #leader-screen #toggle-leader-form-btn {
        padding: 0.42rem 0.75rem;
    }

    #board-screen #toggle-board-form-btn span,
    #leader-screen #toggle-leader-form-btn span {
        display: none;
    }

    #board-screen .board-form-grid,
    #leader-screen .board-form-grid {
        grid-template-columns: 1fr;
    }

    #board-screen .board-date-fields .form-row,
    #leader-screen .board-date-fields .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #board-screen .board-entry-actions,
    #leader-screen .board-entry-actions {
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════════
   iOS-NATIVE RULES-SCREEN (Override-Block)
   Scoped auf #rules-screen. Andere Screens unverändert.
   ══════════════════════════════════════════════════ */

#rules-screen {
    background: var(--gray-50);
    --ios-accent: #007aff;
    --ios-accent-soft: rgba(0, 122, 255, 0.1);
    --ios-orange: #ff9500;
    --ios-orange-soft: rgba(255, 149, 0, 0.12);
    --ios-red: #ff3b30;
    --ios-red-soft: rgba(255, 59, 48, 0.12);
    --ios-red-strong: #d70015;
    --ios-gray-soft: rgba(142, 142, 147, 0.12);
    --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

#rules-screen .tasks-page {
    padding: 0 1rem;
}

/* ── Header (gleicher Stil wie Tasks/Reports/Attendance) ── */
#rules-screen .tasks-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 0.95rem 0 0.85rem;
    flex-shrink: 0;
}

#rules-screen .tasks-header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--gray-900);
}

#rules-screen .tasks-header-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: 0.1rem;
}

#rules-screen #rules-back-btn {
    color: var(--ios-accent);
    padding: 0.4rem;
    margin-left: -0.4rem;
}

/* ── Content ────────────────────────────────────── */
#rules-screen .rules-content {
    background: transparent;
    padding: 0.85rem 0 4rem;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Rules-Sections ─────────────────────────────── */
#rules-screen .rules-section {
    background: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#rules-screen .rules-section h3 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
    color: var(--gray-900);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

#rules-screen .rules-section h3 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

#rules-screen .rules-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#rules-screen .rules-list li {
    padding-left: 1.4rem;
    margin-bottom: 0.7rem;
    line-height: 1.5;
    font-size: 0.92rem;
    color: var(--gray-700);
    position: relative;
}

#rules-screen .rules-list li:last-child {
    margin-bottom: 0;
}

#rules-screen .rules-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ios-accent);
    transform: none;
    color: transparent;
    font-size: 0;
}

#rules-screen .rules-list li strong {
    color: var(--gray-900);
    font-weight: 600;
}

/* ── Penalties Section ──────────────────────────── */
#rules-screen .penalties-section {
    background: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#rules-screen .penalties-header {
    margin-bottom: 0.95rem;
    padding-bottom: 0.85rem;
    border-bottom: 0.5px solid var(--gray-200);
}

#rules-screen .penalties-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    margin: 0 0 0.2rem;
}

#rules-screen .penalties-header p {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin: 0;
}

#rules-screen .penalty-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#rules-screen .penalty-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: var(--gray-50);
    border: none;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--gray-300);
    box-shadow: none;
    transition: transform 0.18s var(--ios-spring);
}

#rules-screen .penalty-card:hover {
    transform: translateX(2px);
}

#rules-screen .penalty-card--medium {
    border-left-color: var(--ios-orange);
}

#rules-screen .penalty-card--high,
#rules-screen .penalty-card--severe {
    border-left-color: var(--ios-red);
}

#rules-screen .penalty-info h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.15rem;
    letter-spacing: -0.005em;
}

#rules-screen .penalty-info p {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.4;
}

#rules-screen .penalty-amount {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-700);
    flex-shrink: 0;
    background: var(--white);
    border-radius: var(--radius-full);
    padding: 0.3rem 0.7rem;
    border: 0.5px solid var(--gray-200);
    font-variant-numeric: tabular-nums;
}

#rules-screen .penalty-card--medium .penalty-amount {
    color: var(--ios-orange);
}

#rules-screen .penalty-card--high .penalty-amount,
#rules-screen .penalty-card--severe .penalty-amount {
    color: var(--ios-red);
}

/* ── Mobile tweaks ──────────────────────────────── */
@media (max-width: 480px) {
    #rules-screen .tasks-header-title h1 { font-size: 1.3rem; }
    #rules-screen .penalty-card { padding: 0.7rem 0.75rem; }
    #rules-screen .penalty-info p { font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════
   LEGAL FOOTER & DOCUMENTS
   ══════════════════════════════════════════════════ */
.legal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--gray-500);
    font-size: 0.78rem;
}

.legal-footer--login {
    position: absolute;
    z-index: 2;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
}

.legal-footer--dashboard {
    padding: 0.25rem 0 calc(5.5rem + env(safe-area-inset-bottom));
}

.legal-link,
.legal-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--gray-500);
    font: inherit;
    cursor: pointer;
    padding: 0.25rem 0.15rem;
}

.legal-link:hover,
.legal-tab:hover {
    color: var(--gray-900);
}

#legal-screen {
    background: var(--gray-50);
    overflow-y: auto;
}

.legal-page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.legal-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.legal-header-title h1 {
    margin: 0;
    color: var(--gray-900);
    font-size: 1.65rem;
    font-weight: 800;
}

.legal-header-title p {
    margin: 0.12rem 0 0;
    color: var(--gray-500);
    font-size: 0.9rem;
}

.legal-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.35rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
}

.legal-tab {
    flex: 1;
    min-width: 7.5rem;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    color: var(--gray-600);
    font-weight: 650;
}

.legal-tab.active {
    background: var(--gray-900);
    color: var(--white);
}

.legal-content {
    display: block;
}

.legal-doc {
    display: none;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.legal-doc.active {
    display: block;
}

.legal-doc h2 {
    margin: 0 0 1rem;
    color: var(--gray-900);
    font-size: 1.45rem;
    font-weight: 800;
}

.legal-doc section {
    padding: 1rem 0;
    border-top: 1px solid var(--gray-100);
}

.legal-doc h3 {
    margin: 0 0 0.45rem;
    color: var(--gray-900);
    font-size: 1rem;
    font-weight: 700;
}

.legal-doc p {
    margin: 0.35rem 0 0;
    color: var(--gray-700);
    font-size: 0.92rem;
    line-height: 1.65;
}

.legal-doc a {
    color: var(--ios-accent);
    text-decoration: none;
}

@media (max-width: 480px) {
    .legal-footer--login {
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .legal-header-title h1 {
        font-size: 1.35rem;
    }

    .legal-doc {
        padding: 1rem;
    }
}

/* ══════════════════════════════════════════════════
   FEEDBACK SCREEN
   ══════════════════════════════════════════════════ */

#feedback-screen .feedback-content {
    padding: 0.85rem 1rem 4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.feedback-intro {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.feedback-intro p {
    font-size: 0.88rem;
    color: var(--gray-500);
    line-height: 1.55;
    margin: 0;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.engagement-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.engagement-tab {
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.65rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.engagement-tab.active {
    border-color: var(--ios-accent);
    background: var(--ios-accent);
    color: var(--white);
}

.engagement-panel {
    display: none;
}

.engagement-panel.active {
    display: block;
}

.engagement-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feedback-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.feedback-cat-btn {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}

.feedback-cat-btn.selected {
    border-color: var(--ios-accent);
    background: var(--ios-accent-soft);
    color: var(--ios-accent);
    font-weight: 600;
}

.feedback-form textarea {
    width: 100%;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--gray-900);
    background: var(--white);
    resize: vertical;
    min-height: 120px;
    box-sizing: border-box;
}

.feedback-form textarea:focus {
    outline: none;
    border-color: var(--ios-accent);
}

.feedback-optional {
    font-weight: 400;
    color: var(--gray-400);
    font-size: 0.82rem;
}

/* ── Feedback-Karten im Leiter-Bereich ── */
.feedback-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border-left: 3px solid var(--gray-200);
}

.feedback-card--unread {
    border-left-color: #8b5cf6;
}

.feedback-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.feedback-cat-tag {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-100);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.65rem;
}

.feedback-card--unread .feedback-cat-tag {
    background: rgba(139,92,246,0.1);
    color: #7c3aed;
}

.feedback-card-meta {
    font-size: 0.78rem;
    color: var(--gray-400);
}

.feedback-card-message {
    font-size: 0.92rem;
    color: var(--gray-700);
    line-height: 1.55;
    margin: 0 0 0.75rem;
}

.feedback-response {
    background: rgba(31, 58, 46, 0.08);
    border: 1px solid rgba(31, 58, 46, 0.14);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.85rem;
    margin: 0.65rem 0;
}

.feedback-response strong {
    display: block;
    color: var(--svt-green);
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
}

.feedback-response p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.88rem;
    line-height: 1.45;
}

.feedback-comments {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.65rem 0;
}

.feedback-comment {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
    color: var(--gray-600);
}

.feedback-comment strong {
    display: block;
    color: var(--gray-800);
    margin-bottom: 0.15rem;
}

.idea-comment-form,
.leader-response-form {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.idea-comment-form {
    grid-template-columns: minmax(0, 2fr) minmax(8rem, 1fr) auto auto;
}

.idea-comment-form input,
.idea-comment-form select,
.leader-response-form textarea {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--gray-800);
    font: inherit;
    font-size: 0.82rem;
    padding: 0.5rem 0.65rem;
}

.leader-response-form textarea {
    min-height: 72px;
    resize: vertical;
}

.recognition-context-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.7rem;
    color: var(--gray-600);
    font-size: 0.82rem;
}

.recognition-context {
    margin-top: -0.25rem;
}

.feedback-card-title {
    font-size: 1.02rem;
    line-height: 1.25;
    margin: 0 0 0.45rem;
    color: var(--gray-900);
}

.feedback-status-pill {
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: var(--radius-full);
    padding: 0.2rem 0.6rem;
}

.status-new { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.status-reviewing { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.status-planned { background: rgba(16, 185, 129, 0.14); color: #047857; }
.status-done { background: rgba(31, 58, 46, 0.14); color: var(--svt-green); }
.status-declined { background: rgba(107, 114, 128, 0.14); color: var(--gray-500); }

.feedback-card--read .feedback-card-message {
    color: var(--gray-400);
}

.feedback-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.feedback-status-select {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--gray-700);
    padding: 0.45rem 0.65rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}

.leader-engagement-section {
    margin-bottom: 1.1rem;
}

.leader-engagement-filters {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.leader-engagement-section h3 {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
}

.feedback-read-label {
    font-size: 0.78rem;
    color: var(--gray-400);
}

/* Unread-Badge am Feedback-Tab */
.feedback-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--radius-full);
    background: #8b5cf6;
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0 0.25rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

@media (max-width: 760px) {
    .idea-comment-form {
        grid-template-columns: 1fr;
    }

    .idea-comment-form .btn,
    .leader-response-form .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════ */
.svt-toast {
    position: fixed;
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    background: var(--gray-900);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.svt-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.svt-toast--error   { background: var(--ios-red); }
.svt-toast--success { background: #34c759; }
.svt-toast--warn    { background: var(--ios-orange); }

/* ── App Confirm Dialog ─────────────────────────── */
.svt-confirm {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.svt-confirm.hidden {
    display: none;
}

.svt-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.svt-confirm-card {
    position: relative;
    z-index: 1;
    width: min(100%, 23rem);
    padding: 1.15rem;
    border: 1px solid var(--svt-line);
    border-radius: var(--radius-md);
    background: var(--svt-white);
    color: var(--svt-black);
    box-shadow: 0 22px 55px rgba(5, 5, 5, 0.18);
}

.svt-confirm-card h2 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 850;
    letter-spacing: 0;
}

.svt-confirm-card p {
    margin: 0.55rem 0 1rem;
    color: rgba(5, 5, 5, 0.62);
    font-size: 0.9rem;
    line-height: 1.45;
}

.svt-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.svt-confirm-ok.svt-confirm-ok--danger {
    background: var(--ios-red);
}

.svt-confirm .svt-confirm-card {
    background: #ffffff;
    color: #050505;
}

.svt-confirm .svt-confirm-card h2 {
    color: #050505;
}

.svt-confirm .svt-confirm-card p {
    color: #3f3f46;
}

.svt-confirm .btn-ghost {
    background: #ffffff;
    border: 1.5px solid #d4d4d8;
    color: #18181b;
}

.svt-confirm .btn-ghost:hover {
    background: #f4f4f5;
    color: #050505;
}

.svt-confirm .btn-primary,
.svt-confirm .svt-confirm-ok {
    color: #ffffff;
}

.svt-confirm .svt-confirm-ok.svt-confirm-ok--danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

/* ══════════════════════════════════════════════════
   SCHULE VON TYRANNUS REBRAND
   Brand language: Raum, Typografie, Farbe, Reduktion.
   ══════════════════════════════════════════════════ */

:root {
    --svt-black: #050505;
    --svt-green: #1f3a2e;
    --svt-sage: #8fa79b;
    --svt-sand: #d6c3a3;
    --svt-cream: #f2eee8;
    --svt-paper: #fbfaf7;
    --svt-white: #ffffff;
    --svt-muted: rgba(5, 5, 5, 0.62);
    --svt-line: rgba(31, 58, 46, 0.14);
    --svt-line-strong: rgba(31, 58, 46, 0.22);
    --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition-med: var(--transition-base);
}

html,
body {
    background: var(--svt-cream);
    color: var(--svt-black);
}

.svt-logo {
    display: inline-block;
    background: currentColor;
    color: currentColor;
    -webkit-mask: url('/static/assets/brand/roof-logo.svg') center / contain no-repeat;
    mask: url('/static/assets/brand/roof-logo.svg') center / contain no-repeat;
}

.btn {
    border-radius: var(--radius-sm);
    letter-spacing: 0;
}

.btn-primary,
#login-screen #login-btn,
#tasks-screen .btn-primary,
#board-screen .btn-primary,
#leader-screen .btn-primary,
#reports-screen .btn-primary,
#attendance-screen .btn-primary {
    background: var(--svt-black);
    border-color: var(--svt-black);
    color: var(--svt-white);
    box-shadow: none;
}

.btn-primary:hover,
#login-screen #login-btn:hover {
    background: var(--svt-green);
    border-color: var(--svt-green);
}

.btn-ghost:hover {
    background: rgba(31, 58, 46, 0.08);
}

#login-screen {
    background:
        linear-gradient(90deg, var(--svt-paper) 0 20%, transparent 20%),
        var(--svt-cream);
    color: var(--svt-black);
}

#login-screen .login-bg-pattern,
#dashboard-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: url('/static/assets/brand/roof-pattern.svg');
    background-size: 320px 180px;
    color: var(--svt-white);
    opacity: 0.58;
    pointer-events: none;
}

#login-screen .login-container {
    max-width: 430px;
    padding: 1.5rem;
}

#login-screen .brand-icon {
    width: 6.85rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
    color: var(--svt-green);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 0 auto 1rem;
    color: var(--svt-green);
}

.brand-lockup-mark {
    width: 5.25rem;
    height: 2.28rem;
    flex: 0 0 auto;
}

.brand-lockup-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 0.92;
}

.brand-lockup-text span {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.brand-lockup-text strong {
    font-family: 'Bebas Neue', var(--font);
    font-size: 2.9rem;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.brand-kicker,
.brand-gallery-kicker {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--svt-green);
    letter-spacing: 0;
}

#login-screen .login-brand h1 {
    margin-top: 0.6rem;
    font-size: clamp(2.6rem, 8vw, 4.25rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--svt-black);
}

#login-screen .brand-subtitle {
    max-width: 22rem;
    margin-top: 0.95rem;
    color: var(--svt-black);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.55;
    text-transform: none;
}

#login-screen .login-form {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--svt-line-strong);
    border-radius: var(--radius-sm);
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#login-screen .input-group input {
    background: var(--svt-cream);
    border-color: var(--svt-line);
    border-radius: var(--radius-sm);
}

#login-screen .input-group input:focus,
#chat-screen .chat-form:focus-within {
    border-color: var(--svt-green);
    box-shadow: 0 0 0 3px rgba(31, 58, 46, 0.12);
}

#dashboard-screen {
    position: relative;
    background: var(--svt-cream);
    --ios-accent: var(--svt-green);
    --ios-tint-blue: rgba(143, 167, 155, 0.22);
    --ios-tint-orange: rgba(214, 195, 163, 0.34);
    --ios-tint-green: rgba(31, 58, 46, 0.12);
    --ios-tint-red: rgba(5, 5, 5, 0.09);
    --ios-tint-purple: rgba(143, 167, 155, 0.24);
    --ios-tint-gray: rgba(5, 5, 5, 0.08);
}

#dashboard-screen .dash-header,
#chat-screen .chat-topbar {
    background: rgba(242, 238, 232, 0.92);
    border-bottom: 1px solid var(--svt-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#dashboard-screen .dash-icon {
    display: inline-block;
    width: 3.1rem;
    height: 1.35rem;
    color: var(--svt-green);
}

#dashboard-screen .dash-brand {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
}

#dashboard-screen .dash-brand h1,
#dashboard-screen .mode-card h2,
#dashboard-screen .dash-section-title,
.chat-topbar-title h2,
.sidebar-header h2 {
    letter-spacing: 0;
}

#dashboard-screen .dash-brand h1 {
    font-weight: 900;
    text-transform: uppercase;
}

#dashboard-screen .dash-brand .dash-greeting-sub {
    color: var(--svt-green);
    font-weight: 600;
}

#dashboard-screen .today-bar,
#dashboard-screen .mode-card,
.dash-list,
.dash-toggle-row,
.dash-command {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--svt-line);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

#dashboard-screen .mode-card {
    min-height: 10.8rem;
    color: var(--svt-black);
}

#dashboard-screen .mode-card:hover {
    box-shadow: 0 18px 45px rgba(31, 58, 46, 0.1);
}

#dashboard-screen .mode-icon,
.dash-list-icon {
    border-radius: var(--radius-sm);
    color: var(--svt-green);
}

#dashboard-screen .mode-icon svg,
.dash-list-icon svg {
    width: 1.18rem;
    height: 1.18rem;
    display: block;
}

#dashboard-screen .mode-card::before {
    background: var(--svt-green);
}

#dashboard-screen .mode-tag,
#dashboard-screen .today-day,
.bnav-item.active,
#chat-screen .chat-topbar .mode-badge,
#chat-screen #clear-chat-btn {
    color: var(--svt-green);
}

#dashboard-screen .mode-tag,
#chat-screen .chat-topbar .mode-badge {
    background: rgba(143, 167, 155, 0.2);
}

.dash-command {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr);
    gap: 1rem;
    align-items: stretch;
    margin: 0 0 1.1rem;
    padding: 1rem;
}

.dash-command-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.dash-command-kicker {
    color: var(--svt-green);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
}

.dash-command h2 {
    margin: 0.38rem 0 0.42rem;
    color: var(--svt-black);
    font-size: 1.38rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
}

.dash-command p {
    max-width: 23rem;
    color: var(--svt-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.dash-command-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.dash-priority-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    min-height: 8.6rem;
    padding: 0.85rem;
    border: 1px solid rgba(31, 58, 46, 0.1);
    border-radius: var(--radius-sm);
    background: var(--svt-paper);
    color: var(--svt-black);
    text-align: left;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.dash-priority-action:hover {
    transform: translateY(-1px);
    border-color: rgba(31, 58, 46, 0.24);
    background: var(--svt-white);
}

.dash-priority-action--primary {
    background: var(--svt-green);
    color: var(--svt-white);
}

.dash-priority-action--primary:hover {
    background: var(--svt-green);
}

.dash-priority-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: rgba(31, 58, 46, 0.12);
    color: var(--svt-green);
}

.dash-priority-action--primary .dash-priority-icon {
    background: rgba(255, 255, 255, 0.14);
    color: var(--svt-white);
}

.dash-priority-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.dash-priority-action strong,
.dash-priority-action small {
    display: block;
    min-width: 0;
}

.dash-priority-action strong {
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.12;
}

.dash-priority-action small {
    margin-top: 0.28rem;
    color: rgba(5, 5, 5, 0.58);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.22;
}

.dash-priority-action--primary small {
    color: rgba(255, 255, 255, 0.78);
}

.brand-gallery {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr);
    gap: 1.5rem;
    align-items: stretch;
    margin: 0 0 1.6rem;
    padding: 1.2rem;
    background:
        linear-gradient(135deg, rgba(214, 195, 163, 0.18), transparent 42%),
        var(--svt-green);
    color: var(--svt-white);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.brand-gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/static/assets/brand/roof-pattern.svg');
    background-size: 260px 146px;
    color: rgba(255, 255, 255, 0.62);
    opacity: 0.18;
    pointer-events: none;
}

.brand-gallery-copy,
.brand-gallery-grid {
    position: relative;
    z-index: 1;
}

.brand-gallery-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 17rem;
}

.brand-gallery-kicker {
    color: var(--svt-sage);
}

.brand-gallery h2 {
    margin: 2.5rem 0 1rem;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand-gallery p {
    max-width: 24rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.55;
}

.brand-gallery-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem;
    min-height: 17rem;
}

.brand-gallery-tile {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
    border-radius: 6px;
    color: var(--svt-white);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
}

.brand-gallery-tile img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    filter: saturate(0.78) contrast(1.08);
    transition: transform var(--transition-med), filter var(--transition-med);
}

.brand-gallery-tile span {
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.65rem;
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - 1.3rem);
    padding: 0.36rem 0.52rem;
    border-radius: 999px;
    background: rgba(9, 24, 18, 0.72);
    color: var(--svt-white);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-gallery-tile:hover img {
    transform: scale(1.035);
    filter: saturate(0.95) contrast(1.08);
}

.brand-gallery-tile--profile img {
    padding: 18%;
    object-fit: contain;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
}

.brand-gallery-tile:first-child {
    grid-row: span 2;
}

#chat-screen {
    --ios-accent: var(--svt-green);
    --ios-accent-soft: rgba(31, 58, 46, 0.12);
    background: var(--svt-cream);
}

#chat-screen .chat-main,
#chat-screen .chat-sidebar {
    background: var(--svt-cream);
}

#chat-screen .sidebar-header .dash-icon {
    display: inline-block;
    width: 3.2rem;
    height: 1.4rem;
    color: var(--svt-white);
}

#chat-screen .chat-sidebar {
    background: var(--svt-green);
    color: var(--svt-white);
}

#chat-screen .sidebar-mode {
    border-color: rgba(255, 255, 255, 0.2);
}

#chat-screen .sidebar-schedule {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 0.85rem;
    color: var(--svt-white);
}

#chat-screen .sidebar-schedule h4 {
    color: rgba(255, 255, 255, 0.55);
}

#chat-screen .sidebar-schedule .schedule-mini {
    color: rgba(255, 255, 255, 0.85);
}

#chat-screen .sidebar-schedule .schedule-mini strong {
    color: var(--svt-white);
}

#chat-screen .sidebar-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#chat-screen .sidebar-actions .btn-outline {
    background: rgba(255, 255, 255, 0.1);
    color: var(--svt-white);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-weight: 600;
    letter-spacing: 0.5px;
}

#chat-screen .sidebar-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--svt-white);
}

#chat-screen .message.bot .msg-avatar,
#chat-screen .btn-send,
#chat-screen .message.user .msg-bubble {
    background: var(--svt-green);
}

#chat-screen .message.bot .msg-bubble,
#chat-screen .chat-form,
#chat-screen .chat-input-area {
    background: var(--svt-white);
    border-color: var(--svt-line);
}

#tasks-screen,
#board-screen,
#leader-screen,
#rules-screen,
#attendance-screen,
#reports-screen,
#archive-screen,
#meeting-screen,
#legal-screen,
#feedback-screen {
    background: var(--svt-cream);
    --ios-accent: var(--svt-green);
    --ios-accent-soft: rgba(31, 58, 46, 0.12);
}

/* Keep the last content reachable above mobile browser chrome and fixed app UI. */
#dashboard-screen .dash-main,
#tasks-screen .task-list,
#board-screen .board-list,
#leader-screen .board-list,
#rules-screen .rules-content,
#attendance-screen .att-content,
#reports-screen .reports-content,
#archive-screen .archive-content,
#feedback-screen .feedback-content,
#legal-screen {
    scroll-padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}

#dashboard-screen .dash-main {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}

#tasks-screen .task-list,
#board-screen .board-list,
#leader-screen .board-list,
#rules-screen .rules-content,
#attendance-screen .att-content,
#reports-screen .reports-content,
#archive-screen .archive-content,
#feedback-screen .feedback-content {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}

#legal-screen .legal-page {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
    #login-screen {
        background: var(--svt-cream);
    }

    #dashboard-screen .dash-brand {
        align-items: flex-start;
    }

    #dashboard-screen .dash-icon {
        margin-top: 0.22rem;
    }

    .dash-command {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 0.9rem;
    }

    .dash-command h2 {
        font-size: 1.18rem;
    }

    .dash-command p {
        font-size: 0.84rem;
    }

    .dash-command-actions {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .dash-priority-action {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 0.72rem;
    }

    .dash-priority-icon {
        flex: 0 0 2.2rem;
    }

    .brand-gallery {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .brand-gallery-copy {
        min-height: auto;
    }

    .brand-gallery h2 {
        margin-top: 1.6rem;
    }

    .brand-gallery-grid {
        --brand-gallery-card-size: min(78vw, 21rem);
        display: flex;
        gap: 0.75rem;
        min-height: 0;
        margin: 0 -1rem;
        padding: 0 1rem 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .brand-gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .brand-gallery-tile,
    .brand-gallery-tile:first-child {
        flex: 0 0 var(--brand-gallery-card-size);
        width: var(--brand-gallery-card-size);
        height: var(--brand-gallery-card-size);
        aspect-ratio: 1 / 1;
        grid-row: auto;
        object-fit: cover;
        object-position: center;
        scroll-snap-align: start;
    }
}

@media (max-width: 430px) {
    #dashboard-screen .mode-grid {
        grid-template-columns: 1fr;
    }

    .brand-gallery-grid {
        --brand-gallery-card-size: min(82vw, 20rem);
    }
}

/* ── Badges Screen ────────────────────────────────── */
#badges-screen {
    flex-direction: column;
    background: var(--gray-50);
    overflow-y: auto;
}

#badges-screen .tasks-header {
    padding: 0.95rem 1rem 0.85rem;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    background: var(--white);
}

.badges-container {
    width: 100%;
    padding: 20px 16px 48px;
    max-width: 600px;
    margin: 0 auto;
}

.badges-lookup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
}

.badges-lookup-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.badges-lookup-row {
    display: flex;
    gap: 8px;
}

.badges-name-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: var(--white);
    color: var(--black);
    outline: none;
    transition: border-color 0.15s;
}
.badges-name-input:focus {
    border-color: var(--accent);
}

.badges-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.badges-section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.badges-count-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--gray-100);
    color: var(--gray-600);
}

.badges-leader-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    background: #1f3a2e;
    color: #fff;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px 14px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.15s;
}

.badge-card--earned {
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
}
.badge-card--earned:hover {
    transform: translateY(-2px);
}

.badge-card--locked {
    background: var(--gray-100);
    border: 1.5px dashed var(--gray-300);
    opacity: 0.55;
}

.badge-icon {
    font-size: 28px;
    line-height: 1;
}

.badge-card--locked .badge-icon {
    filter: grayscale(1);
    opacity: 0.5;
}

.badge-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.2;
}

.badge-desc {
    font-size: 11px;
    color: var(--gray-500);
    line-height: 1.4;
}

.badge-date {
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 2px;
}

.badges-none {
    font-size: 13px;
    color: var(--gray-400);
    padding: 8px 0;
}

.badges-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--gray-400);
    font-size: 14px;
    text-align: center;
}

.badges-team-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badges-team-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
}

.badges-team-name {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    color: var(--gray-800);
}

.badges-team-badges {
    font-size: 18px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.badges-team-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-500);
    min-width: 20px;
    text-align: right;
}

.dash-list-badge-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    background: #1f3a2e;
    color: #fff;
    margin-left: auto;
    margin-right: 4px;
}

/* ── Anwesenheits-Statistik (Leiter) ─────────────── */
.leader-attendance-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 4px 4rem;
}

.att-stats-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.att-stats-month-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
}

.att-stats-month-input {
    padding: 6px 10px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--white);
}

.att-stats-summary {
    margin-bottom: 16px;
}

.att-stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: var(--gray-50);
    border-radius: 12px;
    padding: 12px;
}

.att-stats-summary-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.att-stats-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
}

.att-stats-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
}

.att-stats-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.att-stats-row {
    background: var(--white);
    border: 1.5px solid var(--gray-100);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.att-stats-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.att-stats-row-head strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}

.att-stats-row-percent {
    font-size: 16px;
    font-weight: 800;
}

.att-stats-row-percent.is-good { color: #16a34a; }
.att-stats-row-percent.is-mid  { color: #d97706; }
.att-stats-row-percent.is-low  { color: #dc2626; }

.att-stats-row-bar {
    height: 6px;
    background: var(--gray-100);
    border-radius: 99px;
    overflow: hidden;
}

.att-stats-row-bar-fill {
    height: 100%;
    background: #1f3a2e;
    transition: width 0.3s;
}

.att-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.att-stats-cell {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 6px;
    background: var(--gray-100);
}
.att-stats-cell.state-present  { background: #dcfce7; }
.att-stats-cell.state-online   { background: #dbeafe; }
.att-stats-cell.state-absent   { background: #fee2e2; }
.att-stats-cell.state-missed   { background: var(--gray-200); }
.att-stats-cell.state-upcoming { background: var(--gray-50); color: var(--gray-400); }

.att-stats-row-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--gray-500);
    flex-wrap: wrap;
}

.att-stats-row-counted {
    font-weight: 600;
    color: var(--gray-700);
}

.att-stats-empty {
    padding: 24px;
    text-align: center;
    color: var(--gray-400);
    font-size: 14px;
}

/* ── Mitglieder-Quote im Anwesenheits-Screen ─────── */
.att-mystats-section { background: var(--svt-white); }

.att-mystats-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.att-mystats-select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--svt-line);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: var(--svt-cream);
    color: var(--svt-green);
    font-weight: 600;
}

.att-mystats-select:focus {
    border-color: var(--svt-green);
    background: var(--svt-white);
    outline: none;
}

.att-mystats-result {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.att-mystats-headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--svt-line);
}

.att-mystats-headline-left,
.att-mystats-headline-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.att-mystats-headline-right { align-items: flex-end; }

.att-mystats-month-label,
.att-mystats-percent-label,
.att-mystats-events-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
}

.att-mystats-month {
    font-size: 1rem;
    font-weight: 700;
    color: var(--svt-green);
    text-transform: capitalize;
    line-height: 1.1;
}

.att-mystats-percent {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}
.att-mystats-percent.is-good { color: var(--ios-green); }
.att-mystats-percent.is-mid  { color: var(--ios-orange); }
.att-mystats-percent.is-low  { color: var(--ios-red); }

.att-mystats-bar {
    height: 8px;
    background: var(--svt-cream);
    border: 1px solid var(--svt-line);
    border-radius: 99px;
    overflow: hidden;
}

.att-mystats-bar-fill {
    height: 100%;
    background: var(--svt-green);
    width: 0%;
    transition: width 0.4s ease-out;
}

.att-mystats-detail {
    font-size: 0.82rem;
    color: var(--gray-600);
    margin: 0;
    font-weight: 500;
}

.att-mystats-breakdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.att-mystats-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.7rem 0.4rem;
    background: var(--svt-white);
    border: 1px solid var(--svt-line);
    border-radius: 10px;
    border-top: 3px solid var(--svt-line);
}

.att-mystats-tile.tile-present  { border-top-color: var(--ios-green); }
.att-mystats-tile.tile-online   { border-top-color: var(--ios-orange); }
.att-mystats-tile.tile-absent   { border-top-color: var(--ios-red); }
.att-mystats-tile.tile-missed   { border-top-color: var(--gray-300); }
.att-mystats-tile.tile-upcoming {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 0.5rem;
    border-top-color: var(--svt-green);
    background: var(--svt-cream);
}

.att-mystats-tile .tile-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--svt-green);
    letter-spacing: -0.02em;
    line-height: 1;
}

.att-mystats-tile .tile-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    text-align: center;
}

.att-mystats-events {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--svt-line);
}