:root {
      --bg: #F4F2FB;
      --surface: #FFFFFF;
      --text: #1B1530;
      --muted: #5E5873;
      --border: #E6E2F3;
      --border-strong: #D9D4EE;
      --soft: #ECE8FA;
      --accent: #4B2EDB;
      --accent-hover: #3A20B5;
      --brand: transparent;
      --brand-hover: transparent;
      --danger: #A3321E;
      --attention: #A3321E;
      --attention-bg: #FFE7DF;
      --attention-strong: #E8492F;
      --ok: #137A4B;
      --ok-bg: #DDF3E7;
      --wait: #7A5300;
      --wait-bg: #FFF4D6;
      --gold: #B45309;
      --sidebar-bg: #0E1117;
      --sidebar-hover: #161B26;
      --sidebar-active: #1A2030;
      --sidebar-text: #AEB7C6;
      --sidebar-muted: #8590A3;
      --sidebar-width: 232px;
      --sidebar-width-collapsed: 72px;
      --radius-sm: 8px;
      --radius: 14px;
      --radius-lg: 20px;
      --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
      --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
      --st-new: #4B2EDB;
      --st-booked: #7A5300;
      --st-demo: #8B78FF;
      --st-cold: #8A82A6;
      --st-sale: #137A4B;
      --st-turndown: #A3321E;
      --band-bg: #1B1530;
      --band-panel: #241C3D;
      --band-surface: #2A2245;
      --band-line: #4A4268;
      --band-text: #FFFFFF;
      --band-muted: #C9C1F2;
    }

    * { box-sizing: border-box; }

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

    h1, h2 {
      font-family: var(--font-display);
    }

    .hidden { display: none !important; }

    #loading {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
    }

    label {
      display: block;
      font: 500 13px var(--font-body);
      color: var(--text);
      margin-bottom: 6px;
    }

    input[type="checkbox"],
    input[type="radio"] {
      accent-color: var(--accent);
    }

    input[type="email"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="number"],
    input[type="text"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    input[type="file"],
    input[type="color"],
    select,
    textarea {
      width: 100%;
      padding: 0 12px;
      height: 38px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font: 14px var(--font-body);
      color: var(--text);
      margin-bottom: 16px;
      background: #fff;
    }

    textarea {
      height: auto;
      min-height: 90px;
      padding: 10px 12px;
      resize: vertical;
    }

    input[type="email"]:focus,
    input[type="date"]:focus,
    input[type="time"]:focus,
    input[type="datetime-local"]:focus,
    input[type="number"]:focus,
    input[type="text"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    input[type="password"]:focus,
    input[type="file"]:focus,
    input[type="color"]:focus,
    select:focus,
    textarea:focus {
      outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: 0;
      border-color: var(--accent);
    }

    input:read-only {
      background: #f4f5f7;
      color: var(--muted);
    }

    button {
      font: inherit;
      cursor: pointer;
      border: none;
      border-radius: 6px;
      padding: 10px 14px;
    }

    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    main {
      padding: 24px;
      flex: 1;
    }

    input[type="color"] {
      width: 56px;
      height: 40px;
      padding: 4px;
      margin-bottom: 16px;
      cursor: pointer;
    }