:root {
    color-scheme: dark;
    --bg: #0b0e12;
    --panel: #121821;
    --panel-strong: #171f2a;
    --line: rgba(161, 174, 194, .18);
    --text: #eef4fb;
    --muted: #8d9aaa;
    --soft: #c6d0dc;
    --green: #4bd18f;
    --cyan: #5fd4ff;
    --amber: #ff9f2f;
    --red: #ff5f6d;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 18% 0%, rgba(95, 212, 255, .12), transparent 31rem),
        linear-gradient(145deg, #0b0e12 0%, #121821 48%, #0c1016 100%);
    color: var(--text);
}

button,
input,
a {
    font: inherit;
}

button,
a {
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.auth-screen {
    min-height: 100vh;
}

.login-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
}

.login-panel {
    width: min(100%, 27rem);
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: rgba(18, 24, 33, .88);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .4);
    padding: 2rem;
}

.brand-lock {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgba(95, 212, 255, .35);
    border-radius: .5rem;
    background: rgba(95, 212, 255, .1);
}

.brand-lock span {
    width: 1.1rem;
    height: 1.35rem;
    border: 2px solid var(--cyan);
    border-radius: .2rem;
    position: relative;
}

.brand-lock span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -.65rem;
    width: 1rem;
    height: .8rem;
    border: 2px solid var(--cyan);
    border-bottom: 0;
    border-radius: .7rem .7rem 0 0;
    transform: translateX(-50%);
}

.login-panel h1 {
    margin: 1.25rem 0 .2rem;
    font-size: 1.8rem;
}

.login-panel p,
.empty-dashboard p,
.empty-achievements p {
    color: var(--muted);
}

.login-form {
    display: grid;
    gap: .75rem;
    margin-top: 1.6rem;
}

.login-form label {
    color: var(--soft);
    font-size: .9rem;
}

.login-form input,
.game-search {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: rgba(8, 11, 16, .82);
    color: var(--text);
    outline: none;
    padding: .82rem .95rem;
}

.login-form input:focus,
.game-search:focus {
    border-color: rgba(95, 212, 255, .65);
    box-shadow: 0 0 0 .2rem rgba(95, 212, 255, .1);
}

.login-form button,
.steam-login-button,
.sync-row button,
.refresh-all-row button,
.refresh-button {
    border: 1px solid rgba(95, 212, 255, .45);
    border-radius: .4rem;
    background: linear-gradient(180deg, rgba(95, 212, 255, .22), rgba(75, 209, 143, .14));
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    padding: .8rem 1rem;
}

.steam-login-button {
    display: block;
    text-align: center;
    text-decoration: none;
}

.form-error {
    color: #ffb5bb;
    font-size: .9rem;
}

.tracker-body {
    min-height: 100vh;
    overflow: hidden;
}

.tracker-shell {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    height: 100vh;
}

.games-panel {
    display: flex;
    min-height: 0;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: rgba(12, 16, 22, .86);
    padding: 1.1rem;
}

.panel-top,
.current-game,
.achievement-title-row,
.achievement-meta,
.meta-row,
.sync-row {
    display: flex;
    align-items: center;
}

.panel-top {
    justify-content: space-between;
    gap: 1rem;
}

.eyebrow {
    margin: 0 0 .15rem;
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.panel-top h1,
.current-copy h2,
.empty-dashboard h2 {
    margin: 0;
    letter-spacing: 0;
}

.panel-top h1 {
    font-size: 1.55rem;
}

.icon-button {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: rgba(255, 255, 255, .04);
    color: var(--soft);
    cursor: pointer;
}

.icon-button svg {
    width: 1.1rem;
    fill: currentColor;
}

.dashboard-return {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid rgba(95, 212, 255, .32);
    border-radius: .45rem;
    background: linear-gradient(135deg, rgba(95, 212, 255, .15), rgba(75, 232, 166, .08));
    color: var(--text);
    font-weight: 850;
    margin: 1.2rem 0 .65rem;
    padding: .75rem .85rem;
    text-decoration: none;
}

.dashboard-return strong {
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--cyan);
    font-size: .78rem;
    padding: .2rem .5rem;
}

