/* Brighter account identity card in the player cabinet. */
.profile {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 0 13px;
  padding: 15px 12px 16px;
  overflow: hidden;
  border: 1px solid rgba(111, 202, 222, .3);
  border-top: 2px solid rgba(136, 215, 230, .68);
  border-radius: 12px;
  background: radial-gradient(ellipse at 10% 0%, rgba(81, 182, 207, .2), transparent 65%), linear-gradient(135deg, rgba(22, 47, 60, .92), rgba(8, 19, 27, .96));
  box-shadow: inset 0 1px rgba(236, 250, 255, .04), 0 10px 28px rgba(0, 0, 0, .2), 0 0 24px rgba(84, 187, 211, .1);
}
.profile-seal {
  grid-row: 1 / span 3;
  width: 54px;
  height: 54px;
  margin: 0;
  border-color: rgba(241, 208, 132, .8);
  background: radial-gradient(circle at 35% 28%, rgba(143, 224, 238, .34), rgba(9, 26, 36, .94) 72%);
  box-shadow: 0 0 0 4px rgba(116, 204, 222, .07), 0 0 22px rgba(91, 200, 222, .2), inset 0 0 18px rgba(222, 196, 126, .13);
}
.profile small {
  width: fit-content;
  padding: 2px 6px;
  border-left: 2px solid rgba(136, 215, 230, .7);
  border-radius: 2px;
  background: rgba(111, 194, 213, .08);
  color: #a8c9d0;
  letter-spacing: .14em;
}
.profile strong {
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  background: linear-gradient(105deg, #f2d488 0%, #9ce0bb 26%, #75d7e5 53%, #c3c9f1 76%, #f2d488 100%);
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(103, 205, 220, .14);
  animation: account-name-chameleon 8s ease-in-out infinite alternate;
}
@keyframes account-name-chameleon { to { background-position: 100% 50%; } }
.profile-state {
  width: fit-content;
  max-width: 100%;
  margin-top: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(136, 215, 230, .13);
  border-radius: 999px;
  background: rgba(76, 159, 180, .1);
  color: #c7d8d9;
  line-height: 1.3;
}
.profile-state i {
  flex: none;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 10px var(--ice), 0 0 18px rgba(136, 215, 230, .5);
}
.password-form { display: grid; gap: 12px; margin-top: 15px; }
.password-form label { display: grid; gap: 6px; color: #c3cbd0; font-size: 11px; letter-spacing: .04em; }
.password-form input { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid rgba(139, 190, 203, .22); border-radius: 5px; outline: none; background: rgba(4, 10, 16, .72); color: #f1ead9; font: 14px 'Source Sans 3', Arial, sans-serif; letter-spacing: normal; transition: border-color .18s ease, box-shadow .18s ease; }
.password-form input:focus { border-color: rgba(139, 213, 230, .7); box-shadow: 0 0 0 3px rgba(93, 174, 194, .12); }
.password-form label small { color: #829198; font-size: 10px; letter-spacing: 0; }
.password-submit { min-height: 40px; margin-top: 2px; border: 1px solid rgba(235, 207, 141, .65); border-radius: 5px; background: linear-gradient(135deg, #e7cf8e, #b8924f); color: #19150d; font: 700 11px 'Source Sans 3', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: filter .18s ease, box-shadow .18s ease; }
.password-submit:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 18px rgba(223, 189, 118, .16); }
.password-submit:disabled { opacity: .65; cursor: wait; }
.password-message { margin: 0; padding: 9px 10px; border: 1px solid rgba(139, 213, 230, .18); border-radius: 5px; background: rgba(73, 153, 174, .07); color: #c5d8da; font-size: 11px; line-height: 1.45; }
.password-message.success { border-color: rgba(99, 204, 150, .28); color: #9bdfb5; }
.password-message.error { border-color: rgba(236, 151, 132, .3); background: rgba(49, 21, 23, .35); color: #efb3a5; }

.character {
  grid-template-columns: 50px minmax(0, 1fr) auto;
  transition: border-color .18s ease, background .18s ease;
}
.character:has(.character-inspect[aria-expanded="true"]) {
  border-color: rgba(126, 202, 220, .3);
  background: linear-gradient(115deg, rgba(20, 43, 56, .45), rgba(9, 17, 24, .86));
}
.character-inspect {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(133, 201, 216, .2);
  border-radius: 6px;
  background: rgba(65, 135, 156, .1);
  color: #aed7de;
  font: 600 11px 'Source Sans 3', Arial, sans-serif;
  letter-spacing: .025em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.character-inspect:hover,
.character-inspect[aria-expanded="true"] {
  border-color: rgba(140, 219, 234, .44);
  background: rgba(73, 154, 177, .2);
  color: #e0f7fa;
}
.character-inspect-icon { color: #ecd18d; font-size: 16px; line-height: 1; }
.character-equipment {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(130, 198, 214, .16);
  border-radius: 8px;
  background: rgba(3, 10, 16, .44);
}
.gear-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.gear-heading strong { color: #e8ddb9; font: 15px Marcellus, Georgia, serif; }
.gear-armory-link { color: #9dd4df; font-size: 11px; text-decoration: none; }
.gear-armory-link:hover { color: #e3d098; text-decoration: underline; }
.gear-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.gear-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 9px; min-width: 0; padding: 8px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 6px; background: rgba(18, 29, 38, .62); }
.gear-item-icon { display: grid; place-items: center; width: 36px; height: 36px; object-fit: cover; border: 1px solid rgba(223, 189, 118, .23); border-radius: 5px; background: radial-gradient(circle, rgba(88, 151, 169, .18), rgba(5, 12, 18, .92)); }
.gear-item-placeholder { color: #a6cdd4; font-size: 15px; }
.gear-item-details { min-width: 0; }
.gear-item-name { display: block; overflow-wrap: anywhere; font-size: 12px; line-height: 1.35; }
.gear-item-meta { display: block; margin-top: 3px; color: #8fa1a9; font-size: 10px; }
.gear-item-tooltip { margin-top: 6px; color: #aebcc1; font-size: 10px; line-height: 1.45; }
.gear-item-tooltip summary { color: #8fc5d0; cursor: pointer; }
.gear-item-tooltip p { margin: 3px 0 0; }
.gear-message { margin: 3px 0; color: #aab9bd; font-size: 12px; }
.gear-error { color: #e4a79b; }
.gear-item[tabindex="0"] { cursor: help; }
.gear-item[tabindex="0"]:focus-visible { outline: 2px solid #91cddd; outline-offset: 2px; }
.item-tooltip { position: fixed; top: 0; left: 0; z-index: 60; width: min(320px, calc(100vw - 24px)); padding: 13px 15px; border: 1px solid #05101a; border-radius: 6px; background: linear-gradient(#08141ff5, #040b12fa); box-shadow: 0 20px 45px #0009, inset 0 0 0 1px #ffffff1a, 0 0 0 1px #00000080; pointer-events: none; font-size: 13px; line-height: 1.45; }
.item-tooltip::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(221, 194, 139, .15); border-radius: 5px; pointer-events: none; }
.tt-name { font: 400 17px/1.25 Marcellus, Georgia, serif; text-shadow: 0 0 10px #0009; }
.tt-quality { margin-bottom: 7px; color: #8ba3b0; font-size: 11px; }
.tt-line { margin: 2px 0; white-space: pre-wrap; }
.tt-ilvl { color: #e6d7a7; }
.tt-meta, .tt-type, .tt-damage, .tt-speed, .tt-armor, .tt-durability, .tt-price { color: #f2f0e8; }
.tt-dps { color: #a7b6bd; }
.tt-stat, .tt-resistance, .tt-bonus, .tt-effect { color: #1eff00; }
.tt-requirement { color: #e9d6a8; }
.tt-flavor { margin-top: 7px; color: #ffd100; font-style: italic; }
.tt-sockets { display: flex; gap: 6px; margin: 8px 0 3px; }
.tt-socket { width: 13px; height: 13px; border-radius: 50%; color: #dcdcdc; background: currentColor; box-shadow: inset 0 0 0 2px #000b, 0 0 6px currentColor; }
.tt-socket-red { color: #ff2b2b; }
.tt-socket-yellow { color: #ffd700; }
.tt-socket-blue { color: #3b7dff; }
.tt-socket-meta { color: #dcdcdc; }
.tt-socket-prismatic { color: #c9a6ff; }

@media (max-width: 680px) {
  .character { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .character-equipment { padding: 10px; }
  .gear-list { grid-template-columns: minmax(0, 1fr); }
  .gear-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 500px) {
  .item-tooltip { font-size: 12px; }
  .tt-name { font-size: 15px; }
}

@media (max-width: 680px) {
  .profile { grid-template-columns: 43px minmax(0, 1fr); gap: 0 11px; padding: 11px; }
  .profile-seal { grid-row: 1 / span 3; width: 43px; height: 43px; font-size: 16px; }
  .profile-state { margin-top: 5px; padding: 4px 7px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile strong { animation: none; }
}

/* Realm service cards */
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; grid-auto-rows:1fr; }
.service-grid > .service { appearance:none; box-sizing:border-box; display:grid; grid-template-columns:44px minmax(0,1fr) 12px; align-items:center; gap:16px; width:100%; min-height:108px; margin:0; padding:22px; border:1px solid #29414f; border-radius:10px; background:linear-gradient(120deg,#102330,#0c1b27); color:#e9dfca; font:inherit; text-align:left; cursor:pointer; box-shadow:inset 0 1px 0 #ffffff04; transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease; }
.service-grid > .service:hover { border-color:#a68b53; background:linear-gradient(120deg,#162d3b,#102332); box-shadow:inset 0 1px 0 #e1be6e12,0 0 16px #97c9e008; }
.service-grid > .service:focus-visible { outline:2px solid #dbbd79; outline-offset:3px; }
.service-grid > .service:active { background:#1a3342; border-color:#e1bf79; }
.service-grid .service-icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid #b3975b45; border-radius:10px; background:#c9a85e0c; color:#d5b777; }
.service-grid .service-icon svg { display:block; width:25px; height:25px; }
.service-grid .service-copy { display:block; min-width:0; text-transform:none; letter-spacing:normal; }
.service-grid .service-copy strong { display:block; margin:0 0 7px; color:#ead9b3; font-size:14px; font-weight:600; line-height:1.4; }
.service-grid .service-copy > span { display:block; margin:0; color:#a0b5c2; font-size:12px; line-height:1.55; text-transform:none; letter-spacing:normal; }
.service-grid .service-arrow { color:#8ba7b6; font-size:25px; line-height:1; }
.service-grid .service:hover .service-arrow { color:#e0c287; }
.content:has([data-panel="character-tools"].active) .service[data-view-target="character-tools"],
.content:has([data-panel="support"].active) .service[data-view-target="support"],
.content:has([data-panel="community-profile"].active) .service[data-view-target="community-profile"],
.content:has([data-panel="activity"].active) .service[data-view-target="activity"],
.content:has([data-panel="shop"].active) .service[data-view-target="shop"] { border-color:#d5b777; background:linear-gradient(120deg,#1a3040,#142737); box-shadow:inset 3px 0 0 #d5b777; }
@media(max-width:680px) { .service-grid { grid-template-columns:minmax(0,1fr); gap:12px; } .service-grid > .service { min-height:104px; padding:18px; gap:13px; } }
@media(prefers-reduced-motion:reduce) { .service-grid > .service { transition:none; } }

/* Character tools only: static race/gender/class portraits, native inspect action. */
#character-tools-list .tool-characters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
#character-tools-list .tool-character { display:block; min-width:0; padding:0; overflow:hidden; border:1px solid #2b414e; border-radius:12px; background:#0c1c28; transition:border-color .18s ease,box-shadow .18s ease; }
#character-tools-list .tool-character:hover { border-color:#a58c58; box-shadow:0 7px 22px #0003; }
#character-tools-list .hero-summary { position:relative; box-sizing:border-box; display:grid; grid-template-columns:144px minmax(0,1fr); grid-template-rows:1fr auto; align-items:center; gap:0; width:100%; min-height:190px; padding:0; margin:0; border:0; border-radius:0; --hero-surface:#0c1c28; background:var(--hero-surface); color:#dfd7c7; font:inherit; text-align:left; cursor:pointer; }
#character-tools-list .hero-summary:hover { --hero-surface:#102332; background:var(--hero-surface); }
#character-tools-list .hero-summary:focus-visible { outline:2px solid #d6b772; outline-offset:-3px; }
#character-tools-list .hero-summary[aria-expanded="true"] { box-shadow:inset 0 -2px 0 #c4a367; }
#character-tools-list .hero-portrait { position:relative; grid-row:1 / 3; display:block; align-self:stretch; width:144px; min-height:190px; overflow:hidden; background:radial-gradient(ellipse at 35% 45%,color-mix(in srgb,var(--hero-class) 24%,#132839),#132839 75%); }
#character-tools-list .hero-portrait::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 35%,var(--hero-surface) 100%),radial-gradient(ellipse at 35% 50%,color-mix(in srgb,var(--hero-class) 15%,transparent),transparent 75%),linear-gradient(0deg,var(--hero-surface),transparent 45%,#07121c55); }
#character-tools-list .hero-portrait-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% center; opacity:1; mask-image:linear-gradient(90deg,#000 65%,transparent); }
#character-tools-list .hero-portrait-fallback { position:absolute; inset:0; display:grid; place-content:center; color:var(--hero-class); font-size:52px; text-shadow:0 0 22px currentColor; }
#character-tools-list .hero-class-icon { position:absolute; width:44px; height:44px; left:34px; top:calc(50% - 22px); border-radius:50%; box-shadow:0 0 20px var(--hero-class); }
#character-tools-list .hero-portrait-image[hidden],#character-tools-list .hero-class-icon[hidden] { display:none; }
#character-tools-list .hero-identity { display:flex; flex-direction:column; min-width:0; padding:22px 18px 8px 6px; gap:5px; }
#character-tools-list .hero-name { overflow-wrap:anywhere; color:#ecdfc2; font:400 21px/1.2 Marcellus,Georgia,serif; }
#character-tools-list .hero-race { color:#a5b8c4; font-size:12px; }
#character-tools-list .hero-class { color:var(--hero-class); font-weight:600; font-size:13px; }
#character-tools-list .hero-level { color:#bfccd5; font-size:12px; }
#character-tools-list .hero-faction { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:11px; }
#character-tools-list .hero-faction svg { width:19px; height:19px; }
#character-tools-list .hero-alliance { color:#d7bb77; }
#character-tools-list .hero-horde { color:#df8d87; }
#character-tools-list .hero-action { padding:6px 18px 18px 6px; color:#c9b37e; font-size:10px; letter-spacing:.035em; }
#character-tools-list .character-equipment { margin:0; border-radius:0; }
@media(max-width:680px) { #character-tools-list .tool-characters { grid-template-columns:minmax(0,1fr); gap:14px; } #character-tools-list .hero-summary { grid-template-columns:110px minmax(0,1fr); min-height:180px; } #character-tools-list .hero-portrait { width:110px; min-height:180px; } #character-tools-list .hero-name { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { #character-tools-list .tool-character { transition:none; } }

#character-tools-list .hero-portrait-fallback[hidden] { display:none; }

/* In-game support: presentation only. */
[data-panel="support"] { --support-line:#6aa4bf42; --support-gold:#dfc18a; }
[data-panel="support"] .notice { padding:22px 25px; border:1px solid var(--support-line); border-left:3px solid #b99d60; border-radius:11px; background:linear-gradient(115deg,#132b3b,#0c1d2b); color:#b3c8d5; box-shadow:inset 0 1px 0 #a6d9ee08; }
[data-panel="support"] .notice strong { display:flex; align-items:center; gap:11px; color:var(--support-gold); font:400 19px/1.4 Marcellus,Georgia,serif; }
[data-panel="support"] .notice p { margin:10px 0 0; font-size:13px; line-height:1.75; color:#afc3d0; }
[data-panel="support"] .support-icon { flex:none; width:22px; height:22px; color:#d2b478; }
[data-panel="support"] .detail-grid { gap:20px; margin-top:20px; }
[data-panel="support"] .detail { box-sizing:border-box; min-width:0; padding:25px; border:1px solid var(--support-line); border-radius:12px; background:linear-gradient(135deg,#102433,#0b1a27); box-shadow:inset 0 1px 0 #c5e9f508,0 8px 24px #0002; }
[data-panel="support"] .detail h3 { display:flex; align-items:center; gap:11px; margin:0 0 24px; padding-bottom:17px; border-bottom:1px solid #75aac326; color:var(--support-gold); font:400 19px/1.4 Marcellus,Georgia,serif; }
[data-panel="support"] .ticket-form { display:grid; gap:21px; width:100%; margin:0; }
[data-panel="support"] .ticket-form label { display:grid; gap:10px; margin:0; color:#cbdce5; font-size:13px; font-weight:500; line-height:1.5; }
[data-panel="support"] .ticket-form input,[data-panel="support"] .ticket-form textarea { box-sizing:border-box; display:block; width:100%; min-width:0; margin:0; padding:13px 15px; border:1px solid #365264; border-radius:8px; outline:none; background:#081824; color:#e4edf2; font-family:inherit; font-size:14px; font-weight:400; line-height:1.6; transition:border-color .18s ease,box-shadow .18s ease; }
[data-panel="support"] .ticket-form input { min-height:48px; }
[data-panel="support"] .ticket-form textarea { min-height:175px; resize:vertical; }
[data-panel="support"] .ticket-form input::placeholder,[data-panel="support"] .ticket-form textarea::placeholder { color:#829ba9; opacity:1; }
[data-panel="support"] .ticket-form input:focus,[data-panel="support"] .ticket-form textarea:focus { border-color:#82bed7; box-shadow:0 0 0 3px #76bed514; }
[data-panel="support"] .ticket-submit { justify-self:start; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:47px; padding:12px 23px; margin:2px 0 0; border:1px solid #e0c18a; border-radius:8px; background:linear-gradient(135deg,#d7bc81,#b99a5c); color:#112130; font-family:inherit; font-size:13px; font-weight:600; line-height:1.5; cursor:pointer; box-shadow:inset 0 1px 0 #fff5,0 3px 12px #0003; transition:box-shadow .2s ease,border-color .2s ease,filter .2s ease; }
[data-panel="support"] .ticket-submit::before { content:'✉'; font-size:18px; line-height:1; }
[data-panel="support"] .ticket-submit:hover:not(:disabled) { border-color:#f1dbaa; filter:brightness(1.07); box-shadow:0 0 20px #d3b77b30,inset 0 1px 0 #fff6; }
[data-panel="support"] .ticket-submit:focus-visible { outline:2px solid #8cc5dc; outline-offset:4px; }
[data-panel="support"] .ticket-submit:disabled { cursor:wait; opacity:.65; }
[data-panel="support"] .ticket-message { margin:0; color:#b7d8cb; font-size:13px; line-height:1.6; }
[data-panel="support"] .ticket-message.error { color:#f1a29c; }
[data-panel="support"] #ticket-list { padding:0; }
[data-panel="support"] #ticket-list .muted { margin:0; color:#9fb7c5; font-size:13px; line-height:1.7; }
[data-panel="support"] #ticket-list .activity-row { background:#091925; }
@media(max-width:680px) { [data-panel="support"] .detail,[data-panel="support"] .notice { padding:18px; } [data-panel="support"] .detail-grid { gap:15px; margin-top:15px; } [data-panel="support"] .detail h3 { font-size:18px; margin-bottom:20px; } [data-panel="support"] .ticket-submit { width:100%; } }
@media(prefers-reduced-motion:reduce) { [data-panel="support"] .ticket-submit,[data-panel="support"] .ticket-form input,[data-panel="support"] .ticket-form textarea { transition:none; } }

/* Activity timeline: existing API events, scoped to the activity panel. */
[data-panel="activity"] .notice { padding:17px 20px; border:1px solid #6cabc239; border-left:3px solid #b99e64; border-radius:10px; background:linear-gradient(110deg,#112939,#0c1c29); }
[data-panel="activity"] .notice strong { color:#ddc38c; }
[data-panel="activity"] .notice p { margin:7px 0 0; color:#9fb7c5; font-size:12px; line-height:1.65; }
[data-panel="activity"] #activity-list { padding:18px 0 0; }
[data-panel="activity"] .activity-timeline { display:grid; gap:22px; }
[data-panel="activity"] .timeline-date { margin:0 0 12px 48px; color:#c4ae7a; font-size:11px; line-height:1.4; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
[data-panel="activity"] .timeline-events { position:relative; display:grid; gap:10px; list-style:none; margin:0; padding:0; }
[data-panel="activity"] .timeline-events::before { content:''; position:absolute; left:16px; top:15px; bottom:15px; width:1px; background:linear-gradient(#7bbbd249,#7bbbd21c); }
[data-panel="activity"] .timeline-event { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:start; gap:14px; }
[data-panel="activity"] .timeline-icon { position:relative; display:grid; place-items:center; width:32px; height:32px; margin-top:10px; border:1px solid #618fa74d; border-radius:50%; background:#102635; color:#8bbacf; }
[data-panel="activity"] .timeline-icon svg { width:17px; height:17px; }
[data-panel="activity"] .timeline-coins .timeline-icon,[data-panel="activity"] .timeline-shop .timeline-icon { color:#d8bb7b; border-color:#b89b5d58; }
[data-panel="activity"] .timeline-card { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 16px; border:1px solid #689cb333; border-radius:9px; background:linear-gradient(115deg,#102533,#0c1c29); transition:border-color .18s ease,box-shadow .18s ease; }
[data-panel="activity"] .timeline-card:hover { border-color:#8cbdd268; box-shadow:0 0 15px #69b7d20a; }
[data-panel="activity"] .timeline-copy { min-width:0; }
[data-panel="activity"] .timeline-title { display:block; color:#ddd4bf; font-size:13px; font-weight:500; line-height:1.5; }
[data-panel="activity"] .timeline-details { margin:4px 0 0; color:#9fb5c3; font-size:12px; line-height:1.55; overflow-wrap:anywhere; white-space:pre-line; }
[data-panel="activity"] .timeline-time { flex:none; color:#8ba9ba; font-size:11px; line-height:1.5; text-align:right; font-variant-numeric:tabular-nums; }
@media(max-width:680px) { [data-panel="activity"] .timeline-card { align-items:flex-start; flex-direction:column; gap:8px; padding:12px 13px; } [data-panel="activity"] .timeline-time { text-align:left; } [data-panel="activity"] .timeline-event { gap:10px; } [data-panel="activity"] .timeline-date { margin-left:44px; } [data-panel="activity"] .activity-timeline { gap:19px; } }
@media(prefers-reduced-motion:reduce) { [data-panel="activity"] .timeline-card { transition:none; } }

/* Shop presentation only: prices and checkout remain server-driven. */
[data-panel="shop"] .notice { padding:16px 20px; border:1px solid #6baac139; border-radius:10px; background:linear-gradient(115deg,#122a3b,#0c1d2b); color:#aac0ce; font-size:12px; line-height:1.7; }
[data-panel="shop"] .notice strong { color:#dec48c; }
[data-panel="shop"] .stats { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:14px; margin:16px 0; }
[data-panel="shop"] .stat { min-height:110px; padding:19px 22px; border:1px solid #6baac13b; border-radius:11px; background:#102332; }
[data-panel="shop"] .shop-balance-panel { position:relative; padding-left:98px; border-color:#c2a66966; background:linear-gradient(110deg,#233440,#112332); }
[data-panel="shop"] .shop-balance-coin { position:absolute; left:21px; top:25px; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; color:#e4c47d; background:radial-gradient(#d5ab4624,transparent 70%); filter:drop-shadow(0 0 9px #ddb95725); }
[data-panel="shop"] .shop-balance-coin svg { width:50px; height:50px; }
[data-panel="shop"] .stat-value { display:block; margin:7px 0 3px; font-size:30px; line-height:1.15; color:#e4c98e; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
[data-panel="shop"] .stat-label { color:#a9c1cd; font-size:11px; letter-spacing:.08em; }
[data-panel="shop"] .stat-hint { display:block; color:#8fa8b6; font-size:11px; }
[data-panel="shop"] .card { border-color:#6baac133; background:#0b1c29; }
[data-panel="shop"] .card-head { padding:16px 20px; border-color:#6baac126; }
[data-panel="shop"] .card-head h3 { color:#d9c18d; }
[data-panel="shop"] .card-body { padding:18px; }
[data-panel="shop"] .shop-character-label { display:block; margin:0 0 8px; color:#a9c1ce; font-size:12px; }
[data-panel="shop"] #shop-character { box-sizing:border-box; width:100%; max-width:440px; min-height:45px; margin:0 0 18px; padding:11px 14px; border:1px solid #46687c; border-radius:8px; background:#0b1a27; color:#dfd5bb; font:inherit; font-size:13px; cursor:pointer; color-scheme:dark; }
[data-panel="shop"] #shop-character:focus-visible { outline:2px solid #8cbdd3; outline-offset:2px; }
[data-panel="shop"] .shop-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
[data-panel="shop"] .shop-product { display:flex; flex-direction:column; min-width:0; padding:18px; border:1px solid #537f963d; border-radius:11px; background:linear-gradient(130deg,#122a3a,#0c1d2b); transition:border-color .18s ease,box-shadow .18s ease; }
[data-panel="shop"] .shop-product:hover { border-color:#b89e626e; box-shadow:0 0 20px #7bbdd00a; }
[data-panel="shop"] .shop-product-header { display:flex; align-items:center; gap:14px; }
[data-panel="shop"] .shop-product-art { position:relative; flex:none; display:grid; place-items:center; width:64px; height:64px; overflow:hidden; border:1px solid #b99c5f62; border-radius:10px; background:radial-gradient(#264555,#10212e); box-shadow:inset 0 0 16px #0004; }
[data-panel="shop"] .shop-product-symbol { color:#d4bd85; font-size:29px; }
[data-panel="shop"] .shop-product-image { position:absolute; inset:7px; width:50px; height:50px; object-fit:contain; border-radius:6px; }
[data-panel="shop"] .shop-product-image[hidden],[data-panel="shop"] .shop-product-symbol[hidden] { display:none; }
[data-panel="shop"] .shop-product-name { min-width:0; margin:0; color:#e7d8b5; font:400 17px/1.4 Marcellus,Georgia,serif; overflow-wrap:anywhere; }
[data-panel="shop"] .shop-product-description { margin:14px 0 20px; color:#a3bac8; font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
[data-panel="shop"] .shop-product-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid #8cb5c21a; }
[data-panel="shop"] .shop-product-price { display:flex; flex-direction:column; gap:2px; color:#dfc17c; }
[data-panel="shop"] .shop-product-price strong { font-size:22px; line-height:1.2; font-weight:500; }
[data-panel="shop"] .shop-product-price small { color:#a59b80; font-size:10px; }
[data-panel="shop"] .shop-buy { min-height:40px; margin:0; padding:10px 13px; border:1px solid #d5b878; border-radius:7px; background:linear-gradient(135deg,#d7bd82,#b69a61); color:#10212e; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:box-shadow .18s ease,filter .18s ease; }
[data-panel="shop"] .shop-buy:hover:not(:disabled) { box-shadow:0 0 16px #d3b36d2b; filter:brightness(1.08); }
[data-panel="shop"] .shop-buy:focus-visible { outline:2px solid #8ec5d8; outline-offset:3px; }
[data-panel="shop"] .shop-buy:disabled { opacity:.6; cursor:wait; }
[data-panel="shop"] .shop-ledger { display:grid; gap:9px; }
[data-panel="shop"] .shop-ledger-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid #5e8da435; border-radius:8px; background:#0e2230; }
[data-panel="shop"] .shop-ledger-icon { color:#c7b078; font-size:22px; text-align:center; }
[data-panel="shop"] .shop-ledger-copy { min-width:0; }
[data-panel="shop"] .shop-ledger-title { display:block; color:#d7d2c3; font-size:12px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
[data-panel="shop"] .shop-ledger-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:5px; color:#8eaaba; font-size:10px; }
[data-panel="shop"] .shop-order-status { padding:3px 7px; border:1px solid #7da9ba35; border-radius:5px; line-height:1.3; }
[data-panel="shop"] .shop-status-success { color:#9cccb5; background:#91c5a90b; }
[data-panel="shop"] .shop-status-pending { color:#d6bc85; background:#d6bc850b; }
[data-panel="shop"] .shop-status-review { color:#e4a39b; background:#d98e830b; }
[data-panel="shop"] .shop-status-neutral { color:#a8b7c1; }
[data-panel="shop"] .shop-ledger-amount { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
[data-panel="shop"] .shop-credit { color:#9cccb5; }
[data-panel="shop"] .shop-debit { color:#d7bd85; }
[data-panel="shop"] .shop-empty { display:flex; align-items:center; gap:16px; padding:22px 16px; border:1px dashed #678da339; border-radius:10px; background:#11263566; }
[data-panel="shop"] .shop-empty-icon { flex:none; display:grid; place-items:center; width:43px; height:43px; border:1px solid #b39a5e3b; border-radius:50%; color:#cdb57d; font-size:25px; }
[data-panel="shop"] .shop-empty-copy strong { color:#d7c6a2; font-size:13px; font-weight:500; }
[data-panel="shop"] .shop-empty-copy p { margin:6px 0 0; color:#90acbd; font-size:12px; line-height:1.6; }
[data-panel="shop"] .foot { margin-top:16px; font-size:11px; line-height:1.6; }
@media(max-width:680px) { [data-panel="shop"] .shop-product-grid { grid-template-columns:minmax(0,1fr); } [data-panel="shop"] .stats { grid-template-columns:minmax(0,1fr); gap:10px; } [data-panel="shop"] .stat { min-height:94px; } [data-panel="shop"] .shop-balance-panel { padding-left:94px; } [data-panel="shop"] .card-body { padding:14px; } [data-panel="shop"] .card-head { padding:14px 16px; } [data-panel="shop"] .shop-ledger-row { grid-template-columns:25px minmax(0,1fr); gap:8px 10px; padding:12px; } [data-panel="shop"] .shop-ledger-amount { grid-column:2; } [data-panel="shop"] #shop-character { max-width:none; } }
@media(prefers-reduced-motion:reduce) { [data-panel="shop"] .shop-product,[data-panel="shop"] .shop-buy { transition:none; } }

/* World-item discovery: informational only; purchase stays locked. */
[data-panel="shop"] .shop-arsenal { margin-top:16px; border-color:#6aa4bd55; }
[data-panel="shop"] .shop-search-form label,[data-panel="shop"] .shop-search-selection label { display:block; margin-bottom:9px; color:#b4c7d2; font-size:12px; }
[data-panel="shop"] .shop-search-controls { display:flex; gap:10px; }
[data-panel="shop"] #shop-world-query { box-sizing:border-box; min-width:0; flex:1; min-height:44px; padding:11px 15px; border:1px solid #53768a; border-radius:8px; background:#081824; color:#e2e9ee; font:inherit; font-size:13px; }
[data-panel="shop"] #shop-world-query:focus-visible { outline:2px solid #8fc3d7; outline-offset:2px; }
[data-panel="shop"] .shop-search-note { color:#91abba; font-size:11px; line-height:1.6; margin:10px 0; }
[data-panel="shop"] .shop-search-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:16px; }
[data-panel="shop"] .shop-search-item { gap:9px; }
[data-panel="shop"] .shop-search-item .shop-product-header > div { min-width:0; }
[data-panel="shop"] .shop-search-type { margin:7px 0 0; color:#a8b8c5; font-size:11px; line-height:1.5; }
[data-panel="shop"] .shop-search-stats { color:#b7cad5; font-size:11px; line-height:1.6; }
[data-panel="shop"] .shop-search-stats summary { cursor:pointer; color:#9ebfd1; }
[data-panel="shop"] .shop-search-stats p { margin:4px 0; }
[data-panel="shop"] .shop-search-price { color:#d5b97b; font-size:12px; margin:9px 0 0; }
[data-panel="shop"] .shop-search-item .shop-search-note { margin:0; }
[data-panel="shop"] .shop-search-choose { margin-top:auto; padding:10px; border:1px solid #668a9b50; border-radius:7px; background:#1b3445; color:#d0dce3; font:inherit; font-size:12px; cursor:pointer; }
[data-panel="shop"] .shop-search-choose:hover,[data-panel="shop"] .shop-search-choose:focus-visible { border-color:#d3b779; background:#233e50; }
[data-panel="shop"] .shop-search-selection { padding:18px; margin-top:16px; border:1px solid #b79e646b; border-radius:10px; background:#132b3a; }
[data-panel="shop"] .shop-search-selection h4 { margin:0 0 9px; color:#e4d1a6; font:400 17px Georgia,serif; }
[data-panel="shop"] .shop-search-selection label { margin-top:15px; }
[data-panel="shop"] #shop-search-character { box-sizing:border-box; width:100%; padding:11px; border:1px solid #587b90; border-radius:7px; color:#dcd5c5; background:#0a1c29; color-scheme:dark; }
[data-panel="shop"] .shop-search-selection .shop-buy { margin-top:6px; }
@media(max-width:680px) { [data-panel="shop"] .shop-search-grid { grid-template-columns:minmax(0,1fr); } [data-panel="shop"] .shop-search-controls { flex-wrap:wrap; } [data-panel="shop"] #shop-world-query { flex-basis:100%; } [data-panel="shop"] .shop-search-controls .shop-buy { width:100%; } }