/* Floralia · the card book, full screen - js/cardpage.js (2026-10-22): the bag page's frame (css/bagpage.css) around the
   cards' own album and deck (their .cd-* styles, scoped under .bookwin). */
#cardp { position: fixed; inset: 0; z-index: 60; display: flex; background: rgba(6, 4, 12, 0.78); }
#cardp[hidden] { display: none; }
#cardp:not([hidden]) { align-items: center; justify-content: center; }
#cardp .cp-in { position: relative; display: flex; flex-direction: column; width: min(100vw, 177.78vh); height: min(100vh, 56.25vw); padding: 12px 16px 10px; box-sizing: border-box; color: #f3ead6;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 200, 110, .10), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(140, 90, 200, .10), transparent 70%), linear-gradient(180deg, #221a2c 0%, #16111e 55%, #100c16 100%);
  border: 2px solid #c9a24a; box-shadow: inset 0 0 0 4px #1a1320, inset 0 0 0 5px #6a5026, inset 0 0 60px rgba(0, 0, 0, .55); }
#cardp .cp-top { display: flex; align-items: center; gap: .7em; padding: 0 .2em .6em; border-bottom: 1px solid rgba(201, 162, 74, .45); font: 500 clamp(12px, 1vw, 16px) Prompt, Mali, sans-serif; }
#cardp .cp-top h2 { margin: 0; font: 700 1.75em Prompt, Mali, sans-serif; background: linear-gradient(180deg, #fff6c8, #ffd36a 55%, #d99a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #3a2410); }
#cardp .cp-top h2 small { font-size: .5em; font-weight: 500; margin-left: .5em; -webkit-text-fill-color: #cfc4a8; }
#cardp .pill { display: inline-flex; align-items: center; gap: .35em; padding: .2em .75em; border-radius: 99px; background: #241b2c; border: 1px solid #5a4320; font-weight: 600; font-size: .9em; }
#cardp .pill img { width: 1.35em; height: 1.35em; object-fit: contain; }
#cardp .sp { flex: 1; }
#cardp .cp-x { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: .75em; border: 1px solid #c9a24a; background: linear-gradient(180deg, #4a3418, #2a1c0c); color: #ffe08a; font: 800 1em Prompt, sans-serif; cursor: pointer; }
#cardp .cp-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1em; padding-top: 1em; min-height: 0; }
#cardp .cp-wrap { position: relative; min-height: 0; border-radius: 12px; border: 1px solid #7a5c26;
  background: linear-gradient(180deg, rgba(34, 26, 44, .92), rgba(18, 13, 24, .94)), url(../assets/ui_skillpage/panel_bg.jpg) center / 220px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .35); }