.dashboard-return:hover,
.dashboard-return.active {
    border-color: rgba(95, 212, 255, .65);
    box-shadow: inset 0 0 0 1px rgba(95, 212, 255, .14);
}

.dashboard-return + .sync-actions {
    margin-top: 0;
}

.sidebar-tools {
    display: block;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: rgba(255, 255, 255, .035);
    margin: 0 0 .75rem;
    overflow: visible;
}

.sidebar-tools-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    list-style: none;
    padding: .62rem .7rem;
}

.sidebar-tools-heading::-webkit-details-marker {
    display: none;
}

.sidebar-tools-heading::after {
    content: "+";
    color: var(--muted);
    font-weight: 900;
    margin-left: auto;
}

.sidebar-tools[open] .sidebar-tools-heading::after {
    content: "-";
}

.sidebar-tools:not([open]) .sidebar-tools-heading {
    border-bottom: 0;
}

.sidebar-tools-heading h3 {
    margin: 0;
    font-size: .8rem;
}

.sidebar-tools-heading span {
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 850;
}

.sidebar-tool-group {
    display: block;
    border-bottom: 1px solid rgba(161, 174, 194, .12);
}

.sidebar-tool-group:last-of-type {
    border-bottom: 0;
}

.sidebar-tool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: .5rem .7rem .35rem;
}

.sidebar-tool-head > strong {
    color: var(--soft);
    font-size: .7rem;
    font-weight: 850;
}

.sidebar-tool-body {
    display: grid;
    gap: .5rem;
    padding: 0 .7rem .65rem;
}

.sidebar-tool-body.compact {
    gap: .45rem;
}

.sidebar-tool-body form {
    display: grid;
    gap: .45rem;
}

.sidebar-tool-body input,
.platform-select-form select {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: .38rem;
    background: rgba(8, 11, 16, .82);
    color: var(--text);
    outline: none;
    padding: .58rem .65rem;
}

.sidebar-tool-body input:focus,
.platform-select-form select:focus {
    border-color: rgba(95, 212, 255, .65);
}

.sidebar-tool-body button,
.platform-select-form button {
    border: 1px solid rgba(95, 212, 255, .45);
    border-radius: .38rem;
    background: rgba(95, 212, 255, .1);
    color: var(--text);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 850;
    padding: .58rem .65rem;
}

.sidebar-tool-body small {
    display: block;
    color: var(--muted);
    font-size: .72rem;
}

.sidebar-tools .sync-actions {
    margin: 0;
}

.sidebar-tools .refresh-all-row,
.sidebar-tools .spoiler-toggle {
    margin: 0;
}

.sidebar-tools .sync-row button {
    min-height: 2.35rem;
}

.sidebar-tools .platform-mini-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.sidebar-preferences {
    border-top: 1px solid rgba(161, 174, 194, .12);
    margin: 0;
    padding: .55rem .7rem;
}

.sync-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin: 0 0 .8rem;
}

.sync-row {
    min-width: 0;
}

.sync-row button {
    width: 100%;
    min-height: 2.75rem;
    font-size: .9rem;
    line-height: 1.15;
    padding-inline: .45rem;
}

.sync-actions .sync-row button {
    font-size: .72rem;
    line-height: 1.08;
    padding-inline: .25rem;
}

.refresh-all-row {
    margin: 0 0 .8rem;
}

.refresh-all-row button {
    width: 100%;
    min-height: 2.65rem;
    background: rgba(95, 212, 255, .08);
    font-size: .9rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.spoiler-toggle {
    border: 1px solid var(--line);
    border-radius: .4rem;
    margin: 0 0 .8rem;
    background: rgba(255, 255, 255, .035);
    padding: .55rem .65rem;
}

.spoiler-toggle.compact {
    border: 0;
    background: transparent;
    padding: 0;
}

.spoiler-toggle label,
.archive-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--soft);
    font-size: .82rem;
}

.platform-link-card {
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: rgba(255, 255, 255, .035);
    margin: 0 0 .8rem;
    padding: .7rem;
}

.platform-link-card .tool-heading {
    margin-bottom: .55rem;
}

.platform-link-card h3 {
    margin: 0;
    font-size: .84rem;
}

