/* ALI Audio Unified Visual System — 2026-10-05 */
:root{
  --ali-bg:#070b12;
  --ali-bg-2:#0a1019;
  --ali-surface:#0d1520;
  --ali-surface-2:#111b28;
  --ali-surface-3:#152235;
  --ali-line:rgba(137,172,220,.15);
  --ali-line-strong:rgba(126,176,238,.30);
  --ali-text:#f3f7fc;
  --ali-muted:#8291a6;
  --ali-blue:#78adff;
  --ali-cyan:#66ddf5;
  --ali-violet:#9a8cff;
  --ali-green:#62dfa0;
  --ali-shadow:0 22px 60px rgba(0,0,0,.24);
  --ali-card-radius:18px;
  color-scheme:dark;
}
html{background:var(--ali-bg)}
body{
  background:
    radial-gradient(920px 620px at 82% -12%,rgba(70,120,225,.14),transparent 62%),
    radial-gradient(760px 520px at -10% 32%,rgba(56,201,231,.055),transparent 64%),
    radial-gradient(660px 480px at 42% 110%,rgba(132,91,224,.055),transparent 66%),
    var(--ali-bg)!important;
  color:var(--ali-text);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 76%);
}

/* Desktop navigation + top bars */
.sidebar{
  background:linear-gradient(180deg,rgba(9,14,22,.98),rgba(6,10,16,.99))!important;
  border-right-color:rgba(255,255,255,.055)!important;
}
.top,.topbar,.client-top{
  background:rgba(7,11,18,.78)!important;
  border-bottom-color:rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:0 10px 36px rgba(0,0,0,.14);
}
.brandmark,.client-logo{
  border-color:rgba(122,173,244,.22)!important;
  background:linear-gradient(145deg,#17263a,#0d1623)!important;
  box-shadow:0 10px 28px rgba(55,117,207,.13),inset 0 1px rgba(255,255,255,.055)!important;
}

/* Main visual cards */
.hero,.client-hero,.main-card,.side-card,.result-card,.tool-shell,.quick,.overview,
.feature,.workspace-summary>div,.workspace-summary>a,.popular-tools>a,.goal-grid>a,
.service-finder,.client-card,.quality-section,.faq-section,.public-cap-grid article,
.public-proof>div,.finder-choice,.service-card,.panel,.kpi,.period-strip>div{
  border-color:var(--ali-line)!important;
  background:
    linear-gradient(150deg,rgba(16,26,40,.96),rgba(9,15,24,.98))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 14px 40px rgba(0,0,0,.10);
}
.feature,.popular-tools>a,.goal-grid>a,.public-cap-grid article,.finder-choice,.service-card,
.workspace-summary>a,.download,.recent-list a,.recent>a{
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.feature:hover,.popular-tools>a:hover,.goal-grid>a:hover,.public-cap-grid article:hover,
.finder-choice:hover,.service-card:hover,.workspace-summary>a:hover{
  transform:translateY(-3px)!important;
  border-color:var(--ali-line-strong)!important;
  background:linear-gradient(150deg,rgba(20,34,52,.98),rgba(11,18,29,.99))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.035)!important;
}

/* Audio tool cards */
.op-card,.mini-op,.control-panel,.wave-editor,.tool-search,.more-tools,.result-file,
.quality-report-grid div,.analysis-grid div,.compare-audio label,.recent-list{
  border-color:var(--ali-line)!important;
  background:linear-gradient(145deg,rgba(14,23,35,.98),rgba(8,14,22,.98))!important;
}
.op-card,.mini-op{border-radius:14px!important}
.op-card:hover,.mini-op:hover{border-color:rgba(122,174,242,.27)!important;background:#111d2b!important}
.primary-tools input:checked+.op-card,.advanced-grid input:checked+.mini-op{
  border-color:rgba(104,186,248,.48)!important;
  background:linear-gradient(145deg,rgba(28,51,78,.95),rgba(15,29,46,.98))!important;
  box-shadow:0 0 0 1px rgba(101,199,245,.08) inset,0 12px 30px rgba(0,0,0,.16)!important;
}
.op-card i,.popular-icon,.feature-icon,.cap-icon,.file-icon,.drop-icon{
  border-color:rgba(115,169,239,.22)!important;
  background:linear-gradient(145deg,#17273b,#0f1926)!important;
  color:#b6d5ff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}

/* Typography / card clarity */
.feature h4,.goal-grid h4,.public-cap-grid h3,.service-card>b,.finder-choice b,.op-card b,.mini-op b{
  color:#f3f7fc!important;
}
.feature p,.goal-grid p,.public-cap-grid p,.service-card p,.finder-choice small,.op-card small,.mini-op small,
.workspace-summary small,.popular-tools small{
  color:#8796aa!important;
}
.section-title h3,.public-cap-head h2,.intro h2{color:#f5f8fc}
.section-title span,.feature-tag,.public-cap-head>span,.tool-section-title span{color:#7086a7!important}

/* Upload areas and controls */
.drop,.modern-drop,.upload-box{
  border-color:rgba(112,166,235,.28)!important;
  background:linear-gradient(145deg,rgba(11,20,31,.96),rgba(7,12,19,.98))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.drop:hover,.modern-drop:hover,.upload-box:hover{
  border-color:rgba(112,187,246,.54)!important;
  background:linear-gradient(145deg,rgba(17,31,48,.98),rgba(9,16,25,.99))!important;
}
.control-panel select,.control-panel input[type=text],.field input,.field select,.tag-panel input[type=text]{
  border-color:rgba(125,163,216,.18)!important;
  background:#0b1420!important;
  color:#e6edf7!important;
}
.control-panel select:focus,.control-panel input[type=text]:focus,.field input:focus,.field select:focus{
  border-color:rgba(102,196,241,.48)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(79,180,234,.08)!important;
}

/* Main CTA */
.primary,.process,.submit,.big-submit,.hero-primary,.checkout-btn,.result-actions .primary-action,.download-all{
  border-color:transparent!important;
  background:linear-gradient(135deg,#f3f8ff,#d9e8fb)!important;
  color:#07101a!important;
  box-shadow:0 10px 30px rgba(94,161,232,.12)!important;
}
.primary:hover,.process:hover,.submit:hover,.big-submit:hover,.hero-primary:hover,.checkout-btn:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 15px 36px rgba(94,161,232,.20)!important;
}

/* Status accents */
.engine i,.engine-line i,.system i,.online i,.status-dot{
  background:var(--ali-green)!important;
  box-shadow:0 0 14px rgba(98,223,160,.38)!important;
}
.state,.online{
  background:rgba(60,196,127,.07)!important;
  border-color:rgba(93,220,151,.19)!important;
  color:#7fe2aa!important;
}

/* Private workspace bottom navigation */
@media(max-width:820px){
  body{padding-bottom:calc(98px + env(safe-area-inset-bottom))!important}
  .mobile-nav{
    position:fixed!important;
    z-index:9999!important;
    left:10px!important;
    right:10px!important;
    bottom:max(9px,env(safe-area-inset-bottom))!important;
    height:78px!important;
    padding:7px!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    border:1px solid rgba(138,180,235,.18)!important;
    border-radius:23px!important;
    background:rgba(8,14,23,.93)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.2)!important;
    backdrop-filter:blur(24px) saturate(1.2)!important;
    box-shadow:0 20px 54px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.025)!important;
  }
  .mobile-nav a{
    min-width:0!important;
    height:64px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    padding:5px!important;
    border-radius:16px!important;
    color:#8190a5!important;
    font-size:11.5px!important;
    font-weight:800!important;
    line-height:1!important;
    transition:.16s ease!important;
  }
  .mobile-nav svg{width:25px!important;height:25px!important;stroke-width:2!important}
  .mobile-nav a span{font-size:11.5px!important;font-weight:800!important}
  .mobile-nav a.active{
    color:#eaf8ff!important;
    background:linear-gradient(145deg,rgba(74,202,238,.14),rgba(91,117,240,.11))!important;
    box-shadow:inset 0 0 0 1px rgba(92,210,245,.16)!important;
  }
  .mobile-nav a.active svg{color:var(--ali-cyan)!important;filter:drop-shadow(0 0 8px rgba(102,221,245,.26))}
  .mobile-nav a:active{transform:scale(.96)}
}

/* Public/client bottom navigation */
@media(max-width:760px){
  .mobile-bottom-nav{
    left:10px!important;
    right:10px!important;
    bottom:max(9px,env(safe-area-inset-bottom))!important;
    height:78px!important;
    padding:7px!important;
    gap:5px!important;
    border:1px solid rgba(138,180,235,.18)!important;
    border-radius:23px!important;
    background:rgba(8,14,23,.94)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.2)!important;
    backdrop-filter:blur(24px) saturate(1.2)!important;
    box-shadow:0 20px 54px rgba(0,0,0,.50),inset 0 1px rgba(255,255,255,.025)!important;
  }
  .mobile-nav-item{
    min-height:64px!important;
    border-radius:16px!important;
    gap:5px!important;
    color:#8190a5!important;
  }
  .mobile-nav-item svg{width:25px!important;height:25px!important;stroke-width:2!important}
  .mobile-nav-item span{font-size:11.5px!important;font-weight:800!important}
  .mobile-nav-item.active{
    color:#eaf8ff!important;
    background:linear-gradient(145deg,rgba(74,202,238,.14),rgba(91,117,240,.11))!important;
    box-shadow:inset 0 0 0 1px rgba(92,210,245,.16)!important;
  }
  .mobile-nav-item.active svg{color:var(--ali-cyan)!important;filter:drop-shadow(0 0 8px rgba(102,221,245,.26))}
  .mobile-service-cta{
    bottom:calc(98px + env(safe-area-inset-bottom))!important;
    border:1px solid rgba(132,176,236,.18)!important;
    background:rgba(11,18,29,.94)!important;
    box-shadow:0 18px 48px rgba(0,0,0,.42)!important;
  }
}

/* Mobile cards: cleaner spacing, no tiny UI */
@media(max-width:760px){
  main{padding-left:11px!important;padding-right:11px!important}
  .hero,.client-hero,.tool-shell,.main-card,.side-card,.result-card,.quick,.overview,.feature,
  .workspace-summary>div,.workspace-summary>a,.popular-tools>a,.goal-grid>a,.public-cap-grid article,
  .service-finder,.client-card,.quality-section,.faq-section{
    border-radius:16px!important;
  }
  .op-card{min-height:126px!important;padding:14px!important}
  .op-card b{font-size:13.5px!important}
  .op-card small{font-size:11.5px!important;line-height:1.5!important}
  .mini-op{min-height:78px!important;padding:12px!important}
  .mini-op b{font-size:12.5px!important}.mini-op small{font-size:10.5px!important}
  .feature p,.goal-grid p,.public-cap-grid p,.popular-tools small,.workspace-summary small{font-size:11.5px!important}
  .feature h4,.goal-grid h4,.public-cap-grid h3{font-size:17px!important}
  .tool-filters button{min-height:42px!important;font-size:11.5px!important}
  .tool-search input{font-size:14px!important}
}

/* Keep motion subtle */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important}
}