/* Dawson PlayStation — interface autonome, sans dépendance distante. */
:root {
    color-scheme:dark;
    --bg:#0d1016;
    --surface:#151922;
    --surface-2:#1b202b;
    --line:#282e3b;
    --text:#eff1f7;
    --muted:#909aaf;
    --accent:#b6a5ff;
    --mint:#9bdfc0;
    --amber:#e5c27f;
    --danger:#f09d9e;
    --sidebar:224px;
    --radius:14px;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:14px;
    font-synthesis:none;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input,select {
    font:inherit;
}

button,a,input,select {
    -webkit-tap-highlight-color:transparent;
}

button {
    cursor:pointer;
}

button:disabled {
    cursor:wait;
    opacity:.65;
}

button,input,select {
    color:inherit;
}

a,button,input,select {
    outline-offset:4px;
}

:focus-visible {
    outline:2px solid var(--accent);
}

[hidden] {
    display:none!important;
}

.icon {
    width:20px;
    height:20px;
    flex-shrink:0;
    vertical-align:middle;
}

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

.skip-link {
    position:fixed;
    left:16px;
    top:-100px;
    z-index:100;
    background:var(--accent);
    color:var(--bg);
    padding:12px;
}

.skip-link:focus {
    top:12px;
}

.muted {
    color:var(--muted);
}

.mint {
    color:var(--mint);
}

.amber {
    color:var(--amber);
}

.accent {
    color:var(--accent);
}

.small {
    font-size:12px;
}

code,kbd {
    font-family:"SFMono-Regular",Consolas,monospace;
}

strong {
    font-weight:650;
}

h1,h2,h3,p {
    margin:0;
}

h1 {
    font-size:34px;
    letter-spacing:-1.35px;
    line-height:1.2;
    font-weight:650;
}

h2 {
    font-size:18px;
    letter-spacing:-.35px;
    font-weight:600;
}

h3 {
    font-weight:600;
}

p {
    color:var(--muted);
}

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar);
    background:#11141c;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    padding:30px 18px 20px;
    z-index:10;
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 10px;
}

.brand-mark {
    font-size:34px;
    letter-spacing:-2px;
    font-weight:850;
    line-height:1;
}

.brand-mark>span {
    color:var(--accent);
}

.brand>span:last-child {
    font-size:22px;
    font-weight:750;
    line-height:1.25;
    letter-spacing:-0.5px;
}

.brand small {
    display:block;
    margin-top:5px;
    font-size:9px;
    font-weight:600;
    letter-spacing:1.8px;
    color:var(--muted);
}

.nav-caption {
    font-size:9px;
    letter-spacing:1.7px;
    font-weight:600;
    color:#667086;
    margin:53px 12px 13px;
}

.navigation {
    display:flex;
    flex-direction:column;
    gap:7px;
}

.navigation>a {
    display:flex;
    gap:11px;
    align-items:center;
    padding:12px 13px;
    border-radius:9px;
    color:#a4aec2;
    font-size:12px;
    transition:background .15s,color .15s;
}

.navigation>a>.icon {
    width:18px;
    height:18px;
}

.navigation>a:hover {
    background:#1b202d;
    color:var(--text);
}

.navigation>a.active {
    color:#c8baff;
    background:#242039;
}

.nav-arrow {
    margin-left:auto;
    width:13px!important;
}

.sidebar-note {
    margin:auto 12px 30px;
    padding-top:70px;
}

.sidebar-note>.icon {
    color:var(--accent);
    width:25px;
    height:25px;
    margin-bottom:13px;
}

.sidebar-note p {
    font-size:16px;
    line-height:1.5;
    color:#bcc3d3;
    font-weight:500;
    letter-spacing:-.3px;
}

.sidebar-note>span {
    display:block;
    color:#657087;
    font-size:10px;
    margin-top:12px;
    line-height:1.6;
}

.account {
    border-top:1px solid var(--line);
    padding:21px 6px 0;
    display:flex;
    align-items:center;
    gap:10px;
}

.account-avatar {
    display:grid;
    place-items:center;
    background:#292d43;
    border:1px solid #3c4260;
    border-radius:50%;
    width:33px;
    height:33px;
    font-size:12px;
    color:#d3caf7;
}

