<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* Responsive styles for iPhone/Mobile-first design */

/* Mobile-specific full-screen optimizations */
@media (max-width: 480px) {
    html {
        /* Prevent address bar from affecting height on mobile */
        height: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        /* Prevent horizontal scrolling */
        overflow-x: hidden;
        /* Fix iOS viewport issues */
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }    body {
        /* Ensure body fills the screen */
        min-height: 100vh;
        min-height: -webkit-fill-available;
        /* Prevent horizontal scrolling */
        overflow-x: hidden;
        /* Allow vertical scrolling and prevent zooming on double-tap */
        touch-action: pan-y manipulation;
        /* Fix iOS rubber band scrolling without breaking scroll */
        position: relative;
        width: 100%;
        height: 100%;
    }main {
        padding: calc(75px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px; /* Ruimte voor top bar en safe area */
        max-width: 100%;
        /* Ensure main content fills available space and allows scrolling */
        min-height: calc(100vh - 75px - env(safe-area-inset-top, 0px));
        min-height: calc(-webkit-fill-available - 75px - env(safe-area-inset-top, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        /* Enable momentum scrolling on iOS */
        -webkit-overflow-scrolling: touch;
        /* Ensure scrolling works properly */
        position: relative;
        /* Allow content to expand beyond viewport if needed */
        height: auto;
    }

    .top-bar {
        height: calc(65px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 16px 0 16px;
        /* Ensure top bar doesn't cause horizontal overflow */
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
    }

    /* Unified button system responsive adjustments */
    .btn {
        min-height: 40px;
        font-size: 15px;
    }
    
    .btn-small {
        min-height: 36px;
        font-size: 14px;
        padding: 8px 14px;
    }
    
    .btn-medium {
        min-height: 42px;
        font-size: 15px;
        padding: 10px 20px;
    }
    
    .btn-large {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 24px;
    }    .fab {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }    .fab-container {
        right: 16px;
        gap: 6px;
        flex-direction: row;
        /* Adjust positioning to align bottom of FABs with bottom of toggle switch */
        top: calc(50% + 13px);
        align-items: flex-end;
    }

    /* Settings modal responsive */
    .modal-container {
        margin: 20px 16px;
        max-height: calc(100vh - 40px);
    }

    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .setting-info {
        margin-right: 0;
    }

    .setting-title {
        font-size: 15px;
    }

    .setting-description {
        font-size: 13px;
    }

    .toggle-switch {
        padding: 5px 8px;
        border-radius: 14px;
    }

    .toggle-slider {
        width: 28px;
        height: 16px;
        border-radius: 8px;
        margin-right: 5px;
    }

    .toggle-slider:before {
        height: 12px;
        width: 12px;
    }

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(12px);
    }

    .toggle-label {
        font-size: 11px;
    }

    /* Undo toast responsive voor mobiel - verbeterd voor thumb reach */
    .undo-toast {
        bottom: 30px;
        padding: 16px 22px;
        font-size: 17px;
        border-radius: 30px;
        gap: 18px;
        min-height: 56px;
        max-width: calc(100vw - 32px);
        min-width: 280px;
    }

    .undo-message {
        font-size: 17px;
        font-weight: 500;
    }

    .undo-message::before {
        font-size: 18px;
    }

    .undo-button {
        padding: 11px 20px;
        font-size: 17px;
        border-radius: 20px;
        min-height: 40px;
        min-width: 100px;
        font-weight: 600;
    }

    /* Extra touch feedback voor mobiel - verbeterd */
    .undo-button:active {
        transform: scale(0.94);
        transition: transform 0.15s ease;
        background: #0051d5;
    }

    /* Safe area aanpassingen - verbeterd */
    @supports (padding: max(0px)) {
        .undo-toast {
            bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px));
        }
    }    .category {
        padding: 16px;
        border-radius: 12px;
        /* Adjust max height for mobile */
        max-height: calc(45vh - 80px);
    }

    .category h2 {
        font-size: 20px;
    }

    .task-item {
        padding: 10px 14px;
        border-radius: 10px;
    }

    .task-text {
        font-size: 17px;
    }

    .checkbox-container {
        min-width: 30px;
        height: 30px;
        margin-left: 10px;
    }

    .checkmark {
        width: 26px;
        height: 26px;
        border-radius: 13px;
    }

    .checkmark:after {
        left: 7px;
        top: 3px;
        width: 7px;
        height: 13px;
        border-width: 0 2.5px 2.5px 0;
    }

    .toggle-switch {
        padding: 6px 10px;
        border-radius: 16px;
    }

    .toggle-slider {
        width: 36px;
        height: 20px;
        border-radius: 10px;
        margin-right: 6px;
    }

    .toggle-slider:before {
        height: 16px;
        width: 16px;
    }

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(16px);
    }

    .toggle-label {
        font-size: 13px;
    }

    #task-input {
        padding: 16px;
        border-radius: 12px;
    }

    #task, select {
        padding: 10px 14px;
        font-size: 15px;
        border-radius: 8px;
    }

    /* Unified button system for medium screens */
    .btn {
        min-height: 44px;
        font-size: 16px;
    }
    
    .btn-small {
        min-height: 38px;
        font-size: 15px;
        padding: 8px 16px;
    }
    
    .btn-medium {
        min-height: 44px;
        font-size: 16px;
        padding: 11px 22px;
    }
    
    .btn-large {
        min-height: 50px;
        font-size: 17px;
        padding: 14px 28px;
    }

    .input-row {
        gap: 8px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px !important; /* Force 16px minimum on mobile to prevent zoom */
        padding: 10px 14px;
        border-radius: 8px;
    }

    /* Ensure all input elements maintain 16px minimum */
    input, textarea, select {
        font-size: 16px !important;
    }

    /* Radio buttons responsive styling */
    .radio-group {
        gap: 10px;
    }

    .radio-option {
        padding: 14px;
        border-radius: 10px;
    }

    .radio-custom {
        width: 22px;
        height: 22px;
        margin-right: 10px;
    }

    .radio-custom::after {
        width: 10px;
        height: 10px;
    }

    .radio-label {
        font-size: 15px;
    }

    /* Save indicator responsive */
    .save-indicator {
        right: 16px;
        padding: 8px 12px;
    }

    /* Combined task container responsive */
    .combined-task-container {
        padding: 16px;
        border-radius: 12px;
        /* Ensure container fills available space on mobile */
        height: 100%;
        min-height: calc(100vh - 150px);
    }

    .task-list {
        /* Adjust scrolling for mobile touch */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* Add padding for better thumb reach */
        padding-bottom: 20px;
    }

    /* Task importance styling responsive */
    .task-item.important {
        border-left-width: 3px;
    }    .task-item.important .important-label {
        font-size: 7px;
        padding: 1px 3px;
        margin-left: 4px;
        border-radius: 4px;
        letter-spacing: 0.2px;
    }

    /* Urgency labels responsive styling */
    .task-urgency {
        font-size: 7px;
        padding: 1px 3px;
        margin-right: 4px;
        border-radius: 4px;
        letter-spacing: 0.2px;
    }

    .task-item.not-important {
        border-left-width: 3px;
    }

    /* Fix mobile scrolling issues */
    #combined-task-list {
        /* Ensure touch scrolling works properly */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y; /* Allow vertical scrolling only */
        overflow-y: auto;
        overflow-x: hidden;
        /* Improve scroll performance */
        will-change: scroll-position;
        transform: translateZ(0); /* Force hardware acceleration */
    }

    /* Ensure task items don't prevent scrolling */
    .task-item {
        /* Allow scrolling to pass through task items */
        touch-action: manipulation;
    }
}</pre></body></html>