/* Design tokens, base, and shell chrome shared by every php/tickets/ page;
   page anatomy lives in each page's <style>, wrapped in @layer pages. */

@layer tokens, base, shell, components, pages;

@layer tokens {
  :root {
    /* ink — the navy-tinted neutral */
    --lch-ink-darkest: 0.24 0.03 265;
    --lch-ink-dark: 0.40 0.03 265;
    --lch-ink-mid: 0.57 0.02 265;
    --lch-ink-light: 0.86 0.015 260;
    --lch-ink-lightest: 0.97 0.008 260;
    /* blue — the brand accent */
    --lch-blue-darkest: 0.30 0.06 265;
    --lch-blue-dark: 0.40 0.13 262;
    --lch-blue-mid: 0.55 0.19 262;
    --lch-blue-light: 0.78 0.13 255;
    --lch-blue-lightest: 0.94 0.05 250;
    /* red */
    --lch-red-darkest: 0.30 0.10 25;
    --lch-red-dark: 0.45 0.18 26;
    --lch-red-mid: 0.56 0.21 25;
    --lch-red-light: 0.76 0.13 25;
    --lch-red-lightest: 0.94 0.05 25;
    /* amber */
    --lch-amber-darkest: 0.35 0.10 65;
    --lch-amber-dark: 0.52 0.14 62;
    --lch-amber-mid: 0.70 0.15 62;
    --lch-amber-light: 0.85 0.13 72;
    --lch-amber-lightest: 0.96 0.06 75;
    /* green */
    --lch-green-darkest: 0.32 0.08 155;
    --lch-green-dark: 0.48 0.12 155;
    --lch-green-mid: 0.62 0.14 155;
    --lch-green-light: 0.80 0.12 155;
    --lch-green-lightest: 0.95 0.06 152;
    /* orange (IPTV) */
    --lch-orange-darkest: 0.35 0.11 50;
    --lch-orange-dark: 0.52 0.16 48;
    --lch-orange-mid: 0.70 0.17 48;
    --lch-orange-light: 0.84 0.14 60;
    --lch-orange-lightest: 0.96 0.07 65;
    /* violet (VIP) */
    --lch-violet-darkest: 0.30 0.11 295;
    --lch-violet-dark: 0.45 0.20 295;
    --lch-violet-mid: 0.58 0.22 295;
    --lch-violet-light: 0.78 0.14 295;
    --lch-violet-lightest: 0.95 0.05 295;
  }

  /* Dark ramp — inverted, never mirrored; the twin copies MUST stay in
     sync. */
  html[data-theme="dark"] {
    --lch-ink-darkest: 0.95 0.006 262;
    --lch-ink-dark: 0.82 0.008 262;
    --lch-ink-mid: 0.62 0.01 262;
    --lch-ink-light: 0.38 0.015 262;
    --lch-ink-lightest: 0.22 0.02 265;
    --lch-blue-darkest: 0.93 0.05 250;
    --lch-blue-dark: 0.82 0.12 255;
    --lch-blue-mid: 0.70 0.14 258;
    --lch-blue-light: 0.52 0.16 258;
    --lch-blue-lightest: 0.32 0.10 262;
    --lch-red-darkest: 0.92 0.05 25;
    --lch-red-dark: 0.78 0.12 25;
    --lch-red-mid: 0.66 0.17 25;
    --lch-red-light: 0.48 0.16 25;
    --lch-red-lightest: 0.30 0.10 25;
    --lch-amber-darkest: 0.95 0.06 75;
    --lch-amber-dark: 0.85 0.12 72;
    --lch-amber-mid: 0.74 0.14 62;
    --lch-amber-light: 0.52 0.13 62;
    --lch-amber-lightest: 0.35 0.10 65;
    --lch-green-darkest: 0.94 0.05 152;
    --lch-green-dark: 0.82 0.11 155;
    --lch-green-mid: 0.70 0.13 155;
    --lch-green-light: 0.50 0.12 155;
    --lch-green-lightest: 0.32 0.08 155;
    --lch-orange-darkest: 0.95 0.07 65;
    --lch-orange-dark: 0.84 0.13 60;
    --lch-orange-mid: 0.72 0.15 48;
    --lch-orange-light: 0.52 0.15 48;
    --lch-orange-lightest: 0.35 0.11 50;
    --lch-violet-darkest: 0.94 0.05 295;
    --lch-violet-dark: 0.80 0.13 295;
    --lch-violet-mid: 0.68 0.19 295;
    --lch-violet-light: 0.48 0.18 295;
    --lch-violet-lightest: 0.30 0.11 295;
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
      --lch-ink-darkest: 0.95 0.006 262;
      --lch-ink-dark: 0.82 0.008 262;
      --lch-ink-mid: 0.62 0.01 262;
      --lch-ink-light: 0.38 0.015 262;
      --lch-ink-lightest: 0.22 0.02 265;
      --lch-blue-darkest: 0.93 0.05 250;
      --lch-blue-dark: 0.82 0.12 255;
      --lch-blue-mid: 0.70 0.14 258;
      --lch-blue-light: 0.52 0.16 258;
      --lch-blue-lightest: 0.32 0.10 262;
      --lch-red-darkest: 0.92 0.05 25;
      --lch-red-dark: 0.78 0.12 25;
      --lch-red-mid: 0.66 0.17 25;
      --lch-red-light: 0.48 0.16 25;
      --lch-red-lightest: 0.30 0.10 25;
      --lch-amber-darkest: 0.95 0.06 75;
      --lch-amber-dark: 0.85 0.12 72;
      --lch-amber-mid: 0.74 0.14 62;
      --lch-amber-light: 0.52 0.13 62;
      --lch-amber-lightest: 0.35 0.10 65;
      --lch-green-darkest: 0.94 0.05 152;
      --lch-green-dark: 0.82 0.11 155;
      --lch-green-mid: 0.70 0.13 155;
      --lch-green-light: 0.50 0.12 155;
      --lch-green-lightest: 0.32 0.08 155;
      --lch-orange-darkest: 0.95 0.07 65;
      --lch-orange-dark: 0.84 0.13 60;
      --lch-orange-mid: 0.72 0.15 48;
      --lch-orange-light: 0.52 0.15 48;
      --lch-orange-lightest: 0.35 0.11 50;
      --lch-violet-darkest: 0.94 0.05 295;
      --lch-violet-dark: 0.80 0.13 295;
      --lch-violet-mid: 0.68 0.19 295;
      --lch-violet-light: 0.48 0.18 295;
      --lch-violet-lightest: 0.30 0.11 295;
    }
  }

  :root {
    color-scheme: light;

    --ink: oklch(var(--lch-ink-darkest));
    --muted: oklch(var(--lch-ink-darkest) / 0.72);
    --faint: oklch(var(--lch-ink-darkest) / 0.65);
    --card: oklch(var(--lch-ink-lightest));
    --paper: color-mix(in oklch, var(--card) 96%, var(--ink) 4%);
    --line: oklch(var(--lch-ink-darkest) / 0.14);
    --line-2: oklch(var(--lch-ink-darkest) / 0.40);
    --chip: oklch(var(--lch-ink-light) / 0.40);
    --gray: oklch(var(--lch-ink-dark));
    --navy: oklch(var(--lch-blue-darkest));
    --blue: oklch(var(--lch-blue-dark));
    --blue-soft: color-mix(in oklch, var(--blue) 12%, var(--card));
    --amber: oklch(var(--lch-amber-darkest));
    --amber-soft: color-mix(in oklch, var(--amber) 12%, var(--card));
    --green: oklch(var(--lch-green-dark));
    --green-soft: color-mix(in oklch, var(--green) 15%, var(--card));
    --red: oklch(var(--lch-red-dark));
    --red-soft: color-mix(in oklch, var(--red) 12%, var(--card));
    --iptv: oklch(var(--lch-orange-dark));
    --iptv-soft: color-mix(in oklch, var(--iptv) 12%, var(--card));
    --violet: oklch(var(--lch-violet-dark));
    --violet-soft: color-mix(in oklch, var(--violet) 12%, var(--card));
    --shadow: 0 12px 34px oklch(0.1 0.02 260 / 0.12);
    --scrim: oklch(0.1 0.02 260 / 0.42);

    /* Legacy derived alias for the action sheet's panel shadow. */
    --sheet-shadow: color-mix(in oklch, var(--scrim) 57%, transparent);
  }

  html[data-theme="dark"] {
    color-scheme: dark;

    /* the dark special case: the card border goes heavy; the ramp flips
       blue-mid to a light blue, which keeps AA contrast both ways */
    --card-border: var(--line-2);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
      color-scheme: dark;
      --card-border: var(--line-2);
    }
  }

  :root {
    --topbar-bg: color-mix(in oklch, var(--paper) 88%, transparent);
    /* The shell gutter and the wider list column. The list topbar and
       cards break out of the 720px shell to --wide-col; the user popover
       re-anchors to the avatar's right edge using both. */
    --gutter: clamp(12px, 3vw, 20px);
    --wide-col: min(1120px, calc(100vw - 40px));
    --card-border: var(--line);
    --pill-bg: var(--blue-soft);
    --pill-txt: var(--blue);
    --input-bg: var(--chip);
    --chip-bg: var(--chip);
    --chip-on-bg: oklch(var(--lch-ink-light));
    --chip-on-txt: var(--ink);
    --btn-primary-bg: oklch(var(--lch-blue-mid));
    --btn-primary-bg-hover: oklch(var(--lch-blue-dark));
    --btn-primary-txt: oklch(var(--lch-ink-lightest));
    --btn-secondary-bg: color-mix(in oklch, var(--ink) 8%, var(--card));
    --btn-secondary-txt: var(--ink);
    --btn-ghost-txt: var(--muted);
    --avatar-bg: var(--blue-soft);
    --avatar-txt: var(--blue);
    --stamp: var(--red);
    --banner-w-bg: var(--amber-soft);
    --banner-w-txt: var(--amber);
    --banner-w-border: var(--amber);
    --banner-e-bg: var(--red-soft);
    --banner-e-txt: var(--red);
    --banner-e-border: var(--red);
    --font-ui: -apple-system, BlinkMacSystemFont, Aptos, "Segoe UI",
      Roboto, Helvetica, Arial, sans-serif;
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-ui);
  }

  html,
  body {
    background: var(--paper);
    color: var(--ink);
    /* 15.5px at a 16px default root — keeps the design, honors the
       user's font-size setting */
    font-size: 96.875%;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: inherit;
    cursor: pointer;
  }

  button {
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  select {
    background: var(--card);
  }

  :focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* The glyphs' fallback fonts have no real bold face — the weights these
     buttons carry would smear them. font-synthesis-weight: none keeps the
     glyphs crisp. */
  .menuicon,
  .addicon,
  .search__ico,
  .search__clear,
  .mnav__btn,
  .gbtn,
  .s-ico,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .qprimary,
  .qbtn {
    font-synthesis-weight: none;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
    }
  }
}

