:root { --gold:#d4bc8f; --gold-bright:#ece5d8; --cream:#f4e9d4; --ink:#3b2f24; --brown:#6b4d28; --blue:#6cb6ff; --purple:#c77dff; --five:#ffd780; --shadow:0 12px 40px rgba(0,0,0,.25); --ui:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; user-select:none; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; font-family:var(--ui); color:var(--ink); background-color:#d7eef8; background-image:url("../assets/background.png"); background-position:center center; background-size:cover; background-repeat:no-repeat; }
button, input, select { font-family:inherit; }
.app { position:relative; width:100vw; height:100vh; overflow:hidden; background:transparent; }
.view { position:absolute; inset:0; display:none; }
.view.active { display:flex; flex-direction:column; }
.view[data-view="wish"] { background:transparent; }
.panel-view { background-image:url("../assets/history-background.png"); background-repeat:no-repeat; background-position:center center; background-size:contain; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:10px 28px 0; z-index:5; }
.nav { display:flex; align-items:center; gap:8px; }
.nav-btn { min-width:128px; height:52px; border:none; background:url("../assets/button.png") center/100% 100% no-repeat; color:#575757; font-size:18px; font-weight:700; cursor:pointer; letter-spacing:.08em; }
.nav-btn.active { color:#3a2d16; filter:brightness(1.08); }
.pity-box { display:flex; gap:10px; }
.pity-chip { min-width:118px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid rgba(107,77,40,.25); font-size:13px; color:var(--brown); display:flex; flex-direction:column; line-height:1.25; }
.pity-chip b { color:#3b2f24; font-size:16px; }
.stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 1vw; }
.banner-art { position:relative; width:min(96vw, 1800px, calc((100vh - 220px) * 2)); height:auto; max-height:100%; aspect-ratio:1536 / 768; container-type:size; }
.banner-art img { width:100%; height:100%; object-fit:fill; display:block; pointer-events:none; }
.banner-copy { position:absolute; left:8.5%; top:28%; width:36%; z-index:2; text-align:left; }
.banner-title { font-size:64px; font-size:11.2cqh; line-height:1; font-weight:800; color:#4a3b27; letter-spacing:.12em; white-space:nowrap; text-shadow:0 1px 0 rgba(255,255,255,.7); }
.banner-note { margin-top:1.4cqh; font-size:16px; font-size:2.8cqh; color:#7a6a54; line-height:1.45; letter-spacing:.12em; }
.dock { height:auto; min-height:128px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 28px 22px; gap:16px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.18)); }
.toggles { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.toggle { display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid rgba(107,77,40,.2); color:var(--brown); font-size:13px; cursor:pointer; }
.toggle input { accent-color:#c9a36a; }
.wish-actions { display:flex; align-items:flex-end; gap:16px; }
.stepper { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.78); border:1px solid rgba(107,77,40,.2); border-radius:999px; padding:6px 10px; }
.stepper button { width:32px; height:32px; border:none; border-radius:50%; background:#5a4630; color:var(--cream); font-size:18px; cursor:pointer; }
.stepper input { width:48px; height:32px; border:none; background:transparent; color:#3b2f24; text-align:center; font-size:18px; font-weight:700; outline:none; }
.wish-btn { width:230px; height:64px; border:2px solid #c9a36a; border-radius:8px; background:linear-gradient(180deg,#f7efe0 0%,#e7d3ae 48%,#d8be8d 100%); color:#6b4d28; font-size:20px; font-weight:800; letter-spacing:.12em; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15; }
.wish-btn small { font-size:12px; font-weight:600; color:#8a6a3c; letter-spacing:.04em; }
.wish-btn:hover { filter:brightness(1.05); }
.wish-btn:active { transform:translateY(1px); }
.wish-btn.primary { background:linear-gradient(180deg,#fff6e4 0%,#f0d9a6 50%,#e0c07a 100%); }
.overlay { position:fixed; inset:0; z-index:40; display:none; background:#000; }
.overlay.show { display:block; }
#wishVideo { width:100%; height:100%; object-fit:contain; background:#000; }
.skip-btn { position:absolute; top:18px; right:22px; z-index:50; min-width:92px; height:40px; border:1px solid rgba(236,229,216,.55); background:rgba(0,0,0,.28); color:#ece5d8; font-size:16px; letter-spacing:.2em; cursor:pointer; opacity:.55; transition:opacity .35s; }
.skip-btn:hover,.close-x:hover { opacity:1; }
#resultsOverlay { background-color:rgba(8,12,20,.35); background-image:url("../assets/background.png"); background-position:center; background-size:cover; background-repeat:no-repeat; }
#resultsOverlay::before { content:""; position:absolute; inset:0; background:rgba(8,12,20,.42); }
.results-wrap { position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:70px 40px 40px; }
.cards { display:flex; align-items:flex-end; justify-content:center; gap:14px; width:100%; max-width:1280px; flex-wrap:wrap; }
.card { position:relative; width:108px; height:420px; border-radius:6px; overflow:hidden; transform:translateY(40px) scale(.92); opacity:0; animation:cardIn .7s ease forwards; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.card.single { width:min(420px,70vw); height:min(620px,78vh); }
.card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72) 100%); z-index:1; }
.card .beam { position:absolute; inset:-20% -40%; opacity:.85; filter:blur(8px); }
.card.three .beam { background:radial-gradient(circle,rgba(108,182,255,.85),transparent 62%); }
.card.four .beam { background:radial-gradient(circle,rgba(199,125,255,.9),transparent 62%); }
.card.five .beam { background:radial-gradient(circle,rgba(255,215,128,.95),transparent 62%); }
.card.three { background:linear-gradient(180deg,#355a86,#1b2a44); }
.card.four { background:linear-gradient(180deg,#5b3b86,#2a1848); }
.card.five { background:linear-gradient(180deg,#8a6a2c,#3b2a12); }
.card .face { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:18px 10px 22px; }
.avatar { position:absolute; top:18%; width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:800; color:#fff; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.28); }
.card.single .avatar { width:160px; height:160px; font-size:64px; top:16%; }
.name { writing-mode:vertical-rl; letter-spacing:.18em; font-size:28px; font-weight:800; color:#fff; text-shadow:0 3px 10px rgba(0,0,0,.55); min-height:180px; }
.card.single .name { writing-mode:horizontal-tb; min-height:auto; font-size:42px; margin-top:210px; }
.stars { margin-top:10px; color:#ffd700; letter-spacing:2px; font-size:14px; text-shadow:0 0 8px rgba(255,215,0,.65); }
.shine { position:absolute; inset:0; z-index:3; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); animation:shine 1.1s ease .35s forwards; pointer-events:none; }
@keyframes cardIn { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes shine { to { transform:translateX(120%); } }
.panel { width:min(1120px, 88vw); height:min(78vh, 760px); margin:auto; background:rgba(255,255,255,.9); color:#333; border-radius:10px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.panel h2 { text-align:center; padding:16px 0 8px; color:#3b4255; letter-spacing:.12em; }
.panel-tools { display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 16px 10px; }
.panel-tools input[type=text], .panel-tools input[type=number] { border:1px solid #d8d8d8; border-radius:999px; padding:6px 14px; outline:none; }
.mini { border:none; border-radius:6px; padding:7px 12px; color:#fff; cursor:pointer; font-size:13px; }
.mini.save { background:#4caf50; } .mini.add { background:#2196f3; } .mini.warn { background:#ff9800; } .mini.purple { background:#9c27b0; } .mini.gray { background:#607d8b; } .mini.danger { background:#f44336; }
.table-wrap { flex:1; overflow:auto; margin:0 18px 16px; border:1px solid #e4e4e4; border-radius:8px; background:rgba(255,255,255,.7); }
table { width:100%; border-collapse:collapse; font-size:14px; color:#333; }
th,td { padding:10px 8px; text-align:center; border-bottom:1px solid #eee; }
th { position:sticky; top:0; background:#f3f3f3; z-index:1; }
.pager { display:flex; justify-content:center; align-items:center; gap:10px; padding-bottom:14px; }
.pager button { width:42px; height:36px; border:none; background:#5a4630; color:#fff; border-radius:6px; cursor:pointer; }
.pager input { width:54px; text-align:center; height:36px; }
.hint { text-align:center; color:#666; font-size:13px; padding-bottom:8px; }
.quality-select { border:none; border-radius:4px; color:#fff; padding:4px 6px; }
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:80; display:none; align-items:center; justify-content:center; }
.modal-mask.show { display:flex; }
.modal { width:min(420px,90vw); background:#f7efe0; color:#4a3b27; border:2px solid #c9a36a; border-radius:10px; padding:22px 22px 16px; box-shadow:var(--shadow); }
.modal h3 { margin-bottom:12px; letter-spacing:.08em; }
.modal p { font-size:14px; line-height:1.6; margin-bottom:12px; }
.modal input { width:100%; height:38px; border:1px solid #d4bc8f; border-radius:6px; padding:0 10px; margin-bottom:12px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; }


.custom-wish { display:flex; flex-direction:column; align-items:center; gap:8px; }
.close-x { position:absolute; right:22px; bottom:22px; top:auto; z-index:50; min-width:92px; height:40px; border:1px solid rgba(236,229,216,.55); background:rgba(0,0,0,.28); color:#ece5d8; font-size:16px; letter-spacing:.2em; cursor:pointer; opacity:.7; transition:opacity .35s; }
.skip-btn:hover, .close-x:hover { opacity:1; }
.pity-need { display:flex; align-items:center; gap:8px; color:#555; font-size:13px; background:#fff; border:1px solid #ddd; border-radius:999px; padding:4px 12px; white-space:nowrap; }
.pity-need input { width:84px; height:30px; border:1px solid #eee; border-radius:6px; text-align:center; outline:none; font-size:14px; }
.panel-view { display:none; }
.panel-view.active { display:flex; }
.panel-view .topbar { flex-shrink:0; }
.panel-view .panel { flex:0 1 auto; }

.tools-row { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; width:100%; }
.weight-input, .rate-input { width:76px; height:30px; padding:2px 6px; border:1px solid #d0d0d0; border-radius:4px; text-align:center; font-size:14px; }
.quality-select { min-width:118px; height:32px; font-size:13px; color:#fff; font-weight:700; border:none; border-radius:6px; padding:0 8px; appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position:calc(100% - 14px) 12px, calc(100% - 8px) 12px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
table { table-layout:fixed; }
th:nth-child(1), td:nth-child(1) { width:18%; }
th:nth-child(2), td:nth-child(2) { width:12%; }
th:nth-child(3), td:nth-child(3) { width:18%; }
th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) { width:14%; }
th:nth-child(6), td:nth-child(6) { width:14%; }
.panel-view .panel { flex:1; margin:10px auto 24px; }
.banner-kicker{display:inline-block;padding:2px 8px;margin-bottom:0.8cqh;background:linear-gradient(90deg,#c45c4a,#e08a55);color:#fff;font-size:1.5cqh;letter-spacing:.18em;border-radius:2px}.banner-line{width:38%;height:3px;margin:0.8cqh 0 0.7cqh;background:linear-gradient(90deg,#c9a36a,rgba(201,163,106,0));border-radius:2px}.panel-tools input[type=text]{min-width:220px;height:34px;font-size:14px}.hint{padding:0;line-height:34px;min-width:110px}.weight-input,.rate-input{width:84px;height:32px;font-size:15px}.filter-select { height:34px; min-width:120px; border:1px solid #d8d8d8; border-radius:999px; padding:0 12px; background:#fff; color:#555; }
.slot-row { display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:6px; width:100%; padding:4px 0 2px; }
.slot { border:1px solid #d8c7a4; background:#fffaf0; border-radius:8px; padding:6px 4px 5px; text-align:center; min-width:0; }
.slot b { display:block; font-size:12px; color:#6b4d28; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slot .slot-btns { display:flex; justify-content:center; gap:3px; flex-wrap:wrap; }
.slot .mini { padding:3px 6px; font-size:11px; }
.slot.empty { background:#f7f7f7; border-style:dashed; }
.col-check, .row-check { width:36px; }
table th:nth-child(1), table td:nth-child(1) { width:36px; }
table th:nth-child(2), table td:nth-child(2) { width:16%; }
.import-modal { width:min(520px, 92vw); }
.import-modal textarea { width:100%; min-height:180px; border:1px solid #d4bc8f; border-radius:8px; padding:10px; font-size:14px; line-height:1.6; resize:vertical; margin-bottom:12px; font-family:inherit; }
.modal textarea { display:block; }

.slot-meta { display:block; font-size:11px; color:#8a6a3c; margin-bottom:4px; }
.slot button[disabled] { opacity:.35; cursor:not-allowed; }
.panel { width:min(1180px, 92vw); }
.tools-row .mini { white-space:nowrap; }




button, .toggle, .nav-btn, .wish-btn, .mini { touch-action: manipulation; }

@media (max-width: 900px) {
  html, body {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .view {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 100dvh;
    display: none;
    flex-direction: column;
  }
  .view.active { display: flex; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    min-height: 52px;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(215, 238, 248, .92);
    backdrop-filter: blur(8px);
  }
  .nav { display: flex; width: 100%; gap: 6px; }
  .nav-btn { flex: 1 1 0; min-width: 0; height: 44px; font-size: 14px; letter-spacing: 0; }
  .pity-box { width: 100%; justify-content: center; }
  .pity-chip { min-width: auto; padding: 6px 12px; font-size: 12px; }
  .stage {
    flex: 0 0 auto;
    padding: 8px 10px 0;
    min-height: 0;
  }
  .banner-art {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1536 / 768;
  }
  .banner-copy { left: 8%; top: 24%; width: 52%; }
  .banner-title { font-size: clamp(20px, 7vw, 36px); letter-spacing: .08em; }
  .banner-note { font-size: 12px; }
  .dock {
    position: relative;
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
    gap: 10px;
    background: rgba(255,255,255,.35);
  }
  .toggles { width: 100%; justify-content: space-between; gap: 8px; }
  .toggle {
    flex: 1 1 calc(50% - 8px);
    justify-content: flex-start;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 14px;
  }
  .wish-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
  }
  .custom-wish { width: 100%; }
  .wish-btn, .custom-wish .wish-btn {
    width: 100%;
    height: 56px;
    font-size: 16px;
  }
  .stepper { justify-content: center; width: 100%; }
  .panel-view { background-size: cover; background-position: center top; }
  .panel {
    width: calc(100% - 12px);
    height: auto;
    flex: 1;
    min-height: 0;
    margin: 8px auto calc(12px + env(safe-area-inset-bottom));
    border-radius: 10px;
    overflow: visible;
  }
  .panel h2 { padding: 14px 0 8px; font-size: 18px; }
  .panel-tools { padding: 0 8px 10px; }
  .panel-tools input[type=text] { min-width: 0; width: 100%; max-width: 100%; }
  .copy-edit, .copy-edit.wide, .copy-edit input, .copy-edit.wide input { min-width: 0; width: 100%; }
  .copy-row, .tools-row { align-items: stretch; }
  .table-wrap {
    margin: 0 8px 12px;
    min-height: 240px;
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 680px; font-size: 13px; }
  .slot-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .slot { padding: 8px 6px; }
  .slot .mini { min-height: 32px; }
  .mini { min-height: 40px; padding: 8px 10px; }
  .card { width: 64px; height: 220px; }
  .card.single { width: min(86vw, 360px); height: min(68vh, 520px); }
  .name { font-size: 15px; min-height: auto; writing-mode: horizontal-tb; letter-spacing: .04em; }
  .avatar { width: 44px; height: 44px; font-size: 18px; top: 10%; }
  .results-wrap { padding: 48px 12px 72px; overflow: auto; }
  .close-x { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .skip-btn { top: calc(12px + env(safe-area-inset-top)); }
  .modal { width: min(420px, calc(100vw - 24px)); }
  .pity-need input, .filter-select, .panel-tools input[type=text], .weight-input, .rate-input, .stepper input, .pager input, .modal input, .import-modal textarea, .copy-edit input { font-size: 16px; }
}

@media (max-width: 640px) {
  .banner-copy { left: 7%; top: 22%; width: 58%; }
  .banner-kicker { font-size: 10px; padding: 2px 7px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .topbar { position: relative; }
  .pity-box { display: none; }
  .dock { flex-direction: row; flex-wrap: wrap; }
  .toggles { width: 100%; }
  .wish-actions { width: 100%; }
}

.copy-row { justify-content:flex-start; }
.copy-edit { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #ddd; border-radius:999px; padding:4px 12px; color:#555; font-size:13px; white-space:nowrap; }
.copy-edit input { min-width:140px; height:30px; border:none; outline:none; font-size:14px; }
.copy-edit.wide input { min-width:260px; }

.panel-head { position:relative; display:flex; align-items:center; justify-content:center; padding:16px 18px 8px; }
.panel-head h2 { padding:0; margin:0; }
.clear-history-btn { position:absolute; right:18px; top:16px; height:32px; padding:0 14px; border:1px solid #d7b07a; background:#fff8ee; color:#8a5a2b; border-radius:999px; font-size:13px; cursor:pointer; }
.clear-history-btn:hover { background:#f4e3c8; }
.clear-history-btn:active { transform:translateY(1px); }

.sync-chip.online b { color:#2e7d32; }
.sync-chip.offline b { color:#c62828; }