/* ============================================================
   GIFT BOT — «РАБОЧАЯ КОНСОЛЬ»
   Спокойный функциональный UI в духе профессиональных инструментов:
   нейтральный графит, волосяные границы, один акцент,
   быстрые отклики, плотная типографика. Ничего лишнего.

   🎨 Акцент легко перекрасить: поменяйте --ac и --ac-strong
   ============================================================ */

:root {
    /* Акцент (электрик-синий). Хотите другой? Например:
       фиолетовый: #8b6bff / #6f4fe0;  зелёный: #34c98e / #1fa874;
       розовый:   #f06ba8 / #d94f8f                                    */
    --ac: #5b8cff;
    --ac-strong: #3d63dd;
    --ac-soft: rgba(91, 140, 255, 0.13);
    --ac-ring: rgba(91, 140, 255, 0.28);

    --bg-primary: #101014;
    --bg-secondary: #16161c;
    --bg-card: #17171d;
    --bg-card-hover: #1d1d24;
    --text-primary: #f0f0f3;
    --text-secondary: #9b9ba4;
    --text-muted: #63636d;

    --accent-1: var(--ac);
    --accent-2: #8b6bff;
    --accent-3: #f0a24c;
    --accent-4: #3ecf8e;
    --green: #3ecf8e;
    --orange: #f0824c;
    --cyan: #43c6e8;
    --danger: #f1575f;
    --warning: #e5a13c;
    --text-2: #9b9ba4;

    --border: #232329;
    --border-strong: #2f2f37;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --radius: 12px;
    --radius-sm: 9px;

    --header-bg: rgba(16, 16, 20, 0.82);
    --nav-bg: rgba(16, 16, 20, 0.86);
    --overlay: rgba(255, 255, 255, 0.045);

    --font-display: 'Sora', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ☀️ СВЕТЛАЯ ТЕМА */
:root.light {
    --ac: #3d63dd;
    --ac-strong: #2c4cbd;
    --ac-soft: rgba(61, 99, 221, 0.1);
    --ac-ring: rgba(61, 99, 221, 0.22);

    --bg-primary: #f6f6f8;
    --bg-secondary: #efeff2;
    --bg-card: #ffffff;
    --bg-card-hover: #fbfbfc;
    --text-primary: #17171c;
    --text-secondary: #5d5d67;
    --text-muted: #9b9ba4;
    --text-2: #5d5d67;
    --border: #e4e4e9;
    --border-strong: #d4d4db;
    --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.06);
    --shadow: 0 8px 24px rgba(20, 20, 30, 0.10);
    --header-bg: rgba(246, 246, 248, 0.86);
    --nav-bg: rgba(255, 255, 255, 0.88);
    --overlay: rgba(20, 20, 30, 0.045);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* едва заметное акцентное свечение сверху */
body::before {
    content: '';
    position: fixed;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 55%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(closest-side, var(--ac-soft), transparent);
}

button { font-family: inherit; }
::selection { background: var(--ac-ring); }

.app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: 13px 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left { display: flex; align-items: center; gap: 11px; }

.logo {
    width: 38px;
    height: 38px;
    background: var(--ac-soft);
    border: 1px solid var(--ac-ring);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.header-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.header-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}

.api-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    background: var(--overlay);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: dot-pulse 2.4s ease-in-out infinite;
}
.status-dot.error { background: var(--danger); }
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.35); }
    50% { box-shadow: 0 0 0 5px rgba(62, 207, 142, 0); }
}

/* ============================================================
   CONTENT / ЭКРАНЫ
   ============================================================ */
.content {
    flex: 1;
    padding: 18px 20px;
    padding-bottom: 108px;
}

.screen { display: none; }
.screen.active { display: block; animation: screen-in .22s ease both; }
@keyframes screen-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.screen.active > * { animation: rise .3s ease both; }
.screen.active > *:nth-child(1) { animation-delay: .02s; }
.screen.active > *:nth-child(2) { animation-delay: .05s; }
.screen.active > *:nth-child(3) { animation-delay: .08s; }
.screen.active > *:nth-child(4) { animation-delay: .11s; }
.screen.active > *:nth-child(5) { animation-delay: .14s; }
.screen.active > *:nth-child(6) { animation-delay: .17s; }
@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 24px 0 10px;
}

