/* ===================================
FILE: /media/spin/soup/soup-spin.css
UPDATE: 20260227-STABLE-BASE
- 以 spin2meal 為視覺基準
- 強制修正藍色連結與 Aside 掉落
====================================== */

:root {
  --bg: #120c08; --bg2: #2a1a12; --panel: rgba(42, 26, 18, .70);
  --line: rgba(255, 255, 255, .10); --text: #ffffff; --muted: #d7c8b7;
  --accent: #c29059; --gold1: #ffd57a; --gold2: #f2a51a; --gold3: #c98712;
  --r: 18px;
}

/* 🛑 強制封殺藍色連結與底線 */
html body a, html body a:visited {
  color: var(--gold2) !important;
  text-decoration: none !important;
}
html body a:hover { color: var(--gold1) !important; }

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  background: radial-gradient(900px 420px at 20% 10%, rgba(194, 144, 89, .20), transparent 60%), linear-gradient(180deg, var(--bg2), var(--bg));
  color:var(--text);
}

.accent{color:var(--accent) !important}
.shell{max-width:1100px;margin:0 auto;padding:14px 14px 30px}

/* HEADER */
.header{margin-bottom:10px}
.toprow{ display:grid; grid-template-columns: 1fr auto; gap:14px; align-items:start; background:rgba(255, 255, 255, .05); border:1px solid var(--line); border-radius:var(--r); padding:14px; }
.right .happy{ width: 150px; aspect-ratio: 1/1; object-fit: contain; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .10); display: block; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.title{margin:10px 0 8px;font-size:34px;letter-spacing:.4px; color:var(--text)}

/* 🛑 核心佈局：確保並列不掉落 */
.layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px !important; 
  gap: 16px !important;
  align-items: start !important;
}
@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr !important; }
}

.main, .aside{ background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }

/* 2x2 GRID */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.card{border:1px solid rgba(255,255,255,.08); border-radius:var(--r); overflow:hidden; background:rgba(255,255,255,.03); position:relative}
.keep{position:absolute; top:10px; right:10px; z-index:3; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,0.5); color:#fff; font-size:12px; cursor:pointer; border:none; font-weight:900}
.imgwrap{position:relative; aspect-ratio:1/1; background:rgba(0,0,0,.18)}
.img{width:100%; height:100%; object-fit:cover; display:block}
.meta{padding:10px 12px}
.name{font-size:16px; font-weight:900; line-height:1.25; min-height:40px; color:var(--text)}

/* 🛑 結果清單修正 (消除點點與排版) */
html body ul.result {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 10px !important;
}
html body ul.result li {
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  background: rgba(255,255,255,0.03) !important;
  list-style-type: none !important; 
}
.result img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }

/* 按鈕樣式 (Gold Theme) */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,0.04); color:var(--text) !important; font-weight:800; cursor:pointer}
.btn.primary, .btn.big{ background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 55%, var(--gold3) 100%); border: none; color: #2b1408 !important; font-weight: 900; }
.btn.big{width:100%}

/* 🛑 強制隱藏湯類選單與導航 */
html body .filter-wrap, html body .filter-body, html body #jsFx, .fno1-nav, .nav { display: none !important; }

.share-section{margin-top:20px; padding:15px; background:rgba(255,255,255,0.05); border-radius:12px}
.share-btns{display:flex; gap:10px; margin-top:10px}
.share-btn{padding:10px 14px; border-radius:12px; color:#fff !important; font-weight:bold; font-size:14px; text-decoration:none; display:inline-flex; align-items:center}
.btn-wa{background:#25d366}
.btn-fb{background:#1877f2}
.btn-cp{background:#ffffff; color:#333 !important}