.account strong {
    font-size:12px;
    display:block;
}

.account small {
    font-size:10px;
    display:block;
    color:var(--muted);
}

.account-platform {
    font-size:9px;
    letter-spacing:1px;
    color:#76839d;
    margin-left:auto;
}

.workspace {
    margin-left:var(--sidebar);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.topbar {
    height:68px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 38px;
    color:#7b879e;
    font-size:11px;
}

.breadcrumb {
    display:flex;
    gap:14px;
    align-items:center;
}

.breadcrumb>span {
    color:#485063;
}

.breadcrumb strong {
    font-weight:500;
    color:#b1bbce;
}

.workspace-label {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    letter-spacing:.4px;
}

.workspace-label>.icon {
    width:16px;
    height:16px;
}

main {
    padding:35px 38px 48px;
    max-width:1720px;
    width:100%;
    margin:0 auto;
    flex:1;
}

.footer {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin:0 38px;
    padding:19px 0 22px;
    border-top:1px solid var(--line);
    color:#657087;
    font-size:10px;
}

.footer>span:last-child {
    color:#4f5a6f;
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:9px;
    font-weight:650;
    letter-spacing:1.9px;
    color:var(--accent);
    margin-bottom:13px;
}

.eyebrow>span:not(.tiny-line) {
    color:#5a647a;
}

.tiny-line {
    display:block;
    width:20px;
    height:2px;
    background:var(--accent);
}

.page-heading {
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:center;
    margin-bottom:29px;
}

.page-heading p {
    font-size:12px;
    margin-top:12px;
    line-height:1.7;
}

.page-heading>.button,.page-heading>form {
    flex-shrink:0;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    padding:10px 16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface-2);
    font-size:11px;
    font-weight:600;
    line-height:1.4;
    transition:background .15s,border-color .15s,transform .15s;
    white-space:nowrap;
}

.button .icon {
    width:16px;
    height:16px;
}

.button:hover {
    background:#292f3d;
    border-color:#4b5265;
}

.button.primary {
    background:var(--accent);
    border-color:var(--accent);
    color:#171126;
    box-shadow:0 3px 12px #0002;
}

.button.primary:hover {
    background:#c5b8ff;
    border-color:#c5b8ff;
}

.button.subtle {
    background:transparent;
    color:#bbc4d8;
}

.button.subtle:hover {
    background:var(--surface-2);
}

.button.destructive {
    background:#c75661;
    border-color:#c75661;
    color:white;
}

.small-button {
    min-height:35px;
    padding:8px 12px;
    font-size:10px;
}

.stat-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:36px;
}

.stat {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 20px 17px;
    position:relative;
    overflow:hidden;
}

.stat-featured {
    background:linear-gradient(115deg,#231e37,#181a27);
    border-color:#403753;
}

.stat-label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:500;
    color:#bbc4d8;
}

.stat-label>.icon {
    width:17px;
    height:17px;
    color:#68768d;
}

.stat-featured .stat-label>.icon {
    color:var(--accent);
}

.stat>strong {
    display:block;
    font-size:37px;
    line-height:1.5;
    letter-spacing:-1.3px;
    font-weight:600;
    margin-top:5px;
}

.stat-featured>strong {
    color:#d2c5ff;
}

.stat>span {
    font-size:10px;
    color:#737f96;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}

.section-heading>h2 {
    display:flex;
    align-items:center;
    gap:10px;
}

.count-badge {
    font-size:10px;
    letter-spacing:0;
    min-width:25px;
    text-align:center;
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--muted);
    padding:2px 7px;
    border-radius:6px;
}

.toolbar {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:23px;
}

.search-field {
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#12161e;
    min-height:42px;
    padding:0 13px;
    flex:1;
    min-width:100px;
}

.search-field>.icon {
    color:#768198;
    width:16px;
    height:16px;
}

.search-field input {
    width:100%;
    min-width:0;
    border:0;
    background:transparent;
    outline:none;
    font-size:11px;
    padding:11px 0;
}

.search-field:focus-within {
    border-color:#8977cc;
    box-shadow:0 0 0 2px #b6a5ff14;
}

.search-field kbd {
    color:#657086;
    border:1px solid #2d3545;
    border-radius:4px;
    width:19px;
    height:20px;
    display:grid;
    place-items:center;
    font-size:10px;
    flex-shrink:0;
}