@layer shell {
  .shell {
    container-type: inline-size;
    max-inline-size: 720px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block-end: calc(84px + env(safe-area-inset-bottom));
  }

  @container (min-width: 640px) {
    .shell {
      padding-block-end: 48px;
    }
  }

  .page {
    min-height: 60vh;
  }

  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 10px var(--gutter);
    background: var(--topbar-bg);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--line);

    @media (min-width: 640px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
    }
  }

  .topbar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .topbar__right {
    display: flex;
    align-items: center;
    gap: 6px;

    @media (min-width: 640px) {
      justify-content: flex-end;
    }
  }

  .menuicon {
    display: none; /* mobile: the menu button lives in the bottom mnav */
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 6px 18px oklch(0.1 0.02 260 / 0.08);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;

    &:hover {
      border-color: var(--line-2);
      background: var(--chip-bg);
    }

    @media (min-width: 640px) {
      display: grid;
    }
  }

  .addicon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-txt);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;

    &:hover {
      background: var(--btn-primary-bg-hover);
    }
  }

  .search {
    flex: 1;
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;

    input[type="search"] {
      width: 100%;
      min-height: 44px;
      padding: 4px 34px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: var(--input-bg);

      &:focus-visible {
        background: var(--card);
        border-color: var(--line-2);
      }
    }
  }

  .search__ico {
    position: absolute;
    inset-inline-start: 10px;
    pointer-events: none;
    color: var(--faint);
    font-size: 1.05rem;
  }

  .search__clear {
    position: absolute;
    inset-inline-end: 6px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    text-decoration: none;
    color: var(--muted);
    background: transparent;

    &:hover {
      background: var(--btn-secondary-bg);
    }
  }

  .tuser {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;

    &:hover {
      background: var(--chip-bg);
    }
  }

  .avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--avatar-bg);
    color: var(--avatar-txt);
    font-weight: 700;
  }

  .appmenu {
    margin: 0;
    padding: 0;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--ink);
    inset: 62px auto auto 50%;
    translate: -50% 0;
    min-width: 320px;
    max-width: 400px;
    /* the overhanging close chip must not clip: the scroll container
       moves to .appmenu__wrap */
    max-height: none;
    overflow: visible;

    &:popover-open {
      /* display must live on the open state only — an author display on
         the base rule beats the UA [popover]:not(:popover-open) rule and
         the closed menu would stay visible */
      display: flex;
      flex-direction: column;
    }

    @media (max-width: 639px) {
      inset: auto 0 0 0;
      translate: none;
      min-width: 0;
      max-width: none;
      width: 100%;
      border-radius: 18px 18px 0 0;
      border-block-end: 0;
      padding-block-end: env(safe-area-inset-bottom);
    }
  }

  .appmenu__wrap {
    padding: 14px;
    overflow-y: auto;
    max-height: min(70vh, 640px);

    @media (max-width: 639px) {
      max-height: 78dvh;
    }
  }

  .appmenu__head {
    margin-block: 14px 6px;
    margin-inline: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);

    &:first-child {
      margin-block-start: 0;
    }
  }

  .appmenu__sub {
    margin-block: 12px 4px;
    margin-inline: 6px;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--muted);
  }

  .appmenu__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .appmenu__item {
    display: block;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 11px;
    background: var(--card);
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 650;

    &:hover {
      border-color: var(--line-2);
      background: var(--paper);
    }

    &.active {
      background: var(--pill-bg);
      color: var(--pill-txt);
      border-color: transparent;
    }
  }

  .appmenu__locgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .appmenu__loc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 13px 10px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;

    small {
      font-weight: 550;
      font-size: 0.72rem;
      color: var(--faint);
    }

    &:hover {
      border-color: var(--line-2);
      background: var(--paper);
    }

    &.active {
      background: var(--pill-bg);
      color: var(--pill-txt);
      border-color: transparent;

      small {
        color: var(--pill-txt);
        opacity: 0.75;
      }
    }
  }

  .appmenu__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-start: 12px;
  }

  .appmenu__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    > span {
      font-size: 0.9rem;
      font-weight: 650;
      color: var(--muted);
      white-space: nowrap;
    }

    select {
      flex: 1;
      max-width: 72%;
      padding: 9px 10px;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      background: var(--card);
      color: var(--ink);
      font-size: 0.9rem;
    }
  }

  .appmenu__foot {
    margin-block-start: 12px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--line);
    text-align: center;
  }

  .appmenu__reset {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 650;
    color: var(--btn-ghost-txt);

    &:hover {
      background: var(--chip-bg);
      color: var(--ink);
    }
  }

  .upop {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--ink);
    /* top-right aligned with the avatar. List pages widen the topbar from
       the 720px shell to --wide-col, so the avatar's right edge sits
       50vw - --wide-col/2 + --gutter from the viewport's right edge; at
       the container's narrow end it is just the gutter. */
    inset: 62px var(--gutter) auto auto;
    width: min(340px, calc(100dvw - 24px));
    /* the overhanging close chip must not clip (the UA popover rule) */
    overflow: visible;

    @container (min-width: 640px) {
      inset-inline-end: calc(50vw - var(--wide-col) / 2 + var(--gutter));
    }
  }

  /* fixed, never relative: a top-layer relative computes to absolute and
     re-anchors the popover to the scrollable .shell container — the
     narrow bottom sheet then opens at the document bottom, off-screen. */
  .appmenu,
  .upop {
    position: fixed;
  }

  .mclose {
    border: 0;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;

    &:hover {
      background: var(--chip-bg);
      color: var(--ink);
    }

    &:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 1px;
    }
  }

  .mclose-ouch {
    position: absolute;
    inset-block-start: -9px;
    inset-inline-end: -9px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line-2);
    box-shadow: 0 4px 12px oklch(0.1 0.02 260 / 0.18);
  }

  .uhead {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
    margin-block-end: 8px;
  }

  .usum {
    margin-block: 0 10px;
    font-size: 0.88rem;
    color: var(--muted);
  }

  .usave-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .urow {
    display: block;
    width: 100%;
    min-height: 44px;
    text-align: start;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-decoration: none;
    font-size: 0.92rem;

    &:hover {
      background: var(--chip-bg);
    }

    &.udanger {
      color: var(--red);
    }
  }

  .usaved {
    display: none;
    color: var(--green);
    font-weight: 650;
    font-size: 0.85rem;

    &.show {
      display: inline;
    }
  }

  .usep {
    height: 1px;
    background: var(--line);
    margin-block: 10px;
  }

  .ufoot {
    margin: 0;
    padding: 2px 10px 0;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--muted);
  }

  .themerow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--chip-bg);
  }

  .themebtn {
    min-height: 44px;
    padding: 7px 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.88rem;

    &.active {
      background: var(--card);
      color: var(--ink);
      box-shadow: 0 1px 3px oklch(0.1 0.02 260 / 0.12);
    }
  }

  .mnav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    padding-block: 10px calc(12px + env(safe-area-inset-bottom));
    padding-inline: 16px;
    background: linear-gradient(to top, var(--paper) 60%, transparent);
    pointer-events: none;

    @container (min-width: 640px) {
      display: none;
    }
  }

  .mnav__btn {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
  }

  .toast-stack {
    position: fixed;
    inset-inline-end: max(16px, calc(50vw - 360px + 20px));
    inset-block-end: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;

    @media (max-width: 639px) {
      inset-inline: 14px;
      inset-block-end: calc(84px + env(safe-area-inset-bottom));
      align-items: stretch;
    }
  }

  .toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(340px, 100dvw - 32px);
    padding-block: 8px;
    padding-inline: 12px 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in oklch, var(--card) 88%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-size: 0.88rem;
    overflow: hidden;
    pointer-events: auto;

    &::before {
      content: '';
      position: absolute;
      inset-inline-start: 0;
      inset-block: 0;
      width: 3px;
      background: var(--amber);
    }

    &.is-success::before {
      background: var(--green);
    }

    &.is-error::before {
      background: var(--red);
    }

    &.is-success .toast__glyph {
      color: var(--green);
    }

    &.is-error .toast__glyph {
      color: var(--red);
    }

    &.is-entering {
      animation: toast-in 200ms ease;
    }

    &.is-leaving {
      animation: toast-out 170ms ease forwards;
    }

    @media (max-width: 639px) {
      max-width: none;
    }
  }

  .toast__glyph {
    flex: none;
    width: 15px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: var(--amber);
  }

  .toast__text {
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .toast__context {
    opacity: .75;
  }

  .toast__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;

    &:hover {
      background: color-mix(in oklch, currentColor 10%, transparent);
      color: var(--ink);
    }
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.97);
    }
  }

  @keyframes toast-out {
    to {
      opacity: 0;
      transform: translateY(-6px) scale(0.97);
    }
  }

  .sheet {
    margin: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    padding: 0;
    padding-block-end: env(safe-area-inset-bottom);
    border: 0;
    border-radius: 18px 18px 0 0;
    background: var(--card);
    color: var(--ink);
    overflow: auto;

    &::backdrop {
      background: var(--scrim);
    }

    .grab {
      width: 40px;
      height: 4px;
      border-radius: 999px;
      background: var(--chip);
      margin: 10px auto 4px;
    }

    @media (min-width: 640px) {
      width: 480px;
      max-width: calc(100dvw - 40px);
      margin: auto;
      border-radius: 18px;
      padding-block-end: 0;

      .grab {
        display: none;
      }
    }
  }

  .sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 10px 4px;
    padding-inline: 18px;
  }

  .sheet__title {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
  }

  .sheet__close {
    min-width: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-size: 1.2rem;
    color: var(--muted);

    &:hover {
      background: var(--chip-bg);
      color: var(--ink);
    }
  }

  .cform {
    padding-block: 0 22px;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cfield {
    display: flex;
    flex-direction: column;
    gap: 4px;

    textarea,
    select {
      width: 100%;
      padding: 9px 2px;
      border: 0;
      border-block-end: 1px solid var(--line-2);
      border-radius: 0;
      background: transparent;
      resize: vertical;

      &:focus-visible {
        border-block-end: 2px solid var(--blue);
      }
    }
  }

  .cfield__label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
  }

  .cflag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;

    b { font-size: 0.95rem; font-weight: 600; }

    input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

    &:has(input:checked) .csw {
      background: var(--navy);
      border-color: var(--navy);

      &::after { translate: 20px; }
    }

    &.iptv:has(input:checked) .csw { background: var(--iptv); border-color: var(--iptv); }
  }

  .csw {
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid var(--line-2);
    position: relative;
    flex: none;
    transition: .15s;

    &::after {
      content: '';
      position: absolute;
      inset-block-start: 2px;
      inset-inline-start: 2px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--card);
      box-shadow: 0 1px 2px oklch(0.1 0.02 260 / 0.25);
      transition: .15s;
    }
  }

  .c-reco {
    margin: 0;
    color: var(--muted);
    font-size: 0.87rem;
  }

  .csubmit {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-txt);
    font-weight: 750;
    font-size: 1rem;

    &:hover {
      background: var(--btn-primary-bg-hover);
    }
  }
}

@layer components {
  /* top-most layer: the UA [hidden] rule lives in the UA origin, and any
     layered author display would override it */
  [hidden] {
    display: none;
  }

  .error {
    background: var(--banner-e-bg);
    color: var(--banner-e-txt);
    border: 1px solid var(--banner-e-border);
    padding: 1rem;
    margin: 1rem;
  }

  /* one shared field-focus recipe: soft ring + brand border */
  :is(input, select, textarea):focus-visible {
    outline: 2px solid color-mix(in oklch, var(--blue) 25%, transparent);
    outline-offset: 0;
    border-color: var(--blue);
  }
}

/* Unlayered on purpose: Turbo injects its default .turbo-progress-bar
   stylesheet first in <head>, and unlayered author rules beat layered
   ones — inside any @layer this could never override it. */
.turbo-progress-bar {
  position: fixed;
  display: block;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 3px;
  background: var(--blue);
  z-index: 2147483647;
  transition:
    width 300ms ease-out,
    opacity 150ms 150ms ease-in;
  transform: translate3d(0, 0, 0);
}