:root {
      --bg: #070b14;
      --surface: rgba(12, 18, 35, 0.7);
      --glass: rgba(255, 255, 255, 0.04);
      --border: rgba(255, 255, 255, 0.06);
      --shadow: rgba(0, 0, 0, 0.3);
      --text: #e8ecf4;
      /* Map old variable names to Aurora values for inline style compatibility */
      --ink: #e8ecf4;
      --ink2: rgba(232, 236, 244, 0.75);
      --ink3: rgba(232, 236, 244, 0.55);
      --indigo: #00e59e;
      --indigo2: #00b4d8;
      --violet: #7b2ff7;
      --rose: #ff6b9d;
      --sky: #00b4d8;
      --green: #00e59e;
      --amber: #f59e0b;
      --red: #ff6b9d;
      --radius-xl: 20px;
      --radius-lg: 16px;
      --radius-md: 12px;
      --radius-sm: 8px;
      --font: 'Sora', 'Noto Sans SC', system-ui, sans-serif;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    [v-cloak] { display: none !important; }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ===== Aurora Background ===== */
    .aurora-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    .wave {
      position: absolute; width: 200%; height: 300px;
      filter: blur(80px); opacity: 0.25;
      animation: aurora 12s ease-in-out infinite alternate;
    }
    .wave:nth-child(1) {
      top: -50px; left: -30%;
      background: linear-gradient(90deg, transparent, var(--green), var(--indigo2), transparent);
      animation-duration: 12s;
    }
    .wave:nth-child(2) {
      top: 60px; left: -10%;
      background: linear-gradient(90deg, transparent, var(--violet), var(--rose), transparent);
      animation-duration: 16s; animation-delay: -4s;
    }
    .wave:nth-child(3) {
      top: 20px; left: -50%;
      background: linear-gradient(90deg, transparent, var(--indigo2), var(--green), transparent);
      animation-duration: 20s; animation-delay: -8s; opacity: 0.15;
    }
    @keyframes aurora {
      0% { transform: translateX(-10%) skewX(-5deg); }
      100% { transform: translateX(10%) skewX(5deg); }
    }
    .stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
    .star {
      position: absolute; width: 2px; height: 2px;
      background: #fff; border-radius: 50%;
      animation: twinkle 3s ease-in-out infinite;
    }
    @keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.8; } }

    /* ===== Layout ===== */
    #app { max-width: 1800px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 64px) 40px; min-height: 100vh; display: flex; flex-direction: column; }

    /* ===== Top Nav ===== */
    .top-nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 0; position: sticky; top: 0; z-index: 100;
      background: transparent;
      backdrop-filter: none;
    }
    .nav-logo {
      display: flex; align-items: center; font-weight: 800; font-size: 20px;
      color: var(--ink); text-decoration: none;
    }
    .nav-logo img { height: 60px; width: auto; }
    .nav-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .nav-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .nav-user { font-size: 13px; color: var(--ink2); font-weight: 500; }
    .nav-pts {
      font-size: 12px; font-weight: 600; color: var(--green);
      background: rgba(0,229,158,0.1); padding: 3px 10px; border-radius: 20px;
    }

    /* ===== Buttons ===== */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      border: none; cursor: pointer; font-family: var(--font); font-weight: 600;
      transition: all 0.2s; font-size: 14px; line-height: 1;
    }
    .btn-sm { font-size: 12px; padding: 7px 14px; border-radius: 10px; }
    .btn-glass {
      background: var(--glass); border: 1px solid var(--border);
      backdrop-filter: blur(6px); color: var(--ink2); border-radius: 10px; padding: 7px 14px;
    }
    .btn-glass:hover { background: rgba(255,255,255,0.08); color: var(--ink); border-color: rgba(255,255,255,0.12); }
    .btn-primary {
      background: linear-gradient(135deg, var(--green), var(--indigo2));
      color: var(--bg); border-radius: 12px; padding: 10px 20px;
      box-shadow: 0 4px 14px rgba(0,229,158,0.25);
    }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,229,158,0.35); }
    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .btn-outline {
      background: transparent; border: 1px solid var(--border); color: var(--ink2);
      border-radius: 10px; padding: 8px 16px;
    }
    .btn-outline:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
    .btn-success {
      background: linear-gradient(135deg, var(--green), #34d399);
      color: var(--bg); border-radius: 12px; padding: 10px 20px;
    }
    .btn-link { background: none; border: none; color: var(--green); font-size: 13px; padding: 0; }
    .btn-link:hover { text-decoration: underline; }

    /* ===== Hero ===== */
    .hero { text-align: center; padding: 48px 20px 32px; }
    .hero h1 {
      font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.2; margin-bottom: 12px;
      font-family: 'Sora', system-ui, sans-serif;
    }
    .hero h1 .grad {
      background: linear-gradient(to right, #00d2ff, #00d2ff 40%, #ff6b9d 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero p { color: var(--ink2); font-size: 15px; letter-spacing: 2px; }

    /* ===== Stats Bar ===== */
    .stats-bar { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
    .stat-pill {
      background: var(--glass); border: 1px solid var(--border);
      backdrop-filter: blur(6px); padding: 10px 22px; border-radius: 14px;
      font-size: 13px; color: var(--ink2);
    }
    .stat-pill strong {
      background: linear-gradient(135deg, var(--green), var(--indigo2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      font-weight: 700; margin-right: 4px; font-family: 'Sora', system-ui, sans-serif;
    }

    /* ===== Loading ===== */
    .loading-box { display: flex; flex-direction: column; align-items: center; padding: 80px 0; }
    .spinner {
      width: 32px; height: 32px; border: 3px solid var(--border);
      border-top-color: var(--green); border-radius: 50%;
      animation: spin 0.8s linear infinite; margin-bottom: 12px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ===== Store Layout ===== */
    .store-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }

    /* ===== Sidebar ===== */
    .sidebar { position: sticky; top: 80px; align-self: start; }
    .sidebar-card {
      background: var(--surface); backdrop-filter: blur(30px);
      border: 1px solid var(--border); border-radius: var(--radius-xl);
      padding: 20px; margin-bottom: 16px;
    }
    .sidebar-title {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px;
      color: var(--ink2); margin-bottom: 12px;
    }
    .website-nav { display: flex; flex-direction: column; gap: 2px; }
    .website-item {
      display: flex; align-items: center; gap: 10px; padding: 8px 12px;
      border-radius: 10px; cursor: pointer; transition: all 0.15s; font-size: 13px; color: var(--ink2);
    }
    .website-item:hover { background: rgba(255,255,255,0.04); }
    .website-item.active {
      background: rgba(0,229,158,0.08); color: var(--green); font-weight: 600;
      border-left: 2px solid var(--green);
    }
    .website-icon-img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
    .website-icon-default { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .website-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .website-count {
      font-size: 11px; font-weight: 600; color: var(--ink3);
      background: var(--glass); padding: 2px 8px; border-radius: 6px; min-width: 24px; text-align: center;
    }
    .category-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
      color: var(--ink2); text-transform: uppercase; letter-spacing: 0.5px;
    }
    .category-header svg { transition: transform 0.2s; }
    .category-header svg.rotated { transform: rotate(90deg); }
    .category-sites { padding-left: 4px; }
    .disclaimer-card {
      background: rgba(255,107,157,0.04); border: 1px solid rgba(255,107,157,0.12);
    }
    .disclaimer-card .sidebar-title { color: var(--rose); }
    .disclaimer-content { font-size: 12px; color: var(--ink2); line-height: 1.7; white-space: pre-line; }

    /* ===== Search ===== */
    .search-wrap {
      display: flex; align-items: center; gap: 8px;
      background: var(--glass); border: 1px solid var(--border);
      border-radius: var(--radius-md); padding: 0 14px; margin-bottom: 20px;
      backdrop-filter: blur(6px);
    }
    .search-wrap svg { flex-shrink: 0; color: var(--ink3); }
    .search-wrap input {
      flex: 1; border: none; background: none; outline: none; padding: 10px 0;
      font-size: 14px; color: var(--ink); font-family: var(--font);
    }
    .search-wrap input::placeholder { color: var(--ink3); }

    /* ===== Current Category ===== */
    .current-cat {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
    }
    .current-cat h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
    .current-cat h2 img { width: 24px; height: 24px; border-radius: 6px; }
    .current-cat .count { font-size: 13px; color: var(--ink2); }

    /* ===== Products Grid ===== */
    .products-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px;
    }

    /* ===== Product Card ===== */
    .pcard {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-xl); overflow: hidden;
      transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
      backdrop-filter: blur(30px);
    }
    .pcard:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,229,158,0.08); border-color: rgba(0,229,158,0.12); }
    .pcard-img {
      height: 175px; background: linear-gradient(135deg, #0a0f1e, #111827);
      display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
    }
    .pcard-img::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--green), var(--indigo2), transparent);
      animation: aurora 4s ease-in-out infinite alternate;
    }
    .pcard-img img { width: 100%; height: 100%; object-fit: cover; }
    .pcard-img .emoji {
      font-size: 48px; transition: transform 0.3s;
    }
    .pcard:hover .pcard-img .emoji { transform: scale(1.15) rotate(5deg); }
    .pcard-badge {
      position: absolute; top: 10px; right: 10px;
      font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 8px;
    }
    .badge-hot { background: linear-gradient(135deg, #ff6b9d, #ff4757); color: #fff; box-shadow: 0 2px 8px rgba(255,71,87,0.4); }
    .badge-new { background: linear-gradient(135deg, #7b2ff7, #a855f7); color: #fff; box-shadow: 0 2px 8px rgba(123,47,247,0.4); }
    .pcard-body { padding: 16px; }
    .pcard-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
    .pcard-desc {
      font-size: 13px; color: var(--ink2); margin-bottom: 10px;
    }
    .pcard-meta {
      display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink2); margin-bottom: 14px;
    }
    .pcard-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink3); }
    .pcard-footer { display: flex; align-items: center; justify-content: space-between; }
    .pcard-price { font-size: 20px; font-weight: 800; color: var(--ink); font-family: 'Sora', system-ui, sans-serif; }
    .pcard-price .cur { font-size: 14px; font-weight: 500; }
    .pcard-price-agent { display: flex; flex-direction: column; }
    .pcard-price-agent .agent-tag {
      font-size: 10px; font-weight: 700; color: var(--bg); background: var(--green);
      padding: 1px 6px; border-radius: 4px; display: inline-block; margin-bottom: 2px; width: fit-content;
    }
    .pcard-price-agent .old { text-decoration: line-through; color: var(--ink3); font-size: 13px; font-weight: 400; }
    .pcard-buy { padding: 8px 18px; font-size: 13px; }
    .pcard-buy-disabled {
      background: var(--glass); color: var(--ink3); border: none;
      padding: 8px 18px; border-radius: 12px; font-size: 13px; cursor: not-allowed;
      font-family: var(--font); font-weight: 600;
    }

    /* ===== Empty ===== */
    .empty-state { text-align: center; padding: 60px 0; color: var(--ink3); }
    .empty-state .icon { font-size: 48px; margin-bottom: 12px; }

    /* ===== Footer ===== */
    .footer { text-align: center; padding: 24px 0; font-size: 12px; color: var(--ink2); margin-top: auto; }

    /* ===== Modal Overlay ===== */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); padding: 20px;
    }
    .modal {
      background: rgba(12,18,35,0.95); border: 1px solid var(--border); backdrop-filter: blur(30px);
      border-radius: var(--radius-xl); width: 100%; max-width: 440px;
      max-height: 90vh; overflow-y: auto; padding: 28px; position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    .modal-close {
      position: absolute; top: 16px; right: 16px; background: var(--glass);
      border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
      font-size: 18px; color: var(--ink3); display: flex; align-items: center; justify-content: center;
      transition: background 0.15s;
    }
    .modal-close:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
    .modal h3 {
      font-size: 18px; font-weight: 700; margin-bottom: 20px;
      display: flex; align-items: center; gap: 10px; color: var(--ink);
    }
    .modal h3 svg { color: var(--green); }

    /* ===== Form ===== */
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: 6px; }
    .form-input {
      width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
      font-size: 14px; color: var(--ink); background: var(--glass); font-family: var(--font);
      transition: border-color 0.2s, box-shadow 0.2s; outline: none;
    }
    .form-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,229,158,0.08); }
    .form-input::placeholder { color: var(--ink3); }
    .form-error {
      display: flex; align-items: center; gap: 6px; color: var(--red);
      font-size: 12px; margin-top: 6px;
    }

    /* ===== Modal Info ===== */
    .modal-info {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-md);
      margin-bottom: 20px;
    }
    .modal-info-name { font-weight: 600; font-size: 14px; }
    .modal-info-price {
      font-weight: 800; font-size: 18px;
      background: linear-gradient(135deg, var(--green), var(--indigo2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    /* ===== Payment Selector ===== */
    .payment-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .payment-option {
      border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px;
      text-align: center; cursor: pointer; transition: all 0.15s; background: var(--glass);
    }
    .payment-option:hover { border-color: rgba(255,255,255,0.12); }
    .payment-option.active { border-color: var(--green); background: rgba(0,229,158,0.04); }
    .payment-icon { margin-bottom: 4px; }
    .payment-name { font-size: 13px; font-weight: 600; color: var(--ink); }
    .payment-sub { font-size: 11px; color: var(--ink3); }

    /* ===== Pay Info ===== */
    .pay-info { text-align: center; margin: 16px 0; }
    .pay-amount {
      font-size: 28px; font-weight: 800; font-family: 'Sora', system-ui, sans-serif;
      background: linear-gradient(135deg, var(--green), var(--indigo2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .pay-amount .currency { font-size: 14px; font-weight: 500; -webkit-text-fill-color: var(--ink2); }
    .qrcode-container { margin: 16px auto; text-align: center; }
    .qrcode-container #qrcode { display: inline-block; padding: 12px; background: #fff; border-radius: 12px; border: 1px solid var(--border); }
    .qrcode-hint { font-size: 12px; color: var(--ink3); margin-top: 8px; }
    .qrcode-placeholder { padding: 40px; color: var(--ink3); }

    /* ===== Status Bar ===== */
    .status-bar {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px; border-radius: var(--radius-md); font-size: 13px; color: var(--ink2);
      background: var(--glass); border: 1px solid var(--border);
    }
    .status-bar .spinner { width: 16px; height: 16px; margin: 0; }

    /* ===== Success Box ===== */
    .success-box { text-align: center; padding: 10px 0; }
    .success-box h3 { justify-content: center; color: var(--green); font-size: 20px; }
    .success-box p { color: var(--ink2); font-size: 13px; margin-bottom: 16px; }
    .cdk-box {
      background: rgba(0,229,158,0.06); border: 1px solid rgba(0,229,158,0.15);
      border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px;
    }
    .cdk-content {
      font-family: 'Courier New', monospace; font-size: 15px; word-break: break-all;
      color: var(--ink); padding: 10px; background: var(--glass); border-radius: 8px;
    }

    /* ===== Payment Success Animation ===== */
    @keyframes successPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
    @keyframes successCheck { 0% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 0; } }
    .pay-success-anim { animation: successPop 0.5s ease-out; }
    .pay-success-check {
      width: 64px; height: 64px; margin: 0 auto 16px;
      background: rgba(0,229,158,0.1); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .pay-success-check svg { stroke-dasharray: 50; animation: successCheck 0.6s ease-out 0.3s both; }
    @keyframes waitingPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
    .waiting-pulse { animation: waitingPulse 1.5s ease-in-out infinite; }

    /* ===== User Center ===== */
    .uc-section { margin-bottom: 20px; }
    .uc-section h4 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
    .uc-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
    }
    .uc-label { color: var(--ink2); font-weight: 500; }
    .uc-value { color: var(--ink); font-weight: 500; }
    .ref-box {
      display: flex; gap: 8px; align-items: center;
    }
    .ref-box input {
      flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
      font-size: 12px; color: var(--ink2); background: var(--glass); outline: none;
    }
    .copy-hint { font-size: 12px; color: var(--green); display: flex; align-items: center; gap: 4px; }

    /* ===== Points List ===== */
    .pt-badge {
      font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
    }
    .pt-earn { background: rgba(0,229,158,0.1); color: var(--green); }
    .pt-deduct { background: rgba(255,107,157,0.1); color: var(--red); }
    .pt-adjust { background: rgba(0,180,216,0.1); color: var(--indigo2); }

    /* ===== Notice Modal ===== */
    .modal-notice { max-width: 560px; }
    .notice-content { font-size: 13px; color: var(--ink2); line-height: 1.8; }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-question {
      display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 600;
    }
    .faq-icon { color: var(--ink3); flex-shrink: 0; }
    .faq-answer { padding: 0 0 12px 24px; }
    .faq-answer-text { font-size: 13px; color: var(--ink2); line-height: 1.7; white-space: pre-line; }
    .faq-answer-images { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
    .faq-answer-image img { max-width: 200px; border-radius: 8px; border: 1px solid var(--border); }
    .faq-item-active .faq-question { color: var(--green); }

    /* ===== 右侧悬浮侧边栏（客服+社群） ===== */
    .side-toolbar {
      position: fixed; right: 0; top: 50%; transform: translateY(-50%);
      z-index: 999; display: flex; flex-direction: column; gap: 2px;
    }
    .side-toolbar-item {
      position: relative; display: flex; align-items: center; justify-content: center;
      width: 60px; height: 60px; background: rgba(12,18,35,0.9); backdrop-filter: blur(12px);
      border: 1px solid var(--border); border-right: none; cursor: pointer;
      color: var(--ink2); transition: all 0.2s;
    }
    .side-toolbar-item:first-child { border-radius: 12px 0 0 0; }
    .side-toolbar-item:last-child { border-radius: 0 0 0 12px; }
    .side-toolbar-item:only-child { border-radius: 12px 0 0 12px; }
    .side-toolbar-item:hover { background: rgba(0,229,158,0.15); color: var(--green); }
    .side-toolbar-item .st-icon { font-size: 22px; line-height: 1; }
    .side-toolbar-item .st-label { font-size: 11px; margin-top: 3px; white-space: nowrap; color: var(--ink); font-weight: 500; }

    /* 悬浮弹出卡片 */
    .st-popup {
      position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
      margin-right: 8px; min-width: 200px;
      background: rgba(12,18,35,0.95); border: 1px solid var(--border); backdrop-filter: blur(20px);
      border-radius: var(--radius-lg); padding: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.2s, visibility 0.2s;
    }
    .side-toolbar-item:hover .st-popup { opacity: 1; visibility: visible; pointer-events: auto; }
    .st-popup::after {
      content: ''; position: absolute; right: -8px; top: 0; bottom: 0; width: 8px;
    }
    .st-popup-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
    .st-popup-desc { font-size: 12px; color: var(--ink2); margin-bottom: 10px; }
    .st-popup-qr { text-align: center; }
    .st-popup-qr { position: relative; }
    .st-popup-qr img { max-width: 160px; max-height: 160px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: zoom-in; transition: transform 0.3s ease; }
    .st-popup-qr img:hover { transform: scale(2.5); z-index: 10; position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
    .st-popup-qr .hint { font-size: 11px; color: var(--ink3); margin-top: 6px; }

    /* ===== Site Popup ===== */
    .site-popup-overlay {
      position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); padding: 20px;
    }
    .site-popup {
      background: rgba(12,18,35,0.96); border: 1px solid var(--border); backdrop-filter: blur(30px);
      border-radius: var(--radius-xl); width: 100%; max-width: 520px;
      max-height: 80vh; display: flex; flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5); position: relative;
    }
    .site-popup-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 24px 0; flex-shrink: 0;
    }
    .site-popup-header h3 { font-size: 17px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
    .site-popup-body {
      padding: 16px 24px; overflow-y: auto; flex: 1;
      font-size: 14px; line-height: 1.7; color: var(--ink2);
    }
    .site-popup-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; }
    .site-popup-footer {
      padding: 12px 24px 20px; display: flex; justify-content: flex-end; gap: 10px;
      border-top: 1px solid var(--border); flex-shrink: 0;
    }

    /* ===== Register Float Tip ===== */
    .reg-float-tip {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
      background: rgba(12, 18, 35, 0.85); backdrop-filter: blur(12px);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 8px 28px 8px 12px; font-size: 12px; color: var(--ink2);
      white-space: nowrap; animation: tipFadeIn 0.4s ease-out;
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }
    .reg-float-tip::before {
      content: ''; position: absolute; top: -5px; right: 20px;
      width: 8px; height: 8px; background: rgba(12, 18, 35, 0.85);
      border-left: 1px solid var(--border); border-top: 1px solid var(--border);
      transform: rotate(45deg);
    }
    .reg-float-tip-close {
      position: absolute; top: 4px; right: 6px; background: none; border: none;
      color: var(--ink3); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px;
    }
    .reg-float-tip-close:hover { color: var(--ink); }
    @keyframes tipFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

    /* ===== Identity Badge ===== */
    .id-badge {
      display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px;
      border-radius: 10px; line-height: 18px; vertical-align: middle;
    }
    .id-badge-agent { background: rgba(0,229,158,0.15); color: var(--green); }
    .id-badge-dist { background: rgba(0,180,216,0.15); color: var(--sky); }

    /* ===== Ref Rules Collapsible ===== */
    .ref-rules-toggle {
      display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
      font-size: 12px; color: var(--ink2); background: none; border: none;
      padding: 4px 0; transition: color 0.2s; margin-top: 8px;
    }
    .ref-rules-toggle:hover { color: var(--ink); }
    .ref-rules-toggle svg { transition: transform 0.2s; }
    .ref-rules-content {
      margin-top: 8px; padding: 10px 12px; background: var(--glass);
      border-radius: var(--radius-sm); font-size: 12px; color: var(--ink2); line-height: 1.7;
    }
    .ref-rules-content ol { margin: 0; padding-left: 18px; }
    .ref-rules-content li { margin-bottom: 4px; }
    .ref-rules-content li:last-child { margin-bottom: 0; }

    /* ===== Toast ===== */
    .toast {
      position: fixed; top: auto; left: 50%; transform: translateX(-50%); z-index: 9999;
      background: rgba(12,18,35,0.95); color: var(--ink); border: 1px solid var(--border);
      padding: 10px 20px; border-radius: 12px; font-size: 13px; font-weight: 500;
      box-shadow: 0 8px 30px rgba(0,0,0,0.3);
      display: flex; align-items: center; gap: 8px;
      animation: toastIn 0.3s ease-out;
      backdrop-filter: blur(12px);
    }
    .toast svg { color: var(--green); flex-shrink: 0; }
    @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

    /* ===== Order Query Results ===== */
    .oq-card {
      border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 8px;
      background: var(--glass);
    }
    .oq-status {
      font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 700;
    }
    .oq-paid { background: rgba(0,229,158,0.1); color: var(--green); }
    .oq-pending { background: rgba(245,158,11,0.1); color: var(--amber); }
    .oq-other { background: rgba(255,255,255,0.06); color: var(--ink3); }

    /* ===== Responsive - Tablet ===== */
    @media (max-width: 768px) {
      .store-layout { grid-template-columns: 1fr; }
      .sidebar { position: static; max-height: none; }
      .hero h1 { font-size: 1.8rem; }
      .stats-bar { gap: 8px; }
      .stat-pill { padding: 8px 14px; font-size: 12px; }
      .nav-right { gap: 4px; }
      .products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
      .top-nav { flex-wrap: wrap; gap: 8px; }
      .sidebar-card { padding: 14px; margin-bottom: 12px; }
      .website-nav { max-height: 200px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
      .disclaimer-content { max-height: 80px; overflow-y: auto; font-size: 11px; }
    }

    /* ===== Responsive - Mobile ===== */
    @media (max-width: 480px) {
      /* -- Global layout -- */
      #app { padding: 0 12px 24px; }
      .footer { padding: 16px 0; font-size: 11px; }
      .empty-state { padding: 40px 0; }
      .empty-state .icon { font-size: 36px; }

      /* -- Background (perf) -- */
      .wave { height: 150px; filter: blur(60px); }

      /* -- Navigation -- */
      .top-nav { flex-wrap: wrap; gap: 8px; padding: 12px 0; }
      .nav-logo img { height: 44px; }
      .nav-right { width: 100%; justify-content: flex-end; gap: 6px; }
      .nav-info { width: 100%; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
      .nav-user { font-size: 12px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .btn-sm { font-size: 11px; padding: 6px 10px; min-height: 44px; display: inline-flex; align-items: center; }

      /* -- Hero -- */
      .hero { padding: 24px 10px 16px; }
      .hero h1 { font-size: 1.5rem; margin-bottom: 6px; }
      .hero p { font-size: 13px; letter-spacing: 1px; }
      .stats-bar { gap: 6px; margin-bottom: 20px; }
      .stat-pill { padding: 6px 12px; font-size: 11px; border-radius: 10px; }

      /* -- Sidebar -- */
      .sidebar-card { padding: 12px; border-radius: var(--radius-lg); margin-bottom: 10px; }
      .sidebar-title { font-size: 10px; margin-bottom: 8px; }
      .website-nav { max-height: 160px; }
      .website-item { padding: 6px 10px; font-size: 12px; min-height: 44px; display: flex; align-items: center; }
      .website-icon-img, .website-icon-default { width: 18px; height: 18px; font-size: 12px; }
      .category-header { font-size: 11px; padding: 4px 10px; }

      /* -- Search -- */
      .search-wrap { border-radius: var(--radius-sm); padding: 0 10px; margin-bottom: 14px; }
      .search-wrap input { padding: 8px 0; font-size: 14px; }
      .current-cat h2 { font-size: 15px; }
      .current-cat .count { font-size: 12px; }

      /* -- Product grid & cards -- */
      .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .pcard { border-radius: var(--radius-lg); }
      .pcard-img { height: 110px; }
      .pcard-img .emoji { font-size: 32px; }
      .pcard-body { padding: 10px; }
      .pcard-name { font-size: 13px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .pcard-desc { font-size: 11px; margin-bottom: 6px; }
      .pcard-meta { font-size: 10px; gap: 6px; margin-bottom: 8px; }
      .pcard-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
      .pcard-price { font-size: 16px; }
      .pcard-price .cur { font-size: 12px; }
      .pcard-buy, .pcard-buy-disabled { width: 100%; text-align: center; padding: 7px 0; font-size: 12px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
      .pcard-badge { font-size: 9px; padding: 2px 6px; border-radius: 6px; top: 6px; right: 6px; }
      .pcard-price-agent .agent-tag { font-size: 9px; padding: 1px 4px; }
      .pcard-price-agent .old { font-size: 11px; }

      /* -- Modal (bottom sheet style) -- */
      .modal-overlay { padding: 0; align-items: flex-end; }
      .modal { max-width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px 16px; animation: modalSlideUp 0.3s ease-out; }
      @keyframes modalSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
      .modal-close { top: 12px; right: 12px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
      .modal h3 { font-size: 16px; margin-bottom: 16px; }
      .modal-notice { max-width: 100%; }
      .form-input { padding: 12px 14px; font-size: 16px; }
      .form-group label { font-size: 12px; }
      .payment-selector { gap: 8px; }
      .payment-option { padding: 10px; min-height: 44px; }
      .pay-amount { font-size: 24px; }
      .qrcode-container #qrcode { padding: 8px; }
      .cdk-content { font-size: 13px; padding: 8px; }

      /* -- User center modal -- */
      .uc-row { font-size: 12px; padding: 6px 0; flex-wrap: wrap; gap: 4px; }
      .uc-section h4 { font-size: 13px; }
      .ref-box { flex-direction: column; gap: 6px; }
      .ref-box input { width: 100%; font-size: 11px; }
      .pt-badge { font-size: 9px; padding: 1px 6px; }

      /* -- Order query cards -- */
      .oq-card { padding: 10px 12px; margin-bottom: 6px; }

      /* -- Side toolbar mobile -- */
      .side-toolbar-item { width: 52px; height: 52px; }
      .side-toolbar-item .st-icon { font-size: 20px; }
      .side-toolbar-item .st-label { font-size: 10px; }
      .st-popup { min-width: 170px; padding: 12px; }
    }

    /* ===== Placeholder ===== */
    .placeholder-section { text-align: center; padding: 40px 0; color: var(--ink3); font-size: 13px; }

    /* ===== mark highlight ===== */
    mark { background: rgba(0,229,158,0.2) !important; color: var(--ink) !important; padding: 0 2px; border-radius: 2px; }

    /* ===== CDK 验证状态 ===== */
    .verification-section { padding: 12px; border-radius: 8px; background: rgba(255,255,255,0.03); }
    .verification-pending { color: #f0c040; font-size: 13px; }
    .verification-valid { color: #4ade80; font-size: 13px; }
    .verification-invalid { color: #f87171; font-size: 13px; }
    .verification-error { color: #a0a0a0; font-size: 13px; }
    .verification-icon { font-size: 1.1em; margin-right: 4px; }


/* Approved storefront design */
@font-face{font-family:PreviewSans;src:local('Microsoft YaHei UI');font-display:swap}
:root{--bg:#f7f8f5;--paper:#fff;--ink:#1e2b25;--muted:#7c867e;--green:#28664e;--green-dark:#194b37;--green-soft:#eaf1e9;--line:#e6eae3;--font:Inter,'Segoe UI',PreviewSans,'Microsoft YaHei',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{border:0;background:none}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #62a588;outline-offset:4px}h1,h2,h3,p{margin:0}svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}svg.icon.small{width:16px;height:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-60px;left:10px;z-index:20;background:var(--green);color:white;padding:12px}.skip-link:focus{top:10px}[hidden]{display:none!important}
.header{height:85px;padding:0 max(32px,calc((100vw - 1328px)/2));border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);display:flex;align-items:center;gap:60px;position:sticky;top:0;z-index:10}.wordmark{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:22px;letter-spacing:-1px;font-weight:750}.brand-mark{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:var(--green);color:white;font-size:29px;font-weight:700;line-height:1;padding-bottom:5px;letter-spacing:-3px}.brand-mark span{color:#bcdf9a;font-size:34px;line-height:1}.brand-number{color:var(--green);font-weight:500}.desktop-nav{display:flex;height:100%;gap:32px;align-items:center;font-size:13px;white-space:nowrap}.desktop-nav>a,.desktop-nav>button{height:100%;display:flex;align-items:center;position:relative;padding:0;color:#69736b}.desktop-nav .active{color:var(--green);font-weight:650}.desktop-nav .active:after{content:'';position:absolute;bottom:20px;left:0;right:0;height:2px;background:var(--green);border-radius:2px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:22px;white-space:nowrap}.support-link{display:flex;align-items:center;gap:7px;font-size:12px;color:#677369}.login-button{background:var(--green);color:#fff;display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:8px;font-size:12px}.login-button:hover,.primary-button:hover{background:var(--green-dark)}
.page-shell{max-width:1328px;margin:32px auto 0;display:grid;grid-template-columns:206px minmax(0,1fr);gap:34px;padding:0 0 20px}.sidebar{padding:12px 0;align-self:start;position:sticky;top:116px}.section-label{font-size:9px;font-weight:600;letter-spacing:1.8px;color:#899187}.sidebar h2{font-size:20px;letter-spacing:.2px;margin:8px 0 25px}.brand-option{height:44px;border-radius:8px;width:100%;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:12px;text-align:left;margin-bottom:6px;transition:background .15s}.brand-option.active{background:#e6eee3;color:#245a40;font-weight:600}.brand-option:hover:not(.active){background:#eff1eb}.brand-count{margin-left:auto;color:#90988e;font-size:11px;font-variant-numeric:tabular-nums}.brand-option.active .brand-count{color:var(--green)}.sidebar-label{font-size:10px;color:#939a91;margin:26px 12px 14px}.brand-avatar{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:white;border:1px solid #e9eae6;flex-shrink:0;overflow:hidden;font-weight:700;color:var(--green);font-size:13px}.brand-avatar img{height:100%;width:100%;object-fit:cover}.sidebar-help{margin-top:34px;padding:20px 16px 16px;border:1px solid var(--line);border-radius:12px;background:#f0f3ec}.help-icon{width:31px;height:31px;background:#e0e9db;color:var(--green);border-radius:9px;display:grid;place-items:center;margin-bottom:14px}.sidebar-help h3{font-size:12px;font-weight:650}.sidebar-help p{font-size:10px;line-height:1.9;color:#7b867a;margin:8px 0 13px}.sidebar-help button{font-size:11px;color:var(--green);padding:0;display:flex;align-items:center;justify-content:space-between;width:100%}.sidebar-caption{display:flex;gap:6px;align-items:center;color:#99a092;font-size:9px;margin:20px 10px}.status-dot,.tiny-dot{width:5px;height:5px;border-radius:50%;background:#6a9867;display:inline-block}.status-dot{box-shadow:0 0 0 3px #e9eee4}main{min-width:0}.hero{border-radius:17px;border:1px solid #e2e8d9;min-height:260px;display:flex;position:relative;overflow:hidden;background:#edf1e6}.hero-copy{padding:31px 35px;position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1.6px;color:#7c8975;font-weight:600}.eyebrow>span{width:5px;height:5px;border-radius:50%;background:#8ba779}.hero h1{font-size:33px;line-height:1.5;letter-spacing:1.2px;font-weight:650;margin:10px 0 8px}.title-dot{color:#639566}.hero-copy>p{font-size:11px;color:#829079;letter-spacing:.5px}.hero-link{display:inline-flex;align-items:center;gap:14px;font-size:11px;color:#396348;margin-top:20px;font-weight:600}.hero-art{position:absolute;width:410px;height:270px;right:0;top:0;overflow:hidden}.orbit{position:absolute;border:1px solid #dce4d1;border-radius:50%;width:330px;height:330px;right:-15px;top:-32px;transform:rotate(-22deg)}.orbit-two{width:410px;height:170px;top:80px;right:-100px}.tool-tile{position:absolute;display:flex;align-items:center;gap:11px;padding:14px 17px;background:#ffffffeb;border:1px solid #ffffff;border-radius:13px;box-shadow:0 12px 25px #314d2710;min-width:173px;font-family:'Segoe UI',sans-serif;font-size:15px;font-weight:600}.tool-tile small{display:block;font-size:8px;letter-spacing:1px;font-weight:400;color:#98a08f;margin-top:5px}.art-logo{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;overflow:hidden;background:#f4f5ef}.art-logo img{width:100%;height:100%;object-fit:cover}.tile-gpt{top:39px;right:139px;transform:rotate(-9deg)}.tile-claude{top:104px;right:24px;transform:rotate(8deg);z-index:2}.tile-gemini{top:172px;right:139px;transform:rotate(-5deg)}.art-star{color:#94ac79;position:absolute;right:62px;top:17px;font-size:50px;font-weight:300}.art-caption{position:absolute;right:30px;bottom:17px;letter-spacing:1.5px;font-size:6px;color:#a0aa92}.trust-strip{height:61px;display:flex;align-items:center;justify-content:space-between;padding:0 5px;border-bottom:1px solid var(--line);margin-bottom:30px;gap:12px}.trust-strip>span{display:flex;align-items:center;gap:8px;color:#87907e;font-size:10px}.trust-strip svg{color:#698363}
.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.catalog h2{font-size:22px;font-weight:600;letter-spacing:.5px;margin-top:5px;display:flex;align-items:center;gap:10px}.catalog h2>span{font-size:10px;font-weight:500;color:#818d79;letter-spacing:0;background:#eaf0e4;border:1px solid #e0e7db;border-radius:6px;padding:3px 6px}.search-box{height:39px;width:270px;display:flex;align-items:center;gap:8px;background:white;border:1px solid #e5e9e0;border-radius:8px;padding:0 11px;color:#929b8b}.search-box input{outline:none;background:none;border:0;font-size:11px;min-width:0;width:100%;color:var(--ink)}.search-box input::placeholder{color:#a1a899}.search-box:focus-within{border-color:#91b299;box-shadow:0 0 0 3px #dce9de80}.search-box kbd{font:10px var(--font);border:1px solid #e7eadf;width:17px;height:20px;text-align:center;padding-top:2px;border-radius:4px}.catalog-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.stock-tabs{display:flex;gap:7px}.stock-tabs>button{height:33px;padding:0 13px;font-size:11px;color:#8b9584;display:flex;align-items:center;gap:7px;border-radius:6px;border:1px solid transparent}.stock-tabs>button.active{background:white;color:#335e40;border-color:#e0e6db;box-shadow:0 2px 3px #152f0c03}.tiny-dot{width:4px;height:4px}.sort-control{display:flex;align-items:center;gap:5px;color:#87917e}.sort-control select{border:0;background:transparent;outline-offset:0;font-size:10px;color:#6d7864;max-width:135px;padding:7px 4px;cursor:pointer}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.product-card{min-width:0;background:white;border:1px solid #e6eae1;border-radius:12px;padding:20px 19px 15px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative}.product-card:hover{transform:translateY(-3px);border-color:#bfcfb8;box-shadow:0 10px 26px #283b2010}.product-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.product-logo{width:43px;height:43px;border-radius:11px;overflow:hidden;background:#f4f6f0;border:1px solid #eef0ea;display:grid;place-items:center;flex-shrink:0;color:#406c47;font-size:18px;font-weight:600}.product-logo img{width:100%;height:100%;object-fit:cover}.stock-label{display:flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.2px;color:#6f8f60;background:#f1f6ec;border:1px solid #e9f0e2;padding:3px 6px;border-radius:4px;white-space:nowrap}.stock-label.soldout{color:#94968d;background:#f4f4f1;border-color:#eeeee8}.stock-label.soldout .tiny-dot{background:#a8aa9f}.product-brand{color:#9aA18f;font-size:8px;letter-spacing:1.5px;font-weight:600;text-transform:uppercase;margin-bottom:7px}.product-card h3{font-size:13px;line-height:1.8;font-weight:600;overflow-wrap:anywhere;min-height:70px;letter-spacing:.1px}.product-tags{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0 18px;min-height:19px}.product-tags span{font-size:8px;line-height:1.4;color:#929a87;background:#f6f7f3;border:1px solid #eceee5;border-radius:4px;padding:3px 5px}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px;border-top:1px solid #edf0e8;padding-top:14px;margin-top:auto}.price{font-size:24px;font-family:'Segoe UI',sans-serif;letter-spacing:-.8px;font-weight:600;color:#365c3e;white-space:nowrap;font-variant-numeric:tabular-nums}.price .currency{font-size:12px;font-weight:500;margin-right:2px;letter-spacing:0}.price .decimal{font-size:12px;letter-spacing:0;font-weight:500}.detail-button{padding:8px 10px;font-size:10px;display:flex;align-items:center;gap:5px;background:#f0f4eb;border:1px solid #e7edde;color:#5a774c;border-radius:6px;white-space:nowrap}.detail-button:hover{color:white;background:var(--green);border-color:var(--green)}.product-card.unavailable .price{color:#92988b}.product-card.unavailable .detail-button{background:#f7f8f5;color:#8e9785;border-color:#ecefe6}.catalog-end{margin:31px 0 36px;display:flex;align-items:center;justify-content:center;gap:13px;color:#a6ae9b;font-size:9px;letter-spacing:.7px}.catalog-end:before,.catalog-end:after{content:'';width:31px;height:1px;background:#e0e5d9}.loading-state{grid-column:1/-1;height:220px;display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);font-size:12px}.loading-ring{width:18px;height:18px;border:2px solid #dae4d5;border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:55px 15px;border:1px dashed #dbe3d3;border-radius:12px;color:var(--muted)}.empty-state h3{margin:16px 0 8px;color:var(--ink);font-size:16px}.empty-state p{font-size:12px;margin-bottom:20px}.primary-button{background:var(--green);color:white;border-radius:8px;padding:12px 20px;font-size:12px}.guide{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;padding:30px 0 40px;border-top:1px solid var(--line)}.guide h2{font-size:17px;line-height:1.6;margin-top:9px;font-weight:600}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;font-size:11px;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.faq-list summary::-webkit-details-marker{display:none}.faq-list details p{font-size:11px;line-height:1.9;color:#7e8a74;padding:0 0 16px}.faq-list details[open] summary svg{transform:rotate(90deg)}.footer{border-top:1px solid var(--line);padding:24px 0 5px;display:flex;align-items:center;gap:17px}.footer>span:first-child{font-size:14px;font-weight:700;letter-spacing:-.6px;color:#657c59}.footer-dot{color:#8bad76}.footer>p{font-size:9px;color:#a6ad9b}.preview-tag{margin-left:auto;color:#97a28e;background:#edf1e7;border:1px solid #e1e8d8;border-radius:4px;font-size:8px;padding:3px 6px}.mobile-brands,.bottom-nav{display:none}
dialog{border:1px solid #dce4d7;border-radius:18px;background:#fff;color:var(--ink);padding:34px;box-shadow:0 24px 100px #16372533;max-height:calc(100dvh - 48px);overflow-y:auto}dialog::backdrop{background:#1527186e;backdrop-filter:blur(4px)}body:has(dialog[open]){overflow:hidden}.product-dialog{width:660px;max-width:calc(100vw - 32px)}.icon-button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#87927e;background:#f2f5ee}.dialog-close{position:absolute;right:16px;top:16px;z-index:2}.detail-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:24px}.detail-brand-row .product-logo{width:48px;height:48px}.detail-brand-row p{font-size:10px;color:#8b977f;margin-top:4px}.product-dialog h2{font-size:21px;line-height:1.7;font-weight:600;margin-bottom:17px}.detail-price-row{padding:17px 0 23px;display:flex;align-items:center;justify-content:space-between}.detail-price-row .price{font-size:34px}.detail-image{width:100%;max-height:245px;object-fit:contain;background:#f8f9f5;border:1px solid #ecf0e6;border-radius:10px;margin-bottom:24px}.detail-description{border-top:1px solid var(--line);padding-top:18px}.detail-description h3{font-size:13px;margin-bottom:11px}.detail-description p{white-space:pre-line;font-size:12px;line-height:2;color:#7b8770;overflow-wrap:anywhere}.detail-notice{margin-top:23px;padding:14px;background:#f1f5eb;border-radius:8px;font-size:10px;line-height:1.9;color:#7d8f6c}.detail-finish{margin-top:18px;width:100%}.info-dialog{width:390px;text-align:center;padding:38px 30px;max-width:calc(100vw - 32px)}.info-symbol{margin:0 auto 20px;border-radius:15px;background:#edf3e5;color:#738d5d;display:grid;place-items:center;width:50px;height:50px}.info-dialog h2{font-size:21px;font-weight:600}.info-dialog p{font-size:12px;color:#87957a;line-height:2;margin:17px 0 24px}.brand-dialog{width:390px;max-width:calc(100vw - 24px);padding:30px 22px}.brand-dialog h2{font-size:22px;margin:8px 0 24px}.brand-dialog .brand-option{height:48px}
@media(min-width:1500px){.hero-art{right:28px}}
@media(max-width:1390px){.page-shell{margin:28px 32px 0;gap:28px;grid-template-columns:180px minmax(0,1fr)}.header{gap:45px}.hero-copy{padding:29px}.hero h1{font-size:31px}.hero-art{width:365px}.tool-tile{min-width:155px;padding:12px}.tile-gpt,.tile-gemini{right:128px}.tile-claude{right:15px}.product-card{padding:18px 16px 14px}.product-card h3{font-size:12px;min-height:65px}.product-grid{gap:14px}.price{font-size:23px}}
@media(max-width:1150px){.header{gap:30px;padding:0 24px}.desktop-nav{gap:20px}.header-actions{gap:15px}.page-shell{margin:24px 24px 0;grid-template-columns:154px minmax(0,1fr);gap:22px}.hero h1{font-size:29px}.hero-copy{padding:27px 25px}.hero-art{width:310px;opacity:.95}.tool-tile{min-width:141px;font-size:13px;gap:8px;padding:11px}.tile-gpt,.tile-gemini{right:113px}.tile-claude{right:10px}.art-logo{width:30px;height:30px}.hero-copy>p{font-size:10px;max-width:270px;line-height:1.8}.trust-strip>span{font-size:9px;gap:5px}.sidebar-help{padding:15px 12px}.product-card{padding:16px 13px 13px}.product-card h3{font-size:11px;min-height:61px}.product-tags{gap:3px}.detail-button{font-size:9px;padding:7px}.price{font-size:21px}.search-box{width:242px}}
@media(max-width:950px){.sidebar{display:none}.page-shell{display:block;margin:24px}.header{height:73px;gap:30px}.wordmark{font-size:20px}.desktop-nav{gap:20px}.support-link{display:none}.mobile-brands{display:flex;gap:8px;overflow-x:auto;margin:0 0 18px;padding:1px 1px 8px;scrollbar-width:none}.mobile-brands::-webkit-scrollbar{display:none}.mobile-brands .brand-option{flex:none;width:auto;margin:0;height:34px;border:1px solid #e3e8dd;background:white;font-size:10px;border-radius:7px;padding:0 11px;gap:7px}.mobile-brands .brand-option.active{background:#e7efe0;border-color:#d9e3ce}.mobile-brands .brand-count{font-size:8px}.mobile-brands .brand-avatar{width:19px;height:19px;border-radius:5px}.hero-art{width:350px}.hero h1{font-size:31px}.hero-copy{padding:27px 30px}.hero{min-height:256px}.trust-strip{margin-bottom:26px}.product-card h3{font-size:12px;min-height:66px}.product-card{padding:18px 16px}.price{font-size:23px}}
@media(max-width:680px){html{scroll-padding-top:78px}.header{height:65px;padding:0 18px;gap:8px}.wordmark{font-size:20px;gap:8px}.brand-mark{width:30px;height:30px;border-radius:9px;font-size:25px}.brand-mark span{font-size:30px}.desktop-nav{display:none}.header-actions{gap:0}.login-button{background:transparent;color:var(--green);padding:9px;border:1px solid #e1e7da;border-radius:50%}.login-button>span{display:none}.login-button:hover{color:white}.login-button .icon{width:17px;height:17px}.page-shell{margin:16px 16px 0;padding-bottom:90px}.hero{min-height:216px;border-radius:12px}.hero-copy{padding:23px 21px}.eyebrow{font-size:7px;letter-spacing:1.1px;gap:6px}.hero h1{font-size:27px;line-height:1.55;letter-spacing:.2px;margin-top:12px;margin-bottom:9px}.hero-copy>p{font-size:9px;max-width:230px;line-height:1.9}.hero-link{font-size:10px;margin-top:16px;gap:11px}.hero-art{width:126px;right:-11px;opacity:.5;top:8px;height:210px;pointer-events:none}.tool-tile{min-width:0;gap:0;padding:9px;border-radius:13px}.tool-tile>span:last-child{display:none}.art-logo{width:32px;height:32px;border-radius:8px}.tile-gpt{right:25px;top:23px;transform:rotate(12deg)}.tile-claude{right:7px;top:92px;transform:rotate(-9deg)}.tile-gemini{right:38px;top:155px;transform:rotate(9deg)}.orbit-one{width:185px;height:185px;right:-113px;top:21px}.orbit-two,.art-caption,.art-star{display:none}.trust-strip{height:48px;margin-bottom:22px;padding:0;justify-content:flex-start;gap:18px}.trust-strip>span{font-size:8px;gap:5px}.trust-strip>span:nth-child(3){display:none}.trust-strip .icon.small{width:12px;height:12px}.catalog-heading{display:block;margin-bottom:15px}.catalog-heading>div{display:flex;align-items:center;justify-content:space-between}.catalog-heading .section-label{display:none}.catalog h2{font-size:21px;margin:0 0 17px;gap:8px}.catalog h2>span{font-size:9px;padding:3px 6px}.search-box{height:41px;width:100%;border-radius:8px;padding:0 12px}.search-box input{font-size:11px}.search-box kbd{display:none}.search-box .icon{width:17px;height:17px}.mobile-brands{gap:7px;margin:0 -16px 9px;padding:1px 16px 8px}.mobile-brands .brand-option{height:34px;padding:0 10px;font-size:10px;gap:6px}.mobile-brands .brand-count{display:none}.catalog-controls{margin:1px 0 15px;gap:7px}.stock-tabs{gap:2px}.stock-tabs>button{font-size:10px;height:31px;padding:0 9px;gap:5px}.sort-control{gap:2px}.sort-control select{font-size:9px;max-width:122px}.sort-control .icon{width:13px;height:13px}.product-grid{grid-template-columns:minmax(0,1fr);gap:12px}.product-card{padding:18px 18px 15px;border-radius:11px;display:grid;grid-template-columns:1fr auto;column-gap:10px}.product-top{grid-column:1/-1;margin-bottom:13px;justify-content:flex-start;gap:12px}.product-logo{width:38px;height:38px;border-radius:10px}.stock-label{margin-left:auto;font-size:8px}.product-brand{grid-column:1/-1;font-size:8px;margin:0 0 6px}.product-card h3{grid-column:1/-1;font-size:13px;line-height:1.8;min-height:0;margin-bottom:0;font-weight:600}.product-tags{grid-column:1/-1;margin:11px 0 15px;min-height:0;gap:5px}.product-tags span{font-size:8px}.card-bottom{grid-column:1/-1;padding-top:12px;gap:15px}.price{font-size:25px}.price .currency{font-size:12px}.price .decimal{font-size:12px}.detail-button{font-size:10px;padding:9px 13px;gap:6px}.detail-button .icon{width:14px;height:14px}.catalog-end{font-size:8px;margin:26px 0 30px}.guide{display:block;padding:25px 0 27px}.guide h2{font-size:17px;margin:8px 0 13px}.guide .section-label{font-size:8px}.faq-list summary{font-size:11px;padding:15px 0}.faq-list details p{font-size:10px}.footer{gap:8px;flex-wrap:wrap;padding-top:22px}.footer>span:first-child{font-size:13px}.footer p{font-size:8px;order:3;width:100%;margin-top:4px}.preview-tag{font-size:8px}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);height:calc(64px + env(safe-area-inset-bottom));padding:7px 12px calc(7px + env(safe-area-inset-bottom));border-top:1px solid #e7ecdf;z-index:9;justify-content:space-around}.bottom-nav>*{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;flex:1;color:#99a08f;font-size:9px;position:relative}.bottom-nav .active{color:var(--green)}.bottom-nav .active:before{content:'';position:absolute;top:-7px;width:24px;height:2px;border-radius:2px;background:#5e8550}.bottom-nav .icon{width:20px;height:20px;stroke-width:1.5}.product-dialog{padding:29px 22px 24px;border-radius:17px}.product-dialog h2{font-size:17px}.detail-brand-row{margin-bottom:19px}.detail-description p{font-size:11px}.detail-price-row{padding:10px 0 19px}.detail-notice{font-size:9px}.product-dialog .detail-image{max-height:200px}.info-dialog{padding:36px 24px}.brand-dialog{margin:auto 0 0;max-width:100vw;width:100%;border-radius:18px 18px 0 0;max-height:83dvh}.brand-dialog .brand-option{height:47px}}
@media(max-width:680px){html{scrollbar-width:none}html::-webkit-scrollbar{display:none}.hero{min-height:200px}.hero-copy{padding-top:20px;padding-bottom:20px}.hero h1{font-size:26px;line-height:1.5}.hero-link{margin-top:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.support-dialog{width:460px;max-width:calc(100vw - 32px);padding:30px 32px 0;text-align:center;overflow-x:hidden;max-height:calc(100dvh - 40px)}.support-heading-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;margin:0 auto 13px;background:#eaf1e4;color:#537948}.support-heading-icon .icon{width:24px;height:24px}.support-heading>.section-label{font-size:8px;letter-spacing:2px;color:#8e9a81}.support-heading h2{font-size:24px;font-weight:600;margin:7px 0 9px;letter-spacing:.5px}.support-heading p{font-size:12px;color:#78866e;line-height:1.7}.support-topics{display:flex;align-items:center;justify-content:center;gap:0;margin:17px 0 22px;font-size:10px;color:#7b8b6f}.support-topics>span+span:before{content:'·';margin:0 14px;color:#b0bea3}#support-body{min-height:60px}.support-qr-panel{background:#fff;border:1px solid #e4ebdb;border-radius:12px;padding:8px;margin:0 auto;max-width:250px;box-shadow:0 6px 24px #31421b07;line-height:0}.support-qr-image{width:100%;height:auto;display:block;border-radius:6px}.support-scan-label{font-size:12px;color:#526b43;margin:16px 0 7px;font-weight:500}.support-scan-hint{font-size:10px;color:#8c9980;line-height:1.7}.support-save{margin:18px auto 24px;display:inline-flex;justify-content:center;align-items:center;gap:13px;padding:11px 22px;border-radius:8px;background:#edf3e5;border:1px solid #dde7d1;color:#52723e;font-size:11px;transition:background .15s}.support-save:hover{background:#dde9d1}.support-external{display:flex;align-items:center;justify-content:center;gap:9px;margin:18px 0 24px}.support-loading{font-size:12px;line-height:1.9;color:#8c977f;padding:25px 0}.support-footnote{display:flex;align-items:center;justify-content:center;gap:7px;background:#f4f7ef;border-top:1px solid #e9eedf;margin:0 -32px;padding:16px 15px;font-size:10px;line-height:1.7;color:#8a987d}.support-footnote .icon{color:#9aaa8b}#support-body>.primary-button{margin-bottom:24px}@media(max-width:950px){.header-actions .support-link{display:flex}.header-actions .support-link span{display:none}.header-actions .support-link{width:35px;height:35px;padding:8px;border:1px solid #e1e7da;border-radius:50%}}@media(max-width:680px){.header-actions{gap:10px}.support-dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;padding:24px 25px 0;max-height:calc(100dvh - 26px)}.support-heading-icon{width:42px;height:42px;border-radius:13px;margin-bottom:10px}.support-heading h2{font-size:23px;margin-top:6px}.support-topics{margin:14px 0 18px}.support-qr-panel{max-width:228px;padding:7px}.support-scan-label{margin-top:14px}.support-save{margin:15px auto 20px;padding:11px 24px}.support-footnote{margin:0 -25px;padding:15px 12px calc(15px + env(safe-area-inset-bottom));font-size:9px}.support-dialog .dialog-close{right:16px;top:19px}}

/* Business surfaces use the same palette as the approved design. */
:root { --surface:#fff; --glass:#f5f7f2; --border:#e2e8df; --shadow:rgba(35,61,44,.12); --text:#24382b; --ink2:#5c6d60; --ink3:#748177; --indigo:#28664e; --indigo2:#337558; --violet:#58734d; --amber:#946415; --red:#b74142; --radius-xl:20px; --font:Inter,'Segoe UI','Microsoft YaHei',sans-serif; }
body{overflow-x:clip;line-height:1.6}#app{display:block;max-width:none;margin:0;padding:0;min-height:100vh}.header{gap:34px}.header-actions{gap:17px}.header-actions .login-button span{max-width:140px;overflow:hidden;text-overflow:ellipsis}.language-button{font-size:11px;color:var(--ink2);white-space:nowrap;min-height:36px}.page-shell{width:calc(100% - 64px)}.sidebar{width:auto}.hero{padding:0;text-align:left;margin:0}.hero h1{font-family:var(--font);font-size:33px;font-weight:650}.hero p{font-size:11px;letter-spacing:.3px}.hero .hero-copy{padding:31px 35px}.hero .art-logo img{width:100%;height:100%;object-fit:cover}.trust-strip button{display:flex;align-items:center;gap:6px;color:inherit;font-size:inherit}.catalog-heading h2>span{font-size:12px;color:#8a9588;font-weight:400;margin-left:6px}.product-card h3{min-height:70px;font-size:14px;line-height:1.7;display:block;overflow:visible}.product-logo img{width:100%;height:100%;object-fit:cover}.regular-price{display:block;font-size:10px;color:var(--ink3);text-decoration:line-through;font-weight:400}.card-bottom{gap:6px;flex-wrap:wrap}.card-bottom .price{font-size:24px}.card-bottom .detail-button{font-size:11px}.product-card{display:flex;flex-direction:column}.product-card .card-bottom{margin-top:auto;padding-top:20px}.product-tags{margin-bottom:16px}.store-disclaimer{border-top:1px solid var(--line);padding:23px 0;color:var(--ink2);font-size:12px;overflow-wrap:anywhere}.store-disclaimer h3{font-size:13px;margin-bottom:10px}.store-disclaimer img{max-width:100%;height:auto}.footer{margin:0;text-align:left}.footer-actions{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;color:var(--ink2)}.footer p{margin-top:6px}.guide .btn-link{font-size:12px;margin:0 18px 15px}.empty-state{padding:55px 20px}.empty-state .primary-button{margin-top:18px}.loading-state .spinner{margin:0}.modal-overlay,.site-popup-overlay{background:rgba(41,59,45,.36);backdrop-filter:blur(5px);padding:24px;z-index:1000}.modal,.site-popup{background:#fff;backdrop-filter:none;border:1px solid var(--line);box-shadow:0 22px 85px rgba(32,58,39,.18);color:var(--ink);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:32px;border-radius:19px;overflow-wrap:anywhere}.modal h3{padding-right:24px}.modal-close{background:#f3f5f0;border:0;color:#788474;border-radius:50%;width:34px;height:34px;top:15px;right:15px}.modal-close:hover{background:#e6eee1;color:var(--ink)}.modal .btn,.site-popup .btn{min-height:42px;border-radius:9px;line-height:1.4}.btn-primary,.btn-success{background:var(--green);color:#fff;border:1px solid var(--green);box-shadow:none}.btn-primary:hover,.btn-success:hover{background:var(--green-dark);box-shadow:none;transform:none}.btn-outline,.btn-glass{background:#f5f7f2;border:1px solid var(--line);color:var(--green)}.btn-outline:hover,.btn-glass:hover{background:#eaf1e5;border-color:#cfddca;transform:none;box-shadow:none}.btn:disabled{opacity:.5;cursor:not-allowed}.form-input{min-height:45px;background:#f9faf7;border-color:#dfe6da;color:var(--ink)}.form-input:focus{border-color:var(--green);box-shadow:0 0 0 3px #e7f0e3}.modal-info{gap:15px;background:#f2f6ec;border-color:#e4eada}.modal-info-name{font-size:13px;overflow-wrap:anywhere}.modal-info-price{flex-shrink:0}.payment-option{background:#f7f9f4;border-color:var(--line);min-height:90px}.payment-option.active{background:#eef5e8;border:1px solid var(--green)}.payment-option:hover{border-color:#9fb795}.status-bar{background:#f5f8f0}.uc-tabs{background:#f2f5ed}.uc-tab.active{background:#fff;color:var(--green)}.uc-row{gap:12px}.uc-value{overflow-wrap:anywhere;min-width:0}.cdk-box{background:#f4f7ef;border-color:#d8e5cf}.cdk-content{color:var(--ink)}.pt-item,.oq-order-card{border-color:var(--line);background:#f8faf5}.toast{background:#233c2b;color:white;border:0;z-index:2000;max-width:calc(100vw - 32px);bottom:30px}.product-detail-modal{max-width:600px}.product-detail-modal h2{font-size:23px;line-height:1.5;margin:18px 0}.product-detail-modal .detail-description{font-size:14px;line-height:1.85;white-space:normal;margin:22px 0}.detail-description img{max-width:100%;height:auto}.detail-description p{margin:8px 0}.detail-actions{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:20px;position:sticky;bottom:-32px;background:white;padding-bottom:8px}.detail-actions .btn{flex:1}.brand-picker{max-width:420px}.brand-picker .brand-option{border:1px solid var(--line)}.support-dialog{max-width:460px;width:460px;margin:0;padding:30px 32px 0;text-align:center}.support-dialog .support-qr-image{width:100%;height:auto;display:block}.support-body{min-height:48px}.support-footnote{margin:22px -32px 0}.support-external{display:inline-flex;align-items:center;justify-content:center;margin-top:12px}.community-list{display:grid;gap:18px}.community-card{background:#f5f8ef;border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:12px;text-align:center}.community-card img{max-width:220px;max-height:280px;object-fit:contain;justify-self:center}.community-card p{font-size:13px;color:var(--ink2)}.site-popup{padding:0}.site-popup-header,.site-popup-footer{background:#f5f8ef}.site-popup-body{color:var(--ink2)}.verification-valid{color:#28664e}.verification-invalid{color:#b74142}.verification-pending{color:#946415}
@media(min-width:951px) and (max-width:1150px){.desktop-nav{gap:20px}.header{gap:22px;padding:0 25px}.header-actions{gap:12px}.page-shell{grid-template-columns:185px minmax(0,1fr);gap:24px}.hero-art{opacity:.6;right:-85px}.hero-copy{max-width:70%}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:950px){.page-shell{width:calc(100% - 40px);grid-template-columns:minmax(0,1fr)}.header .support-link{display:flex}.header .support-link span{display:none}.header-actions{gap:12px}.hero-art{right:0}.modal{max-height:calc(100dvh - 40px)}}
@media(max-width:680px){html{scroll-padding-top:90px}.header{height:72px;padding:0 18px;gap:10px}.wordmark{font-size:19px;gap:8px}.brand-mark{width:32px;height:32px}.header-actions{gap:8px}.language-button{font-size:10px}.header .support-link{height:35px;width:30px;justify-content:center}.login-button{padding:8px;width:34px;height:34px;justify-content:center}.page-shell{width:auto;margin:18px 0 0;padding:0 18px 80px;display:block}.hero{min-height:216px}.hero .hero-copy{padding:24px 22px}.hero h1{font-size:28px;line-height:1.5}.hero p{max-width:260px;font-size:10px;letter-spacing:0}.hero-art{display:none}.trust-strip{padding:14px 0 18px;gap:10px;flex-wrap:wrap}.trust-strip>button{display:none}.product-card h3{min-height:0;font-size:15px;margin-bottom:16px}.product-card .card-bottom{padding-top:14px}.product-grid{grid-template-columns:minmax(0,1fr)}.card-bottom .price{font-size:26px}.card-bottom .detail-button{font-size:12px}.mobile-brands{margin:16px -18px;padding:0 18px 4px}.bottom-nav{padding-bottom:env(safe-area-inset-bottom);height:calc(66px + env(safe-area-inset-bottom));z-index:100}.bottom-nav>a,.bottom-nav>button{min-width:0;flex:1;font-size:10px}.modal-overlay,.site-popup-overlay{padding:12px;align-items:center}.modal,.site-popup{max-width:100%;padding:25px 21px;max-height:calc(100dvh - 24px);border-radius:17px}.modal h3{font-size:18px;margin-bottom:23px}.form-input{font-size:16px}.support-overlay{padding:0;align-items:flex-end}.modal.support-dialog{width:100%;max-width:100%;padding:26px 25px 0;border-radius:22px 22px 0 0;max-height:calc(100dvh - 20px)}.support-footnote{margin:22px -25px 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}.product-detail-modal h2{font-size:20px}.detail-actions{bottom:-25px;padding-bottom:12px}.modal-info{padding:12px;align-items:flex-start}.modal-info-price{font-size:17px}.site-popup{padding:0}.toast{bottom:85px}.footer{display:block}.footer-actions{margin-top:18px;gap:22px}.support-qr-panel{max-width:215px}.guide{margin-top:20px}.uc-tabs{overflow-x:auto}.uc-tab{white-space:nowrap}.ref-box{flex-wrap:wrap}.ref-box input{width:100%;min-width:0}.modal .uc-value{max-width:65%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.account-session{display:flex;justify-content:flex-end;margin:-4px 0 14px;font-size:12px}.faq-question{width:100%;text-align:left;border:0;background:transparent;font:inherit;color:inherit}.faq-question:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
.purchase-fields{border:0;padding:0;margin:0;min-width:0}.modal-close:disabled{opacity:.35;cursor:wait}

/* Use the original full-color logo; crop only its transparent outer padding. */
.header .wordmark{width:132px;height:76px;justify-content:center;flex-shrink:0;overflow:hidden}
.header .store-logo{display:block;width:132px;height:132px;max-width:none;flex-shrink:0}
@media(max-width:680px){.header .wordmark{width:112px;height:64px}.header .store-logo{width:112px;height:112px}}

.payment-actions{display:grid;gap:12px;max-width:360px;margin:18px auto 0}
.payment-actions:empty{display:none}.payment-actions .btn{width:100%;justify-content:center;min-height:44px}
.payment-launch-hint{font-size:12px;line-height:1.75;color:var(--ink2);margin:0;text-align:left}
.payment-result-actions{display:grid;gap:9px;max-width:360px;margin:18px auto 0}
.payment-result-actions .btn-link{min-height:36px}.payment-result-actions .btn-link:disabled{opacity:.65;cursor:wait}