/* ============================================================
   STATS GRID
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--border);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.stat-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.stat-card:active { transform: scale(0.985); }

/* стрелка на кликабельной карточке */
#card-completed .stat-info::after {
    content: '›';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color .15s, transform .15s;
}
#card-completed:hover .stat-info::after {
    color: var(--ac);
    transform: translateY(-50%) translateX(2px);
}

.stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    border: 1px solid transparent;
}

/* мягкие тонированные плашки вместо градиентов */
.gradient-1 { background: var(--ac-soft);              border-color: var(--ac-ring); }
.gradient-2 { background: rgba(139, 107, 255, 0.12);   border-color: rgba(139, 107, 255, 0.28); }
.gradient-3 { background: rgba(240, 162, 76, 0.12);    border-color: rgba(240, 162, 76, 0.28); }
.gradient-4 { background: rgba(62, 207, 142, 0.12);    border-color: rgba(62, 207, 142, 0.28); }

.stat-info { display: flex; flex-direction: column; min-width: 0; }

.stat-value {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ============================================================
   API CARD
   ============================================================ */
.api-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 18px;
    border: 1px solid var(--border);
}

.api-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.api-card-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
}

.api-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(62, 207, 142, 0.1);
    color: var(--green);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
}
.api-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.api-badge.error {
    background: rgba(241, 87, 95, 0.1);
    color: var(--danger);
}

.api-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 16px;
}

.api-metric {
    text-align: center;
    padding: 2px 8px;
}
.api-metric + .api-metric { border-left: 1px solid var(--border); }

.api-metric-value {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.api-metric-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.api-progress {
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 2px;
    overflow: hidden;
}

.api-progress-bar {
    height: 100%;
    background: var(--ac);
    border-radius: 2px;
    transition: width .5s ease;
}

/* ============================================================
   TASKS LIST
   ============================================================ */
.tasks-list { display: flex; flex-direction: column; gap: 10px; }

.task-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 14px;
    border: 1px solid var(--border);
    transition: border-color .15s, transform .15s, box-shadow .15s;
    animation: rise .3s ease both;
}
.task-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.task-card:active { transform: scale(0.99); }

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 11px;
}

.task-title { font-size: 14px; font-weight: 600; }

.task-target {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    word-break: break-all;
}

/* компактные цветные чипы */
.task-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.task-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.task-status.active         { background: rgba(62,207,142,.1);  color: var(--green); }
.task-status.completed      { background: rgba(62,207,142,.1);  color: var(--green); }
.task-status.paused         { background: rgba(229,161,60,.12); color: var(--warning); }
.task-status.waiting_accept { background: rgba(240,130,76,.12); color: var(--orange); }
.task-status.scouting       { background: rgba(67,198,232,.12); color: var(--cyan); }
.task-status.cancelled      { background: rgba(241,87,95,.1);   color: var(--danger); }

.task-progress { margin-bottom: 11px; }

.task-progress-bar {
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 7px;
}

.task-progress-fill {
    height: 100%;
    background: var(--ac);
    border-radius: 2px;
    transition: width .5s ease;
}

.task-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.task-actions { display: flex; gap: 8px; }

.task-btn {
    flex: 1;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s, background .15s;
}
.task-btn:active { transform: scale(0.96); }
.task-btn.resume {
    background: rgba(62, 207, 142, 0.1);
    color: var(--green);
}
.task-btn.resume:hover { background: rgba(62, 207, 142, 0.18); }
.task-btn.cancel {
    background: rgba(241, 87, 95, 0.1);
    color: var(--danger);
}
.task-btn.cancel:hover { background: rgba(241, 87, 95, 0.18); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 500;
}
.empty-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
    opacity: .55;
}

/* ============================================================
   FILTER TABS
   ============================================================ */
.filter-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
    padding: 7px 13px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
}
.filter-tab:hover { background: var(--overlay); color: var(--text-primary); }
.filter-tab:active { transform: scale(.96); }
.filter-tab.active {
    background: var(--ac-soft);
    border-color: var(--ac-ring);
    color: var(--ac);
}

/* ============================================================
   FORM
   ============================================================ */
.form-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 22px 20px;
    border: 1px solid var(--border);
}

.form-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.form-group { margin-bottom: 18px; }

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 7px;
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 16px; /* без автозума iOS */
    font-family: var(--font-body);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-ring);
}
.form-input::placeholder { color: var(--text-muted); }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Segment Control */
.segment-control {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 3px;
}

.segment-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    transition: all .15s ease;
}
.segment-btn.active {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45);
}

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

