.coa-wrap{--gap:12px;--tile:140px}
.coa-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.coa-search{flex:1;min-width:160px}
.coa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:var(--gap)}
.coa-item{border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#fff;display:flex;flex-direction:column;gap:8px}
.coa-item .thumb{height:110px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:8px;overflow:hidden}
.coa-item .thumb img{max-height:100%;max-width:100%}
.coa-item .thumb .ico{font:700 36px/1 system-ui;color:#6b7280}
.coa-item .meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.coa-item .name{font-weight:600;font-size:14px;line-height:1.25;margin:0}
.coa-item .date{font-size:12px;color:#6b7280}
.coa-actions{display:flex;gap:8px}
.coa-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;background:#fff;text-decoration:none;font-size:13px}
.coa-btn.primary{background:#0ea5e9;color:#fff;border-color:#0ea5e9}
.coa-view{margin:12px 0;display:block}
.coa-list .coa-grid{grid-template-columns:1fr}
.coa-list .coa-item{flex-direction:row;align-items:center}
.coa-list .coa-item .thumb{width:80px;height:60px}
.coa-list .coa-item .name{font-size:15px}
.coa-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:9999;padding:10px}
.coa-modal .inner{background:#0b0f14;border-radius:12px;max-width:1200px;width:100%;height:88vh;display:flex;flex-direction:column}
.coa-modal header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;color:#e7f1ff;border-bottom:1px solid #1f2937}
.coa-modal .title{font-weight:700}
.coa-modal iframe{flex:1;width:100%;border:0;background:#111827}
@media(min-width:900px){.coa-wrap{--tile:180px}}