/* DS GO! Mobile-First Stylesheet - Dark Mode */

/* Color Palette */
:root {
    --ink-black: #0D1117;
    --indigo-ink: #3B1F6E;
    --regal-navy: #1A3F6F;
    --fresh-sky: #0EA5E9;
    --shadow-gray: #2D2D3A;
    --white: #FFFFFF;
    --light-gray: #F5F5F5;
    --dark-bg: #0D1117;
    --dark-surface: #1a1a2e;
    --dark-border: #3a3a4a;
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8C8;
}

/* ── Theme Overrides ──────────────────────────────────────── */

body[data-theme="light"] {
    --dark-bg: #ECECF4;
    --dark-surface: #FFFFFF;
    --dark-border: #D0D0E0;
    --text-primary: #1A1A2E;
    --text-secondary: #5A5A80;
    --shadow-gray: #C8C8D8;
}

body[data-theme="midnight"] {
    --dark-bg: #06060F;
    --dark-surface: #0E0E22;
    --dark-border: #252548;
    --text-primary: #E8E0FF;
    --text-secondary: #9090C8;
    --indigo-ink: #5B2FBE;
    --regal-navy: #2A1A6E;
    --fresh-sky: #A78BFA;
}

body[data-theme="rose"] {
    --dark-bg: #0F080C;
    --dark-surface: #1C1018;
    --dark-border: #3D2535;
    --text-primary: #FFE4E8;
    --text-secondary: #C890A8;
    --indigo-ink: #7F1D3C;
    --regal-navy: #4C1130;
    --fresh-sky: #F43F5E;
}

body[data-theme="estate"] {
    --dark-bg: #0F0F0D;
    --dark-surface: #1A1714;
    --dark-border: #312A1C;
    --text-primary: #F0DFA0;
    --text-secondary: #9A8455;
    --indigo-ink: #3A2E14;
    --regal-navy: #261E0C;
    --fresh-sky: #C8A245;
    --shadow-gray: #2A2318;
}

body[data-theme="ocean"] {
    --dark-bg: #040D16;
    --dark-surface: #091828;
    --dark-border: #12304A;
    --text-primary: #CCE8F8;
    --text-secondary: #6AAED4;
    --indigo-ink: #0A3A5C;
    --regal-navy: #062540;
    --fresh-sky: #38BDF8;
}

body[data-theme="forest"] {
    --dark-bg: #040E06;
    --dark-surface: #091A0C;
    --dark-border: #133320;
    --text-primary: #C8EDD0;
    --text-secondary: #64A878;
    --indigo-ink: #0A3A1A;
    --regal-navy: #062510;
    --fresh-sky: #4ADE80;
}

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

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-primary);
}

body {
    display: flex;
    flex-direction: column;
}

/* Header */
h1 {
    background: linear-gradient(135deg, var(--indigo-ink) 0%, var(--regal-navy) 100%);
    color: var(--white);
    padding: 20px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

h2 {
    color: var(--fresh-sky);
    margin: 20px 0 15px 0;
    font-size: 24px;
}

h3 {
    color: var(--fresh-sky);
}

.highlight-name {
    color: #A78BFA;
}

.role-subtitle {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: -14px;
    margin-bottom: 10px;
}

/* Container */
main, .content {
    flex: 1;
    padding: 0 16px 20px 16px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* Flash Messages */
.flashes {
    list-style: none;
    margin-bottom: 20px;
}

.flashes li {
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-weight: 500;
}

.flashes li.success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #86EFAC;
    border-left: 4px solid #10B981;
}

.flashes li.error {
    background-color: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
    border-left: 4px solid #EF4444;
}

/* Forms */
form {
    display: flex;
    flex-direction: column;
}

form > div {
    margin-bottom: 16px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    background-color: var(--dark-surface);
    color: var(--text-primary);
    transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="date"]::placeholder {
    color: var(--text-secondary);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus {
    outline: none;
    border-color: var(--fresh-sky);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

input[type="checkbox"] {
    margin-right: 8px;
    accent-color: var(--fresh-sky);
}

input[type="radio"] {
    accent-color: var(--fresh-sky);
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-weight: normal;
    margin-bottom: 0;
    color: var(--text-primary);
}

/* Buttons */
button,
input[type="submit"],
.btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}

input[type="submit"] {
    background: linear-gradient(135deg, var(--fresh-sky) 0%, var(--regal-navy) 100%);
    color: var(--white);
    margin-top: 10px;
    font-weight: 600;
}

input[type="submit"]:active {
    transform: scale(0.98);
}

/* Radio and Checkbox Styling */
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}

.radio-group,
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    background-color: var(--dark-surface);
}

