/* apikl shared homepage background for login + console */
html,body{min-height:100%;}
body{
  background:
    radial-gradient(900px 480px at 50% 5%, rgba(58,240,213,.075), transparent 64%),
    radial-gradient(1180px 620px at 50% 112%, rgba(34,86,143,.085), transparent 64%),
    linear-gradient(180deg,#030713 0%,#06101d 44%,#020611 100%) !important;
  isolation:isolate;overflow-x:hidden;
}
html:not(.dark) body{
  background:
    radial-gradient(780px 500px at 50% 2%, rgba(9,127,108,.055), transparent 66%),
    radial-gradient(760px 560px at 8% 28%, rgba(9,127,108,.045), transparent 64%),
    radial-gradient(880px 560px at 96% 20%, rgba(100,116,139,.045), transparent 64%),
    linear-gradient(180deg,#f8faf9 0%,#f6f7f5 48%,#eef2f1 100%) !important;
}
body::before,body::after{content:"";position:fixed;pointer-events:none;transform:translateZ(0)}
body::before{inset:-22%;z-index:0;background:conic-gradient(from 224deg at 50% 34%,transparent 0deg,rgba(46,230,197,.115) 36deg,transparent 96deg,rgba(76,132,255,.085) 156deg,transparent 232deg,rgba(46,230,197,.06) 304deg,transparent 360deg);filter:blur(82px);opacity:.52;animation:aklSpectralDrift 32s ease-in-out infinite alternate;}
html:not(.dark) body::before{opacity:.24}
body::after{inset:0;z-index:0;background-image:linear-gradient(rgba(112,154,205,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(112,154,205,.03) 1px, transparent 1px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");background-size:104px 104px,104px 104px,170px 170px;-webkit-mask-image:radial-gradient(ellipse at 50% 43%, transparent 0 33%, rgba(0,0,0,.62) 65%, #000 100%);mask-image:radial-gradient(ellipse at 50% 43%, transparent 0 33%, rgba(0,0,0,.62) 65%, #000 100%);opacity:.56;animation:aklGridDrift 58s linear infinite;}
html:not(.dark) body::after{opacity:.42}
@keyframes aklSpectralDrift{from{transform:translate3d(-2.5%,-1%,0) rotate(-5deg) scale(1)}to{transform:translate3d(2.5%,1.5%,0) rotate(6deg) scale(1.06)}}
@keyframes aklGridDrift{from{background-position:0 0,0 0,0 0}to{background-position:92px 92px,92px 92px,170px 170px}}
#akl-app-bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;}
#app{position:relative;z-index:1;min-height:100dvh;background:transparent!important;}
#app>.min-h-screen,#app .min-h-screen,#app main,#app [class*="main-content"]{background:transparent!important;}
html:not(.dark) #app .bg-gray-50{background-color:transparent!important;}
html:not(.dark) #app .bg-gray-100{background-color:rgba(243,244,246,.62)!important;}
html.dark #app .bg-gray-50,html.dark #app .dark\:bg-gray-900,html.dark #app .dark\:bg-slate-900,html.dark #app .dark\:bg-gray-950{background-color:transparent!important;}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}

body{background:#020617!important;isolation:isolate;overflow-x:hidden;}html:not(.dark) body{background:#f9fafb!important;}body::before,body::after{content:""!important;position:fixed!important;inset:0!important;pointer-events:none!important;transform:none!important;animation:none!important;filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important;}body::before{display:block!important;z-index:0!important;background:linear-gradient(rgba(20,184,166,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,.03) 1px,transparent 1px),linear-gradient(to bottom right,#020617 0%,#0f172a 50%,#020617 100%)!important;background-size:64px 64px,64px 64px,100% 100%!important;background-position:0 0!important;}body::after{display:block!important;z-index:0!important;background:radial-gradient(420px 420px at 100% 0%,rgba(45,212,191,.20),transparent 64%),radial-gradient(420px 420px at 0% 100%,rgba(20,184,166,.15),transparent 64%),radial-gradient(520px 520px at 50% 50%,rgba(94,234,212,.10),transparent 66%)!important;}html:not(.dark) body::before{background:linear-gradient(rgba(13,148,136,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(13,148,136,.045) 1px,transparent 1px),linear-gradient(to bottom right,#f9fafb 0%,#f0fdfa 50%,#f3f4f6 100%)!important;background-size:64px 64px,64px 64px,100% 100%!important;}html:not(.dark) body::after{background:radial-gradient(420px 420px at 100% 0%,rgba(45,212,191,.12),transparent 64%),radial-gradient(420px 420px at 0% 100%,rgba(20,184,166,.09),transparent 64%),radial-gradient(520px 520px at 50% 50%,rgba(94,234,212,.07),transparent 66%)!important;}#akl-app-bg-canvas{display:none!important;}.bg-mesh-gradient{display:none!important;background-image:none!important;}#app,#app>.min-h-screen,#app .min-h-screen,#app main,#app [class*="main-content"]{background:transparent!important;}

body::after,html:not(.dark) body::after{display:none!important;background:none!important;}

@media (max-width:640px){
  body[data-akl-page="available-channels"] .layout-section-scrollable,
  body[data-akl-page="available-channels"] .table-scroll-container,
  body[data-akl-page="available-channels"] .table-scroll-container>.card{
    width:100%!important;min-width:0!important;overflow:visible!important;
  }
  body[data-akl-page="available-channels"] .table-scroll-container,
  body[data-akl-page="available-channels"] .table-scroll-container>.card{
    border:0!important;background:transparent!important;box-shadow:none!important;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed{
    display:block!important;width:100%!important;min-width:0!important;
    table-layout:auto!important;background:transparent!important;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed>thead{display:none!important}
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody{
    display:block!important;width:100%!important;border:0!important;margin:0 0 12px!important;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr{
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;
    padding:14px!important;border:1px solid rgba(71,85,105,.55)!important;border-radius:16px!important;
    background:rgba(30,41,59,.72)!important;box-shadow:0 1px 2px rgba(0,0,0,.16)!important;
  }
  html:not(.dark) body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr{
    border-color:rgba(203,213,225,.9)!important;background:rgba(255,255,255,.9)!important;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td{
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;
    padding:0!important;text-align:left!important;vertical-align:top!important;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td:nth-child(1){
    margin:0 0 2px!important;font-size:16px!important;font-weight:700!important;line-height:1.4!important;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td:nth-child(2){
    margin:0 0 12px!important;font-size:12px!important;line-height:1.4!important;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td:nth-child(n+3){
    margin-top:10px!important;padding-top:10px!important;border-top:1px solid rgba(71,85,105,.38)!important;
  }
  html:not(.dark) body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td:nth-child(n+3){
    border-top-color:rgba(226,232,240,.95)!important;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td:nth-child(n+3)::before{
    display:block;margin-bottom:7px;color:#94a3b8;font-size:10px;font-weight:700;
    line-height:1.2;letter-spacing:.08em;text-transform:uppercase;
  }
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td:nth-child(3)::before{content:"平台"}
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td:nth-child(4)::before{content:"我可访问的分组"}
  body[data-akl-page="available-channels"] table.w-full.table-fixed>tbody>tr>td:nth-child(5)::before{content:"支持模型"}
}

@media (max-width:640px){
  body[data-akl-page="keys"] div.fixed[class*="z-[100000020]"]{
    left:12px!important;right:12px!important;width:auto!important;
    min-width:0!important;max-width:calc(100vw - 24px)!important;
    top:76px!important;bottom:12px!important;height:auto!important;
    max-height:calc(100dvh - 88px)!important;display:flex!important;flex-direction:column!important;
    overflow:hidden!important;overscroll-behavior:contain!important;
  }
  body[data-akl-page="keys"] div.fixed[class*="z-[100000020]"] input{
    width:100%!important;min-width:0!important;
  }
  body[data-akl-page="keys"] div.fixed[class*="z-[100000020]"]>.max-h-80{
    flex:1 1 auto!important;min-height:0!important;max-height:none!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;
  }
  body[data-akl-page="keys"] div.fixed[class*="z-[100000020]"] button{
    width:100%!important;min-width:0!important;align-items:flex-start!important;
  }
  body[data-akl-page="keys"] div.fixed[class*="z-[100000020]"] .line-clamp-2{
    display:block!important;overflow:visible!important;
    -webkit-box-orient:initial!important;-webkit-line-clamp:unset!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;
  }
}

body[data-akl-page="monitor"] main .grid.gap-5:has(> button[class~="min-h-[280px]"]){
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))!important;
  width:100%!important;max-width:780px!important;
}
body[data-akl-page="monitor"] main button[class~="min-h-[280px]"]{
  min-width:0!important;overflow:hidden!important;
}
body[data-akl-page="monitor"] main button[class~="min-h-[280px]"] [class~="gap-[2px]"][class~="h-5"][class~="w-full"]{
  min-width:0!important;overflow:hidden!important;
}
body[data-akl-page="monitor"] main button[class~="min-h-[280px]"] [class~="gap-[2px]"][class~="h-5"][class~="w-full"]>div{
  min-width:0!important;
}
@media (max-width:767px){
  body[data-akl-page="monitor"] main .grid.gap-5:has(> button[class~="min-h-[280px]"]){
    grid-template-columns:minmax(0,1fr)!important;
  }
}