input::placeholder {
    color:#647088;
}

.select-field select {
    font-size:11px;
    height:42px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:0 30px 0 13px;
    min-width:159px;
    cursor:pointer;
}

.game-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:20px;
}

.game-card {
    min-width:0;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--surface);
    transition:border-color .17s,transform .17s,box-shadow .17s;
}

.game-card:hover {
    border-color:#695b96;
    transform:translateY(-3px);
    box-shadow:0 9px 28px #0003;
}

.game-cover {
    height:147px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(140deg,hsl(var(--cover-hue) 26% 24%),hsl(var(--cover-hue) 18% 12%));
}

.cover-fallback {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
}

.cover-fallback>.icon {
    width:48px;
    height:48px;
    color:#c9d8ff24;
    transform:rotate(-12deg);
}

.game-cover>img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    position:relative;
    transition:transform .4s;
}

.game-card:hover .game-cover>img {
    transform:scale(1.035);
}

.game-cover:after {
    content:"";
    position:absolute;
    inset:45% 0 0;
    background:linear-gradient(transparent,#10131aa8);
    pointer-events:none;
}

.platform-chip {
    position:absolute;
    top:12px;
    left:12px;
    border:1px solid #ffffff24;
    padding:3px 7px;
    background:#10131ab8;
    backdrop-filter:blur(5px);
    color:#e3e8f3;
    font-size:9px;
    font-weight:600;
    letter-spacing:.5px;
    border-radius:4px;
    z-index:1;
}

.platinum-chip {
    position:absolute;
    right:12px;
    top:12px;
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    background:#172d3fdd;
    border:1px solid #8ecbfb66;
    border-radius:50%;
    color:#a5d8ff;
    z-index:1;
}

.platinum-chip>.icon {
    width:16px;
    height:16px;
}

.cover-open {
    position:absolute;
    right:13px;
    bottom:12px;
    z-index:1;
    color:#fafaff80;
    transition:color .2s;
}

.cover-open>.icon {
    width:18px;
    height:18px;
}

.game-card:hover .cover-open {
    color:white;
}

.game-info {
    padding:15px 16px 13px;
}

.game-info h3 {
    font-size:13px;
    line-height:1.5;
    min-height:39px;
    letter-spacing:-.15px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:11px;
}

.game-meta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    font-size:10px;
    color:#c1c9d8;
}

.game-meta strong {
    font-size:10px;
}

.progress-track {
    height:4px;
    border-radius:8px;
    background:#2a3040;
    margin-top:9px;
    overflow:hidden;
}

.progress-track>span {
    height:100%;
    display:block;
    background:#a596df;
    border-radius:8px;
}

.progress-track>span.done {
    background:var(--mint);
}

.trophy-counts {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #262c38;
    margin-top:14px;
    padding-top:11px;
    gap:8px;
}

.trophy-counter {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:10px;
}

.trophy-counter .icon {
    width:13px;
    height:13px;
}

.platinum {
    color:#b1d8ee;
}

.gold {
    color:#dabc75;
}

.silver {
    color:#b8c4d5;
}

.bronze {
    color:#c99377;
}

.results-count {
    font-size:10px;
    color:#68758c;
    margin-top:17px;
}

.empty-state {
    padding:55px 20px;
    text-align:center;
    border:1px dashed var(--line);
    border-radius:var(--radius);
    margin-top:15px;
}

.empty-state>.icon {
    width:34px;
    height:34px;
    color:var(--accent);
    margin-bottom:18px;
}

.empty-state h3 {
    font-size:17px;
    margin-bottom:8px;
}

.empty-state p {
    font-size:12px;
}

.notice {
    display:flex;
    gap:12px;
    align-items:center;
    background:#173029;
    border:1px solid #2a5347;
    color:#b7e5d0;
    padding:13px 16px;
    border-radius:10px;
    margin-bottom:24px;
    font-size:12px;
}

.notice.error {
    color:#f2c3c3;
    background:#33212a;
    border-color:#573340;
}

.notice>span {
    flex:1;
}

.notice>button {
    border:0;
    background:transparent;
    color:inherit;
    padding:3px;
}

.notice>button>.icon {
    width:15px;
    height:15px;
}

