/* Shared interface tokens. Emulator canvases keep their native styles. */
:root, [data-bs-theme="dark"] {
  color-scheme: dark;
  --ui-bg:#101315; --ui-surface:#181c1f; --ui-raised:#202629; --ui-border:#2b3336;
  --ui-text:#edf2f1; --ui-muted:#a0aeae; --ui-accent:#67deca; --ui-accent-ink:#102923;
  --ui-hover:#242d30; --ui-shadow:0 18px 60px #0004;
  --bs-body-bg:var(--ui-bg); --bs-body-color:var(--ui-text); --bs-secondary-color:var(--ui-muted);
  --bs-tertiary-bg:var(--ui-surface); --bs-secondary-bg:var(--ui-raised); --bs-border-color:var(--ui-border);
  --bs-emphasis-color:var(--ui-text); --bs-heading-color:var(--ui-text);
  --bs-link-color:var(--ui-accent); --bs-link-hover-color:#a4f1e3;
  --bs-primary-rgb:103,222,202; --bs-border-radius:.65rem; --bs-border-radius-lg:1rem;
  --bs-body-font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
[data-bs-theme="light"] {
  color-scheme:light; --ui-bg:#f6f8f7; --ui-surface:#fff; --ui-raised:#edf2f0; --ui-border:#d9e1dd;
  --ui-text:#192724; --ui-muted:#576b64; --ui-accent:#087d69; --ui-accent-ink:#fff;
  --ui-hover:#e8f0ed; --ui-shadow:0 18px 60px #18382d12; --bs-link-hover-color:#075e50;
}
* { box-sizing:border-box; }
body.interface-page { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--ui-bg); color:var(--ui-text); font-size:.925rem; line-height:1.6; -webkit-font-smoothing:antialiased; caret-color:auto; }
a { text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--ui-accent)!important; outline-offset:4px; box-shadow:none!important; }
.container { width:100%; max-width:1440px; padding-left:40px; padding-right:40px; }
.app-main { flex:1; padding-top:42px; padding-bottom:64px; min-width:0; }
h1,h2,h3,h4,h5 { letter-spacing:-.035em; font-weight:600; }
h1 { font-size:2.2rem; line-height:1.2; margin:0 0 10px; }
h2 { font-size:1.3rem; line-height:1.35; }
.eyebrow,.nav-section-label { color:var(--ui-muted); font-size:.65rem; font-weight:600; letter-spacing:.16em; margin:0 0 12px; }
.page-description { color:var(--ui-muted); margin:0; font-size:.9rem; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; }
.count-pill { display:inline-flex; min-width:30px; height:27px; align-items:center; justify-content:center; padding:0 9px; background:var(--ui-raised); border:1px solid var(--ui-border); border-radius:7px; color:var(--ui-muted); font-size:.75rem; font-weight:500; vertical-align:middle; letter-spacing:0; margin-left:8px; }
.accent-dot { color:var(--ui-accent); }
.app-header { background:var(--ui-bg); border-bottom:1px solid var(--ui-border); }
.app-header .navbar { padding:0; background:none!important; box-shadow:none!important; }
.app-header-inner { min-height:80px; display:flex; align-items:center; gap:40px; flex-wrap:nowrap!important; }
.app-brand { display:flex; align-items:center; gap:12px; margin:0; color:var(--ui-text); text-decoration:none; font-size:1.3rem; font-weight:650; letter-spacing:-.045em; white-space:nowrap; }
.app-brand:hover { color:var(--ui-text); }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; border:1px solid var(--ui-border); border-radius:9px; color:var(--ui-accent); font:600 17px ui-monospace,monospace; letter-spacing:-2px; }
.brand-caption { display:block; color:var(--ui-muted); font-size:.61rem; letter-spacing:0; font-weight:400; line-height:1.4; }
.app-nav { display:flex; gap:7px; align-self:stretch; align-items:center; margin-right:auto; }
.app-nav-link { display:block; color:var(--ui-muted); padding:8px 14px; border-radius:7px; font-size:.82rem; text-decoration:none; font-weight:500; }
.app-nav-link:hover,.app-nav-link[aria-current="page"] { color:var(--ui-text); background:var(--ui-raised); }
.app-tools { display:flex; align-items:center; gap:8px; }
.btn { border-radius:7px; font-size:.82rem; font-weight:550; padding:10px 16px; line-height:1.4; transition:background-color .15s,color .15s,border-color .15s; }
.btn-primary,.btn-bd-primary { --bs-btn-bg:var(--ui-accent); --bs-btn-border-color:var(--ui-accent); --bs-btn-color:var(--ui-accent-ink); --bs-btn-hover-bg:#92eadb; --bs-btn-hover-border-color:#92eadb; --bs-btn-hover-color:#102923; --bs-btn-active-bg:#67cdbb; --bs-btn-active-color:#102923; --bs-btn-active-border-color:#67cdbb; --bs-btn-disabled-bg:var(--ui-raised); --bs-btn-disabled-border-color:var(--ui-border); --bs-btn-disabled-color:var(--ui-muted); }
.btn-outline-secondary,.btn-secondary,.tool-button { --bs-btn-color:var(--ui-muted); --bs-btn-bg:transparent; --bs-btn-border-color:var(--ui-border); --bs-btn-hover-color:var(--ui-text); --bs-btn-hover-bg:var(--ui-hover); --bs-btn-hover-border-color:var(--ui-border); --bs-btn-active-bg:var(--ui-raised); --bs-btn-active-color:var(--ui-text); --bs-btn-active-border-color:var(--ui-border); --bs-btn-disabled-border-color:var(--ui-border); }
.tool-button { display:flex; align-items:center; justify-content:center; gap:8px; min-width:36px; min-height:36px; padding:8px 9px; font-weight:500; }
.tool-label { font-size:.7rem; color:var(--ui-muted); }
.account-button { border-radius:50%; width:36px; }
.bd-mode-toggle { z-index:auto; }
.dropdown-menu { --bs-dropdown-bg:var(--ui-surface); --bs-dropdown-border-color:var(--ui-border); --bs-dropdown-link-color:var(--ui-text); --bs-dropdown-link-hover-bg:var(--ui-hover); --bs-dropdown-link-hover-color:var(--ui-text); --bs-dropdown-link-active-bg:var(--ui-hover); --bs-dropdown-link-active-color:var(--ui-accent); padding:7px; min-width:180px; box-shadow:var(--ui-shadow); font-size:.83rem; border-radius:10px; }
.dropdown-item { padding:9px 10px; border-radius:5px; gap:5px; }
.dropdown-header { color:var(--ui-muted); overflow-wrap:anywhere; max-width:260px; }
.form-control,.form-select { background-color:var(--ui-surface); border-color:var(--ui-border); border-radius:7px; min-height:42px; font-size:.84rem; color:var(--ui-text); caret-color:auto!important; }
.form-control::placeholder { color:var(--ui-muted); opacity:.8; }
.form-control:focus,.form-select:focus { background-color:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-accent); box-shadow:0 0 0 3px #67deca15; }
.form-label { font-size:.8rem; color:var(--ui-muted); font-weight:500; margin-bottom:8px; }
.library-toolbar { display:grid; grid-template-columns:minmax(180px,1fr) 200px 95px auto; gap:12px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--ui-border); }
.search-field { position:relative; min-width:0; }
.search-field>svg { position:absolute; left:14px; top:12px; color:var(--ui-muted); pointer-events:none; }
.search-field .form-control { padding-left:43px; }
.view-switch { display:flex; gap:3px; padding:3px; border:1px solid var(--ui-border); border-radius:8px; height:42px; }
.view-switch .btn { padding:6px 9px; border:0; background:transparent; color:var(--ui-muted); border-radius:5px; }
.view-switch .btn[aria-pressed="true"] { background:var(--ui-raised); color:var(--ui-accent); }
.results-caption { color:var(--ui-muted); font-size:.75rem; margin:18px 0 22px; min-height:18px; }
.library-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px 22px; }
.library-grid>.col { width:auto; min-width:0; padding:0; }
#games_grid .game-card { height:100%; overflow:hidden; background:none; border:0; border-radius:0; box-shadow:none!important; }
.game-card-media { display:block; margin:0; width:100%; aspect-ratio:4/3; border-radius:10px; background:var(--ui-surface); border:1px solid var(--ui-border); overflow:hidden; transition:border-color .18s; }
.game-card-media:hover { border-color:var(--ui-accent); }
.game-card-media img { display:block; height:100%; width:100%; object-fit:contain; }
.game-card .card-body { display:flex; padding:14px 0 0!important; min-height:70px; align-items:center; }
.game-card-title { flex:1; min-width:0; }
.game-card-title a { display:block; min-width:0; color:var(--ui-text); text-decoration:none; }
.game-card-title strong { font-size:.87rem; font-weight:550; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-card-title .game-year { display:block; color:var(--ui-muted); font-size:.73rem; margin-top:3px; }
.game-card .play-link { flex-shrink:0; font-size:.7rem; padding:7px 9px; color:var(--ui-muted); border-color:var(--ui-border); }
.game-card:hover .play-link { color:var(--ui-accent); border-color:var(--ui-accent); }
.empty-state { text-align:center; padding:70px 20px; border:1px dashed var(--ui-border); border-radius:12px; color:var(--ui-muted); }
.empty-state h2 { margin-top:18px; color:var(--ui-text); }
.empty-state-mark { font:500 30px ui-monospace,monospace; color:var(--ui-accent); }
.library-table-wrap { width:100%; overflow-x:auto; }
.table { --bs-table-bg:transparent; --bs-table-color:var(--ui-text); --bs-table-hover-bg:var(--ui-surface); --bs-table-hover-color:var(--ui-text); --bs-table-border-color:var(--ui-border); font-size:.83rem; }
.table>:not(caption)>*>* { padding:16px 12px; }
.table thead th { color:var(--ui-muted); font-size:.67rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.table .btn { padding:7px 10px; }
.table img { object-fit:contain; max-height:66px; max-width:100px; }
.badge { font-size:.65rem; font-weight:450; padding:5px 7px; border-radius:5px; }
.text-bg-secondary { background:var(--ui-raised)!important; color:var(--ui-muted)!important; }
.app-footer { display:flex; justify-content:space-between; gap:12px; color:var(--ui-muted); font-size:.68rem; padding-top:20px; padding-bottom:24px; border-top:1px solid var(--ui-border); }
.app-footer>span:first-child { font-weight:600; color:var(--ui-text); }
.footer-slot { margin-top:auto; position:static!important; }
.back-link { display:inline-block; color:var(--ui-muted); text-decoration:none; font-size:.8rem; margin-bottom:30px; }
.back-link:hover { color:var(--ui-accent); }
.detail-heading { align-items:flex-end; padding-bottom:28px; border-bottom:1px solid var(--ui-border); }
.detail-heading h1 { overflow-wrap:anywhere; max-width:850px; }
.detail-heading .btn { white-space:nowrap; }
.detail-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:64px; }
.detail-art { border:1px solid var(--ui-border); border-radius:12px; overflow:hidden; background:var(--ui-surface); }
.detail-art img { display:block; width:100%; max-height:400px; aspect-ratio:4/3; object-fit:contain; }
.game-facts { margin:22px 0 0; }
.game-facts>div { display:grid; grid-template-columns:85px minmax(0,1fr); gap:14px; border-bottom:1px solid var(--ui-border); padding:12px 0; }
.game-facts dt { color:var(--ui-muted); font-size:.76rem; font-weight:400; }
.game-facts dd { margin:0; font-size:.78rem; overflow-wrap:anywhere; }
.game-facts code { font:inherit; color:var(--ui-text); }
.detail-content { min-width:0; padding-top:5px; }
.detail-content h2 { font-size:1.15rem; margin-bottom:18px; }
#description { font:inherit; color:var(--ui-muted); white-space:pre-line; line-height:1.9; max-width:800px; overflow-wrap:anywhere; }
.detail-video,.detail-screenshot { width:100%; max-width:800px; aspect-ratio:16/9; border:0; border-radius:10px; margin:22px 0; object-fit:contain; background:var(--ui-surface); }
.detail-attachments { margin-top:32px; }
.settings-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:38px; align-items:start; }
.settings-sidebar { position:sticky; top:108px; }
.settings-nav-item { display:flex; gap:10px; align-items:center; width:100%; border:0; border-radius:7px; background:transparent; color:var(--ui-muted); padding:11px 12px; margin-bottom:3px; font-size:.8rem; text-align:left; text-decoration:none; }
.settings-nav-item:hover { background:var(--ui-surface); color:var(--ui-text); }
.settings-nav-item[aria-current="page"] { background:var(--ui-raised); color:var(--ui-accent); }
.nav-section-label { margin:25px 12px 10px; font-size:.59rem; }
.settings-sidebar .nav-section-label:first-child { margin-top:5px; }
.sidebar-back { display:block; color:var(--ui-muted); font-size:.73rem; text-decoration:none; padding:24px 12px; margin-top:20px; border-top:1px solid var(--ui-border); }
.settings-content { min-width:0; overflow-x:auto; }
.settings-content>.container,#gamesListPanel>.container,#usersAdminPanel>.container { padding:0; }
.settings-content h4 { font-size:1.3rem; padding-bottom:18px!important; }
.settings-content .table td { overflow-wrap:anywhere; }
.settings-content .card { background:var(--ui-surface); border-color:var(--ui-border); box-shadow:none; }
#dosZonePanel>section { padding:24px!important; margin-bottom:24px!important; border-radius:10px; }
#dosZonePanel>section small { font-size:.7rem; line-height:1.7; }
#dosZoneSyncCounts,#dosZoneSyncDates,#dosZoneSyncRetry,#dosZoneSyncSchedule,#dosZoneSyncErrors { font-size:.73rem; }
#dosZoneSyncStatus { color:var(--ui-muted); font-size:.8rem; }
#dosZoneSyncProgress { height:5px; accent-color:var(--ui-accent); border:0; border-radius:10px; }
#dosZonePanel>.row { display:grid; grid-template-columns:minmax(140px,1fr) 42px minmax(120px,200px); gap:8px; margin:0; }
#dosZonePanel>.row>div { padding:0; width:auto; min-width:0; }
.pagination { --bs-pagination-color:var(--ui-muted); --bs-pagination-bg:transparent; --bs-pagination-border-color:var(--ui-border); --bs-pagination-hover-bg:var(--ui-surface); --bs-pagination-hover-color:var(--ui-text); --bs-pagination-hover-border-color:var(--ui-border); --bs-pagination-active-bg:var(--ui-raised); --bs-pagination-active-color:var(--ui-accent); --bs-pagination-active-border-color:var(--ui-border); --bs-pagination-disabled-bg:transparent; --bs-pagination-disabled-border-color:var(--ui-border); --bs-pagination-font-size:.75rem; flex-wrap:wrap; }
.card,.modal-content { --bs-card-bg:var(--ui-surface); --bs-card-border-color:var(--ui-border); --bs-modal-bg:var(--ui-surface); --bs-modal-border-color:var(--ui-border); }
.modal-content { border-radius:14px; box-shadow:var(--ui-shadow); }
.modal-header,.modal-footer { border-color:var(--ui-border); padding:20px 24px; }
.modal-title { font-size:1.2rem; }
.modal-body { padding:24px; }
.modal-footer { gap:7px; }
.modal-backdrop { --bs-backdrop-opacity:.7; }
.modal .form-control,.modal .form-select { min-height:40px; }
.alert { border-radius:9px; font-size:.82rem; }
.alert svg { width:18px; height:18px; }
.selectize-input { border-radius:7px; padding:10px 12px; box-shadow:none; }
.list-group { --bs-list-group-bg:transparent; --bs-list-group-border-color:var(--ui-border); --bs-list-group-color:var(--ui-text); }
.auth-layout { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.auth-intro { display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; padding:52px 9vw 38px; background:var(--ui-surface); border-right:1px solid var(--ui-border); }
.auth-intro h1 { font-size:clamp(2.5rem,4.1vw,4.3rem); line-height:1.12; font-weight:500; letter-spacing:-.06em; margin:20px 0 28px; }
.auth-intro>div>p:last-child { color:var(--ui-muted); line-height:1.9; font-size:.9rem; }
.auth-footnote { color:var(--ui-muted); font-size:.68rem; }
.auth-form-side { display:flex; align-items:center; justify-content:center; flex-direction:column; padding:48px; }
.auth-form-card { width:100%; max-width:350px; }
.auth-form-card h2 { font-size:2rem; margin-bottom:12px; }
.auth-form-card .page-description { margin-bottom:35px; font-size:.82rem; }
.auth-form-card .form-control { min-height:47px; }
.auth-form-card .btn-primary { min-height:46px; }
.auth-forgot { text-align:right; font-size:.76rem; margin-bottom:26px; }
.auth-forgot a { text-decoration:none; color:var(--ui-muted); }
.auth-mobile-brand { display:none; }
.interface-page>.gradient-custom { background:var(--ui-bg); min-height:100vh; height:auto!important; }
.interface-page>.gradient-custom>.container { padding-top:60px!important; padding-bottom:60px!important; }
.interface-page>.gradient-custom .card { background:var(--ui-surface)!important; color:var(--ui-text)!important; border:1px solid var(--ui-border); box-shadow:none; }
.interface-page>.gradient-custom .card-body { padding:32px!important; text-align:left!important; }
.interface-page>.gradient-custom .text-white-50 { color:var(--ui-muted)!important; }
.interface-page>.gradient-custom .form-outline.row { display:block; }
.interface-page>.gradient-custom .form-outline.row>.col-3 { width:100%; }
.interface-page>.gradient-custom .form-outline.row>.col { padding:0 12px; }
.skip-link { position:fixed; top:-80px; left:20px; padding:12px; background:var(--ui-accent); color:var(--ui-accent-ink); z-index:2000; border-radius:6px; }
.skip-link:focus { top:12px; }
@media(min-width:1600px) { .library-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:1199px) { .library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .detail-layout { gap:40px; grid-template-columns:260px minmax(0,1fr); } }
@media(max-width:991px) { .container { padding-left:24px; padding-right:24px; } .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .settings-layout { grid-template-columns:175px minmax(0,1fr); gap:22px; } .app-header-inner { gap:24px; } .auth-intro { padding:40px 6vw; } .auth-form-side { padding:36px; } }
@media(max-width:767px) {
  .app-header-inner { min-height:70px; gap:12px; flex-wrap:wrap!important; padding-top:12px; padding-bottom:10px; }
  .brand-caption { display:none; } .app-brand { font-size:1.1rem; gap:8px; } .brand-mark { width:29px; height:29px; font-size:15px; }
  .app-tools { margin-left:auto; gap:5px; } .tool-button { min-width:32px; min-height:32px; padding:6px; } .tool-label { display:none; }
  .app-nav { order:3; width:100%; margin:0; gap:5px; } .app-nav-link { padding:5px 10px; font-size:.76rem; }
  .container { padding-left:20px; padding-right:20px; } .app-main { padding-top:28px; padding-bottom:42px; }
  .page-heading { margin-bottom:25px; gap:12px; } h1 { font-size:1.8rem; } .page-description { font-size:.8rem; }
  .page-heading>.btn { padding:9px 12px; font-size:.73rem; } .eyebrow { font-size:.57rem; }
  .library-toolbar { grid-template-columns:minmax(0,1fr) 84px auto; gap:8px; } .search-field { grid-column:1/-1; } .library-toolbar .form-select { min-width:0; }
  .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 14px; } .game-card .card-body { min-height:72px; }
  .game-card-title strong { font-size:.8rem; } .game-card-title .game-year { font-size:.67rem; } .game-card .play-link { padding:6px; font-size:.65rem; }
  .game-card .card-body>.d-flex { gap:6px!important; } .results-caption { font-size:.7rem; }
  .detail-layout { grid-template-columns:1fr; gap:30px; } .detail-sidebar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; } .game-facts { margin:0; } .game-facts>div { grid-template-columns:1fr; gap:3px; padding:7px 0; } .detail-heading { align-items:center; }
  .settings-layout { display:block; } .settings-sidebar { position:static; margin-bottom:26px; border-bottom:1px solid var(--ui-border); padding-bottom:15px; }
  .settings-sidebar nav { display:flex; flex-wrap:wrap; gap:5px; } .settings-nav-item { width:auto; padding:8px 10px; font-size:.75rem; margin:0; border:1px solid var(--ui-border); } .settings-nav-item i { display:none; } .settings-sidebar .nav-section-label,.sidebar-back { display:none; }
  .settings-content .table { min-width:430px; } #dosZonePanel>section { padding:18px!important; } #dosZonePanel>.row { grid-template-columns:minmax(0,1fr) 40px; } #dosZonePanel>.row>div:last-child { grid-column:1/-1; }
  .app-footer { font-size:.6rem; padding-top:18px; padding-bottom:18px; } .modal-body { padding:18px; } .modal-header,.modal-footer { padding:17px 18px; }
  .auth-layout { grid-template-columns:1fr; } .auth-intro { display:none; } .auth-form-side { min-height:100vh; padding:40px 24px; } .auth-mobile-brand { display:block; color:var(--ui-muted); font-size:.7rem; margin-top:48px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

.section-heading { margin-bottom:24px; }
.section-heading h2 { margin-bottom:8px; }
.sync-details { margin:12px 0; }
.sync-details summary { color:var(--ui-muted); font-size:.75rem; cursor:pointer; margin-bottom:10px; }

@media(max-width:767px) {
  .app-tools .tool-button { min-width:40px; min-height:40px; }
  .app-nav-link { padding:9px 12px; }
  .game-card .play-link,.settings-nav-item { min-height:40px; }
  .game-card .play-link { display:flex; align-items:center; }
  .settings-content #gamesListPanel .table { min-width:0; table-layout:fixed; }
  #gamesListPanel .table th:first-child { width:40px; }
  #gamesListPanel .table th:last-child { width:96px; }
  #gamesListPanel .table td:last-child>.d-flex { flex-wrap:wrap; }
  #gamesListPanel .table td:last-child .btn { width:32px; height:32px; padding:5px; }
}