/* ==== Design Tokens ==== */
    :root {
      --brand: #165DFF;
      --brand-soft: #E8F3FF;
      --text-primary: #1D2129;
      --text-secondary: #4E5969;
      --text-tertiary: #86909C;
      --muted: #F9FAFB;
      --background: #ffffff;
      --border: rgba(0, 0, 0, 0.1);
      --error: #F53F3F;
      --success: #00B42A;
      --radius: 0.625rem;
      --shadow: 0 4px 20px rgba(22, 93, 255, 0.12);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: var(--muted);
      color: var(--text-primary);
      line-height: 1.5;
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; }
    input { font-family: inherit; }

    /* ==== Layout ==== */
    #app { min-height: 100vh; display: flex; flex-direction: column; }
    .page { display: none; flex: 1; flex-direction: column; }
    .page.active { display: flex; }

    /* ==== Header ==== */
    .site-header {
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .logo-link { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--text-primary); }
    .logo-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand); overflow: hidden; }
    .logo-icon img { width: 100%; height: 100%; object-fit: contain; }
    .brand-icon { width: 64px; height: 64px; border-radius: 1.25rem; display: inline-grid; place-items: center; margin-bottom: 1rem; overflow: hidden; }
    .brand-icon img { width: 100%; height: 100%; object-fit: contain; }
    .brand-icon svg { color: var(--brand); }
    .header-search { flex: 1; max-width: 480px; position: relative; }
    .header-search input {
      width: 100%; height: 42px; padding: 0 1rem 0 2.5rem;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: #fff; font-size: 0.9375rem; outline: none;
    }
    .header-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
    .header-search svg { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-tertiary); }

    /* ==== Home ==== */
    .home-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 1.5rem 2rem 2rem; text-align: center; }
    .brand-box { margin-bottom: 1.5rem; }
    .brand-title { font-size: 2rem; font-weight: 600; }
    .home-desc { margin-top: 1rem; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; max-width: 640px; padding: 0 1rem; }
    .home-samples { margin-top: 0.75rem; font-size: 0.875rem; color: var(--text-tertiary); }
    .home-samples span { color: var(--brand); cursor: pointer; transition: opacity .2s; }
    .home-samples span:hover { opacity: 0.8; text-decoration: underline; }
    .home-search { width: 100%; max-width: 640px; margin: 0 auto; display: flex; gap: 0.75rem; }
    .home-search .input-wrap { flex: 1; position: relative; }
    .home-search input {
      width: 100%; height: 56px; padding: 0 1rem 0 2.75rem;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: #fff; font-size: 1rem; outline: none;
    }
    .home-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
    .home-search .input-wrap svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-tertiary); }
    .btn-primary {
      height: 56px; padding: 0 2rem;
      background: var(--brand); color: #fff; border-radius: var(--radius);
      font-size: 1rem; font-weight: 500; transition: opacity .2s;
    }
    .btn-primary:hover { opacity: 0.9; }
    .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
    #page-home { overflow-y: auto; }
    .home-results { width: 100%; max-width: 1024px; margin: 1.5rem auto 0; text-align: left; }

    /* ==== Search Results ==== */
    .container { width: 100%; max-width: 1024px; margin: 0 auto; padding: 1.5rem 1rem; flex: 1; }
    .result-meta { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem; }
    .result-meta .brand-text { color: var(--brand); font-weight: 500; }
    .resource-card {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      background: #fff; border: 1px solid var(--border); border-radius: 1rem;
      padding: 1.25rem; margin-bottom: 0.75rem; cursor: pointer;
      transition: transform .15s, box-shadow .15s;
    }
    .resource-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
    .resource-info { min-width: 0; }
    .badge {
      display: inline-flex; align-items: center; gap: 0.25rem;
      background: var(--brand-soft); color: var(--brand);
      padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500;
    }
    .badge-success { background: #e6ffed; color: var(--success); }
    .resource-title { font-size: 1.0625rem; font-weight: 500; margin-top: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .resource-intro { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .btn-outline {
      flex-shrink: 0; height: 40px; padding: 0 1rem;
      border: 1px solid var(--border); background: #fff; color: var(--text-primary);
      border-radius: var(--radius); display: inline-flex; align-items: center; gap: 0.375rem;
      font-size: 0.9375rem;
    }
    .resource-card:hover .btn-outline { border-color: var(--brand); color: var(--brand); }

    .empty-state { text-align: center; padding: 5rem 1rem; }
    .empty-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-grid; place-items: center; margin-bottom: 1rem; }
    .empty-title { color: var(--text-primary); font-size: 1.125rem; }
    .empty-desc { color: var(--text-tertiary); font-size: 0.875rem; margin-top: 0.25rem; }

    /* ==== Password Page ==== */
    .center-card { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
    .card {
      width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--border);
      border-radius: 1.25rem; padding: 2rem; box-shadow: 0 12px 40px rgba(0,0,0,0.06);
    }
    .card-header { text-align: center; margin-bottom: 1.5rem; }
    .card-icon { width: 64px; height: 64px; border-radius: 1rem; background: var(--brand-soft); color: var(--brand); display: inline-grid; place-items: center; margin-bottom: 0.5rem; }
    #pwd-res-no { display: block; width: fit-content; margin: 0 auto 0.5rem; }
    .card-title { font-size: 1.25rem; font-weight: 600; }
    .card-desc { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }
    .pwd-input {
      width: 100%; height: 52px; padding: 0 1rem; text-align: center; letter-spacing: 0.15em;
      border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; outline: none;
    }
    .pwd-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
    .error-msg { color: var(--error); font-size: 0.875rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.375rem; }
    .hint { text-align: center; font-size: 0.75rem; color: var(--text-tertiary); margin-top: 1rem; }

    /* ==== Download Page ==== */
    .download-card { max-width: 960px; }
.download-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; margin-bottom: 1rem; }
.download-left { min-width: 0; }
.download-right { min-width: 0; }
    .disk-choose-tip { font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 0.75rem; text-align: center; }
    .disk-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: 0.75rem; }
    .disk-name { font-weight: 500; }
    .disk-code { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.125rem; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
    .copy-code-btn { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.125rem 0.5rem; background: var(--muted); color: var(--brand); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.75rem; cursor: pointer; transition: all .2s; }
    .copy-code-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
    .copy-code-btn.copied { background: var(--success); color: #fff; border-color: var(--success); }
    .btn-brand { height: 40px; padding: 0 1rem; background: var(--brand); color: #fff; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; }
    .feedback-link { display: inline-block; margin-top: 0.5rem; color: var(--brand); font-size: 0.875rem; text-decoration: underline; }
    .download-error { text-align: center; padding: 1.25rem 1rem; }
    .download-error p { margin-bottom: 0.25rem; }
    .download-error-full {
      grid-column: 1 / -1;
      text-align: center;
      padding: 3rem 1rem;
    }
    .download-error-full p { color: var(--error); margin-bottom: 0.75rem; }

    /* ==== Disclaimer ==== */
    .disclaimer-back { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: 1rem; cursor: pointer; background: none; border: none; padding: 0; }
    .disclaimer-back:hover { color: var(--brand); }
    .disclaimer-card { max-width: 720px; background: #fff; border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; margin: 0 auto; box-shadow: var(--shadow); }
    .disclaimer-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
    .disclaimer-icon { width: 44px; height: 44px; border-radius: 0.75rem; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
    .disclaimer-card h1 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }
    .disclaimer-intro { color: var(--text-secondary); margin-bottom: 1.25rem; }
    .disclaimer-list { list-style: none; counter-reset: item; }
    .disclaimer-list li { display: flex; gap: 0.75rem; margin-bottom: 1rem; color: var(--text-secondary); line-height: 1.6; }
    .disclaimer-list li::before { counter-increment: item; content: counter(item); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 0.8125rem; font-weight: 500; display: grid; place-items: center; margin-top: 0.125rem; }
    .disclaimer-contact { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 0.9375rem; }
    .disclaimer-contact a { color: var(--brand); }
    .feedback-form { display: flex; flex-direction: column; gap: 1rem; }
    .feedback-field { display: flex; flex-direction: column; gap: 0.375rem; }
    .feedback-field label { font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); }
    .feedback-field input, .feedback-field textarea { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9375rem; font-family: inherit; resize: vertical; }
    .feedback-field input:focus, .feedback-field textarea:focus { outline: none; border-color: var(--brand); }
    .feedback-required { color: var(--error); }
    .feedback-layout .container { max-width: 1200px; }
    .feedback-layout .disclaimer-back { margin-bottom: 1rem; }
    .feedback-layout-inner { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 1.5rem; align-items: start; }
    .feedback-list-card { padding: 1.5rem; width: 100%; }
    .feedback-list-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .feedback-list-head h2 { font-size: 1.25rem; font-weight: 600; margin: 0; }
    .feedback-list-count { font-size: 0.875rem; color: var(--text-tertiary); white-space: nowrap; }
    .feedback-list { display: flex; flex-direction: column; gap: 0.75rem; }
    .feedback-item { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
    .feedback-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.875rem; }
    .feedback-item-no { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
    .feedback-status { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
    .feedback-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
    .feedback-status.pending { background: #fff2f0; color: #ff4d4f; }
    .feedback-status.pending::before { background: #ff4d4f; }
    .feedback-status.done { background: #f6ffed; color: #52c41a; }
    .feedback-status.done::before { background: #52c41a; }
    .feedback-item-section { margin-bottom: 0.75rem; }
    .feedback-item-section:last-child { margin-bottom: 0; }
    .feedback-item-label { font-size: 0.75rem; font-weight: 500; color: var(--text-tertiary); margin-bottom: 0.25rem; }
    .feedback-item-content { font-size: 0.9375rem; color: var(--text-primary); line-height: 1.6; word-break: break-word; }
    .feedback-item-reply { padding: 0.875rem; background: #f0f7ff; border-radius: var(--radius); border-left: 3px solid var(--brand); }
    .feedback-item-reply-text { font-size: 0.9375rem; color: var(--text-primary); line-height: 1.6; word-break: break-word; }
    .feedback-item-time { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
    .feedback-item-time span { display: inline-flex; align-items: center; gap: 0.25rem; }
    .feedback-loading, .feedback-empty { text-align: center; color: var(--text-tertiary); font-size: 0.875rem; padding: 2rem 0; }
    @media (max-width: 768px) {
      .feedback-layout-inner { grid-template-columns: 1fr; }
      .feedback-form-card { order: 1; }
      .feedback-list-card { order: 2; }
    }

    /* ==== Footer ==== */
    .site-footer {
      text-align: center; font-size: 0.875rem; color: var(--text-tertiary);
      padding: 1.5rem 1rem; border-top: 1px solid var(--border); background: #fff;
    }
    .site-footer a:hover { color: var(--brand); }
    .site-footer .copyright-row { margin-top: 0.5rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
    .site-footer .copyright-row > * { padding: 0 0.625rem; }
    .site-footer .copyright-row > *:not(:last-child) { border-right: 1px solid var(--border); }

    /* ==== Utils ==== */
    .spin { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .hidden { display: none !important; }
    .full-center { flex: 1; display: flex; align-items: center; justify-content: center; }

    /* ==== Responsive ==== */
    @media (max-width: 768px) {
      .home-center { padding: 1rem 1rem 1.5rem; }
      .home-search { flex-direction: row; gap: 0.5rem; }
      .home-search input { height: 48px; padding-left: 2.5rem; font-size: 0.9375rem; }
      .home-search .input-wrap svg { width: 18px; height: 18px; left: 0.75rem; }
      .btn-primary { height: 48px; padding: 0 1.25rem; white-space: nowrap; }
      .brand-title { font-size: 1.625rem; }
      .card { padding: 1.5rem; margin: 0 0.5rem; }
      .resource-card { padding: 1rem; gap: 0.75rem; }
      .resource-title { font-size: 0.9375rem; }
      .resource-intro { font-size: 0.8125rem; }
      .btn-outline { height: 36px; padding: 0 0.75rem; font-size: 0.875rem; }
      .disk-item { padding: 0.875rem; gap: 0.75rem; flex-wrap: wrap; }
      .disk-name { font-size: 0.9375rem; }
      .download-body { grid-template-columns: 1fr; gap: 1rem; }
      .download-card { padding: 1.25rem; }
      .site-header { padding: 0.75rem 1rem; gap: 0.75rem; }
      .header-search { max-width: none; }
      .header-search input { height: 38px; font-size: 0.875rem; }
      #download-logo-text { display: none; }
    }

    /* ==== Carousel ==== */
    .carousel {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--border);
      margin-bottom: 1rem;
    }
    .carousel-track {
      display: flex;
      transition: transform 0.3s ease;
    }
    .carousel-slide {
      min-width: 100%;
      aspect-ratio: 16 / 9;
      display: grid;
      place-items: center;
      background: var(--muted);
    }
    .carousel-slide img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      cursor: pointer;
      color: var(--text-primary);
      padding: 0;
    }
    .carousel-btn.prev { left: 0.5rem; }
    .carousel-btn.next { right: 0.5rem; }
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.75rem;
    }
    .carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border);
      cursor: pointer;
    }
    .carousel-dot.active { background: var(--brand); }