.pwa-detail-body { min-height: 100dvh; padding-bottom: calc(82px + var(--safe-bottom)); background: #eef3f0; }
.pwa-detail-offline { position: fixed; z-index: 90; top: 0; right: 0; left: 0; padding: 7px 16px; color: #5b4307; background: #f8d97f; font-size: .67rem; text-align: center; }
.pwa-detail-header { position: sticky; z-index: 50; top: 0; min-height: 64px; padding: max(9px, env(safe-area-inset-top)) 16px 9px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; color: #fff; background: rgba(7,20,16,.96); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(18px); }
.pwa-detail-back { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(255,255,255,.05); }
.pwa-detail-back svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pwa-detail-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
.pwa-detail-brand img { width: 38px; height: 38px; }
.pwa-detail-brand span { display: grid; line-height: 1.15; }
.pwa-detail-brand b { font: 900 .8rem/1 Arial,sans-serif; letter-spacing: .11em; }
.pwa-detail-brand small { margin-top: 4px; color: #8fa299; font-size: .54rem; }
.pwa-detail-connection { display: flex; align-items: center; gap: 6px; color: #a9b9b2; font-size: .58rem; }
.pwa-detail-connection i { width: 6px; height: 6px; border-radius: 50%; background: var(--pwa-mint); box-shadow: 0 0 0 4px rgba(54,211,153,.09); }
.pwa-detail-connection.offline i { background: #e6b447; box-shadow: 0 0 0 4px rgba(230,180,71,.1); }

.pwa-detail-main { width: min(100%, 680px); margin-inline: auto; padding: 14px 13px 30px; display: grid; gap: 12px; }
.pwa-asset-hero { position: relative; overflow: hidden; padding: 20px; border-radius: 22px; color: #fff; background: #071410; box-shadow: 0 16px 36px rgba(7,20,16,.14); }
.pwa-asset-hero::before { content: ""; position: absolute; width: 240px; height: 240px; top: -150px; left: -90px; border-radius: 50%; background: rgba(54,211,153,.17); filter: blur(2px); pointer-events: none; }
.pwa-asset-hero.gold::before { background: rgba(215,173,85,.23); }
.pwa-asset-hero.crypto::before { background: rgba(119,104,228,.23); }
.pwa-asset-hero.car::before { background: rgba(72,141,214,.2); }
.pwa-asset-heading { position: relative; display: flex; align-items: center; gap: 11px; }
.pwa-detail-icon { width: 49px; height: 49px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #052218; background: var(--pwa-mint); font: 900 .74rem/1 Arial,sans-serif; }
.gold .pwa-detail-icon { background: #e3bd69; }
.crypto .pwa-detail-icon { color: #fff; background: #786be0; }
.car .pwa-detail-icon { color: #fff; background: #4c8fd3; }
.pwa-asset-heading > div { min-width: 0; flex: 1; display: grid; line-height: 1.25; }
.pwa-asset-heading small { color: #7fa091; font-size: .57rem; }
.gold .pwa-asset-heading small { color: #c7ac70; }
.pwa-asset-heading h1 { overflow: hidden; margin: 3px 0; font-size: 1.03rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.pwa-asset-heading div > span { color: #71877d; font: .53rem/1.2 Arial,sans-serif; }
.pwa-asset-heading > button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; color: #b8c7c0; background: rgba(255,255,255,.05); }
.pwa-asset-heading > button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pwa-detail-price { position: relative; display: flex; align-items: baseline; gap: 8px; margin-top: 25px; }
.pwa-detail-price strong { font: 900 clamp(2rem,9.5vw,3rem)/1 Tahoma,Arial,sans-serif; letter-spacing: -.04em; direction: ltr; }
.pwa-detail-price > span { color: #83978e; font-size: .62rem; }
.pwa-detail-change { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.pwa-detail-change b { padding: 4px 7px; border-radius: 7px; font: 800 .7rem/1.3 Tahoma,Arial,sans-serif; direction: ltr; }
.pwa-detail-change span { color: #7f948b; font-size: .58rem; }
.pwa-detail-change.up b { color: #4ce1a8; background: rgba(54,211,153,.1); }
.pwa-detail-change.down b { color: #ff7c86; background: rgba(217,75,87,.11); }
.pwa-detail-change.flat b { color: #bec9c4; background: rgba(255,255,255,.06); }
.pwa-asset-hero footer { position: relative; margin-top: 19px; padding-top: 13px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.07); color: #768b82; font-size: .55rem; }
.pwa-asset-hero footer > span { display: flex; align-items: center; gap: 6px; }
.pwa-asset-hero footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--pwa-mint); }
.pwa-asset-hero footer time { direction: ltr; color: #abb9b3; }

.pwa-detail-chart-card,.pwa-detail-stats,.pwa-detail-quotes,.pwa-detail-related { padding: 17px; border: 1px solid var(--pwa-line); border-radius: 19px; background: #fff; box-shadow: 0 8px 24px rgba(7,20,16,.035); }
.pwa-detail-chart-card > header,.pwa-detail-stats > header,.pwa-detail-quotes > header,.pwa-detail-related > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.pwa-detail-chart-card header > div,.pwa-detail-stats header,.pwa-detail-quotes header > div,.pwa-detail-related header { line-height: 1.35; }
.pwa-detail-chart-card header small,.pwa-detail-stats header small,.pwa-detail-quotes header small,.pwa-detail-related header small { color: var(--pwa-emerald); font-size: .57rem; font-weight: 800; }
.pwa-detail-chart-card h2,.pwa-detail-stats h2,.pwa-detail-quotes h2,.pwa-detail-related h2 { margin: 2px 0 0; font-size: .9rem; font-weight: 900; }
.pwa-detail-chart-card header button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #dfe8e3; border-radius: 10px; color: var(--pwa-emerald); background: #f7faf8; }
.pwa-detail-chart-card header button.loading svg { animation: pwa-asset-spin .75s linear infinite; }
.pwa-detail-chart-card header svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-chart-ranges { width: fit-content; margin: 14px 0 5px; padding: 3px; display: flex; border-radius: 9px; background: #f0f4f2; }
.pwa-chart-ranges button { padding: 5px 11px; border: 0; border-radius: 7px; color: #75837c; background: transparent; font-size: .56rem; }
.pwa-chart-ranges button.active { color: #fff; background: #15382b; box-shadow: 0 3px 8px rgba(7,20,16,.12); }
.pwa-detail-chart-wrap { position: relative; height: 245px; }
.pwa-detail-chart-wrap canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.pwa-detail-tooltip { position: absolute; z-index: 2; min-width: 106px; padding: 7px 9px; border-radius: 9px; color: #fff; background: rgba(7,20,16,.94); box-shadow: 0 8px 20px rgba(0,0,0,.2); font-size: .57rem; text-align: center; pointer-events: none; transform: translate(-50%,calc(-100% - 10px)); }
.pwa-detail-tooltip b { display: block; font: 800 .66rem/1.4 Tahoma,Arial,sans-serif; direction: ltr; }
.pwa-detail-chart-meta { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #8a9891; font-size: .5rem; }
.pwa-detail-chart-meta time { direction: ltr; }
.pwa-detail-chart-meta span { color: #789187; }
.pwa-detail-chart-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #829088; text-align: center; }
.pwa-detail-chart-empty > span { color: #9caaa3; font-size: 2rem; }
.pwa-detail-chart-empty b { color: #35473e; font-size: .75rem; }
.pwa-detail-chart-empty small { margin-top: 3px; font-size: .55rem; }

.pwa-detail-stats > div { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pwa-detail-stats article { min-width: 0; min-height: 88px; padding: 12px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #e6ece8; border-radius: 13px; background: #f8faf9; }
.pwa-detail-stats article small { color: #7c8982; font-size: .54rem; }
.pwa-detail-stats article b { overflow: hidden; margin-top: 4px; font: 900 .83rem/1.4 Tahoma,Arial,sans-serif; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.pwa-detail-stats article b.up { color: var(--pwa-emerald); }
.pwa-detail-stats article b.down { color: var(--pwa-red); }
.pwa-detail-stats article span { color: #9aa59f; font-size: .48rem; }

.pwa-detail-quotes > header > span { padding: 4px 8px; border-radius: 7px; color: #63736b; background: #f0f4f2; font-size: .52rem; }
.pwa-quote-list { margin-top: 13px; display: grid; gap: 7px; }
.pwa-quote-list article { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid #e8edea; border-radius: 12px; }
.pwa-quote-list article > div { min-width: 0; display: grid; line-height: 1.35; }
.pwa-quote-list article > div:first-child b { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.pwa-quote-list article small { color: #8a9790; font-size: .47rem; }
.pwa-quote-list strong { font: 900 .68rem/1.4 Tahoma,Arial,sans-serif; direction: ltr; }
.pwa-quote-list article > span { padding: 3px 5px; border-radius: 6px; font: 800 .52rem/1.3 Tahoma,Arial,sans-serif; direction: ltr; }
.pwa-quote-list article > span.up { color: #087452; background: #e3f7ee; }
.pwa-quote-list article > span.down { color: #bd3440; background: #fdebed; }
.pwa-quote-list article > span.flat { color: #6f7d76; background: #eff3f1; }

.pwa-detail-insight { padding: 16px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgba(215,173,85,.2); border-radius: 17px; color: #dbe7e2; background: #0b1c16; }
.pwa-detail-insight > span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #092018; background: var(--pwa-gold); font-size: .65rem; font-weight: 900; }
.pwa-detail-insight h2 { margin: 0 0 4px; color: #fff; font-size: .75rem; }
.pwa-detail-insight p { margin: 0; color: #9eb0a8; font-size: .58rem; line-height: 1.9; }
.pwa-detail-insight small { display: block; margin-top: 6px; color: #c2a967; font-size: .49rem; }

.pwa-detail-related > div { margin-top: 13px; display: grid; gap: 7px; }
.pwa-detail-related a { min-width: 0; padding: 11px; display: grid; grid-template-columns: minmax(0,1fr) auto 15px; align-items: center; gap: 10px; border: 1px solid #e7ece9; border-radius: 12px; background: #fafcfb; }
.pwa-detail-related a > span { min-width: 0; display: grid; line-height: 1.35; }
.pwa-detail-related b { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.pwa-detail-related strong { font: 900 .65rem/1.35 Tahoma,Arial,sans-serif; direction: ltr; }
.pwa-detail-related a small { color: #8c9892; font-size: .47rem; }
.pwa-detail-related a i { color: var(--pwa-emerald); font-style: normal; }

.pwa-detail-bottom { position: fixed; z-index: 55; right: 0; bottom: 0; left: 0; min-height: 65px; padding: 6px max(10px,env(safe-area-inset-right)) calc(6px + var(--safe-bottom)) max(10px,env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(7,20,16,.08); background: rgba(255,255,255,.96); box-shadow: 0 -8px 30px rgba(7,20,16,.08); backdrop-filter: blur(17px); }
.pwa-detail-bottom a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #7f8d86; }
.pwa-detail-bottom svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.pwa-detail-bottom span { max-width: 74px; overflow: hidden; font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.pwa-detail-bottom a.active { color: var(--pwa-emerald); }
.pwa-detail-toast { position: fixed; z-index: 100; right: 50%; bottom: calc(78px + var(--safe-bottom)); max-width: calc(100% - 36px); padding: 9px 14px; border-radius: 11px; color: #fff; background: #10261e; box-shadow: 0 12px 30px rgba(0,0,0,.2); font-size: .62rem; text-align: center; transform: translateX(50%); }
.pwa-detail-toast.error { background: #7b2931; }

.pwa-detail-error { min-height: calc(100dvh - 70px); padding: 40px 24px 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pwa-detail-error > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #9c6b0c; background: #fff2cf; font-size: 1.3rem; font-weight: 900; }
.pwa-detail-error h1 { margin: 15px 0 4px; font-size: 1rem; }
.pwa-detail-error p { margin: 0 0 15px; color: var(--pwa-muted); font-size: .66rem; }
.pwa-detail-error a { padding: 8px 14px; border-radius: 10px; color: #052218; background: var(--pwa-mint); font-size: .65rem; font-weight: 850; }

@keyframes pwa-asset-spin { to { transform: rotate(360deg); } }

@media (min-width: 681px) {
  .pwa-detail-header { padding-inline: max(16px, calc(50% - 325px)); }
  .pwa-detail-bottom { right: 50%; left: auto; width: 680px; transform: translateX(50%); border: 1px solid rgba(7,20,16,.08); border-bottom: 0; border-radius: 18px 18px 0 0; }
}

@media (max-width: 380px) {
  .pwa-detail-main { padding-inline: 9px; }
  .pwa-asset-hero,.pwa-detail-chart-card,.pwa-detail-stats,.pwa-detail-quotes,.pwa-detail-related { border-radius: 16px; }
  .pwa-detail-price strong { font-size: 1.85rem; }
  .pwa-detail-chart-wrap { height: 220px; }
  .pwa-quote-list article { grid-template-columns: minmax(0,1fr) auto; }
  .pwa-quote-list article > span { grid-column: 2; }
}