/* ...existing code... */

:root {
    /* Light theme */
    --light-bg: #ffffff;
    --light-surface: #ffffff;
    --light-text: #000000;  /* Black text for maximum contrast */
    --light-muted: #1e293b;  /* Very dark muted text */
    --light-border: #cbd5e1;  /* Darker border */
    --light-hover: #f1f5f9;
    --light-input-bg: #ffffff;
    /* Light theme - print button (light look) */
    --light-print-bg: #f3f4f6;  /* gray-100 */
    --light-print-text: #111827; /* slate-900 */
    --light-print-border: #cbd5e1; /* gray-300 */
    
    /* Dark theme */
    --dark-bg: #071123;
    --dark-surface: #081426;
    --dark-text: #f8fafc;  /* Lighter text for better contrast */
    --dark-muted: #94a3b8;  /* Lighter muted text */
    --dark-border: rgba(255,255,255,0.06);
    --dark-hover: rgba(255,255,255,0.03);
    --dark-input-bg: #0a1829;
    /* Dark theme - print button (dark look) */
    --dark-print-bg: #111827;  /* slate-900 */
    --dark-print-text: #ffffff;
    --dark-print-border: #111827;
    
    /* Default to dark theme */
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --border: var(--dark-border);
    --delta-pos-bg: var(--dark-delta-pos-bg);
    --delta-pos-text: var(--dark-delta-pos-text);
    --delta-neg-bg: var(--dark-delta-neg-bg);
    --delta-neg-text: var(--dark-delta-neg-text);
    --excess-bg: var(--dark-excess-bg);
    --excess-text: var(--dark-excess-text);
    /* Accents */
    --accent: #60a5fa;   /* sky-400 */
    --accent-2: #a78bfa; /* violet-400 */
}

/* Light theme class */
:root.light-theme {
    --bg: var(--light-bg);
    --surface: var(--light-surface);
    --text: var(--light-text);
    --muted: var(--light-muted);
    --border: var(--light-border);
    --delta-pos-bg: var(--light-delta-pos-bg);
    --delta-pos-text: var(--light-delta-pos-text);
    --delta-neg-bg: var(--light-delta-neg-bg);
    --delta-neg-text: var(--light-delta-neg-text);
    --excess-bg: var(--light-excess-bg);
    --excess-text: var(--light-excess-text);
    /* Accents */
    --accent: #2563eb;   /* blue-600 */
    --accent-2: #7c3aed; /* violet-700 */
}

/* Global transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Motion tokens and accessibility */
:root { --motion-fast: 120ms; --motion: 220ms; }
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Base theme variables */
:root {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --border: var(--dark-border);
    --hover: var(--dark-hover);
    --input-bg: var(--dark-input-bg);
    --print-bg: var(--dark-print-bg);
    --print-text: var(--dark-print-text);
    --print-border: var(--dark-print-border);
}

/* Light theme overrides */
:root.light-theme {
    --bg: var(--light-bg);
    --surface: var(--light-surface);
    --text: var(--light-text);
    --muted: var(--light-muted);
    --border: var(--light-border);
    --hover: var(--light-hover);
    --input-bg: var(--light-input-bg);
    --print-bg: var(--light-print-bg);
    --print-text: var(--light-print-text);
    --print-border: var(--light-print-border);
}

/* Loading Bar moved to css/components.css */

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin: 16px;
    background: var(--bg);
    color: var(--text);
    /* Touch-friendly improvements */
    -webkit-tap-highlight-color: rgba(0, 204, 255, 0.2);
    touch-action: manipulation;
}

/* Prevent text selection on buttons for better mobile experience */
button {
    -webkit-user-select: none;
    user-select: none;
}
header, footer { text-align: center; }
header, footer { text-align: center; }

.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 12px;
}

.header-actions {
    display: flex;
    gap: 16px;
}
/* Header, title, and underline moved to css/components.css */

/* Date selector moved to css/components.css */

/* Controls and status moved to css/components.css */

/* Buttons moved to css/components.css */

/* Dropdown moved to css/components.css */

/* Empty state moved to css/components.css */

/* Tabs moved to css/components.css */

/* Team table styles moved to css/tables.css */


/* Print button moved to css/components.css */

/* Quick actions and icon buttons moved to css/components.css */

/* @page moved to css/print.css */

/* ============================================
   Auth Modal & User Bar Styles moved to css/auth.css
   ============================================ */



/* Table base and sticky/row animations moved to css/tables.css */
.muted { 
    color: var(--muted); 
    font-size: 0.9rem;
    font-weight: 500;  /* Slightly bolder */
}

