/* 依賴的主題變數：--bg / --card / --line / --chip / --muted / --text / --accent
   宿主頁若沒有定義（例如 read.php 原本用的是另一套命名），var() 會解析失敗，
   background 直接變透明，彈窗就會跟底下的頁面疊在一起。
   宿主頁請補上這幾個別名；本檔另在關鍵不透明面板上加了 fallback 當第二道保險。 */
/* Omni 小說館 — 讀者帳號 / 儲值 UI（沿用頁面的 --bg / --card / --line 等主題變數，自動跟隨深淺色） */

/* ── 頁首帳號區 ── */
/* 這一格塞了「閱讀券／通知／帳號」三個元素。預設 display:block 時
   inline-flex 的鈴鐺跟 block 的帳號膠囊會分成兩排，把整個頁首撐成兩層。 */
#ra-account{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* 閱讀頁沒有 .hbtn（那是小說館首頁／排行榜／作者頁各自 inline 的），
   所以這顆按鈕的樣式得由本檔負責，否則在閱讀頁會完全沒有樣式。
   數值刻意與各頁的 .hbtn 一致，讓同一顆按鈕在四個頁面長得一樣。 */
.ra-login-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:44px;padding:0 18px;border-radius:22px;white-space:nowrap;
    border:1px solid var(--line,rgba(127,127,127,.18));background:var(--card,#fff);color:var(--text);
    font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
    box-shadow:none;transition:border-color .18s,color .18s;}
.ra-login-btn:hover{border-color:var(--accent);color:var(--accent);}

