:root{color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:#0b0e12;color:#e5e7eb;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol}.app{display:grid;grid-template-rows:auto 1fr;height:100%}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#0f1319;border-bottom:1px solid #1f2937}.header h1{margin:0;font-size:16px;letter-spacing:.4px;color:#f3f4f6}.header .actions{display:flex;gap:8px}.button{padding:8px 12px;border-radius:10px;background:#1a1f29;border:1px solid #293241;color:#e5e7eb;cursor:pointer}.button:hover{background:#232a36}.button.secondary{background:transparent;border-color:#202635}.content{height:100%}.menu{max-width:1100px;margin:24px auto;padding:0 16px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.card{border:1px solid #1f2937;background:linear-gradient(180deg,#161b2499,#0e121899);border-radius:16px;overflow:hidden;transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease;cursor:pointer}.card:hover{transform:translateY(-2px);border-color:#334155;box-shadow:0 10px 30px #00000040}.card .thumb{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(80% 60% at 50% 40%,#1b2230,#0e131b)}.card .thumb .placeholder{width:60%;height:60%;border-radius:50%;background:conic-gradient(from 0deg,#3b82f6,#06b6d4,#8b5cf6,#3b82f6);filter:blur(18px);opacity:.4}.card .meta{padding:12px;display:flex;align-items:center;justify-content:space-between}.card .title{font-weight:600}.badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid #334155;background:#0b0f16;color:#93c5fd}.viewerWrap{height:calc(100vh - 57px)}.canvasOverlay{position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:10}.hint{position:absolute;left:12px;bottom:12px;font-size:12px;opacity:.7}