/* ══════════════════════════════════════════
   柚貓餅 Web · main.css
   ══════════════════════════════════════════ */
:root {
  --o1: #FF8C38; --o2: #FFB870; --o3: #C85800;
  --bg: #FEFCF7; --pc: #FFECD8; --br: #3C2010; --brl: #8A5C30;
  --gd: #FFD850; --gd2: #FFAA20; --sh: rgba(60,30,8,.10);
  --r: 16px; --rl: 26px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans TC', sans-serif;
  background: var(--bg); color: var(--br);
  overflow-x: hidden; padding-top: 62px;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #FFF4E0; }
::-webkit-scrollbar-thumb { background: var(--o1); border-radius: 6px; }

/* ── 手機選單 ── */
.hamburger { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--br); padding:4px 8px; }
@media(max-width:900px) { .hamburger { display:block; } }

.mobile-menu {
  display:none; position:fixed; top:62px; left:0; right:0; z-index:9998;
  background:rgba(254,252,247,.98); backdrop-filter:blur(18px);
  border-bottom:1.5px solid var(--pc);
  flex-direction:column; padding:.8rem 1rem;
  box-shadow:0 8px 24px var(--sh);
}
.mobile-menu.on { display:flex; }
.mob-item {
  padding:12px 14px; font-family:'Noto Sans TC',sans-serif; font-size:.9rem;
  color:var(--br); text-decoration:none; border-radius:12px;
  border:none; background:none; text-align:left; cursor:pointer;
  transition:background .15s;
}
.mob-item:hover { background:var(--pc); }
.mob-login { color:var(--o1); font-weight:700; width:100%; }
.mob-user { padding:10px 14px; font-size:.82rem; color:var(--brl); font-weight:700; }

