* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:#f3f6fb; color:#172033; }
.hero { background:#fff; color:#172033; padding:20px 5vw; border-bottom:1px solid #e8edf5; box-shadow:0 8px 24px rgba(15, 31, 55, .06); }
.hero-inner { max-width:1180px; margin:auto; }
.brand-header { display:flex; align-items:center; justify-content:center; gap:16px; text-align:center; }
.site-logo { max-height:64px; max-width:180px; width:auto; height:auto; object-fit:contain; }
h1 { margin:0; font-size:clamp(26px, 3.2vw, 42px); line-height:1.1; font-weight:800; }
.container { max-width:1320px; margin:auto; padding:28px 5vw 60px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:24px; }
.card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 14px 35px rgba(15, 31, 55, .11); border:1px solid #e8edf5; }
.card-head { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 18px; border-bottom:1px solid #e8edf5; }
.card-head h2 { margin:0; font-size:20px; }
.card-head p { margin:5px 0 0; color:#667085; font-size:13px; }
.card-head a { background:#0f75d1; color:#fff; text-decoration:none; padding:10px 14px; border-radius:11px; font-weight:700; white-space:nowrap; }
.preview-box { position:relative; width:100%; height:min(56vw, 460px); min-height:320px; background:#111827; overflow:hidden; }
iframe { display:block; width:100%; height:100%; border:0; background:#111827; }
.sound-toolbar { position:absolute; right:12px; bottom:12px; z-index:5; display:flex; align-items:center; gap:8px; padding:8px; border-radius:999px; background:rgba(15, 23, 42, .82); backdrop-filter: blur(8px); box-shadow:0 8px 22px rgba(0,0,0,.22); }
.sound-status { color:#fff; font-size:13px; font-weight:700; white-space:nowrap; }
.btn-audio { border:0; border-radius:999px; padding:9px 13px; font-weight:800; cursor:pointer; background:#f59e0b; color:#111827; }
.preview-box[data-audio="on"] .btn-audio { background:#fff; color:#0f172a; }
.empty { background:#fff; border-radius:20px; padding:32px; box-shadow:0 14px 35px rgba(15, 31, 55, .09); }
.empty h2 { margin-top:0; }
@media(max-width:640px) {
    .grid { grid-template-columns:1fr; }
    .container { padding-left:14px; padding-right:14px; }
    .preview-box { min-height:260px; }
    .card-head { flex-direction:column; align-items:flex-start; }
    .brand-header { flex-direction:column; gap:10px; }
    .site-logo { max-height:54px; }
    .sound-toolbar { left:10px; right:10px; bottom:10px; justify-content:space-between; border-radius:16px; }
    .sound-status { font-size:12px; }
    .btn-audio { padding:9px 11px; }
}