.back-link {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:11px;
    color:#939fb7;
    margin-bottom:26px;
}

.back-link:hover {
    color:var(--accent);
}

.back-link>.icon {
    width:15px;
    height:15px;
}

.game-heading {
    display:flex;
    align-items:center;
    gap:23px;
    margin-bottom:32px;
}

.game-heading-cover {
    width:107px;
    height:107px;
    border-radius:14px;
    flex-shrink:0;
    background:var(--surface-2);
    border:1px solid var(--line);
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
}

.game-heading-cover>img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.game-heading-cover>.icon {
    width:40px;
    height:40px;
    color:#555f78;
}

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

.game-heading-copy h1 {
    font-size:30px;
    letter-spacing:-.9px;
}

.game-heading-copy p {
    margin-top:12px;
    font-size:12px;
}

.dot-separator {
    padding:0 10px;
    color:#59637a;
}

.tabs {
    display:flex;
    gap:24px;
    border-bottom:1px solid var(--line);
    margin-bottom:26px;
}

.tabs>a,.tabs>span {
    font-size:12px;
    padding:0 1px 13px;
    color:var(--muted);
    border-bottom:2px solid transparent;
}

.tabs .selected {
    border-color:var(--accent);
    color:var(--accent);
}

.trophy-list {
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--surface);
}

.trophy-row {
    display:flex;
    align-items:center;
    gap:20px;
    padding:19px 21px;
    border-bottom:1px solid var(--line);
    transition:background .15s;
}

.trophy-row:last-child {
    border-bottom:0;
}

.trophy-row:hover {
    background:#1a1f2b;
}

.trophy-art {
    position:relative;
    display:grid;
    place-items:center;
    width:62px;
    height:62px;
    border-radius:10px;
    background:#23293a;
    overflow:hidden;
    flex-shrink:0;
}

.trophy-art>a {
    position:absolute;
    inset:0;
}

.trophy-art img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.trophy-art>.icon {
    width:27px;
    height:27px;
    opacity:.4;
}

.trophy-description {
    flex:1;
    min-width:0;
}

.trophy-title {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:5px;
}

.trophy-title h3 {
    font-size:13px;
}

.trophy-type {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:9px;
    border:1px solid #364055;
    border-radius:4px;
    padding:1px 5px;
    line-height:1.7;
}

.trophy-type>.icon {
    width:11px;
    height:11px;
}

.trophy-description p {
    font-size:11px;
    line-height:1.6;
    max-width:680px;
}

.trophy-status {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    flex-shrink:0;
    min-width:135px;
}

.status-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:9px;
    border:1px solid var(--line);
    padding:3px 8px;
    border-radius:5px;
    white-space:nowrap;
}

.status-pill>.icon {
    width:12px;
    height:12px;
}

.status-pill.earned {
    color:var(--mint);
    background:#9bdfc00c;
    border-color:#3b6352;
}

.status-pill.pending {
    color:var(--amber);
    background:#e5c27f0a;
    border-color:#5c5037;
}

.status-pill.locked {
    color:#79869f;
    background:#141924;
}

.trophy-status time {
    font-size:10px;
    color:#7a879f;
}

.icon-button {
    display:inline-grid;
    place-items:center;
    border:1px solid var(--line);
    background:transparent;
    color:#a4afc4;
    border-radius:7px;
    width:33px;
    height:33px;
    flex-shrink:0;
    transition:background .15s,color .15s;
}

.icon-button>.icon {
    width:15px;
    height:15px;
}

.icon-button:hover {
    color:var(--accent);
    background:#27273e;
    border-color:#5e527f;
}

.icon-button.danger:hover {
    color:var(--danger);
    background:#3b2632;
    border-color:#84505e;
}

.icon-button.disabled {
    opacity:.3;
}

.catalog-summary {
    display:flex;
    align-items:center;
    gap:22px;
    font-size:11px;
    padding:18px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-bottom:25px;
    flex-wrap:wrap;
}

.catalog-summary>span {
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.catalog-summary strong {
    font-size:16px;
}

.catalog-summary>.mint>.icon {
    width:14px;
    height:14px;
}

.catalog-summary>form {
    margin-left:auto;
}

.table-wrap {
    border:1px solid var(--line);
    border-radius:12px;
    overflow:auto;
    background:var(--surface);
}

.catalog-table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:11px;
}

