dialog.quickDrawPreviewDialog { width:min(480px,calc(100vw - 32px)); max-width:480px; max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid #a78a493b; border-radius:13px; background:#111216; color:#ebe8de; box-shadow:0 24px 80px #000b; overflow:hidden; }
dialog.quickDrawPreviewDialog[open] { display:flex; flex-direction:column; }
dialog.quickDrawPreviewDialog::backdrop { background:#080a0fce; backdrop-filter:blur(5px); }
.quickDrawPreviewDialog * { box-sizing:border-box; }
.quickDrawPreviewHeader { position:relative; flex-shrink:0; padding:26px 48px 19px; border-bottom:1px solid #b39a5f17; text-align:center; }
.quickDrawPreviewHeader h2 { margin:0; color:#e5ca83; font-size:23px; font-weight:650; line-height:1.45; letter-spacing:.3px; }
.quickDrawPreviewClose { position:absolute; top:12px; right:10px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:5px; background:transparent; color:#818386; font-size:26px; line-height:1; cursor:pointer; }
.quickDrawPreviewClose:hover { color:#e8d59d; background:#ffffff04; }
.quickDrawPreviewScroll { flex:1; min-height:0; padding:22px 26px 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#4e4939 #111216; }
.quickDrawPreviewCover { display:flex; align-items:center; justify-content:center; width:100%; height:172px; margin:0 0 19px; padding:8px; border:1px solid #a88c4a15; border-radius:7px; background:#090b10; overflow:hidden; }
.quickDrawPreviewCover > img { display:block; width:100%; height:100%; object-fit:contain; }
.quickDrawPreviewCover > span { color:#8e8b7b; font-size:12px; }
.quickDrawPreviewQuestion { margin:0 0 18px; color:#e4ded0; font-size:15px; font-weight:500; line-height:1.8; text-align:center; }
.quickDrawPreviewBalance { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid #a88c4a20; border-radius:5px; background:#a88c4a08; }
.quickDrawPreviewBalance > span { color:#898b90; font-size:11px; }
.quickDrawPreviewBalance > strong { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:9px; color:#e2c982; font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; }
.quickDrawPreviewBalance strong > span:first-child { color:#bcb8ac; }
.quickDrawPreviewArrow { color:#7f7049; }
.quickDrawPreviewBalance small { font-size:10px; color:#918974; font-weight:500; }
.quickDrawPreviewDisclosure { margin:18px 0 12px; padding:10px 11px; border-left:2px solid #95804f70; background:#95804f07; color:#a3987a; font-size:10px; line-height:1.8; }
.quickDrawPreviewReference { margin:0; padding:0; border:0; color:#777a82; font-size:10px; font-weight:400; line-height:1.8; }
.quickDrawPreviewReference > p { margin:0 0 10px; }
.quickDrawPreviewReference > p:last-child { margin:15px 0 0; color:#9a917b; text-decoration:none; cursor:text; }
.quickDrawPreviewInsufficient { padding:5px 7px 20px; text-align:center; }
.quickDrawPreviewInsufficient > svg { display:block; margin:0 auto 16px; stroke:#b99b52; stroke-width:1.3; stroke-linecap:round; }
.quickDrawPreviewInsufficient > p { max-width:310px; margin:0 auto; color:#b5b3ae; font-size:13px; line-height:1.9; }
.quickDrawPreviewActions { display:grid; flex-shrink:0; grid-template-columns:1fr; gap:10px; padding:22px 26px 25px; }
.quickDrawPreviewPrimary,.quickDrawPreviewCancel { display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:12px 18px; border:1px solid transparent; border-radius:7px; font:inherit; font-size:13px; font-weight:600; line-height:1.5; cursor:pointer; }
.quickDrawPreviewPrimary { background:linear-gradient(110deg,#ad8e47,#d5b76d); color:#17140e; box-shadow:inset 0 1px #fff4; }
.quickDrawPreviewPrimary:hover:not(:disabled) { background:linear-gradient(110deg,#bda05b,#e0c57f); }
.quickDrawPreviewPrimary:disabled { opacity:.48; cursor:wait; }
.quickDrawPreviewCancel { border-color:#8d8b822a; background:#ffffff02; color:#a2a09a; font-weight:500; }
.quickDrawPreviewCancel:hover { background:#ffffff05; color:#d9d4c5; }
.quickDrawPreviewStatus { color:#d2a58b; font-size:11px; line-height:1.8; }
.quickDrawPreviewStatus:empty { display:none; }
.quickDrawPreviewStatus:not(:empty) { margin:12px 0 3px; }
.quickDrawPreviewStatus button,.quickDrawPreviewInlineStatus button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:7px 10px; margin-left:8px; border:1px solid #b69c5b30; border-radius:5px; background:#b69c5b0a; color:#cbb77f; font:inherit; cursor:pointer; }
.quickDrawPreviewInlineStatus { display:block; flex:1 0 100%; width:100%; padding:10px 12px; color:#c8ad81; font-size:11px; line-height:1.7; }
.quickDrawPreviewDialog button:focus-visible,.quickDrawPreviewInlineStatus button:focus-visible { outline:2px solid #d6bc77; outline-offset:2px; }
@media(max-width:480px) {
 dialog.quickDrawPreviewDialog { width:calc(100vw - 32px); max-height:calc(100dvh - 32px); border-radius:10px; }
 .quickDrawPreviewHeader { padding:22px 43px 15px; }
 .quickDrawPreviewHeader h2 { font-size:21px; }
 .quickDrawPreviewClose { top:8px; right:4px; }
 .quickDrawPreviewScroll { padding:18px 18px 0; }
 .quickDrawPreviewActions { padding:18px 18px 20px; gap:9px; }
 .quickDrawPreviewCover { height:155px; }
 .quickDrawPreviewQuestion { font-size:14px; }
 .quickDrawPreviewBalance { flex-wrap:wrap; }
 .quickDrawPreviewBalance > strong { margin-left:auto; font-size:16px; }
 .quickDrawPreviewReference { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .quickDrawPreviewDialog,.quickDrawPreviewDialog *,.quickDrawPreviewDialog::backdrop { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }