.bean-drafts { box-sizing:border-box; width:min(650px,calc(100% - 24px)); max-height:88dvh; padding:20px; border:1px solid #445167; border-radius:22px; background:#111827; color:#f3ead8; }
.bean-drafts::backdrop { background:#000b; }
.bean-drafts header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.bean-drafts h2 { margin:0; font-size:1.6rem; }
.bean-drafts p { color:#b5c0d1; font-size:.85rem; line-height:1.5; }
.bean-drafts button { min-height:44px; padding:8px 12px; border:1px solid #465369; border-radius:12px; color:#f3ead8; background:#243047; cursor:pointer; font:inherit; font-size:.82rem; }
.bean-drafts button:focus-visible { outline:2px solid #e7c98a; outline-offset:3px; }
.bean-draft-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.bean-draft-card { min-width:0; padding:8px; background:#192335; border:1px solid #344157; border-radius:16px; }
.bean-draft-thumbnail { aspect-ratio:3/4; position:relative; overflow:hidden; border-radius:10px; background:#090e16; }
.bean-draft-thumbnail img { width:100%; height:100%; object-fit:cover; }
.bean-draft-thumbnail span { position:absolute; bottom:8px; right:8px; border-radius:6px; padding:3px 6px; background:#000b; font-size:.75rem; }
.bean-draft-card h3 { font:inherit; font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:10px 0 4px; }
.bean-draft-card p { margin:4px 0 10px; font-size:.72rem; }
.bean-draft-card button { width:100%; margin-top:6px; }
.bean-draft-card button:first-of-type { background:#e7c98a; color:#101722; border-color:#e7c98a; }
#flick-draft-status { color:#c4cfde; font-size:.8rem; min-height:1.2em; }
.bean-draft-tools { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
@media(min-width:600px) { .bean-draft-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:359px) { .bean-drafts { padding:12px; } .bean-draft-grid { gap:8px; } }