:root {
      --ink: #111;
      --paper: #fff;
      --soft: #f5f5f2;
      --wash: #e9ece8;
      --muted: #70736e;
      --line: #d8dad3;
      --red: #ff3533;
      --panel: #171717;
      --panel-2: #242424;
      --shadow: 0 26px 80px rgba(0,0,0,.24);
      --lifted: 0 34px 110px rgba(0,0,0,.34), 0 2px 10px rgba(0,0,0,.12);
      font-family: "Avenir Next", "Helvetica Neue", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); background: var(--paper); }
    html.dark,
    body.dark {
      --ink: #f5f5f2;
      --paper: #101010;
      --soft: #1b1b1b;
      --wash: #171717;
      --muted: #aaa;
      --line: #343434;
      --panel: #0f0f0f;
      --panel-2: #1d1d1d;
    }

    html.dark body,
    body.dark {
      color: var(--ink);
      background: var(--paper);
    }
    button, input, textarea, select { font: inherit; }
    button { border: 0; cursor: pointer; }
    h1, h2, h3, p { margin: 0; }
    a { color: inherit; }

    .site-top {
      position: sticky;
      top: 0;
      z-index: 30;
      height: 64px;
      min-height: 64px;
      max-height: 64px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      padding: 0 clamp(18px, 4vw, 56px);
      color: #fff;
      background: #050505;
      border-bottom: 1px solid rgba(255,255,255,.12);
      box-shadow: none;
      backdrop-filter: blur(12px);
      overflow: hidden;
      box-sizing: border-box;
    }

    html.dark .site-top,
    body.dark .site-top {
      color: #fff;
      background: #050505;
      border-bottom-color: rgba(255,255,255,.12);
    }

    .logo {
      height: 100%;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      color: inherit;
      background: transparent;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .logo-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--red);
      font-size: 12px;
    }

    .logo-image {
      width: auto;
      max-width: 180px;
      height: 34px;
      object-fit: contain;
      display: none;
    }

    .site-top.has-logo-image .logo-mark,
    .site-top.has-logo-image .logo-text {
      display: none;
    }

    .site-top.has-logo-image .logo-image {
      display: block;
    }

    .nav-links {
      height: 100%;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 24px;
      font-size: var(--nav-font-size, 12px);
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      overflow: hidden;
    }

    html.site-booting .nav-links,
    html.site-booting .site-top > .row-actions {
      visibility: hidden;
    }

    html.site-booting body > main,
    html.site-booting body > .site-footer {
      visibility: hidden;
    }

    html.admin-boot body > .site-top,
    html.admin-boot body > main,
    html.admin-boot body > .site-footer {
      display: none !important;
    }

    .nav-links a {
      position: relative;
      height: 100%;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      white-space: nowrap;
      line-height: 1;
    }

    .nav-links a[hidden],
    main > .section[hidden] {
      display: none !important;
    }

    .nav-links a:hover {
      color: var(--red);
    }

    .nav-links a.active {
      color: var(--red);
    }

    .btn {
      min-height: 42px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
      border-radius: 0;
    }

    .language-select {
      min-width: 122px;
      padding-right: 28px;
      text-transform: none;
      letter-spacing: 0;
      cursor: pointer;
    }

    body.dark .btn {
      color: var(--ink);
      background: #171717;
      border-color: var(--line);
    }

    .btn-primary {
      color: #fff;
      background: var(--red);
      border-color: var(--red);
    }

    body.dark .btn-primary {
      color: #fff;
      background: var(--red);
      border-color: var(--red);
    }

    .btn:disabled,
    .btn[disabled] {
      color: rgba(17,17,17,.42);
      background: #d8d8d8;
      border-color: #d8d8d8;
      cursor: not-allowed;
      opacity: 1;
    }

    body.dark .btn:disabled,
    body.dark .btn[disabled] {
      color: rgba(255,255,255,.46);
      background: #3a3a3a;
      border-color: #3a3a3a;
    }

    .site-top > .row-actions .btn,
    body.dark .site-top > .row-actions .btn {
      color: #fff;
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.2);
    }

    .site-top > .row-actions .btn:hover,
    body.dark .site-top > .row-actions .btn:hover {
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.32);
    }

    .site-footer {
      padding: 28px clamp(18px, 4vw, 56px) 34px;
      color: rgba(255,255,255,.62);
      background: #050505;
      border-top: 1px solid rgba(255,255,255,.12);
      font-size: 12px;
      letter-spacing: .04em;
      text-align: center;
    }

    body.dark .hero-copy,
    body.dark .agent-card,
    body.dark .post-card,
    body.dark .admin-main,
    body.dark .login-box,
    body.dark .drawer {
      background: #202020;
      color: var(--ink);
    }

    body.dark input,
    body.dark textarea,
    body.dark select {
      color: var(--ink);
      background: #101010;
      border-color: var(--line);
    }

    .btn-dark {
      color: #fff;
      background: var(--ink);
      border-color: var(--ink);
    }

    .btn-ghost-dark {
      color: var(--ink);
      background: var(--soft);
      border-color: var(--line);
    }

    body.dark .btn-dark {
      color: #111;
      background: #fff;
      border-color: #fff;
    }

    body.dark .btn-ghost-dark {
      color: #fff;
      background: #2b2b2b;
      border-color: #3a3a3a;
    }

    .icon-toggle {
      width: 42px;
      min-width: 42px;
      padding: 0;
      font-size: 17px;
      line-height: 1;
    }

    .hero {
      min-height: 86vh;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
      background: var(--wash);
    }

    .hero-visual {
      display: grid;
      place-items: center;
      min-height: 520px;
      padding: clamp(22px, 5vw, 72px);
      background: linear-gradient(130deg, rgba(255,255,255,.72), rgba(255,255,255,0) 48%), var(--wash);
      overflow: hidden;
    }

    .stage {
      width: min(980px, 100%);
      aspect-ratio: 1.62 / 1;
      position: relative;
      pointer-events: none;
      filter: drop-shadow(0 42px 26px rgba(0,0,0,.18));
    }

    .hero .stage { transform: rotate(-4deg); }

    .keyboard-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
    }

    .keyboard-background {
      object-fit: contain;
      opacity: 1;
    }

    .hero-copy {
      padding: clamp(30px, 5vw, 66px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 26px;
      background: #fff;
      border-left: 1px solid var(--line);
    }

    .eyebrow {
      color: var(--red);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    h1 {
      font-size: clamp(40px, 5vw, 68px);
      line-height: .98;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .lead {
      color: #40413e;
      font-size: clamp(16px, 1.55vw, 20px);
      line-height: 1.48;
    }

    .hero-actions, .row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .site-top > .row-actions {
      height: 100%;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      gap: 8px;
    }

    .online-count {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      color: rgba(255,255,255,.76);
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .online-count::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #56c7b9;
      box-shadow: 0 0 0 4px rgba(86, 199, 185, .14);
    }

    body.dark .online-count {
      color: rgba(255,255,255,.72);
      background: rgba(36, 36, 36, .58);
      border-color: rgba(255,255,255,.16);
    }

    .mobile-menu-button,
    .mobile-nav-overlay,
    .mobile-nav-drawer {
      display: none;
    }

    .mobile-menu-button {
      min-height: 38px;
      padding: 0 14px;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .mobile-nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 120;
      background: rgba(0,0,0,.48);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s ease;
    }

    .mobile-nav-drawer {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 121;
      width: min(82vw, 340px);
      padding: 20px;
      color: #fff;
      background: rgba(5,5,5,.96);
      border-right: 1px solid rgba(255,255,255,.14);
      box-shadow: 24px 0 80px rgba(0,0,0,.34);
      transform: translateX(-104%);
      transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    .mobile-nav-drawer-inner {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .mobile-nav-head {
      min-height: 44px;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      align-items: center;
    }

    .mobile-nav-brand {
      grid-column: 2;
      justify-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .mobile-nav-brand .logo-mark {
      width: 30px;
      height: 30px;
      font-size: 10px;
    }

    .mobile-nav-brand .logo-image {
      max-width: 148px;
      height: 30px;
    }

    .mobile-nav-drawer.has-logo-image .mobile-nav-brand .logo-mark,
    .mobile-nav-drawer.has-logo-image .mobile-nav-brand .logo-text {
      display: none;
    }

    .mobile-nav-drawer.has-logo-image .mobile-nav-brand .logo-image {
      display: block;
    }

    .mobile-nav-close {
      grid-column: 3;
      justify-self: end;
      width: 38px;
      height: 38px;
      color: #fff;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      font-size: 22px;
      line-height: 1;
    }

    .mobile-nav-links {
      display: grid;
      gap: 8px;
      padding-top: 8px;
    }

    .mobile-nav-links a {
      min-height: 48px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      color: rgba(255,255,255,.82);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .mobile-nav-links a.active {
      color: var(--red);
      border-color: rgba(255,53,51,.44);
      background: rgba(255,53,51,.12);
    }

    .mobile-drawer-footer {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.12);
      display: grid;
      gap: 10px;
    }

    .mobile-drawer-status {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .mobile-online-pill,
    .mobile-drawer-button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: rgba(255,255,255,.86);
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .mobile-online-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #48e372;
      box-shadow: 0 0 0 4px rgba(72,227,114,.14);
    }

    body.mobile-menu-open {
      overflow: hidden;
    }

    body.mobile-menu-open .mobile-nav-overlay {
      opacity: 1;
      pointer-events: auto;
    }

    body.mobile-menu-open .mobile-nav-drawer {
      transform: translateX(0);
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .stat {
      padding: 18px;
      border-right: 1px solid var(--line);
    }

    .stat:last-child { border-right: 0; }
    .stat strong { display: block; font-size: 22px; line-height: 1; }
    .stat span {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .section {
      display: none;
      min-height: calc(100vh - 64px);
      padding: clamp(44px, 7vw, 88px) clamp(18px, 4vw, 56px);
    }

    .section.active {
      display: block;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 22px;
      margin-bottom: 26px;
    }

    #builds > .section-head,
    #builds > .build-grid,
    #community > .section-head,
    #community > .community-grid,
    #agents > .section-head,
    #agents > .agent-page,
    #downloads > .section-head,
    #downloads > .resource-page {
      width: 100%;
      max-width: 1440px;
      margin-left: auto;
      margin-right: auto;
    }

    #community > .section-head,
    #community > .community-grid {
      max-width: 935px;
    }

    h2 {
      font-size: clamp(30px, 3.2vw, 44px);
      line-height: 1.06;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .section .eyebrow {
      margin-bottom: 8px;
      font-size: 14px;
    }

    .small-copy {
      max-width: 560px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

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

    .product-card, .build-card, .agent-card, .post-card {
      display: grid;
      gap: 18px;
      padding: 18px;
      border: 1px solid var(--line);
      background: var(--soft);
      text-align: left;
      color: var(--ink);
      border-radius: 12px;
    }

    .product-card {
      min-height: 380px;
      align-content: space-between;
      border-color: transparent;
      box-shadow: 0 12px 34px rgba(0,0,0,.06);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .product-card:hover {
      transform: translateY(-5px);
      background: #fff;
      box-shadow: 0 24px 58px rgba(0,0,0,.12);
    }

    .game-entry-card {
      min-height: 280px;
      text-decoration: none;
    }

    .game-entry-preview {
      display: grid;
      place-items: center;
      min-height: 180px;
      border: 3px double rgba(120,130,170,.45);
      background:
        linear-gradient(rgba(255,255,255,.04) 50%, rgba(0,0,0,.12) 50%) 0 0 / 100% 4px,
        radial-gradient(circle at 20% 20%, rgba(113,231,255,.18), transparent 26%),
        #11182c;
      color: #ffe66d;
      font-family: "Courier New", monospace;
      font-weight: 900;
      letter-spacing: 1px;
      text-shadow: 3px 3px 0 #000;
    }

    .game-entry-preview span {
      display: inline-block;
      padding: 14px 18px;
      border: 2px solid rgba(255,255,255,.75);
      background: rgba(0,0,0,.26);
    }

    body.dark .product-card:hover {
      background: #2c2c2c;
      box-shadow: 0 24px 58px rgba(0,0,0,.34);
    }

    body.dark .product-card {
      background: #242424;
      border-color: #3a3a3a;
      box-shadow: 0 12px 34px rgba(0,0,0,.28);
    }

    .product-preview, .build-preview {
      aspect-ratio: 1.55 / 1;
      position: relative;
      pointer-events: none;
      filter: drop-shadow(0 18px 16px rgba(0,0,0,.16));
    }

    .home-static-preview-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
    }

    .home-preview-placeholder {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--muted);
      background: rgba(245,245,242,.72);
      border: 1px dashed rgba(24,24,24,.14);
      font-size: 12px;
      letter-spacing: 0;
    }

    body.dark .home-preview-placeholder {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.14);
    }

    .product-preview .keyboard-layer {
      transform: none;
    }

    .build-preview .keyboard-layer {
      transform: none;
    }

    .build-card .build-preview {
      aspect-ratio: 1.85 / 1;
      filter: drop-shadow(0 12px 12px rgba(0,0,0,.12));
    }

    .build-card .card-title {
      padding-right: 44px;
      font-size: 18px;
      line-height: 1.2;
    }

    .build-card .card-meta {
      padding-right: 44px;
    }

    .card-title {
      display: block;
      font-size: 19px;
      font-weight: 500;
      text-transform: uppercase;
    }

    .product-card-title-row {
      display: flex;
      min-width: 0;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .product-card-title-row .card-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-group-buy-summary {
      display: flex;
      min-width: 0;
      max-width: 68%;
      align-items: baseline;
      justify-content: flex-end;
      gap: 7px;
      margin-left: auto;
      overflow: hidden;
      color: #111;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      text-transform: none;
      white-space: nowrap;
    }

    .home-group-buy-summary[hidden] {
      display: none !important;
    }

    .home-group-buy-status {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .home-group-buy-countdown {
      flex: 0 0 auto;
      font-variant-numeric: tabular-nums;
    }

    body.dark .home-group-buy-summary {
      color: #fff;
    }

    .card-meta {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .product-description-clamp {
      display: -webkit-box;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }

    .build-grid, .agent-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .code-search-box {
      display: grid;
      gap: 14px;
      margin-bottom: 22px;
      padding: 18px;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 14px;
    }

    body.dark .code-search-box {
      background: #171717;
      border-color: #343434;
    }

    .code-search-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
    }

    .code-search-head .code-search-row {
      flex: 1;
    }

    .code-result-close {
      width: 30px;
      height: 30px;
      display: none;
      place-items: center;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 999px;
    }

    .code-search-box.has-result .code-result-close {
      display: grid;
    }

    body.dark .code-result-close {
      color: #fff;
      background: #202020;
      border-color: #444;
    }

    .admin-code-search {
      margin-top: 16px;
      margin-bottom: 16px;
    }

    .user-data-dashboard {
      display: grid;
      gap: 16px;
      margin-top: 16px;
      margin-bottom: 18px;
    }

    .user-data-dashboard .admin-code-search {
      margin: 0;
    }

    .user-table-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: 520px;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
    }

    body.dark .user-table-panel {
      background: #171717;
      border-color: #343434;
    }

    .user-table-panel-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }

    body.dark .user-table-panel-head {
      border-color: #343434;
    }

    .user-table-panel-head strong {
      font-size: 14px;
    }

    .user-table-panel-head span {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }

    .user-table-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      background: var(--paper);
    }

    body.dark .user-table-scroll {
      background: #111;
    }

    .user-table-scroll .data-table {
      margin-top: 0;
      min-width: 760px;
    }

    .user-table-scroll .data-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--paper);
    }

    body.dark .user-table-scroll .data-table th {
      background: #111;
    }

    .user-analytics {
      display: grid;
      gap: 12px;
      padding: 16px;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 14px;
    }

    body.dark .user-analytics {
      background: #171717;
      border-color: #343434;
    }

    .user-analytics-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: end;
    }

    .user-analytics-head h4 {
      margin: 0;
      font-size: 16px;
    }

    .user-analytics-updated {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }

    .user-analytics-controls {
      display: flex;
      min-width: min(420px, 100%);
      align-items: end;
      justify-content: flex-end;
      gap: 10px;
    }

    .user-analytics-filter {
      display: grid;
      min-width: min(260px, 100%);
      gap: 5px;
      color: var(--muted);
      font-size: 11px;
    }

    .user-analytics-filter select {
      width: 100%;
      min-height: 36px;
      padding: 7px 34px 7px 10px;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    body.dark .user-analytics-filter select {
      color: #fff;
      background: #111;
      border-color: #343434;
    }

    .user-analytics-cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .user-analytics-card {
      min-width: 0;
      padding: 10px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    body.dark .user-analytics-card {
      background: #111;
      border-color: #292929;
    }

    .user-analytics-card span {
      display: block;
      color: var(--muted);
      font-size: 11px;
    }

    .user-analytics-card strong {
      display: block;
      margin-top: 6px;
      overflow: hidden;
      color: var(--ink);
      font-size: 18px;
      font-weight: 700;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    body.dark .user-analytics-card strong {
      color: #fff;
    }

    .user-analytics-section {
      display: grid;
      gap: 8px;
    }

    .user-analytics-section-title {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .user-analytics-list {
      display: grid;
      gap: 6px;
      max-height: 280px;
      overflow: auto;
      padding-right: 4px;
    }

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

    .user-analytics-category-card {
      min-width: 0;
      padding: 10px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    body.dark .user-analytics-category-card {
      background: #111;
      border-color: #292929;
    }

    .user-analytics-category-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }

    body.dark .user-analytics-category-head {
      border-color: #292929;
    }

    .user-analytics-category-head strong {
      overflow: hidden;
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    body.dark .user-analytics-category-head strong {
      color: #fff;
    }

    .user-analytics-category-head span {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .user-analytics-mini-list {
      display: grid;
      gap: 4px;
      max-height: 180px;
      overflow: auto;
      padding-top: 8px;
      padding-right: 2px;
    }

    .user-analytics-mini-row {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
      min-height: 28px;
      padding: 5px 6px;
      background: rgba(0,0,0,.025);
      border-radius: 7px;
    }

    body.dark .user-analytics-mini-row {
      background: rgba(255,255,255,.045);
    }

    .user-analytics-mini-rank {
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .user-analytics-mini-label {
      overflow: hidden;
      color: var(--ink);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    body.dark .user-analytics-mini-label {
      color: #fff;
    }

    .user-analytics-mini-count {
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .user-analytics-row {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    body.dark .user-analytics-row {
      background: #111;
      border-color: #292929;
    }

    .user-analytics-rank {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .user-analytics-label {
      min-width: 0;
    }

    .user-analytics-label strong,
    .user-analytics-label span {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .user-analytics-label strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
    }

    body.dark .user-analytics-label strong {
      color: #fff;
    }

    .user-analytics-label span {
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
    }

    .user-analytics-count {
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    @media (max-width: 1100px) {
      .user-analytics-cards {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 720px) {
      .user-analytics-cards,
      .user-analytics-category-grid {
        grid-template-columns: 1fr;
      }

      .user-analytics-head,
      .user-analytics-controls {
        align-items: stretch;
        flex-direction: column;
      }

      .user-analytics-controls,
      .user-analytics-filter {
        min-width: 0;
        width: 100%;
      }

      .user-table-panel {
        max-height: 420px;
      }
    }

    .resource-code-search {
      margin: 6px 0 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .resource-code-search h3 {
      margin: 3px 0 0;
      font-size: 18px;
      font-weight: 500;
    }

    .code-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
    }

    .saved-build-result:empty {
      display: none;
    }

    .resource-code-search .saved-build-result {
      position: relative;
      z-index: 2;
    }

    .saved-build-card {
      display: grid;
      gap: 10px;
      padding: 12px;
      color: var(--ink);
      background: var(--paper);
      box-shadow: var(--shadow);
      border-radius: 12px;
    }

    .resource-code-search .saved-build-card {
      margin-top: 2px;
      animation: codeResultPop .26s cubic-bezier(.2,.8,.2,1) both;
      box-shadow: 0 20px 54px rgba(0,0,0,.14);
    }

    body.dark .resource-code-search .saved-build-card {
      box-shadow: 0 22px 58px rgba(0,0,0,.42);
    }

    .resource-code-search .saved-build-option {
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      padding: 7px 6px 8px;
      border-bottom: 1px dashed rgba(0,0,0,.16);
      border-radius: 8px;
    }

    .resource-code-search .saved-build-option-alt {
      background: rgba(0,0,0,.035);
    }

    body.dark .resource-code-search .saved-build-option {
      border-bottom-color: rgba(255,255,255,.16);
    }

    body.dark .resource-code-search .saved-build-option-alt {
      background: rgba(255,255,255,.055);
    }

    .resource-code-search .saved-build-option-meta {
      justify-content: flex-start;
      text-align: left;
    }

    .resource-code-search .saved-build-option-body {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .resource-code-search .saved-build-option-top,
    .resource-code-search .saved-build-option-bottom {
      display: flex;
      min-width: 0;
      align-items: center;
    }

    .resource-code-search .saved-build-option-top {
      justify-content: space-between;
      gap: 10px;
    }

    .resource-code-search .saved-build-option-bottom {
      display: grid;
      grid-template-columns: minmax(58px, auto) minmax(50px, auto) minmax(0, 1fr);
      column-gap: 12px;
      color: var(--muted);
      font-size: 11px;
    }

    .resource-code-search .saved-build-option-name strong {
      text-align: left;
    }

    .resource-code-search .saved-build-compact {
      gap: 8px;
      padding: 10px;
    }

    .resource-code-search .saved-build-line {
      min-width: 0;
    }

    .resource-code-search .saved-build-option-index,
    .resource-code-search .saved-build-option-price,
    .resource-code-search .saved-build-option-weight,
    .resource-code-search .saved-build-option-color {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .resource-code-search .saved-build-option-name,
    .resource-code-search .saved-build-option-name span,
    .resource-code-search .saved-build-option-name strong {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .resource-code-search .saved-build-option-name strong {
      font-size: 12px;
      color: var(--ink);
    }

    .resource-code-search .saved-build-option-color {
      flex: 0 0 auto;
      max-width: 42%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .resource-code-search .saved-build-option-price {
      justify-self: start;
      text-align: left;
      color: var(--ink);
      font-weight: 600;
    }

    .resource-code-search .saved-build-option-weight {
      justify-self: center;
      text-align: center;
    }

    .resource-code-search .saved-build-option-meta {
      min-width: 0;
    }

    .resource-code-search .saved-build-sku {
      width: auto;
      min-width: 0;
      max-width: 100%;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      justify-self: end;
      text-align: right;
      color: var(--muted);
      background: transparent;
      border: 0;
      letter-spacing: .02em;
    }

    .resource-code-search .saved-build-sku:hover {
      color: var(--ink);
      background: transparent;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .resource-code-search .saved-build-sku.copied,
    body.dark .resource-code-search .saved-build-sku.copied {
      color: #1d6df2;
      background: transparent;
      border-color: transparent;
    }

    body.dark .resource-code-search .saved-build-sku {
      color: #aaa;
      background: transparent;
      border-color: transparent;
    }

    body.dark .resource-code-search .saved-build-sku:hover {
      color: #fff;
      background: transparent;
    }

    .code-search-box.searching {
      animation: codeSearchPulse .32s ease both;
    }

    body.dark .saved-build-card {
      color: #fff;
      background: #111;
    }

    .saved-build-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: start;
      border-bottom: 1px solid var(--line);
      padding-bottom: 8px;
    }

    body.dark .saved-build-head {
      border-bottom-color: #343434;
    }

    .saved-code {
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .08em;
    }

    .saved-build-summary {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.65;
    }

    .saved-build-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      font-size: 12px;
    }

    .saved-build-line {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
    }

    body.dark .saved-build-line {
      border-bottom-color: #292929;
    }

    .saved-build-line strong {
      color: var(--ink);
      font-weight: 500;
      text-align: right;
    }

    body.dark .saved-build-line strong {
      color: #fff;
    }

    .saved-build-option {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
    }

    .saved-build-option-name {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .saved-build-option-name strong {
      text-align: left;
    }

    .saved-build-option-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
      align-items: center;
      text-align: right;
    }

    .saved-build-sku {
      min-height: 26px;
      padding: 4px 8px;
      color: var(--ink);
      background: var(--soft);
      border: 1px solid #4a4a4a;
      font: inherit;
      font-size: 11px;
      letter-spacing: .04em;
      cursor: pointer;
      border-radius: 0;
    }

    .saved-build-sku:hover {
      background: #bff7ee;
    }

    .saved-build-sku.copied {
      color: #fff;
      background: #1d6df2;
      border-color: #1d6df2;
    }

    body.dark .saved-build-sku {
      color: #fff;
      background: #202020;
      border-color: #555;
    }

    body.dark .saved-build-sku:hover {
      background: #244f4b;
    }

    body.dark .saved-build-sku.copied {
      color: #fff;
      background: #2f7dff;
      border-color: #2f7dff;
    }

    @keyframes codeResultPop {
      from { opacity: 0; transform: translateY(10px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes codeSearchPulse {
      0% { transform: scale(1); }
      45% { transform: scale(1.018); }
      100% { transform: scale(1); }
    }

    .community-grid {
      width: 100%;
      max-width: 935px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .showcase-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }

    .sort-group {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      background: var(--soft);
      border-radius: 999px;
      box-shadow: inset 0 0 0 1px var(--line);
      overflow-x: auto;
    }

    .sort-btn {
      min-height: 34px;
      padding: 0 12px;
      color: var(--muted);
      background: transparent;
      border: 0;
      border-radius: 999px;
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .sort-btn.active {
      color: #fff;
      background: var(--ink);
      box-shadow: 0 8px 18px rgba(0,0,0,.12);
    }

    body.dark .sort-btn.active {
      color: #111;
      background: #fff;
    }

    .build-card {
      position: relative;
      gap: 10px;
      padding: 14px;
      align-content: start;
      background: transparent;
      border-color: transparent;
      box-shadow: 0 10px 30px rgba(0,0,0,.06);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .build-card:hover,
    .post-card:hover {
      transform: translateY(-6px);
      background: rgba(255,255,255,.72);
      box-shadow: 0 22px 58px rgba(0,0,0,.14);
    }

    body.dark .build-card:hover,
    body.dark .post-card:hover {
      background: rgba(255,255,255,.055);
      box-shadow: 0 22px 58px rgba(0,0,0,.38);
    }

    body.dark .build-card {
      background: #242424;
      border-color: #3a3a3a;
      box-shadow: 0 10px 30px rgba(0,0,0,.24);
    }

    body.dark .build-card:hover {
      background: #2c2c2c;
      box-shadow: 0 18px 46px rgba(0,0,0,.34);
    }

    .build-card-main {
      display: grid;
      gap: 10px;
      width: 100%;
      color: inherit;
      background: transparent;
      border: 0;
      padding: 0;
      text-align: left;
    }

    .build-card-main:focus {
      outline: 0;
    }

    .build-card-main:focus-visible {
      outline: 1px solid rgba(17,17,17,.2);
      outline-offset: 4px;
    }

    .build-card-foot {
      position: absolute;
      right: 12px;
      bottom: 12px;
    }

    .build-vote {
      width: 34px;
      min-width: 34px;
      display: grid;
      gap: 2px;
      place-items: center;
      padding: 0;
      color: var(--ink);
      background: transparent;
      border: 0;
      line-height: 1;
    }

    .build-vote.voted {
      color: var(--ink);
      background: transparent;
    }

    .build-vote svg {
      width: 24px;
      height: 24px;
    }

    .build-vote-count {
      color: var(--ink);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
    }

    body.dark .build-vote {
      color: #fff;
      background: transparent;
    }

    body.dark .build-vote.voted {
      color: #fff;
      background: transparent;
    }

    .agent-card {
      grid-template-columns: 70px 1fr;
      align-items: center;
      background: #fff;
    }

    .agent-page {
      display: grid;
      grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .agent-feature {
      display: grid;
      gap: 18px;
      padding: 22px;
      background: var(--soft);
      box-shadow: 0 18px 48px rgba(0,0,0,.08);
      border-radius: 14px;
    }

    .agent-feature-top {
      display: grid;
      grid-template-columns: 128px 1fr;
      gap: 18px;
      align-items: center;
    }

    .agent-feature .qr-box {
      border: 0;
      box-shadow: 0 14px 34px rgba(0,0,0,.08);
    }

    .agent-directory {
      display: grid;
      gap: 14px;
    }

    .agent-directory .agent-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-logo {
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      background: var(--ink);
      color: #fff;
      font-weight: 500;
      overflow: hidden;
      border-radius: 10px;
    }

    .agent-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .resource-page {
      display: grid;
      grid-template-columns: minmax(360px, 0.34fr) minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .resource-filters {
      position: sticky;
      top: 88px;
      display: grid;
      gap: 14px;
      padding: 18px;
      background: var(--soft);
      border-radius: 14px;
      box-shadow: 0 16px 42px rgba(0,0,0,.08);
    }

    body.dark .resource-filters {
      background: #242424;
      box-shadow: 0 18px 48px rgba(0,0,0,.36);
    }

    body.dark .resource-filters input,
    body.dark .resource-filters select {
      background: #181818;
      border-color: #4a4a4a;
    }

    .resource-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .resource-card {
      min-height: 172px;
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 16px;
      padding: 18px;
      color: var(--ink);
      text-decoration: none;
      background: var(--paper);
      border: 1px solid transparent;
      border-radius: 14px;
      box-shadow: 0 16px 42px rgba(0,0,0,.08);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .resource-card:hover {
      transform: translateY(-5px);
      background: #fff;
      box-shadow: 0 24px 58px rgba(0,0,0,.14);
    }

    body.dark .resource-card {
      background: #202020;
      box-shadow: 0 18px 48px rgba(0,0,0,.34);
    }

    body.dark .resource-card:hover {
      background: #2a2a2a;
      box-shadow: 0 26px 64px rgba(0,0,0,.44);
    }

    .updates-page {
      display: grid;
      gap: 16px;
    }

    .updates-toolbar {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 180px 180px;
      gap: 10px;
      padding: 14px;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 14px;
    }

    body.dark .updates-toolbar {
      background: #202020;
      border-color: #343434;
    }

    .shimo-embed {
      overflow: hidden;
      background: rgba(255,255,255,.68);
      border: 1px solid rgba(20,20,20,.12);
      border-radius: 18px;
      box-shadow: 0 18px 52px rgba(0,0,0,.12);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .shimo-embed-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(20,20,20,.1);
    }

    .shimo-embed-title {
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .shimo-embed-link {
      color: var(--muted);
      font-size: 13px;
      text-decoration: none;
    }

    .shimo-embed-link:hover {
      color: var(--accent);
    }

    .shimo-embed-frame {
      display: block;
      width: 100%;
      min-height: 360px;
      border: 0;
      background: #fff;
    }

    body.dark .shimo-embed {
      background: rgba(28,28,28,.72);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 20px 58px rgba(0,0,0,.34);
    }

    body.dark .shimo-embed-head {
      border-bottom-color: rgba(255,255,255,.12);
    }

    .updates-grid {
      display: grid;
      gap: 10px;
    }

    .update-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 150px 120px;
      gap: 18px;
      align-items: start;
      padding: 18px;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 12px 36px rgba(0,0,0,.06);
    }

    body.dark .update-card {
      background: #202020;
      border-color: #343434;
      box-shadow: 0 18px 48px rgba(0,0,0,.3);
    }

    .update-title {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .update-summary {
      margin: 0 0 10px;
      color: var(--muted);
      line-height: 1.65;
    }

    .update-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .update-tag,
    .update-pill {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.72);
      font-size: 12px;
    }

    body.dark .update-tag,
    body.dark .update-pill {
      background: #171717;
      border-color: #3a3a3a;
    }

    .update-meta-stack {
      display: grid;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .update-empty {
      padding: 32px;
      color: var(--muted);
      text-align: center;
      background: var(--soft);
      border: 1px dashed var(--line);
      border-radius: 14px;
    }

    .resource-icon {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--ink);
      border-radius: 12px;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    body.dark .resource-icon {
      color: #111;
      background: #fff;
    }

    .resource-body {
      min-width: 0;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .resource-title {
      font-size: 17px;
      font-weight: 500;
      line-height: 1.22;
      text-transform: uppercase;
    }

    .resource-meta,
    .resource-note {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .resource-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 2px;
    }

    .resource-tag,
    .resource-download {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 9px;
      color: var(--muted);
      background: var(--soft);
      border-radius: 999px;
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .resource-download {
      width: max-content;
      color: #fff;
      background: var(--red);
    }

    body.dark .resource-tag {
      color: #d8d8d2;
      background: #303030;
    }

    body.dark .resource-meta,
    body.dark .resource-note {
      color: #c1c1bb;
    }

    .resource-empty {
      min-height: 220px;
      display: grid;
      place-items: center;
      color: var(--muted);
      background: var(--soft);
      border-radius: 14px;
    }

    body.dark .resource-empty {
      background: #242424;
    }

    .post-card {
      position: relative;
      display: block;
      width: 100%;
      height: 468px;
      margin: 0;
      padding: 0;
      overflow: visible;
      background: transparent;
      border: 0;
      box-shadow: none;
      perspective: 1200px;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .post-card:hover {
      background: transparent;
      box-shadow: none;
    }

    body.dark .post-card:hover {
      background: transparent;
      box-shadow: none;
    }

    .post-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform .48s cubic-bezier(.2, .7, .2, 1);
    }

    .post-card.flipped .post-card-inner {
      transform: rotateY(180deg);
    }

    .post-face {
      position: absolute;
      inset: 0;
      display: grid;
      overflow: hidden;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 18px 48px rgba(0,0,0,.1);
      backface-visibility: hidden;
    }

    .post-card:hover .post-face {
      box-shadow: 0 22px 58px rgba(0,0,0,.14);
    }

    body.dark .post-face {
      background: #151515;
    }

    body.dark .post-card:hover .post-face {
      box-shadow: 0 22px 58px rgba(0,0,0,.38);
    }

    .post-front {
      grid-template-rows: auto 1fr;
    }

    .post-back {
      grid-template-rows: minmax(0, 1fr);
      padding: 16px;
      color: #fff;
      background: rgba(0,0,0,.82);
      transform: rotateY(180deg);
      backdrop-filter: blur(16px) saturate(1.08);
    }

    .post-media {
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      background: var(--soft);
      overflow: hidden;
    }

    .post-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .post-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px;
    }

    .post-user {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      font-weight: 500;
      text-transform: uppercase;
    }

    .post-caption {
      color: var(--ink);
      font-size: 14px;
      line-height: 1.5;
      display: -webkit-box;
      min-height: 42px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .post-stats {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
    }

    .post-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .like-btn {
      min-height: 34px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: transparent;
      border: 0;
      color: var(--ink);
      font-weight: 500;
      text-transform: uppercase;
    }

    .icon-action {
      width: 34px;
      height: 34px;
      min-height: 34px;
      color: var(--ink);
      border-radius: 999px;
      transition: color .18s ease, background .18s ease, transform .18s ease;
    }

    .icon-action:hover,
    .icon-action.active {
      color: var(--red);
      background: rgba(255,53,51,.08);
      transform: translateY(-1px);
    }

    .icon-action svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .action-count {
      color: var(--muted);
      font-size: 12px;
      line-height: 34px;
    }

    .comment-panel {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto auto auto;
      gap: 12px;
      overflow: hidden;
      padding: 0;
      color: #fff;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      transform: none;
      backdrop-filter: none;
    }

    .comment-panel.open {
      display: grid;
    }

    .comment-panel-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      line-height: 1;
      text-transform: uppercase;
    }

    .comment-back {
      min-height: 30px;
      padding: 0 10px;
      color: #fff;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .comment-back:hover {
      color: #111;
      background: #fff;
      border-color: #fff;
    }

    .comment-panel-list {
      display: grid;
      align-content: start;
      gap: 14px;
      min-height: 0;
      overflow: auto;
      padding: 2px 8px 2px 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.9) rgba(255,255,255,.12);
      scrollbar-gutter: stable;
    }

    .comment-panel-list::-webkit-scrollbar,
    .mention-menu::-webkit-scrollbar {
      width: 5px;
    }

    .comment-panel-list::-webkit-scrollbar-track,
    .mention-menu::-webkit-scrollbar-track {
      background: rgba(255,255,255,.12);
      border-radius: 999px;
    }

    .comment-panel-list::-webkit-scrollbar-thumb,
    .mention-menu::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.52));
      border-radius: 999px;
      box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    }

    .comment-thread {
      display: grid;
      gap: 7px;
    }

    .comment-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      color: rgba(255,255,255,.88);
      font-size: 13px;
      line-height: 1.48;
      text-shadow: 0 1px 8px rgba(0,0,0,.25);
    }

    .comment-row strong {
      color: #fff;
      font-weight: 500;
      white-space: nowrap;
    }

    .comment-row .mention {
      color: #fff;
      font-weight: 500;
    }

    .reply-list {
      display: grid;
      gap: 7px;
      margin-left: 18px;
      padding-left: 10px;
      border-left: 1px solid rgba(255,255,255,.18);
    }

    .reply-btn,
    .reply-clear,
    .comment-delete {
      min-height: auto;
      padding: 0;
      color: rgba(255,255,255,.72);
      background: transparent;
      border: 0;
      font-size: 11px;
      text-transform: uppercase;
    }

    .reply-btn:hover,
    .reply-clear:hover,
    .comment-delete:hover {
      color: #fff;
    }

    .comment-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .comment-empty {
      color: rgba(255,255,255,.78);
      font-size: 12px;
    }

    .replying-banner {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      min-height: 20px;
      color: rgba(255,255,255,.82);
      font-size: 11px;
    }

    .replying-banner.empty {
      display: none;
    }

    .comment-form {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding-top: 2px;
    }

    .comment-panel .comment-form input {
      color: #fff;
      background: rgba(255,255,255,.16);
      border-color: rgba(255,255,255,.2);
    }

    .comment-panel .comment-form input::placeholder {
      color: rgba(255,255,255,.7);
    }

    .comment-panel .comment-form button {
      color: #fff;
      background: rgba(255,255,255,.16);
      border-color: rgba(255,255,255,.22);
    }

    .mention-menu {
      display: none;
      gap: 4px;
      max-height: 112px;
      overflow: auto;
      padding: 6px;
      background: rgba(0,0,0,.34);
      border-radius: 12px;
      backdrop-filter: blur(12px);
    }

    .mention-menu.open {
      display: grid;
    }

    .mention-option {
      min-height: 28px;
      justify-content: flex-start;
      padding: 0 8px;
      color: #fff;
      background: transparent;
      border: 0;
      border-radius: 9px;
      font-size: 12px;
    }

    .mention-option:hover {
      background: rgba(255,255,255,.14);
    }

    .comment-form input {
      min-height: 34px;
      padding: 7px 9px;
      font-size: 12px;
      border-radius: 999px;
    }

    .comment-form button {
      min-height: 34px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      justify-content: center;
      font-size: 11px;
    }

    .lab-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(0,0,0,.72);
    }

    .lab-modal.open { display: grid; }

    .lab-modal.open .lab-shell {
      animation: labIn .26s ease both;
    }

    body.embed-lab-mode {
      background: transparent;
    }

    body.embed-lab-mode .site-top,
    body.embed-lab-mode .site-header,
    body.embed-lab-mode main,
    body.embed-lab-mode .site-footer {
      display: none;
    }

    body.embed-lab-mode .lab-modal {
      padding: 0;
      background: transparent;
    }

    body.embed-render-only-mode {
      --embed-render-aspect: 16 / 9;
      --embed-render-max-width: 100vw;
      --embed-render-max-height: 100vh;
    }

    body.embed-lab-mode .lab-modal.open .lab-shell {
      animation: none;
    }

    body.embed-lab-mode .lab-shell {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
      box-shadow: none;
    }

    body.embed-lab-mode #closeLab {
      display: none;
    }

    body.embed-render-only-mode .lab-shell {
      width: min(var(--embed-render-max-width), calc(100vh * 16 / 9));
      height: min(var(--embed-render-max-height), calc(100vw * 9 / 16));
      max-width: 100vw;
      max-height: 100vh;
      grid-template-rows: minmax(0, 1fr);
      margin: auto;
      border-radius: 0;
    }

    body.embed-render-only-mode .lab-top,
    body.embed-render-only-mode .steps-panel,
    body.embed-render-only-mode .keycap-preview-heading,
    body.embed-render-only-mode .lab-code,
    body.embed-render-only-mode .lab-title,
    body.embed-render-only-mode .group-buy-summary,
    body.embed-render-only-mode #purchaseToggle,
    body.embed-render-only-mode .step-tabs,
    body.embed-render-only-mode .lab-actions,
    body.embed-render-only-mode #closeLab {
      display: none !important;
    }

    body.embed-render-only-mode .lab-body {
      height: auto;
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
    }

    body.embed-render-only-mode .lab-preview {
      grid-column: 1 / -1;
      width: 100%;
      height: 100%;
      max-width: none;
      aspect-ratio: var(--embed-render-aspect);
      justify-self: stretch;
    }

    body.embed-render-only-mode .lab-footer-bar {
      position: absolute;
      left: 50%;
      bottom: max(14px, calc(100% - var(--embed-stage-height, 100%) - 18px));
      z-index: 12;
      display: flex;
      width: auto;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      transform: translateX(-50%);
    }

    body.embed-render-only-mode .lab-footer-bar .lab-3d-toolbar {
      gap: 8px;
      padding: 0;
      pointer-events: auto;
    }

    @media (max-aspect-ratio: 4 / 5) {
      body.embed-render-only-mode .lab-shell {
        width: 100vw;
        height: 100vh;
      }
    }

    .lab-shell {
      position: relative;
      width: var(--lab-shell-width, min(1840px, 96vw));
      height: calc(var(--lab-preview-height, min(920px, 90vh)) + 56px);
      display: grid;
      grid-template-rows: 56px minmax(0, 1fr);
      color: var(--ink);
      background: var(--paper);
      box-shadow: var(--lifted);
      border-radius: 16px;
      overflow: hidden;
    }

    body.dark .lab-shell {
      color: #fff;
      background: var(--panel);
    }

    .lab-top {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
      align-items: center;
      gap: 14px;
      padding: 0 16px;
      border-bottom: 1px solid var(--line);
    }

    .keycap-system-title {
      display: none;
      color: var(--ink);
      font-size: 22px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.1;
      white-space: nowrap;
    }

    .lab-title {
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .lab-code {
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      overflow: hidden;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .group-buy-summary {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 8px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #111;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }

    .group-buy-summary[hidden] {
      display: none !important;
    }

    .group-buy-status {
      font-weight: 700;
    }

    .group-buy-countdown {
      font-variant-numeric: tabular-nums;
    }

    .group-buy-summary.ended {
      color: #111;
    }

    body.dark .group-buy-summary {
      border: 0;
      background: transparent;
      color: #111;
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--soft);
      border: 1px solid var(--line);
      font-size: 20px;
      line-height: 1;
      border-radius: 0;
    }

    .icon-btn:hover {
      color: var(--paper);
      background: var(--ink);
      border-color: var(--ink);
    }

    .lab-body {
      height: var(--lab-preview-height, auto);
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--lab-side-width, 360px);
    }

    .lab-footer-bar {
      display: none;
      min-height: 56px;
      background: var(--paper);
      border-top: 1px solid var(--line);
      align-items: center;
      justify-content: center;
    }

    .lab-preview {
      position: relative;
      min-height: 0;
      display: grid;
      grid-template-rows: 1fr;
      background: #fff;
      overflow: hidden;
    }

    body.dark .lab-preview {
      background: #fff;
    }

    .lab-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      display: none;
    }

    .lab-backdrop img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .lab-stage-wrap {
      min-height: 0;
      display: grid;
      place-items: center;
      padding: 0;
      position: relative;
      z-index: 1;
    }

    #lab.keycap-preview-mode .lab-stage-wrap {
      width: 100%;
      height: 100%;
    }

    .lab-stage {
      width: 100%;
      height: 100%;
      aspect-ratio: var(--lab-stage-ratio, 16 / 9);
      position: relative;
      pointer-events: none;
      filter: drop-shadow(0 34px 22px rgba(0,0,0,.22));
    }

    .lab-stage.image-loading::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 98;
      background: rgba(255,255,255,.58);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      pointer-events: none;
    }

    .lab-stage.image-loading::after {
      content: attr(data-loading-text);
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 99;
      min-width: 156px;
      padding: 14px 18px;
      color: #111;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(24,24,24,.14);
      box-shadow: 0 18px 44px rgba(0,0,0,.14);
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      transform: translate(-50%, -50%);
      animation: imageLoadingPulse 1.2s ease-in-out infinite;
      pointer-events: none;
    }

    body.dark .lab-stage.image-loading::before {
      background: rgba(20,20,20,.46);
    }

    body.dark .lab-stage.image-loading::after {
      color: #f4f4f2;
      background: rgba(34,34,34,.88);
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 18px 44px rgba(0,0,0,.34);
    }

    @keyframes imageLoadingPulse {
      0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
    }

    .lab-model-stage {
      position: absolute;
      inset: 0;
      display: none;
      background: #f7f7f4;
    }

    .lab-model-stage.active {
      display: block;
    }

    .lab-model-stage canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .lab-snapshot-btn {
      position: absolute;
      left: 16px;
      right: auto;
      bottom: 16px;
      z-index: 18;
      width: 40px;
      height: 40px;
      display: none;
      place-items: center;
      color: #111;
      background: rgba(255, 255, 255, .82);
      border: 1px solid rgba(18, 18, 18, .14);
      border-radius: 999px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .lab-snapshot-btn.active {
      display: grid;
    }

    .lab-snapshot-btn svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .lab-snapshot-btn:hover {
      background: #111;
      border-color: #111;
      color: #fff;
    }

    .model-loading-tip {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 5;
      display: none;
      min-width: 250px;
      padding: 16px 18px 14px;
      color: #111;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(24,24,24,.14);
      box-shadow: 0 16px 42px rgba(0,0,0,.14);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.5;
      text-align: center;
      transform: translate(-50%, -50%);
      backdrop-filter: blur(10px);
      pointer-events: none;
    }

    .model-loading-text {
      display: block;
    }

    .lab-stage-wrap.model-loading .model-loading-tip {
      display: block;
    }

    .lab-3d-toolbar {
      position: absolute;
      left: 14px;
      top: 14px;
      z-index: 4;
      display: none;
      gap: 8px;
      flex-wrap: wrap;
      pointer-events: auto;
    }

    .lab-3d-toolbar.active {
      display: flex;
    }

    .lab-3d-toolbar .btn {
      min-height: 34px;
      padding: 0 10px;
      border-color: rgba(24, 24, 24, .14);
      background: rgba(255, 255, 255, .86);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
      backdrop-filter: blur(10px);
    }

    .lab-3d-toolbar .btn[hidden] {
      display: none !important;
    }

    .lab-footer-bar .lab-3d-toolbar {
      position: static;
      inset: auto;
      justify-content: center;
    }

    .lab-stage .keyboard-layer {
      object-fit: cover;
      opacity: 1;
      transition: opacity .16s ease;
      will-change: opacity;
    }

    .lab-stage .keyboard-layer.layer-pending,
    .lab-stage .keyboard-layer.layer-leaving {
      opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .lab-stage .keyboard-layer {
        transition: none;
      }
    }

    body.embed-lab-mode .lab-stage .keyboard-layer,
    body.embed-lab-mode .lab-backdrop img {
      object-fit: contain;
    }

    body.reseller-configurator-mode {
      font-size: 16px;
    }

    body.reseller-configurator-mode .lab-shell,
    body.reseller-configurator-mode .lab-shell button,
    body.reseller-configurator-mode .lab-shell input,
    body.reseller-configurator-mode .lab-shell select,
    body.reseller-configurator-mode .lab-shell textarea {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size-adjust: none;
    }

    body.reseller-configurator-mode.embed-lab-mode .lab-stage .keyboard-layer,
    body.reseller-configurator-mode.embed-lab-mode .lab-backdrop img {
      object-fit: cover;
    }

    body.embed-lab-mode .lab-stage,
    body.embed-lab-mode .lab-preview {
      background: #f4f4f2;
    }

    body.embed-lab-mode .lab-stage {
      width: var(--embed-stage-width, 100%);
      height: var(--embed-stage-height, 100%);
    }

    body.dark .lab-stage {
      filter: drop-shadow(0 34px 22px rgba(0,0,0,.44));
    }

    .price { font-size: 28px; font-weight: 500; }
    .weight { color: var(--muted); font-size: 13px; }

    .build-code {
      min-height: 42px;
      display: none;
      align-items: center;
      gap: 8px;
      padding: 0 8px 0 13px;
      color: #111;
      background: #fff;
      border: 2px solid var(--red);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .08em;
      box-shadow: 0 0 0 4px rgba(255,53,51,.14);
      border-radius: 0;
    }

    .build-code.empty {
      display: none;
    }

    .copy-code-btn {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--red);
      border: 0;
      font-size: 16px;
      line-height: 1;
      border-radius: 0;
    }

    .build-receipt {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 8;
      width: min(1440px, calc(100% - 56px));
      height: min(860px, calc(100% - 56px));
      max-height: min(860px, calc(100% - 56px));
      display: none;
      grid-template-columns: minmax(0, 1fr) minmax(620px, 720px);
      grid-template-rows: auto auto minmax(0, 1fr) auto auto;
      grid-template-areas:
        "head head"
        "metrics snapshot"
        "list snapshot"
        "pages snapshot"
        "actions snapshot";
      gap: 14px;
      padding: 20px;
      color: #fff;
      background: rgba(0,0,0,.3);
      border: 0;
      border-radius: 20px;
      box-shadow: 0 28px 80px rgba(0,0,0,.26);
      transform: translate(-50%, -50%) scale(1);
      backdrop-filter: blur(18px) saturate(1.08);
      overflow: hidden;
    }

    .build-receipt.open {
      display: grid;
      animation: receiptIn .22s ease both;
    }

    .qc-notice-panel {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 13;
      width: min(920px, calc(100% - 56px));
      max-height: min(820px, calc(100% - 56px));
      display: none;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 14px;
      padding: 18px;
      color: #111;
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(255,255,255,.68);
      border-radius: 20px;
      box-shadow: 0 28px 80px rgba(0,0,0,.28);
      transform: translate(-50%, -50%);
      backdrop-filter: blur(22px) saturate(1.1);
      overflow: hidden;
    }

    .qc-notice-panel.open {
      display: grid;
      animation: receiptIn .18s ease both;
    }

    .qc-notice-panel[hidden] {
      display: none !important;
    }

    body.dark .qc-notice-panel {
      color: #fff;
      background: rgba(28,28,28,.86);
      border-color: rgba(255,255,255,.16);
    }

    .qc-notice-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
    }

    .qc-notice-title {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .qc-notice-title h3 {
      margin: 0;
      font-size: 24px;
      line-height: 1.1;
    }

    .qc-notice-title p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .qc-notice-body {
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      padding: 10px;
      overflow: auto;
      background: rgba(255,255,255,.58);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 14px;
    }

    body.dark .qc-notice-body {
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.12);
    }

    .qc-notice-body img {
      display: block;
      width: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 10px;
    }

    .qc-notice-body img[hidden] {
      display: none;
    }

    .qc-notice-text {
      width: 100%;
      padding: 14px 16px;
      color: var(--ink);
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 10px;
      font-size: 14px;
      line-height: 1.7;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .qc-notice-text[hidden] {
      display: none;
    }

    body.dark .qc-notice-text {
      color: #fff;
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.12);
    }

    .qc-notice-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      align-items: center;
    }

    .receipt-head {
      grid-area: head;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: start;
    }

    .receipt-head-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .share-preset-icon {
      position: relative;
      overflow: visible;
    }

    .share-preset-icon::after {
      content: attr(data-tooltip);
      position: absolute;
      top: 50%;
      right: calc(100% + 9px);
      max-width: 0;
      overflow: hidden;
      padding: 0;
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      line-height: 28px;
      text-align: right;
      white-space: nowrap;
      opacity: 0;
      transform: translate(10px, -50%);
      transition: max-width .2s linear, opacity .16s linear, transform .2s linear;
      pointer-events: none;
    }

    .share-preset-icon:hover::after {
      max-width: 92px;
      opacity: 1;
      transform: translate(0, -50%);
    }

    .receipt-snapshot {
      grid-area: snapshot;
      position: relative;
      align-self: stretch;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      min-height: 0;
      background: #fff;
      overflow: hidden;
    }

    .receipt-mask {
      position: relative;
      overflow: hidden;
      align-self: center;
      display: grid;
      grid-template-rows: auto;
      width: 100%;
      background: #fff;
      border: 0;
      border-radius: 0;
      box-shadow: 0 18px 48px rgba(0,0,0,.24);
    }

    .receipt-mask::before {
      content: none;
    }

    .receipt-snapshot-stage {
      position: relative;
      aspect-ratio: 16 / 9;
      min-height: 0;
      overflow: hidden;
      background: #fff;
    }

    .receipt-snapshot-stage img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .receipt-snapshot-stage .keyboard-background {
      object-fit: cover;
    }

    .receipt-snapshot-meta {
      display: grid;
      align-items: center;
      min-width: 0;
      min-height: 74px;
      padding: 10px 16px;
      color: #111;
      background: #fff;
    }

    .receipt-snapshot-text {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      width: 100%;
      transform: translateY(4px);
    }

    .receipt-snapshot-product {
      min-width: 0;
      display: grid;
      align-content: center;
      gap: 5px;
    }

    .receipt-snapshot-text strong {
      overflow: hidden;
      color: #111;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .receipt-snapshot-qr-list {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .receipt-snapshot-qr-list:empty {
      display: none;
    }

    .receipt-snapshot-qr {
      width: 54px;
      height: 54px;
      display: block;
      object-fit: contain;
      background: #fff;
      border: 1px solid rgba(17,17,17,.12);
    }

    .receipt-snapshot-details {
      display: grid;
      gap: 4px;
      color: #111;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.25;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .receipt-snapshot-details span {
      color: #111;
      overflow: hidden;
      font-weight: 700;
      text-overflow: ellipsis;
    }

    .receipt-code {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
      padding: 8px 10px 8px 12px;
      color: #fff;
      background: rgba(0,0,0,.22);
      border-radius: 999px;
      font-size: 13px;
      letter-spacing: .08em;
    }

    .receipt-code span:last-of-type {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .receipt-code-label {
      color: rgba(255,255,255,.72);
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .receipt-copy {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      color: #111;
      background: #fff;
      border-radius: 999px;
      font-size: 14px;
      transition: .18s ease;
    }

    .receipt-copy.copied {
      color: #fff;
      background: #26b36a;
    }

    .ai-render-panel {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 12;
      width: min(820px, calc(100% - 48px));
      max-height: min(760px, calc(100% - 48px));
      display: none;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 16px;
      padding: 18px;
      color: #111;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(255,255,255,.62);
      border-radius: 20px;
      box-shadow: 0 28px 80px rgba(0,0,0,.26);
      transform: translate(-50%, -50%);
      backdrop-filter: blur(22px) saturate(1.12);
      overflow: hidden;
    }

    .ai-render-panel.open {
      display: grid;
    }

    body.dark .ai-render-panel {
      color: #fff;
      background: rgba(28,28,28,.82);
      border-color: rgba(255,255,255,.16);
    }

    .ai-render-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
    }

    .ai-render-title {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .ai-render-title h3 {
      margin: 0;
      font-size: 24px;
      letter-spacing: 0;
    }

    .ai-render-title p {
      max-width: 680px;
      margin: 0;
      color: #666;
      font-size: 13px;
      line-height: 1.55;
    }

    body.dark .ai-render-title p {
      color: rgba(255,255,255,.68);
    }

    .ai-render-body {
      min-height: 0;
      display: grid;
      gap: 14px;
      overflow: auto;
      padding-right: 4px;
      scrollbar-width: thin;
    }

    .ai-render-section {
      display: grid;
      gap: 9px;
    }

    .ai-render-section-title {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: #777;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    body.dark .ai-render-section-title {
      color: rgba(255,255,255,.58);
    }

    .ai-select-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .ai-select-field {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .ai-select-field label {
      color: #777;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .ai-select-field select {
      width: 100%;
      min-height: 44px;
      padding: 0 42px 0 13px;
      color: #111;
      background:
        linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 19px) 52% / 6px 6px no-repeat,
        linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 14px) 52% / 6px 6px no-repeat,
        rgba(255,255,255,.78);
      border: 1px solid rgba(0,0,0,.14);
      border-radius: 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      appearance: none;
    }

    .ai-select-field small {
      overflow: hidden;
      color: #777;
      font-size: 12px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.dark .ai-select-field label,
    body.dark .ai-select-field small {
      color: rgba(255,255,255,.62);
    }

    body.dark .ai-select-field select {
      color: #fff;
      background:
        linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 19px) 52% / 6px 6px no-repeat,
        linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 14px) 52% / 6px 6px no-repeat,
        rgba(0,0,0,.28);
      border-color: rgba(255,255,255,.16);
    }

    .ai-prompt-box {
      display: grid;
      gap: 8px;
    }

    .ai-prompt-preview {
      width: 100%;
      min-height: calc(12px * 1.55 * 3 + 28px);
      max-height: calc(12px * 1.55 * 3 + 28px);
      padding: 14px;
      overflow: hidden;
      color: #111;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(0,0,0,.14);
      border-radius: 14px;
      font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space: pre-wrap;
      word-break: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    body.dark .ai-prompt-preview {
      color: #fff;
      background: rgba(0,0,0,.28);
      border-color: rgba(255,255,255,.16);
    }

    .ai-render-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .ai-render-actions .btn {
      min-height: 42px;
      width: 100%;
    }

    .fireworks-layer {
      position: fixed;
      inset: 0;
      z-index: 10000;
      overflow: hidden;
      pointer-events: none;
    }

    .firework-burst {
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: 8px;
      height: 8px;
      transform: translate(-50%, -50%);
    }

    .firework-spark {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 8px;
      height: 8px;
      background: var(--spark);
      border-radius: 999px;
      box-shadow: 0 0 16px var(--spark);
      transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
      animation: fireworkSpark 3.2s cubic-bezier(.18,.72,.24,1) forwards;
      animation-delay: var(--delay);
    }

    @keyframes fireworkSpark {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(.45);
      }
      12% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(.12);
      }
    }

    .receipt-actions {
      grid-area: actions;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 12px;
    }

    .receipt-actions .receipt-code {
      grid-column: 1 / -1;
    }

    .receipt-actions .btn {
      width: 100%;
      min-height: 44px;
      padding: 0 18px;
      white-space: nowrap;
    }

    .receipt-metrics {
      grid-area: metrics;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .receipt-metric {
      padding: 12px;
      background: rgba(255,255,255,.12);
      border-radius: 14px;
    }

    .receipt-metric span {
      display: block;
      color: rgba(255,255,255,.72);
      font-size: 11px;
      text-transform: uppercase;
    }

    .receipt-metric strong {
      display: block;
      margin-top: 6px;
      font-weight: 500;
    }

    .receipt-list {
      grid-area: list;
      display: grid;
      align-content: start;
      gap: 8px;
      min-height: 0;
      overflow: auto;
      padding-right: 8px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.88) rgba(255,255,255,.12);
      scrollbar-gutter: stable;
    }

    .receipt-list::-webkit-scrollbar { width: 5px; }
    .receipt-list::-webkit-scrollbar-track { background: rgba(255,255,255,.12); border-radius: 999px; }
    .receipt-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.82); border-radius: 999px; }

    .receipt-item {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.76);
      font-size: 12px;
    }

    .receipt-item strong {
      display: grid;
      justify-items: end;
      gap: 3px;
      color: #fff;
      font-weight: 500;
      text-align: right;
    }

    .receipt-item strong small {
      color: rgba(255,255,255,.7);
      font-size: 10px;
      font-weight: 500;
      line-height: 1.25;
      white-space: nowrap;
    }

    .receipt-item-config {
      display: grid;
      grid-template-columns: 70px minmax(88px, 1fr) 68px 56px 62px;
      align-items: center;
      gap: 6px;
      color: #fff;
      font-size: 10px;
    }

    .receipt-item-config > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .receipt-item-config .receipt-item-category {
      color: rgba(255,255,255,.72);
    }

    .receipt-item-config .receipt-item-option {
      font-weight: 600;
    }

    .receipt-item-config .receipt-item-sku {
      color: rgba(255,255,255,.82);
    }

    .receipt-item-config .receipt-item-weight,
    .receipt-item-config .receipt-item-price {
      text-align: right;
    }

    .receipt-item-placeholder {
      visibility: hidden;
    }

    .receipt-pages {
      grid-area: pages;
      align-self: end;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 4px;
      color: rgba(255,255,255,.74);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .receipt-pages.show {
      display: flex;
    }

    .receipt-page-btn {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      color: #111;
      background: #fff;
      border-radius: 999px;
      font-size: 14px;
      line-height: 1;
    }

    .receipt-page-btn:disabled {
      opacity: .34;
      cursor: default;
    }

    .steps-panel {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      border-left: 1px solid var(--line);
      background: var(--paper);
    }

    body.dark .steps-panel {
      border-left-color: #343434;
      background: #1d1d1d;
    }

    .step-tabs {
      display: grid;
      gap: 12px;
      padding: 16px 18px 12px;
      border-bottom: 1px solid var(--line);
    }

    body.dark .step-tabs {
      border-bottom-color: #343434;
    }

    .step-current {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .step-kicker {
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .step-current-name {
      overflow: hidden;
      color: var(--ink);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.dark .step-current-name {
      color: #fff;
    }

    .step-current-meta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .step-nav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .step-progress {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 10px;
      align-items: center;
    }

    .step-progress-mark {
      min-width: 0;
      height: 5px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: #ff3b3b;
      box-shadow: 0 4px 10px rgba(255, 59, 59, .16);
      appearance: none;
      cursor: pointer;
    }

    .step-progress-mark.done {
      background: #1598f5;
      box-shadow: 0 4px 10px rgba(21, 152, 245, .2);
    }

    .step-progress-mark.locked {
      cursor: not-allowed;
      opacity: .42;
    }

    .step-tab {
      min-height: 38px;
      color: var(--muted);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .step-tab:hover:not(:disabled),
    .step-tab.active {
      color: var(--ink);
      background: var(--soft);
      border-color: var(--ink);
    }

    .step-tab.next-step-hint:not(:disabled) {
      color: var(--ink);
      background: rgba(191, 247, 238, .58);
      border-color: #4a4a4a;
      box-shadow: 0 0 0 rgba(88, 196, 185, 0);
      animation: nextStepPulse 1.25s ease-in-out infinite;
    }

    .step-tab:disabled {
      color: #8a8a8a;
      background: #e2e2e2;
      border-color: #c4c4c4;
      cursor: not-allowed;
      opacity: 1;
    }

    @keyframes nextStepPulse {
      0%, 100% {
        filter: brightness(.88);
        box-shadow: 0 0 0 rgba(88, 196, 185, 0);
      }
      50% {
        filter: brightness(1.08);
        box-shadow: 0 0 18px rgba(88, 196, 185, .42);
      }
    }

    body.dark .step-tab {
      color: #aaa;
      border-color: #343434;
    }

    body.dark .step-tab:hover:not(:disabled),
    body.dark .step-tab.active {
      color: #fff;
      background: #2a2a2a;
      border-color: #f3f3f0;
    }

    body.dark .step-tab.next-step-hint:not(:disabled) {
      color: #fff;
      background: rgba(36, 79, 75, .72);
      border-color: #6faaa3;
    }

    body.dark .step-tab:disabled {
      color: #7a7a7a;
      background: #303030;
      border-color: #454545;
    }

    body.dark .step-progress-mark {
      background: #ff4b4b;
    }

    body.dark .step-progress-mark.done {
      background: #23a7ff;
    }

    body.dark .step-progress-mark.locked {
      opacity: .35;
    }

    .option-scroll {
      min-height: 0;
      overflow: auto;
      padding: 18px;
    }

    .option-card {
      width: 100%;
      min-height: 92px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
      padding: 10px;
      color: var(--ink);
      background: var(--soft);
      border: 1px solid #4a4a4a;
      text-align: left;
      border-radius: 0;
      box-shadow: 0 8px 22px rgba(16, 24, 32, .08);
    }

    body.dark .option-card {
      color: #fff;
      background: #252525;
      border-color: #555;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    }

    .option-card.active {
      background: #bff7ee;
      border-color: #3f5553;
      box-shadow: 0 14px 32px rgba(88, 196, 185, .26);
    }

    .option-card:disabled,
    .option-card.rule-disabled {
      cursor: not-allowed;
      opacity: .48;
      filter: grayscale(.45);
    }

    .option-card:disabled:hover {
      transform: none;
    }

    .option-incompatible-label {
      display: inline-flex;
      width: fit-content;
      margin-top: 6px;
      padding: 3px 7px;
      color: #fff;
      background: #b42318;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    body.dark .option-card.active {
      background: #244f4b;
      border-color: #6faaa3;
      box-shadow: 0 14px 34px rgba(73, 202, 190, .18);
    }

    .swatch {
      display: none;
      width: 72px;
      height: 72px;
      place-items: center;
      background: var(--swatch);
      border: 1px solid var(--line);
      overflow: hidden;
      border-radius: 0;
    }

    body.dark .swatch {
      border-color: #454545;
    }

    .swatch img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .option-name {
      display: block;
      font-weight: 500;
    }

    .option-meta {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.42;
    }

    .option-price {
      font-weight: 500;
      white-space: nowrap;
    }

    .dealer-hidden {
      display: none !important;
    }

    .keycap-color-editor {
      display: grid;
      gap: 12px;
    }

    .keycap-color-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 48px;
      gap: 9px 12px;
      align-items: center;
      min-height: 0;
      padding: 10px;
      color: var(--ink);
      background: var(--soft);
      border: 1px solid #4a4a4a;
      box-shadow: 0 8px 22px rgba(16, 24, 32, .08);
    }

    body.dark .keycap-color-card {
      color: #fff;
      background: #252525;
      border-color: #555;
    }

    .keycap-color-swatch-wrap {
      position: relative;
      justify-self: end;
    }

    .keycap-color-swatch {
      width: 44px;
      height: 38px;
      padding: 0;
      background: var(--keycap-color, #f2efe5);
      border: 1px solid var(--line);
      border-radius: 0;
      cursor: pointer;
    }

    .keycap-color-popover {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 24;
      width: 236px;
      padding: 12px;
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: 0 18px 44px rgba(0,0,0,.18);
    }

    body.dark .keycap-color-popover {
      background: #202020;
      border-color: #4a4a4a;
    }

    .keycap-color-popover[hidden] {
      display: none;
    }

    .keycap-color-popover input[type="color"] {
      width: 100%;
      height: 42px;
      padding: 0;
      border: 1px solid var(--line);
      background: transparent;
    }

    .keycap-color-card .option-name {
      line-height: 1.2;
    }

    .keycap-color-fields {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: 8px;
      margin-top: 10px;
    }

    .keycap-color-fields label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .keycap-color-fields input {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      padding: 0 9px;
      border: 1px solid var(--line);
    }

    .gmk-select-wrap {
      grid-column: 1 / -1;
      margin-top: 0;
    }

    .gmk-select-wrap > label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .gmk-picker {
      position: relative;
    }

    .gmk-picker-button {
      width: 100%;
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 10px;
      color: var(--gmk-text, #111);
      background: var(--gmk-color, var(--paper));
      border: 1px solid var(--line);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      text-align: left;
    }

    .gmk-picker-button::after {
      content: "⌄";
      font-size: 14px;
      line-height: 1;
    }

    .gmk-picker-list {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 4px);
      z-index: 20;
      display: none;
      max-height: 260px;
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 4px;
      background: #555;
      border: 1px solid rgba(255,255,255,.24);
      box-shadow: 0 18px 44px rgba(0,0,0,.28);
    }

    .gmk-picker-list::-webkit-scrollbar {
      display: none;
    }

    .gmk-picker.open .gmk-picker-list {
      display: grid;
      gap: 3px;
    }

    .palette-search-row {
      position: sticky;
      top: 0;
      z-index: 2;
      display: block;
      padding-bottom: 4px;
      background: inherit;
    }

    .palette-search-input {
      width: 100%;
      height: 34px;
      min-width: 0;
      padding: 0 10px;
      color: #111;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(18,18,18,.14);
      border-radius: 10px;
      outline: none;
      font-size: 12px;
      font-weight: 500;
    }

    .palette-search-input::placeholder {
      color: rgba(17,17,17,.46);
    }

    .gmk-picker-option {
      min-height: 30px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: var(--gmk-text, #111);
      background: var(--gmk-color, #f0eee7);
      border: 1px solid transparent;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      text-align: left;
    }

    .gmk-picker-option:hover,
    .gmk-picker-option.active {
      border-color: #ff3533;
    }

    .keycap-layer-form {
      display: grid;
      gap: 14px;
    }

    .keycap-layer-row {
      display: grid;
      grid-template-columns: 140px minmax(0, 1fr) 118px;
      gap: 10px;
      align-items: end;
      padding: 12px;
      background: var(--soft);
      border: 1px solid var(--line);
    }

    body.dark .keycap-layer-row {
      background: #202020;
      border-color: #3a3a3a;
    }

    .keycap-layer-row strong {
      align-self: center;
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .keycap-layer-row .field {
      margin: 0;
    }

    .keycap-layer-row.model3d-part-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: stretch;
      padding: 14px 16px;
      background: #f7f7f4;
      border-color: rgba(18,18,18,.12);
      box-shadow: 0 10px 26px rgba(0,0,0,.04);
    }

    body.dark .keycap-layer-row.model3d-part-row {
      background: #242424;
      border-color: #3d3d3d;
      box-shadow: none;
    }

    .model3d-form-head {
      align-items: center;
      justify-content: flex-start;
      padding: 4px 0 2px;
    }

    .model3d-part-head {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 12px;
      align-items: end;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }

    .model3d-part-title {
      display: grid;
      grid-template-columns: 40px minmax(0, 420px);
      gap: 10px;
      align-items: end;
    }

    .model3d-part-index {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      color: var(--muted);
      background: var(--paper);
      border: 1px solid var(--line);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .06em;
    }

    .model3d-part-actions {
      justify-content: flex-end;
      margin: 0;
    }

    .model3d-part-actions .btn {
      min-width: 58px;
      min-height: 36px;
      padding: 0 12px;
    }

    .model3d-part-actions .btn:disabled {
      opacity: .38;
      cursor: not-allowed;
    }

    .model3d-part-body {
      display: grid;
      grid-template-columns: minmax(500px, 1.1fr) minmax(560px, .95fr) 90px;
      gap: 12px;
      align-items: end;
    }

    .model3d-bottom-pairing-body {
      grid-template-columns: 1fr;
      align-items: stretch;
      gap: 14px;
    }

    .model3d-bottom-pairing-body .model3d-bottom-toggle {
      padding: 12px 14px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    body.dark .model3d-bottom-pairing-body .model3d-bottom-toggle {
      background: #171717;
      border-color: #343434;
    }

    .bottom-case-pair-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(260px, 1fr));
      gap: 12px;
      margin: 0;
    }

    .bottom-case-pair-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(150px, .62fr);
      gap: 10px;
      align-items: end;
      padding: 12px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    body.dark .bottom-case-pair-card {
      background: #171717;
      border-color: #343434;
    }

    .bottom-case-pair-card input,
    .bottom-case-pair-card select {
      width: 100%;
      min-width: 0;
    }

    .case-color-admin-shell {
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      min-height: 0;
      height: 100%;
    }

    .case-color-panel-head {
      align-items: center;
      padding-bottom: 8px;
    }

    .case-color-panel-head .model3d-part-title {
      grid-template-columns: 40px auto minmax(160px, 1fr);
      align-items: center;
    }

    .case-color-head-note {
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .case-color-panel-head .btn {
      min-height: 34px;
      padding: 0 14px;
    }

    .case-color-admin-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      min-height: 0;
    }

    .case-color-admin-column {
      min-width: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      background: rgba(255,255,255,.5);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    .case-color-column-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      font-size: 12px;
      font-weight: 800;
    }

    .case-color-column-count {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .case-color-column-list {
      min-height: 0;
      overflow-y: auto;
      padding: 7px;
      display: grid;
      align-content: start;
      gap: 6px;
    }

    .case-color-admin-row {
      display: grid;
      grid-template-columns: minmax(70px, .5fr) minmax(86px, .9fr) minmax(86px, .9fr) minmax(94px, .92fr) auto;
      gap: 6px;
      align-items: center;
      padding: 6px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .case-color-admin-row input,
    .case-color-admin-row select {
      width: 100%;
      min-width: 0;
    }

    .case-color-admin-row input[type="color"] {
      height: 30px;
      padding: 2px;
    }

    .case-color-admin-row input,
    .case-color-admin-row select {
      height: 30px;
      padding: 0 8px;
      font-size: 12px;
    }

    .case-color-hex-field {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 5px;
      align-items: center;
      min-width: 0;
    }

    .case-color-admin-row .btn {
      min-height: 30px;
      padding: 0 9px;
      font-size: 11px;
    }

    .case-color-admin-add {
      margin: 7px;
      min-height: 30px;
      font-size: 12px;
    }

    body.dark .case-color-admin-row {
      background: #171717;
      border-color: #343434;
    }

    body.dark .case-color-admin-column {
      background: rgba(23,23,23,.72);
      border-color: #343434;
    }

    .model3d-part-foot {
      display: flex;
      justify-content: flex-end;
      align-items: end;
      padding: 0;
    }

    .model3d-part-foot .btn {
      width: 100%;
      min-height: 38px;
      padding: 0 12px;
    }

    .keycap-layer-upload {
      display: grid;
      grid-template-columns: minmax(136px, max-content) minmax(240px, 1.3fr) auto minmax(170px, .7fr) auto auto auto;
      gap: 8px;
      align-items: end;
    }

    .keycap-layer-upload input[type="file"] {
      width: 100%;
      height: 38px;
      min-height: 38px;
      padding: 0;
      color: var(--ink);
      font-size: 12px;
      font-weight: 500;
      line-height: 38px;
      border-radius: 0;
      overflow: hidden;
    }

    .keycap-layer-upload input[type="file"]::file-selector-button {
      height: 38px;
      margin: 0 10px 0 0;
      padding: 0 12px;
      color: var(--ink);
      background: #fff;
      border: 0;
      border-right: 1px solid var(--line);
      font: inherit;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .02em;
      cursor: pointer;
    }

    .keycap-layer-upload .btn {
      min-height: 38px;
      padding: 0 12px;
    }

    .keycap-layer-upload input[type="text"],
    .keycap-layer-upload .model3d-url-input {
      min-width: 0;
      height: 38px;
    }

    .model3d-upload-state {
      min-height: 38px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: var(--muted);
      background: var(--soft);
      border: 1px solid var(--line);
      font-size: 12px;
      white-space: nowrap;
      justify-content: center;
      min-width: 136px;
    }

    .model3d-upload-state.ready {
      color: #0f6b3f;
      background: #eef8f1;
      border-color: #cbe8d2;
    }

    .model3d-upload-state.loading {
      color: var(--muted);
      background: rgba(255, 255, 255, .72);
    }

    .model3d-pbr-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }

    .model3d-pbr-grid label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
    }

    .model3d-pbr-grid small {
      font-size: 10px;
      line-height: 1.2;
    }

    .model3d-pbr-grid input {
      min-width: 0;
      height: 38px;
    }

    .admin-model-preview {
      display: grid;
      grid-template-columns: minmax(420px, 1fr) minmax(420px, .95fr);
      gap: 14px;
      align-items: stretch;
      aspect-ratio: 32 / 9;
      min-height: 0;
      overflow: hidden;
      margin: 0 0 16px;
      padding: 14px;
      background: #f7f7f4;
      border: 1px solid rgba(18,18,18,.12);
      box-shadow: 0 10px 26px rgba(0,0,0,.04);
    }

    body.dark .admin-model-preview {
      background: #242424;
      border-color: #3d3d3d;
      box-shadow: none;
    }

    .admin-model-stage {
      position: relative;
      aspect-ratio: 16 / 9;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      background: #efefec;
      border: 1px solid var(--line);
      contain: layout size;
    }

    .admin-model-stage canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .admin-model-stage-empty {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 18px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
      pointer-events: none;
    }

    .admin-default-colors {
      display: grid;
      grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
      gap: 10px;
      align-content: stretch;
      min-height: 0;
      height: 100%;
      overflow: hidden;
    }

    .admin-default-colors > .model3d-part-row {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }

    .admin-default-colors > .model3d-part-row .model3d-bottom-pairing-body {
      min-height: 0;
      overflow: hidden;
    }

    .admin-default-color-row {
      display: grid;
      grid-template-columns: 74px 42px minmax(110px, .9fr) minmax(140px, 1fr) minmax(260px, 1.15fr);
      gap: 8px;
      align-items: end;
    }

    .admin-default-color-row strong {
      align-self: center;
      font-size: 13px;
    }

    .admin-default-color-row input {
      height: 38px;
      min-width: 0;
    }

    .admin-default-color-row input[type="color"] {
      width: 42px;
      padding: 0;
      overflow: hidden;
      border-radius: 999px;
      background: transparent;
    }

    .admin-default-color-row label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
    }

    .admin-palette-set {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      align-items: end;
    }

    .admin-palette-set .mesh-palette-picker > button {
      height: 38px;
      font-size: 12px;
      border-radius: 10px;
      background: rgba(255,255,255,.78);
      border-color: var(--line);
      box-shadow: none;
    }

    .admin-palette-set .mesh-palette-list {
      width: min(320px, 36vw);
      max-height: 280px;
      z-index: 70;
    }

    .keycap-preset-manager {
      margin-top: 18px;
    }

    .keycap-preset-module-fold {
      display: block;
    }

    .keycap-preset-module-fold > summary {
      list-style: none;
      cursor: pointer;
    }

    .keycap-preset-module-fold > summary::-webkit-details-marker {
      display: none;
    }

    .keycap-preset-module-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
    }

    .keycap-preset-module-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .keycap-preset-module-toggle::before {
      content: "展开";
      min-width: 28px;
    }

    .keycap-preset-module-toggle::after {
      content: "";
      width: 8px;
      height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      transition: transform .18s ease;
    }

    .keycap-preset-module-fold[open] .keycap-preset-module-toggle::before {
      content: "收起";
    }

    .keycap-preset-module-fold[open] .keycap-preset-module-toggle::after {
      transform: rotate(225deg) translateY(-1px);
    }

    .keycap-preset-module-body {
      padding-top: 14px;
    }

    .keycap-preset-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      align-items: start;
    }

    .keycap-preset-preview {
      min-height: 320px;
      display: grid;
      gap: 10px;
      align-content: start;
      padding: 14px;
      background: #f7f7f4;
      border: 1px solid rgba(18,18,18,.12);
    }

    .keycap-preset-preview .hint {
      margin: 0;
    }

    .keycap-custom-mode-head {
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }

    .keycap-custom-mode-head h4 {
      margin: 2px 0 0;
      font-size: 14px;
      line-height: 1.2;
    }

    .keycap-preset-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 38px;
    }

    .keycap-preset-card-head strong {
      font-size: 14px;
    }

    .keycap-preset-card-head .module-toggle {
      width: min(360px, 58%);
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .keycap-preset-preview-swatches {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .keycap-preset-preview-swatches span {
      display: flex;
      gap: 7px;
      align-items: center;
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .keycap-preset-preview-swatches i {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      border: 1px solid rgba(18, 18, 18, .18);
      border-radius: 999px;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45);
    }

    .keycap-preset-save-current {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .keycap-preset-action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .keycap-preset-action-card {
      display: grid;
      gap: 10px;
      align-content: start;
      padding: 14px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .keycap-preset-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: end;
      margin: 0;
    }

    .keycap-preset-tools .field {
      grid-column: 1 / -1;
    }

    .keycap-preset-tools input[type="file"] {
      min-height: 38px;
    }

    .keycap-preset-list-fold {
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .keycap-preset-list-fold summary {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
      user-select: none;
      border-bottom: 1px solid transparent;
    }

    .keycap-preset-list-fold[open] summary {
      border-bottom-color: var(--line);
    }

    .keycap-preset-list-fold summary::marker {
      color: var(--muted);
    }

    .keycap-preset-count {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .keycap-preset-list-tools {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, .48);
    }

    body.dark .keycap-preset-list-tools {
      background: rgba(255, 255, 255, .04);
    }

    .keycap-preset-list-tools input {
      height: 38px;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0 12px;
      background: rgba(255, 255, 255, .82);
      font-size: 13px;
    }

    body.dark .keycap-preset-list-tools input {
      color: #f5f5f5;
      background: rgba(255, 255, 255, .08);
    }

    .keycap-preset-table-wrap {
      overflow-x: auto;
      background: var(--paper);
    }

    .keycap-preset-table {
      min-width: 1120px;
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    .keycap-preset-table th,
    .keycap-preset-table td {
      padding: 8px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
      white-space: nowrap;
    }

    .keycap-preset-table th {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .keycap-preset-table input[type="text"] {
      min-width: 132px;
      height: 34px;
    }

    .keycap-preset-table select {
      min-width: 92px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--paper);
      font-size: 12px;
      font-weight: 800;
    }

    .keycap-preset-default-btn.active {
      color: #0f3e4a;
      background: var(--tiffany);
      box-shadow: 0 8px 18px rgba(95, 211, 203, .28);
    }

    .keycap-preset-color {
      display: grid;
      grid-template-columns: 30px minmax(92px, 1fr);
      gap: 6px;
      align-items: center;
    }

    .keycap-preset-color input[type="color"] {
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 999px;
      overflow: hidden;
    }

    .keycap-preset-color input[type="text"] {
      min-width: 92px;
      height: 34px;
    }

    .keycap-preset-actions {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .keycap-preset-actions .admin-action {
      min-width: 44px;
    }

    .keycap-key-layout-panel {
      padding: 12px;
      margin-bottom: 12px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .58);
    }

    body.dark .keycap-key-layout-panel {
      background: rgba(255, 255, 255, .05);
    }

    .keycap-key-layout-panel > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .keycap-key-layout-panel > summary::-webkit-details-marker {
      display: none;
    }

    .keycap-key-layout-panel > summary::after {
      content: "";
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      transition: transform .18s ease;
    }

    .keycap-key-layout-panel[open] > summary::after {
      transform: rotate(225deg) translateY(-1px);
    }

    .keycap-key-layout-body {
      display: grid;
      gap: 10px;
      padding-top: 12px;
    }

    .keycap-key-layout-head {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }

    .keycap-key-layout-head strong {
      font-size: 14px;
    }

    .keycap-key-layout-status {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .keycap-key-layout-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .keycap-keyboard-layout {
      display: grid;
      grid-template-columns: max-content max-content max-content;
      grid-template-areas:
        "fn fn fn"
        "main nav numpad";
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .keycap-layout-cluster {
      display: grid;
      gap: 5px;
      align-content: start;
    }

    .keycap-layout-cluster-function {
      grid-area: fn;
      width: max-content;
    }

    .keycap-layout-cluster-main {
      grid-area: main;
    }

    .keycap-layout-cluster-nav {
      grid-area: nav;
    }

    .keycap-layout-cluster-numpad {
      grid-area: numpad;
    }

    .keycap-layout-cluster-label {
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .keycap-layout-row {
      --key-unit: 18px;
      display: grid;
      grid-template-columns: repeat(var(--key-columns, 30), var(--key-unit));
      gap: 5px;
      min-height: 34px;
      align-items: stretch;
    }

    .keycap-layout-cluster-function .keycap-layout-row,
    .keycap-layout-cluster-main .keycap-layout-row {
      --key-columns: 30;
    }

    .keycap-layout-cluster-function .keycap-layout-row {
      --key-columns: 38;
    }

    .keycap-layout-cluster-nav .keycap-layout-row {
      --key-columns: 6;
    }

    .keycap-layout-cluster-numpad .keycap-layout-row {
      --key-columns: 8;
    }

    .keycap-keyboard-gap {
      min-width: 10px;
      min-height: 34px;
    }

    .keycap-layout-key-wrap {
      position: relative;
      display: block;
      grid-column: span var(--key-span, 2);
      min-width: 0;
      height: 34px;
    }

    .keycap-layout-key {
      min-width: 0;
      width: 100%;
      height: 34px;
      padding: 0 4px;
      border: 1px solid rgba(18, 18, 18, .18);
      border-radius: 6px;
      background: #fff;
      color: var(--ink);
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .keycap-layout-key:hover {
      transform: translateY(-1px);
      border-color: rgba(126, 87, 194, .42);
    }

    .keycap-layout-key.pending {
      border-color: #7e3ff2;
      background: rgba(126, 87, 194, .14);
      box-shadow: inset 0 0 0 2px rgba(126, 87, 194, .24);
    }

    .keycap-layout-key.bound {
      border-color: rgba(33, 150, 243, .62);
      background: rgba(207, 239, 255, .72);
    }

    .keycap-layout-key.bound::after {
      content: "";
      display: block;
      width: 5px;
      height: 5px;
      margin: 3px auto 0;
      border-radius: 999px;
      background: #2196f3;
    }

    .keycap-layout-key-clear {
      position: absolute;
      top: -6px;
      right: -6px;
      display: none;
      align-items: center;
      justify-content: center;
      width: 17px;
      height: 17px;
      border: 1px solid rgba(238, 69, 64, .55);
      border-radius: 999px;
      background: #fff;
      color: #e84540;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
      cursor: pointer;
      z-index: 2;
    }

    .keycap-layout-key-wrap.bound .keycap-layout-key-clear {
      display: inline-flex;
    }

    .keycap-layout-key-clear:hover {
      background: #e84540;
      color: #fff;
    }

    .keycap-layout-key.group-mod {
      color: #333;
    }

    .keycap-layout-key.group-special {
      border-color: rgba(238, 105, 0, .44);
    }

    body.dark .keycap-layout-key {
      background: rgba(255, 255, 255, .08);
      color: #f5f5f5;
      border-color: rgba(255, 255, 255, .16);
    }

    body.dark .keycap-layout-key.bound {
      background: rgba(33, 150, 243, .22);
    }

    .keycap-binding-list {
      max-height: 120px;
      overflow: auto;
      border-top: 1px solid var(--line);
      padding-top: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .keycap-binding-list span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0 6px 6px 0;
      padding: 4px 7px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .58);
      color: var(--ink);
      font-weight: 800;
    }

    body.dark .keycap-binding-list span {
      background: rgba(255, 255, 255, .06);
      color: #f5f5f5;
    }

    .keycap-binding-target-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .keycap-binding-target-toggle button {
      min-height: 30px;
      padding: 0 11px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .keycap-binding-target-toggle button.active {
      background: rgba(126, 207, 255, .25);
      color: #135f8f;
      box-shadow: inset 0 0 0 1px rgba(33, 150, 243, .28);
    }

    body.dark .keycap-binding-target-toggle {
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .12);
    }

    body.dark .keycap-binding-target-toggle button.active {
      color: #d8f2ff;
      background: rgba(33, 150, 243, .24);
    }

    .keycap-mapping-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 10px 0;
    }

    .keycap-mapping-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .keycap-mapping-filter label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .keycap-mapping-filter select,
    .keycap-mapping-filter input[type="search"] {
      min-width: 160px;
      height: 36px;
      border-radius: 10px;
    }

    .keycap-mapping-filter .keycap-mapping-select-all {
      display: inline-flex;
      gap: 7px;
      align-items: center;
      justify-content: center;
      height: 36px;
      padding: 0 10px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      font-size: 12px;
      font-weight: 800;
    }

    .keycap-mapping-filter .keycap-mapping-select-all input {
      width: 18px;
      height: 18px;
      min-width: 18px;
      accent-color: var(--accent);
    }

    .keycap-mapping-check {
      width: 42px;
      text-align: center !important;
    }

    .keycap-mapping-check input {
      width: 18px;
      height: 18px;
      accent-color: var(--accent);
    }

    .keycap-mapping-table-wrap {
      max-height: 420px;
      overflow: auto;
      border: 1px solid var(--line);
      background: var(--paper);
    }

    .keycap-mapping-table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      font-size: 12px;
    }

    .keycap-mapping-table th,
    .keycap-mapping-table td {
      padding: 8px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
    }

    .keycap-mapping-table th {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .keycap-mapping-table select {
      min-width: 112px;
      height: 34px;
      border-radius: 10px;
    }

    .keycap-mapping-table tr.active td {
      background: rgba(206, 235, 255, .48);
    }

    .keycap-mapping-table tr.selected td {
      background: rgba(126, 87, 194, .14);
    }

    .keycap-mapping-table tr.checked td {
      background: rgba(126, 87, 194, .10);
    }

    .keycap-mapping-table tr.selected td:first-child {
      box-shadow: inset 5px 0 0 #7e3ff2;
    }

    .keycap-mapping-table tr.checked td:first-child {
      box-shadow: inset 5px 0 0 #9b6cff;
    }

    .keycap-mapping-table tr[hidden] {
      display: none;
    }

    .keycap-mapping-table tr.from-model td {
      box-shadow: inset 3px 0 0 var(--accent);
    }

    body.dark .keycap-mapping-table tr.active td {
      background: rgba(55, 111, 154, .28);
    }

    body.dark .keycap-mapping-table tr.selected td {
      background: rgba(157, 117, 255, .20);
    }

    body.dark .keycap-mapping-table tr.checked td {
      background: rgba(157, 117, 255, .16);
    }

    .keycap-mapping-name {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .keycap-mapping-name strong,
    .keycap-mapping-key {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .keycap-mapping-key {
      max-width: 280px;
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
    }

    .keycap-preset-front {
      display: grid;
      gap: 4px;
      min-width: 148px;
    }

    .keycap-preset-float {
      position: absolute;
      left: auto;
      right: 4px;
      bottom: 7px;
      z-index: 18;
      min-width: 0;
      pointer-events: auto;
    }

    #lab:not(.keycap-preview-mode) .keycap-preset-float {
      display: none;
    }

    .keycap-preset-front label {
      color: var(--muted);
      font-size: 11px;
    }

    .keycap-preset-front select {
      height: 38px;
      border-radius: 12px;
    }

    .keycap-preset-front select[data-keycap-preset-select="front"] {
      display: none;
    }

    .keycap-preset-custom {
      position: relative;
      min-width: 0;
    }

    .keycap-preset-custom-button {
      width: 100%;
      height: 38px;
      padding: 0 12px;
      color: var(--ink);
      background: rgba(255, 255, 255, .76);
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: var(--mesh-control-radius, 12px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
      font-size: 13px;
      font-weight: 400;
      text-align: left;
      cursor: pointer;
    }

    .keycap-preset-float .keycap-preset-custom-button {
      position: relative;
      width: 68px;
      height: 58px;
      padding: 0;
      overflow: visible;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      animation: keycapPresetJelly 3.2s ease-in-out infinite;
    }

    .keycap-preset-float .keycap-preset-custom-button:hover {
      animation-duration: 1.35s;
      transform: translateY(-2px) scale(1.03);
    }

    .keycap-preset-helper-icon {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 0;
      object-fit: contain;
      object-position: center;
      pointer-events: none;
    }

    .keycap-preset-helper-bubble {
      position: absolute;
      left: auto;
      right: calc(100% + 10px);
      bottom: 14px;
      width: max-content;
      max-width: 220px;
      padding: 10px 12px;
      color: #222;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(255, 255, 255, .88);
      border-radius: 16px 16px 4px 16px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.35;
      pointer-events: none;
      animation: keycapPresetBubble 4.2s ease-in-out infinite;
    }

    .keycap-preset-helper-bubble-text {
      display: inline-block;
      width: 0;
      max-width: max-content;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: bottom;
      animation: keycapPresetTyping 3.2s steps(10, end) infinite;
    }

    .keycap-preset-helper-bubble-text::after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1em;
      margin-left: 2px;
      background: currentColor;
      vertical-align: -2px;
      animation: keycapPresetCaret .7s steps(1, end) infinite;
    }

    .keycap-preset-helper-bubble::before {
      content: "";
      position: absolute;
      left: auto;
      right: -7px;
      bottom: 12px;
      width: 14px;
      height: 14px;
      background: inherit;
      border-left: inherit;
      border-bottom: inherit;
      transform: rotate(45deg);
    }

    .keycap-preset-custom-button[aria-expanded="true"] .keycap-preset-helper-bubble {
      display: none;
    }

    .keycap-preset-float .keycap-preset-custom-list {
      position: fixed;
      top: auto;
      bottom: 108px;
      left: auto;
      right: 22px;
      transform: none;
      z-index: 86;
      width: min(292px, calc(100vw - 52px));
      max-height: min(360px, 54vh);
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .keycap-preset-float .keycap-preset-custom-list::-webkit-scrollbar {
      display: none;
    }

    body.mobile-lab-open #lab.keycap-preview-mode .keycap-preset-float {
      position: fixed;
      left: auto;
      right: max(16px, env(safe-area-inset-right));
      bottom: calc(220px + env(safe-area-inset-bottom));
      z-index: 27;
      width: 56px;
      min-width: 0;
    }

    body.mobile-lab-open #lab.keycap-preview-mode .keycap-preset-float .keycap-preset-custom-list {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: calc(292px + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      width: min(320px, calc(100vw - 48px));
      max-height: min(42vh, 440px);
      z-index: 86;
    }

    body.mobile-lab-open #lab.keycap-preview-mode .lab-snapshot-btn {
      position: fixed;
      left: max(16px, env(safe-area-inset-left));
      right: auto;
      bottom: calc(220px + env(safe-area-inset-bottom));
      z-index: 27;
    }

    @keyframes keycapPresetJelly {
      0%, 76%, 100% { transform: translateY(0) scale(1); }
      80% { transform: translateY(-5px) scale(1.08, .92); }
      84% { transform: translateY(2px) scale(.94, 1.07); }
      88% { transform: translateY(-2px) scale(1.03, .98); }
      92% { transform: translateY(0) scale(.99, 1.01); }
    }

    @keyframes keycapPresetBubble {
      0%, 100% { opacity: .86; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-3px); }
    }

    @keyframes keycapPresetTyping {
      0%, 12% { width: 0; }
      58%, 86% { width: 10em; }
      100% { width: 0; }
    }

    @keyframes keycapPresetCaret {
      0%, 48% { opacity: 1; }
      49%, 100% { opacity: 0; }
    }

    .keycap-preset-custom-list {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 22;
      width: min(280px, 72vw);
      max-height: 300px;
      overflow: auto;
      padding: 8px;
      background: rgba(255, 255, 255, .52);
      border: 1px solid rgba(255, 255, 255, .68);
      border-radius: var(--mesh-control-radius, 14px);
      box-shadow: 0 22px 58px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .58);
      backdrop-filter: blur(26px) saturate(1.32);
      -webkit-backdrop-filter: blur(26px) saturate(1.32);
    }

    .keycap-preset-custom-list[hidden] {
      display: none;
    }

    .keycap-preset-search {
      position: sticky;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 38px;
      margin-bottom: 6px;
      padding: 0 10px;
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: 10px;
      background: rgba(255, 255, 255, .86);
      font-size: 13px;
      outline: none;
    }

    .keycap-preset-option {
      width: 100%;
      min-height: 36px;
      padding: 0 10px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }

    .keycap-preset-option:hover,
    .keycap-preset-option.active {
      background: rgba(206, 235, 255, .92);
    }

    .keycap-preset-empty {
      padding: 10px;
      color: #777;
      font-size: 13px;
    }

    .keycap-tutorial {
      position: absolute;
      inset: 0;
      z-index: 9;
      display: grid;
      place-items: center;
      padding: 28px;
      pointer-events: auto;
      background: rgba(255, 255, 255, .10);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .keycap-tutorial[hidden] {
      display: none;
    }

    .keycap-tutorial-card {
      width: min(520px, calc(100vw - 48px));
      padding: 24px;
      color: var(--ink);
      background: rgba(255, 255, 255, .48);
      border: 1px solid rgba(255, 255, 255, .68);
      border-radius: 24px;
      box-shadow: 0 24px 72px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.58);
      backdrop-filter: blur(28px) saturate(1.25);
      -webkit-backdrop-filter: blur(28px) saturate(1.25);
    }

    .keycap-tutorial-card h3 {
      margin: 0 0 12px;
      font-size: 24px;
      letter-spacing: 0;
    }

    .keycap-tutorial-card p,
    .keycap-tutorial-card li {
      color: #555;
      font-size: 14px;
      line-height: 1.7;
    }

    .keycap-tutorial-card ol {
      margin: 12px 0 18px;
      padding-left: 20px;
    }

    .keycap-tutorial-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    body.dark .keycap-preset-custom-button,
    body.dark .keycap-preset-search {
      color: #eee;
      background: rgba(34, 34, 34, .82);
      border-color: rgba(255, 255, 255, .16);
    }

    body.dark .keycap-preset-float .keycap-preset-custom-button {
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    body.dark .keycap-preset-custom-list,
    body.dark .keycap-tutorial-card {
      color: #f1f1ee;
      background: rgba(24, 24, 24, .58);
      border-color: rgba(255, 255, 255, .16);
    }

    body.dark .keycap-preset-empty,
    body.dark .keycap-tutorial-card p,
    body.dark .keycap-tutorial-card li {
      color: #c9c9c4;
    }

    body.dark .keycap-preset-preview,
    body.dark .keycap-preset-table-wrap,
    body.dark .keycap-mapping-table-wrap {
      background: #242424;
      border-color: #3d3d3d;
    }

    body.dark .keycap-preset-preview-swatches i {
      border-color: rgba(255, 255, 255, .2);
    }

    .model-material-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .model-material-list span {
      padding: 6px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface-2);
      color: var(--muted);
      font-size: 12px;
      line-height: 1;
    }

    .lab-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      padding: 16px;
      border-top: 1px solid var(--line);
      align-items: center;
    }

    #lab.keycap-preview-mode .lab-code,
    #lab.keycap-preview-mode .lab-title,
    #lab.keycap-preview-mode .group-buy-summary,
    #lab.keycap-preview-mode #purchaseToggle,
    #lab.keycap-preview-mode .step-tabs,
    #lab.keycap-preview-mode .lab-actions {
      display: none;
    }

    #lab.keycap-preview-mode .lab-shell {
      height: calc(var(--lab-preview-height, min(920px, 90vh)) + 112px);
      grid-template-rows: 56px minmax(0, 1fr) 56px;
    }

    #lab.keycap-preview-mode .lab-top {
      position: relative;
      z-index: 8;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      justify-items: stretch;
      gap: 12px;
      height: 56px;
      padding: 0 16px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
    }

    body.dark #lab.keycap-preview-mode .lab-top {
      background: #202020;
      border-bottom-color: #343434;
    }

    #lab.keycap-preview-mode .keycap-system-title {
      display: none !important;
    }

    #lab.keycap-preview-mode .color-card-video-trigger {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      width: auto;
      min-height: 34px;
      padding: 0 12px;
      font-size: 12px;
    }

    #lab.keycap-preview-mode #closeLab {
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
    }

    #lab.keycap-preview-mode .lab-footer-bar {
      display: flex;
    }

    body.dark #lab.keycap-preview-mode .lab-footer-bar {
      background: #202020;
      border-top-color: #343434;
    }

    #lab.keycap-preview-mode #closeLab {
      position: static;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .92);
      border-color: rgba(18, 18, 18, .16);
      box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
      backdrop-filter: blur(10px);
    }

    #lab.keycap-preview-mode #closeLab:hover {
      color: #fff;
      background: #111;
      border-color: #111;
    }

    body.dark #lab.keycap-preview-mode #closeLab {
      color: #e8e8e3;
      background: rgba(44, 44, 44, .92);
      border-color: #4a4a4a;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    }

    body.dark #lab.keycap-preview-mode #closeLab:hover {
      color: #fff;
      background: #3a3a3a;
      border-color: #5a5a5a;
    }

    #lab.keycap-preview-mode .steps-panel {
      display: none;
    }

    #lab.keycap-preview-mode .lab-body {
      grid-template-columns: minmax(0, 1fr);
    }

    .keycap-selection-bar {
      position: absolute;
      top: 16px;
      left: 50%;
      z-index: 7;
      --mesh-control-radius: 14px;
      width: max-content;
      max-width: calc(100% - 180px);
      min-height: 58px;
      display: grid;
      grid-template-columns: auto 44px repeat(3, minmax(150px, 190px));
      gap: 10px;
      align-items: end;
      padding: 12px;
      color: var(--ink);
      background: rgba(255, 255, 255, .36);
      border: 1px solid rgba(255, 255, 255, .62);
      border-radius: 24px;
      box-shadow: 0 22px 58px rgba(0, 0, 0, .16);
      transform: translateX(-50%);
      backdrop-filter: blur(22px) saturate(1.22);
      -webkit-backdrop-filter: blur(22px) saturate(1.22);
    }

    body.dark .keycap-selection-bar {
      background: rgba(26, 26, 26, .42);
      border-color: rgba(255, 255, 255, .16);
      box-shadow: 0 24px 62px rgba(0, 0, 0, .34);
    }

    .keycap-selection-bar[hidden],
    #lab:not(.keycap-preview-mode) .keycap-selection-bar {
      display: none !important;
    }

    #lab.keycap-preview-mode .keycap-selection-bar {
      display: grid !important;
    }

    .keycap-mode-toggle {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      padding: 4px;
      background: rgba(255, 255, 255, .46);
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: var(--mesh-control-radius);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 7px 18px rgba(0, 0, 0, .08);
    }

    .keycap-preset-front {
      display: grid;
      gap: 4px;
      min-width: 148px;
    }

    .keycap-preset-front label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .keycap-preset-front select {
      height: 38px;
      min-width: 0;
      border-radius: var(--mesh-control-radius);
      background: rgba(255, 255, 255, .76);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
      appearance: none;
      -webkit-appearance: none;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 400;
      line-height: 1;
      text-align: left;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
      cursor: pointer;
    }

    #lab.keycap-preview-mode .keycap-preset-float {
      width: 68px;
      min-width: 0;
      justify-items: end;
    }

    .keycap-mode-toggle button {
      min-width: 64px;
      height: 34px;
      padding: 0 14px;
      color: #555;
      background: rgba(255, 255, 255, .62);
      border: 1px solid rgba(18, 18, 18, .1);
      border-radius: calc(var(--mesh-control-radius) - 4px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
      font-size: 13px;
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
    }

    .keycap-mode-toggle button.active {
      color: #0f3c68;
      background: rgba(206, 235, 255, .96);
      border-color: rgba(68, 149, 210, .34);
      box-shadow: 0 8px 20px rgba(54, 129, 190, .18), inset 0 1px 0 rgba(255,255,255,.92);
      transform: translateY(1px);
    }

    body.dark .keycap-mode-toggle button.active {
      color: #d8efff;
      background: rgba(55, 111, 154, .62);
      border-color: rgba(133, 197, 244, .35);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.12);
    }

    .case-color-popover {
      position: absolute;
      left: 50%;
      top: calc(100% + 16px);
      z-index: 22;
      width: min(520px, calc(100vw - 40px));
      max-height: min(420px, 62vh);
      overflow: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: 18px;
      box-shadow: 0 22px 54px rgba(0, 0, 0, .2);
      transform: translateX(-50%);
      backdrop-filter: blur(22px) saturate(1.18);
      -webkit-backdrop-filter: blur(22px) saturate(1.18);
    }

    .case-color-popover[hidden] {
      display: none;
    }

    .case-color-section + .case-color-section {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    .case-color-row {
      display: grid;
      grid-template-columns: minmax(136px, 1fr) 44px;
      gap: 10px;
      align-items: center;
    }

    .case-color-title {
      display: none;
    }

    .case-color-select {
      min-width: 0;
      height: 42px;
      padding: 0 12px;
      color: var(--ink);
      background: rgba(255, 255, 255, .68);
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: var(--mesh-control-radius);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      font-size: 13px;
      font-weight: 400;
      text-align: left;
    }

    .case-color-custom {
      position: relative;
      width: 42px;
      height: 42px;
      min-width: 0;
    }

    .case-color-custom input {
      position: absolute;
      inset: 0;
      width: 42px;
      height: 42px;
      opacity: 0;
      cursor: pointer;
    }

    .case-color-custom-button {
      position: relative;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 4px;
      background: rgba(255, 255, 255, .62);
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: var(--mesh-control-radius);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
      pointer-events: none;
    }

    .case-color-custom-button svg {
      width: 28px;
      height: 28px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
    }

    .case-color-custom-button .mesh-selected-color-chip {
      right: 4px;
      bottom: 4px;
      background: var(--case-custom-color, #d8d1bf);
    }

    .case-color-empty {
      color: var(--muted);
      font-size: 13px;
      font-weight: 400;
    }

    .case-color-swatch {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 6px;
      border: 1px solid rgba(0, 0, 0, .16);
      border-radius: 999px;
      background: var(--case-color, #d8d1bf);
    }

    .case-color-empty {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .mesh-color-control,
    .mesh-palette-picker {
      position: relative;
      min-width: 0;
    }

    .mesh-color-button {
      position: relative;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 4px;
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: var(--mesh-control-radius);
      background: rgba(255, 255, 255, .62);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
      cursor: pointer;
    }

    .mesh-color-wheel-icon {
      width: 28px;
      height: 28px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
    }

    .mesh-selected-color-chip {
      position: absolute;
      right: 4px;
      bottom: 4px;
      display: block;
      width: 11px;
      height: 11px;
      border: 2px solid rgba(255, 255, 255, .95);
      border-radius: 999px;
      background: var(--mesh-selected-color, #f2efe5);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .14);
    }

    .mesh-color-popover,
    .mesh-palette-list {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 20;
      background: rgba(255, 255, 255, .46);
      border: 1px solid rgba(255, 255, 255, .68);
      border-radius: var(--mesh-control-radius);
      box-shadow: 0 22px 58px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .58);
      backdrop-filter: blur(26px) saturate(1.32);
      -webkit-backdrop-filter: blur(26px) saturate(1.32);
    }

    .mesh-color-popover {
      width: 286px;
      padding: 14px;
    }

    .mesh-color-popover[hidden],
    .mesh-palette-list[hidden] {
      display: none;
    }

    .mesh-color-area {
      position: relative;
      height: 168px;
      border-radius: 14px;
      background:
        linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
        linear-gradient(to right, #fff, hsl(var(--mesh-picker-hue, 42) 100% 50%));
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
      cursor: crosshair;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .mesh-hue-strip {
      position: relative;
      height: 20px;
      margin-top: 12px;
      border-radius: 999px;
      background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
      cursor: ew-resize;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .mesh-color-inputs {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .mesh-color-inputs label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .mesh-color-inputs input {
      width: 100%;
      min-width: 0;
      height: 38px;
      padding: 0 10px;
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: 10px;
      background: rgba(255, 255, 255, .72);
    }

    .mesh-eyedropper-button {
      width: 100%;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
      color: #222;
      background: rgba(255, 255, 255, .74);
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: 10px;
      font-size: 13px;
      font-weight: 800;
      cursor: crosshair;
    }

    .mesh-eyedropper-button:hover {
      background: rgba(206, 235, 255, .92);
      border-color: rgba(68, 149, 210, .34);
    }

    .mesh-eyedropper-button svg {
      width: 16px;
      height: 16px;
      stroke-width: 2.4;
    }

    #meshColorHandle,
    #meshHueHandle,
    .mesh-color-handle,
    .mesh-hue-handle {
      position: absolute;
      width: 18px;
      height: 18px;
      border: 2px solid #fff;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(0, 0, 0, .2);
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    #meshColorHandle,
    .mesh-color-handle {
      left: var(--mesh-picker-s, 28%);
      top: calc(100% - var(--mesh-picker-v, 92%));
      background: var(--mesh-selected-color, #f2efe5);
    }

    #meshHueHandle,
    .mesh-hue-handle {
      left: calc(var(--mesh-picker-hue, 42) / 360 * 100%);
      top: 50%;
      background: hsl(var(--mesh-picker-hue, 42) 100% 50%);
    }

    .keycap-selection-bar label {
      display: grid;
      gap: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .admin-model-preview-tools {
      position: relative;
      left: auto;
      top: auto;
      z-index: 8;
      width: 100%;
      margin: 0 0 12px;
      transform: none;
      grid-template-columns: auto 44px minmax(148px, .85fr) repeat(3, minmax(132px, 1fr)) auto;
    }

    .admin-model-preview-tools .btn {
      height: 42px;
      white-space: nowrap;
    }

    .keycap-selection-bar input,
    .keycap-selection-bar select,
    .mesh-palette-picker > button {
      min-width: 0;
      height: 42px;
      border: 1px solid rgba(18, 18, 18, .12);
      border-radius: var(--mesh-control-radius);
      background: rgba(255, 255, 255, .62);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    .mesh-palette-picker > button {
      width: 100%;
      padding: 0 12px;
      text-align: left;
      font-size: 13px;
      font-weight: 400;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .mesh-palette-list {
      width: min(260px, 42vw);
      max-height: 310px;
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 8px;
    }

    .mesh-palette-list::-webkit-scrollbar {
      display: none;
    }

    .mesh-palette-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      min-height: 34px;
      margin: 0 0 5px;
      padding: 7px 10px;
      border: 1px solid rgba(0, 0, 0, .1);
      border-radius: calc(var(--mesh-control-radius) - 4px);
      background: var(--palette-color);
      color: var(--palette-text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }

    .mesh-palette-option.active {
      outline: 2px solid rgba(0, 0, 0, .28);
      outline-offset: 1px;
    }

    body.dark .keycap-mode-toggle,
    body.dark .mesh-color-button,
    body.dark .keycap-selection-bar input,
    body.dark .keycap-selection-bar select,
    body.dark .mesh-palette-picker > button {
      color: #f3f3ef;
      background: rgba(36, 36, 36, .58);
      border-color: rgba(255, 255, 255, .16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    body.dark .keycap-mode-toggle button {
      color: #d8d8d2;
      background: rgba(54, 54, 54, .62);
      border-color: rgba(255, 255, 255, .12);
      box-shadow: none;
    }

    body.dark .keycap-mode-toggle button.active {
      color: #d8efff;
      background: rgba(55, 111, 154, .62);
      border-color: rgba(133, 197, 244, .35);
      box-shadow: 0 8px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
    }

    body.dark .case-color-popover {
      background: rgba(28, 28, 28, .56);
      border-color: rgba(255, 255, 255, .16);
      box-shadow: 0 24px 62px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
    }

    body.dark .case-color-section + .case-color-section {
      border-top-color: rgba(255, 255, 255, .12);
    }

    body.dark .case-color-select,
    body.dark .case-color-custom-button {
      color: #f3f3ef;
      background: rgba(44, 44, 44, .68);
      border-color: rgba(255, 255, 255, .16);
    }

    body.dark .mesh-color-popover,
    body.dark .mesh-palette-list {
      background: rgba(28, 28, 28, .5);
      border-color: rgba(255, 255, 255, .18);
      box-shadow: 0 24px 62px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.1);
    }

    body.dark .palette-search-input {
      color: #fff;
      background: rgba(54,54,54,.86);
      border-color: rgba(255,255,255,.16);
    }

    body.dark .palette-search-input::placeholder {
      color: rgba(255,255,255,.46);
    }

    .mesh-palette-hex {
      opacity: .74;
      font-size: 11px;
    }

    .keycap-preview-heading {
      display: grid;
      gap: 3px;
      padding-bottom: 4px;
    }

    .keycap-preview-heading strong {
      color: var(--text);
      font-size: 28px;
      font-weight: 600;
      line-height: 1.15;
    }

    .keycap-preview-heading span {
      color: var(--muted);
      font-size: 12px;
    }

    .option-group-title {
      display: block;
      padding: 0 0 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    body.dark .lab-actions {
      border-top-color: #343434;
    }

    .action-metrics {
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: flex-start;
      column-gap: 16px;
      row-gap: 3px;
    }

    .action-metrics .price {
      min-width: 0;
      white-space: nowrap;
    }

    #finishBuild {
      min-width: 148px;
      white-space: nowrap;
    }

    .weight {
      display: flex;
      gap: 8px;
      align-items: baseline;
      justify-content: flex-start;
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.15;
      text-align: left;
      white-space: nowrap;
    }

    .weight span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .weight strong {
      display: block;
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
    }

    .drawer {
      position: fixed;
      left: 50%;
      top: 50%;
      width: min(760px, calc(100vw - 48px));
      max-height: min(680px, calc(100vh - 48px));
      display: none;
      overflow: auto;
      padding: 22px;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--lifted);
      z-index: 95;
      border-radius: 18px;
      transform: translate(-50%, -50%);
    }

    #purchaseDrawer {
      left: 50%;
      top: 50%;
      right: auto;
      bottom: auto;
    }

    .drawer.open {
      display: block;
      animation: drawerIn .22s ease both;
    }

    .drawer-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 18px;
    }

    .drawer-head h3 {
      margin: 5px 0 0;
      font-size: 26px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .circle-close {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 999px;
      transition: color .18s ease, background .18s ease, border-color .18s ease;
    }

    .circle-close svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .circle-close:hover {
      color: var(--paper);
      background: var(--ink);
      border-color: var(--ink);
    }

    .circle-close-light {
      color: #fff;
      border-color: rgba(255,255,255,.42);
    }

    .circle-close-light:hover {
      color: #111;
      background: #fff;
      border-color: #fff;
    }

    .purchase-grid {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 26px;
      align-items: start;
    }

    .purchase-qr-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .purchase-qr-item {
      display: grid;
      align-content: start;
      gap: 9px;
      min-width: 0;
    }

    .purchase-qr-title {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .01em;
      line-height: 1.2;
      text-transform: none;
    }

    .purchase-info {
      display: grid;
      gap: 13px;
      min-width: 0;
    }

    .purchase-code-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }

    .purchase-code-row span {
      color: var(--muted);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }

    .purchase-code-row strong {
      color: var(--ink);
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      text-align: right;
      white-space: nowrap;
    }

    .purchase-note {
      display: none;
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.48;
    }

    .purchase-agent-list {
      display: grid;
      gap: 0;
    }

    .purchase-agent-row {
      display: grid;
      grid-template-columns: minmax(120px, .68fr) minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      min-height: 42px;
      border-bottom: 1px solid var(--line);
    }

    .purchase-agent-row span {
      min-width: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.25;
    }

    .purchase-agent-row strong {
      min-width: 0;
      overflow: hidden;
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.25;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .qr-box {
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: #fff;
      overflow: hidden;
      border-radius: 14px;
    }

    .qr-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .qr-placeholder {
      display: grid;
      place-items: center;
      width: 76%;
      height: 76%;
      color: #fff;
      background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0 / 20px 20px,
        linear-gradient(#111 10px, transparent 10px) 0 0 / 20px 20px,
        #fff;
      border: 10px solid #111;
      font-size: 11px;
      font-weight: 500;
      text-align: center;
      mix-blend-mode: multiply;
    }

    @keyframes labIn {
      from { opacity: 0; transform: translateY(18px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes drawerIn {
      from { opacity: 0; transform: translate(-50%, -46%) scale(.975); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes commentPanelIn {
      from { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(.94); }
    }

    @keyframes receiptIn {
      from { opacity: 0; transform: translate(-50%, -46%) scale(.9); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .trace, .record-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
      font-size: 13px;
    }

    .trace-line, .record-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
    }

    .trace-line strong, .record-row strong { color: var(--ink); text-align: right; }

    .admin-modal {
      --ink: #111;
      --paper: #fff;
      --soft: #f5f5f2;
      --wash: #e9ece8;
      --muted: #70736e;
      --line: #d8dad3;
      --panel: #171717;
      --panel-2: #242424;
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      background: #fff;
      color: #111;
      color-scheme: light;
    }

    .admin-modal.open { display: grid; }
    .admin-modal.admin-authenticated .login-box { display: none !important; }
    .admin-modal.admin-authenticated .admin-app { display: grid !important; }

    body.dark .admin-modal,
    body.dark .admin-modal .admin-main,
    body.dark .admin-modal .login-box,
    body.dark .admin-modal .module-card,
    body.dark .admin-modal .module-inline,
    body.dark .admin-modal .keycap-layer-row,
    body.dark .admin-modal .keycap-layer-row.model3d-part-row,
    body.dark .admin-modal .admin-model-preview,
    body.dark .admin-modal .option-project-card,
    body.dark .admin-modal .media-card,
    body.dark .admin-modal .bulk-box,
    body.dark .admin-modal .file-upload,
    body.dark .admin-modal .category-manager,
    body.dark .admin-modal .option-list-block,
    body.dark .admin-modal .option-summary-item,
    body.dark .admin-modal .text-row {
      color: #111;
      background: var(--soft);
      border-color: var(--line);
    }

    body.dark .admin-modal,
    body.dark .admin-modal .admin-main {
      background: #fff;
    }

    body.dark .admin-modal input,
    body.dark .admin-modal textarea,
    body.dark .admin-modal select {
      color: #111;
      background: #fff;
      border-color: var(--line);
    }

    body.dark .admin-modal .btn {
      color: #111;
      background: #fff;
      border-color: var(--line);
    }

    body.dark .admin-modal .btn-dark {
      color: #fff;
      background: #111;
      border-color: #111;
    }

    body.dark .admin-modal .btn-primary {
      color: #fff;
      background: var(--red);
      border-color: var(--red);
    }

    body.dark .admin-modal .admin-side {
      color: #fff;
      background: #111;
    }

    body.dark .admin-modal .admin-menu button {
      color: #bbb;
      background: transparent;
      border-color: #303030;
    }

    body.dark .admin-modal .admin-menu button.active {
      color: #fff;
      background: #252525;
      border-color: var(--red);
    }

    .user-modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: none;
      place-items: center;
      background: rgba(0,0,0,.56);
    }

    .user-modal.open { display: grid; }

    .login-box {
      width: min(420px, calc(100vw - 36px));
      margin: auto;
      padding: 28px;
      border: 1px solid var(--line);
      background: var(--soft);
      border-radius: 14px;
    }

    .admin-app {
      min-height: 100vh;
      display: none;
      grid-template-columns: 260px minmax(0, 1fr);
    }

    .admin-app.open { display: grid; }

    .admin-side {
      padding: 24px;
      color: #fff;
      background: var(--ink);
    }

    .admin-side .logo-mark { margin-bottom: 16px; }

    .admin-menu {
      display: grid;
      gap: 8px;
      margin-top: 28px;
    }

    .admin-menu button {
      min-height: 42px;
      padding: 0 12px;
      color: #bbb;
      background: transparent;
      border: 1px solid #303030;
      text-align: left;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .admin-menu button.active {
      color: #fff;
      background: #252525;
      border-color: var(--red);
    }

    .admin-main {
      min-width: 0;
      padding: 24px;
      overflow: auto;
      background: #fff;
    }

    .admin-panel { display: none; }
    .admin-panel.active { display: block; }

    .reseller-admin-grid {
      display: grid;
      grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr);
      gap: 16px;
      align-items: start;
    }

    .reseller-product-checks {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 8px;
      max-height: 220px;
      overflow: auto;
      padding: 10px;
      border: 1px solid var(--line);
      background: #fafafa;
    }

    .reseller-product-checks label {
      min-height: 36px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .reseller-product-checks input {
      width: auto;
      min-width: auto;
    }

    .reseller-product-checks span {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .reseller-product-checks small {
      color: var(--muted);
    }

    .reseller-table-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .reseller-url {
      max-width: 360px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
      word-break: break-all;
    }

    .reseller-status {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border: 1px solid var(--line);
      font-size: 11px;
      text-transform: uppercase;
    }

    .reseller-status.on {
      color: #147a46;
      background: #e9f8ef;
    }

    .reseller-status.off {
      color: #777;
      background: #f2f2f2;
    }

    .reseller-price-overrides {
      max-height: 320px;
      overflow: auto;
      margin-top: 12px;
      border: 1px solid var(--line);
      background: #fafafa;
    }

    .reseller-price-row {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 110px 170px 110px 120px;
      gap: 10px;
      align-items: center;
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .reseller-price-header {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 110px 170px 110px 120px;
      gap: 10px;
      padding: 8px 10px;
      color: var(--muted);
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
      font-size: 12px;
      font-weight: 700;
    }

    .reseller-price-row:last-child { border-bottom: 0; }
    .reseller-price-row small { color: var(--muted); display: block; margin-top: 2px; }
    .reseller-price-row input { min-height: 34px; }
    .reseller-price-empty { padding: 16px; color: var(--muted); }
    .reseller-price-import {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 10px 0 12px;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--panel-soft);
    }
    .reseller-price-import input[type="file"] { flex: 1 1 260px; min-width: 220px; }
    .reseller-price-import .hint { flex: 1 0 100%; margin: 0; }

    body.reseller-portal-mode > :not(#resellerPortal):not(#resellerRetailModal):not(#resellerOrderHistoryModal):not(#resellerInvoiceSummaryModal):not(#resellerOrderAnalyticsModal):not(#resellerPreviewModal):not(#resellerEmbedHelpModal):not(#resellerUserGuideModal) {
      display: none !important;
    }

    body.reseller-portal-mode > #resellerPortal {
      display: block !important;
    }

    #resellerPortal {
      min-height: 100dvh;
      padding: 28px;
      color: var(--ink);
      background: var(--paper);
    }

    .reseller-portal-shell {
      width: min(1600px, 100%);
      margin: 0 auto;
    }

    .reseller-portal-header,
    .reseller-portal-card {
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: 0 18px 48px rgba(17, 17, 17, .08);
    }

    .reseller-portal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 22px;
      margin-bottom: 18px;
    }

    .reseller-portal-brand { display: flex; align-items: center; gap: 12px; }
    .reseller-portal-brand strong { font-size: 18px; }
    .reseller-portal-brand small { display: block; color: var(--muted); margin-top: 3px; }
    .reseller-portal-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
    .reseller-portal-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .reseller-portal-nav .btn { min-height: 34px; padding: 7px 12px; font-size: 12px; }
    .reseller-session { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--line); white-space: nowrap; }
    .reseller-session .btn { min-height: 32px; padding: 6px 10px; font-size: 12px; }
    #resellerPortal .btn, #resellerRetailModal .btn, #resellerOrderHistoryModal .btn, #resellerEmbedHelpModal .btn, #resellerUserGuideModal .btn { transition: transform .12s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; }
    #resellerPortal .btn:active, #resellerRetailModal .btn:active, #resellerOrderHistoryModal .btn:active, #resellerEmbedHelpModal .btn:active, #resellerUserGuideModal .btn:active { transform: translateY(1px) scale(.98); }
    .reseller-action-busy { cursor: wait !important; opacity: .72; }
    .reseller-action-success { border-color: #238636 !important; background: #238636 !important; color: #fff !important; }
    .reseller-action-error { border-color: #c62828 !important; background: #c62828 !important; color: #fff !important; }
    .reseller-portal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
    .reseller-portal-grid > section,
    .reseller-portal-grid > aside { grid-column: 1 / -1; }
    .reseller-portal-card { padding: 20px; }
    .reseller-portal-card h2 { margin: 0 0 8px; font-size: 22px; }
    .reseller-portal-card h3 { margin: 0 0 12px; font-size: 16px; }
    .reseller-portal-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 16px 0; }
    .reseller-portal-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .reseller-portal-result { min-height: 80px; }
    .reseller-order-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
    .reseller-order-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .reseller-order-table th, .reseller-order-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    .reseller-order-table th:last-child, .reseller-order-table td:last-child { text-align: right; }
    .reseller-order-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 700; }
    .reseller-order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
    .reseller-order-number { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-top: 14px; }
    .reseller-order-history { margin-top: 18px; max-height: 360px; overflow: auto; border-top: 1px solid var(--line); padding-top: 14px; }
    .reseller-order-history table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .reseller-order-history th, .reseller-order-history td { padding: 7px 5px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
    .reseller-order-history th:last-child, .reseller-order-history td:last-child { text-align: right; }
    .reseller-order-history details { min-width: 360px; }
    .reseller-order-history .history-items { padding: 6px 0 2px; }
    .reseller-order-history .history-items div { display: grid; grid-template-columns: minmax(0, 1fr) 120px 40px; gap: 8px; padding: 3px 0; border-top: 1px dotted var(--line); }
    .reseller-order-history .history-detail-row td { padding: 0 5px 8px; background: var(--panel-soft); }
    .reseller-order-history .history-detail-row details { min-width: 0; }
    .reseller-order-block { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; border: 1px solid var(--line); margin-top: 10px; overflow-x: auto; }
    .reseller-order-block:nth-of-type(even) { background: #f1f1ee; }
    .reseller-order-block:nth-of-type(odd) { background: #fff; }
    .reseller-order-block:hover { box-shadow: inset 0 0 0 2px #8ab9ff; }
    .reseller-order-cell { min-width: 90px; padding: 8px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; }
    .reseller-order-cell strong { display: block; font-size: 12px; }
    .reseller-order-cell small { display: block; color: var(--muted); margin-top: 3px; }
    .reseller-order-sku-cell { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 5px; align-items: center; }
    .reseller-order-sku-cell span + span { border-left: 1px solid var(--line); padding-left: 5px; color: var(--muted); }
    .reseller-order-cell:hover, .reseller-order-cell:focus-within { background: #cfe5ff; color: #111; }
    .reseller-order-list-open { margin-top: 14px; }
    .reseller-order-modal { position: fixed; inset: 0; z-index: 1300; display: none; padding: 22px; background: rgba(17, 17, 17, .62); }
    .reseller-order-modal.open { display: block; }
    .reseller-order-modal-card { width: min(1500px, 100%); height: calc(100dvh - 44px); margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0,0,0,.3); }
    .reseller-order-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
    .reseller-order-modal-actions { display: flex; align-items: center; gap: 8px; }
    .reseller-order-modal-head h2 { margin: 0; }
    .reseller-order-search-tools { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(190px, 280px) auto; gap: 12px; align-items: end; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
    .reseller-order-search-tools .field { margin: 0; }
    .reseller-order-search-count { padding-bottom: 11px; color: var(--muted); font-size: 12px; white-space: nowrap; }
    .reseller-order-analysis-button { border-color: #1677d2 !important; color: #1677d2 !important; }
    .reseller-analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
    .reseller-analytics-card { padding: 14px; border: 1px solid var(--line); background: var(--panel-soft); }
    .reseller-analytics-card span { display: block; color: var(--muted); font-size: 12px; }
    .reseller-analytics-card strong { display: block; margin-top: 6px; font-size: 24px; }
    .reseller-analytics-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .reseller-analytics-panel { min-width: 0; overflow: hidden; padding: 16px; border: 1px solid var(--line); }
    .reseller-analytics-panel h3 { margin: 0 0 12px; }
    .reseller-analytics-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(100px, 1.6fr) minmax(170px, auto); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px dotted var(--line); font-size: 12px; }
    .reseller-analytics-bar { height: 9px; overflow: hidden; background: #ecece8; }
    .reseller-analytics-bar i { display: block; height: 100%; background: #1677d2; }
    .reseller-analytics-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .reseller-analytics-row b { text-align: right; white-space: nowrap; }
    .reseller-order-modal-body { flex: 1; overflow: auto; padding: 0 20px 24px; }
    .reseller-order-modal-body .reseller-order-history { max-height: none; overflow: visible; border-top: 0; padding-top: 0; }
    @media (max-width: 760px) { .reseller-order-modal { padding: 0; } .reseller-order-modal-card { height: 100dvh; } .reseller-order-modal-head { padding: 12px 14px; } .reseller-order-modal-actions { gap: 5px; } .reseller-order-search-tools { grid-template-columns: 1fr; padding: 10px 14px; } .reseller-order-search-count { padding: 0; } .reseller-order-modal-body { padding: 0 14px 16px; } .reseller-analytics-grid, .reseller-analytics-sections { grid-template-columns: 1fr; } .reseller-analytics-row { grid-template-columns: minmax(92px,1fr) minmax(60px,1fr) minmax(132px,auto); gap: 6px; font-size: 11px; } }
    .reseller-order-meta { display: none; }
    .reseller-order-row { grid-column: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .reseller-order-row.category { grid-row: 2; background: #e7e7e3; color: #111; }
    .reseller-order-row.category .reseller-order-cell { background: #e7e7e3; border-bottom-color: #c9c9c4; }
    .reseller-order-row.bottom { grid-row: 3; }
    .reseller-order-row.top { grid-row: 4; }
    .reseller-order-meta strong { font-size: 16px; }
    .reseller-order-block-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; background: var(--panel-soft); border-bottom: 1px solid var(--line); font-weight: 700; }
    .reseller-order-delete { flex: 0 0 auto; min-height: 28px !important; padding: 4px 9px !important; border-color: #b3261e !important; color: #b3261e !important; font-size: 11px !important; }
    .reseller-order-delete:hover { background: #b3261e !important; color: #fff !important; }
    @media (max-width: 760px) { .reseller-order-row { grid-template-columns: repeat(8, 105px); } }
    .reseller-order-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
    .reseller-order-stat { padding: 10px 12px; border: 1px solid var(--line); background: var(--panel-soft); }
    .reseller-order-stat strong { display: block; font-size: 20px; margin-top: 4px; }
    .reseller-invoice-summary { margin: 12px 0 16px; border: 1px solid #d8d8d4; background: #fff; color: #111; color-scheme: light; }
    .reseller-invoice-summary summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; cursor: pointer; font-weight: 700; background: #fff; color: #111; }
    .reseller-invoice-summary summary::marker { content: ""; }
    .reseller-invoice-summary summary span:last-child { color: #666; font-size: 12px; font-weight: 500; }
    .reseller-invoice-summary[open] summary { border-bottom: 1px solid #d8d8d4; }
    .reseller-invoice-summary-table { overflow: auto; background: #fff; color: #111; }
    .reseller-invoice-summary table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; color: #111; }
    .reseller-invoice-summary th,
    .reseller-invoice-summary td { padding: 9px 10px; border-bottom: 1px solid #dededb; text-align: left; vertical-align: top; white-space: nowrap; background: #fff; color: #111; }
    .reseller-invoice-summary th { background: #f5f5f2; color: #111; }
    .reseller-invoice-summary tbody tr:nth-child(even) td { background: #fafaf8; }
    .reseller-invoice-summary th:nth-last-child(-n+3),
    .reseller-invoice-summary td:nth-last-child(-n+3) { text-align: right; }
    .reseller-invoice-summary tfoot td { font-weight: 700; border-bottom: 0; }
    .reseller-order-filters { display: grid; grid-template-columns: 1.2fr repeat(2, minmax(180px, 1fr)); gap: 8px; align-items: end; margin: 12px 0; }
    .reseller-order-filter-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
    .reseller-admin-analytics { margin: 12px 0 16px; padding: 14px; border: 1px solid var(--line); background: var(--paper); }
    .reseller-admin-analytics > h3 { margin: 0 0 12px; }
    .reseller-admin-order-detail { padding: 10px 12px; background: var(--panel-soft); }
    .reseller-admin-order-detail table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .reseller-admin-order-detail td { padding: 4px; border-bottom: 1px solid var(--line); }
    .reseller-admin-order-detail td:last-child { text-align: right; }
    @media (max-width: 760px) { .reseller-order-stats { grid-template-columns: 1fr 1fr; } .reseller-order-filters { grid-template-columns: 1fr; } }
    .reseller-admin-menu { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .reseller-list-layout { display: grid; grid-template-columns: minmax(360px, .86fr) minmax(560px, 1.14fr); gap: 16px; align-items: start; }
    .reseller-list-layout.reseller-list-only { grid-template-columns: minmax(0, 1fr); }
    .reseller-list-layout .option-list-block { margin: 0; }
    .reseller-list-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .reseller-partner-form[hidden] { display: none !important; }
    #resellerPartnerTable { overflow-x: auto; }
    #resellerPartnerTable .data-table { min-width: 1120px; }
    #resellerPartnerTable .data-table th,
    #resellerPartnerTable .data-table td { white-space: nowrap; vertical-align: middle; }
    .reseller-admin-modal { position: fixed; inset: 0; z-index: 1450; display: none; padding: 22px; background: rgba(17,17,17,.58); }
    .reseller-admin-modal.open { display: block; }
    .reseller-admin-modal-card { width: min(1500px, 100%); height: calc(100dvh - 44px); margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #111; color-scheme: light; border: 1px solid #d8d8d4; box-shadow: 0 24px 80px rgba(0,0,0,.32); }
    .reseller-admin-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #d8d8d4; background: #fff; }
    .reseller-admin-modal-head h2 { margin: 0; font-size: 22px; }
    .reseller-admin-modal-head p { margin: 4px 0 0; }
    .reseller-admin-modal-body { flex: 1; overflow: auto; padding: 18px 20px 24px; background: #fff; }
    .reseller-admin-modal .bulk-box, .reseller-admin-modal .option-list-block { background: #fff; color: #111; }
    .reseller-admin-orders-card { width: min(1680px, 100%); }
    .reseller-admin-order-block { margin: 12px 0; border: 1px solid #d8d8d4; overflow-x: auto; background: #fff; }
    .reseller-admin-order-block:nth-child(even) { background: #f7f7f4; }
    .reseller-admin-order-head { padding: 9px 10px; border-bottom: 1px solid #d8d8d4; font-weight: 700; }
    .reseller-admin-order-rows { min-width: 920px; }
    .reseller-admin-order-row { display: grid; grid-template-columns: repeat(8, minmax(110px, 1fr)); }
    .reseller-admin-order-row > div { min-height: 38px; padding: 7px 8px; border-right: 1px solid #dededb; border-bottom: 1px solid #dededb; }
    .reseller-admin-order-row > div:hover { background: #cfe5ff; }
    .reseller-admin-order-row.zh > div { color: #666; border-bottom: 0; }
    .reseller-admin-order-sku { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 5px; }
    .reseller-admin-order-sku span:last-child { padding-left: 5px; border-left: 1px solid #dededb; text-align: center; }
    .reseller-order-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
    .reseller-proforma { width: min(210mm, 100%); min-height: 297mm; margin: 0 auto; padding: 13mm 12mm 11mm; box-sizing: border-box; border: 1px solid #d8d8d4; background: #fff; color: #2d3e45; font: 11px/1.45 Arial, sans-serif; }
    .reseller-proforma * { box-sizing: border-box; }
    .reseller-proforma-head { display: grid; grid-template-columns: 74px minmax(0, 1fr) 112px; gap: 16px; align-items: start; }
    .reseller-proforma-logo { width: 62px; height: 62px; object-fit: contain; }
    .reseller-proforma-kicker { margin: 0 0 1px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
    .reseller-proforma-title { margin: 0; font: 500 35px/1.05 Georgia, "Times New Roman", serif; color: #2d3e45; letter-spacing: 0; }
    .reseller-proforma-id { padding: 10px 11px; border: 1px solid #2d3e45; background: #fff; color: #111; font-size: 10px; font-weight: 700; line-height: 1.65; text-align: left; }
    .reseller-proforma-id span { display: block; white-space: nowrap; }
    .reseller-proforma-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 42px; margin: 24px 0 16px; }
    .reseller-proforma-party { min-width: 0; }
    .reseller-proforma-party-label { margin-bottom: 7px; color: #6a7478; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
    .reseller-proforma-party h3 { margin: 0 0 4px; color: #2d3e45; font-size: 12px; text-transform: uppercase; }
    .reseller-proforma-party div { overflow-wrap: anywhere; }
    .reseller-proforma-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 12px; }
    .reseller-proforma-meta strong { color: #2d3e45; }
    .reseller-proforma-terms { margin: 0 -12mm; padding: 7px 12mm; border-top: 1px solid #2d3e45; border-bottom: 1px solid #2d3e45; text-align: right; font-size: 10px; }
    .reseller-proforma-table { width: calc(100% + 24mm); margin: 0 -12mm; border-collapse: collapse; table-layout: fixed; }
    .reseller-proforma-table th { padding: 9px 12mm; border-bottom: 1px solid #b9bec0; color: #49585e; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
    .reseller-proforma-table td { padding: 5px 12mm; border: 0; vertical-align: top; }
    .reseller-proforma-table th:nth-child(1), .reseller-proforma-table td:nth-child(1) { width: 52%; }
    .reseller-proforma-table th:nth-child(2), .reseller-proforma-table td:nth-child(2) { width: 10%; text-align: center; }
    .reseller-proforma-table th:nth-child(3), .reseller-proforma-table td:nth-child(3), .reseller-proforma-table th:nth-child(4), .reseller-proforma-table td:nth-child(4) { width: 19%; text-align: right; }
    .reseller-proforma-item { color: #2d3e45; font-weight: 700; }
    .reseller-proforma-item small { display: block; margin-top: 1px; color: #737d81; font-size: 9px; font-weight: 400; }
    .reseller-proforma-summary { display: grid; grid-template-columns: 1fr 250px; gap: 28px; margin-top: 12px; }
    .reseller-proforma-summary-box { grid-column: 2; }
    .reseller-proforma-summary-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 3px 0; }
    .reseller-proforma-summary-row strong { color: #2d3e45; }
    .reseller-proforma-balance { margin-top: 8px; padding-top: 9px; border-top: 1px solid #2d3e45; font-size: 13px; font-weight: 700; }
    .reseller-proforma-footer { display: grid; grid-template-columns: 1fr 1.12fr; gap: 34px; margin: 20px -12mm -11mm; padding: 10mm 12mm 11mm; border-top: 1px solid #2d3e45; background: #f7f8f7; }
    .reseller-proforma-footer h3 { margin: 0 0 8px; color: #2d3e45; font-size: 12px; text-transform: uppercase; }
    .reseller-proforma-footer p { margin: 0 0 5px; }
    .reseller-proforma-bank-grid { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 3px 8px; }
    .reseller-proforma-bank-grid strong { color: #2d3e45; }
    .reseller-declaration-settings { margin-top: 18px; padding-top: 16px; border-top: 1px solid #d8d8d4; }
    .reseller-declaration-settings > h4 { margin: 0 0 4px; }
    .reseller-declaration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
    .reseller-declaration-group { padding: 12px; border: 1px solid #d8d8d4; background: #fff; }
    .reseller-declaration-group h5 { margin: 0 0 9px; font-size: 14px; }
    .reseller-declaration-options { display: flex; flex-wrap: wrap; gap: 7px; }
    .reseller-declaration-option { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 9px; border: 1px solid #d8d8d4; background: #f8f8f6; cursor: pointer; }
    .reseller-declaration-option input { margin: 0; }
    .reseller-declaration-empty { color: #777; font-size: 12px; }
    @media (max-width:760px) { .reseller-admin-modal { padding: 0; } .reseller-admin-modal-card { height: 100dvh; } .reseller-admin-modal-head { padding: 12px 14px; } .reseller-admin-modal-body { padding: 12px 14px; } .reseller-proforma { min-width: 720px; } .reseller-declaration-grid, .reseller-list-layout { grid-template-columns: 1fr; } }
    .reseller-print-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3mm 4mm; height: 100%; }
    .reseller-print-card { min-width: 0; min-height: 0; padding: 2mm 2.5mm; overflow: hidden; border: 1px solid #222; break-inside: avoid; font: 7px/1.1 Arial, sans-serif; color: #111; background: #fff; }
    .reseller-print-order-head { display: flex; align-items: center; gap: 5px; min-width: 0; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid #222; font-size: 7px; white-space: nowrap; }
    .reseller-print-order-head strong { flex: 0 0 auto; font-size: 9px; }
    .reseller-print-order-head span { min-width: 0; }
    .reseller-print-order-head .print-code { margin-left: auto; font-weight: 700; }
    .reseller-print-card table { width: 100%; border-collapse: collapse; }
    .reseller-print-card th, .reseller-print-card td { padding: 1px 3px; border-right: 1px dotted #aaa; border-bottom: 1px dotted #aaa; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .reseller-print-card th:last-child, .reseller-print-card td:last-child { border-right: 0; }
    .reseller-print-card th { font-size: 6px; text-transform: uppercase; }
    .reseller-print-card td:first-child { width: 21%; font-weight: 700; }
    .reseller-print-card td:nth-child(2) { width: 36%; }
    .reseller-print-card td:nth-child(3) { width: 35%; color: #444; }
    .reseller-print-card td:last-child, .reseller-print-card th:last-child { text-align: right; }
    .reseller-picking-summary { box-sizing: border-box; width: 190mm; margin: 0; padding: 2mm; color: #111; background: #fff; font: 8px/1.18 Arial, sans-serif; break-inside: avoid; }
    .reseller-picking-summary h1 { margin: 0; font-size: 15px; line-height: 1.1; }
    .reseller-picking-supplier { margin-top: 1.5mm; font-size: 11px; font-weight: 700; }
    .reseller-picking-meta { display: flex; justify-content: space-between; gap: 10px; margin: 1.5mm 0 2mm; color: #444; }
    .reseller-picking-summary table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .reseller-picking-summary th, .reseller-picking-summary td { padding: .8mm 1mm; border: .25mm solid #aaa; text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
    .reseller-picking-summary th { background: #eee; }
    .reseller-picking-summary tbody tr:nth-child(even) td { background: #f7f7f7; }
    .reseller-picking-summary th:last-child, .reseller-picking-summary td:last-child { text-align: right; }
    .reseller-picking-summary tfoot td { font-weight: 700; }
    .reseller-picking-summary th:nth-child(1) { width: 18%; }
    .reseller-picking-summary th:nth-child(2) { width: 31%; }
    .reseller-picking-summary th:nth-child(3) { width: 27%; }
    .reseller-picking-summary th:nth-child(4) { width: 16%; }
    .reseller-picking-summary th:nth-child(5) { width: 8%; }
    .reseller-invoice-print-summary { box-sizing: border-box; width: 190mm; margin: 0; padding: 4mm; color: #111; background: #fff; font: 10px/1.35 Arial, sans-serif; }
    .reseller-invoice-print-summary h1 { margin: 0; font-size: 18px; }
    .reseller-invoice-print-meta { display: flex; justify-content: space-between; gap: 12px; margin: 2mm 0 4mm; padding-bottom: 2mm; border-bottom: .3mm solid #333; color: #444; }
    .reseller-invoice-print-summary table { width: 100%; border-collapse: collapse; }
    .reseller-invoice-print-summary th, .reseller-invoice-print-summary td { padding: 1.4mm; border: .25mm solid #aaa; text-align: left; }
    .reseller-invoice-print-summary th { background: #eee; }
    .reseller-invoice-print-summary tbody tr:nth-child(even) td { background: #f7f7f7; }
    @media print {
      @page reseller-packing { size: A4 landscape; margin: 8mm; }
      @page reseller-invoice { size: A4 portrait; margin: 10mm; }
      @page reseller-picking-summary { size: A4 portrait; margin: 8mm; }
      @page reseller-invoice-summary { size: A4 portrait; margin: 10mm; }
      body > *:not(#resellerPrintRoot) { display: none !important; }
      #resellerPrintRoot { display: block !important; color: #111; background: #fff; }
      #resellerPrintRoot .reseller-proforma { page: reseller-invoice; width: 190mm; min-height: 277mm; padding-top: 9mm; border: 0; }
      #resellerPrintRoot .reseller-picking-summary { page: reseller-picking-summary; box-sizing: border-box; width: 190mm; min-height: 0; max-height: 275mm; margin: 0; }
      #resellerPrintRoot .reseller-invoice-print-summary { page: reseller-invoice-summary; width: 190mm; margin: 0; }
      .reseller-print-page { page: reseller-packing; width: 281mm; height: 194mm; break-after: page; }
      .reseller-print-page:last-child { break-after: auto; }
    }
    #resellerPrintRoot { display: none; }
    .reseller-preview-modal { position: fixed; inset: 0; z-index: 1450; display: none; place-items: center; padding: 24px; background: rgba(17,17,17,.62); }
    .reseller-preview-modal.open { display: grid; }
    .reseller-preview-modal-card { width: min(1500px, 96vw); max-height: calc(100dvh - 48px); overflow: hidden; background: #fff; color: #171717; border: 1px solid #d8d8d4; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
    .reseller-preview-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid #deded8; }
    .reseller-preview-modal-head h2 { margin: 0; font-size: 18px; }
    /* 1440 viewport = 1080px 16:9 artwork + 360px option panel. */
    .reseller-preview-frame { width: 100%; aspect-ratio: 1440 / 664; overflow: hidden; border: 0; background: #fff; }
    .reseller-preview-frame iframe { display: block; width: 1440px; height: 664px; border: 0; background: #fff; transform-origin: top left; }
    .reseller-embed-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .reseller-guide-nav { border-color: #1677d2 !important; background: #1677d2 !important; color: #fff !important; }
    .reseller-guide-nav:hover { border-color: #0f63b2 !important; background: #0f63b2 !important; color: #fff !important; }
    .reseller-copy-success { border-color: #238636 !important; background: #238636 !important; color: #fff !important; }
    .reseller-embed-help-modal { position: fixed; inset: 0; z-index: 1500; display: none; padding: 24px; background: rgba(17,17,17,.62); }
    .reseller-embed-help-modal.open { display: block; }
    .reseller-embed-help-card { width: min(1080px, 100%); height: calc(100dvh - 48px); margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #171717; color-scheme: light; border: 1px solid #d8d8d4; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
    .reseller-embed-help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid #deded8; }
    .reseller-embed-help-head h2 { margin: 0; font-size: 24px; }
    .reseller-embed-help-head p { margin: 5px 0 0; color: #666; }
    .reseller-embed-help-body { flex: 1; overflow: auto; padding: 22px 24px 32px; }
    .reseller-help-lead { padding: 14px 16px; border-left: 4px solid #ef4d37; background: #f7f7f4; line-height: 1.7; }
    .reseller-help-video { margin: 0 0 20px; padding: 16px; border: 1px solid #deded8; background: #fafaf8; }
    .reseller-help-video h3 { margin: 0 0 10px; font-size: 17px; }
    .reseller-help-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
    .reseller-help-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
    .reseller-help-steps { display: grid; gap: 14px; margin: 20px 0 26px; counter-reset: reseller-help-step; }
    .reseller-help-step { counter-increment: reseller-help-step; display: grid; grid-template-columns: 48px minmax(0,1fr) 230px; gap: 16px; align-items: center; padding: 16px; border: 1px solid #deded8; }
    .reseller-help-step::before { content: counter(reseller-help-step); display: grid; place-items: center; width: 40px; height: 40px; background: #171717; color: #fff; font-weight: 800; }
    .reseller-help-step h3 { margin: 0 0 5px; font-size: 16px; }
    .reseller-help-step p { margin: 0; color: #666; line-height: 1.55; }
    .reseller-help-visual { min-height: 86px; display: grid; place-items: center; padding: 10px; border: 1px dashed #bbb; background: #fafaf8; }
    .reseller-help-browser { width: 100%; border: 1px solid #777; background: #fff; }
    .reseller-help-browser::before { content: "\2022  \2022  \2022"; display: block; padding: 4px 8px; background: #e9e9e5; color: #777; letter-spacing: 3px; }
    .reseller-help-browser span { display: block; margin: 8px; padding: 9px; border: 2px solid #ef4d37; font-size: 11px; text-align: center; }
    .reseller-help-code { margin: 8px 0 24px; padding: 14px; overflow: auto; background: #171717; color: #f5f5f2; font: 12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
    .reseller-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .reseller-help-panel { padding: 16px; border: 1px solid #deded8; }
    .reseller-help-panel h3 { margin: 0 0 10px; }
    .reseller-help-panel ul { margin: 0; padding-left: 20px; line-height: 1.8; }
    .reseller-help-kbd { display: inline-block; min-width: 28px; margin: 0 3px; padding: 2px 7px; border: 1px solid #aaa; border-bottom-width: 3px; background: #fff; font: 12px ui-monospace,monospace; text-align: center; }
    @media (max-width:760px) {
      .reseller-embed-help-modal { padding: 0; }
      .reseller-embed-help-card { height: 100dvh; }
      .reseller-embed-help-head { padding: 15px 14px; }
      .reseller-embed-help-body { padding: 16px 14px 24px; }
      .reseller-help-step { grid-template-columns: 40px minmax(0,1fr); }
      .reseller-help-visual { grid-column: 1 / -1; }
      .reseller-help-grid { grid-template-columns: 1fr; }
    }
    .reseller-retail-prices { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
    .reseller-retail-prices h3 { margin: 0 0 6px; }
    .reseller-retail-table { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
    .reseller-retail-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(180px, 1fr) 120px 80px 150px 120px 130px; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
    .reseller-retail-row.employee { grid-template-columns: minmax(190px, 1.25fr) minmax(180px, 1fr) 120px 80px 150px 130px; }
    .reseller-retail-row:last-child { border-bottom: 0; }
    .reseller-retail-row small { display: block; margin-top: 2px; color: var(--muted); }
    .reseller-retail-head { position: sticky; top: 0; background: var(--panel); font-weight: 700; z-index: 1; }
    .reseller-retail-head > span { white-space: nowrap; }
    .reseller-retail-save { margin-top: 10px; }
    .reseller-retail-open { margin-top: 14px; }
    .reseller-retail-modal { position: fixed; inset: 0; z-index: 1200; display: none; padding: 24px; background: rgba(17, 17, 17, .56); }
    .reseller-retail-modal.open { display: block; }
    .reseller-retail-modal-card { width: min(1440px, 100%); height: calc(100dvh - 48px); margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
    .reseller-retail-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
    .reseller-retail-modal-head h2 { margin: 0; font-size: 22px; }
    .reseller-retail-modal-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
    .reseller-retail-modal-tools .field { min-width: 260px; margin: 0; }
    .reseller-retail-currency-note { flex: 1 1 320px; margin: 0 0 4px; color: var(--muted); font-size: 12px; }
    .reseller-retail-modal-body { flex: 1; overflow: auto; padding: 0 22px 22px; }
    .reseller-retail-modal-body .reseller-retail-table { max-height: none; border: 0; border-radius: 0; }
    .reseller-customer-preview { margin-top: 14px; }
    .reseller-customer-preview table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .reseller-customer-preview th, .reseller-customer-preview td { padding: 7px 5px; border-bottom: 1px solid var(--line); text-align: left; }
    .reseller-customer-preview th:not(:last-child), .reseller-customer-preview td:not(:last-child) { border-right: 1px dashed #c9c9c3; }
    .reseller-customer-preview th:first-child, .reseller-customer-preview td:first-child { width: 18%; }
    .reseller-customer-preview th:nth-child(2), .reseller-customer-preview td:nth-child(2) { width: 34%; }
    .reseller-customer-preview .preview-total { display: flex; justify-content: space-between; padding-top: 10px; font-weight: 700; }
    .reseller-lock { width: min(440px, 100%); margin: 12vh auto 0; }
    .reseller-lock .field { margin: 16px 0; }
    .reseller-portal-hidden { display: none !important; }
    body.dark #resellerPortal { color: #f1f1f1; background: #111; }
    body.dark .reseller-portal-header, body.dark .reseller-portal-card { background: #191919; border-color: #373737; box-shadow: none; }
    body.dark .reseller-price-overrides { background: #151515; border-color: #373737; }
    body.dark .reseller-price-row { background: #191919; border-color: #373737; }
    body.dark .reseller-order-table th, body.dark .reseller-order-table td, body.dark .reseller-order-total { border-color: #373737; }
    /* Reseller portal is a customer-facing light workspace, regardless of the saved site theme. */
    body.reseller-portal-mode,
    html.dark body.reseller-portal-mode { background: #f7f7f5; color: #171717; }
    body.reseller-portal-mode #resellerPortal,
    html.dark body.reseller-portal-mode #resellerPortal { background: #f7f7f5; color: #171717; }
    body.reseller-portal-mode .reseller-portal-header,
    body.reseller-portal-mode .reseller-portal-card,
    html.dark body.reseller-portal-mode .reseller-portal-header,
    html.dark body.reseller-portal-mode .reseller-portal-card { background: #fff; color: #171717; border-color: #deded8; box-shadow: 0 12px 30px rgba(30, 30, 20, .08); }
    body.reseller-portal-mode input,
    body.reseller-portal-mode select,
    html.dark body.reseller-portal-mode input,
    html.dark body.reseller-portal-mode select { background: #fff; color: #171717; border-color: #cfcfc8; }
    body.reseller-portal-mode .reseller-retail-head,
    html.dark body.reseller-portal-mode .reseller-retail-head { background: #fff; color: #171717; }

    @media (max-width: 820px) {
      #resellerPortal { padding: 14px; }
      .reseller-portal-header { align-items: flex-start; flex-direction: column; padding: 16px; }
      .reseller-portal-grid { grid-template-columns: 1fr; }
      .reseller-price-header { grid-template-columns: 1fr 1fr; }
      .reseller-price-header span:first-child { grid-column: 1 / -1; }
      .reseller-price-row { grid-template-columns: 1fr 1fr; }
      .reseller-price-row > span:first-child { grid-column: 1 / -1; }
      .reseller-portal-controls, .reseller-portal-code { grid-template-columns: 1fr; }
      .reseller-order-number { grid-template-columns: 1fr; }
      .reseller-order-table { font-size: 12px; }
      .reseller-preview-modal { padding: 0; }
      .reseller-preview-modal-card { width: 100%; max-height: 100dvh; }
      .reseller-retail-modal { padding: 0; }
      .reseller-retail-modal-card { height: 100dvh; }
      .reseller-retail-modal-head { padding: 14px; }
      .reseller-retail-modal-tools { padding: 10px 14px; }
      .reseller-retail-modal-tools .field { min-width: 0; width: 100%; }
      .reseller-retail-modal-body { padding: 0 14px 14px; }
      .reseller-retail-row { grid-template-columns: minmax(130px, 1fr) 90px 70px 100px 100px 110px; gap: 6px; font-size: 12px; }
    }

    @media (max-width: 980px) {
      .reseller-admin-grid {
        grid-template-columns: 1fr;
      }
    }

    .game-admin-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
      gap: 18px;
      align-items: start;
    }

    .game-admin-card {
      border: 1px solid var(--line);
      background: #fff;
      padding: 16px;
      margin: 14px 0;
    }

    .game-admin-card h4 {
      margin: 0 0 12px;
      font-size: 14px;
      letter-spacing: .02em;
    }

    .game-admin-compact {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .game-admin-upload {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: end;
    }

    .game-admin-color-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .game-word-bank-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .game-word-bank-grid textarea {
      min-height: 138px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      line-height: 1.55;
    }

    .game-admin-color-grid label {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }

    .game-admin-color-grid input[type="color"] {
      width: 34px;
      height: 34px;
      padding: 0;
    }

    .game-data-scroll {
      max-height: 360px;
      overflow: auto;
      border: 1px solid var(--line);
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0;
    }

    .field {
      display: grid;
      gap: 6px;
    }

    .field.full { grid-column: 1 / -1; }
    .field label { color: var(--muted); font-size: 12px; }

    .module-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .module-card,
    .module-inline {
      display: grid;
      gap: 8px;
      padding: 14px;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    .module-card {
      min-height: 126px;
      align-content: space-between;
    }

    body.dark .module-card,
    body.dark .module-inline {
      background: #171717;
      border-color: #343434;
    }

    .module-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.45;
    }

    .module-toggle span {
      display: grid;
      gap: 4px;
    }

    .module-toggle strong {
      font-weight: 500;
      text-transform: uppercase;
    }

    .module-toggle small {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .module-toggle input {
      width: 46px;
      min-width: 46px;
      height: 26px;
      min-height: 26px;
      appearance: none;
      padding: 0;
      background: #4a4a4a;
      border: 1px solid #2b2b2b;
      border-radius: 999px;
      position: relative;
      box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .module-toggle input::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid rgba(0,0,0,.18);
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0,0,0,.28);
      transition: transform .18s ease;
    }

    .module-toggle input:checked {
      background: var(--red);
      border-color: #c92725;
      box-shadow: 0 0 0 3px rgba(255,53,51,.12), inset 0 1px 2px rgba(0,0,0,.12);
    }

    .module-toggle input:checked::after {
      transform: translateX(20px);
    }

    .module-toggle input:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    body.dark .module-toggle input {
      background: #2e2e2e;
      border-color: #565656;
    }

    body.dark .module-toggle input:checked {
      background: var(--red);
      border-color: #ff5a58;
    }

    #keycapModelVisibilityControl {
      margin: 14px 0 16px;
    }

    .text-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      gap: 12px;
      margin: 18px 0;
    }

    .text-toolbar .field {
      min-width: 220px;
    }

    .text-editor {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .text-row {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 12px;
      padding: 12px;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    body.dark .text-row {
      background: #171717;
      border-color: #343434;
    }

    .text-row code {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      white-space: normal;
      word-break: break-word;
    }

    input, textarea, select {
      width: 100%;
      min-height: 40px;
      padding: 9px 10px;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
    }

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

    .bulk-box {
      margin-top: 22px;
      padding: 16px;
      border: 1px solid var(--line);
      background: var(--soft);
    }

    .admin-update-layout {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .admin-update-list {
      display: grid;
      gap: 8px;
      max-height: 620px;
      overflow: auto;
      padding-right: 4px;
    }

    .admin-update-item {
      display: grid;
      gap: 6px;
      padding: 12px;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      text-align: left;
    }

    .admin-update-item.active {
      border-color: var(--red);
      box-shadow: 0 12px 28px rgba(238,78,55,.12);
    }

    .admin-update-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .admin-update-head strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wechat-config-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .file-upload {
      display: grid;
      gap: 8px;
      padding: 14px;
      background: var(--paper);
      border: 1px dashed var(--line);
      border-radius: 12px;
    }

    body.dark .file-upload {
      background: #161616;
      border-color: #474747;
    }

    .upload-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      margin-top: 8px;
    }

    .upload-row input {
      min-height: 42px;
    }

    .upload-row .btn {
      min-height: 42px;
    }

    .external-media-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(160px, .35fr) auto;
      gap: 8px;
      margin-top: 10px;
    }

    .external-media-row input,
    .external-media-row .btn {
      min-height: 42px;
    }

    .option-project-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .option-project-card {
      min-height: 136px;
      display: grid;
      align-content: space-between;
      gap: 18px;
      padding: 18px;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid transparent;
      box-shadow: var(--shadow);
      text-align: left;
      border-radius: 14px;
      transition: .22s ease;
    }

    .option-project-card:hover,
    .option-project-card.active {
      transform: translateY(-3px);
      border-color: var(--ink);
      box-shadow: var(--lifted);
    }

    body.dark .option-project-card {
      color: #fff;
      background: #151515;
      border-color: #262626;
    }

    body.dark .option-project-card:hover,
    body.dark .option-project-card.active {
      border-color: #f3f3f0;
    }

    .option-project-kicker {
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .option-import-panel[hidden] {
      display: none;
    }

    .option-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 14px 0;
    }

    .option-summary-item {
      padding: 12px;
      background: var(--paper);
      border-radius: 10px;
      box-shadow: var(--shadow);
    }

    body.dark .option-summary-item {
      background: #171717;
    }

    .option-list-block {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    body.dark .option-list-block {
      border-top-color: #343434;
    }

    .option-list-table td {
      vertical-align: top;
    }

    .option-list-filter {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px) auto;
      gap: 10px;
      align-items: end;
      margin: 12px 0 14px;
      padding: 12px;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    body.dark .option-list-filter {
      background: #171717;
      border-color: #343434;
    }

    .option-list-filter label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.3;
    }

    .option-list-filter input,
    .option-list-filter select {
      min-width: 0;
      min-height: 38px;
      padding: 0 10px;
      font-size: 12px;
    }

    .option-list-remark {
      max-width: 240px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      white-space: normal;
    }

    .option-background-panel {
      margin-top: 16px;
      padding: 14px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    body.dark .option-background-panel {
      background: #151515;
      border-color: #343434;
    }

    .option-background-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    body.dark .option-background-head {
      border-bottom-color: #343434;
    }

    .option-background-head h4 {
      margin: 0 0 4px;
      font-size: 14px;
      font-weight: 600;
    }

    .option-background-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
      gap: 12px;
      align-items: stretch;
      padding-top: 12px;
    }

    .option-background-field {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .option-background-field textarea {
      min-height: 76px;
      resize: vertical;
    }

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

    .option-background-actions input[type="file"] {
      max-width: 240px;
    }

    .option-background-preview {
      display: grid;
      place-items: center;
      min-height: 118px;
      overflow: hidden;
      color: var(--muted);
      font-size: 12px;
      background: rgba(0,0,0,.03);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    body.dark .option-background-preview {
      background: rgba(255,255,255,.04);
      border-color: #343434;
    }

    .option-background-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .option-bulk-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }

    .option-bulk-meta {
      color: var(--muted);
      font-size: 12px;
    }

    .option-select-cell {
      width: 38px;
      text-align: center;
    }

    .option-select-cell input {
      width: 16px;
      height: 16px;
      accent-color: var(--red);
    }

    .option-toggle-cell {
      text-align: center;
      white-space: nowrap;
    }

    .option-toggle-cell input {
      width: 34px;
      height: 18px;
      accent-color: #5fcfc4;
    }

    .option-image-url {
      max-width: 260px;
      color: var(--muted);
      overflow: hidden;
      font-size: 11px;
      line-height: 1.45;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .option-image-url-control {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      gap: 8px;
      align-items: center;
      min-width: min(390px, 34vw);
    }

    .option-image-url-control input {
      min-width: 0;
      min-height: 34px;
      font-size: 11px;
      padding: 0 10px;
    }

    .option-image-url-control .admin-action {
      min-height: 34px;
      white-space: nowrap;
    }

    .option-list-editor {
      display: grid;
      gap: 5px;
      min-width: 108px;
    }

    .option-list-editor.wide {
      min-width: 180px;
    }

    .option-list-editor.compact {
      min-width: 86px;
    }

    .option-list-editor.image {
      min-width: min(300px, 30vw);
    }

    .option-list-editor.qc {
      min-width: min(300px, 30vw);
    }

    .option-list-editor.rules {
      min-width: 230px;
    }

    .option-list-editor.rules select[multiple] {
      min-height: 132px;
      white-space: normal;
    }

    .option-rule-count {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .option-qc-toggle {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .option-qc-toggle input {
      width: 16px;
      min-height: 16px;
      height: 16px;
      accent-color: #5fcfc4;
    }

    .option-qc-upload {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
    }

    .option-image-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 6px;
      align-items: center;
    }

    .option-image-actions input {
      min-width: 0;
      font-size: 11px;
    }

    .option-image-actions .btn {
      min-height: 30px;
      padding: 0 8px;
      font-size: 11px;
      white-space: nowrap;
    }

    .option-qc-upload input {
      font-size: 11px;
    }

    .option-qc-upload .btn {
      min-height: 34px;
      padding: 0 10px;
      font-size: 11px;
      white-space: nowrap;
    }

    .option-list-editor input,
    .option-list-editor select,
    .option-list-editor textarea {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      padding: 6px 8px;
      font-size: 12px;
      line-height: 1.35;
    }

    .option-list-editor textarea {
      min-height: 52px;
      resize: vertical;
    }

    .option-list-editor .meta-hint {
      display: block;
      max-width: 100%;
      overflow: hidden;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .option-row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .category-manager {
      margin-top: 18px;
      padding: 14px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    body.dark .category-manager {
      background: #151515;
      border-color: #343434;
    }

    .category-manager h4 {
      margin: 0 0 12px;
      font-size: 13px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .category-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px auto;
      gap: 8px;
      margin-bottom: 12px;
    }

    .category-form input {
      min-height: 38px;
      font-size: 12px;
    }

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

    .category-row {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) 92px minmax(0, .95fr) auto auto;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      background: var(--soft);
      border-radius: 10px;
    }

    .category-row.dragging {
      opacity: .48;
    }

    .category-row.drag-over {
      outline: 2px solid var(--red);
      outline-offset: 2px;
    }

    .category-drag-handle {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      color: var(--muted);
      cursor: grab;
      border: 1px solid var(--line);
      border-radius: 999px;
      user-select: none;
    }

    .category-drag-handle:active {
      cursor: grabbing;
    }

    body.dark .category-row {
      background: #202020;
    }

    .category-row span,
    .category-row small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .category-row input {
      min-width: 0;
      min-height: 34px;
      padding: 0 9px;
      font-size: 12px;
    }

    .option-edit-row td {
      background: rgba(255,53,51,.045);
    }

    body.dark .option-edit-row td {
      background: rgba(255,255,255,.045);
    }

    .inline-option-fields {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      min-width: 360px;
    }

    .inline-option-fields label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.3;
    }

    .inline-option-fields input,
    .inline-option-fields select,
    .inline-option-fields textarea {
      min-height: 34px;
      padding: 7px 8px;
      font-size: 12px;
    }

    .inline-option-fields textarea {
      min-height: 58px;
    }

    .inline-option-fields .span-2 {
      grid-column: 1 / -1;
    }

    .inline-option-fields .span-3 {
      grid-column: 1 / -1;
    }

    .media-grid {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .media-card {
      position: relative;
      display: grid;
      grid-template-columns: auto 92px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px;
      background: var(--paper);
      box-shadow: var(--shadow);
      border-radius: 12px;
    }

    body.dark .media-card {
      background: #151515;
    }

    .media-select {
      width: 18px;
      min-width: 18px;
      height: 18px;
      min-height: 18px;
      accent-color: var(--red);
    }

    .media-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }

    .media-thumb {
      position: relative;
      width: 92px;
      height: 62px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: var(--soft);
      border-radius: 8px;
    }

    .media-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .media-preview {
      position: absolute;
      left: 104px;
      top: 50%;
      z-index: 20;
      width: min(420px, 52vw);
      max-height: 300px;
      padding: 8px;
      object-fit: contain;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--lifted);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) scale(.96);
      transition: opacity .16s ease, transform .16s ease;
    }

    body.dark .media-preview {
      background: #111;
      border-color: #393939;
    }

    .media-thumb:hover .media-preview {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    .media-info {
      min-width: 0;
    }

    .media-info strong {
      display: block;
      overflow: hidden;
      font-size: 13px;
      font-weight: 500;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .media-info small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .media-url {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin-action {
      min-height: 30px;
      padding: 0 10px;
      color: #fff;
      background: var(--red);
      border-radius: 999px;
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 16px;
      font-size: 13px;
    }

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

    .data-table th {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 22px;
      z-index: 140;
      padding: 10px 14px;
      color: #fff;
      background: var(--ink);
      opacity: 0;
      transform: translateX(-50%) translateY(18px);
      pointer-events: none;
      transition: .2s ease;
      border-radius: 10px;
    }

    body.dark .toast {
      color: #111;
      background: #fff;
      border: 1px solid #555;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 1050px) {
      .hero, .lab-body, .admin-app, .agent-page, .resource-page, .admin-update-layout, .updates-toolbar, .update-card { grid-template-columns: 1fr; }
      .hero-copy { border-left: 0; border-top: 1px solid var(--line); }
      .lab-modal { padding: 0; }
      .lab-shell { width: 100vw; height: 100vh; border-radius: 0; }
      .steps-panel { border-left: 0; border-top: 1px solid var(--line); }
      body.dark .steps-panel { border-top-color: #343434; }
      .admin-side { min-height: auto; }
      .drawer,
      #purchaseDrawer { width: min(720px, calc(100vw - 28px)); }
      .purchase-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 22px; }
      .admin-model-preview { grid-template-columns: 1fr; }
      .admin-model-stage { min-height: 0; }
      .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .resource-filters { position: static; }
      .build-receipt {
        width: min(640px, calc(100% - 28px));
        height: min(760px, calc(100dvh - 28px));
        max-height: calc(100dvh - 28px);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
        grid-template-areas:
          "head"
          "snapshot"
          "metrics"
          "list"
          "pages"
          "actions";
      }
      .receipt-snapshot {
        justify-items: center;
        min-height: 0;
        max-height: min(420px, 46dvh);
      }
      .receipt-mask {
        width: min(100%, 62dvh);
      }
      .receipt-actions {
        grid-template-columns: 1fr 1fr;
      }
      .receipt-code {
        grid-column: 1 / -1;
      }
      .receipt-snapshot-text {
        gap: 9px;
      }
      .receipt-snapshot-qr-list {
        gap: 5px;
      }
      .receipt-snapshot-qr {
        width: 42px;
        height: 42px;
      }
      .model3d-part-head,
      .model3d-part-body {
        grid-template-columns: 1fr;
      }
      .model3d-part-actions {
        justify-content: flex-start;
      }
      .bottom-case-pair-grid,
      .bottom-case-pair-card {
        grid-template-columns: 1fr;
      }
      .case-color-admin-row {
        grid-template-columns: minmax(80px, .6fr) 1fr 1fr;
      }
      .case-color-hex-field,
      .case-color-admin-row .btn {
        grid-column: 1 / -1;
      }
      .keycap-layer-upload {
        grid-template-columns: minmax(136px, max-content) minmax(0, 1fr) auto auto auto;
      }
      .keycap-layer-upload input[type="text"],
      .keycap-layer-upload .model3d-url-input {
        grid-column: 1 / -1;
      }
      .keycap-preset-layout {
        grid-template-columns: 1fr;
      }
      .keycap-preset-tools,
      .keycap-preset-save-current,
      .keycap-preset-action-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 820px), (pointer: coarse) and (max-width: 1180px), (pointer: coarse) and (max-height: 560px) {
      .site-top {
        height: 64px;
        min-height: 64px;
        max-height: 64px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding-top: 0;
        padding-bottom: 0;
      }

      .site-top .logo {
        min-width: 0;
      }

      .site-top > .row-actions {
        grid-column: 3;
        grid-row: 1;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 6px;
      }

      .site-top > .row-actions .btn {
        min-height: 34px;
        padding: 0 9px;
        font-size: 11px;
        white-space: nowrap;
      }

      .site-top > .row-actions .language-select {
        width: 96px;
        min-width: 96px;
        padding-right: 18px;
      }

      .site-top > .row-actions .icon-toggle {
        width: 34px;
        padding: 0;
      }

      .nav-links {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0;
        -webkit-overflow-scrolling: touch;
      }

      .hero-visual { min-height: 360px; }
      .community-grid { grid-template-columns: 1fr; }
      .stats, .gallery-grid, .build-grid, .agent-grid, .agent-directory .agent-grid, .side-metrics, .purchase-grid, .form-grid, .resource-list, .module-grid, .option-project-grid, .option-summary, .media-grid, .keycap-layer-row, .keycap-color-fields { grid-template-columns: 1fr; }
      .purchase-qr-list { grid-template-columns: 1fr 1fr; }
      .purchase-code-row span { font-size: 18px; }
      .purchase-code-row strong { font-size: 22px; }
      .purchase-agent-row { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); }
      .keycap-layer-upload { grid-template-columns: 1fr; }
      .upload-row,
      .external-media-row { grid-template-columns: 1fr; }
      .option-list-filter { grid-template-columns: 1fr; }
      .section-head, .hero-actions, .showcase-tools { align-items: stretch; flex-direction: column; }
      .text-row { grid-template-columns: 1fr; }
      .lab-modal { align-items: stretch; padding: 0; }
      body.mobile-lab-open {
        overflow: hidden;
      }
      body.mobile-lab-open > .site-top,
      body.mobile-lab-open > main,
      body.mobile-lab-open > .site-footer {
        display: none;
      }
      body.mobile-lab-open .lab-modal.open {
        position: static;
        display: block;
        min-height: 100dvh;
        background: var(--paper);
      }
      body.dark.mobile-lab-open .lab-modal.open {
        background: var(--panel);
      }
      .lab-shell {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        grid-template-rows: 48px minmax(0, 1fr);
        box-shadow: none;
        border-radius: 0;
      }
      .lab-top {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 6px;
        padding: 0 10px;
      }
      .group-buy-summary {
        gap: 5px;
        max-width: 42vw;
        padding: 0;
        overflow: hidden;
        font-size: 10px;
        text-overflow: ellipsis;
      }
      #lab.keycap-preview-mode .lab-top {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 0 12px;
      }
      #lab.keycap-preview-mode .lab-shell {
        grid-template-rows: 48px minmax(0, 1fr) 48px;
      }
      #lab.keycap-preview-mode .lab-footer-bar {
        min-height: 48px;
      }
      #lab.keycap-preview-mode .keycap-system-title {
        font-size: 12px;
      }
      body.mobile-lab-open #lab.keycap-preview-mode {
        position: fixed;
        inset: 0;
        min-height: 100dvh;
        overflow: hidden;
        background: var(--paper);
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-shell {
        width: 100vw;
        height: 100dvh;
        display: grid;
        grid-template-rows: minmax(0, 1fr) 48px;
        overflow: hidden;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 18;
        height: 46px;
        padding: 0 12px;
        background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0));
        border-bottom: 0;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        animation: mobileLabTopHide .36s ease 2.4s forwards;
      }
      body.dark.mobile-lab-open #lab.keycap-preview-mode .lab-top {
        background: linear-gradient(180deg, rgba(32,32,32,.94), rgba(32,32,32,0));
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-shell:focus-within .lab-top,
      body.mobile-lab-open #lab.keycap-preview-mode .lab-shell:hover .lab-top {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        animation: none;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-system-title {
        display: block;
        font-size: 13px;
      }
      body.mobile-lab-open #lab.keycap-preview-mode #closeLab {
        position: fixed;
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        z-index: 34;
        width: 34px;
        height: 34px;
        pointer-events: auto;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-body {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-preview {
        --mobile-model-fit: 1;
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        position: relative;
        top: auto;
        padding-bottom: 142px;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-stage-wrap {
        padding: 0;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-preset-float {
        position: fixed;
        left: auto;
        right: max(16px, env(safe-area-inset-right));
        bottom: calc(220px + env(safe-area-inset-bottom));
        z-index: 27;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-preset-float .keycap-preset-custom-button {
        width: 56px;
        height: 48px;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-preset-helper-bubble {
        left: auto;
        right: calc(100% + 8px);
        bottom: 8px;
        max-width: 188px;
        border-radius: 14px 14px 4px 14px;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-preset-float .keycap-preset-custom-list {
        position: fixed;
        bottom: calc(292px + env(safe-area-inset-bottom));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(320px, calc(100vw - 48px));
        max-height: min(42vh, 440px);
        z-index: 86;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-snapshot-btn {
        position: fixed;
        left: max(16px, env(safe-area-inset-left));
        right: auto;
        bottom: calc(220px + env(safe-area-inset-bottom));
        z-index: 27;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-footer-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 24;
        min-height: 44px;
        align-items: flex-end;
        justify-content: center;
        padding: 0 max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        background: linear-gradient(180deg, rgba(247,247,244,0), rgba(247,247,244,.92) 34%, rgba(247,247,244,.98));
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-footer-bar::-webkit-scrollbar {
        display: none;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-footer-bar .lab-3d-toolbar {
        width: max-content;
        max-width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 6px;
        padding: 0;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-footer-bar .lab-3d-toolbar:not(.active) {
        display: none;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .lab-3d-toolbar .btn {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-selection-bar {
        position: fixed;
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: calc(54px + env(safe-area-inset-bottom));
        top: auto;
        z-index: 26;
        width: auto !important;
        max-width: none !important;
        min-height: 0;
        grid-template-columns: max-content 38px max-content max-content max-content;
        gap: 6px;
        align-items: center;
        padding: 8px;
        border-radius: 18px;
        transform: none;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-selection-bar::-webkit-scrollbar {
        display: none;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .case-color-popover {
        position: fixed;
        left: 50%;
        right: auto;
        top: auto;
        bottom: calc(116px + env(safe-area-inset-bottom));
        width: max-content;
        max-width: calc(100vw - 20px);
        grid-template-columns: repeat(2, max-content);
        transform: translateX(-50%);
      }
      body.mobile-lab-open .case-color-popover.mobile-detached {
        position: fixed;
        left: 50%;
        right: auto;
        top: auto;
        bottom: calc(116px + env(safe-area-inset-bottom));
        z-index: 86;
        width: max-content;
        max-width: calc(100vw - 20px);
        min-height: 0;
        max-height: min(42vh, 360px);
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 6px;
        padding: 8px;
        background: rgba(255, 255, 255, .46);
        border: 1px solid rgba(255, 255, 255, .68);
        border-radius: 24px;
        box-shadow: 0 22px 58px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .58);
        transform: translateX(-50%);
        backdrop-filter: blur(26px) saturate(1.32);
        -webkit-backdrop-filter: blur(26px) saturate(1.32);
        overflow: auto;
        overscroll-behavior: contain;
      }
      body.dark.mobile-lab-open .case-color-popover.mobile-detached {
        background: rgba(28, 28, 28, .5);
        border-color: rgba(255, 255, 255, .18);
        box-shadow: 0 24px 62px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.1);
      }
      body.mobile-lab-open .case-color-popover.mobile-detached .case-color-row {
        grid-template-columns: max-content;
      }
      body.mobile-lab-open .case-color-popover.mobile-detached .case-color-custom {
        display: none;
      }
      body.mobile-lab-open .case-color-popover.mobile-detached .case-color-select {
        width: 132px;
        height: 38px;
        min-height: 38px;
        padding: 0 10px;
        font-size: 11px;
        border-radius: var(--mesh-control-radius);
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-mode-toggle {
        grid-column: auto;
        width: max-content;
        justify-content: center;
        gap: 4px;
        padding: 3px;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-mode-toggle button {
        flex: 0 0 auto;
        min-width: 42px;
        height: 32px;
        padding: 0 7px;
        font-size: 11px;
        font-weight: 400;
        white-space: nowrap;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-color-button {
        width: 38px;
        height: 38px;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-selection-bar label {
        grid-column: auto;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-selection-bar input,
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-selection-bar select,
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-palette-picker > button {
        height: 38px;
        min-height: 38px;
        padding: 0 10px;
        font-size: 11px;
        border-radius: var(--mesh-control-radius);
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-preset-front {
        width: 56px;
        min-width: 0;
        justify-items: end;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-palette-picker {
        grid-column: auto;
        min-width: max-content;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-palette-picker > button {
        width: max-content;
        min-width: 132px;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-color-popover,
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-palette-list,
      body.mobile-lab-open .mesh-palette-list.mobile-detached {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 80;
        width: 100vw;
        min-height: min(58dvh, 420px);
        max-height: min(72dvh, 520px);
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-color-area {
        height: min(42dvh, 260px);
      }
      body.dark.mobile-lab-open #lab.keycap-preview-mode .lab-footer-bar {
        background: linear-gradient(180deg, rgba(32,32,32,0), rgba(32,32,32,.92) 34%, rgba(32,32,32,.98));
      }
      @keyframes mobileLabTopHide {
        to {
          opacity: 0;
          pointer-events: none;
          transform: translateY(-100%);
        }
      }
      .keycap-selection-bar {
        left: 12px;
        right: 12px;
        width: auto;
        grid-template-columns: 42px 1fr;
        transform: none;
      }
      .keycap-mode-toggle {
        grid-column: 1 / -1;
        justify-self: start;
      }
      .keycap-selection-bar label {
        grid-column: 1 / -1;
      }
      .lab-title {
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .lab-code { display: none; }
      .lab-body {
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
      }
      .lab-preview {
        width: min(100vw, calc(34dvh * 16 / 9));
        max-width: 100%;
        justify-self: center;
        aspect-ratio: var(--lab-stage-ratio, 16 / 9);
        min-height: 0;
        max-height: none;
        position: sticky;
        top: 0;
        z-index: 4;
      }
      .lab-stage-wrap {
        width: 100%;
        height: 100%;
        padding: 12px;
      }
      .lab-stage {
        width: 100%;
        max-width: 100%;
      }
      .steps-panel {
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
      }
      .step-tabs {
        gap: 9px;
        padding: 11px 12px 10px;
      }
      .step-current { gap: 2px; }
      .step-kicker { font-size: 10px; }
      .step-current-name { font-size: 18px; }
      .step-current-meta { display: none; }
      .step-nav { gap: 6px; }
      .step-progress { gap: 8px; }
      .step-progress-mark { height: 4px; }
      .step-tab { min-height: 34px; font-size: 11px; }
      .price { font-size: 18px; }
      .weight { font-size: 11px; }
      .option-scroll {
        padding: 10px 12px 14px;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      body.mobile-receipt-open {
        overflow: hidden;
      }
      body.mobile-receipt-open .lab-modal.open {
        position: fixed;
        inset: 0;
        min-height: 100dvh;
        overflow: hidden;
      }
      body.mobile-receipt-open .lab-shell {
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
      }
      body.mobile-receipt-open .lab-top {
        display: none;
      }
      body.mobile-receipt-open .lab-body {
        display: none;
      }
      body.mobile-receipt-open .build-receipt.open {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-height: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
        transform: none;
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        animation: none;
      }
      body.mobile-receipt-open .receipt-snapshot {
        flex: 0 0 auto;
        min-height: 0;
        max-height: min(360px, 42dvh);
        justify-items: center;
        width: 100%;
      }
      body.mobile-receipt-open .receipt-mask {
        width: min(100%, 58dvh);
      }
      body.mobile-receipt-open .receipt-list {
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }
      body.mobile-receipt-open .receipt-actions {
        flex: 0 0 auto;
        margin-top: auto;
      }
      .qc-notice-panel.open {
        position: fixed;
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        width: min(430px, calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));
        max-height: min(680px, calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        transform: translate(-50%, -50%);
        border-radius: 18px;
        padding: 14px;
      }
      .qc-notice-body {
        max-height: min(520px, 58dvh);
      }
      .qc-notice-title h3 {
        font-size: 20px;
      }
      .qc-notice-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .ai-render-panel {
        position: fixed;
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        top: max(54px, calc(10px + env(safe-area-inset-top)));
        bottom: calc(62px + env(safe-area-inset-bottom));
        width: auto;
        max-height: none;
        transform: none;
        border-radius: 18px;
        gap: 10px;
        padding: 12px;
      }
      .ai-render-title h3 {
        font-size: 18px;
      }
      .ai-render-title p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .ai-render-body {
        gap: 10px;
      }
      .ai-select-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .ai-select-field select {
        min-height: 40px;
        border-radius: 12px;
      }
      .ai-render-actions {
        grid-template-columns: 1fr;
      }
      .option-card {
        min-height: 44px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        margin-bottom: 7px;
        padding: 9px 10px;
      }
      .option-card .swatch { display: none; }
      .option-name {
        font-size: 13px;
        line-height: 1.2;
      }
      .option-meta {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.25;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      .option-price {
        align-self: center;
        font-size: 12px;
      }
      .lab-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px 12px;
      }
      .action-metrics {
        justify-content: flex-start;
        column-gap: 10px;
        row-gap: 2px;
      }
      #finishBuild {
        min-width: 116px;
      }
      .media-card { grid-template-columns: 78px minmax(0, 1fr); }
      .media-card .btn { grid-column: 1 / -1; }
      .media-thumb { width: 78px; height: 54px; }
      .media-preview { left: 0; top: 66px; width: min(320px, 82vw); transform: scale(.96); }
      .media-thumb:hover .media-preview { transform: scale(1); }
      .category-form,
      .category-row { grid-template-columns: 1fr; }
    }

    @media (max-width: 820px) and (orientation: landscape), (pointer: coarse) and (max-width: 1180px) and (orientation: landscape), (pointer: coarse) and (max-height: 560px) and (orientation: landscape) {
      body.mobile-lab-open #lab.keycap-preview-mode .lab-preview {
        padding-bottom: 110px;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-selection-bar {
        grid-template-columns: max-content 42px max-content max-content max-content;
        bottom: calc(50px + env(safe-area-inset-bottom));
      }
      body.mobile-lab-open #lab.keycap-preview-mode .case-color-popover {
        bottom: calc(120px + env(safe-area-inset-bottom));
      }
      body.mobile-lab-open .case-color-popover.mobile-detached {
        bottom: calc(112px + env(safe-area-inset-bottom));
      }
      body.mobile-lab-open #lab.keycap-preview-mode .keycap-mode-toggle {
        grid-column: auto;
      }
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-palette-picker,
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-palette-picker[data-mesh-palette="gmk"],
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-palette-picker[data-mesh-palette="pantone"],
      body.mobile-lab-open #lab.keycap-preview-mode .mesh-palette-picker[data-mesh-palette="ral"] {
        grid-column: auto;
      }
    }

    body.embed-lab-mode .lab-shell {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
      box-shadow: none;
    }

    body.embed-lab-mode .lab-body {
      height: calc(100vh - 56px);
      grid-template-columns: minmax(0, 1fr) var(--lab-side-width, 360px);
      grid-template-rows: minmax(0, 1fr);
      overflow: hidden;
    }

    body.embed-lab-mode .lab-preview {
      width: 100%;
      max-width: none;
      height: 100%;
      aspect-ratio: auto;
      position: relative;
      top: auto;
      justify-self: stretch;
    }

    body.embed-lab-mode .lab-stage {
      width: var(--embed-stage-width, 100%);
      height: var(--embed-stage-height, 100%);
    }

    body.embed-lab-mode.embed-render-only-mode .lab-modal {
      display: grid;
      place-items: center;
    }

    body.embed-lab-mode.embed-render-only-mode .lab-shell {
      width: min(100vw, calc(100vh * 16 / 9));
      height: min(100vh, calc(100vw * 9 / 16));
      max-width: 100vw;
      max-height: 100vh;
      grid-template-rows: minmax(0, 1fr);
    }

    body.embed-lab-mode.embed-render-only-mode .lab-body {
      height: 100%;
      grid-template-columns: minmax(0, 1fr);
    }

    body.embed-lab-mode.embed-render-only-mode .lab-preview {
      width: 100%;
      height: 100%;
      aspect-ratio: 16 / 9;
      justify-self: stretch;
    }

    body.embed-lab-mode.embed-render-only-mode #lab.keycap-preview-mode .lab-shell {
      height: min(100vh, calc(100vw * 9 / 16));
      grid-template-rows: minmax(0, 1fr);
    }

    body.embed-lab-mode.embed-render-only-mode #lab.keycap-preview-mode .lab-footer-bar {
      position: absolute;
      left: 50%;
      bottom: 18px;
      min-height: 0;
      display: flex;
      border: 0;
      background: transparent;
      transform: translateX(-50%);
    }

    body.embed-lab-mode.embed-render-only-mode #lab.keycap-preview-mode .lab-shell {
      width: 100vw;
      height: 100vh;
      max-width: 100vw;
      max-height: 100vh;
    }

    body.embed-lab-mode.embed-render-only-mode #lab.keycap-preview-mode .lab-preview,
    body.embed-lab-mode.embed-render-only-mode #lab.keycap-preview-mode .lab-stage {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
    }

    body.embed-lab-mode.embed-render-only-mode #lab.keycap-preview-mode .lab-footer-bar .lab-3d-toolbar {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      max-width: calc(100vw - 96px);
      overflow-x: auto;
      overflow-y: hidden;
      padding: 0 4px 4px;
      scrollbar-width: none;
      white-space: nowrap;
    }

    body.embed-lab-mode.embed-render-only-mode #lab.keycap-preview-mode .lab-footer-bar .lab-3d-toolbar::-webkit-scrollbar {
      display: none;
    }

    body.embed-lab-mode.embed-render-only-mode #lab.keycap-preview-mode .lab-footer-bar .lab-3d-toolbar .btn {
      flex: 0 0 auto;
      min-height: 34px;
      white-space: nowrap;
    }

    body.embed-lab-mode .lab-stage .keyboard-layer,
    body.embed-lab-mode .lab-backdrop img {
      object-fit: contain;
    }

    .keyboard-demo-hud {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 99999;
      padding: 9px 12px;
      border: 1px solid rgba(0, 0, 0, .12);
      border-radius: 999px;
      background: rgba(255, 255, 255, .74);
      color: #111;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
      backdrop-filter: blur(16px);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      pointer-events: none;
    }

    body.dark .keyboard-demo-hud {
      border-color: rgba(255, 255, 255, .16);
      background: rgba(30, 30, 30, .72);
      color: #fff;
    }

    .keyboard-demo-hud.active {
      color: #2879ff;
    }

    @media (max-width: 820px), (pointer: coarse) and (max-width: 1180px), (pointer: coarse) and (max-height: 560px) {
      .site-top {
        grid-template-columns: 92px minmax(0, 1fr) 92px;
        gap: 0;
        padding: 0 16px;
      }

      .mobile-menu-button {
        display: inline-flex;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
      }

      .site-top .logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        max-width: 100%;
        justify-content: center;
      }

      .site-top .logo-text {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .site-top .logo-image {
        max-width: 138px;
      }

      .site-top > .nav-links,
      .site-top > .row-actions {
        display: none !important;
      }

      .mobile-nav-overlay,
      .mobile-nav-drawer {
        display: block;
      }
    }