/* Table inputs and textareas moved to css/tables.css */
.small { 
    font-size: 0.9rem; 
    color: var(--text);  /* Use theme text color */
    font-weight: 500;  /* Slightly bolder */
}

/* Numeric cell alignment moved to css/tables.css */

/* Make inputs align nicely on small screens */
/* Responsive Design */
@media (max-width: 768px) {
    /* For tablet stacked layout, remove clipping and sticky */
    #hour-table { background: transparent; box-shadow: none; border: none; border-radius: 0; overflow: visible; }
    #table-wrap table td.hour-label,
    #table-wrap table th:first-child { position: static !important; left: auto !important; box-shadow: none !important; z-index: auto !important; }
    /* Make app read-only on tablets and phones */
    
    /* Adjust header margin - user bar stays same size */
    header {
        margin-top: 82px !important;
        margin-bottom: 12px;
    }
    
    /* Hide all input controls */
    .controls {
        display: none !important;
    }
    
    /* Hide action buttons */
    #table-actions,
    #compact-print-label {
        display: none !important;
    }
    
    /* Make table inputs read-only and styled differently */
    .hour-units,
    textarea.notes {
        pointer-events: none;
        background: var(--surface) !important;
        border-color: transparent !important;
        cursor: default;
    }
    
    /* Hide team tab since it's for planning */
    #tab-team {
        display: none !important;
    }
    
    /* Adjust tabs layout */
    .tabs {
        display: none !important;
    }
    
    /* Show read-only banner */
    #daily-goal::before {
        content: "📱 View-Only Mode";
        display: block;
        text-align: center;
        padding: 12px;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: white;
        font-weight: 600;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    /* Consistent label/value column split for alignment */
    #hour-table { --label-col: 40%; }
    /* In card mode, the table container shouldn't clip cards */
    #hour-table { background: transparent; box-shadow: none; border: none; border-radius: 0; overflow: visible; }
    /* Disable sticky first column in stacked layout */
    #table-wrap table td.hour-label,
    #table-wrap table th:first-child { position: static !important; left: auto !important; box-shadow: none !important; z-index: auto !important; }
    /* Modal adjustments */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 0 10px;
    }
    
    .modal-header {
        padding: 24px 20px 20px;
    }
    
    .modal-icon {
        font-size: 2.5rem;
    }
    
    .modal-header h2 {
        font-size: 1.5rem;
    }
    
    #auth-form {
        padding: 0 20px 20px;
    }
    
    .auth-footer {
        padding: 16px 20px 24px;
    }
    
    /* Header and navigation */
    header {
        padding: 0 8px;
    }
    
    .title {
        margin-bottom: 28px;
    }
    
    .app-title {
        font-size: 1.75rem;
    }
    
    .subtitle {
        font-size: 0.85rem;
    }
    
    .date-selector {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .date-nav-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    .date-input {
        padding: 8px 12px;
        font-size: 0.9rem;
        min-width: 160px;
    }
    
    /* User bar */
    .user-bar {
        padding: 8px 12px;
        gap: 8px;
        height: 61px;
    }
    
    .user-bar > div:first-child {
        min-width: 0;
    }
    
    .user-bar > div:nth-child(2) {
        margin-left: auto !important;
    }
    
    .user-bar-left {
        min-width: 0;
    }
    
    .user-bar-right {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .user-email {
        font-size: 0.8rem;
    }
    
    .user-flag {
        width: 18px;
        height: 18px;
    }
    
    .save-status {
        position: static;
        transform: none;
        width: 100%;
        text-align: center;
        margin-top: 4px;
        font-size: 0.75rem;
    }
    
    /* Controls */
    .controls {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }
    
    .controls label {
        font-size: 0.85rem;
    }
    
    .controls input {
        font-size: 0.9rem;
        min-height: 44px;
    }
    
    .controls button {
        font-size: 0.9rem;
        min-height: 44px;
        padding: 8px 16px;
    }
    
    #goal-input {
        min-width: 120px;
    }
    
    /* Dropdown */
    .dropdown-menu {
        right: 0;
        left: auto;
        min-width: 200px;
    }
    
    .dropdown-item {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    /* Table - Stacked list layout for better fit */
    #table-wrap {
        margin: 0 -8px;
        padding: 0 8px;
        position: relative;
        overflow-x: visible; /* allow card shadows to render */
    }

    /* Hide scroll hint on stacked layout */
    #table-wrap::after { content: ""; display: none; }

    /* Switch hour table to cards */
    #hour-table thead { display: none; }
    #hour-table,
    #hour-table tbody,
    #hour-table tr,
    #hour-table td { display: block; width: 100%; box-sizing: border-box; }

    #hour-table tr {
        margin: 12px 0;
        border: 2px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        padding: 10px 14px;
        box-shadow: 0 3px 12px rgba(0,0,0,0.08);
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    
    #hour-table tr:hover {
        /* Avoid translate to prevent horizontal nudge */
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        border-color: var(--accent);
    }

    #hour-table td {
        /* Grid layout prevents horizontal overflow and keeps labels tidy */
        display: grid;
        grid-template-columns: minmax(120px, var(--label-col)) 1fr;
        align-items: center;
        padding: 10px 6px;          /* increased padding for better touch targets */
        border-bottom: 1px solid var(--border);
        gap: 8px 12px;              /* spacing between label and value */
        min-height: 44px;           /* minimum touch target size */
        text-align: left;
    }
    #hour-table td:last-child { border-bottom: none; }
    
    /* Ensure cell content (the value part) is visible, wraps if needed, and aligns left */
    #hour-table td > * { grid-column: 2; min-width: 0; overflow-wrap: anywhere; word-break: break-word; text-align: left; }

    /* Keep goal text and badge on one line in the value column */
    #hour-table td.hour-goal .goal-wrap { grid-column: 2; display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 6px; white-space: nowrap; min-width: 0; }
    /* Keep cumulative text + original/excess on one line in the value column */
    #hour-table td.cum-goal .cum-wrap { grid-column: 2; display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 6px; white-space: nowrap; min-width: 0; }

    /* Show labels using data-label attribute */
    #hour-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--accent);
        margin-right: 10px;
        max-width: 100%;
        text-align: left;
        line-height: 1.2;
        font-size: 0.85rem;
        /* Allow wrapping so long labels like "Cumulative goal" don't overflow */
        white-space: normal;
        word-break: break-word;
        grid-column: 1;
    }
    
    /* Value portion takes remaining space; align left in stacked layout */
    #hour-table td .hour-goal,
    #hour-table td .cum-goal {
        flex: 1 1 auto;
        text-align: left;
        min-width: 0;
    }

    /* Make the hour label act like a card header */
    #hour-table td.hour-label {
        display: block;
        font-weight: 800;
        font-size: 1.1rem;
        text-align: center;
        border-bottom: 2px solid var(--border);
        padding: 12px;
        background: linear-gradient(135deg, var(--hover), var(--surface));
        margin: 0 0 10px 0;
        border-radius: 10px;
        color: var(--text);
    }
    #hour-table td.hour-label::before { content: ""; display: none; }

    /* Content side in card rows */
    #hour-table td .hour-units,
    #hour-table td .notes { grid-column: 2; min-width: 0; }
    
    /* Ensure goal and cumulative goal cells show their content */
    /* Align numeric values to the left in value column for stacked layout */
    #hour-table td.hour-goal,
    #hour-table td.cum-goal { text-align: left; }
    #hour-table td.hour-goal > *,
    #hour-table td.cum-goal > * { text-align: left; min-width: 0; }

    /* Keep cumulative total and original inline and baseline-aligned - maintain grid but inline content */
    #hour-table td.cum-goal { 
        display: grid !important;
        grid-template-columns: var(--label-col) 1fr;
        align-items: center;
    }
    #hour-table td.cum-goal::before {
        grid-column: 1;
    }

    /* Remove Notes row entirely on phones/tablets */
    #hour-table td[data-label="Notes"] { display: none; }

    /* Make goal text and badges wrap nicely */
    #hour-table td.hour-goal,
    #hour-table td.cum-goal {
        white-space: normal;
    }
    /* Keep the parenthetical number inline beside totals */
    .hour-goal small, .cum-goal small {
        display: inline;
        margin-top: 0;
        margin-left: 6px;
        font-size: 0.85em;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* Inputs/notes full width within card row */
    #hour-table td[data-label="Units"] { 
        align-items: stretch; 
        display: grid !important; 
        grid-template-columns: minmax(120px, var(--label-col)) 1fr;
        overflow: hidden;
    }
    #hour-table input.hour-units { 
        width: 100%; min-width: 0; height: 40px; min-height: 40px; padding: 8px 12px;
        font-size: 1rem; border-radius: 8px; grid-column: 2; box-sizing: border-box; max-width: 100%;
        text-align: left; /* Keep input text left-aligned for easier typing */
    }
    #hour-table textarea.notes { 
        width: 100%; 
        min-width: 0; 
        text-align: left;
        min-height: 44px;
        padding: 8px 12px;
        border-radius: 8px;
    }

    /* Better badges in compact cards */
    .delta-positive, .delta-negative { 
        padding: 3px 10px; 
        font-size: 0.9em;
        border-radius: 8px;
        margin: 4px 0;
    }
    
    th {
        padding: 10px 6px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    
    td {
        padding: 8px 6px;
    }
    
    .hour-units {
        font-size: 0.9rem;
        padding: 6px 8px;
        min-height: 36px;
    }
    
    textarea.notes {
        font-size: 0.85rem;
        padding: 6px;
        min-height: 32px;
    }
    
    /* Status */
    .status {
        font-size: 0.85rem;
        padding: 8px 12px;
        margin: 12px 8px;
    }
    
    /* Empty state */
    .empty-state {
        padding: 40px 20px;
        margin: 12px 8px;
    }
    
    .empty-state-icon {
        font-size: 2.5rem;
    }
    
    .empty-state-title {
        font-size: 1.1rem;
    }
    
    .empty-state-text {
        font-size: 0.9rem;
    }
    
    /* Tabs */
    .tabs {
        gap: 4px;
        margin: 12px 0 8px;
    }
    
    .tab {
        padding: 8px 12px;
        font-size: 0.85rem;
        min-height: 40px;
    }
    
    /* Buttons */
    .btn {
        min-height: 44px;
        padding: 8px 16px;
    }
    
    .circle-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* Consistent label/value column split for tiny phones */
    #hour-table { --label-col: 42%; }
    /* In card mode, prevent container clipping and sticky interactions */
    #hour-table { background: transparent; box-shadow: none; border: none; border-radius: 0; overflow: visible; }
    #table-wrap table td.hour-label,
    #table-wrap table th:first-child { position: static !important; left: auto !important; box-shadow: none !important; z-index: auto !important; }
    /* Smaller phones */
    body {
        margin: 8px;
    }
    
    .modal-content {
        width: 100%;
        margin: 0;
        border-radius: 12px;
    }
    
    /* Header stacks vertically */
    header {
        padding: 0;
    }
    
    .app-title {
        font-size: 1.5rem;
    }
    
    .subtitle {
        font-size: 0.8rem;
    }
    
    .date-selector {
        flex-direction: row;
        gap: 6px;
        width: 100%;
    }
    
    .date-nav-btn {
        flex: 0 0 auto;
        padding: 10px 12px;
    }
    
    .date-input {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.85rem;
    }
    
    /* Controls stack completely */
    .controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .controls input,
    .controls button,
    .controls .dropdown,
    .controls label {
        width: 100%;
    }
    
    .controls .spacer {
        display: none;
    }
    
    #goal-input {
        min-width: 0;
    }
    
    .dropdown-menu {
        width: 100%;
        right: 0;
        left: 0;
    }
    
    /* User bar maintains fixed height */
    .user-bar {
        padding: 8px 10px;
        gap: 6px;
        height: 61px;
    }
    
    .user-bar > div {
        min-width: 0;
    }
    
    .user-bar > div:first-child {
        flex: 1;
        min-width: 0;
    }
    
    .user-bar > div:nth-child(2) {
        gap: 6px;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .user-bar-left {
        min-width: 0;
        flex: 1;
    }
    
    .user-bar-right {
        gap: 6px;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .user-bar-actions {
        margin-left: 0;
        gap: 6px;
    }
    
    .save-status {
        display: none; /* Hide on very small screens to save space */
    }
    
    /* Table becomes more compact */
    #table-wrap {
        margin: 0 -8px;
        overflow-x: visible; /* We'll stack rows instead of scrolling on very small screens */
    }
    
    /* Stack the table into mobile-friendly cards */
    #hour-table thead { display: none; }
    #hour-table tr {
        margin: 12px 0;
        border: 2px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        padding: 8px 12px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.1);
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    
    #hour-table tr:hover {
        /* No translate/scale to avoid layout shift on hover in stacked mode */
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        border-color: var(--accent);
    }
    #hour-table tr:active { transform: none; }

    #hour-table td {
        /* Grid layout avoids pushing content off-screen on tiny phones */
        display: grid;
        grid-template-columns: minmax(110px, var(--label-col)) 1fr;
        align-items: center;
        padding: 10px 8px;
        border-bottom: 1px solid var(--border);
        min-height: 44px;
        gap: 8px 12px;
        text-align: left;
    }
    #hour-table td:last-child { border-bottom: none; }
    
    /* Ensure cell content is visible and aligned left */
    #hour-table td > * { grid-column: 2; min-width: 0; overflow-wrap: anywhere; word-break: break-word; text-align: left; }

    /* Keep goal text and badge on one line in the value column */
    #hour-table td.hour-goal .goal-wrap { grid-column: 2; display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 6px; white-space: nowrap; min-width: 0; }
    /* Keep cumulative text + original/excess on one line in the value column */
    #hour-table td.cum-goal .cum-wrap { grid-column: 2; display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 6px; white-space: nowrap; min-width: 0; }

    /* Show labels using data-label attribute */
    #hour-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--accent);
        margin-right: 12px;
        text-align: left;
        font-size: 0.85rem;
        line-height: 1.2;
        /* Allow wrapping for longer labels */
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
        grid-column: 1;
    }
    
    /* Ensure goal cells display their content properly (tiny phones) */
    #hour-table td.hour-goal,
    #hour-table td.cum-goal { text-align: left; }
    #hour-table td.hour-goal > *,
    #hour-table td.cum-goal > * { text-align: left; min-width: 0; }

    /* Keep cumulative total and original inline and baseline-aligned (tiny phones) - maintain grid but inline content */
    #hour-table td.cum-goal { 
        display: grid !important;
        grid-template-columns: var(--label-col) 1fr;
        align-items: center;
    }
    #hour-table td.cum-goal::before {
        grid-column: 1;
    }

    /* Make the hour label act like a card header */
    #hour-table td.hour-label {
        display: block;
        font-weight: 800;
        font-size: 1.1rem;
        text-align: center;
        border-bottom: 2px solid var(--border);
        padding: 12px;
        background: linear-gradient(135deg, var(--hover), var(--surface));
        margin: 0 0 8px 0;
        border-radius: 10px;
    }
    #hour-table td.hour-label::before { content: ""; display: none; }

    /* Content side in card rows */
    #hour-table td .hour-units,
    #hour-table td .notes { 
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Inputs/notes full width within card row */
    #hour-table td[data-label="Units"] { 
        align-items: stretch; 
        display: grid !important; 
        grid-template-columns: var(--label-col) 1fr;
        overflow: hidden;
    }
    #hour-table input.hour-units { width: 100%; min-width: 0; height: 42px; padding: 10px 12px; font-size: 1rem; border-radius: 8px; grid-column: 2; box-sizing: border-box; max-width: 100%; text-align: left; }
    #hour-table textarea.notes { 
        width: 100%; 
        min-width: 0; 
        text-align: left;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 8px;
    }

    /* Reduce badge sizes inside mobile cards */
    .delta-positive, .delta-negative { 
        padding: 3px 10px; 
        font-size: 0.9em;
        margin: 4px 0;
    }
    /* Keep cumulative parenthetical inline beside the total */
    .hour-goal small, .cum-goal small { display: inline; margin-top: 0; margin-left: 6px; font-size: 0.85em; line-height: 1.1; white-space: nowrap; }

}