/* ── NAV ── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 62px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
  background: rgba(254,252,247,.97); backdrop-filter: blur(18px);
  border-bottom: 1.5px solid var(--pc);
  box-shadow: 0 2px 16px var(--sh);
}
.logo {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: 'Mochiy Pop One', sans-serif; font-size: 1.3rem; color: var(--o3);
}
.logo img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--o2); }
.navl { display: flex; align-items: center; gap: 4px; list-style: none; }
.navl a {
  padding: 6px 12px; border-radius: 12px;
  font-family: 'Noto Sans TC', sans-serif; font-size: .76rem; font-weight: 700;
  color: var(--brl); text-decoration: none; white-space: nowrap; transition: all .15s;
}
.navl a:hover { background: var(--pc); color: var(--o3); }
.navl a.on  { background: var(--o1); color: #fff; }
@media(max-width: 600px) { .navl { display: none; } }

/* ── HERO ── */
.hero {
  margin-top: -62px;
  width: 100%; height: 100vh; min-height: 500px;
  position: relative; overflow: hidden;
  background: url('../images/hero_bg.jpg') center/cover no-repeat;
}
.hero-text {
  position: absolute; left: 22%; top: 50%; transform: translateY(-55%);
  width: 360px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-start;
}
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,220,100,.88); color: #5A2800;
  font-size: .72rem; font-weight: 700; letter-spacing: .5px;
  padding: 5px 14px; border-radius: 20px; margin-bottom: 1.1rem;
  box-shadow: 0 2px 12px rgba(180,80,0,.22);
}
.hero-text h1 {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: clamp(2rem, 2.8vw, 2.8rem); line-height: 1.3; color: #fff; margin-bottom: .7rem;
  text-shadow: 0 2px 12px rgba(160,60,0,.6), 2px 2px 0 rgba(160,60,0,.25);
}
.hero-text p {
  font-size: .88rem; color: #fff; line-height: 1.88; margin-bottom: 1.6rem; font-weight: 500;
  text-shadow: 0 2px 8px rgba(140,50,0,.55);
}
.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg,#FF7A1A,#C85000); color: #fff;
  border: 2px solid rgba(255,255,255,.35); padding: 13px 28px; border-radius: 50px;
  font-family: 'Noto Sans TC', sans-serif; font-weight: 900; font-size: .92rem;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(180,60,0,.45);
  transition: all .2s;
}
.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(180,60,0,.55); color: #fff; }
.bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 46px;
  background: linear-gradient(135deg,#E87820,#C85000);
  display: flex; justify-content: center; align-items: center; gap: 2.4rem; z-index: 5; flex-wrap: wrap;
}
.bottom-item { color: #fff; font-size: .77rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.paw-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.paw-bg span { position: absolute; opacity: .05; animation: pf 10s ease-in-out infinite; }
@keyframes pf { 0%,100% { transform: translateY(0)rotate(-5deg); } 50% { transform: translateY(-18px)rotate(10deg); } }

/* ── PAGE ── */
.page-inner { max-width: 680px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.page-head { margin-bottom: 2rem; }
.page-head h2 {
  font-family: 'Mochiy Pop One', sans-serif; font-size: 1.9rem; color: var(--br);
  display: flex; align-items: center; gap: 10px;
}
.bar { width: 46px; height: 4px; background: linear-gradient(to right,var(--o1),var(--gd)); border-radius: 4px; margin: .45rem 0 .6rem; }
.sub { font-size: .85rem; color: var(--brl); }

/* ── UPLOAD CARD ── */
.upload-card {
  background: #fff; border-radius: var(--rl); padding: 2rem;
  border: 2px solid var(--pc); box-shadow: 0 4px 24px var(--sh);
}
.upload-card h3 {
  font-family: 'Mochiy Pop One', sans-serif; font-size: 1.1rem; color: var(--br);
  margin-bottom: 1.1rem;
}
.rules-box {
  background: #FFF8F0; border: 1px solid var(--pc); border-radius: 10px;
  padding: 12px 16px; font-size: .78rem; color: var(--brl); line-height: 1.9;
  margin-bottom: 1.4rem;
}
.rules-box strong { color: var(--o1); }

/* ── FIELD ── */
.field { margin-bottom: 1.2rem; }
.field label {
  display: block; font-size: .74rem; font-weight: 700; color: var(--brl);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
.field input[type=text] {
  width: 100%; padding: 11px 14px;
  border: 2px solid var(--pc); border-radius: 11px;
  font-family: 'Noto Sans TC', sans-serif; font-size: .9rem; color: var(--br);
  background: var(--bg); outline: none; transition: border-color .15s;
}
.field input[type=text]:focus { border-color: var(--o1); background: #fff; }

/* ── DROP ZONE ── */
.drop-zone {
  border: 2px dashed var(--pc); border-radius: 14px;
  padding: 28px 16px; text-align: center; cursor: pointer;
  transition: all .2s; position: relative;
  background: #fff; min-height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.drop-zone:hover, .drop-zone.drag { border-color: var(--o1); background: var(--bg); }
.drop-zone.has {
  border-style: solid; border-color: var(--o2); padding: 14px;
  min-height: unset; align-items: stretch;
}
.drop-zone > input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.drop-placeholder { pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.drop-icon  { font-size: 2.4rem; }
.drop-text  { font-size: .88rem; font-weight: 700; color: var(--br); }
.drop-hint  { font-size: .72rem; color: var(--brl); }

/* ── PREVIEW ── */
.preview-list { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.preview-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1.5px solid var(--pc); border-radius: 10px; padding: 8px 10px;
}
.preview-thumb {
  width: 70px; height: 54px; object-fit: cover; border-radius: 7px;
  flex-shrink: 0; border: 1px solid var(--pc); cursor: pointer; transition: transform .2s;
}
.preview-thumb:hover { transform: scale(1.05); }
.preview-info { flex: 1; min-width: 0; }
.preview-name { font-size: .76rem; font-weight: 700; color: var(--br); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-size { font-size: .68rem; color: var(--brl); margin-top: 2px; }
.preview-rm {
  background: #FEE; border: 1px solid #FCC; color: #C0392B;
  border-radius: 6px; width: 26px; height: 26px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; flex-shrink: 0; transition: background .15s;
}
.preview-rm:hover { background: #FDD; }
.add-more {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--bg); border: 1.5px dashed var(--o1); border-radius: 9px;
  padding: 10px; font-size: .8rem; font-weight: 700; color: var(--o1);
  cursor: pointer; position: relative; transition: background .15s;
}
.add-more:hover { background: var(--pc); }
.add-more input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.badge {
  display: inline-flex; align-items: center;
  background: var(--o1); color: #fff;
  font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  margin-left: 7px; vertical-align: middle;
}
.paste-hint {
  text-align: center; font-size: .72rem; color: var(--brl); margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.paste-hint kbd {
  background: #EEE; border: 1px solid #CCC; border-radius: 4px;
  padding: 1px 5px; font-size: .68rem; font-family: monospace; color: var(--br);
}

/* ── SUBMIT ── */
.submit-btn {
  width: 100%; padding: 13px; margin-top: .5rem;
  background: linear-gradient(135deg,var(--o1),#D06010); color: #fff; border: none;
  border-radius: 50px; font-family: 'Noto Sans TC', sans-serif; font-size: .92rem; font-weight: 900;
  cursor: pointer; letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(255,140,56,.38); transition: all .2s;
}
.submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(200,80,0,.45); }
.submit-btn:disabled { background: #CCC; cursor: not-allowed; box-shadow: none; }

/* ── RESULT MSG ── */
.result-msg { margin-top: 12px; padding: 11px 15px; border-radius: 10px; font-size: .84rem; font-weight: 600; text-align: center; display: none; }
.result-msg.ok  { background: #E8F5E9; color: #2E7D32; border: 1.5px solid #C8E6C9; display: block; }
.result-msg.err { background: #FFEBEE; color: #C62828; border: 1.5px solid #FFCDD2; display: block; }

/* ── LIGHTBOX ── */
.lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.85); z-index: 9999;
  align-items: center; justify-content: center;
}
.lightbox.on { display: flex; }
.lightbox img { max-width: 90vw; max-height: 88vh; border-radius: 12px; object-fit: contain; }
.lb-close {
  position: absolute; top: 18px; right: 22px; color: #fff;
  font-size: 1.6rem; cursor: pointer; background: none; border: none; opacity: .8;
}
.lb-close:hover { opacity: 1; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--gd2); color: #fff;
  padding: 9px 20px; border-radius: 30px;
  font-size: .82rem; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 9998;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── FOOTER ── */
footer {
  background: var(--br); color: rgba(255,247,230,.5);
  padding: 2rem 2rem; text-align: center; font-size: .76rem; line-height: 2.3;
}
.fl { font-family: 'Mochiy Pop One', sans-serif; font-size: 1.4rem; color: var(--o2); display: block; margin-bottom: .25rem; }

/* ── TOP BTN ── */
#topbtn {
  position: fixed; bottom: 22px; right: 20px; z-index: 900;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--o1); color: #fff; border: none; font-size: 1.1rem;
  cursor: pointer; box-shadow: 0 4px 14px rgba(255,140,56,.5);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; opacity: 0; pointer-events: none;
}
#topbtn.show { opacity: 1; pointer-events: auto; }
#topbtn:hover { transform: scale(1.1); background: var(--o3); }

/* ── SEP / IMGS (首頁圖片區塊) ── */
.sep {
  background: linear-gradient(135deg,#FFFAF0,#FFF4DC,#FFFAF0);
  padding: 2rem; text-align: center;
  border-top: 1.5px solid var(--pc); border-bottom: 1.5px solid var(--pc);
}
.sep h2 { font-family: 'Mochiy Pop One',sans-serif; font-size: 1.4rem; color: var(--br); margin-bottom: .4rem; }
.sep p  { font-size: .82rem; color: var(--brl); line-height: 1.8; }
.sep-bar { width: 44px; height: 4px; background: linear-gradient(to right,var(--o1),var(--gd)); border-radius: 4px; margin: .5rem auto 0; }
.imgs { padding: 2rem 5%; }
.imgs img { width: 100%; max-width: 1100px; margin: 0 auto; display: block; border-radius: 20px; box-shadow: 0 8px 32px var(--sh); }
.imgc { padding: 2rem 5%; display: flex; justify-content: center; }
.imgc img { max-width: 560px; width: 90%; border-radius: 20px; box-shadow: 0 10px 36px var(--sh); }
.paw-bg-section {
  background-color: #FFF5E8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg opacity='0.18' fill='%23FF9040'%3E%3Cellipse cx='40' cy='50' rx='12' ry='10'/%3E%3Cellipse cx='28' cy='38' rx='5.5' ry='4.5'/%3E%3Cellipse cx='40' cy='34' rx='5.5' ry='4.5'/%3E%3Cellipse cx='52' cy='38' rx='5.5' ry='4.5'/%3E%3Cellipse cx='23' cy='46' rx='4.5' ry='3.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ── LOGIN MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(40,15,0,.55); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.modal-overlay.on { display: flex; }
.modal {
  background: #fff; border-radius: var(--rl); padding: 2.5rem 2.2rem;
  width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(40,15,0,.3); border: 2px solid var(--pc);
  text-align: center; position: relative;
}
.modal-close {
  position: absolute; top: 1rem; right: 1.2rem;
  background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--brl);
}
.modal-icon { font-size: 3rem; margin-bottom: .5rem; }
.modal h2 { font-family: 'Mochiy Pop One',sans-serif; font-size: 1.5rem; color: var(--o3); margin-bottom: .2rem; }
.modal p  { font-size: .8rem; color: var(--brl); margin-bottom: 1.5rem; }
.modal-field { margin-bottom: .9rem; text-align: left; }
.modal-field label { display: block; font-size: .74rem; color: var(--brl); margin-bottom: 5px; }
.modal-field input {
  width: 100%; padding: 11px 14px;
  border: 2px solid var(--pc); border-radius: 11px;
  font-family: 'Noto Sans TC',sans-serif; font-size: .9rem; color: var(--br);
  background: var(--bg); outline: none; transition: border-color .15s;
}
.modal-field input:focus { border-color: var(--o1); background: #fff; }
.modal-err { font-size: .78rem; color: #C62828; min-height: 1rem; margin-bottom: .4rem; }
.modal-btn {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg,var(--o1),#D06010); color: #fff; border: none;
  border-radius: 50px; font-family: 'Noto Sans TC',sans-serif; font-size: .92rem;
  cursor: pointer; box-shadow: 0 4px 14px rgba(255,140,56,.38); transition: all .2s;
}
.modal-btn:hover:not(:disabled) { transform: translateY(-2px); }
.modal-btn:disabled { background: #CCC; cursor: not-allowed; }

/* ── NAV 登入狀態 ── */
.nav-login-btn {
  background: linear-gradient(135deg,var(--o1),#D06010);
  color: #fff; border: none; padding: 7px 16px; border-radius: 18px;
  font-family: 'Noto Sans TC',sans-serif; font-size: .74rem;
  cursor: pointer; box-shadow: 0 3px 10px rgba(255,140,56,.4);
}
.nav-username { font-size: .76rem; color: var(--brl); padding: 0 8px; }
.nav-logout   { font-size: .74rem; color: var(--brl); text-decoration: none; padding: 5px 8px; border-radius: 10px; }
.nav-logout:hover { background: var(--pc); color: var(--o3); }

/* ── 推文頁登入提示 ── */
.login-prompt {
  text-align: center; padding: 3rem 2rem;
  background: #fff; border-radius: var(--rl);
  border: 2px dashed var(--pc); box-shadow: 0 4px 22px var(--sh);
}
.login-prompt-icon { font-size: 3rem; margin-bottom: .8rem; }
.login-prompt-text { font-size: .95rem; color: var(--brl); margin-bottom: 1.3rem; }
.login-prompt-btn {
  background: linear-gradient(135deg,var(--o1),#D06010); color: #fff; border: none;
  padding: 11px 28px; border-radius: 50px;
  font-family: 'Noto Sans TC',sans-serif; font-size: .9rem;
  cursor: pointer; box-shadow: 0 4px 14px rgba(255,140,56,.38); transition: all .2s;
}
.login-prompt-btn:hover { transform: translateY(-2px); }

/* ── 已登入帳號顯示 ── */
.logged-as {
  font-size: .78rem; color: var(--brl);
  background: var(--pc); border-radius: 8px; padding: 6px 12px;
  margin-bottom: 1rem; display: inline-block;
}

/* ── 登入 Modal ── */
.modal-overlay { display:none; position:fixed; inset:0; z-index:9999; background:rgba(40,15,0,.55); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
.modal-overlay.on { display:flex; }
.modal { background:#fff; border-radius:var(--rl); padding:2.5rem 2rem; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(40,15,0,.3); border:2px solid var(--pc); text-align:center; position:relative; }
.modal-close { position:absolute; top:1rem; right:1.2rem; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--brl); }
.modal-close:hover { color:var(--o3); }
.modal-avatar { width:72px; height:72px; border-radius:50%; overflow:hidden; margin:0 auto .9rem; border:3px solid var(--o2); }
.modal-avatar img { width:100%; height:100%; object-fit:cover; }
.modal h2 { font-family:'Mochiy Pop One',sans-serif; font-size:1.5rem; color:var(--o3); margin-bottom:.2rem; }
.modal p { font-size:.8rem; color:var(--brl); margin-bottom:1.5rem; }
.fg { margin-bottom:.9rem; text-align:left; }
.fg label { font-size:.75rem; color:var(--brl); margin-bottom:4px; display:block; }
.fg input { width:100%; padding:10px 13px; border:2px solid var(--pc); border-radius:10px; font-family:'Noto Sans TC',sans-serif; font-size:.9rem; color:var(--br); background:var(--bg); outline:none; transition:border-color .15s; }
.fg input:focus { border-color:var(--o1); background:#fff; }
.modal-btn { width:100%; padding:12px; background:linear-gradient(135deg,var(--o1),#D06010); color:#fff; border:none; border-radius:50px; font-family:'Noto Sans TC',sans-serif; font-size:.9rem; cursor:pointer; box-shadow:0 4px 14px rgba(200,80,0,.35); transition:all .2s; margin-top:.3rem; }
.modal-btn:hover:not(:disabled) { transform:translateY(-2px); }
.modal-btn:disabled { background:#ccc; cursor:not-allowed; box-shadow:none; }
.login-err { font-size:.78rem; color:#C62828; min-height:1rem; margin:.3rem 0; }
.modal-foot { margin-top:1.1rem; font-size:.75rem; color:var(--brl); }
.modal-foot a { color:var(--o1); text-decoration:none; }
.ncta { background:linear-gradient(135deg,var(--o1),#D06010); color:#fff; padding:7px 17px; border-radius:18px; border:none; font-family:'Noto Sans TC',sans-serif; font-size:.74rem; cursor:pointer; box-shadow:0 3px 10px rgba(255,140,56,.4); transition:all .15s; }
.ncta:hover { opacity:.9; transform:scale(1.04); }

/* ── Nav 登入狀態 ── */
.nav-user { display:flex; align-items:center; gap:6px; }
.nav-username { font-size:.76rem; color:var(--o3); font-weight:700; padding:0 6px; }
.nav-logout { font-size:.72rem; color:var(--brl); }

/* ── 已登入帳號列 ── */
.logged-in-bar { background:var(--pc); border-radius:10px; padding:9px 14px; font-size:.82rem; color:var(--brl); margin-bottom:1.2rem; }
.logged-in-bar strong { color:var(--o3); }

/* ── 未登入提示 ── */
.login-prompt { text-align:center; padding:4rem 2rem; background:#fff; border-radius:var(--rl); border:2px solid var(--pc); box-shadow:0 4px 22px var(--sh); }
.lp-icon { font-size:3.5rem; margin-bottom:.8rem; }
.login-prompt h3 { font-family:'Mochiy Pop One',sans-serif; font-size:1.4rem; color:var(--br); margin-bottom:.5rem; }
.login-prompt p { font-size:.84rem; color:var(--brl); margin-bottom:1.8rem; }

/* ── 排行榜 ── */
.rank-tabs { display:flex; gap:7px; margin-bottom:1.5rem; flex-wrap:wrap; }
.rtab { padding:8px 18px; border-radius:16px; background:var(--pc); color:var(--brl); border:none; font-family:'Noto Sans TC',sans-serif; font-size:.82rem; cursor:pointer; transition:all .15s; }
.rtab.on { background:var(--o1); color:#fff; box-shadow:0 2px 10px rgba(255,140,56,.32); }
.rtab:hover:not(.on) { background:var(--o2); color:var(--br); }
.rtw { background:#fff; border-radius:var(--rl); overflow:hidden; box-shadow:0 4px 20px var(--sh); border:2px solid var(--pc); }
table { width:100%; border-collapse:collapse; }
th { background:var(--pc); padding:11px 16px; text-align:left; font-size:.78rem; color:var(--brl); }
td { padding:11px 16px; border-bottom:1px solid var(--pc); font-size:.88rem; vertical-align:top; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,225,170,.15); }
.rk { font-family:'Mochiy Pop One',sans-serif; font-size:1rem; }
.rank-name { font-size:.9rem; color:var(--br); width:50%; }
.rank-value { font-family:'Mochiy Pop One',sans-serif; color:var(--o1); font-size:.9rem; width:40%; word-break:break-all; text-align:right; }
.rank-loading { text-align:center; padding:2.5rem; color:var(--brl); font-size:.85rem; }
h1, h2, h3, h4 { font-weight: 400; }

/* 買賣區共用按鈕（加到 main.css 底部）*/
.mkt-btn{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border-radius:20px;font-family:'Noto Sans TC',sans-serif;font-size:.82rem;cursor:pointer;text-decoration:none;border:none;transition:all .18s;white-space:nowrap}
.mkt-btn-solid{background:linear-gradient(135deg,var(--o1),#D06010);color:#fff;box-shadow:0 3px 10px rgba(255,140,56,.3)}
.mkt-btn-solid:hover{opacity:.9;transform:translateY(-1px);color:#fff}
.mkt-btn-ghost{background:var(--pc);color:var(--brl)}
.mkt-btn-ghost:hover{background:var(--o2);color:var(--br)}
.mkt-btn-sm{padding:5px 13px;font-size:.76rem;border-radius:14px}
.mkt-btn-online{background:#E8F5E9;color:#2E7D32}
.mkt-btn-offline{background:#FFF0E0;color:#C85800}
.mkt-btn-danger{background:#FFEBEE;color:#C62828}
.mkt-btn-danger:hover{background:#FFCDD2}

.tweet-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 20px;
}

.tweet-link-btn {
  display: block;
  padding: 10px 16px;
  background: #fff5f0;
  border: 1.5px solid #f0ddd0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #ff7043;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, transform 0.12s;
}

.tweet-link-btn:hover {
  background: #ffe5d8;
  border-color: #ff7043;
  transform: translateY(-1px);
}
.copy-btn {
  width: 100%; padding: 11px; margin-bottom: 8px;
  background: linear-gradient(135deg, #43a047, #2e7d32); color: #fff; border: none;
  border-radius: 50px; font-family: 'Noto Sans TC', sans-serif; font-size: .88rem; font-weight: 900;
  cursor: pointer; box-shadow: 0 4px 14px rgba(67,160,71,.35); transition: all .2s;
}
.copy-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(46,125,50,.45); }
.copy-msg {
  display: none; text-align: center; font-size: .82rem; font-weight: 700;
  color: #2e7d32; background: #e8f5e9; border: 1.5px solid #c8e6c9;
  border-radius: 10px; padding: 9px; margin-bottom: 10px;
}

.fix-login-btn {
  background: none;
  border: 1.5px solid var(--o1);
  color: var(--o3);
  border-radius: 12px;
  font-size: .73rem;
  padding: 5px 10px;
  cursor: pointer;
  transition: all .15s;
}
.fix-login-btn:hover {
  background: var(--o1);
  color: #fff;
}