/* ===== MastersCash audio clips (site): player, lists, recorder ===== */
.sa{display:inline-flex;align-items:center;gap:10px;max-width:min(420px,100%);padding:6px 12px 6px 6px;border:1px solid rgba(201,169,97,.55);border-radius:999px;background:#0b0b0b;vertical-align:middle;line-height:1;box-sizing:border-box}
.sa-play{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(230,192,74,.9);background:rgba(230,192,74,.1);color:#e6c04a;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.sa-play svg{width:16px;height:16px}
.sa-play:hover,.sa.playing .sa-play{background:#e6c04a;color:#111}
.sa-wave{flex:1;min-width:110px;height:26px;display:flex;align-items:center;gap:2px;cursor:pointer}
.sa-wave i{display:block;width:3px;border-radius:2px;background:#4a4a4f;transition:background .12s}
.sa-wave i.on{background:#e6c04a}
.sa-time{flex:none;font-size:12.5px;font-weight:700;color:#e8e8ea;font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.sa.playing .sa-time{color:#e6c04a}
.sa-lock{flex:none;font-size:11px;font-weight:700;color:#e6c04a;text-decoration:none;padding:4px 9px;border-radius:999px;border:1px solid rgba(230,192,74,.45);white-space:nowrap}
.sa-lock:hover{background:rgba(230,192,74,.14)}
.sa.sa-ended .sa-lock{background:#e6c04a;color:#111}
.sa-sm{max-width:100%;padding:4px 10px 4px 4px}
.sa-sm .sa-play{width:30px;height:30px}
.sa-sm .sa-wave{height:20px;min-width:80px}
.post-audio{margin:8px 0 2px}
.post-audio .sa-cap{margin-top:10px}
.sa-upsell{margin-top:10px;font-size:13px;color:var(--muted,#9a9aa2)}
.sa-upsell a{color:#e6c04a;font-weight:700}
/* lists (/audio, profile block) */
.sa-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sa-list-sm{grid-template-columns:1fr;gap:10px}
.sa-card{border:1px solid var(--line,#1f1f1f);border-radius:14px;padding:12px;background:var(--panel,#0b0b0b);display:flex;flex-direction:column;gap:10px;min-width:0}
.sa-who{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;min-width:0}
.sa-av{width:30px;height:30px;border-radius:50%;background:#222 center/cover no-repeat;flex:none}
.sa-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-ago{margin-left:auto;font-size:12px;color:var(--muted,#9a9aa2);white-space:nowrap}
.sa-card .sa-cap{font-size:13.5px;line-height:1.45;color:var(--text,#e8e8ea);overflow-wrap:anywhere}
.sa-foot{display:flex;gap:12px;align-items:center;font-size:12.5px}
.sa-foot a{color:var(--accent,#e6c04a);text-decoration:none;font-weight:600}
.sa-del{margin-left:auto;background:none;border:0;color:#ef4444;cursor:pointer;font-weight:700;font-size:12px;font-family:inherit}
@media(max-width:600px){.sa-list{grid-template-columns:1fr}}
/* recorder modal */
.sar-ov{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.sar-card{position:relative;width:100%;max-width:520px;background:#0b0b0b;border:1px solid #262626;border-radius:20px;padding:24px 22px 20px;color:#e8e8ea;text-align:center;font-family:inherit;box-shadow:0 30px 80px -20px rgba(0,0,0,.9);margin:auto}
.sar-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:#aaa;font-size:24px;line-height:1;cursor:pointer}
.sar-x:hover{color:#fff;background:#1a1a1a}
.sar-title{font-size:22px;font-weight:800;color:#fff;margin:0 0 4px}
.sar-hint{font-size:13.5px;color:#a0a0a8;margin:0 0 14px;min-height:18px}
.sar-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid #262626;border-radius:12px;margin:0 0 16px;background:#060606}
.sar-tab{height:40px;border:0;border-radius:9px;background:transparent;color:#c7c7cc;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.sar-tab.on{background:#e6c04a;color:#111}
.sar-mic{width:104px;height:104px;border-radius:50%;margin:0 auto 10px;border:3px solid #e6c04a;background:#111;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.sar-mic svg{width:42px;height:42px}
.sar-mic:hover{transform:scale(1.03)}
.sar-ov[data-state="rec"] .sar-mic{animation:sar-pulse 1.2s ease-in-out infinite}
@keyframes sar-pulse{0%,100%{box-shadow:0 0 0 0 rgba(230,192,74,0),0 0 26px -6px rgba(230,192,74,.7)}50%{box-shadow:0 0 0 14px rgba(230,192,74,0),0 0 46px -4px rgba(230,192,74,1)}}
.sar-timer{font-size:15px;color:#c7c7cc;margin:0 0 12px;font-variant-numeric:tabular-nums}
.sar-timer b{color:#fff;font-weight:800}
.sar-wave{display:block;width:100%;height:56px;margin:0 auto 12px;background:#060606;border:1px solid #1f1f1f;border-radius:12px}
.sar-recbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.sar-btn{height:46px;border-radius:12px;border:1px solid #2a2a2a;background:#141414;color:#e8e8ea;font-weight:700;font-size:14.5px;cursor:pointer;font-family:inherit}
.sar-stop{background:#e6c04a;border-color:#e6c04a;color:#111}
.sar-ov[data-state="idle"] .sar-recbtns,.sar-ov[data-state="done"] .sar-stop{opacity:.4;pointer-events:none}
.sar-ov[data-state="idle"] .sar-redo{display:none}
.sar-ov[data-state="idle"] .sar-recbtns{grid-template-columns:1fr}
.sar-file{display:block;padding:22px 14px;border:1px dashed rgba(230,192,74,.5);border-radius:12px;color:#c7c7cc;font-size:14px;cursor:pointer;margin:0 0 14px}
.sar-file input{display:block;margin:0 auto 10px;color:#c7c7cc;font-size:13px}
.sar-preview{display:none;width:100%;margin:0 0 12px;height:40px;filter:invert(1) hue-rotate(180deg) saturate(.6)}
.sar-ov[data-state="done"] .sar-preview,.sar-ov[data-state="sending"] .sar-preview{display:block}
.sar-cap{display:block;width:100%;box-sizing:border-box;min-height:58px;padding:10px 14px;border-radius:12px;border:1px solid #2a2a2a;background:#060606;color:#fff;font-family:inherit;font-size:14.5px;resize:vertical;margin:0 0 10px}
.sar-cap:focus{outline:0;border-color:rgba(230,192,74,.7)}
.sar-imgrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;text-align:left}
.sar-imgbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;border:1px solid #2a2a2a;background:#141414;color:#e8e8ea;font-size:13.5px;font-weight:700;cursor:pointer}
.sar-imgbtn input{display:none}
.sar-imgname{font-size:12.5px;color:#9a9aa2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.sar-status{min-height:18px;font-size:13px;color:#e6c04a;margin:0 0 8px}
.sar-post{width:100%;height:50px;border-radius:12px;border:1px solid #e6c04a;background:#e6c04a;color:#111;font-weight:800;font-size:16px;cursor:pointer;font-family:inherit}
.sar-post:hover{background:#f0cf62}
.sar-ov[data-state="sending"] .sar-post,.sar-ov[data-state="rec"] .sar-post{opacity:.4;pointer-events:none}
@media(max-width:520px){.sar-card{padding:20px 14px 16px;border-radius:16px}.sar-title{font-size:19px}.sar-mic{width:88px;height:88px}}

/* ===== /audio hub (mockup layout) ===== */
.sah{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;max-width:1340px;margin:0 auto;width:100%;padding:4px 0 30px}
.sah-main{min-width:0}
.sah-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:6px 0 16px}
.sah-title{margin:0;font-size:46px;line-height:1;font-weight:900;letter-spacing:-.02em;color:#fff}
.sah-title span{color:#e6c04a}
.sah-sub{margin:10px 0 0;color:#c7c7cc;font-size:16px}
.sah-up{text-align:right}
html body .sah-upbtn,html body .sah-upbtn:hover{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:12px;background:linear-gradient(180deg,#f0cf62,#e6c04a);color:#111!important;font-weight:800;font-size:17px;text-decoration:none;box-shadow:0 10px 30px -12px rgba(230,192,74,.9)}
.sah-upbtn svg{width:22px;height:22px}
.sah-up small{display:block;margin-top:6px;color:#9a9aa2;font-size:12px}
.sah-tabs{display:flex;gap:6px;padding:6px;border:1px solid #1f1f1f;border-radius:14px;background:#0a0a0a;margin:0 0 16px;overflow-x:auto}
html body .sah-tabs a{flex:none;padding:10px 22px;border-radius:10px;color:#c7c7cc;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
html body .sah-tabs a.on{background:#e6c04a;color:#111!important}
.sah-filter{font-size:13.5px;color:#9a9aa2;margin:0 0 12px}
.sah-filter a{color:#e6c04a}
.sa-rows{display:flex;flex-direction:column;gap:10px}
.sa-row{display:grid;grid-template-columns:86px minmax(150px,1.2fr) minmax(260px,2fr) auto;align-items:center;gap:16px;padding:10px 14px 10px 10px;border:1px solid #1f1f1f;border-radius:16px;background:linear-gradient(180deg,#0d0d0d,#080808);min-width:0}
.sa-row:hover{border-color:rgba(201,169,97,.4)}
.sa-thumb{width:86px;height:86px;border-radius:12px;background:#1a1a1a center/cover no-repeat;flex:none;display:block}
.sa-rowmain{min-width:0}
.sa-rowname{display:flex;align-items:center;gap:6px;color:#fff;font-weight:800;font-size:17px;text-decoration:none;min-width:0}
.sa-crown{color:#e6c04a;font-size:16px}
.sa-rowcap{color:#c7c7cc;font-size:15px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-row .sa{max-width:none;width:100%;background:transparent;border:0;padding:0}
.sa-row .sa-play{width:48px;height:48px;border-width:2px}
.sa-row .sa-play svg{width:20px;height:20px}
.sa-row .sa-wave{height:34px;min-width:120px}
.sa-row .sa-wave i{width:3px}
.sa-row .sa-time{font-size:15px;min-width:38px}
.sa-rowmeta{display:flex;align-items:center;gap:14px;white-space:nowrap;color:#c7c7cc;font-size:14px}
.sa-chip{padding:7px 12px;border-radius:9px;border:1px solid #2a2a2a;background:#0f0f0f;color:#e8e8ea;font-size:13px;font-weight:600;text-decoration:none}
.sa-chip:hover{border-color:rgba(230,192,74,.5)}
.sa-fav,.sa-plays{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#c7c7cc;font-family:inherit;font-size:14px;cursor:pointer;padding:0}
.sa-fav svg,.sa-plays svg{width:18px;height:18px}
.sa-fav.on,.sa-fav:hover{color:#e6c04a}
.sa-plays{cursor:default}
.sa-rowago{color:#9a9aa2;font-size:13.5px}
.sa-menu{position:relative}
.sa-dots{background:none;border:0;color:#c7c7cc;font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
.sa-menuList{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:150px;background:#0b0b0b;border:1px solid #2a2a2a;border-radius:12px;padding:6px;box-shadow:0 20px 40px -12px rgba(0,0,0,.9)}
.sa-menu.open .sa-menuList{display:block}
.sa-menuList a,.sa-menuList button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:#e8e8ea;font-family:inherit;font-size:14px;text-decoration:none;cursor:pointer}
.sa-menuList a:hover,.sa-menuList button:hover{background:#1a1712}
.sa-menuList .sa-del{color:#ef4444;margin:0;font-weight:600}
.sah-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.sah-card{border:1px solid #1f1f1f;border-radius:16px;background:linear-gradient(180deg,#0d0d0d,#080808);padding:18px}
.sah-card h3{margin:0 0 12px;font-size:19px;font-weight:800;color:#fff;display:flex;align-items:center}
.sah-more{margin-left:auto;font-size:13px;color:#e6c04a;text-decoration:none;font-weight:700}
.sah-search{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border:1px solid #2a2a2a;border-radius:12px;background:#060606}
.sah-search svg{width:18px;height:18px;color:#9a9aa2;flex:none}
.sah-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:14.5px;font-family:inherit}
html body .sah-cat{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;color:#e8e8ea;text-decoration:none;font-size:15px;margin-bottom:2px}
.sah-cat b{font-weight:700;color:#9a9aa2}
.sah-cat:hover{background:#121212}
html body .sah-cat.on{background:#e6c04a;color:#111!important}
html body .sah-cat.on b{color:#111!important}
.sah-top{display:flex;align-items:center;gap:12px;padding:8px 2px;text-decoration:none;color:inherit}
.sah-rank{width:26px;height:26px;border-radius:50%;background:#2a2a2a;color:#e8e8ea;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sah-rank.r1{background:#e6c04a;color:#111}.sah-rank.r2{background:#c0c0c0;color:#111}.sah-rank.r3{background:#cd7f32;color:#111}
.sah-av{width:44px;height:44px;border-radius:50%;background:#222 center/cover no-repeat;flex:none;border:2px solid #2a2a2a}
.sah-topname b{display:block;color:#fff;font-size:15px}
.sah-topname small{color:#9a9aa2;font-size:13px}
.sar-cat{display:block;width:100%;box-sizing:border-box;height:44px;padding:0 14px;border-radius:12px;border:1px solid #2a2a2a;background:#060606;color:#fff;font-family:inherit;font-size:14.5px;margin:0 0 10px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#e6c04a 50%),linear-gradient(135deg,#e6c04a 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
@media(max-width:1100px){.sah{grid-template-columns:1fr}.sah-card{padding:14px}.sah-cat{padding:9px 12px}}
@media(max-width:820px){
  .sah-title{font-size:34px}.sah-sub{font-size:14.5px}
  .sa-row{grid-template-columns:56px minmax(0,1fr);gap:10px 12px;padding:10px}
  .sa-thumb{width:56px;height:56px}
  .sa-row .sa{grid-column:1/-1}
  .sa-rowmeta{grid-column:1/-1;flex-wrap:wrap;gap:10px 14px;justify-content:space-between}
  .sa-row .sa-play{width:42px;height:42px}
  .sah-tabs a{padding:9px 14px;font-size:14px}
  .sah-head{flex-direction:column}.sah-up{text-align:left}
}