/* Qty Presets */
.qty-presets {
    display: flex;
    gap: 7px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.qty-preset {
    padding: 8px 15px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.qty-preset:hover { background: var(--overlay); color: var(--text-primary); }
.qty-preset:active { transform: scale(.94); }
.qty-preset.active {
    background: var(--ac-soft);
    border-color: var(--ac-ring);
    color: var(--ac);
}

/* Buttons */
.btn-primary {
    width: 100%;
    padding: 14px;
    background: var(--ac);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .12s, box-shadow .15s;
    box-shadow: 0 4px 14px var(--ac-ring);
}
.btn-primary:hover { background: var(--ac-strong); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary {
    width: 100%;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
    transition: border-color .15s, background .15s, transform .12s;
}
.btn-secondary:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
.btn-secondary:active { transform: scale(.98); }

/* Lookup results */
.lookup-results {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
}

.lookup-item {
    padding: 12px 13px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    position: relative;
    transition: border-color .15s, background .15s;
}
.lookup-item:hover { border-color: var(--border-strong); }
.lookup-item.selected {
    border-color: var(--ac);
    background: var(--ac-soft);
}
.lookup-item.selected::after {
    content: '✓';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ac);
    font-weight: 700;
}
.lookup-item .lot-name { font-weight: 600; }
.lookup-item .lot-info { color: var(--text-muted); font-size: 11px; margin-top: 3px; }

/* PID status */
.pid-status {
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
}
.pid-status.found    { background: rgba(62,207,142,.1);  color: var(--green); }
.pid-status.notfound { background: rgba(229,161,60,.12); color: var(--warning); }
.pid-status.loading  { background: var(--overlay);       color: var(--text-2); }

/* ============================================================
   CHARTS
   ============================================================ */
.chart-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 18px;
    border: 1px solid var(--border);
    margin-bottom: 14px;
}

.chart-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--nav-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    z-index: 100;
    transition: transform .3s ease;
}
.bottom-nav.nav-hidden { transform: translateX(-50%) translateY(110%); }

.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 22px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, transform .12s;
}
.nav-item:active { transform: scale(.92); }

/* мягкая тонированная плашка за иконкой активного пункта */
.nav-item::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%) scale(.6);
    width: 44px;
    height: 26px;
    border-radius: 9px;
    background: var(--ac-soft);
    opacity: 0;
    transition: opacity .2s, transform .2s ease;
}
.nav-item.active { color: var(--ac); }
.nav-item.active::before { opacity: 1; transform: translateX(-50%) scale(1); }

.nav-icon {
    position: relative;
    z-index: 1;
    font-size: 19px;
    transition: transform .2s ease;
}
.nav-item.active .nav-icon { transform: translateY(-1px); }

.nav-label {
    position: relative;
    z-index: 1;
    font-size: 10.5px;
    font-weight: 600;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 13px 20px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--shadow);
    opacity: 0;
    transition: transform .3s cubic-bezier(.22,1.1,.32,1), opacity .25s ease;
    z-index: 200;
    border: 1px solid var(--border);
    max-width: calc(100% - 40px);
    text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { border-color: rgba(62, 207, 142, 0.4); }
.toast.error   { border-color: rgba(241, 87, 95, 0.45); }

/* ============================================================
   FAB
   ============================================================ */
.fab-create {
    position: fixed;
    right: 16px;
    bottom: 92px; /* над нижней навигацией */
    width: 50px;
    height: 50px;
    border-radius: 15px;
    border: none;
    background: var(--ac);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 95;
    box-shadow: 0 6px 20px var(--ac-ring), var(--shadow-sm);
    transition: transform .15s, background .15s, opacity .2s;
}
.fab-create:hover { background: var(--ac-strong); transform: translateY(-2px); }
.fab-create:active { transform: scale(.9); }
.fab-create.hidden { opacity: 0; pointer-events: none; transform: scale(.5); }

/* ============================================================
   КНОПКА ВСТАВКИ ИЗ БУФЕРА
   ============================================================ */
.input-with-btn { position: relative; }
.input-with-btn .form-input { padding-right: 50px; }

.paste-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: var(--ac-soft);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s, background .15s;
}
.paste-btn:hover { background: var(--ac-ring); }
.paste-btn:active { transform: translateY(-50%) scale(.85); }

/* ============================================================
   ДОСТУПНОСТЬ
   ============================================================ */
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
}

@media (hover: none) {
    .stat-card:hover,
    .task-card:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}