/* Account XP & levels. Loaded by _PublicBooksLayout after public-books.css (and themes.css). Uses the site vars (--accent, --card, --muted, --border). */
/* XP chip: corner of anything that grants XP */
.xp-host{position:relative}
.xp-chip{position:absolute;top:.55rem;right:.55rem;z-index:5;display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border-radius:999px;font-weight:800;font-size:.7rem;line-height:1.2;letter-spacing:.02em;color:#1a1204;background:linear-gradient(135deg,var(--accent),var(--accent-soft));box-shadow:0 2px 8px rgba(0,0,0,.45);border:0;cursor:help;white-space:nowrap}
.xp-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.xp-chip.claimed{background:rgba(10,8,12,.72);backdrop-filter:blur(4px);color:#cfc6bb;box-shadow:none;border:1px solid rgba(255,255,255,.18);font-weight:700}
.xp-chip.inline{position:static;vertical-align:middle;margin-left:.35rem}
.xp-tip{position:absolute;top:calc(100% + 8px);right:0;width:max-content;max-width:15rem;padding:.55rem .7rem;border-radius:.6rem;background:#16131c;color:#f3efe8;border:1px solid rgba(var(--accent-rgb,212,160,23),.5);font-weight:500;font-size:.78rem;line-height:1.35;letter-spacing:0;white-space:normal;text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .15s,transform .15s;pointer-events:none;z-index:50}
.xp-tip b{color:var(--accent-soft)}
.xp-tip::before{content:"";position:absolute;top:-6px;right:14px;width:10px;height:10px;background:#16131c;border-left:1px solid rgba(var(--accent-rgb,212,160,23),.5);border-top:1px solid rgba(var(--accent-rgb,212,160,23),.5);transform:rotate(45deg)}
.xp-chip:hover .xp-tip,.xp-chip:focus .xp-tip,.xp-chip.open .xp-tip{opacity:1;visibility:visible;transform:none}
/* Header level badge */
.xp-me{position:relative;display:inline-flex;align-items:center;gap:.5rem}
.xp-me-btn{display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:.2rem .3rem;border-radius:.6rem}
.xp-me-btn:hover,.xp-me-btn[aria-expanded=true]{background:rgba(255,255,255,.06)}
.xp-lv{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .3rem;border-radius:.5rem;font-weight:900;font-size:.78rem;line-height:1;color:#1a1204;background:linear-gradient(135deg,var(--accent),var(--accent-soft))}
.xp-me-text{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}
.xp-me-name{font-weight:700;font-size:.85rem;color:var(--accent-soft)}
.xp-mini{width:4.5rem;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.xp-mini i,.xp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-soft));border-radius:inherit}
.xp-card{position:absolute;right:0;top:calc(100% + 10px);width:19rem;z-index:60;padding:1rem;border-radius:1rem;background:var(--card);border:1px solid rgba(var(--accent-rgb,212,160,23),.4);box-shadow:0 18px 50px rgba(0,0,0,.65);text-align:left}
.xp-card[hidden]{display:none}
.xp-card-top{display:flex;gap:.75rem;align-items:center;margin-bottom:.8rem}
.xp-avatar{flex:none;display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;font-weight:900;color:#fff;background:var(--av,#6e1e96);border:2px solid rgba(var(--accent-rgb,212,160,23),.6)}
.xp-avatar.sm{width:2rem;height:2rem;font-size:.8rem}
.xp-title{font-size:.75rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.xp-bar{height:8px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.xp-bar.thin{height:5px}
.xp-row{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--muted);margin:.35rem 0}
.xp-row b{color:#f3efe8}
.xp-stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.8rem 0}
.xp-stat{padding:.55rem .65rem;border-radius:.7rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.xp-stat b{display:block;font-size:1.05rem}
.xp-stat span{font-size:.72rem;color:var(--muted)}
.xp-card-links{display:flex;gap:1rem;font-size:.82rem;font-weight:700}
.xp-card-links a{color:var(--accent-soft)}
/* Home side: theme panel + leaderboard */
.home-side-slot[data-xp-side]{flex-direction:column;gap:.75rem}
.home-side-slot[data-xp-side] .theme-panel,.home-side-slot[data-xp-side] .home-side-placeholder{flex:1 1 55%}
.lb-mini{flex:0 0 auto;border-radius:1.1rem;border:1px solid var(--border,rgba(255,255,255,.08));background:var(--card);padding:.8rem .9rem}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.45rem}
.lb-head h2{margin:0;font-size:1rem;font-weight:800}
.lb-tabs{display:inline-flex;padding:2px;border-radius:999px;background:rgba(255,255,255,.06)}
.lb-tabs button{border:0;background:none;color:var(--muted);font-weight:700;font-size:.72rem;line-height:1;padding:.35rem .6rem;border-radius:999px;cursor:pointer}
.lb-tabs button[aria-selected=true]{background:var(--accent);color:#1a1204}
.lb-list{list-style:none;margin:0;padding:0}
.lb-item{display:grid;grid-template-columns:1.1rem 2rem minmax(0,1fr) auto;align-items:center;gap:.55rem;padding:.32rem 0;border-top:1px solid rgba(255,255,255,.05)}
.lb-item:first-child{border-top:0}
.lb-rank{font-weight:900;color:var(--muted);font-size:.8rem;text-align:center}
.lb-item:nth-child(1) .lb-rank{color:#f3d27a}.lb-item:nth-child(2) .lb-rank{color:#cfd6dd}.lb-item:nth-child(3) .lb-rank{color:#d9925a}
.lb-who{min-width:0}
.lb-name{display:flex;gap:.35rem;align-items:baseline;font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-name small{font-weight:600;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis}
.lb-xp{font-weight:800;font-size:.75rem;line-height:1;color:var(--muted);text-align:right}
.lb-xp .xp-lv{min-width:1.45rem;height:1.45rem;font-size:.7rem;margin-bottom:.15rem}
.lb-more{display:block;margin-top:.45rem;font-size:.8rem;font-weight:700;color:var(--accent-soft)}
/* Level-up toast */
.lvl-toast{position:fixed;left:50%;top:5.5rem;z-index:80;transform:translateX(-50%);width:min(24rem,calc(100vw - 2rem));padding:1.1rem 1.2rem;border-radius:1.1rem;text-align:center;background:radial-gradient(circle at 50% 0,rgba(var(--accent-rgb,212,160,23),.35),transparent 70%),var(--card);border:1px solid var(--accent);box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 40px rgba(var(--accent-rgb,212,160,23),.3);animation:lvl-pop .5s cubic-bezier(.2,1.4,.4,1)}
.lvl-toast .big{display:inline-grid;place-items:center;width:4rem;height:4rem;border-radius:1rem;font-weight:900;font-size:1.8rem;line-height:1;color:#1a1204;background:linear-gradient(135deg,var(--accent),var(--accent-soft));margin-bottom:.5rem}
.lvl-toast h2{margin:.1rem 0;font-size:1.3rem}
.lvl-toast p{margin:.2rem 0;color:var(--muted);font-size:.88rem}
.lvl-toast .unlock{display:inline-block;margin:.5rem 0;padding:.3rem .7rem;border-radius:999px;background:rgba(255,255,255,.07);font-weight:700;font-size:.82rem}
.lvl-toast .acts{display:flex;justify-content:center;gap:.6rem;margin-top:.6rem}
.lvl-toast button{border:1px solid rgba(255,255,255,.18);background:none;color:inherit;border-radius:.6rem;padding:.4rem .8rem;font-weight:700;font-size:.82rem;cursor:pointer}
.lvl-spark{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.lvl-spark i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent-soft);animation:spark 1.2s ease-out infinite}
@keyframes lvl-pop{from{transform:translateX(-50%) scale(.85);opacity:0}}
@keyframes spark{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--dx),var(--dy));opacity:0}}
@media (prefers-reduced-motion:reduce){.lvl-toast{animation:none}.lvl-spark{display:none}.xp-tip{transition:none}}
/* Generic page bits */
.xp-page{max-width:68rem;margin:0 auto}
.xp-panel{border-radius:1.1rem;border:1px solid var(--border,rgba(255,255,255,.08));background:var(--card);padding:1.1rem 1.2rem;margin-bottom:1rem}
.xp-panel h2{margin:0 0 .7rem;font-size:1.05rem}
.xp-table{width:100%;border-collapse:collapse;font-size:.88rem}
.xp-table th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.5rem .5rem;border-bottom:1px solid rgba(255,255,255,.08)}
.xp-table td{padding:.55rem .5rem;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.xp-table tr.you td{background:rgba(var(--accent-rgb,212,160,23),.12)}
.xp-table tr.you td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.you-tag{font-size:.65rem;font-weight:800;padding:.1rem .4rem;border-radius:999px;background:var(--accent);color:#1a1204;margin-left:.35rem;vertical-align:middle}
.pager{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.9rem;align-items:center}
.pager a,.pager span{min-width:2rem;text-align:center;padding:.35rem .55rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.1);font-size:.82rem;font-weight:700}
.pager .cur{background:var(--accent);color:#1a1204;border-color:var(--accent)}
.switch{display:inline-flex;align-items:center;gap:.55rem;font-size:.88rem;cursor:pointer}
.switch i{position:relative;width:2.4rem;height:1.35rem;border-radius:999px;background:rgba(255,255,255,.15);flex:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:calc(1.35rem - 6px);height:calc(1.35rem - 6px);border-radius:50%;background:#fff}
.switch.on i{background:var(--accent)}.switch.on i::after{left:auto;right:3px}
.cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.title-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:.7rem;border:1px solid rgba(var(--accent-rgb,212,160,23),.45);background:rgba(var(--accent-rgb,212,160,23),.08);font-size:.82rem;font-weight:700}
.title-chip small{color:var(--muted);font-weight:600}
.title-chip.locked{opacity:.45;border-style:dashed;background:none}
.title-chip.equipped{background:var(--accent);color:#1a1204}.title-chip.equipped small{color:#3a2a08}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.6rem}
.xbadge{text-align:center;padding:.7rem .4rem;border-radius:.8rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:.75rem}
.xbadge .ic{font-size:1.5rem;display:block;margin-bottom:.25rem}
.xbadge.locked{opacity:.35;filter:grayscale(1)}
.hist li{display:flex;justify-content:space-between;gap:.6rem;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem}
.hist{list-style:none;margin:0;padding:0}
.hist .amt{font-weight:800;color:var(--accent-soft);white-space:nowrap}
.hist time{color:var(--muted);font-size:.75rem;display:block}
.level-hero{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.level-hero .xp-lv{min-width:4.2rem;height:4.2rem;font-size:1.8rem;border-radius:1rem}
.level-hero .grow{flex:1;min-width:14rem}
.xp-form{display:grid;gap:.6rem}
.xp-form label{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem;align-items:center;gap:.6rem;font-size:.86rem}
.xp-form input,.xp-form select{width:100%;padding:.4rem .5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.3);color:inherit;font:inherit}
.xp-form small{grid-column:1/-1;color:var(--muted);margin-top:-.35rem;font-size:.74rem}
.btn-ghost{display:inline-block;padding:.5rem .9rem;border-radius:.7rem;border:1px solid rgba(255,255,255,.2);background:none;color:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.btn-danger{border-color:#c0392b;color:#ff8a7a}
.admin-note{font-size:.78rem;color:var(--muted);margin:.4rem 0 0}
.xp-host{position:relative}
.xp-wrap{position:relative;display:grid}
.xp-wrap>a,.xp-wrap>div{min-width:0}
.xp-wrap>.xp-chip{z-index:6}
@media (max-width:760px){
 .cols{grid-template-columns:1fr}
 .xp-me-text{display:none}
 .xp-card{position:fixed;left:.75rem;right:.75rem;top:4.2rem;width:auto}
 .xp-table .hide-sm{display:none}
 .xp-form label{grid-template-columns:minmax(0,1fr) 5.5rem}
}
[data-xp-side] .theme-panel-art{height:100%}
[data-xp-side] .theme-panel-art img{opacity:.4;object-position:right top}
[data-xp-side] .theme-panel-art::after{background:linear-gradient(to top,var(--card) 15%,transparent 90%)}
.lb-xp{display:inline-flex;align-items:center;gap:.4rem}
.lb-xp .xp-lv{margin:0}
body{position:relative}
.lvl-spark i{top:3.2rem!important}
.lvl-toast>*:not(.lvl-spark){position:relative;z-index:1}
.xp-form label.wide{grid-template-columns:1fr;gap:.3rem}

.xp-phone{margin-left:auto;margin-right:.4rem}
@media(min-width:768px){.xp-phone{display:none}}
.lvl-toast[hidden]{display:none}
.xp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.xp-chip.capped{background:rgba(10,8,12,.72);color:#cfc6bb;border:1px dashed rgba(255,255,255,.25);box-shadow:none}
.news-xp{margin:.2rem 0 1rem}
.news-xp .xp-chip{position:relative;top:auto;right:auto}
.news-xp .xp-tip{left:0;right:auto}.news-xp .xp-tip::before{left:14px;right:auto}
.xp-flash{padding:.6rem .8rem;border-radius:.7rem;margin-bottom:1rem;background:rgba(var(--accent-rgb,212,160,23),.12);border:1px solid rgba(var(--accent-rgb,212,160,23),.4);font-size:.88rem}
.xp-flash.err{background:rgba(192,57,43,.15);border-color:rgba(192,57,43,.5)}
.lb-tabs a{display:inline-block;color:var(--muted);font-weight:700;font-size:.72rem;line-height:1;padding:.35rem .6rem;border-radius:999px;text-decoration:none}
.lb-tabs a[aria-current=page]{background:var(--accent);color:#1a1204}
.switch-form{display:inline}
.switch{background:none;border:0;color:inherit;font:inherit;padding:0;text-align:left}