/* 在线音频工具集 — iOS 液态玻璃 tokens (§4) */
:root{
  --brand:#4A8DFF; --brand-hover:#3B7DEF; --brand-active:#356FD1;
  --prog-from:#7AA8FF; --prog-to:#4A8DFF;
  --cache-done:#7ED6A0; --warn:#F5A524; --danger:#E5484D;
  --radius-card:20px; --radius-row:14px; --radius-btn:12px;
  --shadow:0 8px 32px rgba(0,0,0,.08);
  --shadow-hover:0 12px 40px rgba(0,0,0,.12);
  --ease:cubic-bezier(.32,.72,.24,1);
  --bg1:#E8EEF7; --bg2:#F5F7FA;
  --glass:rgba(255,255,255,.62); --glass-border:rgba(255,255,255,.7);
  --line:rgba(0,0,0,.06);
  --txt-main:#1F2733; --txt-mid:#6B7686; --txt-light:#9AA3B2;
}
[data-theme="dark"]{
  --bg1:#0B1220; --bg2:#151D2E;
  --glass:rgba(21,29,46,.62); --glass-border:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.08);
  --txt-main:#E8EDF5; --txt-mid:#9AA6B8; --txt-light:#6B7686;
  --shadow:0 8px 32px rgba(0,0,0,.35);
  --shadow-hover:0 12px 40px rgba(0,0,0,.5);
}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  color:var(--txt-main);
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.glass{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  border-radius:var(--radius-card);
}
.glass-nav{
  position:sticky;top:0;z-index:50;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav-tab{padding:.55rem 1rem;border-radius:var(--radius-btn);color:var(--txt-mid);font-size:.92rem;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;transition:all .22s var(--ease)}
.nav-tab:hover{background:rgba(74,141,255,.1);color:var(--txt-main)}
.nav-tab.active{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn-brand{background:var(--brand);color:#fff;border-radius:var(--radius-btn);transition:all .2s var(--ease)}
.btn-brand:hover{background:var(--brand-hover);transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.btn-brand:active{background:var(--brand-active);transform:scale(.97)}
.btn-brand:disabled{opacity:.55;transform:none;cursor:not-allowed}
.btn-ghost{border:1px solid var(--line);border-radius:var(--radius-btn);color:var(--txt-main);transition:all .2s var(--ease)}
.btn-ghost:hover{background:rgba(127,127,127,.08)}
.card-hover{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.prog{height:8px;border-radius:999px;background:rgba(127,127,127,.18);overflow:hidden}
.prog>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--prog-from),var(--prog-to));transition:width .25s var(--ease)}
.cachebar{height:2px;border-radius:999px;background:rgba(127,127,127,.25);overflow:hidden;margin-top:4px}
.cachebar>i{display:block;height:100%;transition:width .3s var(--ease)}
.cachebar>i.idle{background:rgba(127,127,127,.35)}
.cachebar>i.loading{background:var(--brand)}
.cachebar>i.done{background:var(--cache-done)}
.dropzone{border:2px dashed rgba(74,141,255,.45);border-radius:var(--radius-card);transition:all .22s var(--ease)}
.dropzone.dragover{border-color:var(--brand);background:rgba(74,141,255,.08);transform:scale(1.005)}
input,select,textarea{color:var(--txt-main)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.badge{font-size:.72rem;padding:.15rem .55rem;border-radius:999px;background:rgba(74,141,255,.12);color:var(--brand)}
.badge.local{background:rgba(245,165,36,.15);color:#b97a0c}
.badge.admin{background:rgba(126,214,160,.18);color:#1d7a4c}
[data-theme="dark"] .badge.local{color:var(--warn)}
[data-theme="dark"] .badge.admin{color:var(--cache-done)}
.row-item{border-radius:var(--radius-row);border:1px solid var(--line);transition:all .2s var(--ease)}
.row-item:hover{background:rgba(127,127,127,.06)}
.skeleton{position:relative;overflow:hidden;background:rgba(127,127,127,.15);border-radius:8px}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:sk 1.2s infinite}
@keyframes sk{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:.7rem 1.1rem;border-radius:12px;font-size:.9rem;box-shadow:var(--shadow-hover);animation:tin .25s var(--ease);max-width:min(92vw,480px)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.ok{background:#1d7a4c;color:#fff}.toast.err{background:#b3261e;color:#fff}.toast.warn{background:#b97a0c;color:#fff}.toast.info{background:#2b3446;color:#fff}
.modal-mask{position:fixed;inset:0;background:rgba(10,15,25,.45);backdrop-filter:blur(4px);z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;animation:tin .22s var(--ease)}
.drag-ghost{opacity:.55;transform:scale(1.02) rotate(.5deg);box-shadow:0 16px 48px rgba(0,0,0,.2)!important}
.drop-line{height:3px;border-radius:999px;background:var(--brand);margin:2px 0}
canvas.wave{width:100%;border-radius:14px;background:rgba(127,127,127,.08);touch-action:none;cursor:crosshair}
input[type=range]{accent-color:var(--brand)}
.switch{position:relative;width:46px;height:27px;border-radius:999px;background:rgba(127,127,127,.35);transition:background .25s var(--ease);flex:none;cursor:pointer;border:none}
.switch::after{content:"";position:absolute;top:2.5px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:left .25s var(--ease)}
.switch[aria-checked="true"]{background:var(--brand)}
.switch[aria-checked="true"]::after{left:21px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:200;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px}
@media (max-width:768px){
  .nav-tabs{overflow-x:auto;scrollbar-width:none}
  .nav-tabs::-webkit-scrollbar{display:none}
  .row-item{min-height:64px}
  .btn-brand,.btn-ghost{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.middle-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.icon-a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#4A8DFF,#7AA8FF);color:#fff;font-weight:800;font-size:18px;box-shadow:var(--shadow);flex:none}
.icon-a svg{width:20px;height:20px}