.radio-option:hover,
.checkbox-option:hover {
    background-color: rgba(14, 165, 233, 0.1);
    border-color: var(--fresh-sky);
}

.radio-option label,
.checkbox-option label {
    margin: 0;
    cursor: pointer;
}

/* Links */
a {
    color: var(--fresh-sky);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

a:active {
    color: var(--indigo-ink);
}

/* Info Sections */
p {
    margin: 12px 0;
    line-height: 1.6;
    font-size: 16px;
    color: var(--text-primary);
}

hr {
    border: none;
    border-top: 2px solid var(--dark-border);
    margin: 20px 0;
}

/* Home Page Buttons */
.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 20px 0;
}

.grid-button {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--white);
    text-align: center;
    padding: 16px;
    word-wrap: break-word;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.grid-button.primary {
    background: linear-gradient(135deg, var(--fresh-sky) 0%, var(--regal-navy) 100%);
}

.grid-button.secondary {
    background: linear-gradient(135deg, var(--indigo-ink) 0%, var(--regal-navy) 100%);
}

.grid-button.danger {
    background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
}

.grid-button {
    position: relative;
}

.task-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #EF4444;
    color: #fff;
    border-radius: 50%;
    min-width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.55);
    pointer-events: none;
    border: 2px solid var(--dark-bg);
    z-index: 10;
}

.grid-button:active:not(:disabled) {
    transform: scale(0.95);
}

.grid-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Error Messages */
ul {
    list-style: none;
    margin: 8px 0 0 0;
}

ul li {
    color: #FCA5A5;
    font-size: 14px;
    margin-top: 4px;
}

/* Pair Status Section */
.pair-status {
    background: var(--dark-surface);
    padding: 16px;
    border-radius: 12px;
    margin: 16px 0;
    border-left: 4px solid var(--fresh-sky);
    border: 2px solid var(--dark-border);
    border-left: 4px solid var(--fresh-sky);
}

.pair-status.unpaired {
    border-left-color: var(--text-secondary);
}

.pair-status h3 {
    color: var(--fresh-sky);
    margin-bottom: 8px;
}

.pair-status p {
    color: var(--text-primary);
}

/* Logout Section */
.logout-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--dark-border);
    text-align: center;
}

.logout-section a {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--indigo-ink) 0%, var(--regal-navy) 100%);
    color: var(--white);
    border-radius: 8px;
    transition: all 0.3s;
    font-weight: 600;
}

.logout-section a:active {
    transform: scale(0.98);
}

/* Responsive Design */
@media (min-width: 640px) {
    h1 {
        font-size: 32px;
        padding: 24px;
    }

    h2 {
        font-size: 28px;
    }

    main, .content {
        padding: 0 24px 24px 24px;
        max-width: 700px;
    }

    label {
        font-size: 15px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    select {
        font-size: 16px;
        padding: 14px;
    }

    button,
    input[type="submit"],
    .btn {
        font-size: 16px;
        padding: 14px 24px;
    }

    .button-grid {
        gap: 16px;
    }

    .grid-button {
        font-size: 16px;
        padding: 20px;
    }
}

@media (min-width: 768px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 500px;
        margin: 30px auto;
    }
}

/* Rules Page */
.page-header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wk-hist-btn {
    font-size: 13px;
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--dark-border);
    border-radius: 20px;
    padding: 5px 12px;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.wk-hist-btn:hover { border-color: var(--fresh-sky); color: var(--fresh-sky); }

.back-btn {
    display: inline-block;
    padding: 8px 14px;
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.3s;
}

.back-btn:active {
    color: var(--fresh-sky);
    border-color: var(--fresh-sky);
}