.platform-link-card form {
    display: grid;
    gap: .45rem;
}

.platform-link-card.compact {
    padding: .62rem;
}

.platform-mini-form {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.platform-link-card input,
.platform-link-card select {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: .38rem;
    background: rgba(8, 11, 16, .82);
    color: var(--text);
    outline: none;
    padding: .58rem .65rem;
}

.platform-link-card input:disabled {
    opacity: .7;
}

.platform-link-card input:focus,
.platform-link-card select:focus {
    border-color: rgba(95, 212, 255, .65);
}

.platform-link-card input[type="file"] {
    color: var(--muted);
    font-size: .72rem;
}

.platform-link-card button {
    border: 1px solid rgba(95, 212, 255, .45);
    border-radius: .38rem;
    background: rgba(95, 212, 255, .1);
    color: var(--text);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 850;
    padding: .58rem .65rem;
}

.platform-mini-form button {
    padding-inline: .55rem;
}

.platform-link-card small {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    margin-top: .45rem;
}

.platform-select-form {
    display: grid;
    gap: .35rem;
    margin: 0 0 .7rem;
}

.platform-select-form label {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.platform-badge,
.platform-mini {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid rgba(161, 174, 194, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: var(--soft);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    padding: .25rem .48rem;
}

.platform-badge i {
    width: .58rem;
    height: .58rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef4fb, #5fd4ff 55%, #16324c);
    box-shadow: 0 0 .45rem rgba(95, 212, 255, .4);
}

.platform-steam {
    border-color: rgba(95, 212, 255, .38);
    background: rgba(95, 212, 255, .12);
    color: #dff6ff;
}

.platform-psn {
    border-color: rgba(88, 130, 255, .42);
    background: rgba(88, 130, 255, .13);
    color: #dfe7ff;
}

.platform-psn i {
    background: linear-gradient(135deg, #eef4fb, #5882ff 58%, #142055);
    box-shadow: 0 0 .45rem rgba(88, 130, 255, .38);
}

.platform-xbox {
    border-color: rgba(75, 209, 143, .42);
    background: rgba(75, 209, 143, .12);
    color: #ddffed;
}

.platform-xbox i {
    background: linear-gradient(135deg, #f0fff7, #4bd18f 58%, #0f3d24);
    box-shadow: 0 0 .42rem rgba(75, 209, 143, .34);
}

.platform-all i {
    background: linear-gradient(135deg, var(--cyan), var(--green));
}

.platform-mini {
    margin-right: .25rem;
    padding: .18rem .38rem;
    font-size: .64rem;
}

.game-list {
    display: grid;
    align-content: start;
    gap: .45rem;
    min-height: 0;
    overflow: auto;
    padding: .9rem .2rem 1rem 0;
}

.game-tile {
    margin: 0;
}

.game-tile button {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr) 2.1rem;
    gap: .75rem;
    align-items: center;
    width: 100%;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: .6rem;
    text-align: left;
}

.game-tile button:hover,
.game-tile.active button {
    border-color: var(--line);
    background: rgba(255, 255, 255, .055);
}

.game-tile.active button {
    box-shadow: inset .18rem 0 0 var(--cyan);
}

.game-tile.completed button {
    border-color: rgba(255, 204, 87, .32);
    box-shadow: inset .18rem 0 0 #ffcc57;
}

.game-tile.completed.active button {
    border-color: rgba(255, 204, 87, .58);
}

.game-icon,
.achievement-icon {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .35rem;
    background: #0a0e14;
}

.achievement-icon.small {
    width: 2.8rem;
    height: 2.8rem;
}

.game-icon {
    width: 2.3rem;
    height: 2.3rem;
}

.game-icon img,
.achievement-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-copy {
    min-width: 0;
}

.game-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
}

.game-copy small,
.achievement-meta,
.meta-row {
    color: var(--muted);
    font-size: .78rem;
}

.main-badge,
.completed-badge,
.stale-badge,
.played-date {
    display: inline-block;
    margin-left: .35rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    padding: .04rem .35rem;
    text-transform: uppercase;
    vertical-align: .08rem;
}

.played-date {
    border: 1px solid rgba(161, 174, 194, .2);
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
    font-weight: 700;
    text-transform: none;
}

.main-badge {
    border: 1px solid rgba(95, 212, 255, .35);
    background: rgba(95, 212, 255, .12);
    color: var(--cyan);
}

.completed-badge {
    border: 1px solid rgba(255, 204, 87, .48);
    background: rgba(255, 204, 87, .13);
    color: #ffcc57;
}

.stale-badge {
    border: 1px solid rgba(255, 159, 47, .45);
    background: rgba(255, 159, 47, .12);
    color: #ffbd72;
}

.progress-ring {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--green) var(--value), rgba(255, 255, 255, .1) 0);
    color: #07100c;
    font-size: .68rem;
    font-weight: 900;
}

.game-tile.completed .progress-ring {
    background: conic-gradient(#ffcc57 var(--value), rgba(255, 255, 255, .1) 0);
    color: #201500;
}

.achievement-panel {
    min-width: 0;
    height: 100vh;
    overflow: auto;
    padding: 1.4rem;
}

.notice {
    border: 1px solid var(--line);
    border-radius: .45rem;
    margin-bottom: .9rem;
    padding: .85rem 1rem;
}

.notice.success {
    background: rgba(75, 209, 143, .1);
    color: #bff8dc;
}

.notice.error {
    background: rgba(255, 95, 109, .1);
    color: #ffc2c7;
}

.current-game {
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background:
        linear-gradient(90deg, rgba(95, 212, 255, .08), transparent 55%),
        rgba(18, 24, 33, .78);
    padding: 1rem;
}

.current-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.current-actions a,
.current-actions button {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    border: 1px solid rgba(95, 212, 255, .35);
    border-radius: .4rem;
    background: rgba(95, 212, 255, .08);
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    padding: .55rem .72rem;
    text-decoration: none;
}

.current-art {
    display: grid;
    width: 4rem;
    height: 4rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(95, 212, 255, .25);
    border-radius: .45rem;
    background: rgba(0, 0, 0, .24);
    overflow: hidden;
}

.current-copy {
    flex: 1;
    min-width: 0;
}

.current-copy h2 {
    overflow-wrap: anywhere;
    font-size: clamp(1.5rem, 2.5vw, 2.6rem);
    line-height: 1.05;
}

.meta-row {
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .65rem;
}

.meta-row span,
.achievement-meta span,
.secret-pill {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    padding: .22rem .55rem;
}

.stats-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: .9rem 0;
}

.stats-strip div {
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: rgba(18, 24, 33, .62);
    padding: .85rem;
}

.stats-strip strong {
    display: block;
    font-size: 1.45rem;
}

.stats-strip span {
    color: var(--muted);
    font-size: .8rem;
}

.overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background:
        linear-gradient(90deg, rgba(95, 212, 255, .1), transparent 55%),
        rgba(18, 24, 33, .78);
    margin-bottom: .9rem;
    padding: 1.1rem;
}

