/* ═══════════════════════════════════════════
   猫探社 · 新版 UI 视觉规范（对齐设计稿）
   ═══════════════════════════════════════════ */
:root {
  --cream: #fff7f3;
  --paper: #fffdfb;
  --ink: #2f3b5a;
  --ink-dark: #252f4a;
  --coral: #ff6e98;
  --coral-dark: #e85580;
  --teal: #6ed7cf;
  --teal-dark: #4db8af;
  --gold: #ffc44f;
  --green: #6ed7a7;
  --lavender: #b8a8e8;
  --shadow: 0 6px 0 rgba(100,130,170,.12), 0 12px 24px rgba(80,110,150,.10);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #e8f4fc; overscroll-behavior: none; }
button, input { font: inherit; }
button { color: inherit; border: 0; cursor: pointer; }
button:active { transform: translateY(2px) scale(.985); }

.app-shell {
  position: relative;
  width: min(100vw, 480px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background-color: #f0f7fc;
  background-image:
    radial-gradient(circle at 85% 8%, rgba(255,255,255,.9) 0 15%, transparent 30%),
    radial-gradient(circle at 10% 80%, rgba(140,210,230,.2) 0 12%, transparent 28%),
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.5) 0 3px, transparent 4px);
  background-size: 100% 100%, 100% 100%, 60px 60px;
  box-shadow: 0 0 40px rgba(40,80,120,.12);
}

.screen { display: none; min-height: 100svh; position: relative; padding: max(18px, env(safe-area-inset-top)) 18px max(92px, calc(env(safe-area-inset-bottom) + 84px)); }
.screen.is-active { display: block; animation: screen-in .3s ease both; }
@keyframes screen-in { from { opacity: 0; transform: translateX(12px); } }

.round-button {
  width: 48px; height: 48px; border-radius: 17px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .85); border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(100, 70, 63, .17);
  font-weight: 900; font-size: 23px;
}

