:root{

  /* Core colors */
  --ui-bg: #000;
  --ui-fg: #fff;
  --ui-muted: #cfcfcf;

  --ui-border: #888;
  --ui-border-2: #666;

  --ui-accent: #aaf;
  --ui-accent-fg: #000;

  --ui-warn: #f7d774;
  --ui-danger: #e25555;

  --ui-shadow: 0 0 32px #000c;

  /* Layout */
  --ui-radius-lg: 22px;
  --ui-radius-md: 12px;

  --ui-pad-lg: 28px;
  --ui-pad-md: 16px;

  --ui-gap-lg: 18px;
  --ui-gap-md: 12px;

  /* Icons */
  --icon-size: 40px;
  --icon-size-lg: 40px;

  /* Modal position offsets (set by JS) */
  --modal-x: 0px;
  --modal-y: 0px;

  /* Fonts (reverted) */
  --font-display: "FancyCatPX", sans-serif;
  --font-system-windows: "Segoe UI", Arial, sans-serif;
  --font-system-android: Roboto, Arial, sans-serif;
  --font-system-apple: "San Francisco","Helvetica Neue",Helvetica,Arial,sans-serif;

  --font-ui: var(--font-system-windows);
}

html, body{
  margin:0;
  padding:0;
  background:var(--ui-bg);
  color:var(--ui-fg);
  font-family:var(--font-ui);
}

.modal-content,
.modal-content *{
  -webkit-user-select:none;
  user-select:none;
}

.modal-content input,
.modal-content textarea{
  -webkit-user-select:text;
  user-select:text;
}

html.gs-modal-dragging,
html.gs-modal-dragging *,
body.modal-dragging,
body.modal-dragging *{
  -webkit-user-select:none !important;
  user-select:none !important;
}

/* =========================================================
   ICON BUTTONS
========================================================= */
.icon-btn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}

.icon{
  width:var(--icon-size);
  height:var(--icon-size);
}

.icon--lg{
  width:var(--icon-size-lg);
  height:var(--icon-size-lg);
}

/* =========================================================
   UI TEXT
========================================================= */
.ui-title{
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 700;
  text-align:center;
}

.ui-subtitle{
  font-family: var(--font-ui);
  color: var(--ui-muted);
  text-align:center;
}

.ui-hr{
  border:none;
  height:2px;
  background: var(--ui-border-2);
  margin: 16px 0;
}

/* =========================================================
   BUTTONS (your styled buttons are fine)
========================================================= */
.ui-btn{
  padding:.5em .9em;
  border-radius:999px;
  border:2px solid var(--ui-border-2);
  background:#444;
  color:#fff;
  cursor:pointer;
}

.ui-btn.accent{
  background:var(--ui-accent);
  color:var(--ui-accent-fg);
  border-color:transparent;
}

.ui-btn:disabled{
  background:#222;
  color:#888;
  border-color:#333;
  cursor:not-allowed;
}

/* IMPORTANT: prevent hover color changes on disabled */
.ui-btn:disabled:hover{
  background:#222;
  color:#888;
}

