:root {
            --bg: #000000;
            --accent: #40bfff;
            --accent-soft: #1b4b63;
            --card-bg: #ffffff;
            --text-light: #ffffff;
            --text-dark: #000000;
            --danger: #ff4d4d;
            --success: #3cb371;
            --border: #444;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: var(--bg);
            color: var(--text-light);
        }

        h1, h2, h3, h4 {
            color: var(--accent);
            margin-top: 0;
        }

        a {
            color: var(--accent);
        }

        .hidden {
            display: none !important;
        }

        #splash {
            position: fixed;
            inset: 0;
            background: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 9999;
        }

        #splash-title {
            font-size: 3rem;
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        #splash-subtitle {
            font-size: 1.1rem;
            color: var(--text-light);
            opacity: 0.8;
            margin-bottom: 2rem;
            text-align: center;
        }

        .btn {
            border: none;
            padding: 0.6rem 1.2rem;
            border-radius: 999px;
            font-size: 0.95rem;
            cursor: pointer;
            background: var(--accent);
            color: #000;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .btn-secondary {
            background: transparent;
            border: 1px solid var(--accent);
            color: var(--accent);
        }

        .btn-danger {
            background: var(--danger);
            color: #fff;
        }

        .btn-small {
            padding: 0.3rem 0.7rem;
            font-size: 0.8rem;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: default;
        }

        #app {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        header {
            background: #050505;
            border-bottom: 1px solid var(--border);
            padding: 0.7rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        header .brand {
            display: flex;
            flex-direction: column;
        }

        header .brand-title {
            font-size: 1.4rem;
            color: var(--accent);
            font-weight: 700;
        }

        header .brand-subtitle {
            font-size: 0.8rem;
            opacity: 0.8;
        }

        nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .nav-btn {
            background: #101010;
            border-radius: 999px;
            border: 1px solid var(--accent-soft);
            color: var(--text-light);
            padding: 0.4rem 0.9rem;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .nav-btn.active {
            background: var(--accent);
            color: #000;
            border-color: var(--accent);
        }

        main {
            padding: 1rem;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto 2rem auto;
        }

        .card {
            background: var(--card-bg);
            color: var(--text-dark);
            border-radius: 12px;
            padding: 1rem 1.3rem;
            margin-bottom: 1rem;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 18px 40px rgba(0,0,0,0.45);
        }

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

        .card-header h2 {
            margin: 0;
        }

        .card-section-title {
            font-weight: 600;
            margin: 0.5rem 0 0.25rem;
            color: var(--accent-soft);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
        }

        form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.7rem 1rem;
            margin-top: 0.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        label {
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
        }

        input[type="text"],
        input[type="number"],
        input[type="date"],
        input[type="month"],
        input[type="url"],
        textarea,
        select {
            padding: 0.4rem 0.5rem;
            border-radius: 8px;
            border: 1px solid #ccc;
            font-size: 0.9rem;
            font-family: inherit;
        }

        textarea {
            min-height: 60px;
            resize: vertical;
        }

        input[type="file"] {
            font-size: 0.75rem;
        }

        .form-actions {
            grid-column: 1 / -1;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: flex-end;
            margin-top: 0.5rem;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.15rem 0.5rem;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 600;
            background: #eee;
            color: #333;
        }

        .badge-status-offen {
            background: #ffeaaa;
        }

        .badge-status-abgeschlossen {
            background: #c8ffd6;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }

        th, td {
            border-bottom: 1px solid #ddd;
            padding: 0.45rem 0.35rem;
            text-align: left;
            vertical-align: top;
        }

        th {
            background: #f4f4f4;
            font-weight: 600;
        }

        tr:nth-child(even) td {
            background: #fafafa;
        }

        .table-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
        }

        .status-select {
            font-size: 0.8rem;
        }

        .search-input {
            width: 100%;
            max-width: 280px;
        }

        .flex-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }

        .flex-spread {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: space-between;
            align-items: center;
        }

        #task-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 999;
        }

        #task-modal {
            width: min(95vw, 780px);
            max-height: 90vh;
            overflow: auto;
            background: var(--card-bg);
            border-radius: 16px;
            padding: 1rem 1.3rem 1.2rem;
            color: var(--text-dark);
            box-shadow: 0 26px 60px rgba(0,0,0,0.6);
        }

        #task-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        #task-modal-header h3 {
            margin: 0;
            color: var(--accent-soft);
        }

        #task-modal-stop-info {
            font-size: 0.8rem;
            color: #555;
        }

        .img-preview {
            max-width: 100%;
            max-height: 80px;
            object-fit: contain;
            border-radius: 6px;
            border: 1px solid #ddd;
        }

        .small-note {
            font-size: 0.75rem;
            color: #666;
        }

        .summary-table {
            margin-top: 0.5rem;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            padding: 0.2rem 0;
        }

        .summary-row strong {
            color: #222;
        }

        .summary-row.total {
            border-top: 1px solid #ddd;
            margin-top: 0.2rem;
            padding-top: 0.3rem;
        }

        .pill-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
            font-size: 0.8rem;
        }

        .pill {
            border-radius: 999px;
            padding: 0.15rem 0.6rem;
            background: #f2f2f2;
            border: 1px solid #ddd;
        }

        .archive-link {
            text-decoration: underline;
            cursor: pointer;
        }

        @media (max-width: 720px) {
            header {
                flex-direction: column;
                align-items: flex-start;
            }

            .card {
                padding: 0.8rem 0.9rem;
            }

            .card-header {
                flex-direction: column;
                align-items: flex-start;
            }

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

            table {
                font-size: 0.78rem;
            }

            th, td {
                padding: 0.35rem 0.25rem;
            }
        }
    
/* FURAT V2 additions */
.auth-screen { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:1rem; background:#000; }
.auth-card { width:min(92vw,420px); background:#fff; color:#111; border-radius:18px; padding:1.4rem; box-shadow:0 24px 70px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:.65rem; }
.auth-card h1 { margin:0; text-align:center; color:var(--accent); }
.auth-card input { padding:.7rem .75rem; border-radius:10px; border:1px solid #ccc; font-size:1rem; }
.auth-error { color:#b00020; background:#ffe8ec; border:1px solid #ffc4cf; border-radius:8px; padding:.6rem; font-size:.85rem; }
.status-line { font-size:.8rem; text-align:center; color:#555; margin-bottom:.3rem; }
.header-status { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
#network-status.online { background:#c8ffd6; }
#network-status.offline { background:#ffeaaa; }
#sync-status.syncing { background:#d8ecff; }
#sync-status.error { background:#ffd1d1; }
@media (max-width: 900px) { .header-status { width:100%; } }