/* 貓貓谷 代碼查詢器 v1：版面沿用萌獸圖鑑（familiars-v1）的設計語言，所有樣式限定在 .mcode-app 內 */
.mcode-app{--mc-ink:#263f59;--mc-muted:#71859b;--mc-blue:#2778bc;--mc-line:#dfe8f1;--mc-bg:#f6f9fc;--mc-panel:#fff;--mc-soft:#ecf4fb;--mc-hl:#d9792b;--mc-cash:#c2559d;--mc-shadow:0 10px 24px #285c8b14;
  color:var(--mc-ink);background:var(--mc-bg);font-family:inherit;line-height:1.6;min-height:75vh;padding:0 0 40px;isolation:isolate}
html[data-meow-theme="dark"] .mcode-app{--mc-ink:#d5e2ef;--mc-muted:#8ba1b6;--mc-blue:#80b6e7;--mc-line:#2d4256;--mc-bg:#142434;--mc-panel:#1b2d3e;--mc-soft:#223b50;--mc-hl:#ffc46b;--mc-cash:#f29ad3;--mc-shadow:0 10px 24px #0000002e}
.mcode-app *{box-sizing:border-box}.mcode-app [hidden]{display:none!important}
.mcode-app :where(button,input,select){font-family:inherit;color:inherit;letter-spacing:inherit}
.mcode-app :where(button,select,label){cursor:pointer}
.mcode-app a{color:inherit;text-decoration:none}
.mcode-app :focus-visible{outline:3px solid #69ade1;outline-offset:3px}
.mcode-wrap{max-width:1248px;margin:0 auto;padding:26px 32px 0}
.mcode-breadcrumb{display:flex;align-items:center;gap:12px;color:var(--mc-muted);font-size:12px}
.mcode-breadcrumb a:hover{color:var(--mc-blue)}.mcode-breadcrumb>span:last-child{color:var(--mc-ink)}

/* 主視覺 */
.mcode-hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:center;padding:40px 0 34px}
.mcode-eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--mc-blue)}
.mcode-hero h1{margin:0;font-size:46px;line-height:1.2;letter-spacing:.045em;font-weight:700;color:var(--mc-ink)}
.mcode-hero h1 .dot{color:var(--mc-blue)}
.mcode-intro{margin:14px 0 18px;color:var(--mc-muted);font-size:15px;max-width:34em}
.mcode-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--mc-muted)}
.mcode-meta strong{color:var(--mc-ink);font-size:16px}
.mcode-meta .live{width:7px;height:7px;border-radius:50%;background:#4fc38a;box-shadow:0 0 0 4px #4fc38a26}
.mcode-meta .divider{width:1px;height:12px;background:var(--mc-line)}
.mcode-hero-art{position:relative;height:200px;border-radius:24px;border:1px solid var(--mc-line);background:radial-gradient(circle at 50% 45%,var(--mc-soft),var(--mc-panel));display:flex;align-items:center;justify-content:center;gap:28px;overflow:hidden}
html[data-meow-theme="dark"] .mcode-hero-art{background:radial-gradient(#24445d,#1c3347)}
.mcode-hero-art img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 10px #0003);animation:mcode-float 4.8s ease-in-out infinite}
.mcode-hero-art img:nth-child(2){width:84px;height:84px;animation-delay:-1.6s}
.mcode-hero-art img:nth-child(3){animation-delay:-3.2s}
.mcode-hero-art .label{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.2em;color:var(--mc-muted)}
@keyframes mcode-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 搜尋與篩選 */
.mcode-toolbar{background:var(--mc-panel);border:1px solid var(--mc-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:8px;z-index:5;box-shadow:var(--mc-shadow)}
.mcode-search-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mcode-search{position:relative;display:flex;align-items:center;gap:10px;flex:1;min-width:220px;background:var(--mc-bg);border:1px solid var(--mc-line);border-radius:10px;padding:0 12px;height:46px;color:var(--mc-muted)}
.mcode-search:focus-within{border-color:var(--mc-blue)}
.mcode-search svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.mcode-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;font-size:15px;color:var(--mc-ink)}
.mcode-search input::placeholder{color:var(--mc-muted)}
.mcode-search kbd{font:inherit;font-size:11px;border:1px solid var(--mc-line);border-radius:5px;padding:0 6px;color:var(--mc-muted)}
.mcode-clear{border:0;background:none;padding:4px;color:var(--mc-muted);font-size:18px;line-height:1}
.mcode-search input:placeholder-shown~.mcode-clear{display:none}
.mcode-filter{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mc-muted)}
.mcode-filter select{background:var(--mc-bg);border:1px solid var(--mc-line);border-radius:8px;padding:9px 10px;font-size:13px;color:var(--mc-ink);max-width:220px}
.mcode-switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mc-ink);user-select:none}
.mcode-switch input{appearance:none;width:34px;height:20px;border-radius:20px;background:var(--mc-line);position:relative;transition:background .15s;margin:0}
.mcode-switch input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.mcode-switch input:checked{background:var(--mc-cash)}.mcode-switch input:checked::after{transform:translateX(14px)}
.mcode-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.mcode-tab{flex:none;display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--mc-line);background:transparent;border-radius:999px;padding:6px 14px;font-size:13px;color:var(--mc-muted);transition:all .15s}
.mcode-tab small{font-size:11px;opacity:.75}
.mcode-tab:hover{color:var(--mc-ink);border-color:var(--mc-blue)}
.mcode-tab.is-active{background:var(--mc-blue);border-color:var(--mc-blue);color:#fff}
html[data-meow-theme="dark"] .mcode-tab.is-active{color:#10202f}
.mcode-tab.is-loading{opacity:.55}
.mcode-load{height:3px;border-radius:3px;background:var(--mc-line);overflow:hidden}
.mcode-load::after{content:"";display:block;height:100%;width:var(--p,5%);background:var(--mc-blue);transition:width .25s}

/* 結果 */
.mcode-count{margin:22px 2px 12px;font-size:13px;color:var(--mc-muted)}
.mcode-count strong{color:var(--mc-ink);font-size:15px}
.mcode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.mcode-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--mc-panel);border:1px solid var(--mc-line);border-radius:15px;padding:12px 12px 10px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.mcode-card:hover,.mcode-card:focus-visible{transform:translateY(-3px);border-color:var(--mc-blue);box-shadow:var(--mc-shadow)}
.mcode-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:20px}
.mcode-tag{margin:0;font-size:11px;color:var(--mc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcode-badge{flex:none;font-size:10px;font-weight:700;color:var(--mc-cash);border:1px solid currentColor;border-radius:999px;padding:0 7px;line-height:17px}
.mcode-card-art{display:flex;align-items:center;justify-content:center;height:86px;margin:6px 0;border-radius:11px;background:var(--mc-bg)}
.mcode-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;color:var(--mc-muted)}
.mcode-icon img{max-width:100%;max-height:100%;width:auto;height:auto;image-rendering:pixelated;transform:scale(1.25)}
.mcode-icon.is-empty svg{width:34px;height:34px;opacity:.65}
.mcode-icon.is-big{width:96px;height:96px}.mcode-icon.is-big img{transform:scale(2)}.mcode-icon.is-big.is-empty svg{width:56px;height:56px}
.mcode-card-name{margin:2px 0 0;font-size:14px;font-weight:700;line-height:1.4;color:var(--mc-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.mcode-card-sub{margin:0;font-size:11px;color:var(--mc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcode-card-id{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:8px;border-top:1px dashed var(--mc-line)}
.mcode-card-id code,.mcode-detail-id code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--mc-blue);letter-spacing:.04em}
.mcode-copy{border:0;background:transparent;padding:4px;border-radius:6px;color:var(--mc-muted);display:inline-flex}
.mcode-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.mcode-copy:hover{background:var(--mc-soft);color:var(--mc-blue)}
.mcode-copy.is-copied{color:#4fc38a}
.mcode-copy.is-copied svg{display:none}.mcode-copy.is-copied::after{content:"✓";font-size:14px;line-height:16px;width:16px;text-align:center}
.mcode-more{display:block;margin:22px auto 0;border:1px solid var(--mc-line);background:var(--mc-panel);border-radius:10px;padding:11px 26px;font-size:13px;color:var(--mc-ink)}
.mcode-more:hover{border-color:var(--mc-blue);color:var(--mc-blue)}
.mcode-empty,.mcode-error{margin:30px 0;text-align:center;color:var(--mc-muted);font-size:14px;border:1px dashed var(--mc-line);border-radius:15px;padding:36px 16px}

/* 詳細資料 */
.mcode-detail{position:fixed;inset:0;margin:auto;width:min(640px,calc(100vw - 32px));height:fit-content;max-height:min(86vh,860px);border:1px solid var(--mc-line);border-radius:20px;padding:0;background:var(--mc-panel);color:var(--mc-ink);box-shadow:0 24px 60px #0006;overflow:hidden}
.mcode-detail::backdrop{background:#0b141ecc;backdrop-filter:blur(2px)}
.mcode-detail[open]{display:flex;flex-direction:column}
.mcode-detail-scroll{overflow-y:auto;padding:26px 26px 22px;overscroll-behavior:contain}
.mcode-detail-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--mc-line);background:var(--mc-panel);font-size:18px;line-height:1;color:var(--mc-muted);z-index:2}
.mcode-detail-close:hover{color:var(--mc-ink);border-color:var(--mc-blue)}
.mcode-detail-head{display:flex;gap:20px;align-items:center;padding-right:30px}
.mcode-detail-art{flex:none;width:128px;height:128px;border-radius:18px;background:var(--mc-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--mc-line)}
.mcode-detail-title h2{margin:2px 0 4px;font-size:24px;line-height:1.3;color:var(--mc-ink)}
.mcode-detail-id{margin:0;font-size:13px;color:var(--mc-muted)}
.mcode-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px}
.mcode-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--mc-line);background:var(--mc-bg);border-radius:9px;padding:10px 18px;font-size:13px;color:var(--mc-ink);transition:all .15s}
.mcode-btn:hover{border-color:var(--mc-blue);color:var(--mc-blue)}
.mcode-btn.is-primary{background:var(--mc-blue);border-color:var(--mc-blue);color:#fff}
html[data-meow-theme="dark"] .mcode-btn.is-primary{color:#10202f}
.mcode-btn.is-primary:hover{filter:brightness(1.08);color:#fff}
html[data-meow-theme="dark"] .mcode-btn.is-primary:hover{color:#10202f}
.mcode-btn.is-copied{border-color:#4fc38a;color:#4fc38a}
.mcode-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--mc-line);font-size:14px}
.mcode-section h3{margin:0 0 10px;font-size:13px;letter-spacing:.08em;color:var(--mc-blue)}
.mcode-section p{margin:0 0 8px}
.mcode-hl{font-style:normal;color:var(--mc-hl);font-weight:700}
.mcode-muted{color:var(--mc-muted)}.mcode-small{font-size:12px;margin-top:6px!important}
.mcode-quote{color:var(--mc-muted);font-size:13px}
.mcode-stat-list{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.mcode-stat-list dt{color:var(--mc-muted);font-size:13px}.mcode-stat-list dd{margin:0;font-weight:700}
.mcode-auction-line{margin:0 0 8px}.mcode-auction-line strong{color:var(--mc-hl)}
.mcode-deals{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.mcode-deals li{display:grid;grid-template-columns:56px 70px 1fr;gap:8px;font-size:13px;padding:6px 10px;border-radius:8px;background:var(--mc-bg)}
.mcode-deals li strong{text-align:right}
html.mcode-locked{overflow:hidden}

/* 平板／折疊手機內螢幕 */
@media (max-width:980px){
  .mcode-hero{grid-template-columns:1fr;gap:22px;padding:26px 0 24px}
  .mcode-hero-art{display:none}
  .mcode-hero h1{font-size:38px}
}
/* 手機（含 iPhone 外螢幕） */
@media (max-width:640px){
  .mcode-wrap{padding:16px 16px 0}
  .mcode-hero{padding:18px 0 18px}
  .mcode-hero-art{display:none}
  .mcode-hero h1{font-size:32px}
  .mcode-intro{font-size:14px;margin:10px 0 12px}
  .mcode-toolbar{padding:12px;border-radius:14px;gap:10px;top:4px}
  .mcode-search{height:44px;min-width:0;flex-basis:100%}
  .mcode-search kbd{display:none}
  .mcode-search input{font-size:16px}
  .mcode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mcode-card{padding:10px 10px 8px;border-radius:12px}
  .mcode-card-art{height:72px}
  .mcode-card-name{font-size:13px}
  .mcode-detail{width:100vw;max-width:100vw;max-height:88vh;margin:auto 0 0;inset:auto 0 0 0;border-radius:20px 20px 0 0;border-bottom:0}
  .mcode-detail-scroll{padding:22px 18px calc(18px + env(safe-area-inset-bottom))}
  .mcode-detail-head{gap:14px}
  .mcode-detail-art{width:96px;height:96px}
  .mcode-icon.is-big{width:72px;height:72px}.mcode-icon.is-big img{transform:scale(1.6)}
  .mcode-detail-title h2{font-size:20px}
  .mcode-actions .mcode-btn{flex:1 1 calc(50% - 10px)}
}
@media (max-width:340px){.mcode-grid{grid-template-columns:1fr 1fr;gap:8px}.mcode-card-art{height:62px}}
@media (prefers-reduced-motion:reduce){.mcode-hero-art img{animation:none}.mcode-card,.mcode-tab{transition:none}.mcode-card:hover{transform:none}}