* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            color: #333;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
            transition: background 0.4s ease;
            position: relative;
            -webkit-tap-highlight-color: transparent;
        }

        body::before,
        body::after {
            content: '';
            position: fixed;
            top: 0;
            width: 8px;
            height: 100%;
            background: var(--sidebar-color, #f44336);
            transition: background 0.4s ease;
            z-index: 999;
        }

        body::before {
            left: 0;
        }

        body::after {
            right: 0;
        }

        .hidden {
            display: none !important;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        #mobileGuard {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #1a1a1a;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 30px;
        }

        #mobileGuard h1 {
            color: #4CAF50;
            font-size: 2em;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        #mobileGuard p {
            font-size: 1.1em;
            opacity: 0.9;
            line-height: 1.6;
        }

        #mobileGuard a {
            color: #4CAF50;
            text-decoration: none;
            font-weight: bold;
        }

        #mobileGuard img {
            margin: 25px 0;
        }

        #onboarding {
            background: white;
            border-radius: 12px;
            padding: 40px 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            margin-top: 50px;
        }

        #onboarding h1 {
            color: #4CAF50;
            margin-bottom: 25px;
        }

        #onboarding input {
            width: 100%;
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 1.2em;
            margin-bottom: 20px;
            text-align: center;
        }

        #app,
        #summary {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
            position: relative;
        }

        .header h1 {
            font-size: 1.8em;
            color: #4CAF50;
            text-align: center;
            margin-bottom: 10px;
        }

        .veteran-text {
            color: #D4AF37 !important;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            background: #f9f9f9;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
        }

        .stat-value {
            font-size: 2em;
            font-weight: bold;
            color: #4CAF50;
            text-align: center;
        }

        .stat-label {
            font-size: 0.8em;
            color: #666;
            font-weight: bold;
            text-align: center;
        }

        .goal-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 8px;
            background: white;
        }

        .goal-item.completed {
            background: #f1f8f4;
            border-color: #4CAF50;
        }

        .goal-input {
            flex: 1;
            border: none;
            font-size: 1.1em;
            outline: none;
            background: transparent;
        }

        .goal-checkbox {
            width: 42px;
            height: 42px;
            border: 3px solid #ddd;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6em;
            cursor: pointer;
            flex-shrink: 0;
        }

        .goal-checkbox.checked {
            background: #4CAF50;
            border-color: #4CAF50;
            color: white;
        }

        .goal-checkbox.disabled {
            opacity: 0.2;
            cursor: not-allowed;
        }

        .countdown-section {
            text-align: center;
            margin: 25px 0;
        }

        .countdown-timer-box {
            background: #fff3cd;
            color: #856404;
            padding: 12px 25px;
            border-radius: 10px;
            display: inline-block;
            font-size: 1.5em;
            font-weight: bold;
            font-family: monospace;
        }

        .history-section {
            margin-top: 25px;
            text-align: center;
            border-top: 1px dashed #ddd;
            padding-top: 20px;
        }

        .history-days {
            font-size: 1.8em;
            letter-spacing: 8px;
            margin-top: 10px;
        }

        .action-btn {
            width: 100%;
            padding: 15px;
            font-size: 1.1em;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
        }

        .settings-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 1.6em;
            cursor: pointer;
            z-index: 1001;
            opacity: 0.4;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5000;
            padding: 20px;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 25px;
            width: 100%;
            max-width: 450px;
            text-align: center;
            max-height: 90vh;
            overflow-y: auto;
        }

        .btn-sec {
            width: 100%;
            padding: 20px;
            background: #f4f4f4;
            border: none;
            border-radius: 12px;
            margin-bottom: 15px;
            cursor: pointer;
            text-align: center;
            font-size: 1.3em;
            font-weight: 600;
        }

        .btn-sec small {
            display: block;
            font-size: 0.8em;
            color: #666;
            margin-top: 5px;
            font-weight: normal;
        }

        .settings-section {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .settings-section:last-child {
            border-bottom: none;
        }

        .settings-section h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .settings-section label {
            cursor: pointer;
            font-size: 1.1em;
        }

        .settings-section input[type="radio"] {
            margin-right: 10px;
            cursor: pointer;
        }

        .flash-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 6000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            color: white;
            text-align: center;
            background: rgba(46, 125, 50, 0.98);
        }

        .flash-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        .version-footer {
            position: relative;
            margin-top: 40px;
            width: 100%;
            text-align: center;
            font-size: 0.85em;
            color: #888;
            padding: 20px;
            background: rgba(245, 245, 245, 0.95);
            backdrop-filter: blur(5px);
            font-weight: bold;
            cursor: pointer;
            border-radius: 8px;
        }
    