.overview-hero h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
}

.overview-hero p {
    color: var(--muted);
    margin: .55rem 0 0;
}

.overview-donut {
    display: grid;
    width: 8.4rem;
    height: 8.4rem;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, #111821 0 55%, transparent 56%),
        conic-gradient(var(--green) var(--value), rgba(255, 255, 255, .09) 0);
}

.overview-donut strong,
.overview-donut span {
    grid-area: 1 / 1;
}

.overview-donut strong {
    font-size: 1.8rem;
}

.overview-donut span {
    align-self: end;
    margin-bottom: 1.8rem;
    color: var(--muted);
    font-size: .72rem;
}

.overview-donut.small {
    width: 5.4rem;
    height: 5.4rem;
}

.overview-stats,
.analytics-grid {
    display: grid;
    gap: .75rem;
}

.overview-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: .9rem;
}

.overview-stats div,
.analytics-panel {
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: rgba(18, 24, 33, .66);
    padding: .85rem;
}

.overview-stats strong {
    display: block;
    font-size: 1.55rem;
}

.overview-stats span,
.soft-label {
    color: var(--muted);
    font-size: .78rem;
}

.analytics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 1.5rem;
}

.analytics-panel.wide {
    grid-column: span 2;
}

.bar-chart {
    display: grid;
    gap: .65rem;
}