#cardp .cp-wrap > .cn { position: absolute; width: 34px; height: 34px; background: url(../assets/ui_skillpage/frame_corner.png) center / contain no-repeat; z-index: 8; pointer-events: none; }
#cardp .cp-wrap > .cn.a { left: -5px; top: -5px; } #cardp .cp-wrap > .cn.b { right: -5px; top: -5px; transform: scaleX(-1); }
#cardp .cp-wrap > .cn.c { left: -5px; bottom: -5px; transform: scaleY(-1); } #cardp .cp-wrap > .cn.d { right: -5px; bottom: -5px; transform: scale(-1, -1); }
#cardp .cp-col { position: absolute; inset: 0; overflow-y: auto; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
#cardp .cp-col::-webkit-scrollbar { width: 8px; } #cardp .cp-col::-webkit-scrollbar-thumb { background: #5a4320; border-radius: 8px; }
@media (max-width: 900px) { #cardp .cp-body { grid-template-columns: 1fr; overflow-y: auto; } #cardp .cp-wrap { min-height: 70vh; } }
/* (the books' fixed 712px column height - css/bookstd.css - is for the scaled 1536x1024 page; here the columns fill the screen: the user, "แก้ uiหน้าระบบการด") */
#ui #cardp .cp-col { height: auto !important; }
#ui #cardp .cd-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#ui #cardp .cp-col { overflow-x: hidden; }
/* the collection page, made easy to read (js/cards.js ownHtml .o2; the user: "ดูยากมาก ออกแบบใหม่ให้ดูง่ายหน่อย") */
#ui .cd-own.o2 { display: flex; flex-direction: column; gap: 14px; font: 400 14px/1.4 Prompt, Mali, sans-serif; color: #e8e2d4; }
#ui .cd-own.o2 .o2-sec { padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
#ui .cd-own.o2 h4 { margin: 0 0 10px; font: 600 17px Prompt, sans-serif; color: #ffe3a0; }
#ui .cd-own.o2 h4 small { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: #a9a294; }
#ui .cd-own.o2 .o2-bigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#ui .cd-own.o2 .o2-big { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); }
#ui .cd-own.o2 .o2-big small { color: #bdb5a4; font-size: 13px; }
#ui .cd-own.o2 .o2-big b { font: 700 26px Prompt, sans-serif; line-height: 1.2; }
#ui .cd-own.o2 .o2-big.hp b { color: #ff8a8a; } #ui .cd-own.o2 .o2-big.at b { color: #ffc46a; } #ui .cd-own.o2 .o2-big.df b { color: #8ac8ff; }
#ui .cd-own.o2 .o2-big i { font-style: normal; font-size: 11.5px; color: #8fd88a; }
#ui .cd-own.o2 .o2-how { margin: 8px 0 0; font-size: 12.5px; color: #a9a294; }
#ui .cd-own.o2 .o2-track { position: relative; height: 10px; margin: 18px 12px 30px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
#ui .cd-own.o2 .o2-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #c9832a, #ffd76a); }
#ui .cd-own.o2 .o2-track ul { list-style: none; margin: 0; padding: 0; }
#ui .cd-own.o2 .o2-track li { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
#ui .cd-own.o2 .o2-track li i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; background: #2a2333; border: 2px solid #6a5a78; color: #fff; }
#ui .cd-own.o2 .o2-track li.done i { background: #3c7a3a; border-color: #8fd88a; }
#ui .cd-own.o2 .o2-track li.ready i { background: #c9832a; border-color: #ffe9a0; }
#ui .cd-own.o2 .o2-track li b { position: absolute; top: 26px; font-size: 12px; color: #cfc7b6; }
#ui .cd-own.o2 .o2-next { margin: 0 0 6px; font-size: 14px; color: #d9d2c2; }
#ui .cd-own.o2 .o2-next b { color: #ffd76a; font-size: 16px; } #ui .cd-own.o2 .o2-next em { font-style: normal; color: #8fd88a; }
#ui .cd-own.o2 .o2-sets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
#ui .cd-own.o2 .o2-sets li { padding: 8px 10px; border-radius: 7px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); }
#ui .cd-own.o2 .o2-sets li.done { border-color: rgba(255, 215, 106, .6); background: rgba(255, 215, 106, .08); }
#ui .cd-own.o2 .o2-sh { display: flex; justify-content: space-between; gap: 6px; font-size: 13.5px; }
#ui .cd-own.o2 .o2-sh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ui .cd-own.o2 .o2-sh b { flex: none; color: #cfc7b6; font-weight: 600; } #ui .cd-own.o2 .o2-sets li.done .o2-sh b { color: #ffd76a; }
#ui .cd-own.o2 .o2-bar { height: 5px; margin: 6px 0; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#ui .cd-own.o2 .o2-bar u { display: block; height: 100%; background: linear-gradient(90deg, #6aa84f, #b6e388); }
#ui .cd-own.o2 .o2-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#ui .cd-own.o2 .o2-chips em { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 99px; background: rgba(143, 216, 138, .12); color: #b6e388; }
/* layout B (js/cards.js viewB; the user's pick on cardsimplepick.html): maps | the map's cards | the picked card, the deck below */
#ui #cardp .cp-in.cb { gap: 10px; }
#ui #cardp .cb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(0, 0.85fr); gap: 12px; padding-top: 10px; }
#ui #cardp .cb-col { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); height: auto !important; }
#ui #cardp .cb-col::-webkit-scrollbar { width: 6px; } #ui #cardp .cb-col::-webkit-scrollbar-thumb { background: rgba(201, 162, 74, .4); border-radius: 6px; }
#ui #cardp .cb-h { margin: 0 0 10px; font: 600 18px Prompt, sans-serif; color: #ffe3a0; }
#ui #cardp .cb-h small { margin-left: 8px; font-size: 13px; font-weight: 400; color: #a9a294; }
#ui #cardp .cb-maps { display: flex; flex-direction: column; gap: 6px; }
#ui #cardp .cb-map { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 7px; text-align: left; cursor: pointer; font: inherit; color: #e8e2d4; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
#ui #cardp .cb-map:hover { border-color: rgba(255, 214, 140, .5); }
#ui #cardp .cb-map.on { border-color: rgba(217, 164, 67, .8); background: rgba(217, 164, 67, .13); }
#ui #cardp .cb-map b { font-size: 14.5px; font-weight: 600; } #ui #cardp .cb-map small { font-size: 12px; color: #a9a294; }
#ui #cardp .cb-map.full small { color: #b6e388; }
#ui #cardp .cb-bar { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#ui #cardp .cb-bar u { display: block; height: 100%; background: linear-gradient(90deg, #6aa84f, #b6e388); }
#ui #cardp .cb-ghead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#ui #cardp .cb-goal { margin: -4px 0 6px; font-size: 13.5px; color: #cfc7b6; } #ui #cardp .cb-goal b { color: #b6e388; font-weight: 600; }
#ui #cardp .cb-how { margin: 0 0 12px; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: #d9d2c2; background: rgba(255, 215, 106, .07); border: 1px solid rgba(255, 215, 106, .25); }
#ui #cardp .cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 10px; }
#ui #cardp .cb-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; background: none; border: 1px solid transparent; }
#ui #cardp .cb-cell:hover { background: rgba(255, 255, 255, .04); } #ui #cardp .cb-cell.sel { border-color: rgba(255, 215, 106, .8); background: rgba(255, 215, 106, .08); }
#ui #cardp .cb-cell .cd { width: 112px !important; }
#ui #cardp .cb-cell small { font-size: 12px; line-height: 1.35; color: #b6e388; text-align: center; max-width: 132px; }
#ui #cardp .cb-cell .cd.locked ~ small { color: #a9a294; }
#ui #cardp .cb-cell em { position: absolute; top: 2px; right: 2px; z-index: 5; font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: #3c7a3a; color: #fff; }
#ui #cardp .cb-cell em.up { top: 22px; background: #c9832a; }
#ui #cardp .cb-strip { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(201, 162, 74, .45); flex-wrap: wrap; }
#ui #cardp .cb-stitle { display: flex; flex-direction: column; } #ui #cardp .cb-stitle b { font-size: 16px; color: #ffe3a0; } #ui #cardp .cb-stitle small { font-size: 12px; color: #a9a294; max-width: 180px; }
#ui #cardp .cb-slots { display: flex; gap: 8px; }
#ui #cardp .cb-slot { width: 62px; aspect-ratio: 5/7; padding: 0; border-radius: 6px; cursor: pointer; overflow: hidden; display: grid; place-items: center; background: rgba(0, 0, 0, .25); border: 1px dashed rgba(255, 255, 255, .25); color: #cfc7b6; font: inherit; }
#ui #cardp .cb-slot.full { border: 0; background: none; } #ui #cardp .cb-slot.lock { opacity: .5; }
#ui #cardp .cb-slot .cd { width: 62px !important; font-size: 0.55em; }
#ui #cardp .cb-slot span { display: flex; flex-direction: column; align-items: center; font-size: 20px; line-height: 1; } #ui #cardp .cb-slot small { font-size: 10.5px; margin-top: 4px; }
#ui #cardp .cb-total { flex: 1; min-width: 200px; display: flex; flex-direction: column; } #ui #cardp .cb-total small { font-size: 12px; color: #a9a294; } #ui #cardp .cb-total b { color: #b6e388; font-weight: 600; font-size: 14px; }
@media (max-width: 1100px) { #ui #cardp .cb-body { grid-template-columns: 200px minmax(0, 1fr); } #ui #cardp .cb-side { grid-column: 1 / -1; } }
/* fewer words (the user: "ตัวหนังสือไหนที่ไม่จำเป็นให้เอาออกไป อธิบายเท่าที่จำเป็น"): one line under a card, the map's count on the right,
   the detail's small notes gone and its tier table / sources folded (details.cd-more) */
#ui #cardp .cb-cell small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ui #cardp .cb-map small { display: flex; justify-content: space-between; }
#ui #cardp .cb-side .cd-gain small, #ui #cardp .cb-side .cd-unl, #ui #cardp .cb-side > .eco-hint, #ui #cardp .cb-side .cd-stars-tab small { display: none; }
#ui #cardp .cd-more { margin-top: 10px; } #ui #cardp .cd-more > summary { cursor: pointer; color: #e8c477; font-size: 13.5px; padding: 6px 0; }
#ui #cardp .cd-more > summary:hover { color: #ffe3a0; }
/* the auto button under "สำรับของฉัน", on the left beside the deck (the user: "ย้ายไปอยู่ฝั่งซ้าย") */
#ui #cardp .cb-stitle { gap: 6px; } #ui #cardp .cb-stitle .cb-auto { white-space: nowrap; padding: .35em .9em; font-size: 13.5px; }
/* the deck in the right column, below the picked card (the user: "ย้ายสำรับฉัน ... ไปอยู่ฝั่งด้านขวา ... ออกแบบ ui ให้สวย") */
#ui #cardp .cb-side { display: flex; flex-direction: column; gap: 14px; }
#ui #cardp .cb-detail { flex: none; }
#ui #cardp .cb-deck { flex: none; margin-top: auto; padding: 14px 14px 12px; border-radius: 10px; position: relative;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 215, 106, .10), transparent 70%), linear-gradient(180deg, rgba(40, 32, 52, .9), rgba(20, 16, 26, .95));
  border: 1px solid rgba(217, 164, 67, .55); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .08), 0 8px 22px rgba(0, 0, 0, .35); }