.catalog-table thead {
    background:#1b202b;
}

.catalog-table th {
    font-size:9px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.7px;
    color:#7f8ba3;
    padding:14px 17px;
    white-space:nowrap;
}

.catalog-table td {
    padding:18px 17px;
    border-top:1px solid var(--line);
    color:#b9c2d5;
    max-width:300px;
    overflow-wrap:anywhere;
}

.catalog-table tr:hover td {
    background:#191e29;
}

.table-game {
    font-weight:600;
    font-size:12px;
    color:#e4e9f4;
}

.table-game:hover {
    color:var(--accent);
}

.cell-sub {
    font-size:9px;
    display:block;
    color:#6d7a91;
    margin-top:4px;
}

.copy-value {
    border:0;
    background:transparent;
    padding:0;
    font-size:10px;
    white-space:nowrap;
    color:#9eadd1;
    font-family:Consolas,monospace;
}

.copy-value:hover {
    color:var(--accent);
}

.code-chip {
    font-size:10px;
    color:#93a1b8;
}

.row-actions {
    display:flex;
    justify-content:flex-end;
    gap:7px;
}

.api-strip {
    display:flex;
    align-items:center;
    gap:14px;
    padding:19px 21px;
    border:1px solid var(--line);
    border-radius:12px;
    margin-top:27px;
    background:#12161e;
}

.api-strip>.icon {
    color:var(--accent);
    width:24px;
    height:24px;
}

.api-strip>div {
    flex:1;
}

.api-strip strong {
    display:block;
    font-size:11px;
}

.api-strip span {
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:3px;
}

.panel {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
}

.form-layout {
    display:grid;
    grid-template-columns:minmax(0,740px) minmax(190px,260px);
    gap:28px;
    align-items:start;
}

.game-form {
    padding:27px 29px;
}

.form-section+.form-section {
    border-top:1px solid var(--line);
    margin-top:27px;
    padding-top:25px;
}

.form-section-heading {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.form-section-heading h2 {
    font-size:14px;
    letter-spacing:0;
}

.step-number {
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:6px;
    background:#29243d;
    color:var(--accent);
    font-size:10px;
}

.field {
    margin-bottom:18px;
}

.field>label {
    display:block;
    font-size:11px;
    font-weight:500;
    color:#c1cadd;
    margin-bottom:8px;
}

.field>input,.field>select,.input-action>input {
    width:100%;
    padding:11px 13px;
    border:1px solid #30384b;
    background:#10151e;
    border-radius:7px;
    font-size:12px;
    min-height:43px;
}

.field>input:focus,.field>select:focus,.input-action>input:focus {
    border-color:var(--accent);
    outline:1px solid #b6a5ff33;
}

.field-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.field-help {
    font-size:10px;
    line-height:1.9;
    margin-top:9px;
}

.field-help>code {
    color:#b7aacd;
}

.checkbox-field {
    display:flex;
    gap:10px;
    align-items:center;
    font-size:11px;
    color:var(--muted);
}

input[type=checkbox] {
    accent-color:var(--accent);
    width:15px;
    height:15px;
    margin:0;
}

.form-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:25px;
    padding-top:23px;
    border-top:1px solid var(--line);
}

.form-aside {
    padding:12px 5px;
}

.form-aside>.icon {
    width:31px;
    height:31px;
    color:var(--accent);
    margin-bottom:18px;
}

.form-aside h3 {
    font-size:20px;
    font-weight:500;
    letter-spacing:-.5px;
    margin-bottom:13px;
}

.form-aside p {
    font-size:12px;
    line-height:1.8;
    margin-bottom:18px;
}

.form-aside hr {
    border:0;
    border-top:1px solid var(--line);
    margin:27px 0;
}

.form-aside strong {
    display:block;
    font-size:12px;
    margin-bottom:10px;
}

.text-link {
    color:var(--accent);
    font-size:11px;
    display:inline-flex;
    gap:7px;
    align-items:center;
}

.text-link>.icon {
    width:14px;
    height:14px;
}

.confirmation-panel {
    max-width:670px;
    margin:30px auto 0;
    padding:35px;
}