/* Removed overly-aggressive 1024px responsive overrides to prevent breakage between 1025px and 770px */

/* Tablet range: keep desktop table with horizontal scroll if needed */
@media (max-width: 1024px) and (min-width: 769px) {
    #table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Slightly tighter padding and font-size for better fit on tablets */
    #hour-table th, #hour-table td { padding: 10px 8px; }
    #hour-table { font-size: 0.95rem; }
    /* Balance column widths on tablets */
    #hour-table col.col-hour { width: 16%; }
    #hour-table col.col-goal { width: 22%; }
    #hour-table col.col-cum { width: 22%; }
    #hour-table col.col-units { width: 18%; }
    #hour-table col.col-notes { width: 22%; }
}

@media (max-width: 420px) {
    /* Small phones - keep same alignment as 480px, no need to override --label-col */
}

@media (max-width: 360px) {
    /* Extra small phones - keep same alignment as 480px, no need to override --label-col */
    
    .app-title {
        font-size: 1.3rem;
    }
    
    /* Allow tables to shrink fully on extra small phones */
    table { min-width: 0; width: 100%; }
    
    .date-nav-btn {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
}

@media (max-width:720px) {
    table { font-size:0.95rem; }
    .controls { flex-direction:column; align-items:flex-start; }
    input.hour-units { width:100%; }
    
    /* Responsive list styles */
    ul, ol {
        padding-left: 0;
        list-style: none;
    }
    
    li {
        background: var(--surface);
        margin-bottom: 12px;
        padding: 14px 16px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        border: 1px solid var(--border);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    li:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(0,0,0,0.1);
        border-color: var(--accent);
    }
    
    li:active {
        transform: scale(0.98);
    }
}

/* ...existing code... */