.ra-user{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:22px;border:1px solid var(--line,rgba(127,127,127,.18));background:var(--card,#fff);cursor:pointer;transition:border-color .18s;}
.ra-user:hover{border-color:var(--accent);}
.ra-user img,.ra-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;object-fit:cover;}
.ra-avatar{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:900;font-size:14px;}
.ra-uinfo{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.ra-uinfo b{font-size:12.5px;font-weight:800;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;}
.ra-uinfo span{font-size:10px;color:var(--muted);white-space:nowrap;}

/* ── 彈窗 ── */
.ra-modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px;}
.ra-modal.show{display:flex;}
.ra-box{width:100%;max-width:440px;max-height:88vh;background:var(--card,#fff);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.3);}
.ra-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);flex-shrink:0;}
.ra-head h3{font-size:17px;font-weight:800;}
.ra-x{border:none;background:var(--chip);color:var(--muted);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;}
.ra-x:hover{color:var(--text);}
.ra-body{padding:18px 20px 22px;overflow-y:auto;}
.ra-loading{padding:46px 0;text-align:center;color:var(--muted);font-size:13px;}

/* ── 分頁 ── */
.ra-tabs{display:flex;gap:5px;padding:4px;border-radius:12px;background:var(--chip);margin-bottom:16px;}
.ra-tab{flex:1;text-align:center;padding:8px 10px;border-radius:9px;font-size:13px;font-weight:800;color:var(--muted);cursor:pointer;transition:all .16s;white-space:nowrap;}
.ra-tab.on{background:var(--accent);color:#fff;}

/* ── 表單 ── */
.ra-field{margin-bottom:11px;}
.ra-field label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:5px;letter-spacing:.02em;}
.ra-field input,.ra-resume input,.ra-resume select{width:100%;padding:10px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;outline:none;}
.ra-field input:focus{border-color:var(--accent);}
.ra-btn{padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .16s;}
.ra-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.ra-btn:disabled{opacity:.45;cursor:not-allowed;}
.ra-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.ra-btn.primary:hover{opacity:.9;color:#fff;}
.ra-btn.danger{color:#ef4444;border-color:rgba(239,68,68,.35);}
.ra-btn.block{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;margin-top:12px;font-size:14px;text-decoration:none;}
.ra-btn.google{background:var(--card);}
.ra-or{display:flex;align-items:center;gap:10px;margin:14px 0 4px;color:var(--muted);font-size:11px;}
.ra-or::before,.ra-or::after{content:'';flex:1;height:1px;background:var(--line);}

/* ── 訊息 ── */
.ra-msg{font-size:12px;color:var(--muted);line-height:1.8;margin-top:10px;}
.ra-msg.small{font-size:11px;}
.ra-msg.ok{color:#22c55e;}
.ra-msg.err{color:#ef4444;}
.ra-msg.warn{padding:11px 13px;border-radius:10px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.26);color:var(--text);}
.ra-note{font-size:11.5px;color:var(--muted);line-height:1.8;margin-bottom:14px;padding:9px 12px;border-radius:9px;background:var(--chip);}
.ra-fine{font-size:10.5px;color:var(--muted);line-height:1.8;margin-top:12px;}
.ra-fine a,.ra-msg a,.ra-ordmeta a{color:var(--accent);text-decoration:none;}
.ra-sec{font-size:12px;font-weight:800;margin:16px 0 8px;}
.ra-sec2{display:flex;align-items:center;justify-content:space-between;margin:16px 0 9px;font-size:12px;font-weight:800;}
.ra-warn{padding:10px 13px;border-radius:10px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.28);font-size:12px;margin-bottom:13px;cursor:pointer;}

/* ── Toast ── */
.ra-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:3000;padding:11px 20px;border-radius:12px;background:#1a1d26;color:#fff;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:all .25s;box-shadow:0 10px 30px rgba(0,0,0,.28);}
.ra-toast.show{opacity:1;transform:translate(-50%,0);}
.ra-toast.ok{background:#22c55e;} .ra-toast.err{background:#ef4444;}

/* ── 我的帳號 ── */
.ra-profile{display:flex;gap:14px;align-items:center;margin-bottom:16px;}
.ra-pavatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.ra-pavatar.txt{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:24px;font-weight:900;}
.ra-pname{font-size:17px;font-weight:900;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ra-pmail{font-size:12px;color:var(--muted);margin-top:2px;}
.ra-pjoin{font-size:10.5px;color:var(--muted);margin-top:2px;}
.ra-badge{font-size:10px;font-weight:900;padding:2px 9px;border-radius:6px;background:var(--chip);color:var(--muted);}
.ra-badge.t-pro{background:linear-gradient(135deg,#FF9500,#FF6B00);color:#fff;}
.ra-badge.t-ultra{background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff;}
.ra-badge.t-super{background:linear-gradient(135deg,#06b6d4,#3b82f6);color:#fff;}
.ra-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin-bottom:14px;}
.ra-stat{padding:11px 8px;border-radius:11px;background:var(--chip);text-align:center;}
.ra-stat b{display:block;font-size:18px;font-weight:900;}
.ra-stat span{font-size:10px;color:var(--muted);}
.ra-energy{padding:14px;border-radius:13px;background:linear-gradient(135deg,rgba(255,149,0,.09),rgba(255,204,0,.05));border:1px solid rgba(255,149,0,.24);}
.ra-erow{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);font-weight:700;}
.ra-erow b{font-size:21px;font-weight:900;color:#FF9500;}
.ra-ebar{height:5px;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden;margin:7px 0 6px;}
.ra-ebar i{display:block;height:100%;background:linear-gradient(90deg,#FF9500,#FFCC00);}
.ra-efoot{font-size:10.5px;color:var(--muted);}
.ra-next{margin-top:9px;padding:8px 11px;border-radius:9px;background:rgba(59,130,246,.09);font-size:11.5px;color:var(--accent);font-weight:700;}
.ra-erow2{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.ra-erow2 .ra-btn{flex:1;min-width:120px;}
.ra-links{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.ra-link{flex:1;min-width:140px;text-align:center;padding:11px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit;}
.ra-link:hover{border-color:var(--accent);color:var(--accent);}
.ra-link.danger{flex:0 0 auto;min-width:86px;color:#ef4444;}

/* ── 書架 ── */
.ra-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.ra-scard{display:flex;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--bg);text-decoration:none;color:var(--text);transition:border-color .16s;}
.ra-scard:hover{border-color:var(--accent);}
.ra-scover{width:48px;height:66px;border-radius:7px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;position:relative;overflow:hidden;}
.ra-scover img{width:100%;height:100%;object-fit:cover;}
.ra-supd{position:absolute;top:2px;left:2px;background:#ef4444;color:#fff;font-size:8px;font-weight:900;padding:1px 4px;border-radius:4px;}
.ra-sinfo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;}
.ra-sinfo b{font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ra-sinfo span{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ra-sbar{height:4px;border-radius:2px;background:rgba(0,0,0,.08);overflow:hidden;margin:2px 0;}
.ra-sbar i{display:block;height:100%;background:var(--accent);}
.ra-sprog{font-size:10px;color:var(--muted);}

/* ── 足跡 ── */
.ra-act{padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg);margin-bottom:8px;}
.ra-actop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;margin-bottom:5px;}
.ra-actop a{font-weight:800;color:var(--accent);text-decoration:none;font-size:12.5px;}
.ra-actop span{color:var(--muted);}
.ra-act p{font-size:12.5px;line-height:1.75;white-space:pre-wrap;word-break:break-word;}
.ra-pending{font-size:10px;font-weight:800;color:#f59e0b;background:rgba(245,158,11,.12);padding:1px 7px;border-radius:5px;margin-left:6px;}
.ra-react{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 12px;border-radius:9px;background:var(--bg);border:1px solid var(--line);margin-bottom:6px;font-size:12px;}
.ra-react a{color:var(--accent);text-decoration:none;font-weight:700;}
.ra-react em{font-style:normal;color:var(--muted);font-size:11px;}
.ra-react time{margin-left:auto;font-size:10px;color:var(--muted);}

/* ── 作品 ── */
.ra-work{padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg);margin-bottom:8px;}
.ra-work a{color:var(--text);text-decoration:none;}
.ra-work a:hover b{color:var(--accent);}
.ra-wmeta{font-size:10.5px;color:var(--muted);margin-top:4px;}

/* ── 空狀態 ── */
.ra-empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:30px;}
.ra-empty.small{padding:22px;font-size:12px;}
.ra-empty p{font-size:13.5px;font-weight:800;color:var(--text);margin:8px 0 4px;}
.ra-empty span{display:block;font-size:11.5px;line-height:1.8;}
.ra-empty .ra-btn{margin-top:14px;display:inline-block;text-decoration:none;font-size:13px;}

/* ── 儲值 ── */
.ra-tucards{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px;}
.ra-tucard{flex:1;min-width:118px;padding:11px 13px;border-radius:12px;background:var(--chip);}
.ra-tucard.hi{background:rgba(255,149,0,.09);border:1px solid rgba(255,149,0,.24);}
.ra-tucard.g{background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.24);}
.ra-tucard span{display:block;font-size:10px;color:var(--muted);font-weight:800;}
.ra-tucard b{display:block;font-size:19px;font-weight:900;margin-top:2px;}
.ra-tucard.hi b{color:#FF9500;} .ra-tucard.g b{color:#22c55e;}
.ra-tucard small{display:block;font-size:9.5px;color:var(--muted);margin-top:2px;}
.ra-next2{padding:10px 13px;border-radius:11px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);margin-bottom:13px;}
.ra-next2>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--accent);margin-bottom:5px;flex-wrap:wrap;}
.ra-pkgs{display:flex;gap:9px;flex-wrap:wrap;}
.ra-pkg{flex:1;min-width:150px;padding:13px;border-radius:13px;border:2px solid var(--line);background:var(--bg);cursor:pointer;position:relative;transition:all .16s;}
.ra-pkg.on{border-color:var(--accent);background:rgba(0,122,255,.05);}
.ra-pkg.off{opacity:.45;cursor:not-allowed;}
.ra-bonus{position:absolute;top:-9px;right:9px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:9.5px;font-weight:900;padding:2px 8px;border-radius:6px;}
.ra-plabel{font-size:10.5px;color:var(--muted);font-weight:800;}
.ra-pusd{font-size:25px;font-weight:900;margin:2px 0;}
.ra-ppts{font-size:14.5px;font-weight:800;color:#FF9500;}
.ra-prate{font-size:10px;color:var(--muted);margin-top:2px;}
.ra-poff{font-size:10px;color:#ef4444;font-weight:800;margin-top:5px;}
.ra-provs{display:flex;gap:9px;flex-wrap:wrap;}
.ra-prov{flex:1;min-width:145px;padding:10px 13px;border-radius:11px;border:2px solid var(--line);cursor:pointer;transition:all .16s;}
.ra-prov.on{border-color:var(--accent);background:rgba(0,122,255,.05);}
.ra-prov b{display:block;font-size:12.5px;font-weight:800;}
.ra-prov span{font-size:10px;color:var(--muted);}
.ra-chains{display:flex;gap:8px;flex-wrap:wrap;}
.ra-chain{padding:8px 14px;border-radius:10px;border:2px solid var(--line);font-size:12px;font-weight:700;cursor:pointer;transition:all .16s;}
.ra-chain.on{border-color:var(--accent);background:rgba(0,122,255,.05);}
.ra-quote{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(0,122,255,.07);border:1px solid rgba(0,122,255,.18);font-size:12px;color:var(--accent);font-weight:700;}
.ra-quote small{font-weight:400;color:var(--muted);}

/* ── 訂單 ── */
.ra-ord{padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg);margin-bottom:8px;}
.ra-ordtop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;}
.ra-ordtop b{font-size:14px;font-weight:900;}
.ra-ordtop em{font-style:normal;font-size:13px;color:#FF9500;font-weight:800;margin-left:5px;}
.ra-ordtop i{font-style:normal;font-size:10px;color:#22c55e;font-weight:800;margin-left:4px;}
.ra-ordno{font-size:10px;color:var(--muted);margin-top:3px;}
.ra-ordmeta{font-size:10px;color:var(--muted);margin-top:6px;line-height:1.9;}
.ra-ordnote{color:#b45309;}
.ra-ost{font-size:10.5px;font-weight:900;padding:3px 10px;border-radius:7px;white-space:nowrap;}
.ra-ost.ok{background:rgba(34,197,94,.12);color:#22c55e;}
.ra-ost.warn{background:rgba(245,158,11,.12);color:#f59e0b;}
.ra-ost.err{background:rgba(239,68,68,.12);color:#ef4444;}
.ra-ost.pur{background:rgba(167,139,250,.14);color:#a78bfa;}
.ra-ost.mut{background:var(--chip);color:var(--muted);}
.ra-resume{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);}
.ra-resume small{display:block;font-size:10px;color:#b45309;margin-bottom:6px;}
.ra-rrow{display:flex;gap:6px;flex-wrap:wrap;}
.ra-rrow select{width:112px;font-size:11.5px;padding:7px 9px;}
.ra-rrow input{flex:1;min-width:150px;font-size:11.5px;padding:7px 10px;}
.ra-rrow .ra-btn{font-size:11.5px;padding:7px 12px;}
.ra-pager{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;font-size:11.5px;color:var(--muted);}
.ra-pager .ra-btn{font-size:11.5px;padding:6px 13px;}

@media(max-width:640px){
    .ra-box{max-height:92vh;border-radius:16px;}
    .ra-body{padding:15px 15px 20px;}
    .ra-uinfo{display:none;}
    .ra-user{padding:4px;}
    .ra-shelf{grid-template-columns:1fr;}
    .ra-pkg,.ra-prov{min-width:100%;}
}

/* ═══ 通知中心 ═══ */
.ra-bell{position:relative;min-height:44px;width:44px;border-radius:22px;border:1px solid var(--line,rgba(127,127,127,.18));background:var(--card,#fff);
    color:var(--text);font-size:17px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .16s;}
.ra-bell:hover{border-color:var(--accent);}
.ra-dot{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    background:#ef4444;color:#fff;font-size:9.5px;font-weight:900;display:flex;align-items:center;justify-content:center;
    border:2px solid var(--card);line-height:1;}
.ra-nt-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px;font-size:12.5px;color:var(--muted);}
.ra-nt-bar > div{display:flex;gap:7px;}
.ra-nt-bar .ra-btn{font-size:11.5px;padding:6px 12px;}
.ra-nt-list{display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow-y:auto;}
.ra-nt{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:12px;border:1px solid var(--line);
    background:var(--bg);cursor:pointer;position:relative;transition:border-color .16s,background .16s;}
.ra-nt:hover{border-color:var(--accent);}
.ra-nt.new{background:rgba(0,122,255,.05);border-color:rgba(0,122,255,.22);}
.ra-nt-ic{font-size:20px;line-height:1.2;flex-shrink:0;}
.ra-nt-b{flex:1;min-width:0;}
.ra-nt-t{font-size:13px;font-weight:800;line-height:1.5;}
.ra-nt-d{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:2px;}
.ra-nt-b time{display:block;font-size:10px;color:var(--muted);margin-top:4px;}
.ra-nt-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:6px;}
.ra-nt-prefs{display:flex;gap:8px;flex-wrap:wrap;}
.ra-pref{flex:1;min-width:120px;padding:11px 13px;border-radius:12px;border:2px solid var(--line);cursor:pointer;transition:all .16s;}
.ra-pref:hover{border-color:var(--accent);}
.ra-pref.on{border-color:var(--accent);background:rgba(0,122,255,.06);}
.ra-pref b{display:block;font-size:13px;font-weight:800;}
.ra-pref span{font-size:10.5px;color:var(--muted);line-height:1.6;}
@media(max-width:640px){
    .ra-bell{min-height:40px;width:40px;font-size:16px;}
    .ra-login-btn{min-height:40px;padding:0 14px;font-size:12.5px;}
    /* 閱讀頁的工具列已經排了字級／書架／聽書／前情提要／深色模式，窄螢幕再加一顆
       110px 的膠囊就會整條溢出畫面。這裡只在工具列內收成圖示鈕，其他頁面不受影響。 */
    .toolbar .ra-login-btn{width:40px;min-height:40px;padding:0;border-radius:50%;font-size:17px;gap:0;}
    .toolbar .ra-login-btn .ra-lg-tx{display:none;}
    .ra-nt-list{max-height:52vh;}
    .ra-pref{min-width:100%;}
}

/* ═══ 每日簽到 / 閱讀券 ═══
   券用琥珀色（跟點數的藍紫色明確區分），讀者一眼就知道這是兩個不同的錢包。 */
.ra-tk{color:#f59e0b;}
.ra-tk.todo{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.09);}
.ra-dot.num{background:#f59e0b;}
.ra-dot.go{background:#f59e0b;min-width:14px;height:14px;padding:0;font-size:9px;animation:ra-tkpulse 1.9s ease-in-out infinite;}
@keyframes ra-tkpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}}
@media(prefers-reduced-motion:reduce){.ra-dot.go{animation:none;}}

.ra-ci-top{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.ra-ci-bal,.ra-ci-streak{flex:1;min-width:150px;padding:14px 16px;border-radius:15px;
    background:linear-gradient(150deg,rgba(245,158,11,.13),rgba(249,115,22,.06));border:1px solid rgba(245,158,11,.3);}
.ra-ci-streak{background:linear-gradient(150deg,rgba(99,102,241,.12),rgba(14,165,233,.06));border-color:rgba(99,102,241,.3);}
.ra-ci-bal>span,.ra-ci-streak>span{display:block;font-size:11px;font-weight:800;color:var(--muted);}
.ra-ci-bal>b,.ra-ci-streak>b{display:block;font-size:30px;font-weight:900;line-height:1.25;color:#f59e0b;}
.ra-ci-streak>b{color:#6366f1;}
.ra-ci-bal>b i,.ra-ci-streak>b i{font-size:13px;font-weight:800;font-style:normal;margin-left:3px;}
.ra-ci-bal>small,.ra-ci-streak>small{display:block;font-size:10.5px;color:var(--muted);line-height:1.7;}

.ra-ci-go{background:linear-gradient(135deg,#f59e0b,#f97316)!important;font-size:15px;padding:14px!important;}
.ra-ci-go.done{background:var(--chip)!important;color:var(--muted)!important;}
.ra-ci-pop{padding:11px 14px;border-radius:12px;margin-bottom:12px;font-size:13px;font-weight:800;
    background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.34);color:#16a34a;text-align:center;}

/* 7 天預覽：橫向捲動，手機不換行擠成兩排 */
.ra-ci-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
.ra-ci-day{flex:0 0 auto;width:78px;padding:9px 6px;border-radius:12px;text-align:center;
    border:1px solid var(--line);background:var(--bg);}
.ra-ci-day.bonus{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.07);}
.ra-ci-day.next{border-color:#f59e0b;border-width:2px;box-shadow:0 4px 14px rgba(245,158,11,.22);}
.ra-ci-day .d{display:block;font-size:10px;color:var(--muted);font-weight:700;}
.ra-ci-day .ic{display:block;font-size:17px;line-height:1.5;}
.ra-ci-day b{display:block;font-size:12.5px;font-weight:900;}
.ra-ci-day em{display:block;font-size:9px;font-style:normal;color:#f59e0b;font-weight:800;margin-top:1px;}

.ra-ci-rules{margin:0;padding-left:18px;font-size:11.5px;color:var(--muted);line-height:1.95;}
.ra-ci-rules b{color:var(--text);}

.ra-tklog{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:12px;}
.ra-tklog b{flex:0 0 42px;font-weight:900;font-size:13px;text-align:right;}
.ra-tklog.plus b{color:#16a34a;} .ra-tklog.minus b{color:#f59e0b;}
.ra-tklog .w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ra-tklog .w em{font-style:normal;color:var(--muted);font-size:11px;}
.ra-tklog .bal{flex:0 0 auto;font-size:10.5px;color:var(--muted);}
.ra-tklog time{flex:0 0 auto;font-size:10px;color:var(--muted);}

/* 帳號總覽的簽到入口 */
.ra-tkcard{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;margin-top:10px;cursor:pointer;
    border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.06);transition:border-color .16s,transform .16s;}
.ra-tkcard:hover{border-color:#f59e0b;transform:translateY(-1px);}
.ra-tkcard.todo{border-color:rgba(245,158,11,.6);background:rgba(245,158,11,.11);}
.ra-tkic{font-size:22px;line-height:1;}
.ra-tkb{flex:1;min-width:0;}
.ra-tkb b{display:block;font-size:13.5px;font-weight:900;}
.ra-tkb span{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;}
.ra-tkgo{font-size:11.5px;font-weight:800;color:#f59e0b;flex-shrink:0;}

@media(max-width:640px){
    .ra-ci-bal>b,.ra-ci-streak>b{font-size:26px;}
    .ra-ci-day{width:70px;}
}

/* ═══ 頭像更換 ═══ */
.ra-pav-wrap{position:relative;flex-shrink:0;cursor:pointer;border-radius:50%;line-height:0;outline:none;}
.ra-pav-wrap:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);}
.ra-pav-cam{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;
    background:var(--accent);color:#fff;border:2px solid var(--card,#fff);transition:transform .16s;}
.ra-pav-wrap:hover .ra-pav-cam{transform:scale(1.12);}
.ra-pav-wrap::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.42);
    opacity:0;transition:opacity .16s;pointer-events:none;}
.ra-pav-wrap:hover::after{opacity:1;}
/* 上傳中：轉圈蓋在頭像上，並鎖住重複點擊 */
.ra-pav-wrap.busy{pointer-events:none;}
.ra-pav-wrap.busy::after{opacity:1;}
.ra-pav-wrap.busy .ra-pav-cam{background:transparent;border-color:transparent;color:transparent;
    border-top:2px solid #fff;border-right:2px solid transparent;width:20px;height:20px;
    right:calc(50% - 10px);bottom:calc(50% - 10px);animation:ra-spin .7s linear infinite;}
@keyframes ra-spin{to{transform:rotate(360deg);}}
.ra-pav-acts{display:flex;gap:10px;margin-top:5px;}
.ra-pav-link{border:none;background:none;padding:0;cursor:pointer;font-family:inherit;
    font-size:11px;font-weight:800;color:var(--accent);}
.ra-pav-link:hover{text-decoration:underline;}
.ra-pav-link.del{color:var(--muted);}
.ra-pav-link.del:hover{color:#ef4444;}