.confirmation-icon {
    width:45px;
    height:45px;
    border-radius:10px;
    background:#392730;
    color:var(--danger);
    display:grid;
    place-items:center;
    margin-bottom:22px;
}

.confirmation-icon.neutral {
    background:#28243a;
    color:var(--accent);
}

.confirmation-panel h1 {
    font-size:29px;
    letter-spacing:-.8px;
    margin-bottom:21px;
}

.confirmation-panel p {
    font-size:13px;
    line-height:1.8;
    margin-top:16px;
}

.confirmation-panel p strong {
    color:var(--text);
}

.import-form {
    padding:25px 27px;
    margin-bottom:30px;
}

.import-form>.field {
    margin-bottom:0;
}

.input-action {
    display:flex;
    gap:12px;
}

.input-action>input {
    max-width:530px;
}

.import-intro {
    max-width:510px;
    margin:65px auto;
    text-align:center;
}

.import-intro>.icon {
    width:48px;
    height:48px;
    color:#504a6e;
    margin-bottom:22px;
}

.import-intro h2 {
    font-size:23px;
    letter-spacing:-.6px;
    margin-bottom:15px;
}

.import-intro p {
    font-size:12px;
    line-height:1.9;
}

.import-list {
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}

.import-row {
    display:flex;
    align-items:center;
    gap:18px;
    padding:17px 20px;
    background:var(--surface);
    border-bottom:1px solid var(--line);
}

.import-row:last-child {
    border-bottom:0;
}

.import-row>div:nth-child(2) {
    flex:1;
    min-width:0;
}

.import-row h3 {
    font-size:13px;
    margin-bottom:5px;
}

.import-row p {
    font-size:10px;
}

.import-row p>span {
    padding:0 6px;
    color:#5e6d82;
}

.import-art {
    width:55px;
    height:55px;
    border-radius:9px;
    background:var(--surface-2);
    position:relative;
    overflow:hidden;
    display:grid;
    place-items:center;
    flex-shrink:0;
    color:#5a6381;
}

.import-art>img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.toast {
    position:fixed;
    bottom:25px;
    left:calc(50% + var(--sidebar)/2);
    transform:translateX(-50%);
    max-width:calc(100vw - 40px);
    background:#252438;
    border:1px solid #635582;
    color:#ded4ff;
    box-shadow:0 10px 40px #0008;
    border-radius:9px;
    padding:13px 20px;
    font-size:12px;
    z-index:40;
}

.is-busy .icon {
    animation:busy-pulse .8s infinite alternate;
}

@keyframes busy-pulse {
    to {
        opacity:.35;
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        transition:none!important;
        animation:none!important;
        scroll-behavior:auto!important;
    }
}

@media(min-width:1750px) {
    .game-cover {
        height:171px;
    }
    .game-grid {
        grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    }
}

@media(max-width:1220px) {
    :root {
        --sidebar:205px;
    }
    main {
        padding:30px 27px 40px;
    }
    .topbar {
        padding:0 27px;
    }
    .footer {
        margin:0 27px;
    }
    .page-heading {
        align-items:flex-start;
    }
    .page-heading h1 {
        font-size:29px;
    }
    .page-heading>form,.page-heading>.button {
        margin-top:25px;
    }
    .stat {
        padding:17px 15px;
    }
    .stat-label {
        font-size:10px;
    }
    .stat>span {
        font-size:9px;
    }
    .game-heading {
        flex-wrap:wrap;
    }
    .game-heading>.button {
        margin-left:130px;
    }
    .game-heading-copy h1 {
        font-size:26px;
    }
    .section-heading>.small {
        display:none;
    }
    .catalog-summary {
        gap:15px;
    }
    .catalog-summary>form {
        margin-left:0;
    }
    .catalog-table td {
        padding:16px 12px;
    }
    .catalog-table th {
        padding:13px 12px;
    }
    .form-layout {
        grid-template-columns:minmax(0,1fr) 210px;
    }
}