#ui #cardp .cb-dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#ui #cardp .cb-dhead h3 { margin: 0; font: 600 18px Prompt, sans-serif; color: #ffe3a0; }
#ui #cardp .cb-dhead h3 small { margin-left: 6px; font-size: 13px; font-weight: 500; color: #cfc7b6; }
#ui #cardp .cb-dhead .cb-auto { white-space: nowrap; padding: .4em 1em; font-size: 13.5px; }
#ui #cardp .cb-deck .cb-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#ui #cardp .cb-deck .cb-slot { width: 100%; height: auto; aspect-ratio: 5/7; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px dashed rgba(255, 215, 106, .35);
  transition: transform .12s, border-color .12s, box-shadow .12s; }
#ui #cardp .cb-deck .cb-slot:hover { transform: translateY(-2px); border-color: rgba(255, 215, 106, .8); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
#ui #cardp .cb-deck .cb-slot.full { border: 0; background: none; }
#ui #cardp .cb-deck .cb-slot .cd { width: 100% !important; font-size: .62em; }
#ui #cardp .cb-deck .cb-slot span { font-size: 22px; color: #e8c477; }
#ui #cardp .cb-deck .cb-total { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 12px; min-width: 0; }
#ui #cardp .cb-deck .cb-total span { display: flex; flex-direction: column; padding: 6px 9px; border-radius: 7px; background: rgba(143, 216, 138, .08); border: 1px solid rgba(143, 216, 138, .25); }
#ui #cardp .cb-deck .cb-total small { font-size: 11.5px; color: #bdb5a4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui #cardp .cb-deck .cb-total b { font-size: 16px; font-weight: 700; color: #b6e388; }
#ui #cardp .cb-deck .cb-total p { margin: 0; grid-column: 1 / -1; color: #a9a294; font-size: 13px; }
/* the deck at the top of the right column (the user: "เอาสำรับของฉันย้ายขึ้นไปอยู่ด้านบน") */
#ui #cardp .cb-deck { margin-top: 0; }
/* the deck's remove button and the drag (2026-10-23, the user: "เพิ่มปุ่มถอดการ์ดและลากการ์ดมาใส่ได้") */
#ui #cardp .cb-slot { position: relative; }
#ui #cardp .cb-slot .cb-off, #ui #cardp .cb-slot .cb-lk { position: absolute; left: 3px; top: 3px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 Prompt, sans-serif; font-style: normal; color: #fff; background: rgba(150, 30, 30, .92); border: 1.5px solid #ffd76a; box-shadow: 0 2px 5px rgba(0, 0, 0, .6); cursor: pointer; opacity: .85; }
#ui #cardp .cb-slot .cb-lk { background: rgba(40, 32, 20, .92); font-size: 11px; cursor: default; }
#ui #cardp .cb-slot .cb-off:hover { opacity: 1; transform: scale(1.12); background: #c0392b; }
#ui #cardp [data-dtype] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#ui #cardp .cb-cell[data-dtype], #ui #cardp .cb-slot.full { cursor: grab; }
#ui #cardp .cb-slot.drop { outline: 3px solid #7df; outline-offset: 2px; transform: translateY(-3px); }
body.cd-dragging #cardp .cb-deck { box-shadow: 0 0 0 2px rgba(120, 220, 255, .5), 0 8px 22px rgba(0, 0, 0, .35); }
.cb-ghost { position: fixed; z-index: 100001; width: 84px; pointer-events: none; transform: translate(-50%, -60%) rotate(-4deg); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); transition: opacity .12s; }
.cb-ghost .cd { width: 84px !important; font-size: .7em; }
.cb-ghost.out { opacity: .6; }
.cb-ghost.out::after { content: 'ถอด'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(4deg); padding: 3px 12px; border-radius: 99px; background: #c0392b; color: #fff; font: 700 14px Prompt, sans-serif; }
/* the card's detail page bigger and easier to read (2026-10-25, the user: "ปรับตัวหนังสือให้อ่านง่ายและใหญ่ขึ้น", "ทำให้ดูง่าย
   เข้าใจง่ายอ่านง่าย"): every line a size up in Prompt; the skill chips say what they are; the tier table one piece per value */
#ui #cardp .cb-side .cd-dinfo > b { font: 700 26px/1.2 Prompt, Mali, sans-serif; }
#ui #cardp .cb-side .cd-dinfo > small { font: 400 15px/1.3 Prompt, sans-serif; color: #cfc6b2; }
#ui #cardp .cb-side .cd-rar { font: 700 14px/1 Prompt, sans-serif; padding: 5px 12px; }
#ui #cardp .cb-side .cd-dstate { font: 600 17px/1.4 Prompt, sans-serif; }
#ui #cardp .cb-side .cd-acts .btn { font: 600 15px/1.4 Prompt, sans-serif; }
#ui #cardp .cb-side .cd-gain .gr-h { margin-bottom: 8px; font: 700 18px Prompt, sans-serif; }
#ui #cardp .cb-side .cd-gain .gr-h em { font-size: 14px; padding: 2px 10px; }
#ui #cardp .cb-side .gr { gap: 6px; }
#ui #cardp .cb-side .gr .gr-st { padding: 9px 14px; }
#ui #cardp .cb-side .gr .gr-st span { font: 500 17px Prompt, sans-serif; }
#ui #cardp .cb-side .gr .gr-st b { font: 700 21px Prompt, sans-serif; }
#ui #cardp .cb-side .gr .gr-st b s { font-size: 16px; }
#ui #cardp .cb-side .gr .gr-sk { padding: 9px 12px; gap: 12px; }
#ui #cardp .cb-side .gr .gr-ic { width: 48px; height: 48px; }
#ui #cardp .cb-side .gr .gr-ic.s { width: 28px; height: 28px; vertical-align: -8px; }
#ui #cardp .cb-side .gr .gr-skn b { font: 700 18px Prompt, sans-serif; }
#ui #cardp .cb-side .gr .gr-skn small { font: 400 15px Prompt, sans-serif; }
#ui #cardp .cb-side .gr .gr-chips { gap: 6px; }
#ui #cardp .cb-side .gr .gr-chips i { font: 400 15px/1.5 Prompt, sans-serif; padding: 3px 11px; color: #e8dfca; }
#ui #cardp .cb-side .gr .gr-chips i b { color: #ffe3a0; font-weight: 700; }
#ui #cardp .cb-side .gr .gr-tx { padding: 9px 14px; }
#ui #cardp .cb-side .gr .gr-tx b { font: 700 17px Prompt, sans-serif; }
#ui #cardp .cb-side .gr .gr-tx small { font: 400 15px/1.5 Prompt, sans-serif; color: #ddd4c0; }
#ui #cardp .cb-side .cd-gain .gr-src { font: 500 15.5px Prompt, sans-serif; padding: 8px 12px; }
#ui #cardp .cd-more > summary { font: 600 17px Prompt, sans-serif; padding: 8px 0; }
#ui #cardp .cb-side .cd-stars-tab { gap: 6px; }
#ui #cardp .cb-side .cd-stars-tab div { grid-template-columns: 44px 1fr; padding: 9px 12px; border-radius: 10px; }
#ui #cardp .cb-side .cd-stars-tab b { font: 700 18px/1 Prompt, sans-serif; }
#ui #cardp .cb-side .cd-stars-tab .tb { display: flex; flex-wrap: wrap; gap: 5px 8px; font: 400 15.5px/1.4 Prompt, sans-serif; color: #d6cdb9; }
#ui #cardp .cb-side .cd-stars-tab .tb-i { padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); white-space: nowrap; }
#ui #cardp .cb-side .cd-stars-tab .tb-i b { font: 600 15.5px Prompt, sans-serif; color: #fff3d6; }
#ui #cardp .cb-side .cd-stars-tab .cur .tb-i { background: rgba(143, 216, 138, .14); color: #c6efb4; }
#ui #cardp .cb-side .cd-stars-tab .cur .tb-i b { color: #b6f59a; }
#ui #cardp .cb-side .cd-stars-tab .done .tb-i b { color: #ffe3a0; }
#ui #cardp .cb-side .cd-src { font: 400 15.5px/1.5 Prompt, sans-serif; }
#ui #cardp .cb-side .cd-src b { font-size: 17px; }