/* Original stylesheet owns the visual system. Additions are isolated to replica interactions. */
#app { min-height:100dvh; }
button, a, input, textarea, select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:2px solid #bd7aff; outline-offset:3px; }
html,body { max-width:100%; overflow-x:clip; }
main { min-width:0; }
.replica-badge { position:fixed; z-index:100; left:12px; bottom:6px; padding:3px 8px; border:1px solid #ffffff10; border-radius:6px; background:#0a0a0fe8; color:#ffffff60; font:10px/14px Inter,sans-serif; cursor:pointer; }
.replica-login-note { margin-top:14px; color:#ffffff55; font-size:11px; line-height:1.5; text-align:center; }
#replica-toast { position:fixed; z-index:200; bottom:32px; left:50%; transform:translate(-50%,16px); max-width:min(480px,calc(100% - 32px)); background:#181320f5; border:1px solid #ae5dff40; padding:12px 18px; border-radius:12px; box-shadow:0 8px 32px #0008; color:#ffffffd9; font-size:13px; opacity:0; pointer-events:none; transition:.2s; }
#replica-toast.show { opacity:1; transform:translate(-50%,0); }
#replica-dialog { position:fixed; inset:0; margin:auto; width:min(448px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; color:white; background:#15121d; border:1px solid #ffffff14; border-radius:24px; padding:32px; box-shadow:0 24px 80px #0008; }
#replica-dialog::backdrop { background:#0009; backdrop-filter:blur(6px); }
#replica-dialog h2 { font-size:22px; line-height:1.3; font-weight:600; margin-bottom:20px; padding-right:15px; }
.replica-dialog-close { position:absolute; top:12px; right:15px; color:#ffffff60; font-size:26px; background:none; }
.replica-qr { background:white; border-radius:16px; padding:16px; width:224px; margin:16px auto 0; animation:qr-reveal .25s ease; }
.replica-qr img { width:192px; height:192px; }
@keyframes qr-reveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
#replica-promo { position:fixed; right:48px; top:50%; transform:translateY(-50%); width:360px; padding:20px; z-index:55; background:#0a0a0ffa; border:1px solid #ae5dff25; border-radius:18px; box-shadow:0 12px 40px #0005; }
#replica-promo > .w-9.h-1 { display:none; }
.replica-promo-close { position:absolute; right:18px; top:12px; font-size:19px; color:#ffffff40; }
.replica-success-badge { display:inline-flex; padding:2px 10px; color:#34d399; border:1px solid #34d39940; background:#34d39915; border-radius:100px; font-size:12px; }
.replica-empty { min-height:75dvh; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:24px; text-align:center; }
.replica-spinner { width:36px; height:36px; border:3px solid #ae5dff20; border-top-color:#ae5dff; border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 20px; }
.replica-support { display:grid; grid-template-columns:240px 1fr; gap:20px; }
.replica-ticket { text-align:left; display:flex; flex-direction:column; width:100%; border:1px solid transparent; border-radius:12px; margin-top:10px; padding:12px; color:#ffffffa0; gap:4px; font-size:12px; }
.replica-ticket strong { font-size:13px; color:#ffffffe0; }.replica-ticket.selected { background:#ae5dff15; border-color:#ae5dff30; }.replica-ticket small { color:#ffffff55; }
.replica-messages { min-height:240px; max-height:400px; overflow:auto; display:flex; flex-direction:column; align-items:flex-end; gap:16px; padding:8px 0 24px; }
.replica-message { background:#ae5dff18; border:1px solid #ae5dff20; border-radius:14px 14px 3px 14px; padding:12px 16px; max-width:90%; color:#ffffffcc; font-size:14px; overflow-wrap:anywhere; }
.replica-message.admin { align-self:flex-start; background:#ffffff08; border-color:#ffffff10; border-radius:14px 14px 14px 3px; }
.replica-message p { white-space:pre-wrap; }.replica-message time { display:block; text-align:right; margin-top:7px; font-size:10px; color:#ffffff50; }
.replica-table-scroll { overflow-x:auto; }.replica-table { width:100%; border-collapse:collapse; font-size:13px; color:#ffffffa0; }.replica-table th { font-weight:500; color:#ffffff60; text-align:left; }.replica-table th,.replica-table td { padding:16px 12px; border-bottom:1px solid #ffffff0d; white-space:nowrap; }.replica-chart-empty { height:230px; display:grid; place-items:center; color:#ffffff45; font-size:14px; }
@media(max-width:1023px){.replica-badge{bottom:80px}.replica-support{grid-template-columns:1fr}.replica-support>aside{display:flex;gap:8px;overflow:auto;align-items:center}.replica-support>aside>button{min-width:160px}.replica-ticket{margin:0}.replica-support>.glass{padding:20px}#replica-toast{bottom:96px}}
@media(max-width:639px){main .glow-brand .flex.items-center.justify-between:last-child{gap:8px;flex-wrap:wrap}main input.flex-1{min-width:0}.glass>.flex.items-center.justify-between:has(h3){gap:16px;flex-wrap:wrap}.glass:has(h2)>.flex.items-center.gap-3:has(.font-mono){flex-wrap:wrap}.glass:has(h2)>.flex.items-center.gap-3>.font-mono{min-width:100%;}.replica-badge{left:8px;font-size:9px}.replica-table th,.replica-table td{padding:12px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}