/* Shared event feedback: exact values land immediately; only changed values glow. */
@keyframes valueChanged { from { background:var(--preT); color:var(--ivory); box-shadow:0 0 0 4px var(--preT); } to { background:transparent; box-shadow:0 0 0 4px transparent; } }
.value-changed { animation:valueChanged var(--t-flash,550ms) var(--e-out); border-radius:3px; }
.experience-icon { display:inline-grid; place-items:center; position:relative; flex:none; width:38px; height:38px; border:1px solid var(--line2); border-radius:10px; background:var(--panel); color:var(--dim); cursor:pointer; }
.experience-icon:hover { background:var(--chip); color:var(--ivory); }
.experience-icon svg,.activity-panel svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.experience-icon:active { transform:var(--press-btn); }
.notification-count { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; display:grid; place-items:center; border-radius:8px; background:var(--pre); color:var(--vault); font:600 10px var(--sans); border:2px solid var(--vault); }
.activity-panel { position:fixed; inset:66px 20px auto auto; margin:0; padding:0; width:400px; max-width:calc(100vw - 28px); max-height:calc(100dvh - 90px); color:var(--ivory); background:var(--panel); border:1px solid var(--line2); border-radius:16px; box-shadow:0 24px 80px #0008; font:13px/1.45 var(--sans); overflow:hidden; }
.activity-panel[open] { display:flex; flex-direction:column; animation:toastIn var(--t-fast) var(--e-out); }
.activity-panel::backdrop { background:#0003; }
.activity-head { display:flex; flex:none; justify-content:space-between; align-items:center; padding:22px 20px 16px; }
.experience-eyebrow { font-size:9px; letter-spacing:.12em; color:var(--mute); }
.activity-head h2 { font:600 26px var(--serif); margin:5px 0 0; }
.activity-tools { display:flex; flex:none; align-items:center; justify-content:space-between; padding:11px 20px; border-block:1px solid var(--line); font-size:11px; color:var(--mute); }
.activity-tools button { border:0; background:none; color:var(--pre); font:600 11px var(--sans); cursor:pointer; }
.activity-tools button:disabled { opacity:.4; cursor:default; }
.activity-list { min-height:0; max-height:var(--activity-preview-height,320px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }
.activity-item { display:flex; align-items:flex-start; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.activity-item:hover,.activity-item.unread { background:var(--panel2); }
.activity-item>span:nth-child(2) { min-width:0; flex:1; }
.activity-item>svg { width:14px; margin-top:5px; color:var(--mute); }
.activity-item strong { font-size:12px; font-weight:600; }
.activity-item p { color:var(--dim); margin:5px 0 8px; font-size:12px; line-height:1.5; }
.activity-item time { color:var(--mute); font-size:10px; }
.activity-symbol { color:var(--pre); background:var(--preT); padding:7px; border-radius:9px; display:grid; }
.activity-symbol.attention { color:var(--gold); background:var(--goldT); }
.activity-empty { text-align:center; padding:40px 38px; color:var(--mute); }
.activity-empty>svg { width:30px; height:30px; margin-bottom:12px; }
.activity-empty h3 { font:600 18px var(--serif); color:var(--ivory); margin:0 0 9px; }
.activity-empty p { margin:0; font-size:12px; line-height:1.6; }
.activity-foot { flex:none; padding:14px 20px; font-size:10px; color:var(--mute); border-top:1px solid var(--line); }
[data-price-status] { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--mute); white-space:nowrap; }
[data-price-status]::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--mute); }
[data-price-status][data-state='live']::before { background:var(--felt); }
[data-price-status][data-state='delayed']::before { background:var(--gold); }
@media(max-width:640px) { .activity-panel { inset:62px 14px auto auto; } }
@media(max-height:480px) { .activity-head { padding:10px 16px; } .activity-head .experience-eyebrow { display:none; } .activity-head h2 { margin:0; font-size:22px; } .activity-tools { padding:4px 16px; } .activity-foot { padding:8px 16px; } }
@media(pointer:coarse) { .experience-icon { min-width:44px; min-height:44px; } .activity-tools button { min-height:44px; padding:8px; } }
@media(prefers-reduced-motion:reduce) { .value-changed,.activity-panel[open] { animation:none; } }