@media(max-width:900px) {
    :root {
        --sidebar:178px;
    }
    .sidebar {
        padding:27px 10px 18px;
    }
    .brand {
        gap:10px;
        padding:0 7px;
    }
    .brand>span:last-child {
        font-size:18px;
        letter-spacing:-0.4px;
    }
    .brand small {
        font-size:8px;
    }
    .brand-mark {
        font-size:28px;
    }
    .navigation>a {
        font-size:11px;
        padding:11px 10px;
        gap:8px;
    }
    .nav-caption {
        font-size:8px;
        margin-left:10px;
        letter-spacing:1.2px;
    }
    .sidebar-note {
        margin-left:10px;
    }
    .sidebar-note p {
        font-size:14px;
    }
    .sidebar-note>span {
        font-size:9px;
    }
    .stat-grid {
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }
    .stat>strong {
        font-size:34px;
    }
    .stat>span {
        font-size:10px;
    }
    .page-heading {
        flex-direction:column;
        gap:17px;
    }
    .page-heading>form,.page-heading>.button {
        margin-top:0;
    }
    .toolbar {
        flex-wrap:wrap;
    }
    .search-field {
        flex-basis:100%;
    }
    .select-field {
        flex:1;
    }
    .select-field select {
        width:100%;
        min-width:0;
    }
    .game-grid {
        grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
        gap:15px;
    }
    .game-cover {
        height:140px;
    }
    .workspace-label {
        display:none;
    }
    .trophy-row {
        gap:13px;
        padding:17px 16px;
        flex-wrap:wrap;
    }
    .trophy-art {
        width:52px;
        height:52px;
    }
    .trophy-description {
        flex-basis:calc(100% - 75px);
    }
    .trophy-status {
        min-width:0;
        flex:1;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        margin-left:65px;
        gap:12px;
    }
    .trophy-row>.icon-button {
        margin-left:auto;
    }
    .api-strip {
        flex-wrap:wrap;
    }
    .api-strip>div {
        flex-basis:calc(100% - 55px);
    }
    .form-layout {
        grid-template-columns:1fr;
    }
    .form-aside {
        padding:10px 5px;
        max-width:600px;
    }
    .form-aside hr {
        margin:20px 0;
    }
    .import-row {
        gap:13px;
    }
    .import-row>.status-pill,.import-row>.button {
        font-size:9px;
    }
    .input-action {
        flex-wrap:wrap;
    }
    .input-action>.button {
        width:100%;
    }
    .input-action>input {
        max-width:none;
    }
}

