:root {
      color-scheme: dark;
      --bg: #111214;
      --panel: #191a1e;
      --panel2: #202127;
      --line: #30323a;
      --muted: #a1a5b0;
      --text: #f4f5f7;
      --blue: #5865f2;
      --green: #3ba55c;
      --red: #ed4245;
      font: 15px/1.45 Inter, system-ui, "Segoe UI", sans-serif
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: radial-gradient(ellipse at 70% -20%, #24283b, transparent 40%), var(--bg);
      color: var(--text);
      min-height: 100vh
    }

    button,
    input,
    textarea,
    select {
      font: inherit
    }

    button {
      cursor: pointer
    }

    .hidden {
      display: none !important
    }

    .app {
      max-width: 1480px;
      margin: auto;
      padding: 22px
    }

    .topbar,
    .panel,
    .stat,
    .sidebar,
    .form-card,
    .preview {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #191a1e
    }

    .topbar {
      height: 66px;
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 750
    }

    .brand img {
      width: 42px;
      height: 42px;
      object-fit: cover;
      border-radius: 10px
    }

    .brand small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .06em
    }

    .user-tools {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .user-avatar {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      border: 1px solid var(--line);
      border-radius: 50%;
      object-fit: cover;
      background: #22252b
    }

    .hero {
      margin: 16px 0;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: linear-gradient(110deg, #17181c, #1c2231 72%, #172b29)
    }

    .hero h1 {
      margin: 0
    }

    .hero p,
    .note,
    small {
      color: var(--muted)
    }

    .dashboard {
      display: grid;
      grid-template-columns: 205px minmax(0, 1fr);
      gap: 16px
    }

    .sidebar {
      padding: 12px;
      height: max-content;
      position: sticky;
      top: 12px
    }

    .sidebar h3 {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      margin: 5px 10px 12px
    }

    .nav {
      display: grid;
      gap: 5px
    }

    .nav button {
      text-align: left;
      border: 0;
      border-radius: 8px;
      padding: 11px;
      background: transparent;
      color: #bbb
    }

    .nav button.active,
    .nav button:hover {
      background: #292d46;
      color: white
    }

    .content,
    .page,
    .panel {
      min-width: 0
    }

    .page {
      display: none
    }

    .page.active {
      display: block
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-bottom: 14px
    }

    .stat {
      padding: 14px
    }

    .stat strong {
      display: block;
      font-size: 20px
    }

    .stat small {
      text-transform: uppercase;
      font-size: 10px
    }

    .panel {
      padding: 16px;
      margin-bottom: 14px
    }

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 13px
    }

    .head h2 {
      font-size: 17px;
      margin: 0
    }

    .products-layout {
      display: grid;
      grid-template-columns: minmax(190px, .65fr) minmax(330px, 1.1fr) minmax(280px, .8fr);
      gap: 14px;
      align-items: start
    }

    .products-layout>.panel {
      align-self: start
    }

    .products-layout>.preview {
      position: sticky;
      top: 14px;
      min-width: 0;
      margin-top: 0
    }

    .discord-card {
      min-width: 0;
      padding: 14px;
      border: 1px solid #30323a;
      border-left: 4px solid #5865f2;
      border-radius: 8px;
      background: #0c0d10;
      overflow: hidden
    }

    .discord-brand {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #c8cbd3;
      font-size: 12px;
      margin-bottom: 12px
    }

    .discord-brand img {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      object-fit: cover
    }

    .discord-brand span {
      background: #5865f2;
      color: white;
      border-radius: 4px;
      padding: 1px 4px;
      font-weight: 700;
      font-size: 9px
    }

    .discord-card h2 {
      font-size: 18px;
      margin: 0 0 8px;
      overflow-wrap: anywhere
    }

    .preview-status {
      display: inline-block;
      margin-bottom: 8px;
      color: #aeb3bc;
      font-size: 12px
    }

    .price-value {
      font-size: 16px;
      font-weight: 750;
      color: #fff
    }

    .preview-description {
      margin: 4px 0 12px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      color: #d4d5d8;
      font-size: 15px;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-clamp: 8;
      -webkit-line-clamp: 8;
      overflow: hidden
    }

    .preview-description p,
    .preview-outside-message p {
      margin: 0 0 .55em
    }

    .preview-description ul,
    .preview-description ol,
    .preview-outside-message ul,
    .preview-outside-message ol {
      margin: .35em 0 .75em;
      padding-left: 1.55em
    }

    .preview-description li,
    .preview-outside-message li {
      padding-left: .12em;
      margin: .18em 0
    }

    .preview-description blockquote,
    .preview-outside-message blockquote {
      margin: .45em 0;
      padding: .05em 0 .05em .8em;
      border-left: 4px solid #4f545c;
      color: #b9bbc0
    }

    .preview-description h2,
    .preview-description h3,
    .preview-description h4,
    .preview-outside-message h2,
    .preview-outside-message h3,
    .preview-outside-message h4 {
      margin: .45em 0 .3em;
      color: #f2f3f5;
      font-size: 1.08em
    }

    .discord-inline-code,
    .discord-code-block {
      border: 1px solid #ffffff12;
      border-radius: 5px;
      background: #111214;
      color: #e3e5e8;
      font-family: ui-monospace, Consolas, monospace
    }

    .discord-inline-code {
      padding: .12em .35em;
      font-size: .9em
    }

    .discord-code-block {
      max-width: 100%;
      margin: .45em 0;
      padding: .7em;
      overflow: auto;
      white-space: pre;
      line-height: 1.45
    }

    .discord-markdown-link {
      color: #00a8fc;
      text-decoration: underline;
      overflow-wrap: anywhere
    }

    .discord-mention {
      padding: 0 .18em;
      border-radius: 3px;
      background: #5865f233;
      color: #c9cdfb
    }

    .discord-markdown-emoji {
      width: 1.25em;
      height: 1.25em;
      margin: 0 .08em;
      vertical-align: -.25em;
      object-fit: contain
    }

    .discord-spoiler {
      border-radius: 3px;
      background: #4f545c;
      color: transparent;
      cursor: pointer;
      filter: blur(4px);
      user-select: none
    }

    .discord-spoiler.revealed {
      color: inherit;
      filter: none;
      user-select: text
    }

    .discord-subtext {
      display: block;
      margin: .3em 0;
      color: #aeb3bc;
      font-size: .82em
    }

    .preview-dialog .preview-description {
      display: block;
      line-clamp: unset;
      -webkit-line-clamp: unset;
      overflow: visible
    }

    .variant-prices {
      display: grid;
      gap: 5px;
      margin: 10px 0;
      padding: 10px;
      border-radius: 6px;
      background: #16171b;
      color: #e1e2e5;
      font-size: 14px;
      line-height: 1.45;
      overflow-wrap: anywhere
    }

    .preview-thumbnail {
      float: right;
      width: 80px;
      height: 80px;
      margin: 2px 0 8px 12px;
      border-radius: 6px;
      object-fit: cover;
    }

    .preview-embed-footer {
      clear: both;
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid #30323a;
      color: #aeb2ba;
      font-size: 11px;
      overflow-wrap: anywhere;
    }

    .preview-outside-message {
      margin: 0 0 8px;
      padding: 10px 12px;
      border: 1px solid #5865f22b;
      border-radius: 8px;
      background: #5865f20d;
      color: #dce0ff;
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .preview-image {
      display: block;
      max-width: 100%;
      max-height: 230px;
      object-fit: contain;
      object-position: left center;
      border-radius: 6px;
      margin: 10px 0
    }

    .preview-buttons {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 12px
    }

    .preview-emoji {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      object-fit: contain
    }

    .preview-button {
      display: inline-block;
      border-radius: 6px;
      padding: 6px 10px;
      background: #218b4e;
      color: white;
      font-size: 12px;
      font-weight: 650
    }

    .preview-select {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      min-width: 190px;
      gap: 18px;
      padding: 7px 10px;
      border: 1px solid #3f414a;
      border-radius: 6px;
      background: #1b1c22;
      color: #e8e8eb;
      font-size: 12px;
      font-weight: 600
    }

    .preview-select b {
      color: #a7a9b2;
      font-size: 15px;
      line-height: 1
    }

    .preview-footer {
      margin-top: 12px;
      color: #a1a5b0;
      font-size: 11px;
      border-top: 1px solid #292a30;
      padding-top: 8px
    }

    .list {
      display: grid;
      gap: 8px
    }

    .item {
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #15161a;
      padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px
    }

    .item button {
      border: 0;
      background: transparent;
      text-align: left;
      color: inherit;
      padding: 0
    }

    .pill {
      white-space: nowrap;
      border-radius: 20px;
      padding: 4px 8px;
      background: #163b27;
      color: #8fe6ad;
      font-size: 11px
    }

    .pill.low {
      background: #3b2e16;
      color: #f6cf75
    }

    .pill.out {
      background: #3a2022;
      color: #ff9b9e
    }

    .form-card {
      padding: 16px;
      background: #15161a
    }

    .form-card h3 {
      margin: 0
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 12px
    }

    .shop-name-fields {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px
    }

    .field {
      display: grid;
      gap: 6px;
      margin: 10px 0
    }

    .field.full {
      grid-column: 1/-1
    }

    label {
      font-size: 13px;
      font-weight: 650;
      color: #c8cad1
    }

    input,
    textarea,
    select {
      width: 100%;
      padding: 10px 11px;
      border: 1px solid #393b44;
      border-radius: 8px;
      background: #111216;
      color: var(--text)
    }

    textarea {
      resize: vertical;
      min-height: 80px
    }

    .btn {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px 13px;
      background: #202127;
      color: var(--text);
      font-weight: 650
    }

    .btn.primary {
      background: var(--blue);
      border-color: var(--blue)
    }

    .btn.success {
      background: #1d6037;
      border-color: #2d8b50
    }

    .btn.danger {
      color: #ff9b9e;
      border-color: #743337
    }

    .btn.small {
      padding: 6px 9px;
      font-size: 12px
    }

    .actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px
    }

    .access-check-list,
    .access-permission-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #121318;
      max-height: 220px;
      overflow: auto
    }

    .access-check-list label,
    .access-permission-grid label {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 7px;
      border: 1px solid var(--line);
      border-radius: 7px;
      color: var(--text)
    }

    .access-server-heading {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid rgba(125, 103, 255, .42);
      border-radius: 8px;
      background: linear-gradient(110deg, rgba(125, 103, 255, .14), rgba(125, 103, 255, .04));
      color: var(--text)
    }

    .access-server-heading span {
      flex: 0 0 auto;
      padding: 3px 6px;
      border-radius: 5px;
      background: rgba(125, 103, 255, .18);
      color: var(--accent, #a99aff);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em
    }

    .access-server-heading strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .access-shop-empty {
      grid-column: 1 / -1;
      padding: 3px 4px 6px;
      color: var(--muted);
      font-size: 11px
    }

    .extra-card {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 10px;
      margin: 9px 0
    }

    .extra-head {
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .preview {
      padding: 14px;
      margin-top: 12px
    }

    .preview img {
      max-width: 100%;
      max-height: 260px;
      object-fit: contain
    }

    .empty {
      padding: 24px;
      border: 1px dashed var(--line);
      border-radius: 8px;
      text-align: center;
      color: var(--muted)
    }

    .shop-setup-hint {
      border-left: 4px solid var(--blue);
      background: linear-gradient(110deg, #1b1e2c, #191a1e)
    }

    .shop-setup-hint h2 {
      margin: 0 0 6px
    }

    .stock-alert {
      padding: 11px 13px;
      margin: 10px 0;
      border: 1px solid #806223;
      border-radius: 8px;
      background: #3b2e16;
      color: #f6cf75
    }

    .bulk-tools {
      display: grid;
      grid-template-columns: auto auto minmax(130px, .6fr) 100px minmax(160px, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #15161a
    }

    .bulk-tools label {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap
    }

    .bulk-tools label input {
      width: auto
    }

    .inventory-select {
      width: 18px;
      align-self: start;
      margin-top: 6px
    }

    .analytics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
      margin: 12px 0
    }

    .toast {
      position: fixed;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      background: #202127;
      padding: 12px 16px;
      border-radius: 9px;
      opacity: 0;
      pointer-events: none
    }

    .toast.show {
      opacity: 1
    }

    .error {
      color: #ff9b9e
    }

    .variant-prices {
      margin: 10px 0
    }

    .check {
      display: flex;
      align-items: center;
      gap: 9px
    }

    .check input {
      width: auto
    }

    @media(max-width:1250px) {
      .dashboard {
        grid-template-columns: minmax(0, 1fr)
      }

      .sidebar {
        position: static
      }

      .nav {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .nav button {
        text-align: center
      }

      .inventory-row {
        grid-template-columns: minmax(0, 1fr) auto
      }

      .inventory-control-grid {
        display: flex
      }

      .bulk-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .products-layout {
        grid-template-columns: minmax(220px, .75fr) minmax(330px, 1.25fr)
      }

      .preview {
        grid-column: 1/-1;
        position: static
      }
    }

    @media(max-width:900px) {
      .dashboard {
        grid-template-columns: 1fr
      }

      .sidebar {
        position: static
      }

      .nav {
        grid-template-columns: repeat(4, 1fr)
      }

      .nav button {
        text-align: center
      }

      .products-layout {
        grid-template-columns: 1fr
      }

      .preview {
        grid-column: auto
      }
    }

    @media(max-width:750px) {
      .bulk-tools {
        grid-template-columns: 1fr 1fr
      }

      .analytics-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:600px) {
      .app {
        padding: 10px
      }

      .topbar {
        height: auto;
        min-height: 60px;
        gap: 8px
      }

      .user-tools .note {
        display: none
      }

      .head {
        align-items: flex-start;
        flex-wrap: wrap
      }

      .bulk-tools {
        grid-template-columns: minmax(0, 1fr)
      }

      .stats {
        grid-template-columns: 1fr 1fr
      }

      .grid {
        grid-template-columns: 1fr
      }

      .field.full {
        grid-column: auto
      }

      .user-tools select {
        max-width: 120px
      }
    }

    .emoji-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      max-height: 140px;
      overflow: auto;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #111216
    }

    .emoji-choice {
      width: 34px;
      height: 34px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: #202127;
      display: grid;
      place-items: center
    }

    .emoji-choice:hover {
      border-color: var(--blue)
    }

    .emoji-choice img {
      width: 24px;
      height: 24px;
      object-fit: contain
    }

    .emoji-empty {
      font-size: 12px;
      color: var(--muted)
    }

    .preview-dialog {
      width: min(720px, calc(100% - 28px));
      max-height: 90vh;
      overflow: auto;
      border: 1px solid #454854;
      border-radius: 14px;
      padding: 18px;
      background: #17181c;
      color: var(--text);
      box-shadow: 0 24px 90px #000b
    }

    .preview-dialog::backdrop {
      background: #050609c9;
      backdrop-filter: blur(5px)
    }

    .preview-dialog .discord-card {
      padding: 22px
    }

    .preview-dialog .discord-card h2 {
      font-size: 24px
    }

    .preview-dialog .preview-description {
      font-size: 15px
    }

    .preview-dialog .variant-prices {
      font-size: 15px
    }

    .preview-dialog .preview-image {
      max-height: 420px
    }

    .trigger-dialog {
      width: min(760px, calc(100% - 24px));
      max-height: min(92vh, 900px);
      padding: 0
    }

    .trigger-form {
      padding: 20px;
      display: grid;
      gap: 14px
    }

    .trigger-form .head {
      margin-bottom: 0
    }

    .trigger-form .head h2 {
      margin: 0 0 4px
    }

    .trigger-form textarea {
      min-height: 105px
    }

    .trigger-form details:not(.trigger-multiselect) {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px
    }

    .trigger-form details>summary {
      cursor: pointer;
      color: var(--text);
      font-weight: 650
    }

    .trigger-filters {
      display: grid;
      grid-template-columns: minmax(150px, .4fr) minmax(220px, 1.6fr);
      gap: 10px;
      margin: 12px 0
    }

    .trigger-table-wrap {
      overflow-x: auto
    }

    .trigger-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 580px
    }

    .trigger-table th,
    .trigger-table td {
      border-bottom: 1px solid var(--line);
      padding: 12px 10px;
      text-align: left;
      vertical-align: top
    }

    .trigger-table th {
      background: color-mix(in srgb, var(--panel), var(--text) 4%);
      font-size: 12px
    }

    .trigger-table td:first-child {
      width: 22%;
      overflow-wrap: anywhere
    }

    .trigger-table td:nth-child(2) {
      max-width: 540px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      font-size: 12px
    }

    .trigger-table td:nth-child(3) {
      white-space: nowrap;
      font-size: 12px
    }

    .trigger-multiselect {
      position: relative
    }

    .trigger-multiselect>summary {
      min-height: 42px;
      display: flex;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--input, #171920);
      color: var(--text);
      font-size: 13px;
      font-weight: 400
    }

    .trigger-multiselect[open]>summary {
      border-color: var(--blue)
    }

    .trigger-multiselect-options {
      position: absolute;
      z-index: 30;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      max-height: 230px;
      overflow: auto;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--panel, #191b22);
      box-shadow: 0 16px 32px #0008
    }

    .trigger-multiselect-options label {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px
    }

    .trigger-multiselect-options label:hover {
      background: #5865f220
    }

    .trigger-multiselect-options input {
      width: 15px;
      height: 15px;
      margin: 0
    }

    .trigger-embed-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto auto;
      align-items: end;
      gap: 8px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line)
    }

    @media (max-width: 650px) {
      .trigger-form { padding: 14px }
      .trigger-filters { grid-template-columns: 1fr }
      .trigger-embed-field { grid-template-columns: 1fr 1fr }
    }

    .inventory-row {
      display: grid;
      grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
      gap: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #15161a
    }

    .inventory-info {
      display: grid;
      align-content: start;
      gap: 4px;
      min-width: 0
    }

    .inventory-info strong {
      overflow-wrap: anywhere
    }

    .inventory-control-grid {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex-wrap: wrap
    }

    .inventory-quantity {
      width: 132px;
      min-width: 90px
    }

    .inventory-adjust {
      min-width: 58px;
      height: 38px;
      padding: 0 10px;
      font-size: 13px;
      line-height: 1
    }

    .history-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line)
    }

    .history-row>div {
      min-width: 0
    }

    .history-row strong,
    .history-row small {
      display: block;
      overflow-wrap: anywhere
    }

    .history-row time {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap
    }

    .inventory-filters {
      margin-bottom: 12px
    }

    @media(max-width:720px) {
      .inventory-row {
        grid-template-columns: minmax(0, 1fr) auto
      }

      .inventory-control-grid {
        justify-content: flex-end
      }
    }

    .page-inventory {
      container-type: inline-size
    }

    .page-inventory .inventory-filters {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .page-inventory .inventory-row {
      grid-template-columns: minmax(0, 1fr) auto
    }

    .page-inventory .inventory-control-grid {
      justify-content: flex-end
    }

    .page-inventory .bulk-tools>* {
      min-width: 0
    }

    @container (max-width:900px) {
      .page-inventory .bulk-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .page-inventory .inventory-control-grid {
        display: flex
      }
    }

    @container (max-width:540px) {
      .page-inventory .inventory-filters {
        grid-template-columns: minmax(0, 1fr)
      }

      .page-inventory .inventory-control-grid {
        display: flex
      }

      .page-inventory .bulk-tools label {
        white-space: normal
      }
    }

    .server-picker-page {
      min-height: 78vh;
      display: grid;
      place-items: center
    }

    .server-picker-panel {
      width: min(760px, 100%);
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(145deg, #1b1d24, #151619);
      box-shadow: 0 24px 80px #0008
    }

    .server-picker-panel h1 {
      margin: 28px 0 4px;
      font-size: 28px
    }

    .server-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin: 24px 0
    }

    .server-card {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      width: 100%;
      padding: 16px;
      text-align: left;
      cursor: default;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #111216;
      color: var(--text);
      transition: transform .16s, border-color .16s, background .16s
    }

    .server-card:hover {
      transform: translateY(-2px);
      border-color: var(--blue);
      background: #1d2030
    }

    .server-card img,
    .server-initials {
      width: 52px;
      height: 52px;
      flex: 0 0 52px;
      border-radius: 16px;
      object-fit: cover;
      background: #292d46
    }

    .server-initials {
      display: grid;
      place-items: center;
      font-size: 21px;
      font-weight: 800;
      color: #cbd0ff
    }

    .server-card > span:nth-child(2) { flex: 1; min-width: 0 }

    .server-card strong {
      display: block;
      font-size: 15px;
      overflow-wrap: anywhere
    }

    .server-card small {
      display: block;
      margin-top: 3px
    }

    .server-card-action,
    .server-status {
      margin-left: auto;
      flex: 0 0 auto
    }

    .server-status {
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700
    }

    .server-status.not_whitelisted {
      color: #ffb4a8;
      border-color: #8b3c3c
    }

    .server-status.access_required {
      color: #ffd98a;
      border-color: #79602b
    }

    .server-empty {
      padding: 22px;
      border: 1px dashed var(--line);
      border-radius: 10px;
      color: var(--muted);
      text-align: center
    }

    @media(max-width:600px) {
      .server-picker-page {
        padding: 14px
      }

      .server-picker-panel {
        padding: 20px
      }

      .server-cards {
        grid-template-columns: 1fr
      }
    }

    .order-card {
      align-items: flex-start;
      gap: 16px
    }

    .order-main {
      flex: 1;
      min-width: 0
    }

    .order-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px
    }

    .order-title>strong {
      font-size: 15px;
      overflow-wrap: anywhere
    }

    .order-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 16px;
      margin: 10px 0;
      color: #c7c9d1;
      font-size: 12px
    }

    .order-meta b {
      color: #f4f5f7
    }

    .order-ref {
      display: block;
      margin: 5px 0;
      color: var(--muted)
    }

    .order-details {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #111216;
      color: #d7d9df;
      overflow-wrap: anywhere
    }

    .order-details p {
      margin: 6px 0;
      white-space: pre-wrap
    }

    .order-rating {
      margin-top: 8px;
      color: #f5cf64
    }

    @media(max-width:600px) {
      .order-card {
        flex-direction: column
      }

      .order-title {
        align-items: flex-start
      }
    }

    .payment-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .payment-card { padding: 20px; border: 1px solid #303647; border-radius: 14px; background: linear-gradient(145deg, #191d27, #14171e); }
    .payment-card h3 { margin: 0; font-size: 17px; }
    .payment-card p { margin: 5px 0 14px; color: #aab4cb; font-size: 13px; line-height: 1.5; }
    .payment-card .field { margin: 14px 0; }
    .payment-card input, .payment-card textarea { min-height: 44px; font-size: 14px; }
    .payment-card textarea { min-height: 88px; }
    .payment-step { display: flex; align-items: flex-start; gap: 11px; }
    .payment-step-number { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 9px; color: #dfe2ff; background: #6978ff2a; font-weight: 800; }
    .payment-override-control { margin: 0 0 18px; min-height: 66px; border-color: #6978ff55; background: linear-gradient(110deg, #6978ff16, #171922); }
    .payment-override-control.is-disabled { opacity: .62; cursor: not-allowed; }
    .payment-override-control small { color: #aab4cb; }
    .payment-override-note { display: block; margin: -7px 0 12px; line-height: 1.45; }
    .payment-override-fields { padding-top: 2px; }
    .payment-save { width: 100%; min-height: 42px; margin-top: 4px; }
    .payment-selection { margin: 10px 0 18px; }
    .payment-selection select { min-height: 44px; font-size: 14px; }
    @media (max-width: 760px) { .payment-override-control { margin-bottom: 14px; } }
    .payment-footer-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; }
    .password-field-wrap { position: relative; width: 100%; }
    .password-field-wrap input { padding-right: 48px; }
    .password-visibility-toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #9da4bb; cursor: pointer; }
    .password-visibility-toggle:hover { color: var(--text); background: #ffffff0d; }
    .password-visibility-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* Shop dashboard responsive layout */
    @media (min-width: 1401px) {
      .products-layout {
        grid-template-columns: minmax(230px, .68fr) minmax(440px, 1.35fr) minmax(320px, 1fr);
        align-items: start;
      }

      .products-layout>.panel,
      .products-layout>.form-card,
      .products-layout>.preview {
        min-width: 0;
      }
    }

    @media (max-width: 1400px) {
      .products-layout {
        grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
      }

      .products-layout>.preview {
        grid-column: 2;
        position: static;
      }
    }

    @media (max-width: 900px) {
      .dashboard {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
      }

      .nav {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      }

      .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .products-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .products-layout>.preview {
        grid-column: auto;
      }

      .welcome-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .welcome-preview-panel {
        position: static;
      }
    }

    @media (max-width: 600px) {
      .app {
        padding: 12px;
      }

      .topbar {
        min-height: 58px;
        height: auto;
        gap: 10px;
      }

      .hero {
        padding: 17px;
      }

      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .stat {
        padding: 11px;
      }

      .panel,
      .form-card {
        padding: 14px;
      }

      .shop-setup-grid,
      .form-card .grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .products-layout>.preview {
        position: static;
      }

      .inventory-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .inventory-control-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
      }

      .inventory-quantity {
        grid-column: 1 / -1;
        width: 100%;
      }

      .inventory-adjust {
        min-width: 0;
        width: 100%;
      }

      .head {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .actions {
        flex-wrap: wrap;
      }

      .actions>.btn {
        flex: 1 1 auto;
      }
    }

    /* Product workspace: give the catalog room, then keep editing and preview together. */
    #app .product-section-heading {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      margin: 16px 0 2px;
      padding: 12px 0 8px;
      border-top: 1px solid #ffffff14;
    }
    #app .product-section-heading.full { grid-column: 1 / -1; }
    #app .product-section-heading > span {
      display: grid;
      place-items: center;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border: 1px solid #7784ff55;
      border-radius: 9px;
      background: #5865f21a;
      color: #b8c0ff;
      font-size: 12px;
      font-weight: 800;
    }
    #app .product-section-heading > div { min-width: 0; flex: 1; }
    #app .product-section-heading strong { display: block; font-size: 15px; }
    #app .product-section-heading small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; }
    #app #productForm .field { font-size: 13px; }
    #app #productForm .field small,
    #app #productForm .note { font-size: 12px; line-height: 1.5; }
    #app #productForm .field input:not([type="checkbox"]):not([type="hidden"]),
    #app #productForm .field select,
    #app #productForm .field textarea { font-size: 14px; }
    #app .post-design-heading { align-items: center; }
    #app .post-design-toggle { flex: 0 1 330px; width: auto; min-width: 235px; margin: 0; padding: 9px 12px; }
    #app .post-design-toggle strong { font-size: 13px; }
    #app .post-design-toggle small { font-size: 12px; }
    #app .post-design-fields { grid-column: 1 / -1; width: 100%; }
    #app .post-design-fields.hidden { display: none !important; }
    #app .embed-appearance-card {
      display: grid;
      gap: 4px 14px;
      margin: 12px 0 18px;
      padding: 0 0 4px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    #app .embed-appearance-grid { align-items: start; }
    #app .embed-color-field input[type="color"] { width: 100%; min-height: 40px; padding: 5px; border-radius: 8px; cursor: pointer; }
    @media (max-width: 700px) {
      #app .post-design-heading { flex-wrap: wrap; }
      #app .post-design-heading > div { flex-basis: calc(100% - 42px); }
      #app .post-design-toggle { flex: 1 1 100%; min-width: 0; margin-left: 39px; }
    }
    #app .quantity-question-settings {
      margin: 12px 0 4px;
      padding: 12px;
      border: 1px solid #ffffff18;
      border-radius: 10px;
      background: #ffffff05;
    }
    #app .quantity-question-settings > small { display: block; margin-left: 25px; }
    #app .quantity-question-settings .field { margin: 10px 0 0 25px; }
    #app .quantity-question-settings .note { grid-column: 1 / -1; }
    #app #products .item { min-width: 0; align-items: flex-start; flex-wrap: wrap; }
    #app #products .item button { min-width: 0; flex: 1 1 150px; }
    #app #products .item button strong,
    #app #products .item button small { display: block; overflow-wrap: anywhere; }
    #app #products .item .pill { align-self: center; }
    #app .product-advanced-options {
      margin-top: 14px;
      padding: 12px;
      border: 1px solid #ffffff18;
      border-radius: 10px;
      background: #ffffff05;
    }
    #app .product-advanced-options > summary { color: #dfe2ff; font-weight: 700; cursor: pointer; }
    #app .product-advanced-options[open] > summary { margin-bottom: 10px; }
    #app .product-form-actions {
      position: sticky;
      bottom: 10px;
      z-index: 4;
      margin: 18px -6px -6px;
      padding: 10px 6px 6px;
      border-top: 1px solid #ffffff18;
      background: linear-gradient(180deg, #15161a00, #15161af5 22%);
    }

    @media (min-width: 1101px) {
      #app .products-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
        grid-template-areas:
          "catalog catalog"
          "editor preview";
        align-items: start;
        gap: 16px;
      }

      #app .products-layout > .panel {
        grid-area: catalog;
        min-width: 0;
      }

      #app .products-layout > .form-card {
        grid-area: editor;
        min-width: 0;
      }

      #app .products-layout > .preview {
        grid-area: preview;
        min-width: 0;
        position: sticky;
        top: 16px;
      }

      #app #products {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      }
    }

    @media (max-width: 1100px) {
      #app .products-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
      }

      #app .products-layout > .panel,
      #app .products-layout > .form-card,
      #app .products-layout > .preview {
        grid-area: auto;
        min-width: 0;
      }

      #app .products-layout > .preview {
        position: static;
      }

      #app #products {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      }
    }

    @media (max-width: 600px) {
      #app #products {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* Login polish: clearer form hierarchy and a little more depth. */
    #login.app {
      max-width: 1160px !important;
      padding: clamp(24px, 5vw, 54px) 24px;
    }

    #login .login-shell {
      width: min(1000px, 100%);
      min-height: 590px;
      border-color: #aab2ff24;
      background: linear-gradient(125deg, #171a24, #111319 58%);
      box-shadow: 0 36px 100px #0009, 0 0 70px #5865f212, inset 0 1px #ffffff12;
    }

    #login .login-story {
      padding: clamp(30px, 4vw, 48px);
      background: radial-gradient(ellipse at 82% 31%, #8790ff42, transparent 43%),
        radial-gradient(ellipse at 12% 100%, #1c8f8033, transparent 48%),
        linear-gradient(145deg, #222a49, #161a27 68%, #102122);
    }

    #loginForm.login-form {
      max-width: none;
      padding: clamp(38px, 4.2vw, 56px) clamp(34px, 4vw, 54px);
      background: radial-gradient(ellipse at 50% 0%, #ffffff06, transparent 60%);
    }

    #loginForm h1 {
      font-size: clamp(30px, 3vw, 38px);
      letter-spacing: -.055em;
    }

    #loginForm>p {
      margin-bottom: 30px;
    }

    #loginForm label {
      margin-bottom: 9px;
      color: #d5d9e7;
      font-size: 12px;
      letter-spacing: .015em;
    }

    #loginForm input {
      min-height: 48px;
      border-color: #3b4154;
      border-radius: 12px;
      background: linear-gradient(180deg, #11141c, #101219);
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    #loginForm input:focus {
      border-color: #7c88ff;
      background: #121521;
      box-shadow: 0 0 0 4px #6875ff20, 0 8px 24px #0002;
    }

    #loginForm .login-submit {
      min-height: 50px;
      border-radius: 12px;
      box-shadow: 0 10px 26px #5865f22b;
    }

    #loginForm .login-divider {
      margin: 23px 0 19px;
      color: #9299ad;
    }

    #loginForm .google-signin+.discord-signin {
      margin-top: 10px;
    }

    #loginForm .login-help {
      margin: 13px auto 0;
      max-width: 310px;
      color: #a6adbf;
    }

    html.light-theme #login .login-shell {
      border-color: #6875ff26;
      background: linear-gradient(125deg, #fff, #f6f7fc 58%);
      box-shadow: 0 30px 80px #35405d20, 0 0 70px #5865f20c;
    }

    html.light-theme #loginForm.login-form {
      background: radial-gradient(ellipse at 50% 0%, #5865f208, transparent 60%);
    }

    html.light-theme #loginForm label {
      color: #353b4d;
    }

    html.light-theme #loginForm input {
      border-color: #d5d9e5;
      background: linear-gradient(180deg, #fff, #fafbfe);
    }

    html.light-theme #loginForm input:focus {
      border-color: #6875ed;
      background: #fff;
      box-shadow: 0 0 0 4px #6875ff18, 0 8px 22px #35405d10;
    }

    @media (max-width: 760px) {
      #login.app { padding: 18px 12px; }
      #login .login-shell { min-height: 0; }
      #loginForm.login-form { padding: 30px 25px 28px; }
    }

