:root{
  --bg:#0b0f14;
  --panel:#121824;
  --panel2:#0f1520;
  --text:#e8edf5;
  --muted:#aab6c7;
  --border:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --focus:0 0 0 3px rgba(110,168,255,.45);
  --radius:16px;
  --base:16px;
  --line:1.5;
  --maxw:1060px;
  --chip:rgba(255,255,255,.08);
  --chipActive:rgba(110,168,255,.22);
}

html,body{height:100%;}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(110,168,255,.18), transparent 60%),
    radial-gradient(1200px 700px at 110% 10%, rgba(255,90,106,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  font-size:var(--base);
  line-height:var(--line);
}

[data-theme="light"]{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --panel2:#fbfcff;
  --text:#141a24;
  --muted:#4a586b;
  --border:rgba(20,26,36,.10);
  --shadow:0 10px 30px rgba(20,26,36,.10);
  --chip:rgba(20,26,36,.06);
  --chipActive:rgba(27,109,255,.12);
}

.skip{
  position:absolute;
  left:-999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.skip:focus{
  left:12px; top:12px;
  width:auto; height:auto;
  padding:10px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  z-index:9999;
  outline:none;
  box-shadow:var(--focus);
}

.header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(10px);
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--border);
}

.topbar{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}

.logo{
  width:38px; height:38px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(110,168,255,.9), rgba(79,211,122,.85));
  box-shadow:var(--shadow);
}

.brandText h1{margin:0; font-size:1.05rem; letter-spacing:.2px;}
.brandText p{margin:0; font-size:.85rem; color:var(--muted);}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.btn{
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--panel) 92%, transparent);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  min-height:40px;
  color:inherit;
  font:inherit;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:none; box-shadow:var(--focus);}
.btn.ghost{background:transparent;}

.filters{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 16px 14px;
}

.search{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--panel) 92%, transparent);
  border-radius:14px;
  padding:10px 12px;
  min-height:44px;
}
.search input{
  border:0; outline:0; background:transparent;
  width:100%;
  color:inherit;
  font:inherit;
}
.search input::placeholder{color:color-mix(in oklab, var(--muted) 80%, transparent);}

.chips{
  display:flex;
  gap:8px;
  align-items:center;
  overflow:auto;
  padding:10px 0 6px;
  scrollbar-width:thin;
}

.chip{
  border:1px solid var(--border);
  background:var(--chip);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  white-space:nowrap;
  min-height:38px;
  color:inherit;
  font:inherit;
}
.chip[aria-pressed="true"]{
  background:var(--chipActive);
  border-color:color-mix(in oklab, rgba(110,168,255,1) 40%, var(--border));
}
.chip:focus-visible{outline:none; box-shadow:var(--focus);}

.summary{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  padding:6px 2px 0;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 16px 28px;
}

.status{
  color:var(--muted);
  min-height:1.2em;
  margin:2px 0 12px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}

.card{
  grid-column:span 6;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--panel) 92%, transparent);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
  display:flex;
  gap:12px;
  align-items:center;
  cursor:pointer;
  color:inherit;
  font:inherit;
  min-height:84px;
  text-align:left;
  transition:transform .10s ease, border-color .15s ease;
}
.card:hover{
  transform:translateY(-1px);
  border-color:color-mix(in oklab, rgba(110,168,255,1) 25%, var(--border));
}
.card:focus-visible{outline:none; box-shadow:var(--focus);}

@media (min-width:720px){ .card{grid-column:span 4;} }
@media (min-width:980px){ .card{grid-column:span 3;} }

.iconWrap{
  width:56px; height:56px;
  border-radius:14px;
  background:color-mix(in oklab, var(--panel2) 92%, transparent);
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.iconWrap img{
  width:48px; height:48px;
  object-fit:contain;
  display:block;
}

.meta{min-width:0; width:100%;}
.title{
  margin:0;
  font-weight:650;
  font-size:.98rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sub{
  margin:3px 0 0;
  font-size:.86rem;
  color:var(--muted);
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.tag{
  padding:4px 10px;
  border-radius:999px;
  background:var(--chip);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:.80rem;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
  z-index:90;
}

dialog{
  border:1px solid var(--border);
  border-radius:18px;
  padding:0;
  width:min(720px, calc(100% - 24px));
  background:var(--panel);
  color:var(--text);
  box-shadow:var(--shadow);
  z-index:100;
}
dialog:not([open]){display:none;}
dialog::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }

.modalHead{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--border);
}
.modalHeadText h2{margin:0; font-size:1.1rem;}
.modalHeadText p{margin:4px 0 0; color:var(--muted); font-size:.92rem;}
.closeBtn{margin-left:auto; border-radius:12px; padding:10px 12px;}

.modalBody{
  padding:14px 16px 16px;
  display:grid;
  gap:12px;
}
.modalCard{
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in oklab, var(--panel2) 92%, transparent);
  padding:14px;
}
.modalRow{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.bigIconWrap{
  width:86px; height:86px;
  border-radius:18px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--panel) 86%, transparent);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
}
.bigIcon{
  width:78px; height:78px;
  object-fit:contain;
  display:block;
}
.modalText{min-width:0;}
.pill{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  background:var(--chip);
  color:var(--muted);
  font-size:.86rem;
}
.hint{color:var(--muted); margin:8px 0 0; font-size:.92rem;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}