#graduationPreview {max-width:760px;margin:0 0 20px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.grad-preview-heading {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.grad-preview-heading h2 {margin:0;font:500 18px/24px var(--display);color:var(--ink)}
.grad-preview-layout {display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:center}
.grad-preview-copy h3 {margin:0 0 8px;font:500 15px/21px var(--display);color:var(--ink)}
.grad-preview-copy p {margin:0 0 16px;font:400 13px/20px var(--display);color:var(--ink-2)}
.grad-preview-copy .grad-preview-note {font-size:11px;line-height:17px;color:var(--muted);margin:12px 0 0}
.grad-card {box-sizing:border-box;width:100%;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 10px 32px -22px #0005;font-family:var(--display)}
.grad-card svg {display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.grad-card-head {display:flex;align-items:center;gap:7px;margin-bottom:14px;min-height:22px}
.grad-pons {width:17px;height:17px;object-fit:contain}
.grad-event {font:500 12px/18px var(--display);flex:1}
.grad-demo {display:inline-flex;align-items:center;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--muted);font:400 10px/14px var(--display);white-space:nowrap}
.grad-identity {display:flex;align-items:center;gap:9px;min-width:0}
.grad-avatar {width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--control-panel);font:500 18px/24px var(--display);color:var(--ink-2)}
.grad-name {display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.grad-fullname {color:var(--muted);font:400 11px/16px var(--display)}
.grad-symbol {font:500 18px/23px var(--display)}
.grad-price {display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.grad-price span {font:400 10px/16px var(--display);color:var(--muted)}
.grad-price strong {font:500 18px/23px var(--display);white-space:nowrap}
.grad-status {display:flex;align-items:center;gap:5px;margin:10px 0 12px;color:#347c5b;font:400 11px/16px var(--display)}
.grad-status svg {width:13px;height:13px}
html[data-theme="dark"] .grad-status {color:#83c8a7}
.grad-address {display:flex;align-items:center;gap:8px;min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:var(--control-panel);box-shadow:inset 0 1px 0 #ffffff12}
.grad-address>span {min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11px/18px var(--display);color:var(--ink-2)}
.grad-card :is(.grad-close,.grad-copy) {display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;box-shadow:none}
.grad-card .grad-copy svg {width:14px;height:14px}
.grad-card :is(.grad-close,.grad-copy):hover {background:var(--surface-2);color:var(--ink)}
.grad-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}
.grad-metric {min-width:0;padding:8px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.grad-metric dt {font:400 10px/14px var(--display);color:var(--muted);margin:0 0 3px}
.grad-metric dd {font:400 13px/18px var(--display);color:var(--ink);margin:0;white-space:nowrap}
.grad-open,.grad-preview-trigger {box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--control-panel);color:var(--ink);font:500 12px/18px var(--display);text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff12}
.grad-open>span {flex:1;text-align:left}
.grad-open>svg:last-child {width:13px;height:13px}
.grad-open:hover,.grad-preview-trigger:hover {border-color:var(--muted)}
.grad-sample-note {margin:9px 0 0;text-align:center;font:400 9px/13px var(--display);color:var(--muted)}
.grad-card :is(a,button):focus-visible,.grad-preview-trigger:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.grad-toast {position:fixed;z-index:75;left:calc(var(--rail,56px) + 16px);bottom:16px;width:360px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 88px);overflow:auto;box-shadow:0 16px 48px -16px #0006;animation:grad-arrive .22s ease-out}
@keyframes grad-arrive {from {opacity:0;transform:translateY(10px)} to {opacity:1;transform:translateY(0)}}
@media(max-width:1079px) {.grad-toast {left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
@media(max-width:600px) {#graduationPreview {padding:14px}.grad-preview-layout {grid-template-columns:minmax(0,1fr);gap:18px}.grad-card {padding:12px}.grad-preview-trigger {width:100%}.grad-preview-heading h2 {font-size:16px}.grad-price strong {font-size:16px}}
@media(prefers-reduced-motion:reduce) {.grad-toast {animation:none}}