/* =========================================================
   LAYOUT HELPERS
========================================================= */
.ui-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ui-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.global-settings-btn{
  position:fixed;
  top:16px;
  right:16px;
  z-index:2001;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:42px;
  padding:8px 12px;
  border:1px solid var(--page-border, var(--ui-border, #888));
  border-radius:12px;
  background:var(--page-button-bg, rgba(0,0,0,.45));
  color:var(--page-button-text, var(--page-text, #fff));
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  text-decoration:none;
  font-family:var(--ui-font-stack, var(--font-ui, system-ui, sans-serif));
  font-weight:800;
  line-height:1;
}

.global-settings-btn:hover{
  background:var(--page-button-hover, rgba(255,255,255,.12));
}

.modal-content .global-settings-btn,
.gs-modal-content .global-settings-btn{
  position:static;
  width:100%;
  max-width:820px;
  min-height:0;
  margin-top:10px;
  padding:8px 14px;
}

/* =========================================================
   INPUTS
   - Keep native styling for enabled controls
   - Only enforce disabled background + cursor
========================================================= */
select, input, textarea, button{
  font-family: inherit;
}

input:disabled,
select:disabled,
textarea:disabled{
  background:#222;
  color:#888;
  cursor:not-allowed;
}

/* prevent hover changes for disabled controls */
input:disabled:hover,
select:disabled:hover,
textarea:disabled:hover{
  background:#222;
  color:#888;
}

/* Also make disabled labels not “feel clickable” */
label:has(input:disabled),
label:has(select:disabled),
label:has(textarea:disabled){
  cursor:not-allowed;
}

/* =========================================================
   MODAL OVERLAY + CARD (centered base + draggable offsets)
========================================================= */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:transparent;
  z-index:2000;

  /* click-through backdrop */
  pointer-events:none;
}

.modal.show{
  display:block;
}

/* This is the draggable box */
.modal-content{
  pointer-events:auto;
  position:fixed;
  left:50%;
  top:50%;
  transform:
    translate(-50%, -50%)
    translate(var(--modal-x, 0px), var(--modal-y, 0px));

  background:#000;
  color:#fff;

  border-radius: var(--ui-radius-lg);
  border:4px solid var(--ui-border);
  box-shadow: var(--ui-shadow);

  padding: var(--ui-pad-md);

  /* Reverted “normal” sizing */
  width: min(92vw, 760px);
  max-height: min(90vh, 640px);
  overflow:auto;

  touch-action:none;
}

/* Header should exist so dragging feels “title-bar-ish” */
.modal-header{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:10px;
  user-select:none;
}

/* Close button */
.modal-close{
  position:absolute;
  top:12px;
  right:12px;

  width:var(--close-btn-size);
  height:var(--close-btn-size);
}

/* =========================================================
   ERROR BAR
========================================================= */
.js-error{
  position:fixed;
  left:50%;
  top:16px;
  transform:translateX(-50%);
  width:min(92vw, 980px);
  padding:10px 12px;
  border:2px solid var(--ui-danger);
  border-radius:12px;
  background:#200;
  color:#fff;
  z-index:3000;
  display:none;
  white-space:pre-wrap;
  font-family: var(--font-ui);
}

/* =========================================================
   TABULAR NUMBERS (your “monochar” behavior)
========================================================= */
.tabular{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ===== Globals modal base ===== */

.gs-modal[hidden] {
  display: none !important;
}

.gs-modal {
  position: fixed;
  left: 24px;
  top: 24px;
  z-index: 1000;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border-radius: 22px;
  border: 1px solid var(--ui-border, rgba(255,255,255,0.16));
  background: var(--ui-panel, #0b0b0b);
  color: var(--ui-text, #fff);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  overflow: hidden;
}

.gs-modal.is-open {
  display: block;
}

.gs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  border-bottom: 1px solid var(--ui-border, rgba(255,255,255,0.16));
  background: color-mix(in srgb, var(--ui-panel, #0b0b0b) 88%, transparent);
}

.gs-dragging .gs-modal-header {
  cursor: grabbing;
}

.gs-modal-title {
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
}

.gs-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gs-modal-content,
.gs-modal-scroll {
  padding: 16px;
  overflow: auto;
  max-height: calc(100vh - 120px);
}

html.gs-modal-dragging,
html.gs-modal-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.gs-bitmap-text{
  --gs-bitmap-scale:2;
  display:inline-flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0;
  vertical-align:baseline;
  line-height:1;
  font-size:inherit;
}

.gs-bitmap-glyph{
  --gs-bitmap-cell:8;
  --gs-bitmap-width:8;
  --gs-bitmap-x:0;
  --gs-bitmap-y:0;
  display:inline-block;
  width:calc(var(--gs-bitmap-width) * var(--gs-bitmap-scale) * 1px);
  height:calc(var(--gs-bitmap-cell) * var(--gs-bitmap-scale) * 1px);
  background-color:currentColor;
  -webkit-mask-image:var(--gs-bitmap-font-url-current);
  mask-image:var(--gs-bitmap-font-url-current);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:calc(128 * var(--gs-bitmap-scale) * 1px) calc(128 * var(--gs-bitmap-scale) * 1px);
  mask-size:calc(128 * var(--gs-bitmap-scale) * 1px) calc(128 * var(--gs-bitmap-scale) * 1px);
  -webkit-mask-position:
    calc(var(--gs-bitmap-x) * var(--gs-bitmap-cell) * var(--gs-bitmap-scale) * -1px)
    calc(var(--gs-bitmap-y) * var(--gs-bitmap-cell) * var(--gs-bitmap-scale) * -1px);
  mask-position:
    calc(var(--gs-bitmap-x) * var(--gs-bitmap-cell) * var(--gs-bitmap-scale) * -1px)
    calc(var(--gs-bitmap-y) * var(--gs-bitmap-cell) * var(--gs-bitmap-scale) * -1px);
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  flex:0 0 auto;
}

.gs-modal-close {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ui-border-strong, rgba(255,255,255,0.24));
  background: var(--ui-control, #000);
  color: var(--ui-control-text, #fff);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  line-height: 1;
}

.gs-modal-close:hover {
  background: var(--ui-control-hover, #111);
}

/* Mobile */
@media (max-width: 900px) {
  .gs-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 18px;
  }

  .gs-modal-content,
  .gs-modal-scroll {
    max-height: calc(100vh - 96px);
  }
}

html, body,
button, a, label, summary, details,
[role="button"], [tabindex],
input, select, textarea,
.chip, .icon-btn, .close-btn, .global-settings-btn,
.gs-modal-close {
  cursor: default !important;
}

html,
body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}