:root { --ink:#edf0ff; --muted:#a8aed3; --canvas:#0c0d18; --panel:#17192a; --line:#2c304d; --leaf:#9eff60; --violet:#a896ff; --orange:#ffb65f; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 82% 9%, #34266a 0, transparent 26rem), radial-gradient(circle at 10% 40%, #1b4b4e 0, transparent 31rem), var(--canvas); font-family:Inter, ui-sans-serif, system-ui, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom, black, transparent 60%); }
.page-shell { position:relative; width:min(1180px, calc(100% - 40px)); margin:auto; }
.topbar { height:92px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.top-actions { display:flex; align-items:center; gap:18px; }.top-actions a { color:var(--muted); font-size:.84rem; font-weight:700; text-decoration:none; }.top-actions a:hover { color:var(--ink); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); font-family:Georgia,serif; font-size:1.45rem; font-weight:700; text-decoration:none; letter-spacing:-.04em; }
.brand-mark { width:30px; height:30px; display:block; flex:0 0 auto; background:url("/(C)%20maple-advisor-icon.png") center/contain no-repeat; filter:drop-shadow(0 0 7px #9eff6070); }
.region-lock { border:1px solid #9eff6055; border-radius:999px; color:var(--leaf); padding:8px 13px; font-size:.77rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.hero { max-width:790px; padding:108px 0 76px; }
.eyebrow { margin:0 0 13px; color:var(--leaf); font-size:.72rem; font-weight:800; letter-spacing:.15em; }
h1 { margin:0; font:700 clamp(3.1rem,8vw,6.8rem)/.94 Georgia,serif; letter-spacing:-.075em; }
h1 em { color:var(--violet); font-weight:400; }
.intro { max-width:600px; color:var(--muted); font-size:1.12rem; line-height:1.65; margin:27px 0 32px; }
.search-panel { display:flex; gap:10px; padding:8px; background:#f4f5ff; border-radius:13px; box-shadow:0 21px 55px #0007; }
input { flex:1; min-width:0; padding:14px 16px; border:0; outline:0; background:transparent; color:#15162a; font:600 1rem inherit; }
input::placeholder { color:#767a92; }
button { border:0; border-radius:8px; padding:14px 20px; background:linear-gradient(135deg,var(--violet),#7158df); color:white; font:800 .93rem inherit; cursor:pointer; }
button:hover { filter:brightness(1.1); }
.example-button { margin:12px 0 0; padding:0; color:var(--muted); background:none; text-decoration:underline; font-size:.85rem; }
.status-message { margin:0 0 25px; padding:15px 18px; border:1px solid var(--line); border-radius:10px; background:#151729; color:var(--muted); }
.status-message[data-kind="error"] { color:#ffb8bd; border-color:#9e4859; background:#311b25; }
.profile { margin:0 0 92px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:rgba(21,23,40,.84); box-shadow:0 32px 70px #0005; }
.profile-header { display:grid; grid-template-columns:136px 1fr auto; gap:27px; align-items:center; padding:34px; background:linear-gradient(120deg,#26214d,#18263b); }
.character-image { width:136px; height:136px; object-fit:contain; border-radius:14px; background:#0f1122; }
h2 { margin:0; font:700 clamp(2.4rem,5vw,4rem)/1 Georgia,serif; letter-spacing:-.06em; }.class-level,.guild { margin:8px 0 0; color:var(--muted); }.guild { color:var(--orange); font-size:.87rem; }
.profile-origin { align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:6px; border-left:1px solid #ffffff22; padding-left:27px; color:var(--muted); }.profile-origin span { font-size:.67rem; letter-spacing:.12em; }.profile-origin strong { color:var(--ink); }.profile-origin small { max-width:145px; font-size:.72rem; }
.profile-submit { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:8px 11px; border:1px solid #9eff6066; border-radius:7px; color:var(--leaf); font-size:.75rem; font-weight:800; text-decoration:none; }.profile-submit:hover { background:#9eff6014; }.profile-upload { display:inline-flex; margin:8px 0 0 8px; padding:8px 11px; border:1px solid #8470ed; border-radius:7px; background:#26214d; color:#f0efff; font:800 .75rem inherit; cursor:pointer; }.profile-upload:hover { background:#362b6a; }.profile-image-status { min-height:16px; margin:5px 0 0; color:var(--muted); font-size:.7rem; }
.stat-section,.equipment-section { padding:38px 34px; }.equipment-section { border-top:1px solid var(--line); }.section-heading h3 { margin:0; font:700 1.8rem Georgia,serif; letter-spacing:-.04em; }
.stat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:22px; }.stat-card { min-height:96px; padding:15px; border:1px solid #373b59; border-radius:10px; background:#111324; }.stat-card span { display:block; color:var(--muted); font-size:.74rem; line-height:1.25; }.stat-card strong { display:block; color:var(--leaf); margin-top:11px; font-size:1.13rem; }
.equipment-layout { display:grid; gap:25px; margin-top:25px; }.gear-group { padding:18px; border:1px solid #30354f; border-radius:13px; background:linear-gradient(125deg,#131527,#0f1120); }.gear-group-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:13px; }.gear-group-heading h4 { margin:0; color:var(--leaf); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }.gear-group-heading p { margin:0; color:var(--muted); font-size:.72rem; }.gear-slot-grid { display:grid; gap:10px; }.gear-group--wse .gear-slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.gear-group--armor .gear-slot-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.gear-group--rings .gear-slot-grid,.gear-group--valuable .gear-slot-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.gear-group--accessories .gear-slot-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }.gear-group--other .gear-slot-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.equipment-card { position:relative; display:flex; gap:11px; align-items:center; min-height:86px; padding:12px; overflow:visible; border:2px solid transparent; border-radius:10px; background:linear-gradient(#101221,#101221) padding-box,linear-gradient(to bottom right,var(--main-potential,#323651) 0 48%,#323651 48% 52%,var(--additional-potential,#323651) 52% 100%) border-box; box-shadow:inset 0 1px #ffffff08; }.equipment-card > :not(.exceptional-sparkles) { position:relative; z-index:1; }.equipment-card img { width:45px; height:45px; flex:0 0 auto; object-fit:contain; image-rendering:auto; }.equipment-copy { min-width:0; }.equipment-meta { display:flex; align-items:center; gap:7px; min-height:19px; }.equipment-card .slot-name { color:var(--violet); font-size:.68rem; }.starforce-badge,.ring-level-badge { display:inline-grid; min-height:20px; place-items:center; padding:2px 5px; border-radius:5px; font-size:.67rem; font-weight:900; line-height:1; }.starforce-badge { min-width:33px; border:1px solid #f8ce54aa; background:linear-gradient(135deg,#5c4513,#2c220d); color:#ffe27c; box-shadow:inset 0 1px #fff2a33b,0 0 10px #f3b82c23; }.ring-level-badge { min-width:36px; border:1px solid #7d8ff5aa; background:linear-gradient(135deg,#34376e,#202244); color:#d8ddff; box-shadow:inset 0 1px #ffffff2b,0 0 10px #899dff1f; }.equipment-card h4 { margin:3px 0 0; font-size:.84rem; line-height:1.18; }.equipment-card p { margin:0; color:var(--muted); font-size:.69rem; line-height:1.32; }.empty-slot { display:block; min-height:82px; padding:14px; border-style:dashed; background:linear-gradient(#101221,#101221) padding-box,linear-gradient(to bottom right,#323651,#222640) border-box; }.empty-slot .slot-name { display:block; }.empty-slot p { margin-top:7px; color:#6f7596; }.exceptional-sparkles { position:absolute; z-index:3; inset:-9px; pointer-events:none; }.exceptional-sparkles i { position:absolute; color:#ff586b; font-style:normal; font-size:1rem; line-height:1; text-shadow:0 0 7px #ff304f,0 0 14px #ff304f; animation:exceptional-twinkle 1.8s ease-in-out infinite; }.exceptional-sparkles i:nth-child(1) { top:-2px; left:8%; }.exceptional-sparkles i:nth-child(2) { top:-6px; right:13%; animation-delay:.45s; }.exceptional-sparkles i:nth-child(3) { right:7%; bottom:-5px; animation-delay:.9s; }.exceptional-sparkles i:nth-child(4) { bottom:-6px; left:16%; animation-delay:1.35s; }@keyframes exceptional-twinkle { 0%,100% { opacity:.3; transform:scale(.65) rotate(0); } 50% { opacity:1; transform:scale(1.35) rotate(25deg); } }.unavailable-section { margin:0 34px 34px; padding:14px 16px; border-left:3px solid var(--orange); background:#382c1e; color:#f8daa8; font-size:.85rem; }.unavailable-section p { margin:0; }
.form-hero { max-width:790px; padding:84px 0 42px; }.form-hero.compact { padding-bottom:24px; }.form-hero h1 { font-size:clamp(2.9rem,7vw,5.7rem); }.form-card { margin:0 0 84px; padding:34px; border:1px solid var(--line); border-radius:18px; background:rgba(21,23,40,.9); box-shadow:0 24px 62px #0005; }.form-card h2 { font-size:2.15rem; }.form-note { max-width:780px; margin:15px 0 30px; color:var(--muted); line-height:1.55; }.field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.form-card label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:.77rem; font-weight:700; }.form-card input,.form-card textarea { width:100%; margin:0; padding:11px 12px; border:1px solid #383d5e; border-radius:8px; background:#111324; color:var(--ink); font:600 .94rem inherit; }.form-card textarea { min-height:98px; resize:vertical; }.breakdown-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0; }.breakdown-grid fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:0; padding:15px; border:1px solid #373b59; border-radius:10px; background:#101221; }.breakdown-grid legend { padding:0 5px; color:var(--leaf); font-size:.74rem; font-weight:800; letter-spacing:.08em; }.wide-field { margin:0 0 18px; }.form-status { min-height:22px; margin:14px 0 0; color:var(--muted); font-size:.85rem; }.form-status[data-kind="error"] { color:#ffb8bd; }.admin-bar { display:flex; align-items:end; gap:12px; }.admin-bar label { flex:1; }.submission-list { display:grid; gap:13px; margin-top:22px; }.submission-card { padding:20px; border:1px solid #373b59; border-radius:10px; background:#101221; }.submission-card h3 { margin:0; font:700 1.45rem Georgia,serif; }.submission-card p { color:var(--muted); line-height:1.45; }.submission-card pre { max-height:260px; overflow:auto; padding:13px; border-radius:7px; background:#090a13; color:#cbd0ef; font-size:.75rem; }.submission-card button { margin:4px 8px 0 0; }.profile-image-preview { display:block; width:180px; height:180px; margin:12px 0; border-radius:10px; background:#0f1122; object-fit:contain; }.reject-button { background:#633547; }.approve-button { background:linear-gradient(135deg,#70b848,#478a36); }
.approved-calibration { margin:0 34px 34px; padding:21px; border:1px solid #9eff6066; border-radius:12px; background:linear-gradient(120deg,#193020,#13251f); }.approved-calibration strong { display:block; color:var(--leaf); font:700 2rem Georgia,serif; }.approved-calibration p:last-child { margin:8px 0 0; color:var(--muted); font-size:.8rem; }
.equipment-card { display:block; min-height:0; }.equipment-card-trigger { display:flex; width:100%; min-width:0; align-items:center; gap:11px; padding:12px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; text-align:left; }.equipment-card-trigger:hover { background:#ffffff08; filter:none; }.equipment-card-trigger:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }.equipment-card-trigger .equipment-copy { flex:1; }.equipment-card .equipment-name { display:block; margin-top:3px; color:var(--ink); font-size:.84rem; font-weight:800; line-height:1.18; }.item-expand-icon { flex:0 0 auto; color:var(--muted); font-size:1.1rem; line-height:1; transition:transform .2s ease,color .2s ease; }.equipment-card.is-expanded .item-expand-icon { color:var(--leaf); transform:rotate(180deg); }.group-item-detail { margin-top:12px; padding-top:12px; border-top:1px solid #323651; }.item-detail-panel { overflow:visible; opacity:1; }.item-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.item-detail-block { padding:10px; border:1px solid #363a58; border-radius:8px; background:#0b0d19; }.item-detail-block h5 { margin:0 0 8px; color:#c9ccef; font-size:.69rem; letter-spacing:.08em; text-transform:uppercase; }.item-detail-block ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; }.item-detail-block li { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:.7rem; line-height:1.25; }.item-detail-block strong { max-width:62%; color:var(--ink); font-weight:700; text-align:right; }.item-detail-block--total { border-color:#9eff6066; }.item-detail-block--total h5 { color:var(--leaf); }.item-detail-block--potential { border-color:#ffd45b66; }.item-detail-block--potential h5 { color:#ffe181; }.item-detail-block--additional { border-color:#b36cff66; }.item-detail-block--additional h5 { color:#d7b4ff; }.item-detail-block--exceptional { border-color:#ff586b77; }.item-detail-block--exceptional h5 { color:#ff8b98; }.item-description,.item-detail-empty { grid-column:1/-1; margin:0; padding:10px; border-radius:8px; background:#0b0d19; color:var(--muted); font-size:.72rem; line-height:1.45; }
.gear-group--wse .gear-slot-grid,.gear-group--armor .gear-slot-grid,.gear-group--rings .gear-slot-grid,.gear-group--accessories .gear-slot-grid,.gear-group--valuable .gear-slot-grid,.gear-group--other .gear-slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.gear-slot-grid { align-items:start; }.group-item-detail { display:none; }.equipment-card.is-expanded .equipment-card-trigger { border-radius:8px 8px 0 0; box-shadow:inset 0 -1px #ffffff22; }.item-detail-panel { max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease,opacity .2s ease; }.equipment-card.is-expanded .item-detail-panel { max-height:3400px; opacity:1; }.item-detail-grid { grid-template-columns:1fr; padding:0 12px 12px; }.item-detail-block { position:relative; overflow:visible; }.item-detail-block--identity { border-color:#4d5277; background:linear-gradient(145deg,#15182b,#0b0d19); }.item-detail-block--stats { border-color:#8be85d88; background:linear-gradient(145deg,#162617,#0b0d19); }.item-detail-block--stats h5 { color:var(--leaf); }.stat-detail-row { position:relative; align-items:flex-start; }.stat-detail-value { position:relative; display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; max-width:72%; color:var(--ink); text-align:right; cursor:help; }.stat-detail-value > strong { max-width:none; }.stat-breakdown { color:#8990b6; white-space:normal; }.stat-source--base { color:#dce1ff; }.stat-source--scroll { color:#ffd670; }.stat-source--starforce { color:#95ee6b; }.stat-source--additional { color:#cf9dff; }.stat-source--exceptional { color:#ff7283; }.stat-breakdown-tooltip,.scroll-tooltip { position:absolute; z-index:8; right:0; bottom:calc(100% + 8px); display:none; width:min(285px,calc(100vw - 64px)); padding:10px; border:1px solid #515779; border-radius:8px; background:#0a0b16; box-shadow:0 12px 30px #0009; color:#c9cdef; font-size:.72rem; line-height:1.45; text-align:left; }.stat-breakdown-tooltip strong,.scroll-tooltip strong { display:block; max-width:none; margin-bottom:5px; color:var(--ink); text-align:left; }.stat-breakdown-tooltip span,.scroll-tooltip span { display:block; }.stat-detail-value:hover .stat-breakdown-tooltip,.stat-detail-value:focus-within .stat-breakdown-tooltip,.scroll-count-trigger:hover .scroll-tooltip,.scroll-count-trigger:focus .scroll-tooltip { display:block; }.item-detail-block--scroll { border-color:#f8ce5488; }.item-detail-block--scroll h5 { color:#ffe181; }.scroll-count-trigger { position:relative; display:inline-flex; align-items:center; min-height:27px; padding:4px 8px; border:1px solid #f8ce54aa; border-radius:6px; background:#2c220d; color:#ffe27c; font-size:.78rem; font-weight:900; cursor:help; outline:none; }.item-detail-block--grade { border-color:var(--grade-color,#323651); box-shadow:inset 0 0 16px color-mix(in srgb,var(--grade-color,#323651) 10%,transparent); }.item-detail-block--grade h5 { color:var(--grade-color,#c9ccef); }.item-detail-block--exceptional { border-color:#ff586b; background:linear-gradient(145deg,#32151f,#120b12); box-shadow:0 0 15px #ff304f33,inset 0 0 18px #ff304f1f; animation:exceptional-panel-glow 1.8s ease-in-out infinite; }.item-detail-block--exceptional h5 { color:#ff9aa7; }.item-detail-block--soul { border-color:#77d5ff77; background:linear-gradient(145deg,#102333,#0b0d19); }.item-detail-block--soul h5 { color:#8edfff; }@keyframes exceptional-panel-glow { 0%,100% { box-shadow:0 0 10px #ff304f22,inset 0 0 14px #ff304f12; } 50% { box-shadow:0 0 22px #ff304f66,inset 0 0 25px #ff304f2b; } }
footer { position:relative; padding:28px 20px; color:#858aa9; border-top:1px solid var(--line); text-align:center; font-size:.76rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:900px) { .gear-group--armor .gear-slot-grid,.gear-group--accessories .gear-slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }@media (max-width:780px) { .hero { padding:72px 0 54px; }.profile-header { grid-template-columns:92px 1fr; padding:23px; gap:18px; }.character-image { width:92px; height:92px; }.profile-origin { grid-column:1/-1; border-left:0; border-top:1px solid #ffffff22; padding:16px 0 0; }.stat-grid { grid-template-columns:repeat(2,1fr); }.stat-section,.equipment-section { padding:27px 23px; }.unavailable-section { margin:0 23px 23px; } }
@media (max-width:460px) { .page-shell { width:min(100% - 26px,1180px); }.topbar { height:76px; }.region-lock { font-size:.62rem; padding:7px 9px; }.search-panel { flex-direction:column; }.search-panel button { width:100%; }.profile-header { grid-template-columns:1fr; }.character-image { width:90px; height:90px; } }
@media (max-width:620px) { .item-detail-grid { grid-template-columns:1fr; } }

/* Character identity header */
.profile-header { grid-template-columns:176px minmax(0,1fr) 205px; gap:30px; padding:34px 38px; background:linear-gradient(120deg,#28234f 0%,#1b2841 57%,#152238 100%); }
.character-image { width:176px; height:176px; }
.profile-identity { min-width:0; }
.world-badge { display:inline-flex; align-items:center; gap:7px; min-height:25px; padding:4px 10px; border:1px solid #79dcff70; border-radius:999px; background:linear-gradient(135deg,#183852,#172841); box-shadow:inset 0 1px #c9f4ff29,0 6px 16px #09142435; color:#b5efff; font-size:.69rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.world-badge::before { content:"✦"; color:#75dcff; font-size:.74rem; }
.profile-identity h2 { margin-top:8px; }
.identity-facts { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:8px; }
.class-level { display:inline-flex; align-items:center; min-height:30px; margin:0; padding:4px 10px; border:1px solid #ffffff1c; border-radius:7px; background:#0d1322a6; color:#b7bdd7; font-size:.82rem; font-weight:700; letter-spacing:.01em; }
.guild-card { display:inline-flex; align-items:center; min-height:30px; margin:0; padding:4px 11px; border:1px solid #ffba5d83; border-radius:7px; background:linear-gradient(135deg,#3e2b23,#241b27); box-shadow:inset 0 1px #ffe0aa23; color:#ffc773; font-size:.77rem; font-weight:900; letter-spacing:.04em; }
.union-card,.popularity-card { display:inline-flex; align-items:center; min-height:30px; margin:0; padding:4px 10px; border:1px solid #ffffff26; border-radius:7px; background:#11182aa8; color:#d5d9e8; font-size:.77rem; font-weight:800; letter-spacing:.01em; }
.profile-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:13px; }
.profile-submit,.profile-upload { margin:0; }
.profile-origin { align-self:center; min-width:0; padding:17px 18px; border:1px solid #90b8e640; border-radius:12px; background:linear-gradient(145deg,#17283c,#111b30); box-shadow:inset 0 1px #d7efff16; }
.profile-origin strong { color:#eff5ff; font-size:1.02rem; }
.profile-origin small { max-width:none; color:#aeb9d1; line-height:1.3; }

@media (max-width:780px) {
  .profile-header { grid-template-columns:92px minmax(0,1fr); padding:23px; gap:18px; }
  .character-image { width:92px; height:92px; }
  .profile-origin { grid-column:1 / -1; padding:14px 16px; }
}

@media (max-width:460px) {
  .profile-header { grid-template-columns:1fr; }
  .profile-actions { align-items:stretch; }
  .profile-submit,.profile-upload { justify-content:center; }
}

/* Character stats hierarchy */
.stat-grid { display:grid; grid-template-columns:minmax(330px,1.08fr) minmax(0,1.92fr); gap:16px; margin-top:14px; }
.stat-card--combat-power { display:flex; flex-direction:column; justify-content:center; min-height:250px; padding:30px; overflow:hidden; border-color:#9cff6db8; background:radial-gradient(circle at 84% 12%,#aaff8036 0 2px,transparent 3px),radial-gradient(circle at 89% 17%,#aaff8026 0 1px,transparent 2px),radial-gradient(circle at 74% 0%,#69d9571e 0 20%,transparent 48%),linear-gradient(145deg,#1c4425,#0f1c1d 58%,#111324); box-shadow:inset 0 1px #efffe33b,0 18px 38px #07150a77,0 0 26px #8eff5821; }
.stat-card--combat-power span { color:#d2ffc3; font-size:.88rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.stat-card--combat-power strong { margin-top:15px; color:#b6ff90; font-size:clamp(2.7rem,4.5vw,4.3rem); line-height:.9; letter-spacing:-.075em; text-shadow:0 0 24px #8eff586b; }
.stat-details-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.stat-card--detail { display:flex; flex-direction:column; justify-content:center; min-height:98px; padding:15px; border-color:#38405e; background:linear-gradient(145deg,#15182a,#101221); }
.stat-card--detail strong { margin-top:10px; color:#9eff60; font-size:1.15rem; }
.stat-card--range { border-color:#5c9bc473; background:linear-gradient(145deg,#142536,#101221); }
.stat-card--range strong { color:#9be6ff; }

@media (max-width:780px) {
  .stat-grid { grid-template-columns:1fr; }
  .stat-card--combat-power { min-height:164px; }
}

@media (max-width:560px) {
  .stat-details-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Keep the neutral stat panel distinct from green potential grades. */
.item-detail-block--stats {
  border-color:#77c4ff88;
  background:linear-gradient(145deg,#132638,#0b0d19);
}

.item-detail-block--stats h5 { color:#9adfff; }

/* Scroll help stays below its badge, within the expanded equipment card. */
.equipment-card.is-expanded .item-detail-panel { overflow:visible; }
.scroll-tooltip {
  top:calc(100% + 8px);
  right:auto;
  bottom:auto;
  left:0;
}

.scroll-upgrade-badge {
  display:inline-grid;
  min-height:20px;
  place-items:center;
  padding:2px 5px;
  border:1px solid #f8ce54aa;
  border-radius:5px;
  background:linear-gradient(135deg,#5c4513,#2c220d);
  color:#ffe27c;
  font-size:.67rem;
  font-weight:900;
  line-height:1;
  box-shadow:inset 0 1px #fff2a33b,0 0 10px #f3b82c23;
}

/* Neutral information panels: rarity colors stay reserved for potential grades. */
.item-detail-block--stats,
.item-detail-block--soul {
  border-color:#a6adba88;
  background:linear-gradient(145deg,#1b1d27,#0b0d19);
}

.item-detail-block--stats h5,
.item-detail-block--soul h5 { color:#d9ddea; }

.set-effects-section {
  padding:28px 34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(115deg,#13172a,#101221);
}

.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.section-caption { margin:0; color:var(--muted); font-size:.75rem; }
.set-effects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start; gap:12px; margin-top:14px; }
.set-effect-card { overflow:hidden; border:1px solid #7664bc88; border-radius:10px; background:linear-gradient(145deg,#18172d,#10111e); box-shadow:inset 0 1px #ffffff09; }
.set-effect-trigger { display:grid; grid-template-columns:minmax(0,1fr) auto auto; width:100%; min-height:74px; align-items:center; gap:10px; padding:16px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; }
.set-effect-trigger:hover { background:#ffffff08; filter:none; }
.set-effect-trigger:focus-visible { outline:2px solid var(--violet); outline-offset:-2px; }
.set-effect-card h3 { margin:0; color:var(--ink); font-size:1rem; }
.set-effect-count { display:inline-grid; min-width:48px; min-height:27px; place-items:center; padding:3px 7px; border:1px solid #c9b5ff77; border-radius:6px; background:#2a2445; color:#ded0ff; font-size:.78rem; font-weight:900; }
.set-effect-expand-icon { color:#c9b5ff; font-size:1rem; transition:transform .2s ease; }
.set-effect-card.is-expanded .set-effect-expand-icon { transform:rotate(180deg); }
.set-effect-detail { display:none; padding:0 16px 16px; border-top:1px solid #ffffff16; }
.set-effect-card.is-expanded .set-effect-detail { display:block; }
.set-effect-card ul { display:grid; gap:7px; margin:13px 0 0; padding:0; list-style:none; }
.set-effect-card li { display:grid; grid-template-columns:48px minmax(0,1fr); gap:8px; color:var(--muted); font-size:.74rem; line-height:1.4; }
.set-effect-card li strong { color:#f0e8ff; }

@media (max-width:780px) {
  .set-effects-section { padding:23px; }
}

/* Reusable top-level section disclosure: add this structure for future profile panels. */
.collapsible-section { padding:0; }
.section-collapse-trigger { display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.section-collapse-trigger:hover { background:#ffffff05; filter:none; }
.section-collapse-trigger:focus-visible { outline:2px solid var(--violet); outline-offset:-3px; }
.section-collapse-trigger .eyebrow { margin:0; }
.section-collapse-icon { flex:0 0 auto; color:var(--muted); font-size:1.35rem; line-height:1; transition:transform .2s ease,color .2s ease; }
.section-collapse-trigger[aria-expanded="true"] .section-collapse-icon { color:var(--leaf); transform:rotate(180deg); }
.collapsible-section.is-collapsed .section-collapse-content { display:none; }
.equipment-section .section-collapse-trigger { padding:38px 34px 0; }
.equipment-section .section-collapse-content { padding:0 34px 38px; }
.set-effects-section .section-collapse-trigger { padding:28px 34px 0; }
.set-effects-section .section-collapse-content { padding:0 34px 28px; }

/* A collapsed top-level panel should read as a deliberate card, not a missing section. */
.collapsible-section.is-collapsed {
  margin:14px 18px;
  border:1px solid #444a70;
  border-radius:13px;
  background:linear-gradient(115deg,#171a2d,#101321);
  box-shadow:inset 0 1px #ffffff0b,0 12px 24px #00000024;
}
.set-effects-section.is-collapsed,.equipment-section.is-collapsed { border-top:1px solid #444a70; border-bottom:1px solid #444a70; }
.collapsible-section.is-collapsed .section-collapse-trigger {
  min-height:66px;
  padding:14px 16px 14px 18px;
  border-radius:12px;
  background:radial-gradient(circle at 96% 50%,#9eff6010,transparent 26%),linear-gradient(105deg,#1d2037,#111321);
}
.collapsible-section.is-collapsed .section-collapse-trigger:hover { background:radial-gradient(circle at 96% 50%,#9eff6020,transparent 30%),linear-gradient(105deg,#222640,#15172a); }
.collapsible-section.is-collapsed .section-collapse-trigger .eyebrow { display:flex; align-items:center; gap:10px; font-size:.75rem; }
.collapsible-section.is-collapsed .section-collapse-trigger .eyebrow::before { content:""; width:8px; height:8px; flex:0 0 auto; border:1px solid #baff8b; border-radius:2px; background:#9eff60; box-shadow:0 0 11px #9eff6088; transform:rotate(45deg); }
.section-collapse-icon { width:32px; height:32px; flex:0 0 auto; background:url("/(C)%20section-expand-icon.svg") center/contain no-repeat; color:transparent; font-size:0; transform:none !important; filter:drop-shadow(0 0 5px #a896ff44); }
.section-collapse-trigger[aria-expanded="true"] .section-collapse-icon { background-image:url("/(C)%20section-collapse-icon.svg"); filter:drop-shadow(0 0 6px #9eff6066); }

@media (max-width:780px) {
  .equipment-section .section-collapse-trigger { padding:27px 23px 0; }
  .equipment-section .section-collapse-content { padding:0 23px 27px; }
  .set-effects-section .section-collapse-trigger { padding:23px 23px 0; }
  .set-effects-section .section-collapse-content { padding:0 23px 23px; }
  .collapsible-section.is-collapsed { margin:12px 10px; }
  .collapsible-section.is-collapsed .section-collapse-trigger { min-height:60px; padding:12px 13px; }
}

/* Combat Power is the primary stat: center it and give the value visual energy. */
.stat-card--combat-power {
  position:relative;
  isolation:isolate;
  align-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 48%,#c4ff8b2e 0 12%,transparent 42%),
    radial-gradient(circle at 50% 50%,transparent 0 31%,#aaff8026 31.5% 32%,transparent 33%),
    radial-gradient(circle at 50% 50%,transparent 0 42%,#aaff8016 42.5% 43%,transparent 44%),
    linear-gradient(145deg,#193e24,#0e1b1d 61%,#101321);
}

.stat-card--combat-power::before,
.stat-card--combat-power::after {
  position:absolute;
  z-index:-1;
  content:"";
  border:1px solid #baff8b2e;
  border-radius:999px;
  pointer-events:none;
}

.stat-card--combat-power::before { width:72%; height:36%; transform:rotate(-10deg); }
.stat-card--combat-power::after { width:59%; height:52%; transform:rotate(17deg); }

.stat-card--combat-power span {
  width:100%;
  color:#e2ffd7;
  font-size:.82rem;
  letter-spacing:.17em;
  text-align:center;
}

.stat-card--combat-power strong {
  width:100%;
  margin-top:14px;
  color:#c4ff9c;
  font-size:clamp(2.65rem,4.15vw,4.25rem);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.065em;
  line-height:1;
  text-align:center;
  text-shadow:0 0 10px #cdffa163,0 0 28px #8eff5855,0 4px 0 #09200c;
}

.pet-identity-grid,.gear-group--pets .gear-slot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:10px; }
.pet-identity-grid { margin-top:14px; }
.gear-group--pets .gear-slot-grid { margin-top:10px; }
.pet-identity-card { display:flex; height:70px; min-width:0; align-items:center; justify-content:center; gap:10px; padding:9px 12px; border:1px solid #4b5072; border-radius:10px; background:linear-gradient(145deg,#171a2d,#10121f); color:#d9ddea; font-size:.78rem; font-weight:800; }
.pet-identity-card img { width:50px; height:50px; flex:0 0 auto; object-fit:contain; image-rendering:auto; }
.pet-identity-card span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gear-group--pets .equipment-card:not(.is-expanded) .equipment-card-trigger { min-height:86px; }
.pet-equipment-card { display:block; min-height:0; }
.pet-empty-slot { min-height:86px; }

.stat-card--ability { justify-content:flex-start; padding:12px 15px; border-color:#70778a; background:linear-gradient(145deg,#1b1d27,#10121d); }
.stat-card--ability > span { color:#d9ddea; font-weight:800; }
.inner-ability-lines { display:grid; gap:3px; margin-top:8px; }
.inner-ability-lines p { overflow:hidden; margin:0; color:#c9cdd8; font-size:.67rem; font-weight:700; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.inner-ability-lines .inner-ability-unavailable { color:var(--muted); font-weight:600; }

.equipment-card.is-expanded .item-detail-grid { padding-top:10px; }
.item-detail-block--grade li > span:empty { display:none; }
.item-detail-block--grade li { justify-content:flex-start; }
.item-detail-block--grade li strong { max-width:none; text-align:left; }