/* Structured themes. Desktop geometry lives above the shared drawer breakpoint.
   No web fonts: the workspace also works on a server without internet access. */

html[data-theme="orbit"] {
  --ui-bg: #f5f3fb;
  --ui-surface: #ffffff;
  --ui-surface-alt: #f0ecfa;
  --ui-text: #29213c;
  --ui-muted: #6b637b;
  --ui-accent: #6843d7;
  --ui-accent-contrast: #ffffff;
  --ui-border: #e3ddf0;
  --ui-success-bg: #eaf5ef;
  --ui-success: #286447;
  --ui-warning-bg: #fff3da;
  --ui-warning: #805816;
  --ui-danger-bg: #fcebed;
  --ui-danger: #a03046;
  --ui-shadow: 0 6px 24px rgb(59 37 108 / 5%), 0 1px 3px rgb(59 37 108 / 3%);
  --ui-radius: 20px;
  --ui-font: "Inter", "Segoe UI", Arial, sans-serif;
  --ui-heading-font: "Inter", "Segoe UI", Arial, sans-serif;
  --ui-sidebar-width: 248px;
}

html[data-theme="orbit"] body {
  background: radial-gradient(ellipse at 98% 0%, #eae3fc 0, transparent 40%), var(--ui-bg);
}

html[data-theme="orbit"] .sidebar {
  background: linear-gradient(165deg, #ffffff 0%, #fcfaff 100%);
  border: 1px solid #e8e2f4;
  box-shadow: 0 8px 32px rgb(69 43 118 / 6%);
  padding: 28px 18px 22px;
}

html[data-theme="orbit"] .brand { gap: 12px; font-size: 20px; letter-spacing: -.5px; }
html[data-theme="orbit"] .brand small { font-size: 11px; letter-spacing: .1px; }
html[data-theme="orbit"] .brand-icon { background: var(--ui-accent); border-radius: 14px; box-shadow: 0 4px 10px rgb(104 67 215 / 18%); }
html[data-theme="orbit"] aside.sidebar .mode-badge { background: #f0ebfc; border: 1px solid #e3daf9; color: #5a3bae; border-radius: 12px; margin: 28px 0 24px; padding: 10px 12px; }
html[data-theme="orbit"] .sidebar nav { gap: 7px; }
html[data-theme="orbit"] .nav-item { padding: 12px 14px; border-radius: 12px; font-size: 14px; transition: background-color .16s ease, color .16s ease; }
html[data-theme="orbit"] .nav-item:hover { background: #f2eefd; color: #4f369a; }
html[data-theme="orbit"] .sidebar .nav-item.active { background: #eae2ff; color: #5632c1; font-weight: 650; }
html[data-theme="orbit"] .nav-submenu { margin: 0 0 8px 20px; padding-left: 10px; border-color: #d8cbf4; }
html[data-theme="orbit"] .nav-subitem { border-radius: 10px; line-height: 1.45; overflow-wrap: anywhere; }
html[data-theme="orbit"] .sidebar-footer { color: #58447c; padding: 22px 10px 0; line-height: 1.6; }
html[data-theme="orbit"] .sidebar-footer p { color: var(--ui-muted); }
html[data-theme="orbit"] .topbar { min-height: 80px; color: var(--ui-muted); border-color: #e2dcee; }
html[data-theme="orbit"] .intro { padding: 36px 0 28px; }
html[data-theme="orbit"] .intro h1 { font-size: clamp(30px, 2.65vw, 42px); letter-spacing: -1.45px; font-weight: 650; line-height: 1.2; margin: 12px 0 14px; }
html[data-theme="orbit"] .intro p { max-width: 840px; line-height: 1.75; }
html[data-theme="orbit"] .eyebrow { color: #7559b6; font-size: 10px; letter-spacing: 1.9px; }
html[data-theme="orbit"] .stats { gap: 18px; }
html[data-theme="orbit"] .stat { padding: 24px; border-color: #e9e3f4; border-radius: 20px; box-shadow: var(--ui-shadow); }
html[data-theme="orbit"] .stat:first-child { background: #ede7fb; border-color: #e4daf8; }
html[data-theme="orbit"] .stat strong { font-size: 40px; letter-spacing: -1.6px; font-weight: 620; margin: 14px 0 8px; color: var(--ui-text); font-variant-numeric: tabular-nums; }
html[data-theme="orbit"] .stat > span { font-size: 13px; }
html[data-theme="orbit"] .stat small { font-size: 11px; line-height: 1.5; }
html[data-theme="orbit"] .section-heading { margin: 32px 0 20px; gap: 18px; }
html[data-theme="orbit"] h2 { font-size: 21px; letter-spacing: -.45px; font-weight: 650; }
html[data-theme="orbit"] h3 { font-size: 16px; letter-spacing: -.25px; }
html[data-theme="orbit"] .flow { gap: 18px; }
html[data-theme="orbit"] .flow article { background: #efebf7; border: 1px solid #e5dff0; border-radius: 20px; padding: 24px; }
html[data-theme="orbit"] .flow b { width: 30px; height: 30px; border-color: #d3c5f2; background: #f8f5ff; color: var(--ui-accent); font-size: 12px; }
html[data-theme="orbit"] .flow p { font-size: 13px; line-height: 1.75; }
html[data-theme="orbit"] :is(.panel, .connection-card, .table-card, .eneba-stock-card, .key-search-match) { border-color: #e7e1f1; border-radius: 20px; box-shadow: var(--ui-shadow); }
html[data-theme="orbit"] .panel { padding: 28px; }
html[data-theme="orbit"] .table-card { background: var(--ui-surface); }
html[data-theme="orbit"] th { background: #f8f6fc; color: #706584; padding: 16px 20px; font-size: 11px; font-weight: 600; }
html[data-theme="orbit"] td { border-color: #ede8f6; padding: 18px 20px; font-size: 13px; line-height: 1.5; }
html[data-theme="orbit"] tbody tr:hover { background: #faf8fe; }
html[data-theme="orbit"] :is(input, select, textarea) { background: #ffffff; border-color: #dcd3ee; border-radius: 11px; padding: 12px 14px; font-size: 13px; color: var(--ui-text); }
html[data-theme="orbit"] :is(input, select, textarea):focus { border-color: #9272ea; box-shadow: 0 0 0 3px rgb(104 67 215 / 11%); }
html[data-theme="orbit"] label { color: #665c79; gap: 9px; font-size: 12px; }
html[data-theme="orbit"] .button { border-radius: 11px; padding: 11px 17px; font-weight: 620; }
html[data-theme="orbit"] .primary { background: var(--ui-accent); color: var(--ui-accent-contrast); box-shadow: 0 3px 8px rgb(104 67 215 / 12%); }
html[data-theme="orbit"] .primary:hover:not(:disabled) { background: #5733c2; }
html[data-theme="orbit"] .subtle { color: #5f5175; border-color: #ddd4ee; background: #ffffff; }
html[data-theme="orbit"] .subtle:hover:not(:disabled) { background: #f3eefc; border-color: #cabcdf; }
html[data-theme="orbit"] .text-button { color: var(--ui-accent); font-size: 13px; }
html[data-theme="orbit"] .demo-note { padding: 14px 18px; border: 1px solid #e3daf5; border-radius: 13px; background: #f0ebf9; color: #6b5e83; margin: 0 0 24px; align-items: flex-start; }
html[data-theme="orbit"] .demo-note > span { border-color: #b5a4d2; flex: 0 0 16px; height: 16px; margin-top: 2px; }
html[data-theme="orbit"] :is(.warning-note, .detail-issue) { border-radius: 13px; background: var(--ui-warning-bg); color: var(--ui-warning); }
html[data-theme="orbit"] .feedback { border-radius: 13px; background: var(--ui-success-bg); color: var(--ui-success); }
html[data-theme="orbit"] .feedback.error { background: var(--ui-danger-bg); color: var(--ui-danger); }
html[data-theme="orbit"] .badge { border-radius: 7px; padding: 6px 9px; font-size: 11px; background: var(--ui-success-bg); color: var(--ui-success); }
html[data-theme="orbit"] .badge.grey { background: #f0edf5; color: #685e79; }
html[data-theme="orbit"] :is(.badge.warning, .badge.orange) { background: var(--ui-warning-bg); color: var(--ui-warning); }
html[data-theme="orbit"] :is(.raw-status, .order-cell small, .help, .detail-field dt, .pagination, #operator-name) { color: var(--ui-muted); }
html[data-theme="orbit"] :is(.order-issue, .order-cell .order-issue) { color: var(--ui-warning); }
html[data-theme="orbit"] :is(.callback-url code, .detail-reference) { color: #6746a5; }
html[data-theme="orbit"] .inventory-metric { background: #f3effb; border-color: #e5dcf4; border-radius: 14px; padding: 20px; }
html[data-theme="orbit"] .inventory-metric strong { color: #5e3baf; font-size: 28px; font-variant-numeric: tabular-nums; }
html[data-theme="orbit"] .inventory-metric span { color: var(--ui-muted); }
html[data-theme="orbit"] #marketplace-price-form { background: #f4f0fc; border-radius: 14px; padding: 22px; }
html[data-theme="orbit"] .binding-current-card { background: #f3eefa; border-color: #ded1f4; border-radius: 16px; }
html[data-theme="orbit"] .binding-save-bar { border-color: var(--ui-border); }
html[data-theme="orbit"] .binding-inline-error { color: var(--ui-danger); }
html[data-theme="orbit"] .ui-modal { background: rgb(30 19 53 / 43%); backdrop-filter: blur(7px); }
html[data-theme="orbit"] .ui-modal .modal-surface { background: var(--ui-surface); border-color: #e5dcf3; border-radius: 24px; box-shadow: 0 30px 90px rgb(45 25 86 / 21%); }
html[data-theme="orbit"] .ui-modal fieldset { border-color: var(--ui-border); border-radius: 13px; }
html[data-theme="orbit"] .modal-close { color: #776589; border-radius: 10px; }
html[data-theme="orbit"] .modal-close:hover { background: #f0eafb; }
html[data-theme="orbit"] .dialog-tabs { border-color: var(--ui-border); gap: 8px; }
html[data-theme="orbit"] .dialog-tabs button { color: var(--ui-muted); border-radius: 11px; }
html[data-theme="orbit"] .dialog-tabs button.active { background: #ece4fc; color: #5e38ba; }
html[data-theme="orbit"] .eneba-badge { background: #f1ecfc; color: #6a44b2; border-color: #e1d5f5; border-radius: 9px; }
html[data-theme="orbit"] .eneba-stock-card { padding: 22px; }
html[data-theme="orbit"] .eneba-stock-card .eneba-stock-price { color: #553a94; }
html[data-theme="orbit"] .login-screen { background: radial-gradient(ellipse at 8% 14%, #e6dbfb 0, transparent 58%), radial-gradient(ellipse at 96% 90%, #ede7ff 0, transparent 44%), #f5f3fa; }
html[data-theme="orbit"] .login-intro h1 { color: #34224d; font-weight: 580; }
html[data-theme="orbit"] .login-intro p { color: var(--ui-muted); }
html[data-theme="orbit"] .login-platforms { color: #634692; }
html[data-theme="orbit"] .login-platforms span { color: #baabd1; }
html[data-theme="orbit"] .login-card { border-color: #e6def2; border-radius: 28px; padding: 44px; box-shadow: 0 24px 70px rgb(69 42 118 / 9%); }
html[data-theme="orbit"] .login-card .login-feedback { background: var(--ui-danger-bg); color: var(--ui-danger); border-radius: 11px; }

html[data-theme="graphite"] {
  --ui-bg: #f4f4f4;
  --ui-surface: #ffffff;
  --ui-surface-alt: #ededed;
  --ui-text: #202020;
  --ui-muted: #656565;
  --ui-accent: #242424;
  --ui-accent-contrast: #ffffff;
  --ui-border: #d9d9d9;
  --ui-success-bg: #eaf2ed;
  --ui-success: #2c6040;
  --ui-warning-bg: #fff2d5;
  --ui-warning: #795413;
  --ui-danger-bg: #fcebec;
  --ui-danger: #a02d39;
  --ui-shadow: 0 1px 2px rgb(0 0 0 / 3%);
  --ui-radius: 5px;
  --ui-font: "Geist", "Inter", "Segoe UI", Arial, sans-serif;
  --ui-heading-font: "Geist", "Inter", "Segoe UI", Arial, sans-serif;
  --ui-sidebar-width: 248px;
}

html[data-theme="graphite"] body { background: var(--ui-bg); }
html[data-theme="graphite"] .sidebar { background: #fafafa; border-color: #d5d5d5; padding: 22px 18px; }
html[data-theme="graphite"] .brand { font-size: 18px; gap: 10px; letter-spacing: -.65px; font-weight: 700; }
html[data-theme="graphite"] .brand small { color: var(--ui-muted); font-size: 10px; letter-spacing: .2px; }
html[data-theme="graphite"] .brand-icon { width: 32px; height: 32px; background: #242424; border-radius: 5px; font-size: 24px; box-shadow: none; }
html[data-theme="graphite"] aside.sidebar .mode-badge { border: 1px solid #dedede; border-radius: 4px; background: #f1f1f1; color: #4c4c4c; padding: 7px 10px; font-size: 11px; }
html[data-theme="graphite"] .sidebar nav { gap: 3px; }
html[data-theme="graphite"] .nav-item { font-size: 12px; padding: 10px 11px; border-radius: 4px; color: #5d5d5d; line-height: 1.5; }
html[data-theme="graphite"] .nav-item:hover { background: #e9e9e9; color: #171717; }
html[data-theme="graphite"] .sidebar .nav-item.active { background: #252525; color: #ffffff; font-weight: 600; }
html[data-theme="graphite"] .nav-submenu { border-color: #c9c9c9; padding-left: 9px; margin-left: 19px; }
html[data-theme="graphite"] .nav-subitem { border-radius: 4px; overflow-wrap: anywhere; }
html[data-theme="graphite"] .sidebar-footer { color: #494949; line-height: 1.5; }
html[data-theme="graphite"] .sidebar-footer p { color: #6a6a6a; }
html[data-theme="graphite"] .topbar { min-height: 58px; height: auto; padding: 12px 0; border-color: #d7d7d7; font-size: 11px; }
html[data-theme="graphite"] .topbar .toolbar { gap: 8px; }
html[data-theme="graphite"] .intro { padding: 24px 0 18px; }
html[data-theme="graphite"] .intro h1 { font-size: 29px; line-height: 1.25; font-weight: 630; letter-spacing: -.9px; margin: 9px 0 10px; }
html[data-theme="graphite"] .intro p { font-size: 12px; line-height: 1.65; }
html[data-theme="graphite"] .eyebrow { color: #707070; font-size: 9px; letter-spacing: 1.8px; font-weight: 650; }
html[data-theme="graphite"] h2 { font-size: 18px; letter-spacing: -.4px; font-weight: 650; }
html[data-theme="graphite"] h3 { font-size: 14px; letter-spacing: -.15px; }
html[data-theme="graphite"] .stats { gap: 0; border: 1px solid #d4d4d4; border-radius: 5px; overflow: hidden; background: #fff; }
html[data-theme="graphite"] .stat { border: 0; border-inline-end: 1px solid #dedede; border-radius: 0; background: #fff; padding: 18px 22px; box-shadow: none; }
html[data-theme="graphite"] .stat:last-child { border-inline-end: 0; }
html[data-theme="graphite"] .stat > span { font-size: 11px; }
html[data-theme="graphite"] .stat strong { font-size: 31px; font-weight: 600; letter-spacing: -1px; margin: 9px 0 5px; font-variant-numeric: tabular-nums; }
html[data-theme="graphite"] .stat small { font-size: 10px; line-height: 1.5; }
html[data-theme="graphite"] .section-heading { margin: 24px 0 14px; gap: 16px; }
html[data-theme="graphite"] .section-heading p { font-size: 12px; }
html[data-theme="graphite"] .flow { gap: 0; border: 1px solid #d8d8d8; border-radius: 5px; overflow: hidden; }
html[data-theme="graphite"] .flow article { background: #f9f9f9; border-inline-end: 1px solid #dedede; border-radius: 0; padding: 18px 22px; }
html[data-theme="graphite"] .flow article:last-child { border-inline-end: 0; }
html[data-theme="graphite"] .flow b { width: 23px; height: 23px; border-radius: 4px; background: #fff; border-color: #bfbfbf; color: #4b4b4b; margin-bottom: 12px; }
html[data-theme="graphite"] .flow p { font-size: 11px; line-height: 1.65; }
html[data-theme="graphite"] :is(.panel, .table-card, .connection-card, .eneba-stock-card, .key-search-match) { border-radius: 5px; border-color: #d8d8d8; background: #fff; box-shadow: none; }
html[data-theme="graphite"] .panel { padding: 20px; margin-bottom: 18px; }
html[data-theme="graphite"] .table-card { min-height: 88px; }
html[data-theme="graphite"] table { font-size: 12px; }
html[data-theme="graphite"] th { background: #eeeeee; padding: 11px 16px; font-size: 10px; color: #595959; font-weight: 650; border-bottom: 1px solid #d4d4d4; }
html[data-theme="graphite"] td { padding: 12px 16px; border-color: #e7e7e7; font-size: 12px; line-height: 1.45; }
html[data-theme="graphite"] tbody tr:nth-child(even) { background: #fcfcfc; }
html[data-theme="graphite"] tbody tr:hover { background: #f1f1f1; }
html[data-theme="graphite"] .order-cell { gap: 5px; }
html[data-theme="graphite"] :is(input, select, textarea) { border: 1px solid #cfcfcf; border-radius: 4px; color: #252525; background: #fff; padding: 9px 11px; font-size: 12px; }
html[data-theme="graphite"] :is(input, select, textarea):focus { border-color: #525252; box-shadow: 0 0 0 2px rgb(36 36 36 / 11%); }
html[data-theme="graphite"] label { color: #5a5a5a; font-size: 11px; gap: 7px; }
html[data-theme="graphite"] .form-grid { gap: 15px; }
html[data-theme="graphite"] .stack { gap: 14px; }
html[data-theme="graphite"] .button { border-radius: 4px; padding: 9px 13px; font-size: 11px; font-weight: 600; box-shadow: none; }
html[data-theme="graphite"] .primary { color: #fff; background: #252525; border-color: #252525; }
html[data-theme="graphite"] .primary:hover:not(:disabled) { background: #050505; border-color: #050505; }
html[data-theme="graphite"] .subtle { color: #454545; border-color: #cdcdcd; background: #fff; }
html[data-theme="graphite"] .subtle:hover:not(:disabled) { background: #ededed; border-color: #b1b1b1; }
html[data-theme="graphite"] .text-button { color: #282828; font-size: 12px; text-decoration: underline; text-decoration-color: #b4b4b4; text-underline-offset: 3px; }
html[data-theme="graphite"] .demo-note { border: 1px solid #d8d8d8; background: #ededed; border-radius: 4px; color: #575757; margin: 0 0 20px; padding: 11px 14px; align-items: flex-start; }
html[data-theme="graphite"] .demo-note > span { flex: 0 0 15px; border-color: #a2a2a2; margin-top: 2px; }
html[data-theme="graphite"] :is(.warning-note, .detail-issue) { background: var(--ui-warning-bg); color: var(--ui-warning); border-radius: 4px; border: 1px solid #ecd6a3; padding: 12px 16px; }
html[data-theme="graphite"] .feedback { border-radius: 4px; border: 1px solid #c7ddcf; background: var(--ui-success-bg); color: var(--ui-success); }
html[data-theme="graphite"] .feedback.error { border-color: #f1c9ce; background: var(--ui-danger-bg); color: var(--ui-danger); }
html[data-theme="graphite"] .badge { border-radius: 3px; padding: 4px 7px; font-size: 10px; border: 1px solid #ccded1; background: var(--ui-success-bg); color: var(--ui-success); }
html[data-theme="graphite"] .badge.grey { background: #eee; border-color: #d6d6d6; color: #606060; }
html[data-theme="graphite"] :is(.badge.warning, .badge.orange) { background: var(--ui-warning-bg); border-color: #ebd5a3; color: var(--ui-warning); }
html[data-theme="graphite"] :is(.raw-status, .order-cell small, .help, .detail-field dt, .pagination, #operator-name) { color: var(--ui-muted); }
html[data-theme="graphite"] :is(.order-issue, .order-cell .order-issue) { color: var(--ui-warning); }
html[data-theme="graphite"] :is(.callback-url code, .detail-reference) { color: #4b4b4b; }
html[data-theme="graphite"] .inventory-summary { gap: 0; border: 1px solid #d5d5d5; border-radius: 5px; overflow: hidden; }
html[data-theme="graphite"] .inventory-metric { border: 0; border-inline-end: 1px solid #dedede; border-radius: 0; background: #f7f7f7; padding: 16px 18px; }
html[data-theme="graphite"] .inventory-metric:last-child { border-inline-end: 0; }
html[data-theme="graphite"] .inventory-metric strong { color: #252525; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme="graphite"] .inventory-metric span { color: var(--ui-muted); font-size: 11px; }
html[data-theme="graphite"] #marketplace-price-form { background: #f3f3f3; border: 1px solid #dedede; border-radius: 4px; padding: 18px; }
html[data-theme="graphite"] .binding-current-card { border-color: #d7d7d7; background: #f3f3f3; border-radius: 5px; }
html[data-theme="graphite"] .binding-save-bar { border-color: #d6d6d6; }
html[data-theme="graphite"] .binding-inline-error { color: var(--ui-danger); }
html[data-theme="graphite"] .ui-modal { background: rgb(0 0 0 / 48%); backdrop-filter: blur(2px); }
html[data-theme="graphite"] .ui-modal .modal-surface { background: #fff; border: 1px solid #c6c6c6; border-radius: 7px; box-shadow: 0 24px 75px rgb(0 0 0 / 20%); padding: 26px; }
html[data-theme="graphite"] .ui-modal .modal-surface > h2 { border-bottom: 1px solid #dedede; padding-bottom: 17px; margin-bottom: 20px; }
html[data-theme="graphite"] .ui-modal fieldset { border-color: #d2d2d2; border-radius: 4px; }
html[data-theme="graphite"] .modal-close { color: #575757; font-size: 26px; border-radius: 4px; }
html[data-theme="graphite"] .modal-close:hover { background: #ededed; }
html[data-theme="graphite"] .dialog-tabs { border-color: #cfcfcf; gap: 2px; margin: 22px 0 18px; padding-bottom: 0; }
html[data-theme="graphite"] .dialog-tabs button { border-radius: 4px 4px 0 0; padding: 11px 14px; color: #636363; font-size: 12px; border-bottom: 2px solid transparent; }
html[data-theme="graphite"] .dialog-tabs button.active { background: #f1f1f1; color: #202020; border-bottom-color: #252525; }
html[data-theme="graphite"] .eneba-badge { background: #eee; color: #525252; border-color: #d3d3d3; border-radius: 4px; }
html[data-theme="graphite"] .eneba-stock-grid { gap: 12px; }
html[data-theme="graphite"] .eneba-stock-card { padding: 17px; gap: 8px; }
html[data-theme="graphite"] .eneba-stock-card h4 { font-size: 15px; }
html[data-theme="graphite"] .eneba-stock-card .eneba-stock-price { color: #252525; font-size: 22px; }
html[data-theme="graphite"] .login-screen { background: #ececec; gap: 64px; }
html[data-theme="graphite"] .login-intro h1 { color: #252525; font-weight: 630; letter-spacing: -.055em; font-size: clamp(38px, 4.5vw, 62px); }
html[data-theme="graphite"] .login-intro p { color: #666; font-size: 15px; }
html[data-theme="graphite"] .login-platforms { color: #333; font-size: 13px; letter-spacing: .1em; }
html[data-theme="graphite"] .login-platforms span { color: #aaa; }
html[data-theme="graphite"] .login-card { border: 1px solid #cdcdcd; border-top: 4px solid #252525; border-radius: 5px; padding: 38px; box-shadow: 0 18px 40px rgb(0 0 0 / 5%); }
html[data-theme="graphite"] .login-card h2 { font-size: 23px; letter-spacing: -.6px; }
html[data-theme="graphite"] .login-card .login-feedback { border-radius: 4px; background: var(--ui-danger-bg); color: var(--ui-danger); }

@media (min-width: 1181px) {
  html[data-theme="orbit"] .sidebar { width: 248px; inset: 16px auto 16px 16px; border-radius: 24px; overflow-y: auto; overscroll-behavior: contain; z-index: 50; }
  html[data-theme="orbit"] .app-shell > main { margin-left: 280px; width: calc(100% - 280px); max-width: none; padding: 0 clamp(28px, 3.3vw, 62px); }

  /* The nav remains in document flow: many account buttons may wrap onto
     another line without overlapping the workspace or disappearing. */
  html[data-theme="graphite"] .app-shell { display: block; }
  html[data-theme="graphite"] .sidebar { position: sticky; top: 0; inset: auto; width: 100%; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: center; column-gap: 32px; row-gap: 13px; padding: 15px 32px 12px; border: 0; border-bottom: 1px solid #ccc; z-index: 50; }
  html[data-theme="graphite"] .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  html[data-theme="graphite"] aside.sidebar .mode-badge { grid-column: 2; grid-row: 1; margin: 0; max-width: 340px; }
  html[data-theme="graphite"] .sidebar-footer { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; padding: 0; max-width: 370px; font-size: 10px; text-align: right; }
  html[data-theme="graphite"] .sidebar-footer p { margin: 2px 0 0; font-size: 10px; line-height: 1.45; }
  html[data-theme="graphite"] .sidebar nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; overflow: visible; }
  html[data-theme="graphite"] .sidebar nav > .nav-item { flex: 0 0 auto; }
  html[data-theme="graphite"] .nav-submenu { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0 7px 0 0; border: 0; padding: 0 0 0 9px; border-inline-start: 1px solid #cfcfcf; max-width: 100%; }
  html[data-theme="graphite"] :is(#kinguin-account-menu, #eneba-account-menu) { display: flex; flex-wrap: wrap; gap: 5px; max-width: 100%; }
  html[data-theme="graphite"] .nav-submenu .nav-subitem { width: auto; flex: 0 1 auto; min-width: 0; padding: 8px 10px !important; font-size: 11px !important; max-width: 100%; white-space: normal; }
  html[data-theme="graphite"] .sidebar nav > .nav-item { padding: 8px 11px; }
  html[data-theme="graphite"] .app-shell > main { margin: 0 auto; width: 100%; max-width: 1760px; padding: 0 32px; }
}

/* Theme cards show the same composition as the workspace rather than only
   a palette. Their markup is shared with the other three theme previews. */
.theme-preview[data-preview-theme="orbit"] { background: #f0ecf9; color: #44325f; display: grid; grid-template-columns: 25% 1fr; gap: 7%; padding: 7%; border: 1px solid #e1d6f2; border-radius: 14px; }
.theme-preview[data-preview-theme="orbit"] .preview-sidebar { background: #fff; border: 1px solid #e4dcf1; border-radius: 9px; box-shadow: 0 4px 10px rgb(81 44 125 / 6%); }
.theme-preview[data-preview-theme="orbit"] .preview-main { display: grid; gap: 8px; align-content: center; }
.theme-preview[data-preview-theme="orbit"] .preview-stat { background: #dcd0f7; border-radius: 6px; border: 1px solid #d3c2f1; }
.theme-preview[data-preview-theme="orbit"] .preview-row { background: #fff; border-radius: 5px; border: 1px solid #e6def3; }
.theme-preview[data-preview-theme="graphite"] { background: #f0f0f0; color: #333; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 20% 1fr; gap: 10%; padding: 0 0 7%; border: 1px solid #d1d1d1; border-radius: 4px; }
.theme-preview[data-preview-theme="graphite"] .preview-sidebar { width: auto; height: auto; border-bottom: 1px solid #bbb; background: #fafafa; border-radius: 0; flex-direction: row; align-items: center; padding: 5px 7%; gap: 6px; }
.theme-preview[data-preview-theme="graphite"] .preview-sidebar i { width: 14%; height: 5px; background: #b0b0b0; border-radius: 1px; }
.theme-preview[data-preview-theme="graphite"] .preview-sidebar i:first-child { width: 19%; height: 9px; margin: 0 7px 0 0; background: #333; }
.theme-preview[data-preview-theme="graphite"] .preview-sidebar i:nth-child(3) { background: #333; }
.theme-preview[data-preview-theme="graphite"] .preview-main { margin: 0 7%; display: grid; align-content: start; gap: 5px; }
.theme-preview[data-preview-theme="graphite"] .preview-main > b { color: #292929; font-size: 12px; }
.theme-preview[data-preview-theme="graphite"] .preview-metrics { gap: 0; }
.theme-preview[data-preview-theme="graphite"] .preview-stat { background: #fff; color: #333; border: 1px solid #cfcfcf; border-radius: 0; padding: 5px; font-size: 11px; }
.theme-preview[data-preview-theme="graphite"] .preview-table { background: #fff; border: 1px solid #d7d7d7; border-radius: 2px; }
.theme-preview[data-preview-theme="graphite"] .preview-row { background: #fff; border-color: #e1e1e1; border-radius: 0; padding: 5px 0; }
.theme-preview[data-preview-theme="graphite"] .preview-row i { background: #b5b5b5; }
.theme-preview[data-preview-theme="graphite"] .preview-row i:last-child { background: #707070; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="orbit"] .nav-item { transition: none; }
}

/* Classic desktop styling; semantic controls and responsive geometry are shared. */
html[data-theme="retro"] {
 --ui-bg:#e5e0ce; --ui-surface:#efefef; --ui-surface-alt:#d7d7d7;
 --ui-text:#111; --ui-muted:#414141; --ui-accent:#123ca9; --ui-accent-contrast:#fff;
 --ui-border:#7a7a7a; --ui-radius:0px; --ui-shadow:inset 1px 1px #fff, inset -1px -1px #777, 2px 2px 0 #0002;
 --ui-font:Tahoma,"Segoe UI",Arial,sans-serif; --ui-heading-font:"Courier New",monospace;
 --ui-success-bg:#dcebdd; --ui-success:#195526; --ui-warning-bg:#fff0be; --ui-warning:#6a4700;
 --ui-danger-bg:#f5d9d9; --ui-danger:#9c1623; --ui-focus:#073997;
}
html[data-theme="retro"] body { background:linear-gradient(135deg,#e9e5d8,#ddd6bf); }
html[data-theme="retro"] :is(.sidebar,.panel,.table-card,.stat,.login-card,.modal-surface,.appearance-dialog) { border:2px solid; border-color:#fff #727272 #727272 #fff; border-radius:0 !important; box-shadow:1px 1px 0 #111; }
html[data-theme="retro"] .sidebar { background:#deddd6; }
html[data-theme="retro"] .brand { padding:12px 8px; background:linear-gradient(90deg,#08297e,#1649c1); color:#fff; margin-bottom:16px; }
html[data-theme="retro"] .brand small { color:#e3ebff; }
html[data-theme="retro"] .brand-icon { border:2px solid; border-color:#fff #666 #666 #fff; border-radius:0; background:#ffe65d; color:#17264f; box-shadow:none; }
html[data-theme="retro"] :is(.section-heading,.offer-card-heading,.diagnostic-heading,.appearance-heading) { background:linear-gradient(90deg,#08297e,#1649c1); color:#fff; padding:10px 12px; border:1px solid #fff; }
html[data-theme="retro"] .diagnostic-heading { padding-right:68px; }
html[data-theme="retro"] :is(.section-heading,.offer-card-heading,.diagnostic-heading,.appearance-heading) :is(h2,h3,p) { color:#fff; }
html[data-theme="retro"] .offer-account-stock-mode { color:#e2eaff !important; }
html[data-theme="retro"] .modal-surface > :is(h2,.detail-heading) { background:linear-gradient(90deg,#08297e,#1649c1); color:#fff; padding:10px 56px 10px 12px; }
html[data-theme="retro"] .modal-surface > .detail-heading :is(h2,h3) { color:#fff; }
html[data-theme="retro"] :is(.button,.nav-item,.dialog-tabs button,.theme-card,.modal-close) { border-radius:0 !important; border:2px solid; border-color:#fff #555 #555 #fff; background:#d8d8d8; color:#111; box-shadow:inset 1px 1px #ececec; }
html[data-theme="retro"] .primary,html[data-theme="retro"] .nav-item.active,html[data-theme="retro"] .dialog-tabs button.active { background:#123ca9; color:#fff; }
html[data-theme="retro"] :is(.button,.nav-item,.dialog-tabs button):active:not(:disabled) { border-color:#555 #fff #fff #555; box-shadow:inset 1px 1px #777; }
html[data-theme="retro"] :is(input,select,textarea) { background:#fff; border:2px solid; border-color:#777 #fff #fff #777; border-radius:0; }
html[data-theme="retro"] :is(.inventory-metric,.binding-current-card,.offer-card-section,.diagnostic-capture) { border-radius:0; border:1px solid #888; }
html[data-theme="retro"] th { background:#d8d8d8; color:#222; border-bottom:1px solid #888; }
html[data-theme="retro"] :is(.responsive-table tbody tr,.account-permissions-flags .account-permission-switch) { border-radius:0 !important; }
html[data-theme="retro"] .offer-status { border-radius:0; border:1px solid currentColor; }
.theme-preview[data-preview-theme="retro"] { background:#e5e0ce; border:2px solid; border-color:#fff #777 #777 #fff; border-radius:0; }
.theme-preview[data-preview-theme="retro"] .preview-sidebar { background:#d8d8d8; border-radius:0; }
.theme-preview[data-preview-theme="retro"] .preview-sidebar i:first-child { background:#123ca9; }
.theme-preview[data-preview-theme="retro"] .preview-main > b { background:#123ca9; color:#fff; padding:4px; font-family:"Courier New",monospace; }
.theme-preview[data-preview-theme="retro"] :is(.preview-stat,.preview-table) { background:#efefef; color:#123ca9; border:1px solid #888; border-radius:0; }
@media(max-width:1180px) {
 html[data-theme="retro"] #marketplace-navigation { background:#deddd6; border-radius:0; }
 html[data-theme="retro"] .mobile-bottom-nav,html[data-theme="retro"] nav[aria-label="Разделы"] { border-radius:0; }
}