:root{
    --bg:#141819;
    --panel:#212627;
    --panel-2:#1b1f20;
    --text:#eef4f2;
    --muted:#a4b3ae;
    --line:rgba(255,255,255,.08);
    --accent:#35d38c;
    --accent-2:#62b8ff;
    --shadow: 0 18px 40px rgba(0,0,0,.45);
    --radius:16px;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  *{ box-sizing:border-box; }
  body{
    margin:0;
    padding:20px;
    background:
      radial-gradient(900px 520px at 15% -10%, rgba(53,211,140,.12), transparent 60%),
      radial-gradient(900px 520px at 90% 10%, rgba(98,184,255,.12), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    min-height:100vh;
  }

  .app{ max-width: 1280px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  .app{ position:relative; z-index:2; }
  .app-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .app-title{ font-size:20px; font-weight:700; letter-spacing:.4px; }
  .app-sub{ font-size:12px; color:var(--muted); }
  .active-bot-chip{
    display:inline-flex;
    align-items:center;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
    color:var(--muted);
    font-size:11px;
  }
  .header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
  }
  .bot-toggle{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px;
    border-radius:999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
  }
  .bot-toggle-btn{
    border:1px solid transparent;
    background: transparent;
    color: var(--muted);
    border-radius:999px;
    font-size:11px;
    line-height:1;
    padding:6px 10px;
    cursor:pointer;
  }
  .bot-toggle-btn.is-active{
    color:var(--text);
    border-color: rgba(53,211,140,.35);
    background: rgba(53,211,140,.18);
  }
  .bot-toggle-btn.is-down{
    color:#ff8f8f;
  }
  .bot-toggle-btn:disabled{
    opacity:.6;
    cursor:default;
  }
  @media (max-width: 760px){
    .app-header{
      align-items:flex-start;
    }
    .header-actions{
      width:100%;
      justify-content:flex-end;
    }
    .bot-toggle-btn{
      font-size:10px;
      padding:7px 10px;
    }
    .active-bot-chip{
      margin-left:0;
      margin-top:6px;
    }
  }

  .layout{
    display:grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap:12px;
    align-items:start;
  }
  @media (max-width: 1100px){
    .layout{ grid-template-columns: 1fr; }
  }

  .primary,
  .side{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .card{
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
      var(--panel);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .card.collapsible .card-hd{
    cursor:pointer;
    user-select:none;
  }
  .card.collapsible .card-hd::after{
    content:"▾";
    margin-left:auto;
    color:var(--muted);
    font-size:12px;
  }
  .card.collapsible.is-collapsed .card-hd::after{ content:"▸"; }
  .card.collapsible.is-collapsed .card-bd{ display:none; }
  .card-hd{
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  }
  .card-bd{ padding:16px; }
  .title{ font-size:14px; font-weight:650; letter-spacing:.2px; }
  .sub{ font-size:12px; color:var(--muted); }
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(53,211,140,.12);
    border:1px solid rgba(53,211,140,.25);
    font-size:12px;
    color:var(--text);
  }

  .video-wrap{
    position:relative;
    aspect-ratio: 1.5;
    width:100%;
    max-width:480px;
  }
  .live-badge{
    position:absolute;
    top:10px;
    right:10px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:650;
    letter-spacing:.4px;
    background: rgba(0,0,0,.6);
    border:1px solid var(--line);
    color:#fff;
    text-transform:uppercase;
  }
  .live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff4d4f;
    box-shadow: 0 0 10px rgba(255,77,79,.8);
    animation: live-pulse 1.6s ease infinite;
  }
  @keyframes live-pulse{
    0%{ transform:scale(1); opacity:1; }
    70%{ transform:scale(1.4); opacity:.35; }
    100%{ transform:scale(1); opacity:1; }
  }
  .video{
    width:100%;
    height:100%;
    display:block;
    border-radius: 14px;
    border:1px solid var(--line);
    background:#000;
    image-rendering: crisp-edges;
  }
  .audio-controls{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:10px;
    background: rgba(0,0,0,.45);
    border:1px solid var(--line);
    backdrop-filter: blur(6px);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease;
  }
  .video-wrap:hover .audio-controls{
    opacity:1;
    pointer-events:auto;
  }
  .audio-controls input[type="range"]{
    width:110px;
  }
  .hunt-card{
    margin-top:10px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background: var(--panel-2);
  }
  .hunt-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:220px;
    overflow-y:auto;
    padding-right:4px;
  }
  .hunt-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    border-radius:10px;
    background: rgba(255,255,255,.03);
    border:1px solid var(--line);
  }
  .hunt-item img{
    width:28px;
    height:28px;
    object-fit:contain;
    image-rendering: pixelated;
  }
  .hunt-item .check{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .hunt-progress{
    position:relative;
    width:62px;
    height:22px;
    border-radius:6px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.04);
    overflow:hidden;
    display:grid;
    place-items:center;
  }
  .hunt-progress-fill{
    position:absolute;
    inset:0 auto 0 0;
    width:0;
    background: rgba(53,211,140,.22);
  }
  .hunt-progress.is-checked .hunt-progress-fill{
    background: rgba(53,211,140,.45);
  }
  .hunt-progress-text{
    position:relative;
    z-index:1;
    font-size:11px;
    color:var(--text);
    font-family:var(--mono);
  }
  .daycare-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-top:6px;
  }
  @media (max-width: 1100px){
    .daycare-grid{ grid-template-columns: 1fr; }
  }
  .daycare-mon{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:12px;
    background: var(--panel-2);
    border:1px solid var(--line);
  }
  .daycare-mon img{
    width:32px;
    height:32px;
    object-fit:contain;
    image-rendering: pixelated;
  }
  .daycare-meta{
    margin-left:auto;
    text-align:right;
    font-size:12px;
    color:var(--muted);
  }
  .hunt-item .meta{
    margin-left:auto;
    font-size:12px;
    color:var(--muted);
  }
  .audio-controls button{
    background: rgba(255,255,255,.06);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:10px;
    padding:6px 10px;
    font-size:12px;
    cursor:pointer;
  }
  .audio-controls button:disabled{
    opacity:.6;
    cursor:default;
  }
  .audio-controls audio{
    width:100%;
    height:32px;
  }

  .encounter-grid{
    display:grid;
    grid-template-columns: 340px minmax(0,1fr);
    gap:16px;
    align-items:start;
  }
  @media (max-width: 1100px){
    .encounter-grid{ grid-template-columns: 1fr; }
  }

  .encounter-panel{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .encounter-top{
    display:flex;
    gap:14px;
    align-items:center;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .sprite-wrap{
    position:relative;
    width:96px;
    height:96px;
    border-radius:18px;
    background: rgba(0,0,0,.18);
    border: 1px solid var(--line);
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .sprite-wrap img,
  .sprite-wrap canvas{
    width:88px;
    height:88px;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    image-rendering: pixelated;
  }
  .anti-shiny,
  .anti-shiny img,
  .anti-shiny canvas{
    filter: invert(1);
  }
  .shiny-badge::after{
    content:"✨";
    position:absolute;
    top:-7px;
    right:-7px;
    font-size:14px;
    pointer-events:none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  }
  .encounter-name{ font-size:20px; font-weight:750; letter-spacing:.3px; }
  .encounter-sub{ font-size:12px; color:var(--muted); margin-top:4px; }
  .encounter-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(98,184,255,.12);
    border:1px solid rgba(98,184,255,.25);
    font-size:12px;
    margin-top:6px;
  }

  .kv-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:8px 16px;
  }
  .kv{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:6px 0;
    border-bottom:1px dashed rgba(255,255,255,.06);
    font-size:13px;
  }
  .kv span{ color:var(--muted); }
  .kv strong{ color:var(--text); font-weight:600; font-family: var(--mono); }
  .sv-gold{ color:#f2c94c; }
  .sv-green{ color:#44d47e; }
  .sv-high{ color:#b77dff; }
  .sv-mid{ color:var(--muted); }
  .iv-up{ color:#44d47e; }
  .iv-down{ color:#ff6b6b; }
  .iv-max,
  .iv-total-max{ color:#f2c94c; font-weight:700; }
  .iv-arrow{
    margin-left:4px;
    font-size:11px;
    vertical-align:1px;
  }

  .ivs-table,
  .stats-table{
    width:100%;
    border-collapse: collapse;
    font-size:13px;
    table-layout: fixed;
    border-radius:12px;
    border:1px solid var(--line);
    overflow:hidden;
  }
  .ivs-table th,
  .ivs-table td,
  .stats-table th,
  .stats-table td{
    padding:8px 10px;
    border-bottom:1px solid var(--line);
    text-align:center;
    white-space:nowrap;
  }
  .ivs-table thead th,
  .stats-table thead th{
    background: rgba(255,255,255,.04);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.8px;
  }
  .stats-table thead th{
    white-space:normal;
    line-height:1.1;
    font-size:11px;
    letter-spacing:.5px;
  }
  .stats-table td:first-child,
  .stats-table th:first-child{
    text-align:left;
    padding-left:12px;
  }
  .stats-table td:last-child,
  .stats-table th:last-child{
    padding-right:14px;
  }
  .stats-table tr:last-child td{ border-bottom:none; }
  .total-row td{
    font-weight:650;
    color:var(--accent);
    background: rgba(53,211,140,.08);
  }

  .section-title{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:var(--muted);
    margin-bottom:6px;
  }
  .detail-line{
    font-size:13px;
    color:var(--text);
    font-family: var(--mono);
  }

  .shiny-panel{
    margin-top:16px;
    padding:12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  }
  .shiny-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }
  .shiny-timer{
    font-size:12px;
    color:var(--muted);
    font-family: var(--mono);
  }
  .shiny-meter{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .meter-track{
    position:relative;
    height:12px;
    border-radius:999px;
    background: rgba(255,255,255,.08);
    overflow:hidden;
  }
  .meter-fill{
    position:absolute;
    inset:0 auto 0 0;
    width:0%;
    background: linear-gradient(90deg, rgba(53,211,140,.35), rgba(242,201,76,.65));
    box-shadow: 0 0 14px rgba(242,201,76,.4);
    transition: width .35s ease;
  }
  .meter-glow{
    position:absolute;
    inset:-6px 0;
    background: radial-gradient(120px 20px at 60% 50%, rgba(242,201,76,.25), transparent 70%);
    opacity:.5;
    pointer-events:none;
  }
  .meter-labels{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
  }
  .shiny-meta{
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
  }

  .confetti-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
    overflow:hidden;
  }
  .confetti-piece{
    position:absolute;
    width:8px;
    height:14px;
    opacity:0;
    animation: confetti-fall 1.8s ease-out forwards;
  }
  @keyframes confetti-fall{
    0%{ transform: translate3d(0,-10px,0) rotate(0deg); opacity:0; }
    10%{ opacity:1; }
    100%{ transform: translate3d(var(--x, 0px), 520px, 0) rotate(var(--r, 220deg)); opacity:0; }
  }

  /* PARTY */
  .party{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
  }
  .party .sprite-wrap{
    width:78px;
    height:78px;
    border-radius:14px;
  }
  .party .sprite-wrap img{ width:72px; height:72px; }

  /* LOGS */
  .list{ display:flex; flex-direction:column; gap:8px; }
  .list.scrollable{
    max-height: 440px;
    overflow-y:auto;
    padding-right:4px;
    overscroll-behavior: contain;
  }
  .row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:12px;
    background: var(--panel-2);
    border:1px solid var(--line);
  }
  .row img{
    width:36px;
    height:36px;
    object-fit:contain;
    image-rendering: pixelated;
  }
  .row .name{ font-size:13px; font-weight:650; line-height:1.1; }
  .row .meta{ font-size:12px; color: var(--muted); margin-top:2px; }
  .row .right{
    margin-left:auto;
    font-size:12px;
    color: var(--muted);
    padding:4px 8px;
    border-radius:999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.04);
    white-space: nowrap;
  }

  .storage-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  .storage-btn{
    background: rgba(255,255,255,.06);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:10px;
    padding:6px 10px;
    font-size:12px;
    cursor:pointer;
  }
  .storage-btn:disabled{
    opacity:.4;
    cursor:default;
  }
  .storage-title{ text-align:center; flex:1; }
  .storage-box-name{ font-size:13px; font-weight:600; margin-top:2px; }
  .storage-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:6px;
    border-radius:12px;
    border:1px solid var(--line);
    padding:8px;
    background: rgba(0,0,0,.12);
    min-height: 220px;
    position:relative;
  }
  .storage-cell{
    aspect-ratio: 1 / 1;
    border-radius:10px;
    background: var(--panel-2);
    border:1px solid var(--line);
    display:grid;
    place-items:center;
  }
  .storage-cell img{
    width:32px;
    height:32px;
    object-fit:contain;
    image-rendering: pixelated;
  }
  .storage-empty{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--muted);
    font-size:12px;
    pointer-events:none;
  }

  .map-preview{ display:flex; flex-direction:column; gap:8px; }
  .map-name{ font-size:13px; font-weight:600; }
  .mini-map{
    width:100%;
    height:auto;
    border-radius:12px;
    border:1px solid var(--line);
    background:#0f1213;
    image-rendering: pixelated;
  }

  .conn-toast{
    position:fixed;
    top:14px;
    right:14px;
    z-index:20;
    max-width:320px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,107,107,.4);
    background: rgba(49,18,18,.95);
    box-shadow: 0 10px 26px rgba(0,0,0,.38);
    color:#ffd8d8;
    font-size:12px;
    line-height:1.35;
    opacity:0;
    transform: translateY(-6px);
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .conn-toast.is-visible{
    opacity:1;
    transform: translateY(0);
  }

  em{ color: var(--muted); }

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:12px;
  width:auto;
  height:auto;
  padding:8px 10px;
  border-radius:8px;
  background:#fff;
  color:#111;
  z-index:40;
}
.site-nav{
  max-width:1280px;
  margin:0 auto 12px;
  display:flex;
  gap:8px;
  align-items:center;
}
.site-nav a{
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  padding:7px 12px;
  font-size:12px;
}
.site-nav a[aria-current="page"]{
  border-color:rgba(53,211,140,.35);
  background:rgba(53,211,140,.18);
}
.site-footer{
  max-width:1280px;
  margin:16px auto 0;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
.page-shell{ max-width:1280px; margin:0 auto; }
.page-card{ padding:18px; }
.form-grid{ display:grid; gap:12px; }
.form-grid label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.form-grid input,
.form-grid textarea{
  width:100%; border:1px solid var(--line); border-radius:10px;
  background:var(--panel-2); color:var(--text); padding:10px; font:inherit;
}
.form-grid button{
  width:max-content; border:1px solid rgba(53,211,140,.35);
  background:rgba(53,211,140,.2); color:var(--text); border-radius:10px;
  padding:8px 12px; cursor:pointer;
}
.api-status{ margin-top:8px; font-size:12px; color:var(--muted); }
.api-status.is-error{ color:#ffb1b1; }
.api-status.is-ok{ color:#8ee8be; }
.pokedex-completed-list{
  max-height:220px;
}
.pokedex-line-species{
  font-size:12px;
  color:var(--muted);
}
.pokedex-line-pill{
  margin-left:auto;
  font-size:11px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 8px;
  background:rgba(255,255,255,.04);
}
.debug-panel{
  max-width:1280px;
  margin:14px auto 0;
  border:1px solid rgba(98,184,255,.35);
  border-radius:12px;
  background:rgba(14,24,30,.72);
  box-shadow:0 8px 18px rgba(0,0,0,.3);
  padding:12px;
}
.debug-title{
  margin:0 0 8px;
  font-size:13px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#bcdcff;
}
.debug-summary{
  font-size:12px;
  color:#dce8ee;
  line-height:1.5;
  margin-bottom:8px;
}
.debug-log{
  border-top:1px solid var(--line);
  padding-top:8px;
  max-height:180px;
  overflow:auto;
  font-family:var(--mono);
  font-size:11px;
  display:grid;
  gap:6px;
}
.debug-log-row{ color:#b4c2c9; }
.debug-log-row.is-ok{ color:#8ee8be; }
.debug-log-row.is-warn{ color:#f2d48b; }
.debug-log-row.is-error{ color:#ffb8b8; }