.add-rule-details {
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.add-rule-summary {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    color: var(--fresh-sky);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.add-rule-summary::-webkit-details-marker { display: none; }

.add-rule-form {
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-rule-form > div {
    margin-bottom: 0;
}

.add-rule-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    background-color: var(--dark-bg);
    color: var(--text-primary);
    resize: vertical;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.add-rule-form textarea:focus {
    outline: none;
    border-color: var(--fresh-sky);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.add-rule-form input[type="submit"] {
    margin-top: 4px;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rule-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-left: 4px solid var(--indigo-ink);
    border-radius: 12px;
    padding: 14px 12px;
    transition: border-color 0.2s;
}

.rule-card:active {
    border-left-color: var(--fresh-sky);
}

.drag-handle {
    color: var(--text-secondary);
    font-size: 18px;
    cursor: grab;
    padding: 4px 2px;
    flex-shrink: 0;
    touch-action: none;
    letter-spacing: -2px;
}

.drag-handle:active {
    cursor: grabbing;
}

.rule-content {
    flex: 1;
    min-width: 0;
}

.rule-number {
    color: var(--text-secondary);
    font-weight: 400;
    margin-right: 2px;
}

.rule-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.rule-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.hidden {
    display: none !important;
}

.rule-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.edit-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 2px solid rgba(99, 102, 241, 0.3);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.edit-btn:active {
    background: rgba(99, 102, 241, 0.35);
    transform: scale(0.95);
}

.edit-inline-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.edit-title-input {
    width: 100%;
    background: var(--dark-bg, #0f0f0f);
    border: 2px solid var(--dark-border, #2a2a2a);
    border-radius: 8px;
    color: var(--text-primary, #f0f0f0);
    font-size: 14px;
    font-weight: 700;
    padding: 6px 10px;
    box-sizing: border-box;
}

.edit-desc-input {
    width: 100%;
    background: var(--dark-bg, #0f0f0f);
    border: 2px solid var(--dark-border, #2a2a2a);
    border-radius: 8px;
    color: var(--text-secondary, #aaa);
    font-size: 13px;
    padding: 6px 10px;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

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

.edit-save-btn {
    padding: 5px 14px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border: 2px solid rgba(99, 102, 241, 0.4);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.edit-save-btn:active {
    background: rgba(99, 102, 241, 0.4);
}

.edit-cancel-btn {
    padding: 5px 14px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #aaa);
    border: 2px solid var(--dark-border, #2a2a2a);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-form {
    flex-shrink: 0;
}

.delete-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    color: #FCA5A5;
    border: 2px solid rgba(239, 68, 68, 0.3);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.delete-btn:active {
    background: rgba(239, 68, 68, 0.35);
    transform: scale(0.95);
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 0;
    font-size: 15px;
}

/* ===================== Tasks Page ===================== */

.add-task-details {
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.add-task-summary {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    color: var(--fresh-sky);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.add-task-summary::-webkit-details-marker { display: none; }

.add-task-form {
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-task-form > div { margin-bottom: 0; }

.add-task-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background-color: var(--dark-bg);
    color: var(--text-primary);
    resize: vertical;
    transition: border-color 0.3s;
}

.add-task-form textarea:focus {
    outline: none;
    border-color: var(--fresh-sky);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.add-task-form input[type="submit"] { margin-top: 4px; }

/* Task type radio row */
.task-type-row {
    display: flex;
    gap: 12px;
}

.type-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--dark-surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

.type-option:has(input:checked) {
    border-color: var(--fresh-sky);
    color: var(--fresh-sky);
    background: rgba(14, 165, 233, 0.08);
}

.type-option input[type="radio"] {
    accent-color: var(--fresh-sky);
    width: 16px;
    height: 16px;
}

/* Day checkboxes */
.days-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.day-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--dark-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
    flex: 1;
    min-width: 40px;
}

.day-check:has(input:checked) {
    border-color: #10B981;
    color: #86EFAC;
    background: rgba(16, 185, 129, 0.1);
}

.day-check input[type="checkbox"] {
    accent-color: #10B981;
    width: 14px;
    height: 14px;
    margin: 0;
}

/* Section headers */
.tasks-section-header {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 20px 0 10px 0;
}

/* Task list container */
.tasks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* DOM task card */
.task-card {
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-left: 4px solid #10B981;
    border-radius: 12px;
    padding: 14px 12px;
    overflow: hidden;
}

.task-view {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-content {
    flex: 1;
    min-width: 0;
}

.task-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.task-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 6px 0;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.day-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.15);
    color: #86EFAC;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.due-date-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.task-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* Inline task edit form */
.task-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 2px solid var(--dark-border);
}

.task-edit-form input[type="date"] {
    padding: 6px 10px;
    font-size: 14px;
}

/* Submissive task cards */
.sub-tasks-list .task-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border-left-color: var(--indigo-ink);
}

.sub-tasks-list .task-card.completed {
    opacity: 0.65;
    border-left-color: #10B981;
}

.sub-tasks-list .task-card.completed .task-title {
    text-decoration: line-through;
}

.complete-form { flex-shrink: 0; }

.complete-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid var(--dark-border);
    background: transparent;
    color: transparent;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
    width: 36px;
}

.complete-btn.done {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.2);
    color: #86EFAC;
}

.complete-btn:active {
    transform: scale(0.9);
}

/* Today label / progress */
.today-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--fresh-sky);
    margin: 0 0 4px 0;
}

.progress-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

/* Weekly schedule button */
.weekly-link-section {
    margin-top: 24px;
}

.weekly-btn {
    display: block;
    text-align: center;
    padding: 14px;
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-radius: 12px;
    color: var(--fresh-sky);
    font-weight: 600;
    font-size: 15px;
    transition: border-color 0.2s;
}

.weekly-btn:active {
    border-color: var(--fresh-sky);
}

/* ===================== Weekly View ===================== */

.week-ongoing-section {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--dark-border);
}

.week-day-section {
    margin-bottom: 20px;
}

.week-day-section.week-day-today .week-day-header {
    color: var(--fresh-sky);
}

.week-day-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--dark-border);
}

.today-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(14, 165, 233, 0.15);
    color: var(--fresh-sky);
    border: 1px solid rgba(14, 165, 233, 0.3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.week-day-tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.week-task-card {
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-left: 4px solid #10B981;
    border-radius: 10px;
    padding: 10px 12px;
}

.week-task-card.week-task-one-time {
    border-left-color: var(--fresh-sky);
}

.week-task-meta {
    margin-bottom: 4px;
}

.week-empty {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0 4px 4px;
    opacity: 0.6;
}

/* ===================== Day Groups ===================== */

.day-group {
    margin-bottom: 6px;
}

.group-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 2px 6px 2px;
}

.group-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.day-group-today .group-label {
    color: var(--fresh-sky);
}

.group-date-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Non-today groups and their cards are visually dimmed */
.day-group-other .task-card {
    opacity: 0.52;
    border-left-color: var(--dark-border);
    transition: opacity 0.2s;
}

.day-group-other .task-card:hover {
    opacity: 0.85;
}

.sortable-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ongoing-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

/* Ongoing / expired badges */
.ongoing-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.expired-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.group-empty {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.5;
    padding: 6px 2px;
}

/* Today completion chip (DOM task cards) */
.today-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.today-chip.done {
    background: rgba(16, 185, 129, 0.15);
    color: #86EFAC;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.today-chip.missed {
    background: rgba(239, 68, 68, 0.1);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* History link button */
.history-link-section {
    margin-top: 24px;
}

.history-link-btn {
    display: block;
    text-align: center;
    padding: 14px;
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 15px;
    transition: border-color 0.2s, color 0.2s;
}

.history-link-btn:active {
    border-color: var(--fresh-sky);
    color: var(--fresh-sky);
}

/* ===================== History Page ===================== */

.history-sub-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.history-scroll {
    overflow-x: auto;
    border-radius: 12px;
    border: 2px solid var(--dark-border);
    margin-top: 4px;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
    font-size: 13px;
}

.history-table thead th {
    background: var(--dark-surface);
    padding: 8px 4px;
    border-bottom: 2px solid var(--dark-border);
    border-right: 1px solid var(--dark-border);
}

.history-table tbody td {
    border-bottom: 1px solid var(--dark-border);
    border-right: 1px solid var(--dark-border);
    padding: 0;
}

.hist-task-col {
    text-align: left;
    padding: 10px 12px !important;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 130px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    left: 0;
    background: var(--dark-bg);
    z-index: 1;
}

.history-table thead .hist-task-col {
    background: var(--dark-surface);
}

.hist-date-col {
    min-width: 34px;
    width: 34px;
    text-align: center;
    vertical-align: middle;
}

.hist-date-col.hist-col-today {
    background: rgba(14, 165, 233, 0.08);
}

.hist-wd {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1.2;
}

.hist-day {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

.hist-col-today .hist-wd,
.hist-col-today .hist-day {
    color: var(--fresh-sky);
}

.hist-cell {
    text-align: center;
    vertical-align: middle;
    height: 38px;
    font-size: 14px;
    font-weight: 700;
}

.hist-done {
    color: #86EFAC;
    background: rgba(16, 185, 129, 0.12);
}

.hist-missed {
    color: rgba(252, 165, 165, 0.7);
    background: rgba(239, 68, 68, 0.07);
}

.hist-na {
    color: transparent;
    background: transparent;
}

.hist-section-row td {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--dark-surface);
    border-bottom: 1px solid var(--dark-border);
}

/* Legend */
.hist-legend {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.hist-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.hist-cell.sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid var(--dark-border);
}

/* ===================== Report Card ===================== */

.rc-period-label {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 16px;
}

.rc-grade-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 24px 16px;
    margin-bottom: 24px;
    gap: 4px;
}

.rc-grade-letter {
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
}

.rc-grade-score {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.85;
}

.rc-grade-a { background: rgba(16, 185, 129, 0.15); border: 2px solid #10B981; color: #10B981; }
.rc-grade-b { background: rgba(14, 165, 233, 0.15); border: 2px solid #0EA5E9; color: #0EA5E9; }
.rc-grade-c { background: rgba(245, 158, 11, 0.15); border: 2px solid #F59E0B; color: #F59E0B; }
.rc-grade-d { background: rgba(249, 115, 22, 0.15); border: 2px solid #F97316; color: #F97316; }
.rc-grade-f { background: rgba(239, 68, 68, 0.15);  border: 2px solid #EF4444; color: #EF4444; }

.rc-rules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.rc-rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 10px;
    padding: 10px 14px;
}

.rc-rule-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.rc-rule-num {
    color: var(--text-secondary);
    font-size: 13px;
    flex-shrink: 0;
}

.rc-rule-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-score-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.rc-score-input {
    width: 54px;
    text-align: center;
    background: var(--dark-bg);
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    padding: 6px 4px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.rc-score-input::-webkit-inner-spin-button,
.rc-score-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.rc-score-input:focus {
    outline: none;
    border-color: var(--fresh-sky);
}

.rc-score-denom {
    font-size: 13px;
    color: var(--text-secondary);
}

.rc-score-readonly {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.rc-score-val {
    font-size: 20px;
    font-weight: 800;
    min-width: 28px;
    text-align: right;
}

.score-high { color: #10B981; }
.score-mid  { color: #F59E0B; }
.score-low  { color: #EF4444; }

.rc-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    margin-bottom: 24px;
}

.rc-score-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--dark-surface);
    border: 2px solid var(--fresh-sky);
    color: var(--fresh-sky);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.rc-score-btn:active { opacity: 0.75; }

.rc-submit-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #10B981, #0EA5E9);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.rc-submit-btn:active { opacity: 0.75; }

.rc-cooldown-msg {
    text-align: center;
    padding: 24px 16px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    margin-bottom: 24px;
    color: var(--text-secondary);
}

.rc-next-date {
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.rc-history-section {
    margin-top: 8px;
}

.rc-history-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.rc-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rc-history-card-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.rc-history-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text-primary);
    flex: 1;
}

.rc-history-card:active { opacity: 0.7; }

.rc-delete-form { display: flex; }

.rc-delete-btn {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid #EF4444;
    color: #EF4444;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 16px;
    cursor: pointer;
}

.rc-delete-btn:active { opacity: 0.7; }

.rc-hist-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    flex-shrink: 0;
}

.rc-hist-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.rc-hist-period {
    font-size: 13px;
    color: var(--text-secondary);
}

.rc-hist-score {
    font-size: 14px;
    font-weight: 600;
}

.rc-hist-arrow {
    font-size: 22px;
    color: var(--text-secondary);
}

.rc-submitted-date {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* ===================== Rule Changes ===================== */

.pending-intro {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.pending-intro strong { color: var(--text-primary); }

.pending-changes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.pending-card {
    background: var(--dark-surface);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid var(--dark-border);
}

.change-added  { border-left: 4px solid #10B981; }
.change-removed { border-left: 4px solid #EF4444; }
.change-edited  { border-left: 4px solid #F59E0B; }

.change-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-added   { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.badge-removed { background: rgba(239, 68, 68, 0.15);  color: #EF4444; }
.badge-edited  { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }

.added-text {
    color: #10B981;
}

.removed-text {
    color: #EF4444;
    text-decoration: line-through;
    opacity: 0.85;
}

.change-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.change-desc {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.change-before { margin-bottom: 6px; }
.change-after  { margin-top: 6px; }

.change-arrow {
    text-align: center;
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1;
}

.approve-form { margin-bottom: 0; }

.approve-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #10B981, var(--regal-navy));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.approve-btn:active { opacity: 0.8; }

/* ===================== Check In ===================== */

.checkin-prompt {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.mood-picker {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 18px;
}

.mood-option {
    flex: 1;
    cursor: pointer;
}

.mood-option input[type="radio"] {
    display: none;
}

.mood-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 12px;
    border: 2px solid var(--dark-border);
    background: var(--dark-surface);
    transition: border-color 0.15s, background 0.15s;
}

.mood-option input[type="radio"]:checked + .mood-btn {
    border-color: var(--fresh-sky);
    background: rgba(14, 165, 233, 0.12);
}

.mood-emoji {
    font-size: 24px;
    line-height: 1;
}

.mood-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.checkin-textarea {
    width: 100%;
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    padding: 12px 14px;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 14px;
}

.checkin-textarea:focus {
    outline: none;
    border-color: var(--fresh-sky);
}

.checkin-submit-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--fresh-sky), var(--indigo-ink));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 28px;
}

.checkin-submit-btn:active { opacity: 0.8; }

.checkin-history { display: flex; flex-direction: column; gap: 10px; }

.checkin-history-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.checkin-sub-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.checkin-card {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-left: 4px solid var(--dark-border);
    border-radius: 12px;
    padding: 12px 14px;
}

.checkin-unread {
    border-left-color: var(--fresh-sky);
}

.checkin-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.checkin-mood-emoji { font-size: 20px; }

.checkin-mood-label {
    font-size: 14px;
    font-weight: 700;
    flex: 1;
}

.checkin-date {
    font-size: 11px;
    color: var(--text-secondary);
}

.checkin-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.checkin-form { margin-bottom: 0; }

/* ===================== Settings ===================== */

.settings-section {
    margin-bottom: 28px;
}

.settings-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-left: 4px;
}

.settings-card {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
}

.settings-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Theme Swatches */
.theme-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.swatch {
    background: none;
    border: 2px solid var(--dark-border);
    border-radius: 12px;
    padding: 10px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s;
}

.swatch-active {
    border-color: var(--fresh-sky);
}

.swatch-preview {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: block;
}

.dark-preview     { background: linear-gradient(135deg, #0D1117 50%, #3B1F6E); }
.light-preview    { background: linear-gradient(135deg, #ECECF4 50%, #1A3F6F); }
.midnight-preview { background: linear-gradient(135deg, #06060F 50%, #5B2FBE); }
.rose-preview     { background: linear-gradient(135deg, #0F080C 50%, #F43F5E); }
.estate-preview   { background: linear-gradient(135deg, #0F0F0D 50%, #C8A245); }
.ocean-preview    { background: linear-gradient(135deg, #040D16 50%, #38BDF8); }
.forest-preview   { background: linear-gradient(135deg, #040E06 50%, #4ADE80); }

.swatch-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.swatch-active .swatch-name {
    color: var(--fresh-sky);
}

/* Site header logo */
.site-header-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.header-icon-img  { height: 44px; width: 44px; border-radius: 10px; }

/* Admin */
.admin-status-open   { color: var(--fresh-sky); }
.admin-status-closed { color: #e05050; }
.admin-user-actions  { display: flex; gap: 8px; margin-top: 10px; }
.admin-user-actions form { flex: 1; }

/* Account Forms */
.settings-inline-form {
    display: flex;
    gap: 10px;
}

.settings-stacked-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-text-input {
    flex: 1;
    background: var(--dark-bg);
    border: 2px solid var(--dark-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    padding: 10px 12px;
    font-family: inherit;
}

.settings-text-input:focus {
    outline: none;
    border-color: var(--fresh-sky);
}

.settings-save-btn {
    background: var(--fresh-sky);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.settings-save-btn:active { opacity: 0.8; }

.settings-stacked-form .settings-save-btn {
    width: 100%;
    padding: 12px;
    margin-top: 2px;
}

/* Info Card */
.settings-info-card { padding: 0; overflow: hidden; }

.settings-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dark-border);
}

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

.settings-info-key {
    font-size: 13px;
    color: var(--text-secondary);
}

.settings-info-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.pair-code-display {
    font-family: monospace;
    font-size: 16px;
    letter-spacing: 0.15em;
    color: var(--fresh-sky);
}

/* ===================== App Toggles & Apps Page ===================== */

.app-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
}

.app-toggle-row-border {
    border-bottom: 1px solid var(--dark-border);
}

.app-toggle-info { flex: 1; min-width: 0; }

.app-toggle-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.app-toggle-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* iOS-style toggle */
.app-toggle-btn {
    position: relative;
    width: 50px;
    height: 30px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    padding: 0;
}

.toggle-on  { background: #10B981; }
.toggle-off { background: var(--dark-border); }

.toggle-knob {
    position: absolute;
    top: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: left 0.2s;
}

.toggle-on  .toggle-knob { left: 23px; }
.toggle-off .toggle-knob { left: 3px; }

.settings-card-empty { padding: 20px 16px; }

.settings-empty-msg {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* Apps page grid */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    padding: 28px 16px;
    text-decoration: none;
    color: var(--text-primary);
    aspect-ratio: 1;
}

.app-card:active { opacity: 0.7; }

.app-card-icon { font-size: 40px; line-height: 1; }

.app-card-name {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.empty-state-hint {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* ===================== Workout App ===================== */

.wk-day-section {
    margin-bottom: 8px;
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    overflow: hidden;
}

.wk-day-today {
    border-color: var(--fresh-sky);
}

.wk-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--dark-surface);
}

.wk-day-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wk-day-today .wk-day-name { color: var(--fresh-sky); }

.rest-toggle-btn {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--dark-border);
    background: var(--dark-bg);
    color: var(--text-secondary);
    cursor: pointer;
}

.rest-toggle-btn.rest-active {
    background: rgba(245, 158, 11, 0.12);
    border-color: #F59E0B;
    color: #F59E0B;
}

.rest-badge {
    font-size: 12px;
    font-weight: 700;
    color: #F59E0B;
}

.wk-day-content {
    padding: 8px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Group */
.wk-group {
    background: var(--dark-bg);
    border: 1px solid var(--dark-border);
    border-left: 4px solid var(--group-color, var(--fresh-sky));
    border-radius: 12px;
    overflow: hidden;
}

.wk-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(14, 165, 233, 0.07);
    border-bottom: 1px solid var(--dark-border);
}

.wk-group-name {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--group-color, var(--fresh-sky));
}

/* Group color swatches */
.wk-color-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 6px;
}
.wk-color-swatch input[type="radio"] {
    display: none;
}
.wk-swatch-dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
}
.wk-swatch-dot:hover { transform: scale(1.15); }
.wk-color-swatch input:checked + .wk-swatch-dot {
    border-color: var(--text-primary);
    transform: scale(1.2);
}

.wk-group-actions { display: flex; gap: 6px; }

.wk-icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 6px;
}

.wk-icon-btn:hover { color: var(--text-primary); }
.wk-delete-btn:hover { color: #EF4444; }

/* Exercise row */
.wk-exercise {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--dark-border);
}

.wk-exercise:last-of-type { border-bottom: none; }

.wk-ex-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.wk-ex-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.ex-meta {
    font-size: 12px;
    color: var(--fresh-sky);
    font-weight: 600;
}

.ex-notes {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

.wk-ex-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Forms */
.wk-rename-form,
.wk-ex-form {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--dark-border);
}

.wk-inline-input {
    width: 100%;
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    padding: 8px 10px;
    font-family: inherit;
}

.wk-inline-input:focus { outline: none; border-color: var(--fresh-sky); }

.wk-reps-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 6px;
}
.wk-dur-field {
    margin-bottom: 6px;
}
.wk-dur-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.wk-dur-unit {
    display: flex;
    align-items: center;
    gap: 5px;
}
.wk-dur-unit .wk-field-input {
    flex: 1;
    min-width: 0;
}
.wk-dur-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.wk-field-input {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 7px 8px;
    font-family: inherit;
    width: 100%;
}

.wk-field-input:focus { outline: none; border-color: var(--fresh-sky); }

.wk-notes-input {
    width: 100%;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 7px 10px;
    font-family: inherit;
    resize: vertical;
}

.wk-notes-input:focus { outline: none; border-color: var(--fresh-sky); }

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

.wk-save-btn {
    padding: 8px 18px;
    background: var(--fresh-sky);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.wk-cancel-btn {
    padding: 8px 14px;
    background: none;
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}

/* Add toggles */
.wk-add-ex-wrap,
.wk-add-group-wrap {
    padding: 8px 12px;
}

.wk-add-ex-toggle,
.wk-add-group-toggle {
    background: none;
    border: 1px dashed var(--dark-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
    width: 100%;
}

.wk-add-group-wrap { padding: 0; }

.wk-add-group-toggle {
    border-radius: 0 0 12px 12px;
    border-top: 1px solid var(--dark-border);
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.wk-add-group-form {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wk-empty {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 2px;
    opacity: 0.7;
}

/* Add Day */
.wk-add-day-wrap {
    margin: 20px 0 12px;
}
.wk-add-day-toggle {
    background: none;
    border: 1px dashed var(--border);
    color: var(--accent);
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background 0.15s;
}
.wk-add-day-toggle:hover {
    background: var(--card-bg);
}
.wk-add-day-form {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    margin-top: 8px;
}

/* Equipment select */
.wk-equipment-select {
    width: 100%;
    background: var(--dark-surface);
    color: var(--text-primary);
    border: 2px solid var(--dark-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 8px;
}
.wk-equipment-select:focus {
    outline: none;
    border-color: var(--fresh-sky);
}
.wk-custom-input {
    margin-bottom: 8px;
}

/* ── Submissive workout view ─────────────────────────────── */
.sub-wk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.sub-wk-day-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.sub-wk-btns {
    display: flex;
    gap: 8px;
    align-items: center;
}
.sub-wk-sm-btn {
    background: none;
    border: 1px solid var(--dark-border);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
    display: inline-block;
}
.sub-wk-sm-btn:hover { border-color: var(--fresh-sky); color: var(--fresh-sky); }

/* Sub exercise card */
.wk-sub-ex {
    padding: 12px;
    border-bottom: 1px solid var(--dark-border);
    transition: background 0.2s;
}
.wk-sub-ex:last-child { border-bottom: none; }
.wk-sub-done { opacity: 0.65; }

.wk-sub-ex-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}
.wk-sub-ex-info { flex: 1; }

.wk-done-check {
    font-size: 18px;
    color: #22c55e;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Log inputs */
.wk-log-dist-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.wk-dist-input { flex: 1; }
.wk-dist-label {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.wk-log-sets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.wk-log-set-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wk-set-num {
    font-size: 12px;
    color: var(--text-secondary);
    width: 38px;
    flex-shrink: 0;
}
.wk-set-unit {
    font-size: 12px;
    color: var(--text-secondary);
}
.wk-log-set-row .wk-field-input { flex: 1; }

/* Done / Undo buttons */
.wk-done-btn {
    width: 100%;
    background: var(--fresh-sky);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.wk-done-btn:hover { opacity: 0.85; }

.wk-done-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.wk-log-chip {
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
.wk-undo-btn {
    background: none;
    border: 1px solid var(--dark-border);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-left: auto;
}
.wk-undo-btn:hover { border-color: var(--text-secondary); }

/* ── Workout History Page ────────────────────────────────── */
.hist-sub-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.hist-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.hist-select { margin-bottom: 0 !important; }

.hist-group {
    margin-bottom: 20px;
}
.hist-group-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--dark-border);
    margin-bottom: 8px;
}
.hist-entry {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.hist-entry:last-child { border-bottom: none; }
.hist-meta {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.hist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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