/* Modern dashboard polish */
    :root {
      --bg: #0c0e14;
      --panel: #141720;
      --panel2: #1a1e2a;
      --line: #292e3c;
      --muted: #aab2c4;
      --text: #f4f6fb;
      --blue: #6978ff;
      --green: #27c985;
      --red: #fa6475
    }

    body {
      background: radial-gradient(ellipse at 80% -15%, #29305c80, transparent 38%), radial-gradient(ellipse at 0% 60%, #113c3760, transparent 38%), #0c0e14;
      letter-spacing: .005em
    }

    .app {
      max-width: 1560px;
      padding: 26px clamp(14px, 3vw, 40px)
    }

    .topbar,
    .panel,
    .stat,
    .sidebar,
    .form-card,
    .preview {
      background: linear-gradient(145deg, #171a24f2, #12141bf5);
      border-color: #2c3140;
      box-shadow: 0 12px 36px #03050b35
    }

    .topbar {
      height: 72px;
      padding: 12px 20px;
      border-radius: 16px;
      backdrop-filter: blur(16px)
    }

    .brand img {
      border: 1px solid #ffffff24;
      box-shadow: 0 4px 16px #6978ff35
    }

    .hero {
      position: relative;
      overflow: hidden;
      margin: 20px 0;
      padding: 28px 30px;
      border-radius: 18px;
      border-color: #343a50;
      background: linear-gradient(110deg, #171a24 8%, #202748 67%, #143b37);
      box-shadow: 0 18px 48px #06081250
    }

    .hero:after {
      content: "";
      position: absolute;
      width: 250px;
      height: 250px;
      right: 7%;
      top: -170px;
      border-radius: 50%;
      background: #8d9aff35;
      filter: blur(38px);
      pointer-events: none
    }

    .hero h1 {
      font-size: clamp(25px, 3vw, 34px);
      letter-spacing: -.035em
    }

    .hero p {
      margin: 7px 0 0;
      max-width: 720px
    }

    .dashboard {
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 20px
    }

    .sidebar {
      top: 18px;
      padding: 14px;
      border-radius: 16px
    }

    .nav {
      gap: 7px
    }

    .nav button {
      position: relative;
      padding: 12px 13px;
      border-radius: 10px;
      transition: background .18s, color .18s, transform .18s
    }

    .nav button:hover {
      transform: translateX(2px);
      background: #ffffff08
    }

    .nav button.active,
    .nav button.active:hover {
      background: linear-gradient(100deg, #6978ff32, #6978ff0b);
      color: #f7f8ff;
      box-shadow: inset 3px 0 #8490ff
    }

    .stats {
      gap: 12px;
      margin-bottom: 18px
    }

    .stat {
      position: relative;
      overflow: hidden;
      padding: 17px 18px;
      border-radius: 14px;
      transition: transform .18s, border-color .18s
    }

    .stat:hover {
      transform: translateY(-2px);
      border-color: #515a7b
    }

    .stat strong {
      font-size: 25px;
      letter-spacing: -.04em
    }

    .stat small {
      letter-spacing: .1em;
      color: #9da8c2
    }

    .panel {
      padding: 20px;
      border-radius: 16px;
      margin-bottom: 16px
    }

    .head h2 {
      font-size: 18px;
      letter-spacing: -.02em
    }

    .form-card {
      border-radius: 13px;
      padding: 18px
    }

    .item,
    .inventory-row {
      border-color: #2b3040;
      background: linear-gradient(135deg, #171a23, #13151c);
      border-radius: 12px;
      transition: border-color .18s, transform .18s
    }

    .item:hover,
    .inventory-row:hover {
      border-color: #454c65
    }

    .field {
      gap: 7px;
      margin: 12px 0
    }

    label {
      color: #d8ddef;
      font-size: 12px;
      letter-spacing: .025em
    }

    input,
    textarea,
    select {
      background: #10131a;
      border-color: #303647;
      border-radius: 10px;
      transition: border-color .16s, box-shadow .16s, background .16s
    }

    input:hover,
    textarea:hover,
    select:hover {
      border-color: #48516a
    }

    input:focus,
    textarea:focus,
    select:focus {
      outline: 0;
      border-color: #7d89ff;
      box-shadow: 0 0 0 3px #6978ff24;
      background: #11141e
    }

    .btn {
      border-radius: 10px;
      transition: transform .16s, filter .16s, box-shadow .16s
    }

    .btn:hover {
      filter: brightness(1.1);
      transform: translateY(-1px)
    }

    .btn:active {
      transform: translateY(0)
    }

    .btn.primary {
      background: linear-gradient(135deg, #7380ff, #5966ed);
      box-shadow: 0 5px 16px #5865f233
    }

    .btn.success {
      background: linear-gradient(135deg, #208b5c, #176c47)
    }

    .discord-card {
      border-radius: 12px
    }

    .preview {
      border-radius: 16px
    }

    .pill {
      font-weight: 700;
      letter-spacing: .04em
    }

    .toast {
      border: 1px solid #3a4053;
      box-shadow: 0 12px 35px #0008;
      backdrop-filter: blur(12px)
    }

    .server-picker-panel {
      border-radius: 22px;
      border-color: #343a50;
      background: radial-gradient(ellipse at 100% 0%, #343e7a55, transparent 42%), linear-gradient(145deg, #191d29, #11131a);
      box-shadow: 0 28px 90px #0009
    }

    .server-card {
      border-radius: 14px;
      background: #11141c
    }

    .server-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 26px #0005
    }

    .login-form h1,
    #loginForm h1 {
      font-size: 32px;
      letter-spacing: -.04em;
      margin: 24px 0 4px
    }

    @media(max-width:900px) {
      .dashboard {
        grid-template-columns: 1fr
      }

      .sidebar {
        top: auto
      }

      .nav button:hover {
        transform: none
      }
    }

    @media(max-width:600px) {
      .app {
        padding: 12px
      }

      .hero {
        padding: 21px
      }

      .panel {
        padding: 15px
      }

      .topbar {
        border-radius: 13px
      }
    }

    @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition: none !important
      }
    }

    .welcome-layout {
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(280px, .8fr);
      gap: 14px;
      align-items: start
    }

    .welcome-preview-panel {
      position: sticky;
      top: 14px
    }

    .welcome-card {
      overflow: hidden;
      border: 1px solid #30323a;
      border-left: 4px solid #5865f2;
      border-radius: 9px;
      background: #0c0d10
    }

    .welcome-card-head {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 13px;
      color: #dfe1e5;
      font-size: 13px
    }

    .welcome-card-head img {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      object-fit: cover
    }

    .welcome-card-message {
      min-height: 88px;
      padding: 0 14px 14px;
      white-space: pre-wrap;
      overflow-wrap: anywhere
    }

    .welcome-card-thumbnail {
      float: right;
      width: 76px;
      height: 76px;
      margin: 0 12px 8px;
      border-radius: 7px;
      object-fit: cover
    }

    .welcome-card-banner {
      display: block;
      width: 100%;
      max-height: 260px;
      object-fit: cover
    }

    .welcome-file {
      padding: 12px;
      border: 1px dashed var(--line);
      border-radius: 8px
    }

    .welcome-file input {
      padding: 8px;
      border: 0
    }

    .welcome-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    @media(max-width:900px) {
      .welcome-layout {
        grid-template-columns: 1fr
      }

      .welcome-preview-panel {
        position: static
      }
    }

    /* Subtle motion polish: animated atmosphere, clear hover feedback, and reduced-motion support. */
    body {
      background-image: radial-gradient(ellipse at 72% -18%, #292d48 0, transparent 42%), radial-gradient(ellipse at 2% 72%, #142b2a 0, transparent 34%), linear-gradient(160deg, #111214, #111318 55%, #121417);
      background-size: 140% 140%;
      animation: ambient-drift 24s ease-in-out infinite alternate
    }

    body::before {
      content: "";
      position: fixed;
      z-index: -1;
      inset: -25%;
      pointer-events: none;
      background: radial-gradient(ellipse at 50% 50%, #5865f20c, transparent 42%);
      animation: ambient-glow 15s ease-in-out infinite alternate
    }

    .app {
      animation: app-enter .65s cubic-bezier(.2, .75, .25, 1) both
    }

    .topbar,
    .panel,
    .stat,
    .sidebar,
    .form-card,
    .preview,
    .server-picker-panel {
      transition: border-color .22s ease, background-color .22s ease, box-shadow .25s ease, transform .25s ease
    }

    .topbar {
      box-shadow: 0 8px 28px #0002
    }

    .hero {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      box-shadow: 0 14px 40px #0002;
      animation: hero-enter .7s .06s cubic-bezier(.2, .75, .25, 1) both
    }

    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -70% auto -70% -35%;
      width: 30%;
      transform: rotate(22deg);
      background: linear-gradient(90deg, transparent, #ffffff0a, transparent);
      animation: hero-shimmer 9s 1s ease-in-out infinite
    }

    .stat {
      position: relative;
      overflow: hidden;
      animation: card-enter .48s both
    }

    .stat:nth-child(2) {
      animation-delay: .05s
    }

    .stat:nth-child(3) {
      animation-delay: .1s
    }

    .stat:nth-child(4) {
      animation-delay: .15s
    }

    .stat:nth-child(5) {
      animation-delay: .2s
    }

    .stat:hover,
    .panel:hover,
    .form-card:hover,
    .preview:hover {
      border-color: #454b68;
      box-shadow: 0 12px 32px #0002
    }

    .stat strong {
      background: linear-gradient(100deg, #fff 10%, #c6cbff 48%, #fff 85%);
      background-size: 200% auto;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: text-glow 8s linear infinite
    }

    .nav button {
      position: relative;
      overflow: hidden;
      transition: background .2s ease, color .2s ease, transform .2s ease
    }

    .nav button:hover {
      transform: translateX(3px)
    }

    .nav button.active {
      box-shadow: inset 3px 0 #7884ff, 0 5px 16px #5865f21c
    }

    .page.active {
      animation: page-enter .28s ease-out both
    }

    button,
    .server-card,
    .item {
      transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease
    }

    .btn:hover,
    .preview-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 7px 18px #0004;
      filter: brightness(1.08)
    }

    .btn:active,
    .preview-button:active,
    .server-card:active {
      transform: translateY(0) scale(.98)
    }

    .btn.primary {
      box-shadow: 0 5px 18px #5865f232
    }

    .btn.primary:hover {
      box-shadow: 0 8px 24px #5865f255
    }

    .item:hover,
    .inventory-row:hover,
    .extra-card:hover {
      border-color: #454b68;
      transform: translateY(-1px)
    }

    input,
    textarea,
    select {
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease
    }

    input:focus,
    textarea:focus,
    select:focus {
      outline: none;
      border-color: #7782ff;
      box-shadow: 0 0 0 3px #5865f229;
      background-color: #13151b
    }

    .discord-card,
    .welcome-card {
      box-shadow: 0 10px 28px #0003;
      transition: transform .25s ease, box-shadow .25s ease
    }

    .discord-card:hover,
    .welcome-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 34px #0005
    }

    .toast.show {
      animation: toast-pop .24s cubic-bezier(.2, .8, .25, 1) both
    }

    @keyframes ambient-drift {
      0% {
        background-position: 0% 0%, 0% 100%, 0 0
      }

      100% {
        background-position: 100% 10%, 22% 80%, 0 0
      }
    }

    @keyframes ambient-glow {
      from {
        transform: translate3d(-2%, 1%, 0) scale(.96);
        opacity: .5
      }

      to {
        transform: translate3d(2%, -1%, 0) scale(1.08);
        opacity: 1
      }
    }

    @keyframes app-enter {
      from {
        opacity: 0;
        filter: blur(5px)
      }

      to {
        opacity: 1;
        filter: blur(0)
      }
    }

    @keyframes hero-enter {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes hero-shimmer {

      0%,
      65%,
      100% {
        left: -35%
      }

      35% {
        left: 120%
      }
    }

    @keyframes card-enter {
      from {
        opacity: 0;
        transform: translateY(9px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes page-enter {
      from {
        opacity: 0;
        transform: translateY(5px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes text-glow {
      to {
        background-position: 200% center
      }
    }

    @keyframes toast-pop {
      from {
        opacity: 0;
        transform: translate(-50%, 9px) scale(.97)
      }

      to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1)
      }
    }

    @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }
    }

    /* Shop dashboard responsive layout */
    @media (min-width: 1401px) {
      .products-layout {
        grid-template-columns: minmax(230px, .68fr) minmax(440px, 1.35fr) minmax(320px, 1fr);
        align-items: start;
      }

      .products-layout>.panel,
      .products-layout>.form-card,
      .products-layout>.preview {
        min-width: 0;
      }
    }

    @media (max-width: 1400px) {
      .products-layout {
        grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
      }

      .products-layout>.preview {
        grid-column: 2;
        position: static;
      }
    }

    @media (max-width: 900px) {
      .dashboard {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
      }

      .nav {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      }

      .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .products-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .products-layout>.preview {
        grid-column: auto;
      }

      .welcome-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .welcome-preview-panel {
        position: static;
      }
    }

    @media (max-width: 600px) {
      .app {
        padding: 12px;
      }

      .topbar {
        min-height: 58px;
        height: auto;
        gap: 10px;
      }

      .hero {
        padding: 17px;
      }

      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .stat {
        padding: 11px;
      }

      .panel,
      .form-card {
        padding: 14px;
      }

      .shop-setup-grid,
      .form-card .grid,
      .payment-config-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .products-layout>.preview {
        position: static;
      }

      .inventory-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .inventory-control-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
      }

      .inventory-quantity {
        grid-column: 1 / -1;
        width: 100%;
      }

      .inventory-adjust {
        min-width: 0;
        width: 100%;
      }

      .head {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .actions {
        flex-wrap: wrap;
      }

      .actions>.btn {
        flex: 1 1 auto;
      }
    }

/* Branded sign-in screen */
    #login.app {
      max-width: 1080px !important;
      min-height: 100vh;
      padding: 34px 24px;
      display: grid;
      place-items: center;
      position: relative
    }

    #login.app::before {
      content: "";
      position: absolute;
      width: min(680px, 90vw);
      height: min(680px, 90vw);
      left: -16%;
      top: 2%;
      border-radius: 50%;
      background: radial-gradient(circle, #6473ff1b, transparent 68%);
      filter: blur(10px);
      pointer-events: none
    }

    .login-shell {
      width: min(940px, 100%);
      min-height: 560px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      overflow: hidden;
      border: 1px solid #ffffff16;
      border-radius: 28px;
      background: #12141bdc;
      box-shadow: 0 35px 110px #0009, inset 0 1px #ffffff0d;
      backdrop-filter: blur(22px);
      animation: login-enter .7s cubic-bezier(.2, .75, .25, 1) both
    }

    .login-story {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 36px;
      background: radial-gradient(ellipse at 78% 30%, #7984ff35, transparent 42%), linear-gradient(145deg, #202743, #151923 68%, #102122)
    }

    .login-story::before,
    .login-story::after {
      content: "";
      position: absolute;
      border: 1px solid #ffffff12;
      border-radius: 50%;
      pointer-events: none
    }

    .login-story::before {
      width: 330px;
      height: 330px;
      right: -120px;
      top: 120px;
      box-shadow: 0 0 0 34px #ffffff05, 0 0 0 72px #ffffff03
    }

    .login-story::after {
      width: 180px;
      height: 180px;
      right: -45px;
      top: 195px;
      background: radial-gradient(circle at 35% 32%, #a8afff35, transparent 67%);
      animation: login-orbit 12s ease-in-out infinite alternate
    }

    .login-story .brand img {
      width: 48px;
      height: 48px;
      border: 1px solid #ffffff20;
      border-radius: 15px;
      box-shadow: 0 8px 24px #0004
    }

    .login-copy {
      position: relative;
      z-index: 1;
      max-width: 400px;
      margin: auto 0;
      padding: 52px 0
    }

    .login-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border: 1px solid #8d97ff3b;
      border-radius: 999px;
      background: #5965f21b;
      color: #c7ccff;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .11em;
      text-transform: uppercase
    }

    .login-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #7c89ff;
      box-shadow: 0 0 12px #8993ff;
      animation: login-pulse 2s ease-in-out infinite
    }

    .login-copy h2 {
      max-width: 390px;
      margin: 19px 0 11px;
      font-size: clamp(34px, 4.5vw, 53px);
      line-height: 1.04;
      letter-spacing: -.055em
    }

    .login-copy p {
      max-width: 360px;
      margin: 0;
      color: #b5bbce;
      font-size: 15px;
      line-height: 1.7
    }

    .login-points {
      display: grid;
      gap: 12px;
      margin-top: 27px;
      color: #d6daea;
      font-size: 13px
    }

    .login-points span {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .login-points i {
      display: grid;
      width: 23px;
      height: 23px;
      place-items: center;
      border: 1px solid #ffffff16;
      border-radius: 8px;
      background: #ffffff09;
      color: #aeb6ff;
      font-style: normal;
      font-size: 12px
    }

    .login-footnote {
      position: relative;
      z-index: 1;
      color: #8f96ab;
      font-size: 11px;
      letter-spacing: .04em
    }

    #loginForm.login-form {
      align-self: center;
      width: 100%;
      max-width: 440px;
      margin: auto;
      padding: 45px 42px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      animation: login-form-enter .6s .1s both
    }

    #loginForm .brand {
      display: none
    }

    #loginForm h1 {
      margin: 0 0 7px;
      font-size: 31px;
      letter-spacing: -.045em
    }

    #loginForm>p {
      margin: 0 0 28px;
      color: #9da3b5;
      font-size: 13px
    }

    #loginForm .field {
      gap: 8px;
      margin: 17px 0
    }

    #loginForm .login-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 22px 0 15px;
      color: #9097aa;
      font-size: 11px
    }

    #loginForm .login-divider::before,
    #loginForm .login-divider::after {
      content: "";
      height: 1px;
      flex: 1;
      background: #ffffff19
    }

    #loginForm label {
      font-size: 12px;
      color: #d7daea
    }

    #loginForm input {
      height: 48px;
      padding: 0 14px;
      border-color: #35394a;
      border-radius: 11px;
      background: #101219
    }

    #loginForm input:focus {
      border-color: #7d89ff;
      background: #131622;
      box-shadow: 0 0 0 4px #6472ff20
    }

    #loginForm .password-wrap {
      position: relative
    }

    #loginForm .password-wrap input {
      padding-right: 54px
    }

    #togglePassword {
      position: absolute;
      right: 7px;
      top: 7px;
      width: 36px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #9da4bb
    }

    #togglePassword svg {
      width: 18px;
      height: 18px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    #togglePassword:hover {
      background: #ffffff0c;
      color: white
    }

    #loginForm .login-submit {
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin-top: 22px;
      border-radius: 11px;
      font-size: 14px
    }

    #loginForm .login-submit::after {
      content: "→";
      font-size: 18px;
      transition: transform .18s
    }

    #loginForm .login-submit:hover::after {
      transform: translateX(3px)
    }

    #loginError {
      min-height: 18px;
      margin-top: 7px;
      font-size: 12px
    }

    @keyframes login-enter {
      from {
        opacity: 0;
        transform: translateY(12px) scale(.985)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    @keyframes login-form-enter {
      from {
        opacity: 0;
        transform: translateX(10px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    @keyframes login-orbit {
      to {
        transform: translate(-16px, -12px) scale(1.04)
      }
    }

    @keyframes login-pulse {
      50% {
        opacity: .55;
        box-shadow: 0 0 4px #8993ff
      }
    }

    @media(max-width:760px) {
      #login.app {
        padding: 18px 12px
      }

      .login-shell {
        max-width: 490px;
        min-height: 0;
        grid-template-columns: 1fr;
        border-radius: 22px
      }

      .login-story {
        min-height: 260px;
        padding: 24px
      }

      .login-copy {
        padding: 28px 0 18px
      }

      .login-copy h2 {
        font-size: 36px
      }

      .login-points {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        margin-top: 18px
      }

      .login-points span {
        font-size: 11px
      }

      .login-footnote {
        padding-top: 12px
      }

      #loginForm.login-form {
        padding: 30px 25px 28px
      }

      #loginForm h1 {
        font-size: 27px
      }
    }

    @media(max-width:390px) {
      .login-points {
        grid-template-columns: 1fr
      }

      .login-story {
        min-height: 280px;
        padding: 20px
      }

      #loginForm.login-form {
        padding-inline: 20px
      }
    }

    @media(prefers-reduced-motion:reduce) {

      #login *,
      #login *::before,
      #login *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }
    }

    .server-picker-page {
      position: relative;
      isolation: isolate;
      overflow: hidden
    }

    .server-picker-page::before,
    .server-picker-page::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: min(54vw, 620px);
      aspect-ratio: 1;
      border-radius: 50%;
      filter: blur(65px);
      pointer-events: none;
      opacity: .48
    }

    .server-picker-page::before {
      top: -25%;
      left: -18%;
      background: radial-gradient(circle, #6775ff72, transparent 68%);
      animation: picker-glow 13s ease-in-out infinite alternate
    }

    .server-picker-page::after {
      right: -18%;
      bottom: -28%;
      background: radial-gradient(circle, #12a97b48, transparent 68%);
      animation: picker-glow 16s 1s ease-in-out infinite alternate-reverse
    }

    .server-picker-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid #ffffff20;
      background: linear-gradient(145deg, #ffffff12, #ffffff05 46%, #5865f20a), #13151bcc;
      box-shadow: 0 30px 100px #0008, inset 0 1px #ffffff17;
      backdrop-filter: blur(28px) saturate(145%);
      -webkit-backdrop-filter: blur(28px) saturate(145%);
      animation: picker-panel-in .65s cubic-bezier(.2, .75, .25, 1) both
    }

    .server-picker-panel::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, #ffffff70, transparent);
      opacity: .6;
      pointer-events: none
    }

    .server-picker-panel>.brand,
    .server-picker-panel>h1,
    .server-picker-panel>p,
    .server-picker-panel>.server-cards,
    .server-picker-panel>button {
      position: relative;
      z-index: 1
    }

    .server-picker-panel h1 {
      letter-spacing: -.045em
    }

    .server-cards {
      perspective: 900px
    }

    .server-card {
      position: relative;
      overflow: hidden;
      border: 1px solid #ffffff17;
      background: linear-gradient(135deg, #ffffff11, #ffffff05 60%, #5865f20b), #11131acc;
      box-shadow: inset 0 1px #ffffff0a;
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      animation: picker-card-in .5s cubic-bezier(.2, .75, .25, 1) both
    }

    .server-card:nth-child(2) {
      animation-delay: .06s
    }

    .server-card:nth-child(3) {
      animation-delay: .12s
    }

    .server-card:nth-child(4) {
      animation-delay: .18s
    }

    .server-card:nth-child(5) {
      animation-delay: .24s
    }

    .server-card:nth-child(6) {
      animation-delay: .3s
    }

    .server-card::after {
      content: "";
      position: absolute;
      inset: -50% auto -50% -65%;
      width: 35%;
      transform: rotate(22deg);
      background: linear-gradient(90deg, transparent, #ffffff20, transparent);
      transition: left .55s ease;
      pointer-events: none
    }

    .server-card:hover {
      transform: translateY(-4px) rotateX(1deg);
      border-color: #8993ff80;
      background: linear-gradient(135deg, #727fff27, #ffffff0b 60%, #5865f21c), #171a28dd;
      box-shadow: 0 18px 38px #0005, 0 0 0 1px #7884ff20, inset 0 1px #ffffff24
    }

    .server-card:hover::after {
      left: 135%
    }

    .server-card img,
    .server-initials {
      border: 1px solid #ffffff24;
      box-shadow: 0 5px 16px #0005;
      transition: transform .25s ease, box-shadow .25s ease
    }

    .server-card:hover img,
    .server-card:hover .server-initials {
      transform: scale(1.07);
      box-shadow: 0 7px 22px #0007
    }

    @keyframes picker-panel-in {
      from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
        backdrop-filter: blur(0)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        backdrop-filter: blur(28px)
      }
    }

    @keyframes picker-card-in {
      from {
        opacity: 0;
        transform: translateY(10px) scale(.985)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    @keyframes picker-glow {
      from {
        transform: translate3d(-12px, 8px, 0) scale(.94)
      }

      to {
        transform: translate3d(18px, -14px, 0) scale(1.08)
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .server-picker-page::before,
      .server-picker-page::after {
        animation: none
      }

      .server-picker-panel,
      .server-card {
        animation: none
      }
    }

    html.light-theme {
      color-scheme: light;
      --bg: #f3f5fa;
      --panel: #fff;
      --panel2: #f5f6fa;
      --line: #dce1eb;
      --muted: #667085;
      --text: #202536;
      --blue: #5967e9;
      --green: #208b5c;
      --red: #d63d49
    }

    html.light-theme body {
      color: var(--text);
      background: radial-gradient(ellipse at 72% -18%, #dfe4ff 0, transparent 42%), radial-gradient(ellipse at 2% 72%, #e1f3ed 0, transparent 34%), linear-gradient(160deg, #f7f8fc, #f0f2f8 55%, #f7f8fb)
    }

    html.light-theme .topbar,
    html.light-theme .panel,
    html.light-theme .stat,
    html.light-theme .sidebar,
    html.light-theme .form-card,
    html.light-theme .preview {
      border-color: #dce1eb;
      background: #ffffffd9;
      box-shadow: 0 8px 28px #303c5810
    }

    html.light-theme .hero {
      border-color: #d9deed;
      background: linear-gradient(110deg, #fff, #eef1ff 72%, #e9f6f1);
      box-shadow: 0 12px 34px #39487512
    }

    html.light-theme .hero p,
    html.light-theme .note,
    html.light-theme small {
      color: #667085
    }

    html.light-theme .sidebar h3,
    html.light-theme label {
      color: #50596b
    }

    html.light-theme .nav button {
      color: #586174
    }

    html.light-theme .nav button.active,
    html.light-theme .nav button:hover {
      background: #e8ebff;
      color: #29336d
    }

    html.light-theme input,
    html.light-theme textarea,
    html.light-theme select {
      border-color: #d5dbe7;
      background: #fff;
      color: #202536
    }

    html.light-theme input:focus,
    html.light-theme textarea:focus,
    html.light-theme select:focus {
      border-color: #6875ed;
      background: #fff;
      box-shadow: 0 0 0 3px #5865f222
    }

    html.light-theme .btn {
      border-color: #d7dce7;
      background: #f1f3f8;
      color: #293044
    }

    html.light-theme .btn.primary {
      border-color: #5967e9;
      background: linear-gradient(135deg, #7180ff, #5967e9);
      color: #fff
    }

    html.light-theme .btn.success {
      border-color: #208b5c;
      background: #208b5c;
      color: #fff
    }

    html.light-theme .btn.danger {
      color: #bd3440;
      border-color: #e5b9be;
      background: #fff8f8
    }

    html.light-theme .item,
    html.light-theme .inventory-row,
    html.light-theme .extra-card {
      border-color: #e0e4ed;
      background: linear-gradient(135deg, #fff, #f7f8fb);
      color: #202536
    }

    html.light-theme .pill {
      background: #e3f7eb;
      color: #207346
    }

    html.light-theme .pill.low {
      background: #fff3d5;
      color: #8a6210
    }

    html.light-theme .pill.out {
      background: #fde8e9;
      color: #ad3038
    }

    html.light-theme .empty {
      border-color: #d5dbe7;
      color: #667085
    }

    html.light-theme .stock-alert {
      border-color: #ead59b;
      background: #fff8e6;
      color: #795d13
    }

    html.light-theme .server-picker-panel {
      border-color: #ffffffb8;
      background: linear-gradient(145deg, #ffffffc9, #ffffff8a 46%, #eef0ffb8), #f9faffcc;
      box-shadow: 0 28px 90px #51608322, inset 0 1px #fff;
      color: #202536
    }

    html.light-theme .server-card {
      border-color: #ffffff;
      background: linear-gradient(135deg, #ffffffc9, #ffffff8a 60%, #eef0ff9c), #fff9;
      color: #202536;
      box-shadow: 0 8px 24px #53608014, inset 0 1px #fff
    }

    html.light-theme .server-card:hover {
      border-color: #8791f4;
      background: linear-gradient(135deg, #fff, #f2f3ff 65%, #eef4ff);
      box-shadow: 0 16px 34px #53608024
    }

    html.light-theme .login-shell {
      border-color: #ffffffc7;
      background: #ffffffd9;
      box-shadow: 0 35px 110px #35405d24, inset 0 1px #fff
    }

    html.light-theme .login-story {
      background: radial-gradient(ellipse at 78% 30%, #8792ff3d, transparent 42%), linear-gradient(145deg, #e8ebff, #f1f3fa 68%, #e7f4ef)
    }

    html.light-theme .login-copy p,
    html.light-theme .login-footnote {
      color: #626d82
    }

    html.light-theme .login-kicker {
      border-color: #7280ea55;
      background: #5965f219;
      color: #4654be
    }

    html.light-theme #loginForm h1,
    html.light-theme #loginForm label {
      color: #202536
    }

    html.light-theme #loginForm>p {
      color: #667085
    }

    html.light-theme #loginForm input {
      border-color: #d5dbe7;
      background: #fff;
      color: #202536
    }

    html.light-theme #loginForm input::placeholder {
      color: #8a91a0
    }

    html.light-theme #togglePassword {
      color: #677086
    }

    html.light-theme #togglePassword svg {
      width: 18px;
      height: 18px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    #togglePassword:hover {
      background: #e9ebf5;
      color: #30384b
    }

    html.light-theme .toast {
      border-color: #dce1eb;
      background: #fff;
      color: #202536;
      box-shadow: 0 12px 35px #303c5822
    }

    html.light-theme .shop-setup-hint {
      border-color: #dce1eb;
      border-left-color: #5967e9;
      background: linear-gradient(110deg, #eef0ff, #fff)
    }

    html.light-theme .bulk-tools {
      border-color: #e0e4ed;
      background: #f7f8fb
    }

    html.light-theme .login-story .brand small {
      color: #667085
    }

    html.light-theme .login-story .brand {
      color: #202536
    }

    html.light-theme .login-points {
      color: #3f485a
    }

    html.light-theme .login-points i {
      border-color: #ffffffa8;
      background: #ffffff80;
      color: #5967e9
    }

    /* Final visual pass: login, shop workspace, and the per-server welcome editor. */
    #loginForm.login-form {
      position: relative;
      padding: 52px 46px
    }

    #loginForm.login-form::before {
      content: "ACCOUNT ACCESS";
      display: inline-flex;
      margin: 0 0 20px;
      padding: 6px 9px;
      border: 1px solid #7985ff3e;
      border-radius: 999px;
      background: #6571ff14;
      color: #aeb6ff;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .13em
    }

    #loginForm h1 {
      font-size: 35px;
      line-height: 1.12
    }

    #loginForm>p {
      font-size: 14px;
      line-height: 1.6
    }

    #loginForm .field {
      margin: 20px 0
    }

    #loginForm .login-submit {
      margin-top: 24px;
      letter-spacing: .015em
    }

    html.light-theme #loginForm.login-form::before {
      border-color: #6775dc40;
      background: #5965f215;
      color: #4b58bb
    }

    #app .topbar {
      position: sticky;
      top: 10px;
      z-index: 30;
      padding-right: 145px;
      border-color: #ffffff18;
      background: linear-gradient(115deg, #1c202bdc, #151821dc);
      box-shadow: 0 12px 34px #0003;
      backdrop-filter: blur(20px) saturate(135%);
      -webkit-backdrop-filter: blur(20px) saturate(135%)
    }

    #app .topbar .brand img {
      border: 1px solid #ffffff1c;
      box-shadow: 0 5px 16px #0003
    }

    #app .hero {
      min-height: 128px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-color: #ffffff18;
      background: radial-gradient(ellipse at 88% 15%, #7180ff2e, transparent 32%), radial-gradient(ellipse at 5% 110%, #25b8841c, transparent 38%), linear-gradient(112deg, #191d29, #171a22 62%, #18201f);
      box-shadow: 0 18px 50px #0002
    }

    #app .hero h1 {
      font-size: clamp(27px, 3vw, 36px);
      letter-spacing: -.045em
    }

    #app .hero p {
      margin: 6px 0 0;
      color: #afb6ca
    }

    #app .dashboard {
      align-items: start;
      gap: 18px
    }

    #app .sidebar {
      top: 88px;
      border-color: #ffffff18;
      background: linear-gradient(155deg, #1c2029e8, #15171edb);
      box-shadow: 0 14px 40px #0002;
      backdrop-filter: blur(18px)
    }

    #app .sidebar h3 {
      letter-spacing: .11em
    }

    #app .nav {
      gap: 6px
    }

    #app .nav button {
      padding: 12px;
      border: 1px solid transparent;
      border-radius: 10px;
      font-weight: 600
    }

    #app .nav button.active {
      border-color: #838cff26;
      background: linear-gradient(100deg, #5865f230, #5865f20d);
      box-shadow: inset 3px 0 #8590ff, 0 7px 20px #0002
    }

    #app .content>.stats {
      gap: 12px;
      margin-bottom: 18px
    }

    #app .stat {
      min-height: 82px;
      padding: 15px 16px;
      border-color: #ffffff16;
      background: linear-gradient(140deg, #1a1d26, #15171d);
      box-shadow: 0 9px 26px #0002
    }

    #app .stat small {
      letter-spacing: .09em
    }

    #app .page>.panel,
    #app .products-layout>.panel,
    #app .products-layout>.form-card,
    #app .products-layout>.preview {
      border-color: #ffffff15;
      background: linear-gradient(145deg, #1a1c23, #15161b 78%);
      box-shadow: 0 12px 34px #0002
    }

    #app .panel>.head {
      padding-bottom: 10px;
      border-bottom: 1px solid #ffffff0d
    }

    #app .head h2 {
      letter-spacing: -.02em
    }

    #app .field {
      margin: 13px 0
    }

    #app .actions {
      margin-top: 16px
    }

    #app .list {
      gap: 9px
    }

    #app .item,
    #app .inventory-row {
      box-shadow: 0 5px 16px #0001
    }

    html.light-theme #app .topbar {
      border-color: #ffffff;
      background: #ffffffd9;
      box-shadow: 0 10px 32px #35405d17
    }

    html.light-theme #app .hero {
      border-color: #dce1eb;
      background: radial-gradient(ellipse at 88% 15%, #8792ff20, transparent 32%), radial-gradient(ellipse at 5% 110%, #25b88414, transparent 38%), linear-gradient(112deg, #fff, #f1f3fb 62%, #eff7f3);
      box-shadow: 0 15px 38px #35405d12
    }

    html.light-theme #app .hero p {
      color: #667085
    }

    html.light-theme #app .sidebar {
      border-color: #ffffff;
      background: linear-gradient(155deg, #ffffffed, #f6f7fbed);
      box-shadow: 0 12px 32px #35405d12
    }

    html.light-theme #app .nav button.active {
      border-color: #5967e922;
      background: linear-gradient(100deg, #5967e91a, #5967e908);
      box-shadow: inset 3px 0 #5967e9, 0 6px 16px #35405d0c
    }

    html.light-theme #app .stat {
      border-color: #ffffff;
      background: linear-gradient(140deg, #fff, #f6f7fb);
      box-shadow: 0 8px 24px #35405d10
    }

    html.light-theme #app .page>.panel,
    html.light-theme #app .products-layout>.panel,
    html.light-theme #app .products-layout>.form-card,
    html.light-theme #app .products-layout>.preview {
      border-color: #ffffff;
      background: linear-gradient(145deg, #fff, #f8f9fc 78%);
      box-shadow: 0 10px 30px #35405d0e
    }

    html.light-theme #app .panel>.head {
      border-color: #e9ecf2
    }

    #page-welcome .welcome-layout {
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
      gap: 18px
    }

    #page-welcome .welcome-layout>section.panel,
    #page-welcome .welcome-preview-panel {
      border-color: #ffffff18;
      background: linear-gradient(145deg, #1b1e28, #15171d);
      box-shadow: 0 16px 40px #0003
    }

    #page-welcome .welcome-layout>section.panel {
      padding: 21px
    }

    #page-welcome .welcome-layout>section.panel>.head {
      align-items: flex-start
    }

    #page-welcome .welcome-layout>section.panel>.head h2,
    #page-welcome .welcome-preview-panel>.head h2 {
      font-size: 19px
    }

    #welcomeEnabled {
      accent-color: #6876ff
    }

    #page-welcome label.check {
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 10px 0 18px;
      padding: 14px 15px;
      border: 1px solid #6e7bff35;
      border-radius: 12px;
      background: linear-gradient(105deg, #5865f21e, #5865f208);
      color: #e2e5f5;
      font-size: 13px
    }

    #page-welcome label.check input {
      width: 17px;
      height: 17px;
      margin: 0
    }

    #page-welcome .field>label {
      font-size: 12px
    }

    #page-welcome textarea {
      min-height: 112px;
      line-height: 1.65
    }

    #page-welcome .welcome-file {
      min-height: 48px;
      padding: 10px;
      border-style: dashed;
      background: #14161d
    }

    #page-welcome .welcome-actions {
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 2px
    }

    #page-welcome .welcome-actions small {
      max-width: 78%;
      line-height: 1.55
    }

    #page-welcome .welcome-preview-panel {
      top: 90px;
      padding: 18px
    }

    #page-welcome .welcome-preview-panel>.head {
      margin-bottom: 14px
    }

    #page-welcome .welcome-card {
      min-height: 205px;
      border-color: #343845;
      border-left: 4px solid #7784ff;
      border-radius: 13px;
      background: radial-gradient(ellipse at 100% 0%, #5865f214, transparent 38%), #0e1015;
      box-shadow: 0 15px 35px #0004
    }

    #page-welcome .welcome-card-head {
      padding: 16px;
      border-bottom: 1px solid #ffffff0d;
      font-size: 14px
    }

    #page-welcome .welcome-card-head img {
      width: 38px;
      height: 38px;
      border: 1px solid #ffffff1d;
      box-shadow: 0 4px 14px #0005
    }

    #page-welcome .welcome-card-thumbnail {
      width: 84px;
      height: 84px;
      margin: 4px 15px 10px 12px;
      border: 1px solid #ffffff1c;
      box-shadow: 0 8px 22px #0005
    }

    #page-welcome .welcome-card-message {
      min-height: 116px;
      padding: 17px;
      line-height: 1.7;
      color: #e2e4eb
    }

    #page-welcome .welcome-card-banner {
      max-height: 280px;
      border-top: 1px solid #ffffff12;
      object-fit: cover
    }

    html.light-theme #page-welcome .welcome-layout>section.panel,
    html.light-theme #page-welcome .welcome-preview-panel {
      border-color: #ffffff;
      background: linear-gradient(145deg, #fff, #f7f8fc);
      box-shadow: 0 14px 34px #35405d12
    }

    html.light-theme #page-welcome label.check {
      border-color: #5967e92a;
      background: linear-gradient(105deg, #5967e916, #5967e906);
      color: #3d4660
    }

    html.light-theme #page-welcome .welcome-file {
      border-color: #d4dae7;
      background: #f8f9fc
    }

    html.light-theme #page-welcome .welcome-card {
      border-color: #323747;
      border-left-color: #6875ed
    }

    html.light-theme #page-welcome .welcome-card-message {
      color: #e2e4eb
    }

    @media(max-width:850px) {
      #app .topbar {
        position: relative;
        top: auto;
        padding-right: 100px
      }

      #app .dashboard {
        gap: 12px
      }

      #page-welcome .welcome-layout {
        grid-template-columns: 1fr
      }

      #page-welcome .welcome-preview-panel {
        position: static
      }
    }

    @media(max-width:600px) {
      #app .topbar {
        padding-right: 58px
      }

      #app .topbar .user-tools {
        gap: 6px
      }

      #app .user-tools select {
        max-width: 105px
      }

      #app .content>.stats {
        gap: 8px
      }

      #app .stat {
        min-height: 72px;
        padding: 12px
      }

      #page-welcome .welcome-layout>section.panel {
        padding: 15px
      }

      #page-welcome .welcome-actions small {
        max-width: 100%
      }

      #loginForm.login-form {
        padding: 34px 25px
      }
    }

    #loginForm .google-signin {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border-color: #dadce0;
      background: #fff;
      color: #303134;
      box-shadow: 0 8px 22px #0002;
      letter-spacing: 0
    }

    #loginForm .google-signin:hover {
      border-color: #c5c9d3;
      background: #f8f9fc;
      color: #202124;
      filter: none
    }

    #loginForm .google-signin::after {
      content: none
    }

    #loginForm .google-signin svg {
      width: 21px;
      height: 21px;
      flex: 0 0 21px
    }

    .login-help {
      display: block;
      margin-top: 13px;
      text-align: center;
      font-size: 11px;
      line-height: 1.55
    }

    .google-user-chip {
      display: grid;
      gap: 5px;
      margin: 6px 0 21px;
      padding: 12px 14px;
      border: 1px solid #727eff35;
      border-radius: 11px;
      background: linear-gradient(110deg, #5865f21c, #5865f208);
      color: #aeb5c9;
      font-size: 11px
    }

    .google-user-chip strong {
      overflow-wrap: anywhere;
      color: #e8eaff;
      font-size: 13px
    }

    .login-switch-account {
      display: inline-block;
      margin-top: 1px;
      color: #adb5ff;
      font-size: 12px;
      text-decoration: none
    }

    .login-switch-account:hover {
      text-decoration: underline
    }

    .discord-signin {
      border-color: #5865f2;
      background: #5865f2;
      color: #fff;
      box-shadow: 0 8px 22px #5865f233
    }

    .discord-signin:hover {
      border-color: #4752c4;
      background: #4752c4;
      color: #fff;
      filter: none
    }

    .discord-signin svg {
      width: 22px;
      height: 22px;
      flex: 0 0 22px
    }

    html.light-theme #loginForm .google-signin {
      border-color: #d5d9e2;
      background: #fff;
      color: #303134;
      box-shadow: 0 8px 20px #35405d14
    }

    #loginForm a.google-signin,
    #loginForm a.discord-signin {
      height: 52px;
      box-sizing: border-box;
      padding: 0 18px;
      border-radius: 12px;
      text-decoration: none !important;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease
    }

    #loginForm .google-signin+.discord-signin {
      margin-top: 12px
    }

    #loginForm .google-signin::after,
    #loginForm .discord-signin::after {
      content: none !important
    }

    #loginForm .google-signin {
      border: 1px solid #d9dce5;
      background: linear-gradient(180deg, #fff, #f7f8fb);
      color: #262a34;
      box-shadow: 0 5px 16px #0002, inset 0 1px #fff
    }

    #loginForm .google-signin:hover {
      transform: translateY(-1px);
      border-color: #c4c9d6;
      background: #fff;
      color: #202124;
      box-shadow: 0 9px 22px #0003
    }

    #loginForm .discord-signin {
      border: 1px solid #6875ff;
      background: linear-gradient(135deg, #6875ff, #5260e9);
      color: #fff;
      box-shadow: 0 8px 20px #5865f233
    }

    #loginForm .discord-signin:hover {
      transform: translateY(-1px);
      border-color: #8490ff;
      background: linear-gradient(135deg, #7581ff, #5b68f3);
      color: #fff;
      box-shadow: 0 11px 25px #5865f24a
    }

    #loginForm a.google-signin:focus-visible,
    #loginForm a.discord-signin:focus-visible {
      outline: 3px solid #aab2ff;
      outline-offset: 3px
    }

    html.light-theme .discord-signin {
      border-color: #5865f2;
      background: #5865f2;
      color: #fff
    }

    html.light-theme .google-user-chip {
      border-color: #5967e92a;
      background: linear-gradient(110deg, #5967e916, #5967e906);
      color: #667085
    }

    html.light-theme .google-user-chip strong {
      color: #293044
    }

    html.light-theme .login-switch-account {
      color: #4c59c0
    }

    /* Shop dashboard responsive layout */
    @media (min-width: 1401px) {
      .products-layout {
        grid-template-columns: minmax(230px, .68fr) minmax(440px, 1.35fr) minmax(320px, 1fr);
        align-items: start;
      }

      .products-layout>.panel,
      .products-layout>.form-card,
      .products-layout>.preview {
        min-width: 0;
      }
    }

    @media (max-width: 1400px) {
      .products-layout {
        grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
      }

      .products-layout>.preview {
        grid-column: 2;
        position: static;
      }
    }

    @media (max-width: 900px) {
      .dashboard {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
      }

      .nav {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      }

      .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .products-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .products-layout>.preview {
        grid-column: auto;
      }

      .welcome-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .welcome-preview-panel {
        position: static;
      }
    }

    @media (max-width: 600px) {
      .app {
        padding: 12px;
      }

      .topbar {
        min-height: 58px;
        height: auto;
        gap: 10px;
      }

      .hero {
        padding: 17px;
      }

      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .stat {
        padding: 11px;
      }

      .panel,
      .form-card {
        padding: 14px;
      }

      .shop-setup-grid,
      .form-card .grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .products-layout>.preview {
        position: static;
      }

      .inventory-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .inventory-control-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
      }

      .inventory-quantity {
        grid-column: 1 / -1;
        width: 100%;
      }

      .inventory-adjust {
        min-width: 0;
        width: 100%;
      }

      .head {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .actions {
        flex-wrap: wrap;
      }

      .actions>.btn {
        flex: 1 1 auto;
      }
    }
  
    /* Control panel server picker */
    .server-picker-page { width: 100%; max-width: none; min-height: 100vh; margin: 0; display: block; padding: clamp(24px, 5vw, 64px) 24px; overflow: hidden; background: linear-gradient(180deg, #10110fbb, #10110fbd), url("../assets/dashboard-background.jpg") center / cover fixed; }
    .server-picker-page::before, .server-picker-page::after { display: none; }
    .server-picker-panel { width: 100%; margin: 0 auto; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
    .server-picker-panel::before { display: none; }
    .picker-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; padding: 0 0 28px; border-bottom: 1px solid #ffffff20; }
    .picker-heading { min-width: 0; }
    .picker-home { display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px; border: 1px solid #ffffff24; border-radius: 11px; color: #aaa49a; background: #ffffff08; font: 700 11px ui-monospace, Consolas, monospace; letter-spacing: .08em; cursor: pointer; }
    .picker-home:hover { color: #c0b7ff; border-color: #c7932d88; }
    .picker-kicker { margin: 13px 0 15px; color: #a99dff; font: 800 12px ui-monospace, Consolas, monospace; letter-spacing: .12em; }
    .server-picker-panel h1 { margin: 0; color: #f4f0e7; font: 900 clamp(27px, 3vw, 37px) ui-monospace, Consolas, monospace; letter-spacing: .025em; }
    .server-picker-panel h1 span { color: #ded9ff; }
    .picker-heading p { margin: 8px 0 0; color: #c0b9aa; font: 600 13px ui-monospace, Consolas, monospace; }
    .picker-user { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 13px; min-width: 230px; border: 1px solid #ffffff22; border-radius: 13px; background: #ffffff0a; }
    .picker-user img { width: 38px; height: 38px; border: 1px solid #ffffff35; border-radius: 50%; object-fit: cover; background: #29251c; }
    .picker-user div { min-width: 0; flex: 1; }
    .picker-user strong { display: block; max-width: 155px; overflow: hidden; color: #f4f0e7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .picker-user small { display: block; margin-top: 3px; color: #a99dff; font: 800 9px ui-monospace, Consolas, monospace; letter-spacing: .08em; }
    .picker-signout { width: 34px; height: 34px; border: 1px solid #b44c4c70; border-radius: 9px; color: #ec7777; background: #a12d2d18; font-size: 19px; cursor: pointer; }
    .picker-signout:hover { background: #a12d2d36; }
    .shop-limit-reached { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; border: 1px solid #d29a3b55; border-radius: 10px; color: #e6bd72; background: #d29a3b12; font-size: 12px; font-weight: 800; }
    .picker-tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 48px 0 24px; }
    .picker-filters { display: flex; align-items: center; gap: 8px; margin-right: auto; }
    .picker-filters .btn { min-height: 42px; padding: 8px 15px; color: #c8c2b4; background: #111214b8; }
    .picker-filters .btn.active { border-color: #8b7cff; color: #e6e0ff; background: #8b7cff20; box-shadow: inset 3px 0 #a99dff; }
    .picker-search { display: flex; align-items: center; gap: 12px; width: min(448px, 100%); padding: 0 16px; border: 1px solid #ffffff17; border-radius: 12px; background: #151515; color: #a99dff; }
    .picker-search span { font-size: 23px; line-height: 1; }
    .picker-search input { width: 100%; height: 46px; border: 0; outline: 0; color: #f3eee4; background: transparent; font: 500 13px Inter, system-ui, sans-serif; }
    .picker-search input::placeholder { color: #99958d; }
    .picker-access-panel { margin: 0 0 24px; border: 1px solid #ffffff20; background: #121316e8; }
    .picker-access-controls { display: flex; align-items: flex-end; gap: 12px; }
    .picker-access-controls .field { flex: 1; margin: 0; }
    .picker-access-controls .btn { min-height: 42px; white-space: nowrap; }
    .server-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; margin: 0; perspective: none; }
    .server-card { min-height: 150px; align-content: space-between; gap: 16px 13px; padding: 20px; border: 1px dashed #ffffff28; border-radius: 15px; background: #ffffff05; box-shadow: none; backdrop-filter: none; animation: none; }
    .server-card:nth-child(n) { animation-delay: 0s; }
    .server-card::after { display: none; }
    .server-card:hover { transform: translateY(-2px); border-color: #8b7cff88; background: #8b7cff0b; box-shadow: 0 10px 24px #0004; }
    .server-card > span:nth-child(2) { flex: 1; min-width: 90px; }
    .server-card img, .server-initials { width: 48px; height: 48px; flex-basis: 48px; border: 1px solid #ffffff22; border-radius: 13px; box-shadow: none; background: #24221d; }
    .server-card .server-payment-icon { color: #f8e6d0; }
    .server-card .server-payment-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .server-card:hover img, .server-card:hover .server-initials { transform: none; box-shadow: none; }
    .server-card strong { color: #e8e4db; font: 800 13px ui-monospace, Consolas, monospace; text-transform: uppercase; }
    .server-card small { color: #817f7a; font: 10px ui-monospace, Consolas, monospace; letter-spacing: .06em; }
    .server-card .btn { min-height: 30px; margin-left: auto; padding: 5px 12px; border-color: #8b7cff55; color: #b6adff; background: #8b7cff12; font: 800 10px ui-monospace, Consolas, monospace; text-decoration: none; }
    .server-card .btn:hover { border-color: #a99dff; background: #8b7cff22; }
    .server-card .server-status { margin-left: 0; padding: 5px 9px; border-color: #ffffff19; color: #99958d; background: #ffffff07; font: 800 9px ui-monospace, Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
    .server-card .server-status.not_whitelisted { border-color: #d48a4770; color: #e5b36e; }
    .server-card .server-status.access_required { border-color: #9a8a6670; color: #d5c69b; }
    .server-card .server-status.ready { border-color: #00a87855; color: #24d4a0; }
    .server-picker-panel>.picker-header, .server-picker-panel>.picker-tools, .server-picker-panel>.picker-access-panel, .server-picker-panel>.server-cards, .server-picker-panel>#serverSearchEmpty { position: relative; z-index: 1; }
    @media(max-width:850px) { .server-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media(max-width:600px) { .server-picker-page { min-height: 100vh; padding: 24px 16px; } .picker-header { flex-direction: column; align-items: stretch; } .picker-user { align-self: flex-start; margin-top: 0; } .picker-tools { flex-direction: column; align-items: stretch; margin-top: 30px; } .picker-filters { margin-right: 0; } .picker-search { width: 100%; } .picker-access-controls { align-items: stretch; flex-direction: column; } .server-cards { grid-template-columns: 1fr; } .server-card { min-height: 130px; } }

  
    /* Shared amber control-panel styling for the shop workspace */
    body { background-color: #10110f; background-image: linear-gradient(180deg, #10110fc2 0%, #10110f9c 48%, #10110fd1 100%), url("../assets/dashboard-background.jpg"); background-position: center; background-size: cover; background-attachment: fixed; animation: none; }
    body::before { background: radial-gradient(ellipse at 50% 50%, #d0a63208, transparent 45%); animation: none; }
    #app { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 24px clamp(20px, 3vw, 56px) 44px; }
    #app .topbar { min-height: 76px; height: auto; padding: 12px 16px; border-color: #ffffff20; border-radius: 14px; background: #111214d9; box-shadow: 0 10px 36px #0004; backdrop-filter: blur(18px); }
    .dashboard-server-tools { display: flex; align-items: center; gap: 15px; min-width: 0; }
    .dashboard-server-tools .picker-home { padding: 8px 12px; white-space: nowrap; }
    .selected-server { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .selected-server .server-initials, .selected-server-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid #8b7cff35; border-radius: 11px; object-fit: cover; color: #b6adff; background: #8b7cff0b; font-weight: 800; }
    .selected-server strong { display: block; max-width: 240px; overflow: hidden; color: #eee8db; font: 800 12px ui-monospace, Consolas, monospace; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
    .selected-server small { display: block; margin-top: 3px; color: #8f887b; font: 9px ui-monospace, Consolas, monospace; }
    #app .user-tools { gap: 10px; }
    #app .user-tools .note { color: #e8e1d4; font-size: 12px; }
    #app .user-avatar { border-color: #8b7cff50; }
    #app .hero { margin: 22px 0 18px; padding: 24px 28px; border-color: #8b7cff3b; border-radius: 15px; background: linear-gradient(115deg, #171615ed, #211d15d9 70%, #151412e8); box-shadow: 0 14px 36px #0004; }
    #app .hero:after { display: none; }
    .dashboard-kicker { margin-bottom: 8px; color: #a99dff; font: 800 10px ui-monospace, Consolas, monospace; letter-spacing: .12em; }
    #app .hero h1 { color: #f2eee6; font: 900 clamp(23px, 2.5vw, 30px) ui-monospace, Consolas, monospace; letter-spacing: .01em; text-transform: uppercase; }
    #app .hero p { color: #aaa397; font: 11px ui-monospace, Consolas, monospace; }
    #app .dashboard { grid-template-columns: 250px minmax(0, 1fr); gap: 18px; }
    #app .sidebar { top: 18px; padding: 14px 12px; border-color: #ffffff1c; border-radius: 14px; background: #131313e8; box-shadow: 0 15px 36px #0003; }
    #app .sidebar h3 { margin: 7px 12px 14px; color: #ada697; font: 800 10px ui-monospace, Consolas, monospace; letter-spacing: .12em; }
    #app .nav { gap: 4px; }
    #app .nav button { padding: 11px 12px; border: 1px solid transparent; border-radius: 9px; color: #aaa69d; font-size: 12px; }
    #app .nav button:hover { transform: none; border-color: #8b7cff28; background: #8b7cff0b; color: #ded9ff; }
    #app .nav button.active, #app .nav button.active:hover { border-color: #8b7cff48; background: linear-gradient(100deg, #8b7cff20, #8b7cff08); color: #c0b7ff; box-shadow: inset 3px 0 #a99dff, 0 4px 18px #0003; }
    #app .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
    #app .stat { padding: 15px 16px; border-color: #ffffff1b; border-radius: 12px; background: #141414e8; box-shadow: 0 10px 28px #0002; }
    #app .stat:hover { transform: translateY(-1px); border-color: #8b7cff55; }
    #app .stat strong { background: none; color: #f1eee7; -webkit-text-fill-color: currentColor; animation: none; font: 800 22px ui-monospace, Consolas, monospace; }
    #app .stat small { color: #a99dff; font: 800 9px ui-monospace, Consolas, monospace; letter-spacing: .1em; }
    #app .panel, #app .form-card, #app .preview { border-color: #ffffff1c; border-radius: 13px; background: #141414e8; box-shadow: 0 12px 30px #0002; }
    #app .panel { padding: 18px; }
    #app .head h2 { color: #eee9df; font: 800 15px ui-monospace, Consolas, monospace; letter-spacing: .01em; }
    #app .note, #app .panel .note { color: #a39c90; }
    #app .btn.primary { border-color: #8b7cff; color: #fff; background: linear-gradient(135deg, #7d6df2, #5749cb); box-shadow: 0 6px 18px #786bfa30; }
    #app .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 8px 24px #786bfa50; }
    #app .btn.success { background: #14734d; }
    #app .field input, #app .field select, #app .field textarea, #app input, #app select, #app textarea { accent-color: #8b7cff; }
    #app input:focus, #app textarea:focus, #app select:focus { border-color: #8b7cff; box-shadow: 0 0 0 3px #8b7cff22; }
    #app .item, #app .inventory-row { border-color: #ffffff1b; background: #111214; }
    #app .item:hover, #app .inventory-row:hover, #app .extra-card:hover { border-color: #8b7cff55; }
    #app .pill.low { color: #c0b7ff; }
    @media(max-width:900px) { #app .dashboard { grid-template-columns: 1fr; } #app .sidebar { position: static; } #app .nav { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } #app .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media(max-width:600px) { #app { padding: 12px; } #app .topbar { align-items: flex-start; flex-wrap: wrap; gap: 12px; } .dashboard-server-tools { flex-wrap: wrap; gap: 9px; } .selected-server strong { max-width: 125px; } #app .user-tools { width: 100%; flex-wrap: wrap; justify-content: space-between; } #app .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Public homepage inspired by the supplied NOIR landing-page reference. */
    .app-loader { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at center, #211d3e 0%, #0c0d13 48%, #07080b 100%); color: #f4f2ff; transition: opacity .25s ease, visibility .25s ease; }
    .loader-content { display: grid; justify-items: center; width: min(360px, 100%); text-align: center; }
    .loader-logo { width: 76px; height: 76px; margin-bottom: 22px; border: 1px solid #8b7cff44; border-radius: 18px; object-fit: cover; box-shadow: 0 0 42px #786bfa24; }
    .loader-content strong { font: 800 16px ui-monospace, Consolas, monospace; letter-spacing: .2em; }
    .loader-caption { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 10px 0 12px; color: #a9a4bc; font: 11px ui-monospace, Consolas, monospace; letter-spacing: .08em; }
    .loader-caption b { color: #c0b7ff; font-size: 12px; }
    .loader-track { width: 100%; height: 6px; overflow: hidden; border: 1px solid #8b7cff45; border-radius: 99px; background: #171625; }
    .loader-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7d6df2, #c0b7ff); box-shadow: 0 0 18px #8b7cffaa; transition: width .12s linear; }
    .landing-auth-error { width: min(1200px, calc(100% - 48px)); margin: 16px auto 0; color: #ff9b9e; }
    @media(prefers-reduced-motion: reduce) { .loader-track i { transition-duration: .35s; } }
    #login.landing-page { display: block; width: 100%; max-width: none !important; min-height: 100vh; margin: 0; padding: 0 0 72px; box-sizing: border-box; }
    .public-nav { position: sticky; z-index: 20; top: 0; display: flex; width: 100%; min-height: 76px; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 24px; padding: 12px max(24px, calc((100% - 1200px) / 2)); border-bottom: 1px solid #ffffff14; background: #090a0bea; backdrop-filter: blur(16px); }
    .public-brand { display: flex; align-items: center; gap: 11px; color: #f5f2e9; text-decoration: none; font: 800 17px ui-monospace, Consolas, monospace; letter-spacing: .14em; white-space: nowrap; }
    .public-brand img { width: 38px; height: 38px; border: 1px solid #8b7cff40; border-radius: 10px; object-fit: cover; }
    .public-nav-links, .public-nav-actions { display: flex; align-items: center; gap: 22px; }
    .public-nav-links a { padding: 9px 0; color: #b8b5ae; text-decoration: none; font-size: 13px; }
    .public-nav-links a:hover, .public-nav-links a:first-child { color: #b6adff; }
    .public-nav-actions { gap: 10px; }
    .public-nav .btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; box-sizing: border-box; min-height: 39px; padding: 0 17px; border-radius: 9px; line-height: 1; white-space: nowrap; text-decoration: none; font-size: 11px; }
    .public-nav .btn.primary { border-color: #8b7cff; background: linear-gradient(135deg, #7d6df2, #5749cb); color: #fff; box-shadow: 0 6px 18px #786bfa30; }
    .public-nav .btn:not(.primary) { border-color: #ffffff24; background: #111210; color: #eee9de; }
    .public-user-avatar { width: 34px; height: 34px; border: 1px solid #8b7cff55; border-radius: 50%; object-fit: cover; }
    .public-user-name { max-width: 120px; overflow: hidden; color: #d6d1c7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .public-signout { width: 39px; padding: 0 !important; color: #b6adff !important; }
    .landing-content { width: min(1200px, calc(100% - 48px)); max-width: 1200px; margin: 0 auto; }
    .landing-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: center; gap: clamp(36px, 7vw, 100px); min-height: calc(100vh - 76px); padding: 76px 0 68px; }
    .landing-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 23px; color: #a99dff; font: 800 10px ui-monospace, Consolas, monospace; letter-spacing: .16em; }
    .landing-kicker::before { width: 7px; height: 7px; border-radius: 50%; background: #a99dff; box-shadow: 0 0 14px #a99dff99; content: ""; }
    .landing-copy h1 { max-width: 700px; margin: 0; color: #f6f3ed; font-size: clamp(42px, 6vw, 76px); font-weight: 850; letter-spacing: -.065em; line-height: 1.05; }
    .landing-copy h1 span { color: #b6adff; }
    .landing-copy > p { max-width: 650px; margin: 22px 0 27px; color: #c1bdb3; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.8; }
    .landing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .landing-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 23px; border-radius: 11px; text-decoration: none; font-size: 12px; font-weight: 800; }
    .landing-actions .btn.primary { border-color: #8b7cff; background: linear-gradient(135deg, #7d6df2, #5749cb); color: #fff; box-shadow: 0 10px 28px #786bfa35; }
    .landing-actions .btn:not(.primary) { border-color: #ffffff24; background: #111211bb; color: #eee9de; }
    .landing-points { display: flex; flex-wrap: wrap; gap: 18px 23px; margin-top: 31px; color: #c4bfb4; font-size: 12px; }
    .landing-points span::before { margin-right: 8px; color: #a99dff; content: "✦"; }
    .landing-preview { position: relative; padding: 24px; border: 1px solid #ffffff1b; border-radius: 18px; background: #0b0c0be8; box-shadow: 0 28px 80px #0009, 0 0 70px #8b7cff0b; }
    .landing-preview::before { position: absolute; z-index: -1; inset: 12% -8% -12% 12%; border-radius: 50%; background: #786bfa0c; content: ""; filter: blur(30px); }
    .preview-topline { display: flex; align-items: center; gap: 7px; padding-bottom: 16px; border-bottom: 1px solid #ffffff12; color: #8b877e; font: 10px ui-monospace, Consolas, monospace; }
    .preview-dot { width: 9px; height: 9px; border-radius: 50%; background: #db3442; }
    .preview-dot:nth-child(2) { background: #8b7cff; }
    .preview-dot:nth-child(3) { background: #36a66a; }
    .preview-channel { margin-left: 9px; color: #bcb6da; }
    .preview-message { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding-top: 19px; }
    .preview-avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #8b7cff38; border-radius: 50%; color: #b6adff; font-size: 19px; }
    .preview-botline { display: flex; align-items: center; gap: 8px; margin: 3px 0 10px; color: #f3eee3; font-size: 12px; font-weight: 800; }
    .preview-botline span { padding: 3px 6px; border-radius: 4px; background: #8b7cff; color: #17142b; font: 800 8px ui-monospace, Consolas, monospace; }
    .preview-card { padding: 17px; border: 1px solid #ffffff15; border-left: 2px solid #a99dff; border-radius: 9px; background: #10110f; }
    .preview-card small { color: #aaa0ff; font: 800 9px ui-monospace, Consolas, monospace; letter-spacing: .08em; }
    .preview-card h3 { margin: 11px 0 7px; color: #f2eee5; font-size: 17px; }
    .preview-card p { margin: 0 0 13px; color: #aaa69d; font-size: 12px; line-height: 1.6; }
    .preview-order { display: grid; gap: 9px; padding: 13px; border: 1px solid #ffffff12; border-radius: 8px; background: #090a09; color: #c6c0b4; font: 10px ui-monospace, Consolas, monospace; }
    .preview-order b { color: #c0b7ff; font-weight: 600; }
    .preview-status { color: #42c77b !important; }
    .preview-card footer { margin-top: 14px; color: #c8c1b4; font: 10px ui-monospace, Consolas, monospace; }
    .landing-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 25px 0 55px; border-top: 1px solid #ffffff12; }
    .landing-feature { padding: 20px; border: 1px solid #ffffff16; border-radius: 12px; background: #111210dc; }
    .landing-feature strong { display: block; margin-bottom: 8px; color: #c0b7ff; font-size: 13px; }
    .landing-feature p { margin: 0; color: #aaa69d; font-size: 12px; line-height: 1.6; }
    .landing-login { display: flex; justify-content: center; padding: 34px 18px; scroll-margin-top: 95px; }
    #loginForm.login-form { width: min(460px, 100%); padding: 32px; border: 1px solid #ffffff1b; border-radius: 16px; background: #10110fee; box-shadow: 0 20px 60px #0007; }
    #loginForm h1 { color: #f4f0e8; font-size: 28px; }
    #loginForm > p { color: #aaa69d; }
    #loginForm .discord-signin { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; border-radius: 10px; text-decoration: none; }
    #memberLoginStep p { color: #c8c1b4; }
    #memberDashboardBtn { width: 100%; min-height: 46px; border-color: #8b7cff; background: linear-gradient(135deg, #7d6df2, #5749cb); color: #fff; }
    @media(max-width: 1024px) { .public-nav { flex-wrap: wrap; padding: 12px 24px; } .public-nav-links { order: 3; width: 100%; justify-content: center; gap: 25px; } .landing-hero { grid-template-columns: 1fr; gap: 34px; min-height: 0; padding: 64px 0 48px; } .landing-preview { width: min(620px, 100%); justify-self: center; } .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media(max-width: 600px) { .public-nav { gap: 12px; padding: 10px 18px; } .public-brand { gap: 8px; font-size: 13px; letter-spacing: .1em; } .public-brand img { width: 34px; height: 34px; } .public-nav-actions { gap: 6px; } .public-nav .btn { min-height: 36px; padding: 0 10px; font-size: 9px; } .public-user-name { display: none; } .public-nav-links { gap: 25px; } .public-nav-links a { font-size: 11px; } .landing-content { width: calc(100% - 36px); } .landing-hero { padding-top: 47px; } .landing-copy h1 { font-size: clamp(39px, 12vw, 56px); } .landing-preview { padding: 16px; } .landing-features { grid-template-columns: 1fr; } #loginForm.login-form { padding: 25px 20px; } }
    @media(max-width: 390px) { .public-brand { font-size: 11px; letter-spacing: .08em; } .public-nav-actions { flex: 1 1 100%; justify-content: flex-end; } .public-nav-actions .btn { padding: 0 8px; font-size: 8px; } .public-nav-links { justify-content: flex-start; } }

/* Product cards: keep the title and status chips on separate, tidy rows. */
#app #products .item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px 10px;
}

#app #products .item > button {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
}

#app #products .item > button strong,
#app #products .item > button small {
  display: block;
}

#app #products .item > button strong {
  overflow-wrap: anywhere;
}

#app #products .item > button small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

#app #products .item > .pill {
  justify-self: start;
}
/* Stock tracking switch and dependent controls */
#app .stock-tracking-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #171922;
  cursor: pointer;
}
#app .stock-tracking-toggle > span:first-child { display: grid; gap: 4px; }
#app .stock-tracking-toggle strong { font-size: 12px; }
#app .stock-tracking-toggle small { color: var(--muted); font-size: 11px; line-height: 1.4; }
#app .stock-tracking-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#app .stock-tracking-toggle .toggle-track {
  position: relative; flex: 0 0 42px; width: 42px; height: 23px;
  border-radius: 20px; background: #454957; transition: background .18s ease;
}
#app .stock-tracking-toggle .toggle-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .18s ease;
}
#app .stock-tracking-toggle input:checked + .toggle-track { background: #35a66d; }
#app .stock-tracking-toggle input:checked + .toggle-track::after { transform: translateX(19px); }
#app .stock-tracking-toggle input:focus-visible + .toggle-track { outline: 3px solid #7884ff88; outline-offset: 3px; }
#app #stockCountControls.hidden { display: none !important; }
#app .variant .vStockField.hidden { display: none !important; }
html.light-theme #app .stock-tracking-toggle { background: #f7f8fc; }

#app .settings-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
#app #saveMinecraftSettings,
#app #saveSettings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  min-height: 42px;
  padding: 0 19px;
  border: 1px solid #9588ff;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #8171f5, #5b4bd2);
  box-shadow: 0 7px 20px #7667f044, inset 0 1px 0 #ffffff30;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#app #saveMinecraftSettings:hover,
#app #saveSettings:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 26px #7667f066, inset 0 1px 0 #ffffff38;
}
#app #saveMinecraftSettings:active,
#app #saveSettings:active { transform: translateY(0); }
#app #saveMinecraftSettings:focus-visible,
#app #saveSettings:focus-visible { outline: 2px solid #c5beff; outline-offset: 3px; }
@media (max-width: 560px) {
  #app #saveMinecraftSettings,
  #app #saveSettings { min-width: 148px; min-height: 40px; padding-inline: 13px; }
}

/* Keep every top-level view on the same viewport-width foundation. */
html { min-width: 320px; }
body { width: 100%; min-width: 320px; margin: 0; }
#app,
#login.landing-page {
  width: 100%;
  max-width: none !important;
  margin-inline: 0;
  box-sizing: border-box;
}
#app { min-height: 100vh; }