.bar-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: .65rem;
}

.bar-row span,
.bar-row strong {
    color: var(--soft);
    font-size: .78rem;
}

.bar-row div {
    height: .7rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.bar-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--green));
}

.split-chart {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.split-chart p {
    margin: .25rem 0;
}

.link-row {
    color: inherit;
    text-decoration: none;
}

.link-row:hover strong {
    color: var(--cyan);
}

.recent-achievements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    min-height: 3rem;
}

.recent-achievement {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: rgba(255, 255, 255, .035);
    color: inherit;
    padding: .55rem;
    text-decoration: none;
}

.recent-achievement strong,
.recent-achievement small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-achievement small {
    color: var(--muted);
    font-size: .76rem;
}

.compare-panel {
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: rgba(18, 24, 33, .66);
    margin-bottom: .9rem;
    padding: .85rem;
}

.compare-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
}

.compare-form input,
.compare-form select {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: .35rem;
    background: rgba(8, 11, 16, .82);
    color: var(--text);
    padding: .55rem .65rem;
}

.compare-form button {
    border: 1px solid rgba(95, 212, 255, .35);
    border-radius: .35rem;
    background: rgba(95, 212, 255, .1);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    padding: .55rem .8rem;
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .7rem;
}

.compare-summary,
.refresh-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .45rem;
    margin: .7rem 0;
}

.refresh-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compare-summary div,
.refresh-status-grid div {
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: rgba(255, 255, 255, .035);
    padding: .55rem;
}

.compare-summary strong,
.compare-summary span,
.refresh-status-grid strong,
.refresh-status-grid span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-summary span,
.refresh-status-grid span {
    color: var(--muted);
    font-size: .72rem;
}

.compare-grid div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .5rem;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: .5rem;
}

.compare-grid strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}

.compare-grid span {
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .7rem;
    padding: .15rem .45rem;
}

.compare-grid .yes {
    color: #bff8dc;
}

.compare-grid .no {
    color: #ffc2c7;
}

.sync-modal[hidden] {
    display: none;
}

.sync-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 6, 10, .74);
    backdrop-filter: blur(14px);
}

.sync-modal-panel {
    width: min(28rem, 100%);
    border: 1px solid rgba(95, 212, 255, .28);
    border-radius: .65rem;
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .48), 0 0 2.2rem rgba(95, 212, 255, .1);
    background: linear-gradient(180deg, rgba(20, 30, 42, .98), rgba(10, 14, 20, .98));
    padding: 1.15rem;
}

.sync-modal-panel h2 {
    margin: .1rem 0 .55rem;
    font-size: 1.45rem;
}

.sync-modal-panel p:not(.eyebrow) {
    margin: 0 0 .9rem;
    color: var(--soft);
}

.sync-modal-panel small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}

.sync-modal-panel button {
    margin-top: .9rem;
    border: 1px solid rgba(95, 212, 255, .45);
    border-radius: .4rem;
    background: rgba(95, 212, 255, .12);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    padding: .6rem .85rem;
}

.sync-loader {
    width: 2.4rem;
    height: 2.4rem;
    border: .18rem solid rgba(255, 255, 255, .14);
    border-top-color: var(--cyan);
    border-radius: 999px;
    margin-bottom: .8rem;
    animation: sync-spin .85s linear infinite;
}

.sync-progress {
    position: relative;
    height: .7rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    margin-bottom: .65rem;
}

.sync-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--green), var(--gold));
    transition: width .22s ease;
}

.sync-progress.is-working::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(95, 212, 255, .45), transparent);
    animation: sync-progress-sweep 1.05s ease-in-out infinite;
}

@keyframes sync-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sync-progress-sweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .9rem;
}

.filters a {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--soft);
    padding: .45rem .75rem;
    text-decoration: none;
}

.filters a.active,
.filters a:hover {
    border-color: rgba(95, 212, 255, .5);
    background: rgba(95, 212, 255, .12);
    color: var(--text);
}

.hunt-tools,
.command-grid {
    display: grid;
    gap: .75rem;
    margin-bottom: .9rem;
}

.hunt-tools {
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr);
}

