.stellar-layout { display:grid; grid-template-columns:180px minmax(0,1fr) 200px; gap:20px; align-items:start; }
.stellar-overview,.stellar-details { border:1px solid #c47b6a40; background:linear-gradient(135deg,#54223819,#10141c); border-radius:10px; padding:18px; }
.stellar-layout h4 { font:500 .86rem var(--font-ui); color:#efceaa; margin:0 0 14px; }.stellar-note { font-size:.72rem; line-height:1.8; color:#bca7bf; }.stellar-summary { margin:17px 0; }.stellar-summary>div { padding:10px 0; border-bottom:1px solid #b78b6026; }.stellar-summary dt { font-size:.63rem; color:#b794a8; margin-bottom:6px; }.stellar-summary dd { margin:0; font-size:.8rem; color:#e9c5a2; overflow-wrap:anywhere; }.stellar-demo { color:#d99997; font-size:.55rem; letter-spacing:1px; line-height:1.8; margin:22px 0 9px; }
.stellar-map-panel { min-width:0; }.stellar-viewport { width:100%; overflow:auto; border:1px solid #bc85642b; border-radius:12px; scrollbar-width:thin; scrollbar-color:#78585d #10121b; background:radial-gradient(ellipse,#96344c12,transparent 70%),#0b1119; }.stellar-board { position:relative; width:100%; min-width:420px; aspect-ratio:1; background:radial-gradient(circle at 50% 50%,#b1863b12,transparent 65%); }
.stellar-lines { position:absolute; inset:0; width:100%; height:100%; }
.loyalty-profile .stellar-node { position:absolute; display:grid; place-items:center; transform:translate(-50%,-50%); width:5.5%; height:5.5%; padding:0; border:1px solid var(--node-color); border-radius:50%; color:var(--node-color); background:radial-gradient(circle at 35% 30%,#343644,#080e17 70%); box-shadow:0 0 0 3px #0f1420,0 0 0 4px #66748465,inset 0 0 0 3px #8b9ab22b; font-size:clamp(.55rem,1vw,.72rem); z-index:1; }
.stellar-node::after { content:''; position:absolute; inset:-7px; border:1px solid var(--node-color); opacity:.35; clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%); background:var(--node-color); z-index:-1; }
.loyalty-profile .stellar-node.is-equipped { background:radial-gradient(circle at 40% 35%,#8c71734d,#111322 70%); box-shadow:0 0 0 3px #0d141e,0 0 0 4px var(--node-color),0 0 14px #d59b4b26; }
.loyalty-profile .stellar-node:hover,.loyalty-profile .stellar-node[aria-pressed=true] { border-color:#f4d5a5; background:#512d3c; box-shadow:0 0 0 3px #0d141e,0 0 0 5px #e5b47c,0 0 22px #df7b7b66; }
.loyalty-profile .stellar-core { position:absolute; width:10%; height:10%; left:50%; top:50%; transform:translate(-50%,-50%); padding:0; border:1px solid #dcae7e77; border-radius:50%; background:#12232b; box-shadow:0 0 28px #c7a0672b; z-index:2; }.stellar-core img { display:block; width:100%; height:100%; object-fit:contain; }.stellar-selected-title { display:block; font-size:1rem; color:#f1c68d; margin-bottom:12px; }.stellar-selected-state { font-size:.67rem; color:#e3a6ad; line-height:1.8; }
.stellar-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:13px; margin-top:17px; }.stellar-legend>span { display:flex; align-items:center; gap:6px; color:#c7b4c7; font-size:.65rem; }.stellar-legend i { width:9px; height:9px; border-radius:50%; background:var(--grade-color); box-shadow:0 0 7px color-mix(in srgb,var(--grade-color),transparent 55%); }.stellar-map-caption { color:#a78fae; font-size:.63rem; line-height:1.8; text-align:center; margin-top:12px; }
@media(max-width:1150px) { .stellar-layout { grid-template-columns:minmax(0,1fr) 200px; }.stellar-overview { grid-column:1/-1; }.stellar-overview .stellar-summary { display:flex; flex-wrap:wrap; gap:25px; }.stellar-overview .stellar-summary>div { flex:1; min-width:100px; }.stellar-overview .stellar-demo { margin-top:12px; } }
@media(max-width:750px) { .stellar-layout { grid-template-columns:minmax(0,1fr); }.stellar-details { grid-row:3; }.stellar-details .stellar-summary { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }.stellar-board { min-width:480px; }.stellar-overview .stellar-summary { gap:12px; }.stellar-overview .stellar-summary>div { min-width:90px; } }
@media(prefers-reduced-motion:reduce) { .stellar-layout * { transition:none!important; animation:none!important; } }
.stellar-map-panel { max-width:820px; width:100%; justify-self:center; }
.stellar-viewport { border-color:#b58b6730; background:radial-gradient(ellipse at 50% 42%,#203a402b,transparent 72%),#0a1018; border-radius:10px; }
.stellar-board { background:radial-gradient(circle at 50% 50%,#3d5d6026,transparent 64%); }
.loyalty-profile .stellar-node { width:7.4%; height:7.4%; border:0; border-radius:50%; padding:0; background:none; box-shadow:none; }
.stellar-node::after { display:none; }.stellar-socket-art { display:block; width:100%; height:100%; overflow:visible; }
.loyalty-profile .stellar-node.is-equipped { background:none; box-shadow:none; }.stellar-node.is-equipped .stellar-socket-art { filter:drop-shadow(0 0 3px color-mix(in srgb,var(--node-color),transparent 50%)); }
.loyalty-profile .stellar-node:hover,.loyalty-profile .stellar-node[aria-pressed=true] { border:0; background:none; box-shadow:none; }.stellar-node:hover .stellar-socket-art,.stellar-node[aria-pressed=true] .stellar-socket-art { filter:drop-shadow(0 0 4px #e9be88aa); }
.stellar-grade-number { position:absolute; bottom:2%; right:4%; padding:1px 3px; border:1px solid var(--node-color); border-radius:3px; background:#0a111a; color:var(--node-color); font-size:clamp(.45rem,.65vw,.57rem); line-height:1.2; }
.loyalty-profile .stellar-core { width:10.5%; height:10.5%; border:1px solid #a6c1bf7a; background:radial-gradient(circle,#23616b55,#101c26); box-shadow:0 0 0 5px #7db7b411,0 0 34px #75c2c335; }.stellar-core img { filter:drop-shadow(0 0 5px #76c9c04d); }
.loyalty-profile .stellar-core { width:11%; height:11%; overflow:hidden; border:2px solid #a0d3c1b3; background:#0c2026; box-shadow:0 0 0 3px #08141d,0 0 0 4px #729d9b66,0 0 26px #74c2bd33; }
.stellar-core img { width:100%; height:100%; object-fit:cover; transform:scale(1.26); filter:none; }
.loyalty-profile .stellar-node { width:6.8%; height:6.8%; }.stellar-grade-number { bottom:0; right:0; border-radius:50%; min-width:12px; padding:2px; text-align:center; }
.stellar-native-attribute { position:absolute; left:21%; top:21%; width:58%; height:58%; overflow:hidden; border-radius:50%; z-index:1; background:#0a1520; pointer-events:none; }
.stellar-native-icon { position:absolute; left:0; top:0; display:block; width:160%; height:160%; max-width:none; object-fit:fill; filter:none; image-rendering:auto; }
.stellar-grade-number { z-index:2; bottom:-2%; right:-2%; }
.stellar-attribute-preview { display:flex; align-items:center; gap:10px; margin:17px 0; padding:12px 0; border-block:1px solid #c5976533; }.stellar-attribute-preview img { width:32px; height:32px; object-fit:contain; flex-shrink:0; filter:none; }.stellar-attribute-preview strong { color:#e2d5dc; font-size:.75rem; line-height:1.7; font-weight:500; }
.stellar-attribute-catalog { grid-column:1/-1; border:1px solid #bd7d6240; border-radius:10px; background:#10151d; padding:22px; margin-top:8px; }.stellar-attribute-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:19px; }.stellar-attribute-item { display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid #a7846026; background:#ffffff02; border-radius:7px; min-width:0; }.stellar-attribute-item img { width:32px; height:32px; object-fit:contain; flex-shrink:0; filter:none; }.stellar-attribute-item span { color:#d5c7d7; font-size:.73rem; line-height:1.6; }
@media(max-width:1000px) { .stellar-attribute-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:750px) { .stellar-attribute-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.stellar-attribute-catalog { padding:16px; } }
@media(max-width:430px) { .stellar-attribute-grid { grid-template-columns:1fr; } }
.stellar-layout { gap:26px; }.stellar-board { min-width:560px; }.stellar-viewport { padding:8px; box-sizing:border-box; }
.loyalty-profile .stellar-node { width:6%; height:6%; }.stellar-grade-number { right:1%; bottom:1%; min-width:11px; padding:1px; font-size:.5rem; }
.stellar-legend { gap:12px 18px; margin-top:22px; }.stellar-attribute-grid { gap:14px; }.stellar-attribute-item { padding:13px; gap:12px; }
@media(max-width:750px) { .stellar-layout { gap:20px; }.stellar-attribute-grid { gap:10px; }.stellar-attribute-item { padding:11px; } }
.stellar-overview,.stellar-details { position:relative; overflow:hidden; padding:22px 19px; border:1px solid #c18a6661; background:radial-gradient(ellipse at top left,#b13d5422,transparent 68%),linear-gradient(155deg,#1e1a26,#0c111b); box-shadow:inset 0 1px #edd9a70a,0 12px 28px #00000024; }
.stellar-overview::before,.stellar-details::before { content:''; position:absolute; left:19px; right:19px; top:0; height:2px; background:linear-gradient(90deg,#d2a56f,#d3677f,transparent); pointer-events:none; }.stellar-details { border-color:color-mix(in srgb,var(--selected-color,#d5af7d),transparent 52%); transition:border-color .25s; }
.stellar-panel-kicker { display:block; color:#d08e9f; font-size:.51rem; letter-spacing:1.5px; line-height:1.8; margin-bottom:13px; }.stellar-layout h4 { color:#f2dab9; font-size:.96rem; line-height:1.6; margin-bottom:11px; }
.stellar-overview .stellar-summary>div,.stellar-details .stellar-summary>div { padding:12px 0; }.stellar-summary dt { font-size:.62rem; color:#b29bad; }.stellar-summary dd { font-size:.83rem; color:#ead0b4; }
.stellar-selected-title { font-size:1.65rem; color:#f0d6b2; letter-spacing:-.5px; padding:7px 0; }.stellar-selected-state { display:inline-flex; align-items:center; gap:7px; border:1px solid #ac798e44; border-radius:5px; background:#94415c13; padding:6px 9px; color:#c8b6ca; font-size:.6rem; }
.stellar-selected-state::before { content:''; width:5px; height:5px; border-radius:50%; background:#98a3b8; flex-shrink:0; }.stellar-selected-state.is-filled { color:#efc5a3; border-color:#c9956559; background:#d09a4510; }.stellar-selected-state.is-filled::before { background:#e9bd7b; box-shadow:0 0 7px #dcae6677; }
.stellar-attribute-preview { border:1px solid #a67d6438; border-radius:8px; padding:12px 10px; background:linear-gradient(115deg,#9e4a6517,#0b121b); }.stellar-attribute-preview strong { color:#f0d9d8; }
.stellar-coverage { border:1px solid #bc8e5b40; border-radius:9px; padding:16px 12px; margin:20px 0; background:#be943e07; }.stellar-coverage>strong { color:#efc38a; font-size:2.05rem; font-weight:500; font-variant-numeric:tabular-nums; }.stellar-coverage>span { display:block; color:#b69cae; font-size:.65rem; margin:7px 0 15px; }.stellar-coverage progress { display:block; width:100%; height:4px; border:0; accent-color:#d18a77; border-radius:4px; }.stellar-coverage progress::-webkit-progress-bar { background:#302532; border-radius:4px; }.stellar-coverage progress::-webkit-progress-value { background:linear-gradient(90deg,#ad405d,#d0ab73); border-radius:4px; }
.stellar-orbit-accent { transform-origin:360px 360px; animation:stellarOrbit 85s linear infinite; }.stellar-connection-flow { stroke-dasharray:5 37; animation:stellarEnergy 3.2s linear infinite; opacity:.55; }.stellar-connection-flow.is-selected { stroke:#f5c99d; opacity:.95; stroke-dasharray:8 27; animation-duration:1.8s; }.stellar-connection-idle { opacity:0; }.stellar-path-selected { stroke:#de9b8b; stroke-width:2; }
.loyalty-profile .stellar-core { animation:stellarCoreGlow 5s ease-in-out infinite; }.loyalty-profile .stellar-node[aria-pressed=true]::before { content:''; position:absolute; inset:-3px; border:1px solid #f1c995; border-radius:50%; opacity:.7; animation:stellarSelectedPulse 2.8s ease-in-out infinite; pointer-events:none; }
.loyalty-profile .stellar-effects-toggle { display:block; margin:14px auto 0; padding:7px 13px; color:#c8a28d; font-size:.63rem; background:#1b1420; border-color:#a7745c38; }
.stellar-layout.is-motion-paused *,.stellar-layout.is-motion-paused *::before { animation-play-state:paused!important; }
@keyframes stellarEnergy { to { stroke-dashoffset:-84; } }@keyframes stellarOrbit { to { transform:rotate(360deg); } }
@keyframes stellarCoreGlow { 0%,100% { box-shadow:0 0 0 3px #08141d,0 0 0 4px #729d9b66,0 0 24px #74c2bd26; }50% { box-shadow:0 0 0 3px #08141d,0 0 0 4px #adbd9977,0 0 32px #74c2bd40; } }
@keyframes stellarSelectedPulse { 0%,100% { opacity:.35; }50% { opacity:.95; } }
@media(prefers-reduced-motion:reduce) { .stellar-layout *,.stellar-layout *::before { animation:none!important; transition:none!important; }.stellar-effects-toggle { display:none!important; } }