.home-screen { padding: max(14px, env(safe-area-inset-top)) 16px max(86px, calc(env(safe-area-inset-bottom) + 80px)); }
.home-topbar { display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4;min-height:48px }
.profile-chip{display:flex;align-items:center;gap:8px;padding:3px 11px 3px 3px;border-radius:19px;background:rgba(255,255,255,.78);border:1.5px solid rgba(101,70,63,.18);box-shadow:0 4px 14px rgba(83,61,52,.08);text-align:left}
.mascot-button{width:42px;height:42px;display:block;padding:1px;overflow:hidden;border-radius:15px;background:#fff5d9;border:2px solid rgba(101,70,63,.22)}
.mascot-button svg{width:100%;height:100%}.profile-copy{display:grid;gap:1px}.profile-copy small{font-size:9px;font-weight:900;letter-spacing:.7px;color:#b37a66}.profile-copy b{font-size:13px;color:var(--ink-dark)}
.home-topbar>.round-button{width:43px;height:43px;border:1.5px solid rgba(101,70,63,.2);border-radius:15px;box-shadow:0 4px 14px rgba(83,61,52,.08);font-size:20px;color:#71534b}
.currency-pill{margin-left:auto;margin-right:8px;height:37px;padding:0 12px;border-radius:18px;display:flex;align-items:center;gap:5px;background:#fff9eb;border:1.5px solid rgba(101,70,63,.18);color:var(--ink-dark);box-shadow:0 4px 14px rgba(83,61,52,.07)}
.currency-pill span{color:#f1ad35;font-size:20px}.currency-pill b{font-size:15px}

.home-welcome{position:relative;min-height:138px;margin-top:12px;padding:21px 22px;border-radius:28px;overflow:hidden;color:#fffaf0;background:linear-gradient(135deg,#315653 0%,#47786f 65%,#5a8b7c 100%);box-shadow:0 8px 0 rgba(47,76,72,.22),0 17px 31px rgba(49,80,76,.2)}
.home-welcome::before,.home-welcome::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:50%}.home-welcome::before{width:190px;height:190px;right:-73px;top:-91px}.home-welcome::after{width:112px;height:112px;right:-16px;bottom:-75px}
.welcome-copy{position:relative;z-index:2}.welcome-copy>small{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:900;letter-spacing:2px;color:#f4d792}.welcome-copy>small i{display:inline-block;width:18px;height:2px;border-radius:2px;background:#f4d792}.welcome-copy h1{margin:7px 0 5px;font-size:25px;line-height:1.22;letter-spacing:1px;color:white}.welcome-copy h1 em{font-style:normal;color:#ffe1a0}.welcome-copy p{margin:0;font-size:10px;color:rgba(255,250,240,.72);letter-spacing:.5px}
.detective-emblem{position:absolute;right:20px;top:25px;width:91px;height:91px;border-radius:50%;background:radial-gradient(circle at 37% 31%,#fff7db 0 55%,#ead49e 56% 100%);border:5px solid rgba(255,255,255,.18);box-shadow:0 9px 18px rgba(30,57,53,.28);transform:rotate(-9deg)}
.detective-emblem span{position:absolute;width:43px;height:43px;left:19px;top:15px;border:7px solid #65483f;border-radius:50%;background:rgba(107,198,199,.52);box-shadow:inset 0 0 0 3px rgba(255,255,255,.45)}.detective-emblem i{position:absolute;width:12px;height:37px;left:59px;top:52px;border-radius:8px;background:#65483f;transform:rotate(-42deg);transform-origin:top}.detective-emblem b{position:absolute;left:33px;top:28px;color:#fff7c3;font-size:18px;text-shadow:0 1px 5px rgba(49,90,82,.65)}

.featured-case{margin-top:16px;border-radius:27px;background:rgba(255,252,244,.94);border:1.5px solid rgba(102,70,63,.19);overflow:hidden;box-shadow:0 9px 24px rgba(91,65,55,.12)}
.featured-cover{position:relative;display:block;width:100%;height:153px;padding:0;overflow:hidden;background:#d9c5a5}
.featured-cover::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(38,32,30,.36));pointer-events:none}.featured-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.featured-cover:active img{transform:scale(1.025)}
.case-stamp{position:absolute;z-index:2;left:12px;top:12px;padding:6px 12px;border-radius:14px;background:#ef7d69;color:white;font-size:11px;font-weight:900;box-shadow:0 3px 0 #bd544e}.cover-number{position:absolute;z-index:2;right:13px;bottom:10px;font-size:8px;font-weight:900;letter-spacing:2px;color:white;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.featured-content{padding:13px 15px 15px}.case-heading{display:flex;align-items:end;gap:9px}.case-heading small{padding-bottom:3px;font-size:9px;font-weight:900;letter-spacing:1px;color:#b57e68}.case-heading h2{margin:0;font-size:21px;line-height:1.2;color:var(--ink-dark)}
.case-meta{display:flex;gap:9px;margin:11px 0}.case-meta>span{flex:1;display:grid;grid-template-columns:26px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:6px 8px;border-radius:13px;background:#f6ead7}.case-meta i{grid-row:1/3;width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:#fffaf0;color:#4d8d88;font-style:normal;font-size:15px;font-weight:900}.case-meta small{font-size:8px;color:#a9877a}.case-meta b{font-size:11px;color:#664840}
.primary-start{width:100%;height:47px;padding:0 8px 0 20px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#ee7b66,#e3655d);color:white;box-shadow:0 5px 0 #b94d4a,0 8px 17px rgba(205,81,75,.2);font-weight:900;letter-spacing:2px}.primary-start i{width:33px;height:33px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.2);font-style:normal;font-size:18px}

.daily-mission{margin-top:13px;min-height:67px;padding:9px 10px;display:flex;align-items:center;gap:10px;border-radius:20px;background:linear-gradient(135deg,#fff1c9,#f7dc9e);border:1.5px solid #dfb971;box-shadow:0 5px 14px rgba(134,92,50,.1)}
.mission-seal{width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:15px;background:#f2b94c;color:white;border:3px solid #fff8dd;box-shadow:0 0 0 1px #c58c39;font-size:20px;font-weight:900}.daily-mission>div:nth-child(2){min-width:0}.daily-mission small{display:block;font-size:7px;font-weight:900;letter-spacing:1px;color:#ad744d}.daily-mission h2{margin:3px 0 0;font-size:13px;white-space:nowrap;color:#61453d}.daily-mission button{margin-left:auto;flex:none;padding:9px 11px;border-radius:12px;background:#4f8177;color:white;font-size:11px;font-weight:900;box-shadow:0 3px 0 #365e58}
.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}.home-action{min-width:0;height:67px;padding:9px 10px;display:grid;grid-template-columns:36px 1fr 10px;align-items:center;gap:7px;border-radius:19px;text-align:left;border:1.5px solid rgba(103,71,63,.16);box-shadow:0 5px 15px rgba(90,63,54,.08)}.home-action>span{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;font-size:20px;font-weight:900}.home-action>div{display:grid;min-width:0;gap:2px}.home-action b{font-size:12px;color:#5b413b}.home-action small{font-size:7px;white-space:nowrap;color:#9c7a70}.home-action>i{font-style:normal;font-size:18px;color:#9b7c72}.archive-action{background:#e1f2ed}.archive-action>span{background:#65ada0;color:white}.puzzle-action{background:#eee9f8}.puzzle-action>span{background:#9a8bc5;color:white}

.bottom-nav { position:absolute;z-index:10;bottom:0;left:0;right:0;height:78px;padding-bottom:env(safe-area-inset-bottom);display:flex;justify-content:space-around;align-items:flex-end;background:rgba(255,249,235,.96);border-top:3px solid #76524a;box-shadow:0 -8px 20px rgba(98,68,58,.09); }
.bottom-nav button{position:relative;width:31%;height:70px;background:none;display:grid;place-content:center;justify-items:center;gap:1px;color:#9d7c71}.bottom-nav button span{font-size:26px;font-weight:900}.bottom-nav button b{font-size:12px}.bottom-nav .nav-home{height:96px;border:3px solid #76524a;border-bottom:0;border-radius:35px 35px 0 0;background:#fff7e5;color:#76524a}.bottom-nav button.is-selected{color:var(--coral-dark)}

/* Game */
.game-screen { padding-left: 12px; padding-right: 12px; padding-bottom: 91px; }
.game-header { display:flex;align-items:center;justify-content:space-between;margin:0 3px 8px; }.game-header .round-button{width:43px;height:43px;border-radius:15px}.back-button{font-size:38px;line-height:1;background:#86d4da;color:#fff}.case-title{text-align:center}.case-title small{font-size:10px;font-weight:900;letter-spacing:2px;color:#b47d68}.case-title h2{font-size:20px;margin:1px 0 0;color:var(--ink-dark)}
.status-row{display:flex;justify-content:center;gap:7px;margin:7px 0}.status-pill{height:34px;min-width:82px;border:2px solid rgba(102,70,62,.4);border-radius:17px;background:rgba(255,255,255,.77);display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;box-shadow:0 3px 0 rgba(102,70,62,.1)}.status-pill span{font-size:18px}.status-pill b{font-size:16px;color:var(--ink-dark)}.status-pill small{font-size:10px}.status-pill i{font-style:normal}.hearts span{color:var(--coral)}.timer span{color:#dfa63c}.clues span{font-size:15px}
.progress-dots{display:flex;justify-content:center;gap:8px;margin:8px 0 9px}.progress-dots i{width:24px;height:10px;border-radius:6px;background:#f2ca78;border:2px solid #b17c54;transition:.25s}.progress-dots i.is-found{background:var(--green);border-color:#438c65;box-shadow:0 0 0 3px rgba(102,189,135,.18)}
.picture-pair{border:3px solid #7d574b;border-radius:14px;overflow:hidden;background:#7d574b;box-shadow:var(--shadow);touch-action:manipulation}.picture-frame{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#dac4a6;cursor:crosshair}.picture-frame+ .picture-frame{border-top:3px solid #7d574b}.picture-frame img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}.picture-label{position:absolute;left:7px;top:7px;width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:rgba(69,48,45,.68);color:white;font-size:10px;font-weight:900;backdrop-filter:blur(4px)}
.picture-frame .diff-layer{position:absolute;inset:0}.diff-clock{clip-path:inset(7% 0 68% 87%)}.diff-knot{clip-path:inset(3% 43% 55% 41%)}.diff-dragon{clip-path:inset(12% 10% 66% 73%)}.diff-teapot{clip-path:inset(48% 7% 27% 63%)}.diff-cat{clip-path:inset(70% 61% 0 3%)}
.grid-overlay{display:none;position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,transparent calc(33.333% - 1px),rgba(75,51,46,.55) calc(33.333% - 1px),rgba(75,51,46,.55) calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),rgba(75,51,46,.55) calc(66.666% - 1px),rgba(75,51,46,.55) calc(66.666% + 1px),transparent calc(66.666% + 1px)),linear-gradient(to bottom,transparent calc(33.333% - 1px),rgba(75,51,46,.55) calc(33.333% - 1px),rgba(75,51,46,.55) calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),rgba(75,51,46,.55) calc(66.666% - 1px),rgba(75,51,46,.55) calc(66.666% + 1px),transparent calc(66.666% + 1px))}.picture-pair.show-grid .grid-overlay{display:block}
.difference-marker{position:absolute;z-index:5;width:var(--marker-size,12%);aspect-ratio:1;border:4px solid #72d34e;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px white,0 3px 12px rgba(39,95,27,.48);pointer-events:none;animation:marker-pop .45s cubic-bezier(.2,1.5,.5,1) both}.difference-marker::after{content:"✓";position:absolute;right:-8px;top:-9px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#72d34e;color:white;border:2px solid white;font-size:11px;font-weight:900}.marker-countdown{position:absolute;z-index:-1;inset:-11px;width:calc(100% + 22px);height:calc(100% + 22px);overflow:visible;transform:rotate(-90deg);opacity:0;filter:drop-shadow(0 0 4px rgba(255,209,64,.92))}.marker-countdown circle{fill:none;stroke:#ffd340;stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}.difference-marker.is-counting .marker-countdown{opacity:1}.difference-marker.is-counting .marker-countdown circle{animation:marker-countdown 3s linear both}.marker-confirm{position:absolute;z-index:4;left:50%;top:50%;width:54px;height:54px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 28%,#f5ffb4 0 12%,#a8ef34 13% 46%,#69c824 47% 100%);border:4px solid white;color:white;font-size:31px;font-weight:1000;text-shadow:0 2px 0 #4c9c19;box-shadow:0 0 0 5px rgba(255,218,65,.72),0 0 24px rgba(170,237,48,.95);animation:marker-confirm 1s cubic-bezier(.18,1.2,.35,1) both}.difference-marker.is-final{border-color:#ffd340;box-shadow:0 0 0 4px #fff,0 0 0 8px rgba(255,211,64,.75),0 0 28px #ffd340}.difference-marker.is-final .marker-confirm{width:62px;height:62px;background:radial-gradient(circle at 35% 28%,#fffbd2 0 12%,#ffd75a 13% 47%,#ef9d2f 48% 100%);text-shadow:0 2px 0 #b96a25;box-shadow:0 0 0 5px rgba(255,255,255,.9),0 0 30px #ffd340}@keyframes marker-pop{from{transform:translate(-50%,-50%) scale(2);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes marker-countdown{to{stroke-dashoffset:100}}@keyframes marker-confirm{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-18deg)}18%,66%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.18)}}
.tap-miss{position:absolute;width:30px;height:30px;border:3px solid var(--coral);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:miss .5s ease-out forwards}.tap-miss::after,.tap-miss::before{content:"";position:absolute;left:12px;top:3px;width:3px;height:18px;background:var(--coral);transform:rotate(45deg)}.tap-miss::after{transform:rotate(-45deg)}@keyframes miss{to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.timer.is-danger{color:#c74443;border-color:#d65c56;background:#fff0ec;animation:danger-pulse .65s infinite alternate}@keyframes danger-pulse{to{transform:scale(1.05)}}
.game-toolbar{position:absolute;bottom:0;left:0;right:0;min-height:82px;padding:7px 12px max(8px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;background:rgba(255,249,235,.96);border-top:3px solid #7b564c;box-shadow:0 -7px 18px rgba(90,62,52,.1)}.tool-button{position:relative;min-width:75px;height:61px;border-radius:18px;background:#fff8ea;border:2px solid #846057;box-shadow:0 4px 0 rgba(94,65,57,.19);display:grid;grid-template-columns:31px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:6px 8px}.tool-icon{grid-row:1/3;font-size:25px}.tool-button b{font-size:13px;align-self:end}.tool-button small{font-size:9px;color:#c06a58;align-self:start}.toolbar-spacer{flex:1}.square-tool{width:55px;height:55px;border-radius:18px;background:#76cbd1;color:white;border:3px solid #745149;box-shadow:0 5px 0 #47939e;font-size:27px;font-weight:900}.square-tool.is-on{background:var(--coral);box-shadow:0 5px 0 var(--coral-dark)}
.game-screen.is-focus .game-header,.game-screen.is-focus .status-row,.game-screen.is-focus .progress-dots{display:none}.game-screen.is-focus{padding-top:max(7px,env(safe-area-inset-top))}.game-screen.is-focus .picture-pair{margin-top:0}

/* Collection */
.collection-header{display:flex;align-items:center;justify-content:space-between}.collection-header>div{text-align:center}.collection-header small{font-size:9px;letter-spacing:2px;color:#b17c68;font-weight:900}.collection-header h2{font-size:28px;margin:0;color:var(--ink-dark)}
.collection-summary{margin:24px 4px 18px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.75);border:2px solid rgba(103,72,63,.25);display:grid;grid-template-columns:1fr auto;gap:8px;font-size:13px;font-weight:800}.collection-summary b{color:var(--green)}.collection-summary div{grid-column:1/3;height:8px;border-radius:6px;background:#e8d9bf;overflow:hidden}.collection-summary i{display:block;height:100%;width:0;background:var(--green);border-radius:inherit;transition:.5s}
.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0 2px}.archive-card{position:relative;min-width:0;border-radius:20px;background:#fffaf0;border:3px solid #ba8a63;box-shadow:0 5px 0 rgba(105,72,62,.16);padding:8px 8px 10px;text-align:left}.archive-cover{display:grid;place-items:center;width:100%;aspect-ratio:1.35;border-radius:13px;overflow:hidden;background:linear-gradient(145deg,#f1dfb7,#e6c690);color:rgba(126,91,70,.45);font-size:52px;font-weight:900}.archive-cover img{width:100%;height:100%;object-fit:cover}.archive-card b{display:block;font-size:15px;margin:8px 3px 1px;color:var(--ink-dark)}.archive-card small{margin-left:3px;color:#aa8477;font-size:9px}.archive-card.is-locked{filter:saturate(.55)}.archive-card.is-locked .archive-cover{border:2px dashed rgba(120,83,67,.2)}.archive-card.is-completed{border-color:#5ba879}.archive-status{position:absolute;right:14px;top:14px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:white;border:3px solid white;box-shadow:0 2px 7px rgba(40,91,61,.4);font-weight:900}

/* Modal, sheet and feedback */
.modal-backdrop{position:absolute;z-index:40;inset:0;background:rgba(63,45,42,.58);display:grid;place-items:center;padding:24px;backdrop-filter:blur(5px)}.modal-backdrop[hidden]{display:none}.game-modal{width:100%;max-width:350px;border-radius:30px;background:var(--paper);border:4px solid var(--ink);box-shadow:0 10px 0 rgba(55,38,35,.24),0 25px 55px rgba(35,25,24,.35);padding:51px 22px 22px;text-align:center;position:relative;animation:modal-in .42s cubic-bezier(.2,1.2,.4,1) both}@keyframes modal-in{from{opacity:0;transform:translateY(25px) scale(.85)}}.modal-badge{position:absolute;left:50%;top:-43px;transform:translateX(-50%);width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;border:6px solid var(--paper);outline:4px solid var(--ink);font-size:46px;font-weight:900;box-shadow:0 7px 0 rgba(51,106,73,.22)}.game-modal>small{font-size:11px;font-weight:900;letter-spacing:3px;color:#b57c68}.game-modal h2{margin:5px 0;color:var(--ink-dark);font-size:27px}.game-modal p{font-size:13px;color:#98776e;margin:4px 0 14px}.modal-stats{display:flex;justify-content:center;gap:25px;padding:12px;border-radius:16px;background:#f3e5cb;margin-bottom:15px}.modal-stats span{display:grid;gap:2px}.modal-stats b{font-size:19px;color:var(--ink-dark)}.modal-stats small{font-size:10px;color:#9a786e}.modal-actions{display:grid;gap:9px}.modal-actions button{min-height:48px;border-radius:17px;font-weight:900}.modal-actions .primary{background:var(--teal);color:white;border:3px solid var(--ink);box-shadow:0 5px 0 var(--teal-dark)}.modal-actions .reward{background:var(--gold);border:3px solid var(--ink);box-shadow:0 5px 0 #c88a37}.modal-actions .ghost{background:transparent;color:#98776e}
.sheet{position:absolute;z-index:45;inset:0;display:flex;align-items:flex-end}.sheet[hidden]{display:none}.sheet-scrim{position:absolute;inset:0;background:rgba(61,44,41,.5)}.sheet>section{position:relative;width:100%;padding:11px 22px max(24px,calc(env(safe-area-inset-bottom) + 18px));background:var(--paper);border-radius:28px 28px 0 0;border-top:3px solid var(--ink);box-shadow:0 -10px 35px rgba(43,30,28,.25)}.sheet-handle{width:48px;height:5px;border-radius:3px;background:#dac8b2;margin:0 auto 14px}.sheet h2{margin:0 0 12px;text-align:center;color:var(--ink-dark)}.sheet label{display:flex;align-items:center;justify-content:space-between;padding:14px 3px;border-top:1px solid #eadbc5}.sheet label span{display:grid;font-weight:800}.sheet label small{font-weight:400;color:#a18379;font-size:11px;margin-top:2px}.sheet input:not([type=range]){appearance:none;width:48px;height:28px;border-radius:16px;background:#d8c8b6;position:relative;transition:.2s}.sheet input:not([type=range])::after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:white;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}.sheet input:not([type=range]):checked{background:var(--green)}.sheet input:not([type=range]):checked::after{left:23px}.sheet .volume-row{display:grid;grid-template-columns:1fr;gap:8px}.sheet .volume-row input{width:100%;accent-color:var(--teal)}.sheet-close{width:100%;height:48px;border-radius:16px;background:var(--teal);color:white;font-weight:900;margin-top:8px;box-shadow:0 5px 0 var(--teal-dark)}
.ad-overlay{position:absolute;z-index:60;inset:0;background:rgba(42,34,33,.75);display:grid;place-items:center;padding:30px;backdrop-filter:blur(8px)}.ad-overlay[hidden]{display:none}.ad-card{width:100%;max-width:320px;padding:28px 24px;text-align:center;border-radius:24px;background:#fffaf0;border:3px solid var(--ink);box-shadow:0 10px 0 rgba(0,0,0,.16)}.ad-card>span{display:inline-grid;place-items:center;width:45px;height:30px;border-radius:8px;background:#ded2c3;color:#846e66;font-weight:900;font-size:12px}.ad-card b{display:block;font-size:20px;margin:12px 0 3px;color:var(--ink-dark)}.ad-card p{font-size:11px;line-height:1.6;color:#9c7e74}.ad-progress{height:7px;border-radius:5px;background:#e6d7c4;overflow:hidden;margin-top:13px}.ad-progress i{display:block;height:100%;background:var(--coral);animation:ad-load 1.25s linear both}@keyframes ad-load{from{width:0}to{width:100%}}
.toast{position:absolute;z-index:70;left:50%;bottom:105px;transform:translate(-50%,12px);padding:10px 16px;border-radius:18px;background:rgba(67,48,45,.92);color:white;font-size:12px;font-weight:800;opacity:0;pointer-events:none;white-space:nowrap;transition:.25s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.confetti{position:absolute;z-index:50;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-20px;width:9px;height:15px;border-radius:3px;animation:confetti-fall 2.2s ease-in forwards}@keyframes confetti-fall{to{transform:translate(var(--drift),110svh) rotate(720deg);opacity:.1}}

@media (max-height: 790px) {
  .home-welcome{min-height:112px;padding:14px 18px}.welcome-copy h1{font-size:22px;margin:5px 0 3px}.detective-emblem{width:76px;height:76px;right:17px;top:18px}.detective-emblem span{width:37px;height:37px;left:15px;top:12px;border-width:6px}.detective-emblem i{height:31px;left:49px;top:44px}.detective-emblem b{left:27px;top:23px}.featured-case{margin-top:11px}.featured-cover{height:118px}.featured-content{padding:10px 13px 12px}.case-meta{margin:7px 0}.daily-mission{margin-top:9px;min-height:61px}.home-actions{margin-top:8px}.home-action{height:59px}.game-header{margin-bottom:2px}.status-row{margin:3px 0}.progress-dots{margin:4px 0 6px}.game-toolbar{min-height:73px}.tool-button{height:53px}.square-tool{width:49px;height:49px}.game-screen{padding-bottom:78px}
}
@media (max-width:400px){.home-screen{padding-left:13px;padding-right:13px}.profile-copy{display:none}.profile-chip{padding-right:3px}.home-welcome{padding-left:18px}.welcome-copy h1{font-size:23px}.featured-cover{height:143px}.home-action{padding-left:8px;padding-right:8px;grid-template-columns:32px 1fr 8px}.home-action>span{width:32px;height:32px}.home-action small{font-size:6.5px}}
@media (min-width: 481px) { body{padding:22px 0}.app-shell{min-height:calc(100svh - 44px);border-radius:28px;border:1px solid rgba(72,51,46,.25)}.screen{min-height:calc(100svh - 44px)} }

/* Rewarded hint and magnified inspection */
.tool-button:disabled{opacity:.65;filter:saturate(.65)}
.tool-button.is-loading::after{content:"广告中";position:absolute;inset:0;display:grid;place-items:center;border-radius:16px;background:rgba(255,248,234,.9);color:var(--coral-dark);font-size:11px;font-weight:900}
.zoom-viewer{position:absolute;z-index:55;inset:0;display:flex;flex-direction:column;background:var(--paper)}
.zoom-viewer[hidden]{display:none}
.zoom-viewer-header{display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 14px 10px;border-bottom:3px solid var(--ink);background:rgba(255,249,235,.96)}
.zoom-viewer-header>div{display:grid;text-align:center;flex:1}
.zoom-viewer-header small{font-size:10px;color:#b17c68;font-weight:900;letter-spacing:2px}
.zoom-viewer-header b{font-size:20px;color:var(--ink-dark)}
.zoom-viewer-header .round-button{width:42px;height:42px;background:#86d4da;color:white;font-size:29px}
.zoom-scroll{flex:1;overflow:auto;padding:16px 14px 8px;overscroll-behavior:contain}
.zoom-copy{width:155%;min-width:540px;max-width:none;margin:0 auto;transform:none}
.zoom-copy .picture-frame{cursor:default}
.zoom-viewer-tip{text-align:center;color:#a17e72;font-size:11px;padding:5px 14px 2px}
.zoom-done{margin:7px 14px max(12px,env(safe-area-inset-bottom));flex:none}
.zoom-viewer.is-inline{display:block;pointer-events:none;background:transparent;border-radius:14px;overflow:hidden}
.zoom-viewer.is-inline .zoom-viewer-header{position:absolute;z-index:12;inset:0 0 auto auto;width:auto;padding:7px;background:transparent;border:0;pointer-events:none}
.zoom-viewer.is-inline .zoom-viewer-header>div{display:none}
.zoom-viewer.is-inline .zoom-viewer-header .round-button{pointer-events:auto;width:36px;height:36px;border-width:2px;font-size:23px;box-shadow:0 3px 0 rgba(80,54,67,.18)}
.zoom-viewer.is-inline .zoom-scroll{position:absolute;z-index:1;inset:0;display:block;padding:0;overflow:auto;border:3px solid #7d574b;border-radius:14px;background:#7d574b;pointer-events:auto;touch-action:pan-x pan-y;overscroll-behavior:contain}
.zoom-viewer.is-inline .zoom-copy{width:155%;min-width:540px;max-width:none;margin:0}
.zoom-viewer.is-inline .zoom-copy .picture-frame{cursor:grab}
.zoom-viewer.is-inline .zoom-copy .picture-frame:active{cursor:grabbing}
.zoom-viewer.is-inline .zoom-viewer-tip,.zoom-viewer.is-inline .zoom-done{display:none}
.zoom-viewer.is-inline .zoom-scroll{scrollbar-width:none;-ms-overflow-style:none;touch-action:none;cursor:grab}
.zoom-viewer.is-inline .zoom-scroll::-webkit-scrollbar{display:none}
.zoom-viewer.is-inline .zoom-scroll.is-dragging{cursor:grabbing}
.modal-backdrop.is-failure{background:rgba(73,57,77,.7);backdrop-filter:blur(8px)}
.game-modal.is-failure{max-width:340px;padding:22px 20px 20px;background:linear-gradient(180deg,#fffdfb,#fff1f5);outline-color:#b7839c}
.game-modal.is-failure .modal-badge{display:none}
.game-modal.is-failure .modal-failure-art{display:grid}
.modal-failure-art{justify-items:center;gap:2px;margin:0 auto 6px;color:#ad7890;font-size:11px;font-weight:800}
.modal-failure-art svg{display:block;width:128px;height:106px;filter:drop-shadow(0 6px 0 rgba(183,131,156,.16))}
.modal-failure-art span{padding:5px 12px;border-radius:12px;background:#fff0d4;color:#b47b67}
.game-modal.is-failure>small{color:#d67596}
.game-modal.is-failure h2{margin-top:4px;color:#69495e}
.game-modal.is-failure p{margin-bottom:13px}
.game-modal.is-failure .modal-stats{margin-bottom:14px}
.game-modal.is-failure .modal-actions .reward{background:#ffd477;color:#6b4e58}
.modal-failure-art[hidden]{display:none}
.case-intro{position:absolute;z-index:65;inset:0;display:grid;place-items:center;padding:24px;background:rgba(91,67,86,.44);backdrop-filter:blur(6px)}
.case-intro[hidden]{display:none}
.case-intro-card{width:min(320px,100%);padding:22px 22px 20px;text-align:center;border-radius:30px;background:linear-gradient(180deg,#fffdfb,#fff2f7);border:4px solid white;outline:3px solid #b7839c;box-shadow:0 9px 0 rgba(181,119,148,.22),0 22px 45px rgba(90,58,74,.28);opacity:0;transform:translateY(18px) scale(.9)}
.case-intro.is-visible .case-intro-card{animation:case-intro-pop .48s cubic-bezier(.2,1.25,.35,1) both}
@keyframes case-intro-pop{to{opacity:1;transform:translateY(0) scale(1)}}
.intro-ribbon{display:flex;align-items:center;justify-content:center;gap:8px;color:#d87595;font-size:10px;font-weight:900;letter-spacing:1.4px}
.intro-ribbon span{color:#ffc85b;font-size:16px}
.intro-compass{position:relative;width:67px;height:67px;margin:13px auto 8px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ffe39a,#ffc865);border:4px solid white;outline:3px solid #b7839c;box-shadow:0 5px 0 rgba(188,126,148,.2);color:#fff;font-size:31px;font-weight:900;text-shadow:0 2px 0 #cf8b46}
.intro-compass i{position:absolute;right:-13px;top:-10px;color:#ff9fb7;font-style:normal;font-size:19px;text-shadow:none}
.case-intro-card>small{font-size:10px;color:#d47794;font-weight:900;letter-spacing:1.4px}
.case-intro-card h2{margin:5px 0 2px;color:#68485b;font-size:25px}
.case-intro-card>p{margin:0 0 13px;color:#9e788c;font-size:12px}
.intro-meta{display:flex;justify-content:center;gap:10px;margin:0 auto 15px}
.intro-meta span{min-width:92px;padding:8px 12px;border-radius:15px;background:#fff0df;color:#9b7182;display:grid;gap:1px}
.intro-meta span+span{background:#e7f7f7}
.intro-meta b{font-size:18px;color:#6b4c5d}
.intro-meta small{font-size:9px}
.case-intro-card>strong{display:inline-block;padding:8px 16px;border-radius:16px;background:linear-gradient(90deg,#ff9fb6,#a991d4);color:white;font-size:13px;box-shadow:0 4px 0 rgba(167,111,143,.2)}
.last-three-callout{display:flex;align-items:center;justify-content:center;gap:6px;min-height:31px;margin:0 auto 7px;padding:5px 12px;border-radius:16px;background:linear-gradient(90deg,#fff1c2,#ffe3a7);border:2px solid #d39a4f;color:#8b5b42;box-shadow:0 3px 0 rgba(149,98,55,.15);font-size:12px;animation:callout-in .35s ease-out both}.last-three-callout[hidden]{display:none}.last-three-callout span{color:#e58c35;font-size:17px}.last-three-callout b{font-size:12px}.last-three-callout small{font-size:10px;color:#a87561}@keyframes callout-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.sight-feedback{position:absolute;z-index:75;left:50%;top:30%;width:max-content;min-width:220px;max-width:calc(100% - 48px);display:grid;justify-items:center;gap:1px;padding:10px 22px 12px;border-radius:24px;background:linear-gradient(145deg,rgba(91,56,39,.97),rgba(55,44,42,.97));border:3px solid #ffd675;color:#fff8df;opacity:0;pointer-events:none;text-align:center;box-shadow:0 7px 0 rgba(63,42,36,.22),0 0 26px rgba(255,207,91,.35)}.sight-feedback::before,.sight-feedback::after{content:"✦";position:absolute;top:50%;color:#ffe18a;font-size:20px;filter:drop-shadow(0 2px #9e6537)}.sight-feedback::before{left:-13px}.sight-feedback::after{right:-13px}.sight-feedback small{font-size:9px;font-weight:900;letter-spacing:3px;color:#ffd675}.sight-feedback strong{font-size:25px;line-height:1.15;font-weight:1000;letter-spacing:2px;text-shadow:0 3px 0 rgba(49,29,24,.65)}.sight-feedback span{font-size:10px;font-weight:800;color:#f4dcc0}.sight-feedback.sharp{background:linear-gradient(145deg,#467b67,#31524b)}.sight-feedback.master{background:linear-gradient(145deg,#5968a2,#413e78)}.sight-feedback.legend,.sight-feedback.final-clue{background:linear-gradient(145deg,#b94f3e,#70382f);border-color:#fff0a5;box-shadow:0 7px 0 rgba(92,42,34,.26),0 0 36px rgba(255,198,55,.7)}.sight-feedback.final-clue strong{font-size:29px;color:#fff4a9}.sight-feedback.is-visible{animation:sight-pop 1.35s cubic-bezier(.2,1.25,.35,1) both}.sight-feedback.final-clue.is-visible{animation:final-clue-pop 1.08s cubic-bezier(.16,1.25,.28,1) both}@keyframes sight-pop{0%{opacity:0;transform:translate(-50%,16px) scale(.68) rotate(-3deg)}14%,72%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-18px) scale(1.06)}}@keyframes final-clue-pop{0%{opacity:0;transform:translate(-50%,16px) scale(.55)}18%,78%{opacity:1;transform:translate(-50%,0) scale(1.08)}100%{opacity:0;transform:translate(-50%,-14px) scale(1.14)}}
.milestone-feedback{position:absolute;z-index:74;left:50%;top:23%;min-width:238px;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 18px;border-radius:20px;background:linear-gradient(180deg,#fff6d8,#f6dba0);border:3px solid #996448;color:#6b4338;box-shadow:0 6px 0 rgba(106,67,50,.22),0 14px 28px rgba(73,49,43,.2);opacity:0;pointer-events:none}.milestone-feedback>span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#72cbd0;border:3px solid white;box-shadow:0 0 0 2px #805548;font-size:20px}.milestone-feedback>div{display:grid}.milestone-feedback small{font-size:9px;font-weight:900;letter-spacing:2px;color:#bd7a54}.milestone-feedback strong{font-size:18px}.milestone-feedback.is-visible{animation:milestone-pop 1.8s cubic-bezier(.2,1.18,.35,1) both}@keyframes milestone-pop{0%{opacity:0;transform:translate(-50%,-18px) scale(.78)}12%,75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-9px) scale(1.02)}}
.hint-dimmer{position:absolute;z-index:6;inset:0;pointer-events:none;background:rgba(20,16,14,.7);-webkit-mask-image:radial-gradient(circle at var(--hint-x) var(--hint-y),transparent 0 var(--hint-radius),#000 calc(var(--hint-radius) + 2px));mask-image:radial-gradient(circle at var(--hint-x) var(--hint-y),transparent 0 var(--hint-radius),#000 calc(var(--hint-radius) + 2px))}
.hint-focus-ring{position:absolute;z-index:7;display:block;aspect-ratio:1;transform:translate(-50%,-50%);border:4px solid #ffd447;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 18px rgba(255,212,71,.95);pointer-events:none;animation:hint-ring 1.05s ease-in-out infinite alternate}@keyframes hint-ring{to{transform:translate(-50%,-50%) scale(1.1);filter:brightness(1.18)}}
.picture-pair.feedback-correct{animation:correct-flash .62s ease-out;box-shadow:0 0 0 4px #66bd87,var(--shadow)}
.picture-pair.feedback-error{animation:error-feedback .42s ease-out;box-shadow:0 0 0 4px #ef7d69,var(--shadow)}
@keyframes correct-flash{0%{filter:brightness(1.4) saturate(1.2)}100%{filter:none}}
@keyframes error-feedback{0%{filter:saturate(.7) brightness(1.08);box-shadow:0 0 0 5px #ef7d69,0 0 24px rgba(239,125,105,.58)}45%{filter:saturate(.9)}100%{filter:none;box-shadow:0 0 0 4px #ef7d69,var(--shadow)}}
.modal-cover{position:relative;width:100%;margin:12px auto 15px;border:3px solid var(--ink);border-radius:18px;overflow:hidden;background:#ddc9a8;box-shadow:0 5px 0 rgba(101,70,63,.16)}
.modal-cover[hidden]{display:none}.modal-cover img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.modal-cover span{position:absolute;right:8px;bottom:8px;padding:5px 9px;border-radius:12px;background:rgba(60,43,39,.82);color:#fff5d7;font-size:10px;font-weight:900}
.game-modal{max-height:calc(100% - 30px);overflow:auto}.modal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:8px;padding:10px}.modal-stats span{min-width:0;padding:4px 2px;border-radius:11px;background:rgba(255,255,255,.35)}.modal-stats b{font-size:18px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═══════════════════════════════════════════════════════
   首页最终稿：严格对齐用户提供的「猫探社」视觉设计
   装饰横幅使用设计稿原始画面；关卡图片与文字保持动态。
   ═══════════════════════════════════════════════════════ */
.home-screen{
  min-height:100svh;
  padding:max(10px,env(safe-area-inset-top)) 17px max(96px,calc(env(safe-area-inset-bottom) + 88px));
  overflow-y:auto;
  background:
    radial-gradient(circle at 78% 2%,rgba(209,235,253,.72),transparent 27%),
    linear-gradient(180deg,#eef8ff 0,#fffdfa 35%,#fffdfa 100%);
}
.home-screen .home-topbar{
  min-height:59px;padding:0 2px;gap:8px;
}
.home-screen .profile-chip{
  width:min(270px,75%);height:59px;min-height:59px;flex:none;
  padding:0;background:transparent;border:0;outline:0;border-radius:0;box-shadow:none;
  overflow:visible;
}
.home-screen .profile-chip .mascot-button,
.home-screen .profile-chip .profile-copy{display:none}
.home-screen .brand-reference{display:block;width:100%;height:100%;overflow:visible}
.home-screen .home-topbar>.round-button{
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.9);border:2px solid rgba(255,255,255,.96);outline:0;
  color:#222943;font-size:23px;line-height:1;
  box-shadow:0 7px 18px rgba(67,77,106,.12);
}
.home-screen .hero-banner{
  position:relative;width:100%;aspect-ratio:875/399;min-height:0;
  margin:7px 0 0;padding:0;border:0;outline:0;border-radius:24px;
  background:none;box-shadow:0 10px 24px rgba(71,92,116,.13);overflow:hidden;
}
.home-screen .hero-banner::before,
.home-screen .hero-banner::after{display:none}
.home-screen .hero-copy,
.home-screen .hero-illustration{display:none}
.home-screen .hero-reference{display:block;width:100%;height:100%}

.home-screen .featured-case{
  position:relative;margin:13px 0 0;padding:13px 14px 14px;
  border:1px solid rgba(255,255,255,.95);outline:0;border-radius:27px;
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 26px rgba(76,82,109,.10),0 3px 8px rgba(87,96,124,.06);
  overflow:visible;
}
.home-screen .case-header-row{display:flex;margin:0 0 7px;min-height:28px}
.home-screen .case-stamp{
  position:static;display:inline-flex;align-items:center;height:28px;
  padding:0 15px;border:0;border-radius:15px;outline:0;
  background:linear-gradient(100deg,#ff6f98,#ff5e91);box-shadow:none;
  color:#fff;font-size:13px;letter-spacing:.4px;font-weight:900;
}
.home-screen .case-heading{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 1px 9px;
}
.home-screen .case-heading h2{
  margin:0;color:#18213f;font-size:25px;line-height:1.2;font-weight:900;letter-spacing:1px;
}
.home-screen .case-hint-text{
  color:#8783a8;font-size:11px;font-weight:600;white-space:nowrap;
}
.home-screen .case-subline{display:none}
.home-screen .featured-cover{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:100%;height:auto;aspect-ratio:814/263;padding:0;
  border:0;border-radius:13px;background:#dcebea;box-shadow:none;overflow:hidden;
}
.home-screen .featured-cover::before,
.home-screen .featured-cover::after{display:none}
.home-screen .preview-half{display:block;position:relative;min-width:0;overflow:hidden}
.home-screen .preview-half:first-child{border-right:2px solid rgba(255,255,255,.9)}
.home-screen .featured-cover img{
  display:block;width:100%;height:100%;object-fit:cover;transform:none!important;transition:none;
}
.home-screen .case-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 1px;
}
.home-screen .case-meta .meta-pill{
  min-width:0;height:48px;padding:5px 10px;
  display:grid;grid-template-columns:34px 1fr;grid-template-rows:1fr 1fr;align-items:center;
  border:0;border-radius:15px;background:#fff8ef;box-shadow:none;
}
.home-screen .case-meta .meta-clues{background:#eefaff}
.home-screen .case-meta .meta-pill i{
  grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;
  border-radius:11px;background:#fff;color:#ff5f8e;font-size:20px;font-style:normal;font-weight:900;
}
.home-screen .case-meta .meta-clues i{color:#54a8e8;font-size:16px}
.home-screen .case-meta .meta-pill div{display:grid;align-content:center;line-height:1.05}
.home-screen .case-meta .meta-pill small{font-size:9px;color:#9c93a6;font-weight:600}
.home-screen .case-meta .meta-pill b{font-size:15px;color:#202947;font-weight:900}
.home-screen .primary-start{
  width:100%;height:52px;padding:0 9px 0 22px;
  display:flex;align-items:center;justify-content:center;position:relative;
  border:0;outline:0;border-radius:27px;
  background:linear-gradient(100deg,#ff9a93 0%,#ff6f93 48%,#f53882 100%);
  box-shadow:0 5px 0 rgba(225,68,115,.25),0 8px 18px rgba(233,76,127,.18);
  color:#fff;font-size:19px;font-weight:900;letter-spacing:1px;text-shadow:none;
}
.home-screen .primary-start i{
  position:absolute;right:9px;top:8px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.88);color:#ef4e83;
  font-size:21px;font-style:normal;box-shadow:none;
}
.home-screen .home-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0;
}
.home-screen .home-action{
  position:relative;min-width:0;min-height:80px;height:80px;padding:11px 12px;
  display:grid;grid-template-columns:46px 1fr 12px;grid-template-rows:1fr;align-items:center;gap:9px;
  border:1px solid rgba(255,255,255,.98);outline:0;border-radius:23px;
  box-shadow:0 8px 18px rgba(68,95,116,.09);text-align:left;
}
.home-screen .archive-action{background:linear-gradient(135deg,#e2fbf7,#d9f7f4)}
.home-screen .rank-action{background:linear-gradient(135deg,#f0ebff,#e8e2ff)}
.home-screen .home-action>span{
  width:44px;height:44px;margin:0;border-radius:14px;display:grid;place-items:center;
  background:#68d2c7;color:white;font-size:25px;font-weight:900;box-shadow:none;
}
.home-screen .rank-action>span{background:#a68aee}
.home-screen .home-action>div{display:grid;gap:2px;min-width:0}
.home-screen .home-action b{display:block;margin:0;color:#173858;font-size:15px;line-height:1.15;font-weight:900}
.home-screen .home-action small{display:block;margin:0;color:#6f86a0;font-size:10px;line-height:1.2;font-weight:600;white-space:nowrap}
.home-screen .home-action>i{
  position:static;color:#4c9ca1;font-size:24px;font-style:normal;font-weight:600;
}
.home-screen .rank-action>i{color:#8974cf}
.home-screen .home-action.is-coming-soon::after{
  content:"待开放";position:absolute;right:11px;top:8px;padding:2px 6px;border-radius:8px;
  background:rgba(255,255,255,.72);color:#70a9a3;font-size:7px;font-weight:800;
}
.home-screen .bottom-nav{
  position:absolute;z-index:10;left:0;right:0;bottom:0;height:88px;
  display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
  padding:7px 10px max(7px,env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border:0;border-radius:34px 34px 0 0;
  box-shadow:0 -8px 24px rgba(72,79,104,.10);backdrop-filter:blur(12px);
}
.home-screen .bottom-nav button,
.home-screen .bottom-nav .nav-home{
  width:100%;height:70px;padding:0;background:transparent;border:0;outline:0;border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:#747488;box-shadow:none;
}
.home-screen .bottom-nav button span{
  width:39px;height:34px;border-radius:13px;display:grid;place-items:center;
  background:transparent;color:inherit;font-family:"Arial Unicode MS","Segoe UI Symbol",sans-serif;
  font-size:28px;line-height:1;font-weight:700;box-shadow:none;
}
.home-screen .bottom-nav button b{font-size:12px;font-weight:800}
.home-screen .bottom-nav button.is-selected{color:#f35082}
.home-screen .bottom-nav button.is-selected span{
  background:linear-gradient(145deg,#ff7296,#f43f7e);color:#fff;box-shadow:0 4px 9px rgba(239,67,122,.18);
}

@media (max-height:790px){
  .home-screen{padding-top:max(7px,env(safe-area-inset-top));padding-left:14px;padding-right:14px}
  .home-screen .home-topbar{min-height:52px}
  .home-screen .profile-chip{height:52px;min-height:52px;width:min(245px,73%)}
  .home-screen .home-topbar>.round-button{width:43px;height:43px}
  .home-screen .hero-banner{margin-top:4px}
  .home-screen .featured-case{margin-top:9px;padding:10px 11px 11px}
  .home-screen .case-header-row{margin-bottom:4px;min-height:24px}
  .home-screen .case-stamp{height:24px;font-size:12px}
  .home-screen .case-heading{margin-bottom:6px}.home-screen .case-heading h2{font-size:22px}
  .home-screen .case-meta{margin:7px 1px}.home-screen .case-meta .meta-pill{height:43px}
  .home-screen .primary-start{height:47px}.home-screen .primary-start i{top:6px;width:35px;height:35px}
  .home-screen .home-actions{margin-top:9px}.home-screen .home-action{height:68px;min-height:68px;padding:8px 10px;grid-template-columns:38px 1fr 10px}
  .home-screen .home-action>span{width:38px;height:38px;font-size:21px}.home-screen .home-action b{font-size:14px}
  .home-screen .bottom-nav{height:78px}.home-screen .bottom-nav button,.home-screen .bottom-nav .nav-home{height:62px}
}
@media (max-width:400px){
  .home-screen{padding-left:13px;padding-right:13px}
  .home-screen .profile-chip{width:225px}
  .home-screen .case-heading h2{font-size:22px}
  .home-screen .case-hint-text{font-size:9px}
  .home-screen .home-action{grid-template-columns:39px 1fr 9px;padding-left:9px;padding-right:9px}
  .home-screen .home-action>span{width:38px;height:38px;font-size:21px}
  .home-screen .home-action b{font-size:13px}.home-screen .home-action small{font-size:8px}
}

/* ═══════════════════════════════════════════
   猫探社 · 新版 UI 全量样式
   配色：天空蓝底 / 粉珊瑚强调 / 薄荷绿 + 淡紫功能卡
   ═══════════════════════════════════════════ */

/* ── 顶部栏 ───────────────────────────── */
.home-topbar{padding:4px 4px 0;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.profile-chip{
  gap:9px;padding:4px 14px 4px 4px;border-radius:24px;
  background:rgba(255,255,255,.95);border:3px solid #fff;outline:2px solid #b8c8e0;
  box-shadow:0 5px 0 rgba(91,128,156,.14),0 8px 19px rgba(63,115,147,.10);
  display:flex;align-items:center;min-height:48px;flex:1;min-width:0;
}
.mascot-button{width:42px;height:42px;border-radius:16px;background:linear-gradient(145deg,#fff7e8,#d9f2fb);border:2px solid #fff;box-shadow:0 2px 0 rgba(105,132,155,.10);display:grid;place-items:center;flex-shrink:0}
.mascot-button svg{width:32px;height:32px}
.profile-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.profile-copy small{font-size:10px;color:#557e9e;letter-spacing:1px;font-weight:700}
.profile-copy b{font-size:14px;color:#2f3b5a;font-weight:900;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.home-topbar>.round-button{width:46px;height:46px;border-radius:18px;background:rgba(255,255,255,.95);outline:2px solid #b8c8e0;color:#39415d;flex-shrink:0;font-size:22px}

/* ── Hero 大横幅 ───────────────────────── */
.hero-banner{
  position:relative;
  margin-top:14px;padding:22px 130px 18px 20px;
  min-height:175px;
  border:4px solid #fff;outline:2px solid #7caec8;border-radius:28px;
  background:linear-gradient(135deg,#a8dffc 0%,#caf0fd 45%,#ffe9b8 100%);
  box-shadow:0 7px 0 rgba(98,161,190,.22),0 15px 27px rgba(69,131,166,.16);
  overflow:hidden;
}
.hero-banner::before{
  content:"";position:absolute;
  width:200px;height:90px;left:-60px;top:-40px;
  background:rgba(255,255,255,.38);border-radius:50%;transform:rotate(-12deg);
}
.hero-banner::after{
  content:"";position:absolute;
  width:60px;height:60px;right:160px;bottom:-15px;
  background:rgba(255,255,255,.28);border-radius:50%;
}
.hero-copy{position:relative;z-index:3}
.hero-copy h1{
  display:flex;flex-direction:column;align-items:flex-start;
  margin:0 0 8px;line-height:1;font-weight:1000;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
.hero-copy h1 span{font-size:38px;color:#2d3b61;letter-spacing:2px;text-shadow:0 3px 0 rgba(63,96,125,.15)}
.hero-copy h1 .hero-sub{font-size:20px;color:#2d3b61;letter-spacing:2px;margin-top:1px}
.hero-copy h1 .hero-highlight{
  display:inline-flex;align-items:center;gap:4px;
  font-size:42px;color:#ff6e98;letter-spacing:2px;
  text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 4px 0 rgba(220,80,140,.18);
}
.hero-copy h1 .hero-paw{font-size:30px;margin-left:2px}
.hero-copy p{font-size:12px;color:#546b7c;font-weight:700;line-height:1.5;margin:6px 0 0}
.hero-illustration{
  position:absolute;right:-8px;bottom:-8px;width:160px;height:160px;
  z-index:2;
  filter:drop-shadow(0 7px 0 rgba(77,121,146,.18)) drop-shadow(0 10px 15px rgba(49,102,131,.14));
}
.hero-illustration svg{width:100%;height:100%}
.sticky-note{
  position:absolute;right:8px;top:8px;z-index:4;
  padding:8px 10px;width:78px;
  background:#fff8d6;border:2px solid #f0d878;border-radius:3px;
  font-size:9px;color:#7a5e2c;font-weight:700;line-height:1.4;
  box-shadow:0 3px 0 rgba(180,140,60,.18);
  transform:rotate(4deg);
}
.sticky-note::before{
  content:"";position:absolute;left:50%;top:-6px;transform:translateX(-50%);
  width:14px;height:6px;background:#e8a8a8;border-radius:50% 50% 0 0;
  opacity:.7;
}

/* ── 关卡卡片（featured-case） ───────────────────────── */
.featured-case{
  position:relative;
  margin-top:16px;padding:14px 14px 16px;
  border:4px solid #fff;outline:2px solid #abc4d5;border-radius:26px;
  background:rgba(255,255,255,.96);
  box-shadow:0 7px 0 rgba(133,180,201,.20),0 15px 25px rgba(79,115,137,.12);
}
.case-header-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;gap:10px;
}
.case-stamp{
  display:inline-block;
  padding:5px 13px;
  background:linear-gradient(135deg,#ff6e98,#ff8d9b);
  border:2px solid #fff;border-radius:14px;
  box-shadow:0 3px 0 #d55c7d;color:#fff;
  font-size:13px;font-weight:900;letter-spacing:1px;
}
.case-hint-text{
  font-size:11px;color:#7a8aa3;font-weight:600;
}
.case-heading{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:6px;margin-bottom:2px;
}
.case-heading h2{font-size:26px;color:#303653;font-weight:1000;line-height:1;margin:0;letter-spacing:1px}
.case-subline{
  display:flex;align-items:center;gap:7px;margin-bottom:12px;
}
.case-subline b{font-size:14px;color:#557e9e;font-weight:700}
.difficulty-tag{
  padding:2px 9px;border-radius:10px;
  background:linear-gradient(135deg,#ffe3eb,#fff0f5);
  color:#ed738e;font-size:10px;font-weight:900;letter-spacing:.5px;
}
.featured-cover{
  position:relative;display:block;width:100%;
  height:160px;margin:0 0 12px;border-radius:18px;
  overflow:hidden;border:3px solid #fff;outline:2px solid #d8e6f0;
  box-shadow:0 4px 0 rgba(133,180,201,.18);
  background:#cae8f2;
  display:flex;
}
.featured-cover .preview-half{
  flex:1;height:100%;overflow:hidden;
  display:block;
}
.featured-cover .preview-half img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.featured-cover .preview-half:first-child{border-right:2px solid rgba(255,255,255,.7)}
.case-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px;
}
.meta-pill{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:16px;
}
.meta-time{background:linear-gradient(135deg,#fff0f5,#ffe3eb)}
.meta-clues{background:linear-gradient(135deg,#eaf8fc,#d8f0fa)}
.meta-pill i{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;font-style:normal;
  box-shadow:0 2px 0 rgba(123,107,126,.12);
  font-size:16px;color:#f46e82;
}
.meta-clues i{color:#4db8d6}
.meta-pill div{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.meta-pill small{font-size:9px;color:#9d8791;font-weight:700;letter-spacing:.5px}
.meta-pill b{font-size:16px;color:#303653;font-weight:900;letter-spacing:.5px}
.primary-start{
  width:100%;height:54px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border-radius:27px;
  background:linear-gradient(100deg,#ff9ca0,#f65c94);
  border:3px solid #fff;outline:2px solid #ec8193;
  box-shadow:0 5px 0 #db6d7d,0 9px 16px rgba(224,100,131,.20);
  color:#fff;font-size:18px;font-weight:900;letter-spacing:2px;
  text-shadow:0 2px 0 rgba(170,40,90,.2);
}
.primary-start i{
  width:30px;height:30px;border-radius:50%;
  background:#fff;color:#e86f85;
  display:grid;place-items:center;font-size:18px;font-style:normal;font-weight:900;
  box-shadow:0 2px 0 rgba(190,40,90,.18);
}

/* ── 功能卡片区（2 列） ───────────────────────── */
.home-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:11px;
  margin-top:14px;
}
.home-action{
  position:relative;
  min-height:84px;padding:13px 14px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  border:4px solid #fff;outline:2px solid rgba(127,166,191,.40);
  border-radius:22px;box-shadow:0 5px 0 rgba(108,150,177,.13);
  text-align:left;
}
.home-action>span{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  font-size:22px;font-style:normal;
  box-shadow:0 2px 0 rgba(123,107,126,.10);
}
.home-action>div{display:block}
.home-action b{font-size:14px;color:#274e78;font-weight:900;display:block;line-height:1.1;margin-top:auto}
.home-action small{display:block;margin-top:2px;font-size:10px;color:#6085a4;font-weight:600}
.home-action>i{
  position:absolute;right:12px;bottom:11px;
  font-size:22px;color:#4c84b1;font-style:normal;font-weight:700;
}
.archive-action{background:linear-gradient(145deg,#d9faf1,#cdeef4)}
.archive-action>span{background:#70cfc6}
.rank-action{background:linear-gradient(145deg,#eee6ff,#e1d8ff)}
.rank-action>span{background:#ab91e9}
.rank-action b{color:#4f3d82}
.rank-action small{color:#7868aa}

/* ── 底部导航 ───────────────────────── */
.bottom-nav{
  height:76px;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.96);border-top:0;
  border-radius:32px 32px 0 0;
  box-shadow:0 -7px 22px rgba(99,135,158,.14);
  backdrop-filter:blur(10px);
  padding:6px 8px 0;
}
.bottom-nav button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#7b7a88;font-weight:700;font-size:10px;
  background:transparent;border-radius:0;
}
.bottom-nav button span{
  width:38px;height:32px;display:grid;place-items:center;
  border-radius:14px;font-size:22px;font-style:normal;
  transition:all .2s ease;
}
.bottom-nav button.is-selected{
  color:#ff7597;
}
.bottom-nav button.is-selected span{
  background:#ff7597;color:#fff;
  box-shadow:0 3px 0 #db6a89;
}
.bottom-nav .nav-home{
  background:transparent;border:0;border-radius:0;
  height:auto;
}

/* ── 关卡内页（game-screen）保留并适配新配色 ───────────────────────── */
.game-screen{
  background:linear-gradient(180deg,#eaf6fc 0%,#d8edf7 100%);
}
.game-header{padding:4px 4px}
.game-header .round-button{background:rgba(255,255,255,.96);border:3px solid #fff;outline:2px solid #b8c8e0;color:#39415d;box-shadow:0 4px 0 rgba(91,128,156,.14)}
.back-button{background:#7bd4cf!important;color:#fff!important;border-color:#fff!important;outline:2px solid #5cb1ac!important;box-shadow:0 4px 0 #4a9d97!important}
.case-title small{color:#ed738e}
.case-title h2{color:#303653}
.case-title::before{content:"✦";margin-right:6px;color:#ffc657}
.case-title::after{content:"✦";margin-left:6px;color:#ffc657}
.status-row{gap:8px}
.status-pill{border:3px solid #fff;outline:2px solid #b8c8e0;box-shadow:0 3px 0 rgba(133,180,201,.18);color:#3a4a6b;background:rgba(255,255,255,.94)}
.status-pill.hearts{background:#ffe3eb}
.status-pill.timer{background:#fff5cf}
.status-pill.clues{background:#dff4ef}
.status-pill b{color:#303653}
.progress-dots{gap:7px}
.progress-dots i{width:22px;height:12px;border:3px solid #fff;outline:1.5px solid #d1a25c;background:#ffd77a;box-shadow:0 2px 0 rgba(176,123,68,.14)}
.progress-dots i.is-found{background:#88d8a3;outline-color:#64a87b;border-color:#fff;box-shadow:0 0 0 3px rgba(142,219,168,.2)}
.picture-pair{
  border:4px solid #7bd4cf;outline:3px solid #fff;border-radius:22px;
  background:#7bd4cf;
  box-shadow:0 6px 0 rgba(91,162,171,.22),0 13px 25px rgba(91,162,171,.18);
}
.picture-frame+.picture-frame{border-top:4px solid #7bd4cf}
.game-toolbar{
  background:rgba(255,255,255,.96);border-top:3px solid #b8c8e0;
  box-shadow:0 -7px 20px rgba(91,128,156,.10);
}
.tool-button{background:#fff;border:3px solid #fff;outline:2px solid #b8c8e0;border-radius:18px;box-shadow:0 4px 0 rgba(91,128,156,.14)}
.tool-button:nth-child(2){background:#fff5cf;outline-color:#d1a25c}
.tool-button small{color:#557e9e}
.square-tool{background:#7bd4cf;border:3px solid #fff;outline:2px solid #5cb1ac;box-shadow:0 5px 0 #4a9d97;color:#fff}
.square-tool:last-child{background:#ab91e9;outline-color:#9078d4;box-shadow:0 5px 0 #7c63c2}
.square-tool.is-on{background:#ff7597;outline-color:#db6a89;box-shadow:0 5px 0 #d6607d}
.last-three-callout{
  background:linear-gradient(90deg,#fff0f5,#fff5cf);
  border:3px solid #fff;outline:2px solid #ff7597;
  color:#875d71;box-shadow:0 3px 0 rgba(216,102,138,.16);
}
.last-three-callout small{color:#af7b91}
.observation-tip{
  margin:34px auto 0;display:flex;align-items:center;justify-content:center;gap:8px;
  width:max-content;max-width:90%;padding:8px 16px;border-radius:18px;
  background:rgba(255,255,255,.78);border:2px dashed #7bd4cf;
  color:#557e9e;font-size:10px;font-weight:800;letter-spacing:.5px;
}
.observation-tip i{font-style:normal;color:#ff7597}
.last-three-callout:not([hidden])+.observation-tip{display:none}

/* ── 图鉴（猫咪档案） ───────────────────────── */
.collection-screen{background:linear-gradient(180deg,#eaf6fc 0%,#d8edf7 100%)}
.collection-header>div{
  min-width:190px;padding:8px 24px 9px;border-radius:22px;
  background:linear-gradient(145deg,#d9f2fb,#e1d8ff);
  border:3px solid #fff;outline:2px solid #abc4d5;
  box-shadow:0 5px 0 rgba(133,180,201,.18);
}
.collection-header small{color:#557e9e}
.collection-header h2{color:#303653;font-size:25px}
.collection-summary{
  background:rgba(255,255,255,.94);
  border:3px solid #fff;outline:2px solid #abc4d5;border-radius:20px;
  box-shadow:0 5px 0 rgba(133,180,201,.13);
}
.collection-summary span{color:#557e9e;font-weight:700}
.collection-summary b{color:#ff7597}
.collection-summary div{background:#e0eaf5}
.collection-summary i{background:linear-gradient(90deg,#ff7597,#7bd4cf)}
.archive-grid{gap:14px}
.archive-card{
  border:3px solid #fff;outline:2px solid #abc4d5;border-radius:20px;
  background:#fff;box-shadow:0 5px 0 rgba(133,180,201,.15);
}
.archive-cover{
  border-radius:14px;
  background:linear-gradient(145deg,#d9f2fb,#e1d8ff);
}
.archive-card b{color:#303653}
.archive-card small{color:#6085a4}
.archive-card.is-completed{outline-color:#7bd4cf}
.archive-status{background:#88d8a3;border:3px solid #fff;box-shadow:0 2px 7px rgba(73,143,98,.3)}

/* ── 弹窗 / 设置 / 反馈 ───────────────────────── */
.modal-backdrop{background:rgba(63,95,140,.45)}
.game-modal{
  background:linear-gradient(180deg,#fff,#f0f7fc);
  border:4px solid #fff;outline:3px solid #abc4d5;border-radius:30px;
  box-shadow:0 9px 0 rgba(133,180,201,.22),0 25px 50px rgba(63,95,140,.26);
  overflow:visible;
}
.modal-badge{
  background:linear-gradient(145deg,#ff7597,#ff6e98);
  border:6px solid #fff;outline:3px solid #d55c7d;
  box-shadow:0 6px 0 rgba(213,92,125,.22);
}
.game-modal>small{color:#557e9e}
.game-modal h2{color:#303653}
.game-modal p{color:#557e9e}
.modal-cover{border:4px solid #fff;outline:2px solid #abc4d5;border-radius:18px}
.modal-stats{background:#f0f7fc}
.modal-stats span{background:rgba(255,255,255,.65)}
.modal-stats b{color:#303653}
.modal-stats small{color:#557e9e}
.modal-actions .primary,
.sheet-close,
.zoom-done{
  background:linear-gradient(135deg,#ff7597,#ff6e98);
  border:3px solid #fff;outline:2px solid #d55c7d;
  box-shadow:0 5px 0 #db6a89;color:#fff;
}
.modal-actions .reward{
  background:#fff5cf;border:3px solid #fff;outline:2px solid #d1a25c;
  box-shadow:0 5px 0 #d9a746;color:#303653;
}
.modal-actions .ghost{color:#557e9e}
.sheet-scrim{background:rgba(63,95,140,.45)}
.sheet>section{
  background:#fff;border-top:4px solid #abc4d5;border-radius:31px 31px 0 0;
}
.sheet h2{color:#303653}
.sheet label{border-color:#e0eaf5}
.sheet input:not([type=range]):checked{background:#7bd4cf}
.sheet .volume-row input{accent-color:#ff7597}
.ad-overlay{background:rgba(63,95,140,.55)}
.ad-card{background:#fff;border:4px solid #fff;outline:3px solid #abc4d5;border-radius:27px}
.ad-card>span{background:#e0eaf5;color:#557e9e}
.ad-progress{background:#e0eaf5}
.ad-progress i{background:linear-gradient(90deg,#ff7597,#ab91e9)}
.toast{
  background:rgba(63,95,140,.92);border:2px solid rgba(255,255,255,.65);
  box-shadow:0 5px 14px rgba(40,70,110,.2);color:#fff;
}
.zoom-viewer{background:#f0f7fc}
.zoom-viewer-header{background:#fff;border-bottom:3px solid #abc4d5}
.zoom-viewer-header small{color:#557e9e}
.zoom-viewer-header .round-button{background:#7bd4cf;color:#fff;border-color:#fff;outline:2px solid #5cb1ac}
.sight-feedback{
  background:linear-gradient(145deg,#ff7597,#ff6e98);
  border:4px solid #fff;color:#fff;
  box-shadow:0 6px 0 rgba(213,92,125,.22),0 0 28px rgba(255,150,180,.36);
}
.sight-feedback small,.sight-feedback span{color:#fff7ef}
.sight-feedback.sharp{background:linear-gradient(145deg,#7bd4cf,#5cb1ac)}
.sight-feedback.master{background:linear-gradient(145deg,#ab91e9,#9078d4)}
.sight-feedback.legend,.sight-feedback.final-clue{
  background:linear-gradient(145deg,#ffc657,#ff8d70);
  border-color:#fff;
  box-shadow:0 7px 0 rgba(205,111,104,.23),0 0 34px rgba(255,194,92,.55);
}
.milestone-feedback{
  background:linear-gradient(180deg,#fff5cf,#ffe0a5);
  border:4px solid #fff;outline:2px solid #d1a25c;color:#7d5d3c;
}
.milestone-feedback>span{background:#7bd4cf;box-shadow:0 0 0 2px #557e9e}
.milestone-feedback small{color:#557e9e}
.case-intro-card{
  background:linear-gradient(180deg,#fff,#f0f7fc);
  border:4px solid #fff;outline:3px solid #abc4d5;
  box-shadow:0 9px 0 rgba(133,180,201,.22),0 25px 50px rgba(63,95,140,.22);
}
.case-intro-card>small{color:#557e9e}
.case-intro-card h2{color:#303653}
.case-intro-card p{color:#557e9e}
.case-intro-card strong{color:#ff7597}

/* ── 响应式 ───────────────────────── */
@media (max-height:790px){
  .hero-banner{min-height:155px;padding:18px 120px 14px 18px}
  .hero-illustration{width:120px;height:120px}
  .hero-copy h1 span{font-size:32px}
  .hero-copy h1 .hero-sub{font-size:18px}
  .hero-copy h1 .hero-highlight{font-size:36px}
  .featured-cover{height:130px}
  .observation-tip{margin-top:14px;padding:6px 14px}
}
@media (max-width:400px){
  .hero-banner{padding-right:115px}
  .hero-illustration{width:130px;height:130px}
  .home-actions{gap:9px}
  .home-action{padding:11px 12px;min-height:76px}
  .home-action b{font-size:13px}
  .home-action small{font-size:9px}
  .collection-header>div{min-width:165px;padding-left:15px;padding-right:15px}
  .featured-cover{height:130px}
  .sticky-note{width:70px;font-size:8px}
}