/* 1.5.0: accessible controls, responsive fields and safe phone margins. */
body {padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#f5f5f5;}
body::before,body::after {display:none;}
body.day-won {background:#d9f0df;}
button,input {font:inherit;}
button {touch-action:manipulation;}
button:focus-visible,input:focus-visible,a:focus-visible {outline:3px solid #145ead;outline-offset:3px;}
button:disabled {cursor:default;opacity:.45;}
#loader {position:fixed;inset:0;background:white;display:grid;place-items:center;z-index:9999;color:#287b2c;}
h1 {font-size:1.7rem;overflow-wrap:anywhere;}
p {line-height:1.55;margin:12px 0;}
#onboarding {margin-top:24px;}
#onboarding label {display:block;margin:20px 0 8px;}
.help {font-size:.9rem;color:#595959;}
.panel {background:white;border-radius:12px;padding:20px;box-shadow:0 2px 10px #00000012;}
#navigation {display:flex;gap:8px;margin:8px 0 16px;}
#navigation button {flex:1;min-height:44px;background:white;border:1px solid #d5d5d5;border-radius:10px;cursor:pointer;font-weight:600;}
#navigation button[aria-current] {background:#2e7d32;color:white;border-color:#2e7d32;}
.header h1 {font-size:1.65rem;padding:0 40px;}
.settings-btn {background:none;border:0;min-width:44px;min-height:44px;top:10px;right:8px;opacity:1;z-index:1;}
.stat-value {color:#2e7d32;}
#dateInfo {text-align:center;color:#595959;font-size:.95rem;}
#progressText {font-size:1.1rem;font-weight:700;text-align:center;}
.goal-item {gap:8px;padding:10px;}
.goal-input {min-width:0;width:100%;font-size:1rem;min-height:44px;}
.goal-input[readonly] {color:#555;}
.goal-checkbox {min-width:44px;width:44px;height:44px;background:white;padding:0;color:#333;}
.goal-checkbox.checked {background:#2e7d32;border-color:#2e7d32;}
#dayResult {background:#edf7ee;padding:18px 12px;border-radius:10px;text-align:center;margin:20px 0;}
#dayResult h2 {font-size:1.2rem;color:#246c28;}
.action-btn {background:#2e7d32;min-height:44px;}
#planTomorrowBtn {background:#1769aa;}
#countdownLabel {font-size:.9rem;color:#595959;}
.history-days {display:flex;justify-content:space-between;gap:2px;letter-spacing:normal;font-size:1.25rem;}
.history-day {padding:0;flex:1;min-height:44px;min-width:0;background:none;border:0;border-radius:5px;cursor:pointer;}
.history-day:disabled {opacity:.6;}
.history-entry {font-size:1rem;text-align:left;}
dialog {border:0;border-radius:12px;padding:24px;width:calc(100% - 32px);max-width:450px;max-height:calc(100dvh - 40px);overflow:auto;margin:auto;box-shadow:0 12px 50px #0004;}
dialog::backdrop {background:#0009;}
dialog h2 {font-size:1.4rem;margin-bottom:16px;}
fieldset {border:0;}
fieldset label {display:block;min-height:44px;padding:10px 0;}
.btn-sec {font-size:1rem;padding:14px;min-height:44px;}
.danger {color:#b3261e;}
.text-btn {border:0;background:none;color:#1769aa;min-height:44px;text-decoration:underline;cursor:pointer;}
#saveStatus {text-align:center;color:#555;font-size:.8rem;min-height:1.5em;overflow-wrap:anywhere;}
#saveStatus.error {color:#a12019;font-weight:600;}
#toast {position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:560px;padding:16px;background:#252525;color:white;border-radius:12px;z-index:10000;box-shadow:0 3px 15px #0003;}
.version-footer {margin-top:16px;font-weight:400;cursor:default;}
.version-footer a {color:#28672b;}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
.header h1,#onboarding h1 {color:#2e7d32;}
.veteran-text {color:#805600!important;text-shadow:none!important;}
.version-footer {color:#595959;}