*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
    font-family: system-ui, sans-serif;
    background: #000;
    color: #e0e0e0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Header ── */
header {
    background: #111c35;
    border-bottom: 2px solid #c8a84b;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

header h1 { color: #c8a84b; font-size: 1.4rem; white-space: nowrap; }

.player-bar { display: flex; align-items: center; gap: 0.5rem; flex: 1; }

.player-input-wrap { position: relative; }

.player-bar input {
    background: #0f3460;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.95rem;
    width: 220px;
}
.player-bar input:focus { outline: none; border-color: #c8a84b; }
.player-bar input.loaded { padding-right: 1.8rem; border-color: #4ade80; }

.player-check {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #4ade80;
    font-size: 0.9rem;
    font-weight: 700;
    pointer-events: none;
}

button {
    background: #c8a84b;
    color: #1a1a2e;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s;
}
button:hover    { background: #e0c060; }
button:disabled { opacity: 0.5; cursor: default; }

.btn-ghost {
    background: none;
    color: #aaa;
    border: 1px solid #444;
    font-weight: 400;
}
.btn-ghost:hover { background: #1e2d50; color: #e0e0e0; }

.btn-refresh {
    background: none;
    color: #c8a84b;
    border: 1px solid #c8a84b;
    padding: 0.35rem 0.6rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 4px;
}
.btn-refresh:hover    { background: #1e2d50; color: #e0c060; border-color: #e0c060; }
.btn-refresh:disabled { opacity: 0.35; cursor: default; background: none; }

#player-status           { font-size: 0.85rem; color: #aaa; }
#player-status.error     { color: #f87171; }
#player-status.ok        { color: #4ade80; }

/* ── Settings cog + panel ── */
.settings-wrap {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.btn-cog {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: none;
    border: 1px solid #2a2a4a;
    color: #aaa;
    font-size: 1.1rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    position: relative;
}
.btn-cog:hover { background: #1e2d50; border-color: #c8a84b; color: #c8a84b; }

/* Red dot when not authenticated; hidden when signed in */
.btn-cog::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f87171;
    border: 1px solid #111c35;
}
.btn-cog.signed-in::after { display: none; }

.settings-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: 300px;
    background: #111c35;
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.auth-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #e0e0e0;
    line-height: 1.4;
}
.auth-identity-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.settings-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c8a84b;
    font-weight: 600;
}

.settings-hint {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.4;
}
.settings-hint code { color: #aaa; font-size: 0.78rem; }

.settings-panel input[type="password"] {
    width: 100%;
    background: #0f1f3d;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-family: monospace;
}
.settings-panel input[type="password"]:focus { outline: none; border-color: #c8a84b; }

.settings-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.auth-status              { font-size: 0.82rem; padding: 0.2rem 0.6rem; border-radius: 3px; align-self: flex-start; }
.auth-status.ok           { background: #14532d; color: #4ade80; }
.auth-status.fail         { background: #7f1d1d; color: #f87171; }
.auth-status.pending      { color: #aaa; }

#btn-signin   { font-size: 0.85rem; padding: 0.35rem 0.9rem; }
#btn-signout  { background: #374151; color: #d1d5db; font-size: 0.82rem; padding: 0.3rem 0.7rem; }
#btn-signout:hover  { background: #4b5563; }
#btn-testauth { background: #1e3a5f; color: #60a5fa; font-size: 0.82rem; padding: 0.3rem 0.7rem; border: 1px solid #2563eb; }
#btn-testauth:hover { background: #1e40af; color: #fff; }

.settings-divider { border: none; border-top: 1px solid #2a2a4a; margin: 0; }

.btn-discord {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #5865f2;
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-discord:hover { background: #4752c4; }
.btn-discord svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.btn-discord-header { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

/* ── Nav tabs ── */
#nav {
    background: #111c35;
    border-bottom: 1px solid #2a2a4a;
    padding: 0 1.5rem;
    display: flex;
}
.nav-tab {
    background: none;
    color: #aaa;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.6rem 1rem;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: -1px;
    transition: color 0.15s;
}
.nav-tab:hover  { background: none; color: #e0e0e0; }
.nav-tab.active { color: #c8a84b; border-bottom-color: #c8a84b; }

/* ── Tasks layout: sidebar + content ── */
#tasks-layout {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Sidebar ── */
#sidebar {
    width: 232px;
    flex-shrink: 0;
    background: #111c35;
    border-right: 1px solid #2a2a4a;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sb-section {
    padding: 0.85rem 0;
    border-bottom: 1px solid #2a2a4a;
}
.sb-section:last-child { border-bottom: none; }

.sb-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #666;
    margin-bottom: 0.55rem;
}

#search {
    width: 100%;
    background: #0f1e38;
    border: 1px solid #2a2a4a;
    color: #e0e0e0;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.88rem;
}
#search:focus { outline: none; border-color: #c8a84b; }

.sb-select {
    width: 100%;
    background: #0f1e38;
    border: 1px solid #2a2a4a;
    color: #e0e0e0;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 2rem;
}
.sb-select:focus { outline: none; border-color: #c8a84b; }

.skill-dropdown { position: relative; }

.skill-dropdown-btn {
    width: 100%;
    text-align: left;
    background: #0f1e38;
    border: 1px solid #2a2a4a;
    color: #e0e0e0;
    padding: 0.45rem 2rem 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 400;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    transition: border-color 0.15s;
}
.skill-dropdown-btn:hover { background-color: #0f1e38; border-color: #444; }
.skill-dropdown-btn:focus { outline: none; border-color: #c8a84b; }

.skill-dropdown-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #0f1e38;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    padding: 0.2rem 0;
}

.tag-filter-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #0a1628;
    border: none;
    border-bottom: 1px solid #2a2a4a;
    color: #e0e0e0;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    outline: none;
}
.tag-filter-input:focus { border-bottom-color: #c8a84b; }
.tag-pending-toggle { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.8rem; color: #aaa; cursor: pointer; }
.tag-pending-toggle input { accent-color: #c8a84b; cursor: pointer; }

.skill-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #ccc;
    user-select: none;
}
.skill-option:hover { background: #1e2d50; }
.skill-option input[type="checkbox"] { accent-color: #c8a84b; cursor: pointer; flex-shrink: 0; }

/* Tier pills */
.tier-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.tier-pill {
    background: #1e2a45;
    color: #aaa;
    border: 1px solid #2a2a4a;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tier-pill:hover { background: #2a3f6f; color: #e0e0e0; border-color: #444; }
.tier-pill.active { background: #c0392b; color: #fff; border-color: #c0392b; }

/* Toggle switches */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.42rem 0;
    cursor: pointer;
    user-select: none;
    font-size: 0.87rem;
    color: #ccc;
}
.toggle-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.toggle-cb   { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
    width: 36px;
    height: 20px;
    background: #2a2a4a;
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #666;
    transition: transform 0.2s, background 0.2s;
}
.toggle-cb:checked + .toggle-track              { background: #c0392b; }
.toggle-cb:checked + .toggle-track::after       { transform: translateX(16px); background: #fff; }

/* Clear filters */
#btn-clear-filters {
    width: 100%;
    background: #c0392b;
    color: #fff;
    border: none;
    padding: 0.55rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: 0.85rem;
    margin-bottom: 0.15rem;
}
#btn-clear-filters:hover { background: #e74c3c; }

/* Progress bars */
.area-pills { max-height: 120px; overflow-y: auto; }

.progress-row-clickable { cursor: pointer; border-radius: 4px; padding: 0 0.25rem; margin: 0 -0.25rem; }
.progress-row-clickable:hover { background: #1e2d50; }
.progress-row-active { background: #1a2a48; }
.progress-row-active .progress-label { color: #c8a84b; }

.progress-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
}
.progress-label  { width: 85px; flex-shrink: 0; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px; }
.progress-track  { flex: 1; height: 6px; background: #1a1a2e; border-radius: 3px; overflow: hidden; }
.progress-fill   { height: 100%; border-radius: 3px; transition: width 0.3s; }
.progress-count  { width: 48px; flex-shrink: 0; text-align: right; color: #555; font-size: 0.73rem; }

/* ── Task content ── */
#task-content {
    flex: 1;
    min-width: 0;
    padding: 0 1.5rem 2rem;
    overflow-y: auto;
}

/* ── Task table ── */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.88rem; }

thead th {
    background: #111c35;
    color: #c8a84b;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #c8a84b;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
thead th:hover { color: #e0c060; }

tbody tr           { border-bottom: 1px solid #2a2a4a; }
tbody tr:hover     { background: #1e2d50; }
tbody tr.completed { opacity: 0.5; }
tbody tr.task-row  { cursor: pointer; }

td { padding: 0.45rem 0.75rem; vertical-align: middle; }

/* Expansion caret */
.expand-caret {
    display: inline-block;
    font-size: 0.6rem;
    color: #555;
    margin-right: 0.35rem;
    transition: transform 0.15s;
    vertical-align: middle;
}
.task-row.row-expanded .expand-caret { transform: rotate(90deg); color: #c8a84b; }

/* Expansion row */
tr.tip-expand-row td { padding: 0; border-bottom: 2px solid #c8a84b; }

.tip-panel {
    padding: 1rem 1.5rem;
    background: #0f1e38;
    border-left: 3px solid #c8a84b;
}

.panel-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #c8a84b; margin-bottom: 0.75rem; }

.tip-entry {
    background: #111c35;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: 0.88rem;
}

.community-credit          { font-size: 0.78rem; color: #888; margin-top: 0.35rem; }
.panel-none            { color: #666; font-size: 0.88rem; margin-bottom: 0.75rem; }
.tip-pending-notice  { font-size: 0.82rem; color: #888; margin-bottom: 0.75rem; }
.panel-actions   { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.tip-suggest-form    { margin-top: 0.75rem; }

.tip-textarea {
    width: 100%;
    min-height: 100px;
    background: #111c35;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
}
.tip-textarea:focus { outline: none; border-color: #c8a84b; }
.tip-form-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.panel-msg      { font-size: 0.85rem; margin-top: 0.5rem; }
.panel-msg.ok   { color: #4ade80; }
.panel-msg.err  { color: #f87171; }

/* Inline pending voting cards (tips, tags, requirements) */
.pending-card { background: #111c35; border: 1px solid #2a2a4a; border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
.pending-content { white-space: pre-wrap; line-height: 1.6; font-size: 0.88rem; margin-bottom: 0.5rem; }
.pending-vote-row  { display: flex; gap: 0.5rem; align-items: center; }
.pending-vote-row span { font-size: 0.78rem; color: #666; }
.btn-vote-up       { background: #14532d; color: #4ade80; padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.btn-vote-up:hover   { background: #166534; }
.btn-vote-down     { background: #7f1d1d; color: #f87171; padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.btn-vote-down:hover { background: #991b1b; }

/* Fav button */
.btn-fav        { background: none; border: none; color: #555; font-size: 1.1rem; padding: 0; line-height: 1; }
.btn-fav:hover  { background: none; color: #c8a84b; }
.btn-fav.active { color: #c8a84b; }

.manual-check { accent-color: #c8a84b; cursor: pointer; width: 15px; height: 15px; }

.tier-icon    { width: 16px; height: 16px; vertical-align: middle; margin-right: 3px; }
.area-icon    { width: 20px; height: 20px; vertical-align: middle; }
.tier         { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; }
.tier-easy    { background: #14532d; color: #4ade80; }
.tier-medium  { background: #1e3a5f; color: #60a5fa; }
.tier-hard    { background: #7c2d12; color: #fb923c; }
.tier-elite   { background: #7f1d1d; color: #f87171; }
.tier-master  { background: #4a044e; color: #e879f9; }

/* ── Tags ── */
.task-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }

.tag-pill {
    display: inline-block;
    background: #0f1e38;
    border: 1px solid #2a3a5a;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    color: #7dd3fc;
    font-family: monospace;
    white-space: nowrap;
}
.tag-pill-lg { font-size: 1rem; padding: 0.3rem 0.75rem; }

.tinder-kind-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 3px;
    padding: 0.15rem 0.4rem;
    margin-left: auto;
}
.kind-tip { background: #1e3a5f; color: #60a5fa; }
.kind-tag   { background: #0f2a1f; color: #4ade80; }
.kind-req   { background: #2a1a3f; color: #c084fc; }

.tag-form-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
}
.tag-type-select {
    background: #0f1e38;
    border: 1px solid #2a2a4a;
    color: #e0e0e0;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.tag-type-select:focus { outline: none; border-color: #c8a84b; }
.tag-value-input {
    flex: 1;
    min-width: 80px;
    background: #0f1e38;
    border: 1px solid #2a2a4a;
    color: #e0e0e0;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.tag-value-input:focus { outline: none; border-color: #c8a84b; }

.admin-tag-types { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.admin-tag-type {
    background: #0f1e38;
    border: 1px solid #2a3a5a;
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    font-size: 0.78rem;
    color: #7dd3fc;
    font-family: monospace;
}

.admin-tag-section-label { font-size: 0.78rem; font-weight: 600; color: #7dd3fc; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.admin-tag-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #1e2a45;
    flex-wrap: wrap;
}
.admin-tag-task-name { color: #aaa; font-size: 0.88rem; flex: 1; min-width: 8rem; }
.admin-tag-votes     { color: #888; font-size: 0.82rem; white-space: nowrap; }
.admin-tag-flagged   { color: #fbbf24; font-size: 0.82rem; white-space: nowrap; }
.admin-tag-row-msg   { font-size: 0.8rem; }

.req-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.req-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #0f1e38;
    border: 1px solid #2a3a5a;
    border-radius: 4px;
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
    color: #ccc;
    white-space: nowrap;
}
.req-pill-icon  { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.req-pill.met   { border-color: #38bdf8; color: #38bdf8; }
.req-pill.unmet { border-color: #f87171; color: #f87171; }

.req-text { font-size: 0.78rem; color: #888; font-style: italic; }

.req-pill-suggested {
    display: inline-flex;
    align-items: center;
    background: #0f1e38;
    border: 1px solid #ca8a04;
    border-radius: 4px;
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
    color: #fde68a;
    white-space: nowrap;
}

.task-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0 0;
}

.task-count { font-size: 0.8rem; color: #888; white-space: nowrap; }

.active-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.filter-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: 1px solid #3a4a6a;
    border-radius: 6px;
    padding: 0.15rem 0.3rem;
    background: #0d1929;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #1e2a45;
    border: 1px solid #3a4a6a;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    color: #aaa;
    font-weight: 400;
}
.filter-chip:hover { background: #2a3a5a; color: #e0e0e0; border-color: #c8a84b; }
.chip-x { font-size: 0.85rem; color: #666; line-height: 1; }

#no-tasks { padding: 2rem 0; color: #666; text-align: center; }

.wiki-completed   { color: #4ade80; font-size: 1rem; }
.manual-indicator { color: #60a5fa; font-size: 0.75rem; margin-left: 2px; }

/* ── Tips voting view ── */
#tips-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#tips-view h2 { color: #c8a84b; margin-bottom: 0.5rem; }
#tips-view p  { color: #888; font-size: 0.9rem; margin-bottom: 2rem; }

/* Tinder card */
.tinder-wrap {
    width: 100%;
    max-width: 540px;
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tinder-card {
    width: 100%;
    background: #111c35;
    border: 1px solid #2a2a4a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.35s ease;
    will-change: transform, opacity;
}
.tinder-card.swipe-right { transform: translateX(150vw) rotate(25deg);  opacity: 0; pointer-events: none; }
.tinder-card.swipe-left  { transform: translateX(-150vw) rotate(-25deg); opacity: 0; pointer-events: none; }

.tinder-task {
    padding: 1rem 1.25rem;
    border-bottom: 2px solid #c8a84b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.tinder-task-name { font-weight: 600; flex: 1; }
.tinder-task-meta { font-size: 0.78rem; color: #888; }

.tinder-content {
    padding: 1.25rem;
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 0.92rem;
    color: #d0d0d0;
    border-bottom: 1px solid #1e2a45;
}

.tinder-footer {
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #666;
    border-bottom: 1px solid #1e2a45;
}
.tinder-footer .community-credit { font-size: 0.78rem; color: #666; margin: 0; }

.tinder-actions {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}

.tinder-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    background: none;
    border: 2px solid #2a2a4a;
    color: #e0e0e0;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    line-height: 1;
}
.tinder-btn .tinder-btn-icon { font-size: 1.15rem; }
.tinder-btn:hover      { transform: scale(1.04); }
.tinder-btn.down       { border-color: rgba(248,113,113,0.35); color: #f87171; }
.tinder-btn.down:hover { border-color: #f87171; background: rgba(248,113,113,0.12); }
.tinder-btn.up         { border-color: rgba(74,222,128,0.35); color: #4ade80; }
.tinder-btn.up:hover   { border-color: #4ade80; background: rgba(74,222,128,0.12); }
.tinder-btn.skip       { border-color: rgba(150,150,150,0.2); color: #555; font-size: 0.82rem; padding: 0.4rem 0.9rem; }
.tinder-btn.skip:hover { border-color: #555; background: rgba(150,150,150,0.08); color: #888; }

.tinder-empty   { text-align: center; color: #666; padding: 2rem; }
.tinder-empty p { margin-bottom: 1rem; }

.tips-loading { color: #888; font-size: 0.9rem; }

/* ── Leaderboard modal ── */
.lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-modal {
    background: #111c35;
    border: 1px solid #2a2a4a;
    border-top: 3px solid #c8a84b;
    border-radius: 8px;
    width: 480px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}

.lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #2a2a4a;
}

.lb-header h2 { color: #c8a84b; font-size: 1.1rem; font-weight: 700; }

.lb-close {
    background: none;
    border: none;
    color: #666;
    font-size: 1.1rem;
    padding: 0.2rem 0.4rem;
    line-height: 1;
    border-radius: 4px;
}
.lb-close:hover { background: #1e2d50; color: #e0e0e0; }

.lb-tabs {
    display: flex;
    border-bottom: 1px solid #2a2a4a;
    padding: 0 1rem;
    flex-shrink: 0;
}

.lb-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 0;
    margin-bottom: -1px;
    font-weight: 500;
    transition: color 0.15s;
}
.lb-tab:hover  { background: none; color: #ccc; }
.lb-tab.active { color: #c8a84b; border-bottom-color: #c8a84b; }

.lb-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
}

.lb-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #666;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #2a2a4a;
}

.lb-table td {
    padding: 0.55rem 0.5rem;
    font-size: 0.9rem;
    border-bottom: 1px solid #1a2a45;
}

.lb-table tr:last-child td { border-bottom: none; }

.lb-col-rank { width: 2.5rem; text-align: center; color: #555; }
.lb-col-count { text-align: center; color: #c8a84b; font-weight: 600; font-variant-numeric: tabular-nums; }

.lb-player-cell { display: flex; align-items: center; gap: 0.5rem; }

.lb-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #1e2d50;
}

.lb-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e2d50;
    color: #c8a84b;
    font-size: 0.7rem;
    font-weight: 700;
}

.lb-rank-gold   { color: #c8a84b; font-weight: 700; }
.lb-rank-silver { color: #a0a0b0; font-weight: 600; }
.lb-rank-bronze { color: #b87333; font-weight: 600; }

.lb-empty { text-align: center; color: #666; padding: 2.5rem 1rem; font-size: 0.9rem; }

/* ── Report modal ── */
.report-modal { max-width: 440px; }

.report-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.report-modal-intro { color: #ccc; font-size: 0.9rem; margin: 0; }

.report-reasons {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.report-reason-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: #ddd;
    cursor: pointer;
}
.report-reason-label input[type="checkbox"] { cursor: pointer; accent-color: #c8a84b; }

.report-other-textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0f1f3d;
    border: 1px solid #444;
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    resize: vertical;
}
.report-other-textarea:focus { outline: none; border-color: #c8a84b; }

.report-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* ── Report button ── */
.btn-report {
    background: none;
    border: none;
    color: #555;
    font-size: 0.75rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}
.btn-report:hover { color: #f87171; background: rgba(248,113,113,0.08); }

/* ── Admin sub-tabs ── */
.admin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #2a2a4a;
    margin-bottom: 1.25rem;
}

.admin-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    cursor: pointer;
    border-radius: 0;
    transition: color 0.15s;
}
.admin-tab:hover { color: #ccc; }
.admin-tab.active { color: #c8a84b; border-bottom-color: #c8a84b; }

/* ── Admin reports ── */
.report-card {
    background: #111c35;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
}

.report-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.report-type-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: #1e2d50;
    color: #7dd3fc;
}

.report-content-snippet {
    font-size: 0.85rem;
    color: #ccc;
    font-style: italic;
    background: #0a1628;
    border-left: 2px solid #2a3a5a;
    padding: 0.35rem 0.6rem;
    border-radius: 0 4px 4px 0;
    margin: 0.35rem 0;
    word-break: break-word;
}

.report-meta { font-size: 0.8rem; color: #888; margin-bottom: 0.4rem; }

.report-reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.report-reason-chip {
    font-size: 0.75rem;
    background: #1a2540;
    border: 1px solid #2a3a5a;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    color: #93c5fd;
}

.report-other-note {
    font-size: 0.82rem;
    color: #fbbf24;
    margin-bottom: 0.4rem;
}

.report-card-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.btn-report-dismiss {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    background: #1e2d50;
    border: 1px solid #2a3a5a;
    color: #aaa;
    border-radius: 4px;
    cursor: pointer;
}
.btn-report-dismiss:hover { background: #243660; color: #e0e0e0; }

.btn-report-delete {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    background: #4c1010;
    border: 1px solid #7f1d1d;
    color: #f87171;
    border-radius: 4px;
    cursor: pointer;
}
.btn-report-delete:hover { background: #5c1a1a; }

/* ── Admin activity feed ── */
.activity-entry {
    padding: 0.65rem 0;
    border-bottom: 1px solid #1a2440;
}
.activity-entry:last-child { border-bottom: none; }

.activity-actor {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.activity-actor-name { font-size: 0.85rem; color: #ccc; font-weight: 500; }
.activity-verb       { font-size: 0.82rem; color: #666; }

.activity-content {
    font-size: 0.82rem;
    color: #888;
    font-style: italic;
    background: #0a1628;
    border-left: 2px solid #2a3a5a;
    padding: 0.25rem 0.55rem;
    border-radius: 0 3px 3px 0;
    margin: 0.15rem 0 0.3rem;
    word-break: break-word;
}

.activity-time { font-size: 0.75rem; color: #444; }

/* ── Paths view ── */
#paths-view {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.paths-layout {
    display: flex;
    align-items: flex-start;
}

.paths-sidebar {
    width: 210px;
    flex-shrink: 0;
    border-right: 1px solid #1e2d50;
    padding: 1.25rem 0.75rem;
    position: sticky;
    top: 0;
    min-height: calc(100vh - 100px);
    box-sizing: border-box;
}

.paths-sidebar-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #555;
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #1e2d50;
}

.paths-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.paths-sidebar-link {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.paths-sidebar-link:hover { background: #111c35; border-color: #2a3a5a; }
.paths-sidebar-item.active .paths-sidebar-link { background: #111c35; border-color: #2a3a5a; }

.paths-tile-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.3rem;
}
.paths-sidebar-item.active .paths-tile-title { color: #c8a84b; }

.paths-tile-byline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #666;
    overflow: hidden;
}
.paths-tile-byline-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.paths-tile-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.paths-tile-avatar-placeholder {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1e2d50;
    color: #c8a84b;
    font-size: 0.55rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.paths-sidebar-empty {
    font-size: 0.8rem;
    color: #444;
    margin: 0.25rem 0 0;
}

.paths-main {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem 50vh;
    max-width: 720px;
}
.paths-main.path-builder-mode {
    padding: 0;
    max-width: none;
    display: flex;
    overflow: hidden;
}

/* ── Path builder two-column layout ── */
.path-builder-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 100%;
}
.path-builder-header {
    padding: 1rem 1.5rem 0.75rem;
    border-bottom: 1px solid #1e2d50;
    flex-shrink: 0;
    margin: 0;
}
.path-builder-columns {
    display: flex;
    flex: 1;
    min-height: 0;
}
.path-builder-editor {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem 50vh;
    overflow-y: auto;
}
.path-task-browser {
    flex: 1;
    min-width: 0;
    border-left: 1px solid #1e2d50;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 115px);
    position: sticky;
    top: 0;
    overflow: hidden;
}
.ptb-search-wrap {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #1e2d50;
    flex-shrink: 0;
}
.ptb-search {
    width: 100%;
    box-sizing: border-box;
    background: #0f1e38;
    border: 1px solid #2a3a5a;
    color: #e0e0e0;
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.ptb-search:focus { outline: none; border-color: #c8a84b; }
.ptb-list {
    flex: 1;
    overflow-y: auto;
}
.ptb-area-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #3a4a6a;
    padding: 0.55rem 0.75rem 0.2rem;
    position: sticky;
    top: 0;
    background: #090f1e;
    z-index: 1;
}
.ptb-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid #0e1a2e;
}
.ptb-item:hover:not(.ptb-in-path) { background: #1a2d50; }
.ptb-item.ptb-in-path { cursor: default; opacity: 0.4; }
.ptb-name {
    flex: 1;
    min-width: 0;
    font-size: 0.83rem;
    color: #ccc;
    line-height: 1.4;
    word-break: break-word;
}
.ptb-tier {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem;
    border-radius: 3px;
    flex-shrink: 0;
}
.ptb-tier .tier-icon { width: 14px; height: 14px; margin-right: 0; }
.ptb-tier-easy   { background: #14532d; color: #4ade80; }
.ptb-tier-medium { background: #1e3a5f; color: #60a5fa; }
.ptb-tier-hard   { background: #431407; color: #fb923c; }
.ptb-tier-elite  { background: #450a0a; color: #f87171; }
.ptb-tier-master { background: #3b0764; color: #e879f9; }
.ptb-check { font-size: 0.7rem; color: #4ade80; flex-shrink: 0; }
.ptb-empty { color: #444; font-size: 0.82rem; padding: 1rem 0.75rem; }

.paths-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.paths-header h2 { margin: 0; margin-right: 0.5rem; }

.btn-path-action {
    background: none;
    border: 1px solid #38bdf8;
    color: #38bdf8;
    border-radius: 4px;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.btn-path-action:hover { background: rgba(56,189,248,0.1); color: #7dd3fc; }
.btn-path-action-danger { border-color: #f87171; color: #f87171; }
.btn-path-action-danger:hover { background: rgba(248,113,113,0.08); color: #fca5a5; }

.path-sync-msg { font-size: 0.8rem; color: #f87171; }

.path-slug-editor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.path-slug-prefix {
    font-size: 0.82rem;
    color: #555;
    font-family: monospace;
    white-space: nowrap;
}
.path-slug-input {
    background: #0f1e38;
    border: 1px solid #2a3a5a;
    color: #e0e0e0;
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    font-family: monospace;
    width: 220px;
    transition: border-color 0.15s;
}
.path-slug-input:focus { outline: none; border-color: #38bdf8; }

.paths-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
}
.paths-empty p { margin: 0.4rem 0; }

.path-builder-empty {
    color: #444;
    font-size: 0.85rem;
    padding: 0.75rem 0;
    margin: 0;
}

.path-builder-search-wrap {
    position: relative;
    margin: 0.75rem 0 0;
}
.path-add-comment-btn {
    font-size: 0.82rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.75rem;
}
.path-builder-search {
    width: 100%;
    box-sizing: border-box;
    background: #0f1e38;
    border: 1px solid #2a3a5a;
    color: #e0e0e0;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.88rem;
}
.path-builder-search:focus { outline: none; border-color: #c8a84b; }

.path-builder-suggestions {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: #0f1e38;
    border: 1px solid #2a3a5a;
    border-radius: 6px;
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.path-builder-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #1a2a45;
    gap: 0.75rem;
}
.path-builder-suggestion:last-child { border-bottom: none; }
.path-builder-suggestion:hover { background: #1a2d50; }
.path-sug-name {
    font-size: 0.86rem;
    color: #e0e0e0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.path-sug-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.77rem;
    color: #666;
    flex-shrink: 0;
    white-space: nowrap;
}
.path-sug-tier {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}
.path-sug-tier-easy   { background: #14532d; color: #4ade80; }
.path-sug-tier-medium { background: #1e3a5f; color: #60a5fa; }
.path-sug-tier-hard   { background: #431407; color: #fb923c; }
.path-sug-tier-elite  { background: #450a0a; color: #f87171; }
.path-sug-tier-master { background: #3b0764; color: #e879f9; }

.paths-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #1e2d50;
    display: block;
}
.paths-section-toggle {
    background: none;
    border: none;
    border-bottom: 1px solid #1e2d50;
    border-radius: 0;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0 0.35rem;
    cursor: pointer;
    color: #555;
}
.paths-section-toggle:hover { color: #888; background: none; }

.paths-section-arrow {
    font-size: 0.55rem;
    color: #444;
    transition: transform 0.2s ease;
    transform: rotate(0deg);
    flex-shrink: 0;
}
.paths-section-arrow-open { transform: rotate(90deg); }

.paths-my-content { overflow: hidden; }
.paths-my-content-collapsed { display: none; }

.paths-my-list { margin-bottom: 0.25rem; }

.paths-my-card { background: #0a1622; }

.paths-my-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    background: #1e2d50;
    color: #555;
    flex-shrink: 0;
    align-self: center;
}
.paths-my-badge-public { background: #14532d; color: #4ade80; }

.paths-browse-loading {
    color: #555;
    padding: 2rem 0;
    font-size: 0.9rem;
}

.paths-browse-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paths-browse-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #0d1929;
    border: 1px solid #1e2d50;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s;
    cursor: default;
}
.paths-browse-card:hover { border-color: #2a3a5a; }

.paths-browse-card-body {
    flex: 1;
    min-width: 0;
}
.paths-browse-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.paths-browse-card-stats {
    font-size: 0.75rem;
    color: #556;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.paths-browse-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.paths-upvote-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 1px solid #2a3a5a;
    color: #aaa;
    border-radius: 4px;
    padding: 0.3rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}
.paths-upvote-btn:hover:not(:disabled) { border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,0.06); }
.paths-upvote-btn.voted { border-color: #4ade80; color: #4ade80; }
.paths-upvote-btn:disabled { cursor: default; opacity: 0.8; }

.path-title-input {
    width: 100%;
    box-sizing: border-box;
    background: #0f1f3d;
    border: 1px solid #2a3a5a;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}
.path-title-input:focus { outline: none; border-color: #c8a84b; }

.path-desc-input {
    width: 100%;
    box-sizing: border-box;
    background: #0f1f3d;
    border: 1px solid #2a3a5a;
    border-radius: 6px;
    color: #ccc;
    font-size: 0.88rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
.path-desc-input:focus { outline: none; border-color: #c8a84b; }

/* ── Path cards ── */
.path-card {
    background: #111c35;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    margin-bottom: 0;
    transition: box-shadow 0.15s;
    position: relative;
}
.path-card.dragging { opacity: 0.4; }
.path-card.drag-over-before { border-top: 2px solid #c8a84b; }
.path-card.drag-over-after  { border-bottom: 2px solid #c8a84b; }

.path-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    flex-wrap: wrap;
}

.path-drag-handle {
    color: #444;
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}
.path-drag-handle:active { cursor: grabbing; }

.path-task-name { font-size: 0.9rem; font-weight: 500; flex: 1; min-width: 0; }
.path-task-meta { font-size: 0.78rem; color: #888; white-space: nowrap; }
.path-task-pts  { font-size: 0.78rem; color: #888; white-space: nowrap; margin-left: auto; }

.path-remove-btn {
    font-size: 0.75rem;
    padding: 0.1rem 0.35rem;
    color: #555;
    border-color: transparent;
    margin-left: auto;
    flex-shrink: 0;
}
.path-remove-btn:hover { color: #f87171; border-color: rgba(248,113,113,0.3); }

.path-note-input,
.path-comment-input {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-top: 1px solid #1e2d50;
    color: #ccc;
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    resize: none;
    font-family: inherit;
}
.path-note-input:focus,
.path-comment-input:focus { outline: none; background: rgba(200,168,75,0.04); }

.path-comment-card { border-color: #1e3a5a; }
.path-comment-card .path-card-header { padding-bottom: 0.3rem; }

/* Between-card gap area */
.path-gap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    margin: 0.15rem 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.path-gap:hover,
#path-items-list:hover .path-gap { opacity: 1; }

.path-gap-line {
    flex: 1;
    height: 1px;
    background: #1e2d50;
}
.path-gap-add {
    font-size: 0.72rem;
    color: #555;
    background: none;
    border: 1px solid #2a3a5a;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.path-gap-add:hover { color: #7dd3fc; border-color: #3a5a7a; }

/* Submit area */
.path-submit-area {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.path-submit-row { display: flex; gap: 0.6rem; align-items: center; }

/* Saved state */
.path-saved-box {
    background: #0a1628;
    border: 1px solid #2a3a5a;
    border-radius: 6px;
    padding: 1rem 1.25rem;
}
.path-saved-box h3 { margin: 0 0 0.75rem; font-size: 0.95rem; color: #4ade80; }

.path-share-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.path-share-url {
    flex: 1;
    background: #0f1f3d;
    border: 1px solid #2a3a5a;
    border-radius: 4px;
    color: #c8a84b;
    font-size: 0.82rem;
    padding: 0.3rem 0.5rem;
    font-family: monospace;
    word-break: break-all;
}

.path-visibility-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: #aaa; }
.path-visibility-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.path-visibility-toggle input { opacity: 0; width: 0; height: 0; }
.path-visibility-slider {
    position: absolute;
    inset: 0;
    background: #2a3a5a;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}
.path-visibility-slider:before {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.path-visibility-toggle input:checked + .path-visibility-slider { background: #c8a84b; }
.path-visibility-toggle input:checked + .path-visibility-slider:before { transform: translateX(16px); }

/* Viewer */
.path-viewer-header {
    margin-bottom: 1.5rem;
}
.path-viewer-header h2 { margin: 0 0 0.25rem; }
.path-viewer-description {
    font-size: 0.88rem;
    color: #aaa;
    line-height: 1.6;
    margin: 0.5rem 0 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.path-viewer-stats {
    font-size: 0.8rem;
    color: #556;
    margin: 0.25rem 0 0.6rem;
}

.path-viewer-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
}

.path-byline-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.path-byline-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1e2d50;
    color: #c8a84b;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.path-viewer-item { margin-bottom: 0.5rem; }

.path-viewer-task {
    background: #111c35;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
}
.path-viewer-task-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.path-viewer-task-name { font-weight: 500; font-size: 0.9rem; }
.path-viewer-note {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: #aaa;
    white-space: pre-wrap;
    word-break: break-word;
}

.path-viewer-col-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
.path-viewer-check-spacer { width: 1rem; flex-shrink: 0; }
.path-viewer-col-header-spacer { flex: 1; }

.path-running-total-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #86efac;
    opacity: 0.5;
    white-space: nowrap;
    width: 3rem;
    text-align: center;
}

.path-task-check {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: #c8a84b;
}

.path-viewer-task-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.path-viewer-task-row .path-viewer-task { flex: 1; min-width: 0; }

.path-task-done .path-viewer-task {
    opacity: 0.45;
    filter: saturate(0.4);
}
.path-task-done .path-viewer-task .path-viewer-task-name,
.path-task-done .path-viewer-task .path-viewer-note { color: #888; }
.path-task-done .path-running-total { opacity: 0.3; }

.path-running-total {
    color: #86efac;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.6;
    width: 3rem;
    text-align: center;
}

.path-viewer-comment-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.1rem 0;
}
.path-viewer-comment-row .path-task-check { margin-top: 0.45rem; flex-shrink: 0; accent-color: #7dd3fc; }
.path-comment-done .path-viewer-comment {
    color: #3a566e;
    text-decoration: line-through;
    font-style: italic;
}

.path-viewer-comment {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    color: #7dd3fc;
    font-style: italic;
    border-left: 2px solid #1e3a5a;
    margin-left: 0.25rem;
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

.path-viewer-header-item {
    margin: 1.25rem 0 0.5rem;
}
.path-viewer-section-header {
    font-size: 1rem;
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.02em;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #2a3a5a;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Builder: header comment card */
.path-comment-header-card { border-color: #c8a84b; }
.path-comment-header-card .path-comment-type-label { color: #c8a84b; }
.path-comment-type-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7dd3fc;
}
.path-toggle-header-btn {
    background: none;
    border: 1px solid #2a3a5a;
    color: #555;
    border-radius: 3px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
    transition: border-color 0.15s, color 0.15s;
    margin-left: auto;
    white-space: nowrap;
}
.path-toggle-header-btn:hover { border-color: #c8a84b; color: #c8a84b; background: none; }
.path-toggle-header-btn.active { border-color: #c8a84b; color: #c8a84b; }

/* Add-to-path button in task rows */
.btn-add-path {
    background: none;
    border: none;
    color: #444;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.15s;
    vertical-align: middle;
}
.btn-add-path:hover  { color: #c8a84b; }
.btn-add-path.in-path { color: #c8a84b; }

/* Add-to-plan button in task rows */
.btn-add-plan {
    background: none;
    border: none;
    color: #444;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.15s;
    vertical-align: middle;
}
.btn-add-plan:hover  { color: #7dd3fc; }
.btn-add-plan.in-plan { color: #7dd3fc; }

/* Plan add popover */
#plan-add-popover {
    position: absolute;
    z-index: 200;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    white-space: nowrap;
}
#plan-add-popover select {
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-size: 0.82rem;
}
#plan-add-popover button {
    background: none;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 0.82rem;
    transition: color 0.15s, border-color 0.15s;
}
#plan-add-popover #plan-popover-move { border-color: #3b82f6; color: #7dd3fc; }
#plan-add-popover button:hover { color: #e2e8f0; border-color: #64748b; }

/* ── Plan view ── */
.plan-wrap {
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.plan-header {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-goal-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.plan-goal-label { color: #94a3b8; font-size: 0.85rem; white-space: nowrap; padding-top: 0.3rem; }
.plan-goal-input {
    width: 130px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* Quick Goals box */
.plan-quick-goals {
    background: #080f1c;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.plan-quick-goals-title {
    font-size: 0.68rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.05rem;
}
.plan-presets-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.plan-preset-group-label {
    color: #475569;
    font-size: 0.72rem;
    min-width: 3.5rem;
}
.plan-preset {
    background: #1e293b;
    border: 1px solid #1e293b;
    color: #64748b;
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    font-size: 0.72rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.plan-preset:hover  { color: #e2e8f0; border-color: #334155; }
.plan-preset.active { background: #1e3a5a; border-color: #3b82f6; color: #7dd3fc; }

.plan-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.plan-summary-label { color: #64748b; font-size: 0.82rem; }

/* 3-section progress bar */
.plan-bar-wrap {
    position: relative;
    flex: 1;
    min-width: 120px;
    max-width: 340px;
}
.plan-progress-bar {
    height: 8px;
    background: #1e293b;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}
.plan-bar-s1 { background: #ffb000; height: 100%; transition: width 0.3s; }
.plan-bar-s2 { background: #dc267f; height: 100%; transition: width 0.3s; }
.plan-bar-s3 { background: #648fff; height: 100%; transition: width 0.3s; }

.plan-bar-divider {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 13px;
    border-radius: 50%;
    background: #0d1929;
    border: 1.5px solid #94a3b8;
    box-shadow: 0 0 6px rgba(125, 211, 252, 0.75), inset 0 0 3px rgba(125, 211, 252, 0.2);
    pointer-events: none;
    z-index: 2;
}

/* Bar tooltip */
.plan-bar-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    color: #cbd5e1;
    white-space: nowrap;
    z-index: 150;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    pointer-events: none;
    flex-direction: column;
    gap: 0.3rem;
    display: none;
}
.plan-bar-wrap:hover .plan-bar-tooltip { display: flex; }
.plan-bar-tip-row { display: flex; align-items: center; gap: 0.45rem; }
.plan-bar-dot {
    width: 10px; height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}
.pbd-s1 { background: #ffb000; }
.pbd-s2 { background: #dc267f; }
.pbd-s3 { background: #648fff; }
.plan-bar-tip-total {
    border-top: 1px solid #334155;
    padding-top: 0.3rem;
    margin-top: 0.1rem;
    color: #94a3b8;
    font-size: 0.78rem;
}
.plan-progress-pct { color: #7dd3fc; font-size: 0.82rem; white-space: nowrap; }
.plan-remove-completed-btn,
.plan-clear-btn {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}
.plan-remove-completed-btn { margin-left: auto; }

/* Board layout */
#plan-categories {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.plan-category {
    width: 265px;
    flex-shrink: 0;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-category.plan-drop-target { border-color: #3b82f6; }
.plan-category.plan-drop-before { box-shadow: -3px 0 0 0 #3b82f6; }
.plan-category.plan-drop-after  { box-shadow:  3px 0 0 0 #3b82f6; }

.plan-cat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: #131f33;
    border-radius: 8px 8px 0 0;
    cursor: grab;
    user-select: none;
}
.plan-cat-header:active { cursor: grabbing; }

.plan-drag-handle {
    color: #334155;
    font-size: 1rem;
    cursor: grab;
    flex-shrink: 0;
    line-height: 1;
}
.plan-drag-handle:active { cursor: grabbing; }

.plan-cat-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    outline: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
    cursor: text;
    min-width: 0;
}
.plan-cat-name:focus { border-bottom-color: #3b82f6; }

.plan-cat-pts {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}

.plan-cat-delete {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.plan-cat-delete:hover { color: #f87171; }

/* Tasks within a category */
.plan-cat-tasks {
    min-height: 8px;
    padding: 0.25rem 0;
    overflow-y: auto;
    max-height: 480px;
    flex: 1;
}

.plan-task {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #0f1d30;
    cursor: grab;
    transition: background 0.1s;
}
.plan-task:last-child { border-bottom: none; }
.plan-task:hover { background: #111d2f; }
.plan-task:active { cursor: grabbing; }
.plan-task.plan-dragging { opacity: 0.4; }

.plan-task-done .plan-task-name { color: #475569; text-decoration: line-through; }
.plan-task-done .plan-task-pts  { color: #334155; }

.plan-task-name {
    flex: 1;
    font-size: 0.85rem;
    color: #cbd5e1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan-task-pts {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}
.plan-task-remove {
    background: none;
    border: none;
    color: #334155;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 0.2rem;
    border-radius: 3px;
    transition: color 0.15s;
    flex-shrink: 0;
    line-height: 1;
}
.plan-task-remove:hover { color: #f87171; }

/* Task search / add within category */
.plan-cat-search-wrap {
    position: relative;
    padding: 0.4rem 0.75rem 0.5rem;
    border-top: 1px solid #1e293b;
}
.plan-cat-search {
    width: 100%;
    background: #0a1120;
    border: 1px solid #1e293b;
    color: #94a3b8;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.plan-cat-search:focus { outline: none; border-color: #334155; }
.plan-cat-search::placeholder { color: #334155; }

.plan-cat-suggestions {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: calc(100% - 0.25rem);
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0 0 6px 6px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    max-height: 220px;
    overflow-y: auto;
}
.plan-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.83rem;
    border-bottom: 1px solid #0f172a;
    gap: 0.5rem;
}
.plan-suggestion:last-child { border-bottom: none; }
.plan-suggestion:hover { background: #263348; }
.plan-sug-name { color: #cbd5e1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-sug-pts  { color: #64748b; font-size: 0.78rem; flex-shrink: 0; }

/* New category drop zone (task drag) */
.plan-new-cat-drop {
    display: none;
    width: 265px;
    flex-shrink: 0;
    min-height: 80px;
    border: 2px dashed #1e293b;
    border-radius: 8px;
    color: #334155;
    font-size: 0.82rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    user-select: none;
}
.plan-new-cat-drop.plan-new-cat-drop-active { display: flex; }
.plan-new-cat-drop.plan-drop-target {
    border-color: #f59e0b;
    color: #f59e0b;
    background: rgba(245,158,11,0.06);
}

/* Add category column */
.plan-add-col {
    width: 265px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.plan-new-cat-input {
    width: 100%;
    box-sizing: border-box;
    background: #0f172a;
    border: 1px solid #1e293b;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    transition: border-color 0.15s;
}
.plan-new-cat-input:focus { outline: none; border-color: #334155; }
.plan-new-cat-input::placeholder { color: #334155; }
.plan-add-cat-btn {
    background: transparent;
    border: 1px dashed #1e293b;
    color: #475569;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.plan-add-cat-btn:hover { color: #94a3b8; border-color: #334155; background: #0f172a; }

/* ── Toast notification ── */
.app-toast {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    background: #1e2d50;
    color: #e0e0e0;
    border: 1px solid #2a3a5a;
    border-radius: 6px;
    padding: 0.65rem 1.25rem;
    font-size: 0.88rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 1000;
    white-space: nowrap;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
    opacity: 0;
}
.app-toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ── Compare button ── */
.btn-compare {
    background: none;
    border: 1px solid #2a2a4a;
    color: #aaa;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn-compare:hover { background: #1e2d50; border-color: #c8a84b; color: #e0e0e0; }
.btn-compare.panel-open { background: #1e2d50; border-color: #c8a84b; color: #e0e0e0; }
.btn-compare img { width: 1.15rem; height: 1.15rem; object-fit: contain; display: block; }

/* ── Compare panel (right sidebar, tasks view) ── */
#compare-panel {
    width: 360px;
    flex-shrink: 0;
    background: #111c35;
    border-left: 1px solid #2a2a4a;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.compare-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.compare-resize-handle::after {
    content: '';
    width: 2px;
    height: 100%;
    background: #2a3a5a;
    border-radius: 1px;
    transition: background 0.15s, width 0.15s;
}
.compare-resize-handle:hover::after,
.compare-resize-handle.dragging::after {
    background: #c8a84b;
    width: 3px;
}

.compare-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #2a2a4a;
    flex-shrink: 0;
}
.compare-panel-title {
    color: #c8a84b;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.03em;
}
.compare-close-btn {
    background: none;
    color: #aaa;
    border: none;
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.compare-close-btn:hover { color: #e0e0e0; background: #1e2d50; }

.compare-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #2a2a4a;
    flex-shrink: 0;
}
.compare-input-row input {
    flex: 1;
    min-width: 0;
    background: #0f1e38;
    border: 1px solid #2a2a4a;
    color: #e0e0e0;
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
    font-size: 0.88rem;
}
.compare-input-row input:focus { outline: none; border-color: #c8a84b; }
.compare-input-row button { font-size: 0.85rem; padding: 0.35rem 0.8rem; flex-shrink: 0; }

.compare-player-info {
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    color: #888;
    border-bottom: 1px solid #2a2a4a;
    flex-shrink: 0;
}
.compare-player-name { color: #e0e0e0; font-weight: 600; }

.compare-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #2a2a4a;
    flex-shrink: 0;
}
.compare-tab {
    flex: 1;
    background: none;
    color: #aaa;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.55rem 0.4rem;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
    margin-bottom: -1px;
    white-space: nowrap;
}
.compare-tab:hover { background: none; color: #e0e0e0; }
.compare-tab.active { color: #c8a84b; border-bottom-color: #c8a84b; }

.compare-tier-filter {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #2a2a4a;
    flex-shrink: 0;
}
.compare-tier-filter .tier-pills { flex-wrap: wrap; gap: 0.3rem; }

.compare-results {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.compare-status-msg {
    padding: 1.5rem 1rem;
    color: #555;
    font-size: 0.88rem;
    text-align: center;
}
.compare-task-list { display: flex; flex-direction: column; }
.compare-task-row {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #1a2540;
}
.compare-task-row:hover { background: #1a2540; }
.compare-task-name {
    font-size: 0.87rem;
    color: #e0e0e0;
    margin-bottom: 0.18rem;
}
.compare-task-meta {
    font-size: 0.77rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.compare-task-tier {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.compare-tier-easy   { background: #14532d; color: #4ade80; }
.compare-tier-medium { background: #1e3a5f; color: #60a5fa; }
.compare-tier-hard   { background: #431407; color: #fb923c; }
.compare-tier-elite  { background: #450a0a; color: #f87171; }
.compare-tier-master { background: #3b0764; color: #e879f9; }
.compare-empty {
    padding: 1.5rem 1rem;
    color: #555;
    font-size: 0.88rem;
    text-align: center;
}

/* ── Tutorial ── */
#tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}

.tutorial-bd {
    position: absolute;
    background: rgba(0, 0, 0, 0.72);
    pointer-events: all;
}

#tutorial-highlight {
    position: absolute;
    border: 2px solid #c8a84b;
    border-radius: 6px;
    box-shadow: 0 0 0 2px rgba(200, 168, 75, 0.2);
    animation: tut-pulse 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes tut-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(200, 168, 75, 0.2); }
    50%       { box-shadow: 0 0 0 6px rgba(200, 168, 75, 0.35), 0 0 20px rgba(200, 168, 75, 0.15); }
}

#tutorial-card {
    position: absolute;
    width: 310px;
    background: #111c35;
    border: 1px solid #c8a84b;
    border-radius: 10px;
    padding: 1.2rem 1.2rem 0.9rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75);
    z-index: 2;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

#tutorial-dismiss-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: #555;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.12s, background 0.12s;
}
#tutorial-dismiss-btn:hover { color: #e0e0e0; background: #1e2d50; }

.tutorial-step-num {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #555;
}

.tutorial-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #c8a84b;
    line-height: 1.3;
    padding-right: 1.4rem;
}

.tutorial-body {
    font-size: 0.85rem;
    color: #c4c4c4;
    line-height: 1.6;
}

.tut-code {
    font-family: monospace;
    font-size: 0.85em;
    background: #1a2a4a;
    color: #c8a84b;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    border: 1px solid #2a3a5a;
}

.tutorial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.15rem;
    gap: 0.5rem;
}

.tutorial-footer button {
    font-size: 0.84rem;
    padding: 0.3rem 0.85rem;
}

.tutorial-footer .btn-ghost {
    padding: 0.3rem 0.7rem;
}

/* Tutorial buttons in settings panel */
.settings-tutorial-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.settings-tutorial-row button {
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
    width: 100%;
}

/* ── Task detail page ── */
#task-detail-view {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.task-detail-page {
    max-width: 800px;
    margin: 0 auto;
}

.task-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
    background: #c8a84b;
    color: #1a1a2e;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
}
.task-detail-back:hover { background: #e0c060; color: #1a1a2e; }

.task-detail-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #2a2a4a;
}

.task-detail-name {
    font-size: 1.4rem;
    color: #e0e0e0;
    margin-bottom: 0.6rem;
}

.task-detail-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: #888;
}

.task-detail-pts {
    color: #c8a84b;
    font-weight: 600;
}

details.task-detail-section {
    margin-bottom: 1.25rem;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    overflow: hidden;
}

details.task-detail-section > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #0f1e38;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c8a84b;
    font-weight: 600;
}
details.task-detail-section > summary::-webkit-details-marker { display: none; }
details.task-detail-section > summary::marker { display: none; content: ''; }
details.task-detail-section > summary::before {
    content: '▶';
    font-size: 0.65rem;
    transition: transform 0.15s;
    display: inline-block;
}
details.task-detail-section[open] > summary::before {
    transform: rotate(90deg);
}

.task-detail-section-body {
    padding: 1rem 1.25rem;
    background: #0a1628;
}

.task-detail-pending-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin: 0.75rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #1a1a3a;
}

.panel-permalink-row {
    margin-bottom: 0.75rem;
}

.panel-permalink-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    background: #c8a84b;
    color: #1a1a2e;
    border: none;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.82rem;
}
.panel-permalink-btn:hover { background: #e0c060; color: #1a1a2e; }