:root, [data-theme="amber"] {
      --bg-primary: #0a0a0a;
      --bg-secondary: #141414;
      --bg-card: #1a1a1a;
      --bg-card-hover: #222222;
      --gold: #c9a227;
      --gold-light: #e0c04a;
      --gold-dim: #8a7019;
      --text-primary: #f5f0e6;
      --text-secondary: #a89f8f;
      --text-muted: #6b6358;
      --border: rgba(201, 162, 39, 0.15);
      --glass: rgba(255, 255, 255, 0.03);
      --danger: #c45c5c;
      --radius: 16px;
      --radius-sm: 10px;
      --nav-height: 64px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    [data-theme="ocean"] {
      --bg-primary: #0a1218;
      --bg-secondary: #0f1a24;
      --bg-card: #152230;
      --bg-card-hover: #1c2e40;
      --gold: #4db8d9;
      --gold-light: #7ecce6;
      --gold-dim: #2a7a96;
      --text-primary: #e8f4f8;
      --text-secondary: #8fadb8;
      --text-muted: #5a7380;
      --border: rgba(77, 184, 217, 0.18);
      --danger: #e07070;
    }

    [data-theme="emerald"] {
      --bg-primary: #0a120e;
      --bg-secondary: #101a14;
      --bg-card: #16201a;
      --bg-card-hover: #1e2c24;
      --gold: #3dba7a;
      --gold-light: #6dd49c;
      --gold-dim: #2a7a52;
      --text-primary: #e8f5ee;
      --text-secondary: #8fbaa4;
      --text-muted: #5a7a68;
      --border: rgba(61, 186, 122, 0.18);
      --danger: #d46a6a;
    }

    [data-theme="rose"] {
      --bg-primary: #120a0e;
      --bg-secondary: #1a1014;
      --bg-card: #22161c;
      --bg-card-hover: #2e1e26;
      --gold: #d47a9a;
      --gold-light: #e6a0b8;
      --gold-dim: #964a68;
      --text-primary: #f8eef2;
      --text-secondary: #b89aaa;
      --text-muted: #7a5a68;
      --border: rgba(212, 122, 154, 0.18);
      --danger: #c45c5c;
    }

    [data-theme="violet"] {
      --bg-primary: #0e0a14;
      --bg-secondary: #16101e;
      --bg-card: #1e1628;
      --bg-card-hover: #2a1e38;
      --gold: #a78bfa;
      --gold-light: #c4b0fc;
      --gold-dim: #6b4fc4;
      --text-primary: #f0eef8;
      --text-secondary: #a89ab8;
      --text-muted: #6a5a80;
      --border: rgba(167, 139, 250, 0.18);
      --danger: #e07090;
    }

    [data-theme="ivory"] {
      --bg-primary: #f5f0e8;
      --bg-secondary: #ebe4d8;
      --bg-card: #ffffff;
      --bg-card-hover: #f0ebe3;
      --gold: #8b6914;
      --gold-light: #a67c1a;
      --gold-dim: #6b5010;
      --text-primary: #2a2418;
      --text-secondary: #5a5040;
      --text-muted: #8a7e6a;
      --border: rgba(139, 105, 20, 0.2);
      --danger: #b04040;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      overflow-x: hidden;
      line-height: 1.5;
    }

    body {
      padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
    }

    /* Header */
    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      padding: 12px 16px;
    }

    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--gold);
      letter-spacing: 1px;
      text-align: center;
    }

    .search-box {
      margin-top: 12px;
      position: relative;
    }

    .search-box input {
      width: 100%;
      padding: 12px 16px 12px 42px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 24px;
      color: var(--text-primary);
      font-size: 15px;
      outline: none;
      transition: border-color 0.2s;
    }

    .search-box input:focus {
      border-color: var(--gold-dim);
    }

    .search-box input::placeholder {
      color: var(--text-muted);
    }

    .search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 16px;
    }

    /* Pages */
    .page {
      display: none;
      min-height: calc(100vh - var(--nav-height) - 60px);
      padding: 16px;
      animation: fadeIn 0.25s ease;
    }

    .page.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Home */
    .section-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--gold);
      margin: 20px 0 12px;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title:first-child {
      margin-top: 4px;
    }

    .hero-card {
      background: linear-gradient(135deg, var(--bg-card-hover) 0%, var(--bg-card) 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    .hero-card::before {
      content: "";
      position: absolute;
      top: -50%;
      right: -30%;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(201, 162, 39, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-label {
      font-size: 12px;
      color: var(--gold-dim);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .hero-name {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .hero-english {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 12px;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
    }

    .tag {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--gold) 12%, transparent);
      color: var(--gold-light);
      border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
    }

    .tag.clickable {
      cursor: pointer;
      transition: all 0.2s;
    }

    .tag.clickable:active {
      background: rgba(201, 162, 39, 0.3);
      transform: scale(0.96);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 18px;
      border-radius: 24px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-primary {
      background: var(--gold);
      color: #0a0a0a;
    }

    .btn-primary:active {
      transform: scale(0.97);
      background: var(--gold-light);
    }

    .btn-outline {
      background: transparent;
      color: var(--gold);
      border: 1px solid var(--gold-dim);
    }

    .btn-outline:active {
      background: rgba(201, 162, 39, 0.1);
    }

    .btn-row {
      display: flex;
      gap: 10px;
      margin-top: 8px;
    }

    /* Base Categories */
    .base-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .base-item {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px 4px;
      text-align: center;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .base-item:active {
      background: var(--bg-card-hover);
      border-color: var(--gold-dim);
      color: var(--gold);
    }

    /* Cocktail Cards */
    .cocktail-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .cocktail-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      display: flex;
      gap: 14px;
      cursor: pointer;
      transition: background 0.2s;
      position: relative;
    }

    .cocktail-card:active {
      background: var(--bg-card-hover);
    }

    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(201, 162, 39, 0.15), rgba(201, 162, 39, 0.05));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }

    .card-body {
      flex: 1;
      min-width: 0;
    }

    .card-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-english {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .card-meta .tag {
      font-size: 10px;
      padding: 2px 8px;
    }

    .fav-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s;
    }

    .fav-btn.active {
      color: var(--danger);
    }

    /* Filter Bar */
    .filter-bar {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 12px;
      margin-bottom: 4px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .filter-bar::-webkit-scrollbar {
      display: none;
    }

    .filter-chip {
      flex-shrink: 0;
      padding: 7px 14px;
      border-radius: 20px;
      font-size: 13px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .filter-chip.active {
      background: color-mix(in srgb, var(--gold) 15%, transparent);
      border-color: var(--gold-dim);
      color: var(--gold);
    }

    .filter-label {
      font-size: 12px;
      color: var(--text-muted);
      margin: 4px 0 6px;
      letter-spacing: 0.5px;
    }

    .filter-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      min-height: 28px;
    }

    .clear-filter-btn {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-secondary);
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .clear-filter-btn:active {
      background: rgba(201, 162, 39, 0.1);
      color: var(--gold);
      border-color: var(--gold-dim);
    }

    .nav-badge {
      position: absolute;
      top: 6px;
      right: calc(50% - 22px);
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 8px;
      background: var(--danger);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    /* Detail Page */
    .detail-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .back-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-primary);
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .detail-title-wrap {
      flex: 1;
    }

    .detail-name {
      font-size: 24px;
      font-weight: 600;
      color: var(--gold);
    }

    .detail-english {
      font-size: 14px;
      color: var(--text-secondary);
    }

    .detail-section {
      margin-bottom: 20px;
    }

    .detail-label {
      font-size: 12px;
      color: var(--gold-dim);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .detail-content {
      font-size: 15px;
      color: var(--text-primary);
      line-height: 1.6;
    }

    .ingredient-list {
      list-style: none;
    }

    .ingredient-list li {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }

    .ingredient-list li:last-child {
      border-bottom: none;
    }

    .ingredient-amount {
      color: var(--gold);
      font-weight: 500;
    }

    .detail-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }

    .detail-actions .btn {
      flex: 1;
    }

    /* Empty State */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted);
    }

    .empty-state .icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .empty-state p {
      font-size: 15px;
    }

    /* Bottom Nav */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: calc(var(--nav-height) + var(--safe-bottom));
      padding-bottom: var(--safe-bottom);
      background: color-mix(in srgb, var(--bg-primary) 95%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid var(--border);
      display: flex;
      z-index: 200;
    }

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      color: var(--text-muted);
      font-size: 11px;
      cursor: pointer;
      transition: color 0.2s;
      background: none;
      border: none;
      position: relative;
    }

    .nav-item.active {
      color: var(--gold);
    }

    .nav-item .icon {
      font-size: 22px;
    }

    /* Count text */
    .count-text {
      font-size: 12px;
      color: var(--text-muted);
    }

    .abv-result {
      font-size: 28px;
      font-weight: 600;
      color: var(--gold);
      margin: 8px 0;
    }

    .abv-hint {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .abv-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }

    .abv-row:last-child {
      border-bottom: none;
    }

    .abv-row-name {
      flex: 1;
      min-width: 0;
    }

    .abv-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .abv-controls button {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text-primary);
      font-size: 16px;
      cursor: pointer;
    }

    .abv-controls button:active {
      background: color-mix(in srgb, var(--gold) 15%, transparent);
      border-color: var(--gold-dim);
    }

    .abv-controls input {
      width: 56px;
      text-align: center;
      padding: 6px 4px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-secondary);
      color: var(--gold);
      font-size: 14px;
      font-weight: 500;
    }

    /* Materials categories */
    .ing-cat {
      margin-bottom: 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--bg-card);
    }

    .ing-cat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      user-select: none;
    }

    .ing-cat-header:active {
      background: var(--bg-card-hover);
    }

    .ing-cat-header .cat-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ing-cat-header .cat-count {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 400;
    }

    .ing-cat-header .cat-arrow {
      color: var(--text-muted);
      font-size: 12px;
      transition: transform 0.2s;
    }

    .ing-cat.open .cat-arrow {
      transform: rotate(90deg);
    }

    .ing-cat-body {
      display: none;
      padding: 0 12px 12px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .ing-cat.open .ing-cat-body {
      display: flex;
    }

    .selected-ing-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
    }

    .selected-ing-tags .tag {
      cursor: pointer;
    }

    /* Theme picker */
    .theme-btn {
      position: absolute;
      right: 16px;
      top: 12px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--gold);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .theme-panel {
      display: none;
      position: fixed;
      left: 50%;
      bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
      transform: translateX(-50%);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      z-index: 250;
      min-width: 200px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    }

    .theme-panel.open {
      display: block;
    }

    .theme-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-primary);
    }

    .theme-option:active {
      background: var(--bg-card-hover);
    }

    .theme-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.2);
      flex-shrink: 0;
    }

    /* Random button on home */
    .random-btn-wrap {
      margin: 16px 0;
    }

    /* Mine page */
    .mine-settings {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 8px;
      overflow: hidden;
    }

    .mine-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      font-size: 15px;
      border-bottom: 1px solid var(--border);
    }

    .mine-row:last-child {
      border-bottom: none;
    }

    .mine-link {
      color: var(--gold);
      font-size: 14px;
      cursor: pointer;
    }

    .toggle {
      position: relative;
      width: 48px;
      height: 28px;
      display: inline-block;
    }

    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      inset: 0;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 28px;
      cursor: pointer;
      transition: 0.2s;
    }

    .toggle-slider::before {
      content: "";
      position: absolute;
      width: 22px;
      height: 22px;
      left: 2px;
      top: 2px;
      background: var(--text-secondary);
      border-radius: 50%;
      transition: 0.2s;
    }

    .toggle input:checked + .toggle-slider {
      background: color-mix(in srgb, var(--gold) 25%, transparent);
      border-color: var(--gold-dim);
    }

    .toggle input:checked + .toggle-slider::before {
      transform: translateX(20px);
      background: var(--gold);
    }

    /* Press feedback */
    .btn, .nav-item, .filter-chip, .base-item, .cocktail-card, .fav-btn,
    .back-btn, .theme-btn, .ing-cat-header, .clear-filter-btn, .mine-link {
      transition: transform 0.12s ease, opacity 0.12s ease, background 0.15s ease;
    }

    .btn:active, .filter-chip:active, .base-item:active,
    .clear-filter-btn:active, .theme-option:active {
      transform: scale(0.96);
    }

    .nav-item:active {
      transform: scale(0.92);
      opacity: 0.85;
    }

    .cocktail-card:active {
      transform: scale(0.98);
    }

    .fav-btn:active, .back-btn:active, .theme-btn:active {
      transform: scale(0.88);
    }

    .random-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 300;
      background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 20px;
    }

    .random-overlay.show {
      display: flex;
    }

    .random-glass {
      font-size: 72px;
      animation: glassWobble 0.7s ease-in-out infinite;
      filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35));
    }

    .random-overlay-text {
      font-size: 15px;
      color: var(--gold);
      letter-spacing: 1px;
    }

    @keyframes glassWobble {
      0% { transform: rotate(-12deg) translateY(0); }
      25% { transform: rotate(10deg) translateY(-8px); }
      50% { transform: rotate(-8deg) translateY(0); }
      75% { transform: rotate(12deg) translateY(-6px); }
      100% { transform: rotate(-12deg) translateY(0); }
    }

    .random-btn-wrap .btn {
      width: 100%;
      padding: 14px;
      font-size: 15px;
    }

    /* Scrollbar hide for lists */
    .page {
      -webkit-overflow-scrolling: touch;
    }
    /* ---- 背景主题质感 ---- */
    body {
      background-color: var(--bg-primary);
      background-image: var(--bg-glow), var(--bg-pattern);
      background-repeat: no-repeat, repeat;
      background-size: cover, 160px 160px;
      background-position: center, top left;
    }
    [data-theme="amber"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(201, 162, 39, 0.13), transparent 62%),
        radial-gradient(90% 50% at 85% 100%, rgba(201, 162, 39, 0.07), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23e0c04a'%3E%3Ccircle cx='18' cy='24' r='1.3' opacity='0.5'/%3E%3Ccircle cx='62' cy='12' r='1' opacity='0.4'/%3E%3Ccircle cx='108' cy='30' r='1.6' opacity='0.35'/%3E%3Ccircle cx='140' cy='18' r='1' opacity='0.45'/%3E%3Ccircle cx='34' cy='66' r='1' opacity='0.35'/%3E%3Ccircle cx='88' cy='78' r='1.4' opacity='0.4'/%3E%3Ccircle cx='132' cy='96' r='1.1' opacity='0.35'/%3E%3Ccircle cx='16' cy='118' r='1.4' opacity='0.4'/%3E%3Ccircle cx='74' cy='132' r='1' opacity='0.45'/%3E%3Ccircle cx='120' cy='140' r='1.5' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="ocean"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(77, 184, 217, 0.13), transparent 62%),
        radial-gradient(90% 50% at 15% 100%, rgba(77, 184, 217, 0.08), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%237ecce6'%3E%3Ccircle cx='24' cy='28' r='7' stroke-width='1' opacity='0.18'/%3E%3Ccircle cx='24' cy='28' r='4' stroke-width='0.7' opacity='0.14'/%3E%3Ccircle cx='96' cy='16' r='5' stroke-width='1' opacity='0.16'/%3E%3Ccircle cx='156' cy='44' r='8' stroke-width='1' opacity='0.15'/%3E%3Ccircle cx='58' cy='72' r='4' stroke-width='0.8' opacity='0.2'/%3E%3Ccircle cx='132' cy='86' r='6' stroke-width='1' opacity='0.15'/%3E%3Ccircle cx='20' cy='122' r='5' stroke-width='0.9' opacity='0.18'/%3E%3Ccircle cx='88' cy='108' r='3.5' stroke-width='0.8' opacity='0.2'/%3E%3Ccircle cx='150' cy='136' r='7' stroke-width='1' opacity='0.16'/%3E%3Ccircle cx='52' cy='152' r='6' stroke-width='0.9' opacity='0.18'/%3E%3Ccircle cx='116' cy='162' r='4' stroke-width='0.8' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="emerald"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(61, 186, 122, 0.13), transparent 62%),
        radial-gradient(90% 50% at 85% 100%, rgba(61, 186, 122, 0.07), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%236dd49c'%3E%3Cellipse cx='28' cy='22' rx='7' ry='3.5' opacity='0.14' transform='rotate(35 28 22)'/%3E%3Cellipse cx='98' cy='38' rx='6' ry='3' opacity='0.12' transform='rotate(-25 98 38)'/%3E%3Cellipse cx='52' cy='70' rx='8' ry='4' opacity='0.13' transform='rotate(55 52 70)'/%3E%3Cellipse cx='120' cy='88' rx='6' ry='3' opacity='0.12' transform='rotate(-40 120 88)'/%3E%3Cellipse cx='30' cy='112' rx='7' ry='3.5' opacity='0.14' transform='rotate(20 30 112)'/%3E%3Cellipse cx='92' cy='126' rx='8' ry='4' opacity='0.13' transform='rotate(-55 92 126)'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="rose"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(212, 122, 154, 0.14), transparent 62%),
        radial-gradient(90% 50% at 85% 100%, rgba(212, 122, 154, 0.08), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23e6a0b8'%3E%3Ccircle cx='26' cy='30' r='5' opacity='0.16'/%3E%3Ccircle cx='78' cy='18' r='4' opacity='0.14'/%3E%3Ccircle cx='122' cy='42' r='5.5' opacity='0.15'/%3E%3Ccircle cx='44' cy='78' r='4.5' opacity='0.17'/%3E%3Ccircle cx='104' cy='66' r='5' opacity='0.14'/%3E%3Ccircle cx='24' cy='112' r='5' opacity='0.16'/%3E%3Ccircle cx='86' cy='98' r='4' opacity='0.15'/%3E%3Ccircle cx='126' cy='120' r='5.5' opacity='0.15'/%3E%3Ccircle cx='58' cy='128' r='4.5' opacity='0.16'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="violet"] {
      --bg-glow:
        radial-gradient(120% 60% at 50% 0%, rgba(167, 139, 250, 0.16), transparent 60%),
        radial-gradient(70% 45% at 18% 90%, rgba(212, 120, 240, 0.10), transparent 60%),
        radial-gradient(70% 45% at 88% 75%, rgba(120, 150, 255, 0.10), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23c4b0fc'%3E%3Ccircle cx='16' cy='20' r='1.2' opacity='0.7'/%3E%3Ccircle cx='64' cy='10' r='0.9' opacity='0.5'/%3E%3Ccircle cx='112' cy='28' r='1.4' opacity='0.6'/%3E%3Ccircle cx='146' cy='14' r='0.8' opacity='0.55'/%3E%3Ccircle cx='34' cy='60' r='1' opacity='0.5'/%3E%3Ccircle cx='92' cy='52' r='1.3' opacity='0.65'/%3E%3Ccircle cx='138' cy='74' r='1' opacity='0.5'/%3E%3Ccircle cx='20' cy='104' r='1.2' opacity='0.6'/%3E%3Ccircle cx='76' cy='92' r='0.9' opacity='0.55'/%3E%3Ccircle cx='120' cy='112' r='1.3' opacity='0.6'/%3E%3Ccircle cx='40' cy='138' r='1' opacity='0.5'/%3E%3Ccircle cx='100' cy='146' r='1.2' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="ivory"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(139, 105, 20, 0.10), transparent 60%),
        radial-gradient(90% 50% at 85% 100%, rgba(139, 105, 20, 0.06), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    }

    /* ---- 弹窗居中 + 遮罩 + 动画 ---- */
    .theme-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 290;
    }
    .theme-backdrop.show {
      display: block;
      animation: themeFade 0.25s ease;
    }
    @keyframes themeFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .theme-panel {
      position: fixed !important;
      left: 50% !important;
      top: 50% !important;
      bottom: auto !important;
      transform: translate(-50%, -50%) !important;
      width: min(300px, 84vw) !important;
      max-height: 72vh;
      overflow-y: auto;
      border-radius: 20px !important;
      padding: 18px 16px 14px !important;
      z-index: 300 !important;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
    }
    .theme-panel.open {
      animation: themePop 0.28s ease;
    }
    @keyframes themePop {
      from { opacity: 0; transform: translate(-50%, -46%) scale(0.94); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .theme-panel-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--gold);
      text-align: center;
      letter-spacing: 1px;
      margin-bottom: 4px;
    }
    .theme-panel-sub {
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
      margin-bottom: 12px;
    }
    .theme-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: var(--text-muted);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    .theme-close:active { background: var(--bg-card-hover); }
    .theme-option { padding: 9px 10px !important; border-radius: 12px !important; }
    .theme-option:active,
    .theme-option.active { background: var(--bg-card-hover); }
    .theme-dot {
      width: 36px !important;
      height: 36px !important;
      border-radius: 10px !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.25) !important;
    }
    .theme-option.active .theme-dot {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    .theme-name { font-size: 14px; font-weight: 500; }
    .theme-tag { margin-left: auto; font-size: 11px; color: var(--text-muted); }
    .theme-check { display: none; color: var(--gold); font-size: 14px; font-weight: 700; margin-left: 2px; }
    .theme-option.active .theme-check { display: block; }
    .theme-option[data-theme="amber"] .theme-dot { background: linear-gradient(135deg,#2a1f0a 0%,#1a1510 55%,#c9a227 100%) !important; }
    .theme-option[data-theme="ocean"] .theme-dot { background: linear-gradient(135deg,#0a2430 0%,#0f1a24 55%,#4db8d9 100%) !important; }
    .theme-option[data-theme="emerald"] .theme-dot { background: linear-gradient(135deg,#0a2a18 0%,#101a14 55%,#3dba7a 100%) !important; }
    .theme-option[data-theme="rose"] .theme-dot { background: linear-gradient(135deg,#2a1220 0%,#1a1014 55%,#d47a9a 100%) !important; }
    .theme-option[data-theme="violet"] .theme-dot { background: linear-gradient(135deg,#1a1030 0%,#16101e 55%,#a78bfa 100%) !important; }
    .theme-option[data-theme="ivory"] .theme-dot { background: linear-gradient(135deg,#fff9ee 0%,#ebe4d8 55%,#8b6914 100%) !important; }
  

/* === Feature styles from patches === */

    /* 酒杯预览 */
    .card-icon { display: flex; align-items: center; justify-content: center; }
    .glass-preview { width: 26px; height: 32px; position: relative; display: inline-block; }
    .glass-preview .bowl { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 20px; border-radius: 3px 3px 14px 14px; border: 1px solid rgba(255,255,255,0.35); background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, var(--liquid, rgba(255,255,255,0.18)) 60%); overflow: hidden; }
    .glass-preview .bowl::after { content: ''; position: absolute; top: 3px; left: 1px; right: 1px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.35); }
    .glass-preview .stem { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 2px; height: 9px; border-radius: 1px; background: rgba(255,255,255,0.35); }
    .glass-preview .base { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 16px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.35); }
    .glass-preview.mini { transform: scale(0.8); }
    [data-theme="ivory"] .glass-preview .bowl { border-color: rgba(0,0,0,0.18); }
    [data-theme="ivory"] .glass-preview .bowl::after { background: rgba(0,0,0,0.10); }
    [data-theme="ivory"] .glass-preview .stem, [data-theme="ivory"] .glass-preview .base { background: rgba(0,0,0,0.22); }

    /* 提示气泡 */
    #appToast { position: fixed; left: 50%; bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px); transform: translateX(-50%) translateY(8px); background: rgba(20,20,20,0.92); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 20px; z-index: 400; opacity: 0; pointer-events: none; transition: all 0.25s ease; max-width: 82vw; text-align: center; }
    #appToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* 相似推荐 */
    .related-section { margin-top: 20px; }
    .related-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
    .related-item:active { background: var(--bg-card-hover); }
    .related-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .related-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .related-empty { font-size: 12px; color: var(--text-muted); padding: 10px 0; text-align: center; }

    /* 分享按钮 */
    .share-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--gold); font-size: 15px; display: flex; align-items: center; justify-content: center; margin-right: 8px; cursor: pointer; flex-shrink: 0; }
    .share-btn:active { background: var(--bg-card-hover); }

    /* 导入弹窗 */
    .imp-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .imp-box { width: 100%; max-width: 320px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
    .imp-title { font-size: 15px; font-weight: 600; color: var(--gold); text-align: center; margin-bottom: 12px; }
    .imp-area { width: 100%; height: 120px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-size: 12px; resize: none; box-sizing: border-box; }
    .imp-btns { display: flex; gap: 10px; margin-top: 12px; }
    .imp-btns .btn { flex: 1; }
  

    /* ---- 背景主题质感 ---- */
    body {
      background-color: var(--bg-primary);
      background-image: var(--bg-glow), var(--bg-pattern);
      background-repeat: no-repeat, repeat;
      background-size: cover, 160px 160px;
      background-position: center, top left;
    }
    [data-theme="amber"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(201, 162, 39, 0.13), transparent 62%),
        radial-gradient(90% 50% at 85% 100%, rgba(201, 162, 39, 0.07), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23e0c04a'%3E%3Ccircle cx='18' cy='24' r='1.3' opacity='0.5'/%3E%3Ccircle cx='62' cy='12' r='1' opacity='0.4'/%3E%3Ccircle cx='108' cy='30' r='1.6' opacity='0.35'/%3E%3Ccircle cx='140' cy='18' r='1' opacity='0.45'/%3E%3Ccircle cx='34' cy='66' r='1' opacity='0.35'/%3E%3Ccircle cx='88' cy='78' r='1.4' opacity='0.4'/%3E%3Ccircle cx='132' cy='96' r='1.1' opacity='0.35'/%3E%3Ccircle cx='16' cy='118' r='1.4' opacity='0.4'/%3E%3Ccircle cx='74' cy='132' r='1' opacity='0.45'/%3E%3Ccircle cx='120' cy='140' r='1.5' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="ocean"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(77, 184, 217, 0.13), transparent 62%),
        radial-gradient(90% 50% at 15% 100%, rgba(77, 184, 217, 0.08), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%237ecce6'%3E%3Ccircle cx='24' cy='28' r='7' stroke-width='1' opacity='0.18'/%3E%3Ccircle cx='24' cy='28' r='4' stroke-width='0.7' opacity='0.14'/%3E%3Ccircle cx='96' cy='16' r='5' stroke-width='1' opacity='0.16'/%3E%3Ccircle cx='156' cy='44' r='8' stroke-width='1' opacity='0.15'/%3E%3Ccircle cx='58' cy='72' r='4' stroke-width='0.8' opacity='0.2'/%3E%3Ccircle cx='132' cy='86' r='6' stroke-width='1' opacity='0.15'/%3E%3Ccircle cx='20' cy='122' r='5' stroke-width='0.9' opacity='0.18'/%3E%3Ccircle cx='88' cy='108' r='3.5' stroke-width='0.8' opacity='0.2'/%3E%3Ccircle cx='150' cy='136' r='7' stroke-width='1' opacity='0.16'/%3E%3Ccircle cx='52' cy='152' r='6' stroke-width='0.9' opacity='0.18'/%3E%3Ccircle cx='116' cy='162' r='4' stroke-width='0.8' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="emerald"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(61, 186, 122, 0.13), transparent 62%),
        radial-gradient(90% 50% at 85% 100%, rgba(61, 186, 122, 0.07), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%236dd49c'%3E%3Cellipse cx='28' cy='22' rx='7' ry='3.5' opacity='0.14' transform='rotate(35 28 22)'/%3E%3Cellipse cx='98' cy='38' rx='6' ry='3' opacity='0.12' transform='rotate(-25 98 38)'/%3E%3Cellipse cx='52' cy='70' rx='8' ry='4' opacity='0.13' transform='rotate(55 52 70)'/%3E%3Cellipse cx='120' cy='88' rx='6' ry='3' opacity='0.12' transform='rotate(-40 120 88)'/%3E%3Cellipse cx='30' cy='112' rx='7' ry='3.5' opacity='0.14' transform='rotate(20 30 112)'/%3E%3Cellipse cx='92' cy='126' rx='8' ry='4' opacity='0.13' transform='rotate(-55 92 126)'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="rose"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(212, 122, 154, 0.14), transparent 62%),
        radial-gradient(90% 50% at 85% 100%, rgba(212, 122, 154, 0.08), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23e6a0b8'%3E%3Ccircle cx='26' cy='30' r='5' opacity='0.16'/%3E%3Ccircle cx='78' cy='18' r='4' opacity='0.14'/%3E%3Ccircle cx='122' cy='42' r='5.5' opacity='0.15'/%3E%3Ccircle cx='44' cy='78' r='4.5' opacity='0.17'/%3E%3Ccircle cx='104' cy='66' r='5' opacity='0.14'/%3E%3Ccircle cx='24' cy='112' r='5' opacity='0.16'/%3E%3Ccircle cx='86' cy='98' r='4' opacity='0.15'/%3E%3Ccircle cx='126' cy='120' r='5.5' opacity='0.15'/%3E%3Ccircle cx='58' cy='128' r='4.5' opacity='0.16'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="violet"] {
      --bg-glow:
        radial-gradient(120% 60% at 50% 0%, rgba(167, 139, 250, 0.16), transparent 60%),
        radial-gradient(70% 45% at 18% 90%, rgba(212, 120, 240, 0.10), transparent 60%),
        radial-gradient(70% 45% at 88% 75%, rgba(120, 150, 255, 0.10), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23c4b0fc'%3E%3Ccircle cx='16' cy='20' r='1.2' opacity='0.7'/%3E%3Ccircle cx='64' cy='10' r='0.9' opacity='0.5'/%3E%3Ccircle cx='112' cy='28' r='1.4' opacity='0.6'/%3E%3Ccircle cx='146' cy='14' r='0.8' opacity='0.55'/%3E%3Ccircle cx='34' cy='60' r='1' opacity='0.5'/%3E%3Ccircle cx='92' cy='52' r='1.3' opacity='0.65'/%3E%3Ccircle cx='138' cy='74' r='1' opacity='0.5'/%3E%3Ccircle cx='20' cy='104' r='1.2' opacity='0.6'/%3E%3Ccircle cx='76' cy='92' r='0.9' opacity='0.55'/%3E%3Ccircle cx='120' cy='112' r='1.3' opacity='0.6'/%3E%3Ccircle cx='40' cy='138' r='1' opacity='0.5'/%3E%3Ccircle cx='100' cy='146' r='1.2' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="ivory"] {
      --bg-glow:
        radial-gradient(120% 55% at 50% 0%, rgba(139, 105, 20, 0.10), transparent 60%),
        radial-gradient(90% 50% at 85% 100%, rgba(139, 105, 20, 0.06), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    }

    /* ---- 弹窗居中 + 遮罩 + 动画 ---- */
    .theme-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 290;
    }
    .theme-backdrop.show { display: block; animation: themeFade 0.25s ease; }
    @keyframes themeFade { from { opacity: 0; } to { opacity: 1; } }
    .theme-panel {
      position: fixed !important;
      left: 50% !important;
      top: 50% !important;
      bottom: auto !important;
      transform: translate(-50%, -50%) !important;
      width: min(300px, 84vw) !important;
      max-height: 72vh;
      overflow-y: auto;
      border-radius: 20px !important;
      padding: 18px 16px 14px !important;
      z-index: 300 !important;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
    }
    .theme-panel.open { animation: themePop 0.28s ease; }
    @keyframes themePop {
      from { opacity: 0; transform: translate(-50%, -46%) scale(0.94); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .theme-panel-title { font-size: 15px; font-weight: 600; color: var(--gold); text-align: center; letter-spacing: 1px; margin-bottom: 4px; }
    .theme-panel-sub { font-size: 11px; color: var(--text-muted); text-align: center; margin-bottom: 12px; }
    .theme-close {
      position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
      border: none; border-radius: 50%; background: transparent; color: var(--text-muted);
      font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1;
    }
    .theme-close:active { background: var(--bg-card-hover); }
    .theme-option { padding: 9px 10px !important; border-radius: 12px !important; }
    .theme-option:active, .theme-option.active { background: var(--bg-card-hover); }
    .theme-dot {
      width: 36px !important; height: 36px !important; border-radius: 10px !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 0 12px rgba(0,0,0,0.25) !important;
    }
    .theme-option.active .theme-dot { outline: 2px solid var(--gold); outline-offset: 2px; }
    .theme-name { font-size: 14px; font-weight: 500; }
    .theme-tag { margin-left: auto; font-size: 11px; color: var(--text-muted); }
    .theme-check { display: none; color: var(--gold); font-size: 14px; font-weight: 700; margin-left: 2px; }
    .theme-option.active .theme-check { display: block; }
    .theme-option[data-theme="amber"] .theme-dot { background: linear-gradient(135deg,#2a1f0a 0%,#1a1510 55%,#c9a227 100%) !important; }
    .theme-option[data-theme="ocean"] .theme-dot { background: linear-gradient(135deg,#0a2430 0%,#0f1a24 55%,#4db8d9 100%) !important; }
    .theme-option[data-theme="emerald"] .theme-dot { background: linear-gradient(135deg,#0a2a18 0%,#101a14 55%,#3dba7a 100%) !important; }
    .theme-option[data-theme="rose"] .theme-dot { background: linear-gradient(135deg,#2a1220 0%,#1a1014 55%,#d47a9a 100%) !important; }
    .theme-option[data-theme="violet"] .theme-dot { background: linear-gradient(135deg,#1a1030 0%,#16101e 55%,#a78bfa 100%) !important; }
    .theme-option[data-theme="ivory"] .theme-dot { background: linear-gradient(135deg,#fff9ee 0%,#ebe4d8 55%,#8b6914 100%) !important; }

    /* ---- 酒杯预览 ---- */
    .card-icon { display: flex; align-items: center; justify-content: center; }
    .glass-preview { width: 26px; height: 32px; position: relative; display: inline-block; }
    .glass-preview .bowl { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 20px; border-radius: 3px 3px 14px 14px; border: 1px solid rgba(255,255,255,0.35); background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, var(--liquid, rgba(255,255,255,0.18)) 60%); overflow: hidden; }
    .glass-preview .bowl::after { content: ''; position: absolute; top: 3px; left: 1px; right: 1px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.35); }
    .glass-preview .stem { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 2px; height: 9px; border-radius: 1px; background: rgba(255,255,255,0.35); }
    .glass-preview .base { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 16px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.35); }
    .glass-preview.mini { transform: scale(0.8); }
    [data-theme="ivory"] .glass-preview .bowl { border-color: rgba(0,0,0,0.18); }
    [data-theme="ivory"] .glass-preview .bowl::after { background: rgba(0,0,0,0.10); }
    [data-theme="ivory"] .glass-preview .stem, [data-theme="ivory"] .glass-preview .base { background: rgba(0,0,0,0.22); }

    /* ---- 提示气泡 ---- */
    #appToast { position: fixed; left: 50%; bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px); transform: translateX(-50%) translateY(8px); background: rgba(20,20,20,0.92); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 20px; z-index: 400; opacity: 0; pointer-events: none; transition: all 0.25s ease; max-width: 82vw; text-align: center; }
    #appToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ---- 相似推荐 ---- */
    .related-section { margin-top: 20px; }
    .related-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
    .related-item:active { background: var(--bg-card-hover); }
    .related-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .related-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .related-empty { font-size: 12px; color: var(--text-muted); padding: 10px 0; text-align: center; }

    /* ---- 分享按钮 ---- */
    .share-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--gold); font-size: 15px; display: flex; align-items: center; justify-content: center; margin-right: 8px; cursor: pointer; flex-shrink: 0; }
    .share-btn:active { background: var(--bg-card-hover); }

    /* ---- 导入弹窗 ---- */
    .imp-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .imp-box { width: 100%; max-width: 320px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
    .imp-title { font-size: 15px; font-weight: 600; color: var(--gold); text-align: center; margin-bottom: 12px; }
    .imp-area { width: 100%; height: 120px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-size: 12px; resize: none; box-sizing: border-box; }
    .imp-btns { display: flex; gap: 10px; margin-top: 12px; }
    .imp-btns .btn { flex: 1; }
  

    body {
      background-color: var(--bg-primary);
      background-image: var(--bg-glow), var(--bg-pattern);
      background-repeat: no-repeat, repeat;
      background-size: cover, 160px 160px;
      background-position: center, top left;
    }
    [data-theme="amber"] {
      --bg-glow: radial-gradient(120% 55% at 50% 0%, rgba(201,162,39,0.13), transparent 62%), radial-gradient(90% 50% at 85% 100%, rgba(201,162,39,0.07), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23e0c04a'%3E%3Ccircle cx='18' cy='24' r='1.3' opacity='0.5'/%3E%3Ccircle cx='62' cy='12' r='1' opacity='0.4'/%3E%3Ccircle cx='108' cy='30' r='1.6' opacity='0.35'/%3E%3Ccircle cx='140' cy='18' r='1' opacity='0.45'/%3E%3Ccircle cx='34' cy='66' r='1' opacity='0.35'/%3E%3Ccircle cx='88' cy='78' r='1.4' opacity='0.4'/%3E%3Ccircle cx='132' cy='96' r='1.1' opacity='0.35'/%3E%3Ccircle cx='16' cy='118' r='1.4' opacity='0.4'/%3E%3Ccircle cx='74' cy='132' r='1' opacity='0.45'/%3E%3Ccircle cx='120' cy='140' r='1.5' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="ocean"] {
      --bg-glow: radial-gradient(120% 55% at 50% 0%, rgba(77,184,217,0.13), transparent 62%), radial-gradient(90% 50% at 15% 100%, rgba(77,184,217,0.08), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%237ecce6'%3E%3Ccircle cx='24' cy='28' r='7' stroke-width='1' opacity='0.18'/%3E%3Ccircle cx='24' cy='28' r='4' stroke-width='0.7' opacity='0.14'/%3E%3Ccircle cx='96' cy='16' r='5' stroke-width='1' opacity='0.16'/%3E%3Ccircle cx='156' cy='44' r='8' stroke-width='1' opacity='0.15'/%3E%3Ccircle cx='58' cy='72' r='4' stroke-width='0.8' opacity='0.2'/%3E%3Ccircle cx='132' cy='86' r='6' stroke-width='1' opacity='0.15'/%3E%3Ccircle cx='20' cy='122' r='5' stroke-width='0.9' opacity='0.18'/%3E%3Ccircle cx='88' cy='108' r='3.5' stroke-width='0.8' opacity='0.2'/%3E%3Ccircle cx='150' cy='136' r='7' stroke-width='1' opacity='0.16'/%3E%3Ccircle cx='52' cy='152' r='6' stroke-width='0.9' opacity='0.18'/%3E%3Ccircle cx='116' cy='162' r='4' stroke-width='0.8' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="emerald"] {
      --bg-glow: radial-gradient(120% 55% at 50% 0%, rgba(61,186,122,0.13), transparent 62%), radial-gradient(90% 50% at 85% 100%, rgba(61,186,122,0.07), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%236dd49c'%3E%3Cellipse cx='28' cy='22' rx='7' ry='3.5' opacity='0.14' transform='rotate(35 28 22)'/%3E%3Cellipse cx='98' cy='38' rx='6' ry='3' opacity='0.12' transform='rotate(-25 98 38)'/%3E%3Cellipse cx='52' cy='70' rx='8' ry='4' opacity='0.13' transform='rotate(55 52 70)'/%3E%3Cellipse cx='120' cy='88' rx='6' ry='3' opacity='0.12' transform='rotate(-40 120 88)'/%3E%3Cellipse cx='30' cy='112' rx='7' ry='3.5' opacity='0.14' transform='rotate(20 30 112)'/%3E%3Cellipse cx='92' cy='126' rx='8' ry='4' opacity='0.13' transform='rotate(-55 92 126)'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="rose"] {
      --bg-glow: radial-gradient(120% 55% at 50% 0%, rgba(212,122,154,0.14), transparent 62%), radial-gradient(90% 50% at 85% 100%, rgba(212,122,154,0.08), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23e6a0b8'%3E%3Ccircle cx='26' cy='30' r='5' opacity='0.16'/%3E%3Ccircle cx='78' cy='18' r='4' opacity='0.14'/%3E%3Ccircle cx='122' cy='42' r='5.5' opacity='0.15'/%3E%3Ccircle cx='44' cy='78' r='4.5' opacity='0.17'/%3E%3Ccircle cx='104' cy='66' r='5' opacity='0.14'/%3E%3Ccircle cx='24' cy='112' r='5' opacity='0.16'/%3E%3Ccircle cx='86' cy='98' r='4' opacity='0.15'/%3E%3Ccircle cx='126' cy='120' r='5.5' opacity='0.15'/%3E%3Ccircle cx='58' cy='128' r='4.5' opacity='0.16'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="violet"] {
      --bg-glow: radial-gradient(120% 60% at 50% 0%, rgba(167,139,250,0.16), transparent 60%), radial-gradient(70% 45% at 18% 90%, rgba(212,120,240,0.10), transparent 60%), radial-gradient(70% 45% at 88% 75%, rgba(120,150,255,0.10), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23c4b0fc'%3E%3Ccircle cx='16' cy='20' r='1.2' opacity='0.7'/%3E%3Ccircle cx='64' cy='10' r='0.9' opacity='0.5'/%3E%3Ccircle cx='112' cy='28' r='1.4' opacity='0.6'/%3E%3Ccircle cx='146' cy='14' r='0.8' opacity='0.55'/%3E%3Ccircle cx='34' cy='60' r='1' opacity='0.5'/%3E%3Ccircle cx='92' cy='52' r='1.3' opacity='0.65'/%3E%3Ccircle cx='138' cy='74' r='1' opacity='0.5'/%3E%3Ccircle cx='20' cy='104' r='1.2' opacity='0.6'/%3E%3Ccircle cx='76' cy='92' r='0.9' opacity='0.55'/%3E%3Ccircle cx='120' cy='112' r='1.3' opacity='0.6'/%3E%3Ccircle cx='40' cy='138' r='1' opacity='0.5'/%3E%3Ccircle cx='100' cy='146' r='1.2' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
    }
    [data-theme="ivory"] {
      --bg-glow: radial-gradient(120% 55% at 50% 0%, rgba(139,105,20,0.10), transparent 60%), radial-gradient(90% 50% at 85% 100%, rgba(139,105,20,0.06), transparent 60%);
      --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    }
    .theme-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 290; }
    .theme-backdrop.show { display: block; animation: themeFade 0.25s ease; }
    @keyframes themeFade { from { opacity: 0; } to { opacity: 1; } }
    .theme-panel { position: fixed !important; left: 50% !important; top: 50% !important; bottom: auto !important; transform: translate(-50%,-50%) !important; width: min(300px,84vw) !important; max-height: 72vh; overflow-y: auto; border-radius: 20px !important; padding: 18px 16px 14px !important; z-index: 300 !important; box-shadow: 0 24px 64px rgba(0,0,0,0.55) !important; }
    .theme-panel.open { animation: themePop 0.28s ease; }
    @keyframes themePop { from { opacity: 0; transform: translate(-50%,-46%) scale(0.94); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
    .theme-panel-title { font-size: 15px; font-weight: 600; color: var(--gold); text-align: center; letter-spacing: 1px; margin-bottom: 4px; }
    .theme-panel-sub { font-size: 11px; color: var(--text-muted); text-align: center; margin-bottom: 12px; }
    .theme-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
    .theme-close:active { background: var(--bg-card-hover); }
    .theme-option { padding: 9px 10px !important; border-radius: 12px !important; }
    .theme-option:active, .theme-option.active { background: var(--bg-card-hover); }
    .theme-dot { width: 36px !important; height: 36px !important; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 0 12px rgba(0,0,0,0.25) !important; }
    .theme-option.active .theme-dot { outline: 2px solid var(--gold); outline-offset: 2px; }
    .theme-name { font-size: 14px; font-weight: 500; }
    .theme-tag { margin-left: auto; font-size: 11px; color: var(--text-muted); }
    .theme-check { display: none; color: var(--gold); font-size: 14px; font-weight: 700; margin-left: 2px; }
    .theme-option.active .theme-check { display: block; }
    .theme-option[data-theme="amber"] .theme-dot { background: linear-gradient(135deg,#2a1f0a 0%,#1a1510 55%,#c9a227 100%) !important; }
    .theme-option[data-theme="ocean"] .theme-dot { background: linear-gradient(135deg,#0a2430 0%,#0f1a24 55%,#4db8d9 100%) !important; }
    .theme-option[data-theme="emerald"] .theme-dot { background: linear-gradient(135deg,#0a2a18 0%,#101a14 55%,#3dba7a 100%) !important; }
    .theme-option[data-theme="rose"] .theme-dot { background: linear-gradient(135deg,#2a1220 0%,#1a1014 55%,#d47a9a 100%) !important; }
    .theme-option[data-theme="violet"] .theme-dot { background: linear-gradient(135deg,#1a1030 0%,#16101e 55%,#a78bfa 100%) !important; }
    .theme-option[data-theme="ivory"] .theme-dot { background: linear-gradient(135deg,#fff9ee 0%,#ebe4d8 55%,#8b6914 100%) !important; }
    .card-icon { display: flex; align-items: center; justify-content: center; }
    .glass-preview { width: 26px; height: 32px; position: relative; display: inline-block; }
    .glass-preview .bowl { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 20px; border-radius: 3px 3px 14px 14px; border: 1px solid rgba(255,255,255,0.35); background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, var(--liquid, rgba(255,255,255,0.18)) 60%); overflow: hidden; }
    .glass-preview .bowl::after { content: ''; position: absolute; top: 3px; left: 1px; right: 1px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.35); }
    .glass-preview .stem { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 2px; height: 9px; border-radius: 1px; background: rgba(255,255,255,0.35); }
    .glass-preview .base { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 16px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.35); }
    [data-theme="ivory"] .glass-preview .bowl { border-color: rgba(0,0,0,0.18); }
    [data-theme="ivory"] .glass-preview .bowl::after { background: rgba(0,0,0,0.10); }
    [data-theme="ivory"] .glass-preview .stem, [data-theme="ivory"] .glass-preview .base { background: rgba(0,0,0,0.22); }
    #appToast { position: fixed; left: 50%; bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px); transform: translateX(-50%) translateY(8px); background: rgba(20,20,20,0.92); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 20px; z-index: 400; opacity: 0; pointer-events: none; transition: all 0.25s ease; max-width: 82vw; text-align: center; }
    #appToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .related-section { margin-top: 20px; }
    .related-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
    .related-item:active { background: var(--bg-card-hover); }
    .related-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .related-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .related-empty { font-size: 12px; color: var(--text-muted); padding: 10px 0; text-align: center; }
    .share-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--gold); font-size: 15px; display: flex; align-items: center; justify-content: center; margin-right: 8px; cursor: pointer; flex-shrink: 0; }
    .share-btn:active { background: var(--bg-card-hover); }
    .step-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--text-primary); cursor: pointer; }
    .step-item input { accent-color: var(--gold); margin-top: 2px; flex-shrink: 0; }
    .step-item.done span { text-decoration: line-through; color: var(--text-muted); }
    #shakeTimerBtn { margin-top: 8px; width: 100%; }
    .timer-display { font-size: 20px; font-weight: 700; color: var(--gold); text-align: center; margin: 8px 0; min-height: 24px; }
    .sort-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; }
    .sort-row .sort-label { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
    .sort-row .filter-bar { flex: 1; overflow-x: auto; }
    .partial-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--bg-card); border: 1px dashed var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
    .partial-item:active { background: var(--bg-card-hover); }
    .partial-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .partial-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .conf-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 510; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .conf-box { width: 100%; max-width: 300px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); text-align: center; }
    .conf-title { font-size: 15px; font-weight: 600; color: var(--gold); margin-bottom: 8px; }
    .conf-msg { font-size: 13px; color: var(--text-primary); margin-bottom: 14px; line-height: 1.6; }
    .update-banner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 420; background: var(--gold); color: #141414; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); display: none; cursor: pointer; max-width: 88vw; text-align: center; }
    .install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-height) + var(--safe-bottom) + 10px); z-index: 410; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: none; align-items: center; gap: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
    .install-banner span { flex: 1; font-size: 13px; color: var(--text-primary); }
    .install-banner button { flex-shrink: 0; }
  

/* === Performance & polish === */
.cocktail-list, .filter-bar, .related-list {
  content-visibility: auto;
  contain: layout style;
}
.cocktail-card {
  transition: transform 0.15s ease, background 0.15s ease;
}
.cocktail-card:active {
  transform: scale(0.98);
}
.page {
  contain: layout;
}
img, svg {
  max-width: 100%;
}
/* Toast */
#appToast {
  position: fixed;
  bottom: calc(var(--nav-height) + 24px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  white-space: nowrap;
  max-width: 90vw;
}
#appToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ Uber Visual & Motion Override ============ */
:root{--bg:#FFFFFF;--surface:#F6F6F6;--surface-hover:#FAFAFA;--text:#000000;--text-secondary:#6E6E6E;--text-muted:#9A9A9A;--border:#E8E8E8;--accent:#06C167;--accent-blue:#276EF1;--accent-strong:#05A857;--bg-primary:#FFFFFF;--bg-secondary:#F6F6F6;--bg-card:#FFFFFF;--bg-card-hover:#F9F9F9;--gold:#06C167;--gold-light:#35D987;--gold-dim:#05A857;--text-primary:#000000;--text-muted:#9A9A9A;--border:#E8E8E8;--danger:#D93025;--radius:16px;--radius-sm:12px;--radius-xs:8px;--nav-height:68px;--safe-bottom:env(safe-area-inset-bottom,0px);--shadow-sm:0 2px 4px rgba(0,0,0,0.04);--shadow-md:0 8px 24px rgba(0,0,0,0.06);--shadow-lg:0 12px 28px rgba(0,0,0,0.10);--ease:cubic-bezier(0.2,0,0,1);--bg-glow:none;--bg-pattern:none;}html,body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;overflow-x:hidden;}body{min-height:100vh;padding-bottom:calc(var(--nav-height) + var(--safe-bottom));}img,svg{max-width:100%;}:focus-visible{outline:2px solid #000;outline-offset:2px;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}.header-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-0.02em;}.search-box{position:relative;flex:1;min-width:220px;max-width:520px;margin-left:auto;margin-top:0;}.search-box input{width:100%;padding:12px 16px 12px 44px;background:var(--surface);border:1px solid transparent;border-radius:24px;color:var(--text);font-size:15px;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);}.search-box input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 4px rgba(39,110,241,0.12);background:#fff;}.search-box input::placeholder{color:var(--text-muted);}.search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:flex;}.page{display:none;max-width:1200px;margin:0 auto;padding:24px 20px 64px;}.page.active{display:block;animation:pageIn .4s var(--ease);}@keyframes pageIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}.page.active .section-title,.page.active .hero-card,.page.active .filter-bar,.page.active .filter-status,.page.active .empty-state,.page.active .mine-settings,.page.active .ing-cat,.page.active .related-section,.page.active .detail-header,.page.active .detail-section,.page.active .mine-row,.page.active .related-item{animation:itemIn .4s var(--ease) backwards;}@keyframes itemIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}.page.active .cocktail-card{animation:itemIn .4s var(--ease) backwards;animation-delay:calc(var(--i,0)*40ms);}.page.active .filter-chip{animation:itemIn .3s var(--ease) backwards;animation-delay:calc(var(--i,0)*30ms);}.section-title{font-size:22px;font-weight:700;color:var(--text);margin:40px 0 16px;display:flex;align-items:center;gap:8px;}.hero-card{background:#fff;border:1px solid #EBEBEB;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-md);}.hero-card::before{display:none;}.hero-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;}.hero-name{font-size:28px;font-weight:700;color:var(--text);line-height:1.2;}.hero-english{font-size:16px;color:var(--text-secondary);}.hero-meta{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0;}.tag{font-size:12px;padding:4px 10px;border-radius:8px;background:var(--surface) !important;color:var(--text-secondary) !important;border:1px solid var(--border) !important;font-weight:500;}.tag.clickable{cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);}.tag.clickable:hover{border-color:var(--accent-blue) !important;color:var(--accent-blue) !important;background:#F0F5FF !important;}#detailMeta .tag,.cocktail-card .tag{color:var(--text-secondary) !important;border-color:var(--border) !important;background:var(--surface) !important;}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:24px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);}.btn:active{transform:scale(.97);}.btn-primary{background:#000;color:#fff;min-height:56px;box-shadow:0 4px 12px rgba(0,0,0,0.1);}.btn-primary:hover{background:#2B2B2B;}.btn-primary:active{background:#000;box-shadow:none;}.btn-outline{background:transparent;color:var(--text);border:1px solid #D0D0D0;}.btn-outline:hover{background:var(--surface);border-color:#000;}.btn-row{display:flex;gap:12px;margin-top:16px;}.cocktail-list{display:flex;flex-direction:column;gap:12px;}.cocktail-card{background:#fff;border:1px solid #EBEBEB;border-radius:var(--radius);padding:16px;display:flex;gap:14px;cursor:pointer;position:relative;box-shadow:0 1px 2px rgba(0,0,0,0.04);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);}.cocktail-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:#fff;}.cocktail-card:active{transform:scale(.98);box-shadow:var(--shadow-sm);}.card-icon{width:52px;height:52px;border-radius:12px;background:var(--surface) !important;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-secondary);overflow:hidden;}.card-body{flex:1;min-width:0;}.card-name{font-size:16px;font-weight:600;color:var(--text);line-height:1.4;}.card-english{font-size:13px;color:var(--text-secondary);margin-bottom:8px;}.card-meta{display:flex;flex-wrap:wrap;gap:6px;}.fav-btn{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--text-muted);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .2s,background .2s;}.fav-btn:hover{background:var(--surface);}.fav-btn.active{color:var(--danger);}.fav-btn:active{transform:scale(.9);}.filter-label{font-size:13px;color:var(--text-secondary);margin:20px 0 8px;font-weight:600;}.filter-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:4px;scrollbar-width:none;}.filter-bar::-webkit-scrollbar{display:none;}.filter-chip{flex-shrink:0;padding:8px 16px;border-radius:12px;font-size:14px;background:#fff;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:all .2s var(--ease);}.filter-chip:hover{border-color:#000;color:#000;}.filter-chip.active{background:#000;border-color:#000;color:#fff;}.filter-status{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px;min-height:32px;}.count-text{font-size:13px;color:var(--text-secondary);}.clear-filter-btn{background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-size:13px;padding:6px 14px;border-radius:12px;cursor:pointer;transition:all .2s var(--ease);}.clear-filter-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue);}.base-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}.base-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 8px;text-align:center;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:border-color .2s,color .2s,transform .2s;}.base-item:hover{border-color:#000;color:#000;}.base-item:active{transform:scale(.96);}.mine-settings{background:#fff;border:1px solid #EBEBEB;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}.mine-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:15px;border-bottom:1px solid var(--border);}.mine-row:last-child{border-bottom:none;}.mine-link{color:var(--accent-blue);font-size:15px;font-weight:500;cursor:pointer;transition:opacity .2s;}.mine-link:hover{opacity:.75;}.toggle{position:relative;width:48px;height:28px;display:inline-block;}.toggle input{opacity:0;width:0;height:0;}.toggle-slider{position:absolute;inset:0;background:var(--surface);border:1px solid var(--border);border-radius:28px;transition:background .2s,border-color .2s;}.toggle-slider::before{content:"";position:absolute;width:22px;height:22px;left:2px;top:2px;background:#fff;border:1px solid #D0D0D0;border-radius:50%;transition:transform .2s var(--ease),background .2s;}.toggle input:checked + .toggle-slider{background:var(--accent);border-color:var(--accent);}.toggle input:checked + .toggle-slider::before{transform:translateX(20px);background:#fff;border-color:var(--accent);}.detail-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;background:transparent !important;}.back-btn{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,color .2s;}.back-btn:hover{box-shadow:var(--shadow-md);}.back-btn:active{transform:scale(.92);}.detail-title-wrap{flex:1;}.detail-name{font-size:28px;font-weight:700;color:var(--text);line-height:1.2;}.detail-english{font-size:16px;color:var(--text-secondary);}.detail-section{margin-bottom:28px;}.detail-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:8px;}.detail-content{font-size:16px;line-height:1.6;color:var(--text);}.ingredient-list{list-style:none;}.ingredient-list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;}.ingredient-list li:last-child{border-bottom:none;}.ingredient-amount{color:var(--text-secondary);font-weight:500;font-variant-numeric:tabular-nums;}.detail-actions{display:flex;gap:12px;margin-top:24px;}.detail-actions .btn{flex:1;}.abv-result{font-size:32px;font-weight:700;color:var(--text);margin:8px 0;font-variant-numeric:tabular-nums;}.abv-hint{font-size:13px;color:var(--text-muted);margin-bottom:12px;}.abv-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--border);font-size:15px;}.abv-row:last-child{border-bottom:none;}.abv-row-name{flex:1;}.abv-controls{display:flex;align-items:center;gap:6px;}.abv-controls button{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:18px;cursor:pointer;transition:transform .2s,background .2s;}.abv-controls button:hover{background:var(--surface);}.abv-controls button:active{transform:scale(.92);}.abv-controls input{width:60px;text-align:center;padding:8px 4px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;font-variant-numeric:tabular-nums;}.ing-cat{margin-bottom:8px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;transition:border-color .2s;}.ing-cat.open{border-color:#D0D0D0;}.ing-cat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;font-size:15px;font-weight:500;color:var(--text);user-select:none;}.ing-cat-header:hover{background:var(--surface);}.ing-cat-header .cat-left{display:flex;align-items:center;gap:8px;}.ing-cat-header .cat-left > span:first-child{filter:grayscale(1);opacity:.7;}.ing-cat-header .cat-count{font-size:12px;color:var(--text-muted);}.ing-cat-header .cat-arrow{color:var(--text-muted);font-size:12px;transition:transform .2s;}.ing-cat.open .cat-arrow{transform:rotate(90deg);}.ing-cat-body{display:none;padding:0 16px 16px;flex-wrap:wrap;gap:8px;}.ing-cat.open .ing-cat-body{display:flex;}.selected-ing-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}.theme-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:290;}.theme-backdrop.show{display:block;animation:fadeIn .2s;}.theme-panel{position:fixed !important;left:50% !important;top:50% !important;bottom:auto !important;transform:translate(-50%,-50%) !important;width:min(300px,84vw) !important;max-height:70vh;overflow-y:auto;border-radius:16px !important;padding:20px !important;z-index:300 !important;background:#fff !important;border:1px solid var(--border) !important;box-shadow:var(--shadow-lg) !important;}.theme-panel.open{display:block !important;animation:panelIn .3s var(--ease);}@keyframes panelIn{from{opacity:0;transform:translate(-50%,-48%) scale(.96);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}.theme-panel-title{font-size:16px;font-weight:700;color:var(--text) !important;margin-bottom:4px;}.theme-panel-sub{font-size:13px;color:var(--text-muted) !important;margin-bottom:16px;}.theme-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--surface);border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;}.theme-close:hover{background:#E8E8E8;}.theme-option{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;cursor:pointer;font-size:14px;color:var(--text);transition:background .2s;}.theme-option:hover{background:var(--surface);}.theme-option.active{background:var(--surface);}.theme-option[data-theme] .theme-dot{background:#F0F0F0 !important;border:1px solid #D0D0D0 !important;box-shadow:none !important;width:32px;height:32px;border-radius:50%;}.theme-option.active .theme-dot{outline:2px solid #000;outline-offset:2px;}.theme-tag{margin-left:auto;font-size:12px;color:var(--text-muted);}.theme-check{display:none;color:var(--accent);font-weight:700;}.theme-option.active .theme-check{display:block;}.theme-name{font-size:14px;font-weight:500;}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:rgba(255,255,255,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;z-index:200;box-shadow:0 -4px 16px rgba(0,0,0,0.04);}.bottom-nav::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:#E0E0E0;}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-muted);font-size:11px;cursor:pointer;background:none;border:none;position:relative;transition:color .2s;padding-top:8px;}.nav-item:hover{color:var(--text);}.nav-item.active{color:#000;font-weight:600;}.nav-item .icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;}.nav-badge{position:absolute;top:6px;right:calc(50% - 24px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#000;color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;}.random-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center;flex-direction:column;gap:20px;}.random-overlay.show{display:flex;animation:fadeIn .2s;}.random-glass{font-size:64px;filter:grayscale(1);opacity:.85;animation:glassWobble .7s ease-in-out infinite;}.random-overlay-text{font-size:15px;color:var(--text-secondary);letter-spacing:.5px;}@keyframes glassWobble{0%{transform:rotate(-8deg) translateY(0);}25%{transform:rotate(6deg) translateY(-6px);}50%{transform:rotate(-5deg) translateY(0);}75%{transform:rotate(8deg) translateY(-4px);}100%{transform:rotate(-8deg) translateY(0);}}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);}.empty-state .icon{font-size:48px;margin-bottom:16px;filter:grayscale(1);opacity:.6;}.empty-state p{font-size:15px;line-height:1.6;}#appToast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-20px);background:rgba(0,0,0,0.9);color:#fff;font-size:14px;padding:10px 18px;border-radius:24px;z-index:500;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);box-shadow:var(--shadow-md);white-space:nowrap;max-width:90vw;}#appToast.show{opacity:1;transform:translateX(-50%) translateY(0);}.conf-mask{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:510;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s;}.conf-box{width:100%;max-width:340px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow-lg);animation:panelPop .25s var(--ease);}@keyframes panelPop{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}.conf-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px;}.conf-msg{font-size:14px;color:var(--text-secondary);margin-bottom:20px;line-height:1.6;}.imp-btns{display:flex;gap:12px;}.imp-btns .btn{flex:1;}.related-section{margin-top:32px;}.related-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:transform .2s,box-shadow .2s;}.related-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}.related-name{font-size:15px;font-weight:600;color:var(--text);}.related-sub{font-size:13px;color:var(--text-muted);}.related-empty{font-size:13px;color:var(--text-muted);padding:10px 0;text-align:center;}.share-btn{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:18px;filter:grayscale(1);transition:transform .2s,box-shadow .2s;}.share-btn:hover{box-shadow:var(--shadow-md);}.share-btn:active{transform:scale(.92);}.step-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:15px;cursor:pointer;}.step-item input{accent-color:#000;margin-top:4px;transform:scale(1.1);}.step-item.done span{text-decoration:line-through;color:var(--text-muted);}#shakeTimerBtn{margin-top:8px;width:100%;}.timer-display{font-size:20px;font-weight:700;color:var(--text);text-align:center;margin:8px 0;min-height:24px;}.sort-row{display:flex;align-items:center;gap:8px;margin:16px 0 4px;}.sort-row .sort-label{font-size:13px;color:var(--text-secondary);}.sort-row .filter-bar{flex:1;}.partial-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px dashed #D0D0D0;border-radius:12px;margin-bottom:8px;cursor:pointer;transition:background .2s;}.partial-item:hover{background:var(--surface);}.partial-name{font-size:15px;font-weight:600;color:var(--text);}.partial-sub{font-size:12px;color:var(--text-muted);}.update-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:420;background:#000;color:#fff;font-size:14px;font-weight:500;padding:10px 18px;border-radius:24px;box-shadow:var(--shadow-md);display:none;cursor:pointer;max-width:88vw;text-align:center;}.install-banner{position:fixed;left:16px;right:16px;bottom:calc(var(--nav-height) + var(--safe-bottom) + 12px);z-index:410;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;display:none;align-items:center;gap:12px;box-shadow:var(--shadow-lg);}.install-banner span{flex:1;font-size:14px;color:var(--text);}.install-banner button{flex-shrink:0;}.glass-preview{width:26px;height:34px;position:relative;display:inline-block;}.glass-preview .bowl{position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:20px;border-radius:3px 3px 14px 14px;border:1.5px solid #C0C0C0;background:rgba(0,0,0,0.03) !important;}.glass-preview .bowl::after{content:"";position:absolute;top:3px;left:2px;right:2px;height:3px;border-radius:2px;background:rgba(0,0,0,0.08);}.glass-preview .stem{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:2px;height:10px;border-radius:1px;background:#C0C0C0;}.glass-preview .base{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:16px;height:2px;border-radius:2px;background:#C0C0C0;}.glass-preview.mini{transform:scale(.8);}.skeleton{background:#F0F0F0;border-radius:8px;position:relative;overflow:hidden;}.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent);animation:shimmer 1.2s infinite;}@keyframes shimmer{100%{transform:translateX(100%);}}.theme-btn{width:44px;height:44px;border-radius:50%;background:#000;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:transform .2s;}.theme-btn:active{transform:scale(.92);}.random-btn-wrap{margin:24px 0;}#randomBtn{width:100%;min-height:56px;background:#000 !important;color:#fff !important;border-radius:24px;font-size:16px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,0.1);}#randomBtn:hover{background:#2B2B2B !important;}#randomBtn:active{transform:scale(.97);background:#000 !important;}@media (max-width:768px){.header{flex-direction:column;align-items:stretch;padding:12px 16px;gap:12px;}.header-title{font-size:18px;}.search-box{max-width:none;margin-left:0;}.page{padding:16px 16px 48px;}.cocktail-card{padding:14px;}.detail-name{font-size:24px;}.bottom-nav{height:calc(60px + var(--safe-bottom));}.bottom-nav::before{top:4px;}.section-title{font-size:20px;margin:32px 0 12px;}.base-grid{grid-template-columns:repeat(3,1fr);}.btn-primary{min-height:52px;}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}.page.active,.page.active > *{animation:none !important;}}