@media(max-width:620px) {
    :root {
        --sidebar:0px;
    }
    .sidebar {
        position:relative;
        width:100%;
        padding:19px 18px 0;
        border-right:0;
        border-bottom:1px solid var(--line);
        background:#11151d;
        display:block;
    }
    .brand {
        padding:0;
        gap:12px;
    }
    .brand-mark {
        font-size:29px;
    }
    .brand>span:last-child {
        font-size:21px;
        letter-spacing:-0.4px;
    }
    .brand small {
        font-size:8px;
    }
    .nav-caption,.sidebar-note,.account {
        display:none;
    }
    .navigation {
        flex-direction:row;
        gap:5px;
        margin-top:20px;
        overflow:auto;
        padding-bottom:12px;
    }
    .navigation>a {
        font-size:10px;
        padding:10px 9px;
        white-space:nowrap;
        gap:6px;
    }
    .navigation>a>.icon {
        width:15px;
        height:15px;
    }
    .nav-arrow {
        display:none;
    }
    .workspace {
        margin-left:0;
    }
    .topbar {
        height:46px;
        padding:0 20px;
        font-size:10px;
    }
    .breadcrumb {
        gap:10px;
    }
    main {
        padding:25px 20px 36px;
    }
    .page-heading h1 {
        font-size:28px;
    }
    .page-heading p {
        font-size:12px;
    }
    .page-heading .button {
        white-space:normal;
        text-align:left;
        font-size:11px;
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:1.6px;
        margin-bottom:10px;
    }
    .stat-grid {
        gap:10px;
        margin-bottom:27px;
    }
    .stat {
        padding:15px 14px;
    }
    .stat-label {
        font-size:10px;
    }
    .stat-label>.icon {
        width:15px;
        height:15px;
    }
    .stat>strong {
        font-size:33px;
    }
    .stat>span {
        font-size:9px;
    }
    .section-heading h2 {
        font-size:17px;
    }
    .game-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
    .game-cover {
        height:110px;
    }
    .platform-chip {
        font-size:7px;
        top:8px;
        left:8px;
        padding:2px 5px;
    }
    .platinum-chip {
        width:23px;
        height:23px;
        top:8px;
        right:8px;
    }
    .game-info {
        padding:12px 11px;
    }
    .game-info h3 {
        font-size:11px;
        min-height:34px;
        margin-bottom:9px;
    }
    .game-meta {
        font-size:9px;
        flex-wrap:wrap;
        gap:4px;
    }
    .game-meta strong {
        font-size:9px;
    }
    .trophy-counts {
        gap:4px;
        margin-top:11px;
        padding-top:9px;
    }
    .trophy-counter {
        font-size:9px;
        gap:3px;
    }
    .trophy-counter .icon {
        width:10px;
        height:10px;
    }
    .game-cover>.cover-open {
        right:9px;
        bottom:8px;
    }
    .game-cover>.cover-open>.icon {
        width:14px;
        height:14px;
    }
    .select-field select {
        font-size:10px;
        padding:0 20px 0 9px;
    }
    .toolbar {
        gap:8px;
        margin-bottom:18px;
    }
    .game-heading {
        gap:17px;
        margin-bottom:25px;
    }
    .game-heading-cover {
        width:73px;
        height:73px;
        border-radius:11px;
    }
    .game-heading-copy h1 {
        font-size:22px;
        letter-spacing:-.6px;
    }
    .game-heading-copy .eyebrow {
        font-size:8px;
        letter-spacing:1px;
    }
    .game-heading-copy p {
        font-size:10px;
        margin-top:9px;
    }
    .game-heading>.button {
        margin-left:0;
        flex:1;
    }
    .dot-separator {
        padding:0 4px;
    }
    .trophy-row {
        padding:15px 13px;
        gap:12px;
    }
    .trophy-art {
        width:48px;
        height:48px;
    }
    .trophy-title {
        gap:7px;
    }
    .trophy-title h3 {
        font-size:12px;
    }
    .trophy-description p {
        font-size:10px;
    }
    .trophy-status {
        margin-left:60px;
        gap:9px;
        flex-wrap:wrap;
    }
    .trophy-status time {
        font-size:9px;
    }
    .footer {
        margin:0 20px;
        font-size:9px;
    }
    .footer>span:last-child {
        display:none;
    }
    .catalog-summary {
        font-size:10px;
        gap:13px;
    }
    .catalog-summary>form {
        width:100%;
    }
    .catalog-summary>form>button {
        width:100%;
    }
    .catalog-table {
        min-width:810px;
    }
    .api-strip {
        padding:17px;
    }
    .api-strip .button {
        flex:1;
    }
    .game-form {
        padding:22px 20px;
    }
    .field-grid {
        grid-template-columns:1fr;
        gap:0;
    }
    .form-actions {
        flex-wrap:wrap;
    }
    .form-actions>.button {
        flex:1;
        white-space:normal;
    }
    .form-aside {
        padding:4px;
    }
    .import-form {
        padding:21px 18px;
    }
    .import-row {
        flex-wrap:wrap;
        padding:15px;
    }
    .import-row>div:nth-child(2) {
        flex-basis:calc(100% - 75px);
    }
    .import-row>.status-pill,.import-row>.button {
        margin-left:68px;
    }
    .confirmation-panel {
        padding:27px 23px;
        margin-top:15px;
    }
    .confirmation-panel h1 {
        font-size:25px;
    }
    .confirmation-panel p {
        font-size:12px;
    }
    .back-link {
        margin-bottom:20px;
    }
    .toast {
        width:max-content;
        max-width:calc(100vw - 30px);
        bottom:18px;
        font-size:11px;
    }
    .import-intro {
        margin:45px auto;
    }
    .import-intro h2 {
        font-size:22px;
    }
}

@media(max-width:365px) {
    main {
        padding-left:15px;
        padding-right:15px;
    }
    .sidebar {
        padding-left:15px;
        padding-right:15px;
    }
    .navigation>a {
        font-size:9px;
        padding:9px 7px;
    }
    .game-grid {
        gap:9px;
    }
    .game-info {
        padding:10px 9px;
    }
    .trophy-counter {
        font-size:8px;
    }
    .stat>span {
        font-size:8px;
    }
}