/* Material 3 tokens, tonal palette generated from Bangladesh green (#006a4e). */
:root {
  --primary: #006c4c;
  --on-primary: #ffffff;
  --primary-container: #89f8c7;
  --on-primary-container: #002114;
  --secondary-container: #cfe9d9;
  --on-secondary-container: #0a1f15;
  --tertiary-container: #ffdcc1;
  --on-tertiary-container: #2e1500;
  --error: #ba1a1a;
  --surface: #f5fbf5;
  --surface-container-low: #eff5ef;
  --surface-container: #e9efe9;
  --surface-container-high: #e3eae4;
  --on-surface: #171d1a;
  --on-surface-variant: #404943;
  --outline: #707973;
  --outline-variant: #bfc9c1;
  --shadow: rgba(0, 0, 0, .18);
  --ease-emph: cubic-bezier(.05, .7, .1, 1);
  --ease-std: cubic-bezier(.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #6cdbac;
    --on-primary: #003826;
    --primary-container: #005139;
    --on-primary-container: #89f8c7;
    --secondary-container: #344c40;
    --on-secondary-container: #cfe9d9;
    --tertiary-container: #6a3b0c;
    --on-tertiary-container: #ffdcc1;
    --error: #ffb4ab;
    --surface: #0f1512;
    --surface-container-low: #171d1a;
    --surface-container: #1b211e;
    --surface-container-high: #252b28;
    --on-surface: #dee4de;
    --on-surface-variant: #bfc9c1;
    --outline: #89938c;
    --outline-variant: #404943;
    --shadow: rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --primary: #6cdbac; --on-primary: #003826; --primary-container: #005139; --on-primary-container: #89f8c7;
  --secondary-container: #344c40; --on-secondary-container: #cfe9d9; --tertiary-container: #6a3b0c; --on-tertiary-container: #ffdcc1;
  --error: #ffb4ab; --surface: #0f1512; --surface-container-low: #171d1a; --surface-container: #1b211e; --surface-container-high: #252b28;
  --on-surface: #dee4de; --on-surface-variant: #bfc9c1; --outline: #89938c; --outline-variant: #404943; --shadow: rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  text-transform: none; white-space: nowrap; direction: ltr;
  font-size: 24px; display: inline-block; vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 500, "opsz" 24;
}

.banner { padding: 12px 16px; background: var(--error); color: #fff; text-align: center; }

/* Top app bar */
.appbar {
  display: flex; align-items: center; gap: 10px;
  max-width: 760px; margin: 0 auto; padding: 18px 16px 0;
}
.appbar h1 {
  margin: 0; font-size: 1.375rem; font-weight: 650;
  font-variation-settings: "wdth" 112, "opsz" 28;
}
.brand-icon { color: var(--primary); font-size: 28px; }

main { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; }

@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

/* Scanner: round button with a progress ring and radar pulses */
.scanner { display: grid; justify-items: center; text-align: center; padding: 36px 0 12px; }
.dial {
  --size: clamp(176px, 46vw, 220px);
  position: relative; width: var(--size); height: var(--size);
  display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--surface-container-high) 0);
  transition: --p .3s linear;
}
.scan-btn {
  position: relative; z-index: 1; overflow: hidden;
  width: calc(var(--size) - 20px); height: calc(var(--size) - 20px);
  border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  background: var(--primary-container); color: var(--on-primary-container);
  font: inherit; font-size: 1.25rem; font-weight: 600;
  font-variation-settings: "wdth" 110;
  box-shadow: 0 1px 3px var(--shadow), 0 4px 8px 3px rgba(0, 0, 0, .08);
  transition: transform .2s var(--ease-std), box-shadow .2s var(--ease-std), background-color .3s var(--ease-std);
}
.scan-btn .material-symbols-rounded { font-size: 56px; font-variation-settings: "FILL" 1, "wght" 500, "opsz" 48; }
.scan-btn:hover { box-shadow: 0 2px 4px var(--shadow), 0 8px 16px 4px rgba(0, 0, 0, .1); }
.scan-btn:active { transform: scale(.97); }
.scanning .scan-btn { background: var(--primary); color: var(--on-primary); }
#scanLabel { font-size: 1.15rem; }
.scanning #scanLabel { font-size: 1.6rem; font-weight: 700; }

.pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--primary); opacity: 0; pointer-events: none;
}
.scanning .pulse { animation: pulse 2.4s var(--ease-std) infinite; }
.scanning .pulse:nth-child(2) { animation-delay: .8s; }
.scanning .pulse:nth-child(3) { animation-delay: 1.6s; }
@keyframes pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.65); opacity: 0; }
}
/* Idle: one slow breath so the button reads as the thing to press */
.dial:not(.scanning):not(.done) .scan-btn { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.03); } }

.intro { color: var(--on-surface-variant); max-width: 42ch; margin: 28px 0 14px; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.stat {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--outline-variant); color: var(--on-surface-variant); font-size: .9rem;
}
.stat b { color: var(--on-surface); font-weight: 650; }
.stat.ok { background: var(--secondary-container); border-color: transparent; color: var(--on-secondary-container); }
.stat.ok b { color: inherit; }
.stat .material-symbols-rounded { font-size: 18px; font-variation-settings: "FILL" 1; color: var(--primary); }
.bump { animation: bump .35s var(--ease-emph); }
@keyframes bump { 40% { transform: scale(1.15); } }

/* Results */
.results { margin-top: 28px; animation: rise .4s var(--ease-emph); }
.field {
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 16px; border-radius: 28px;
  background: var(--surface-container-high); color: var(--on-surface-variant);
}
.field input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--on-surface);
}
.field:focus-within { outline: 2px solid var(--primary); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .segmented button {
  position: relative; overflow: hidden;
  height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface-variant);
  font: inherit; font-size: .875rem; font-weight: 500;
  transition: background-color .2s var(--ease-std), color .2s var(--ease-std);
}
.chip.on { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
.chip:hover, .segmented button:hover { background-color: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.chip.on:hover { background: color-mix(in srgb, var(--on-secondary-container) 8%, var(--secondary-container)); }
.segmented { display: inline-flex; }
.segmented button { border-radius: 0; }
.segmented button:first-child { border-radius: 16px 0 0 16px; }
.segmented button:last-child { border-radius: 0 16px 16px 0; border-left: 0; }
.segmented button.on { background: var(--secondary-container); color: var(--on-secondary-container); }

.shown { color: var(--on-surface-variant); font-size: .875rem; margin: 18px 4px 8px; }

.list {
  list-style: none; margin: 0; padding: 8px 0;
  background: var(--surface-container-low); border-radius: 24px; overflow: hidden;
}
.list:empty { display: none; }
.item {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 24px; gap: 16px; align-items: center;
  min-height: 72px; padding: 8px 20px 8px 16px;
  color: inherit; text-decoration: none;
  transition: background-color .2s var(--ease-std);
}
.item:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.list li.new .item { animation: rise .45s var(--ease-emph); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-container); color: var(--on-primary-container);
}
.avatar .material-symbols-rounded { font-size: 22px; }
.avatar.live { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.avatar.ftp { background: var(--secondary-container); color: var(--on-secondary-container); }
.text { min-width: 0; }
.name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url { color: var(--on-surface-variant); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms {
  font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; white-space: nowrap;
  background: var(--primary-container); color: var(--on-primary-container);
}
.ms.ok { background: var(--secondary-container); color: var(--on-secondary-container); }
.ms.slow { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.go { color: var(--on-surface-variant); font-size: 20px; }

/* Ripple (state layer feedback on press) */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .16; transform: scale(0);
  animation: ripple .55s var(--ease-std) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

@media (max-width: 560px) {
  .item { grid-template-columns: 40px minmax(0, 1fr) auto; padding-right: 16px; }
  .go { display: none; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .segmented { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}