:root{
  --bg-1:#030711;
  --bg-2:#08132b;
  --bg-3:#06111f;
  --panel:rgba(6,14,30,0.85);
  --panel-soft:rgba(255,255,255,0.04);
  --accent:#4ae2ff;
  --accent-2:#9efcff;
  --muted:#9fb6c8;
  --card:#f4fbff;
  --stroke:rgba(255,255,255,0.12);
  --glow:#1a75ff;
  --scrollbar-track:rgba(255,255,255,0.03);
  --scrollbar-thumb:rgba(74,226,255,0.35);
  --scrollbar-thumb-hover:rgba(74,226,255,0.55);
}

*{
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar{
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
  border-radius:12px;
}

*::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg, rgba(74,226,255,0.6), rgba(63,208,255,0.35));
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(135deg, var(--scrollbar-thumb-hover), rgba(63,208,255,0.5));
}

*::-webkit-scrollbar-corner{
  background:transparent;
}

body{
  margin:0;
  min-height:100vh;
  font-family:"Inter","HarmonyOS Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--card);
  background:
    radial-gradient(circle at 18% 22%, rgba(74,226,255,0.25), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(158,252,255,0.16), transparent 50%),
    linear-gradient(135deg,var(--bg-1),var(--bg-2));
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:80px 80px;
  opacity:0.6;
  pointer-events:none;
  z-index:-3;
}

::selection{
  background:rgba(74,226,255,0.25);
  color:#fff;
}

.ambient{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}
.ambient--one{
  background:radial-gradient(circle at 20% 30%, rgba(90,190,255,0.3), transparent 55%);
}
.ambient--two{
  background:radial-gradient(circle at 82% 68%, rgba(20,255,210,0.18), transparent 60%);
}

.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 32px 0 32px;
  position:relative;
  z-index:2;
}

.line-switcher{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:16px;
  background:linear-gradient(145deg, rgba(255,255,255,0.04), rgba(6,17,33,0.9));
  border:1px solid rgba(74,226,255,0.25);
  box-shadow:0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}

.line-switcher__label{
  font-size:0.88rem;
  color:var(--muted);
  letter-spacing:0.3px;
  display:flex;
  align-items:center;
  gap:6px;
}

.line-switcher__select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:linear-gradient(135deg, rgba(74,226,255,0.16), rgba(63,208,255,0.04));
  color:var(--card);
  border:1px solid rgba(74,226,255,0.35);
  border-radius:12px;
  padding:10px 40px 10px 14px;
  font-size:0.95rem;
  min-width:190px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.4);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:calc(100% - 24px) 50%, calc(100% - 16px) 50%;
  background-size:8px 8px, 8px 8px;
  background-repeat:no-repeat;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.line-switcher__select option{
  background:rgba(6,17,33,0.96);
  color:var(--card);
  padding:10px;
  font-size:0.95rem;
}

.line-switcher__select:focus{
  outline:1px solid rgba(74,226,255,0.6);
  box-shadow:0 14px 30px rgba(74,226,255,0.22);
  border-color:rgba(74,226,255,0.6);
}

.donate-trigger{
  border:none;
  border-radius:999px;
  padding:12px 22px;
  font-weight:700;
  color:#ffffff;
  background:linear-gradient(120deg, #ffd34f, #ff6f7a);
  box-shadow:0 16px 34px rgba(255,124,86,0.45);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.donate-trigger:hover{
  transform:translateY(-2px);
  filter:saturate(1.1);
  box-shadow:0 18px 38px rgba(255,124,86,0.55);
}

.sidebar__footer{
  margin-top:auto;
  padding-top:8px;
}

.sidebar__donate{
  width:100%;
  font-size:1rem;
  letter-spacing:1px;
  background:linear-gradient(120deg, #ffe271, #ff6e6e);
  box-shadow:0 18px 40px rgba(255,128,85,0.55);
  position:relative;
  overflow:hidden;
}

.sidebar__donate::after{
  content:"";
  position:absolute;
  inset:-40% 60% -40% -20%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform:skewX(-20deg);
  animation:donate-shine 3s ease-in-out infinite;
}

.logo-mark{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:1.25rem;
  letter-spacing:1px;
}

.logo-mark__accent{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(63,208,255,0.5), rgba(66,168,255,0.12));
  border:1px solid rgba(255,255,255,0.2);
  font-weight:700;
  box-shadow:0 10px 30px rgba(74,226,255,0.3);
}

.logo-mark small{
  display:block;
  color:var(--muted);
  font-size:0.7rem;
  letter-spacing:2px;
  text-transform:uppercase;
}

.container{
  display:flex;
  height:calc(100vh - 100px);
  gap:24px;
  padding:24px 32px 32px 32px;
  position:relative;
  z-index:2;
  isolation:isolate;
}

.sidebar{
  width:290px;
  background:var(--panel);
  border-radius:18px;
  padding:22px;
  border:1px solid var(--panel-soft);
  box-shadow:0 20px 45px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  gap:18px;
  backdrop-filter:blur(14px);
  max-height:calc(100vh - 140px);
}

.sidebar__header h2{
  margin:0;
  font-size:1.2rem;
  letter-spacing:0.5px;
}

.sidebar__header p{
  margin:6px 0 0 0;
  font-size:0.9rem;
  color:var(--muted);
}

.sidebar__search{
  position:relative;
  display:flex;
  align-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  padding:0 12px;
  gap:8px;
}

.sidebar__search input{
  flex:1;
  border:none;
  background:transparent;
  color:var(--card);
  padding:12px 0;
  font-size:0.95rem;
  outline:none;
}

.sidebar__search svg{
  width:18px;
  height:18px;
  stroke:var(--muted);
  fill:none;
  stroke-width:1.7;
}

.sidebar__source{
  display:flex;
  gap:10px;
  margin-top:6px;
  padding:6px;
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
}

.sidebar__source input{
  flex:1;
  border:none;
  background:transparent;
  color:var(--card);
  font-size:0.9rem;
  padding:10px;
  outline:none;
}

.sidebar__source button{
  border:none;
  border-radius:12px;
  padding:0 14px;
  font-weight:600;
  color:#03132a;
  background:linear-gradient(120deg,#20a7ff,#64ffe7);
  cursor:pointer;
  box-shadow:0 10px 20px rgba(18,180,255,0.3);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.sidebar__source button:hover{
  transform:translateY(-2px);
  filter:saturate(1.1);
  box-shadow:0 15px 28px rgba(18,180,255,0.35);
}

.sidebar__hint{
  margin:4px 0 0 4px;
  font-size:0.78rem;
  color:var(--muted);
}

.category-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  padding-right:4px;
  flex:1;
}

.category-list li{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.01);
  border:1px solid transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition:all .2s ease;
  font-weight:500;
}

.category-list__empty{
  padding:18px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.12);
  color:var(--muted);
  text-align:center;
}

.category-list__text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.category-list__text strong{
  color:var(--card);
  font-size:1rem;
}

.category-list__text span{
  font-size:0.78rem;
  color:var(--muted);
}

.category-list__count{
  font-size:0.78rem;
  color:var(--muted);
}

.category-list li:hover{
  border-color:rgba(255,255,255,0.15);
  color:var(--card);
  transform:translateX(6px);
}

.category-list li.active{
  background:linear-gradient(90deg, rgba(74,226,255,0.2), rgba(63,208,255,0.05));
  border-color:rgba(63,208,255,0.35);
  color:#fff;
}

.main-content{
  flex:1;
  display:flex;
  flex-direction:column;
}