.command-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hunt-card,
.command-panel {
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: rgba(18, 24, 33, .66);
    padding: .85rem;
}

.command-panel.wide {
    grid-column: span 2;
}

.dashboard-command-grid {
    margin-bottom: .9rem;
}

.mini-action {
    border: 1px solid rgba(95, 212, 255, .35);
    border-radius: .35rem;
    background: rgba(95, 212, 255, .1);
    color: var(--text);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 800;
    padding: .28rem .5rem;
}

.tool-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.tool-heading h3,
.command-panel h3 {
    margin: 0;
    font-size: .95rem;
}

.game-notes form,
.achievement-plan {
    display: grid;
    gap: .5rem;
}

.game-notes textarea,
.game-notes input,
.game-notes select,
.achievement-plan input,
.achievement-plan select {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: .35rem;
    background: rgba(8, 11, 16, .82);
    color: var(--text);
    outline: none;
    padding: .55rem .65rem;
}

.game-notes button,
.achievement-plan button {
    border: 1px solid rgba(95, 212, 255, .35);
    border-radius: .35rem;
    background: rgba(95, 212, 255, .1);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    padding: .55rem .65rem;
}

.tool-grid,
.achievement-plan {
    grid-template-columns: minmax(0, 1fr) minmax(0, 12rem);
}

.achievement-plan {
    align-items: center;
    grid-template-columns: 7rem 7rem minmax(0, .8fr) minmax(0, 1fr) 4rem;
    margin-top: .65rem;
}

.history-list {
    display: grid;
    gap: .45rem;
}

.history-list div,
.mini-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem .65rem;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: .45rem;
}

.history-list div:first-child,
.mini-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.history-list span,
.history-list small,
.mini-row span,
.command-panel p,
.history-list p {
    color: var(--muted);
    font-size: .78rem;
}

.history-list small {
    grid-column: 1 / -1;
}

.mini-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: .75rem;
    padding-bottom: 1.5rem;
}

.achievement-card {
    position: relative;
    display: grid;
    grid-template-columns: 4.15rem minmax(0, 1fr);
    gap: .9rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: linear-gradient(180deg, rgba(23, 31, 42, .92), rgba(13, 18, 25, .92));
    overflow: hidden;
    padding: .8rem;
}

.achievement-card.locked {
    opacity: .72;
}

.achievement-card.rarity-rare,
.achievement-card.rarity-mythic {
    border-color: rgba(255, 159, 47, .5);
}

.achievement-card.rarity-rare::before,
.achievement-card.rarity-mythic::before {
    content: "";
    position: absolute;
    inset: -1px auto -1px -1px;
    width: 5.8rem;
    background: radial-gradient(circle at 45% 50%, rgba(255, 157, 36, .54), rgba(255, 128, 22, .18) 42%, transparent 72%);
    filter: blur(.15rem);
    pointer-events: none;
}

.achievement-card.rarity-mythic {
    box-shadow: 0 0 1rem rgba(255, 144, 28, .28), inset 0 0 1.4rem rgba(255, 124, 21, .13);
}

.achievement-card.rarity-mythic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 0 18%, rgba(255, 190, 88, .2) 22%, transparent 29%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.achievement-icon {
    position: relative;
    z-index: 1;
    width: 4.15rem;
    height: 4.15rem;
}

.achievement-icon.image-missing::after {
    content: attr(data-fallback);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 900;
}

.achievement-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.achievement-title-row {
    align-items: flex-start;
    gap: .5rem;
    justify-content: space-between;
}

.achievement-title-row h3 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: .98rem;
}

.secret-pill {
    flex: 0 0 auto;
    color: #fbd38f;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.info-pill {
    color: #b8e8ff;
}

.source-pill {
    flex: 0 0 auto;
    border: 1px solid rgba(112, 211, 255, .3);
    border-radius: 999px;
    color: var(--soft);
    font-size: .66rem;
    font-weight: 900;
    padding: .12rem .42rem;
    text-transform: uppercase;
}

.achievement-copy p {
    min-height: 2.4rem;
    margin: .35rem 0 .6rem;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.42;
}

.achievement-plan {
    grid-column: 1 / -1;
}

.achievement-meta {
    flex-wrap: wrap;
    gap: .4rem;
}

.achievement-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    margin: .65rem 0 .1rem;
}

.achievement-progress div {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    height: .42rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(161, 174, 194, .32);
    pointer-events: none;
}

.achievement-progress span {
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22a9ff, var(--cyan));
}

.achievement-progress input[type="range"] {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 1.2rem;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
    outline: none;
}

.achievement-progress input[type="range"]::-webkit-slider-runnable-track {
    height: .42rem;
    border-radius: 999px;
    background: transparent;
}

.achievement-progress input[type="range"]::-moz-range-track {
    height: .42rem;
    border-radius: 999px;
    background: transparent;
}

.achievement-progress input[type="range"]::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -.29rem;
    appearance: none;
    border: 2px solid #dff6ff;
    border-radius: 999px;
    background: var(--cyan);
    box-shadow: 0 0 .75rem rgba(95, 212, 255, .55);
}

.achievement-progress input[type="range"]::-moz-range-thumb {
    width: .85rem;
    height: .85rem;
    border: 2px solid #dff6ff;
    border-radius: 999px;
    background: var(--cyan);
    box-shadow: 0 0 .75rem rgba(95, 212, 255, .55);
}

.achievement-progress strong {
    color: var(--soft);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.empty-state,
.empty-achievements,
.empty-dashboard {
    border: 1px dashed var(--line);
    border-radius: .5rem;
    color: var(--muted);
    padding: 1rem;
}

.empty-achievements,
.empty-dashboard {
    grid-column: 1 / -1;
    text-align: center;
}

@media (max-width: 900px) {
    .tracker-body {
        overflow: auto;
    }

    .tracker-shell {
        grid-template-columns: 1fr;
        height: auto;
    }

    .games-panel,
    .achievement-panel {
        height: auto;
        overflow: visible;
    }

    .games-panel {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .game-list {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        max-height: 18rem;
    }

    .overview-stats,
    .analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .achievement-panel,
    .games-panel {
        padding: .85rem;
    }

    .current-game {
        align-items: stretch;
        flex-direction: column;
    }

    .stats-strip,
    .achievement-grid,
    .hunt-tools,
    .command-grid,
    .overview-stats,
    .analytics-grid,
    .overview-hero {
        grid-template-columns: 1fr;
    }

    .overview-donut {
        justify-self: start;
    }

    .analytics-panel.wide {
        grid-column: span 1;
    }

    .command-panel.wide {
        grid-column: span 1;
    }

    .achievement-plan,
    .tool-grid,
    .compare-form,
    .compare-summary,
    .compare-grid,
    .recent-achievements {
        grid-template-columns: 1fr;
    }

    .achievement-card {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .achievement-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
}

.platform-health-grid,
.hunt-board,
.related-platforms {
    display: grid;
    gap: .75rem;
}

.platform-health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform-health-grid > div,
.platform-match-card,
.hunt-board > div {
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: rgba(12, 19, 30, .52);
    padding: .8rem;
}

.platform-health-grid strong,
.platform-match-card strong,
.hunt-board > div > strong {
    display: block;
    margin-top: .5rem;
    color: var(--text);
    font-size: 1.15rem;
}

.platform-health-grid small,
.platform-health-grid em,
.platform-match-card small,
.hunt-board small {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
    margin-top: .25rem;
}

.platform-match-row span {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.platform-match-row .platform-badge {
    text-decoration: none;
}

.related-platforms {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.related-platforms .tool-heading {
    grid-column: 1 / -1;
}

.platform-match-card {
    color: inherit;
    text-decoration: none;
}

.quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.quick-tags label {
    cursor: pointer;
}

.quick-tags input {
    position: absolute;
    opacity: 0;
}

.quick-tags span {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--soft);
    font-size: .76rem;
    font-weight: 800;
    padding: .28rem .55rem;
}

.quick-tags input:checked + span {
    border-color: rgba(95, 212, 255, .65);
    background: rgba(47, 192, 255, .14);
    color: #dff6ff;
}

@media (max-width: 900px) {
    .platform-health-grid {
        grid-template-columns: 1fr;
    }
}