tr.i:nth-of-type(odd){background-color:#e0ffe0;}
tr.i:nth-of-type(even){background-color:#efffef;}

input.btn-bw,
input[type="submit"].btn-bw {
  background-color: #000000;
  color: #ffffff;
}

.catbtn {
  display: inline-block;
  margin: 4px 6px;
  padding: 6px 10px;
  border: 1px solid #bcd;
  border-radius: 8px;
  text-decoration: none;
  background: #eaf4ff;
  color: #123;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background-color 0.2s, transform 0.05s;
}
.catbtn:hover {
  background: #dceeff;
}
.catbtn:active {
  transform: translateY(1px);
}
:root{
      /* Logo-ish palette */
      --sky: #cfeeff;          /* light blue background */
      --sky2:#bfe6ff;
      --red: #d10f0f;          /* main red */
      --red2:#ff2a2a;          /* highlight red */
      --deep:#680000;          /* deep shadow red */
      --ink: #1a1f26;

      --radius: 14px;
      --pad-y: 11px;
      --pad-x: 18px;
      --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

      --shadow: 0 10px 18px rgba(0,0,0,.18);
      --shadow2: 0 2px 0 rgba(0,0,0,.20);
    }


    /* -------------------------
       GLASS 3D BUTTON BASE
       ------------------------- */
    .gbtn{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      padding: var(--pad-y) var(--pad-x);
      min-height: 42px;

      border-radius: var(--radius);
      border: 1px solid rgba(0,0,0,.22);
      text-decoration: none;
      user-select: none;
      cursor: pointer;

      font: 800 14px/1 var(--font);
      letter-spacing: .35px;

      transform: translateZ(0);
      transition:
        transform .08s ease,
        filter .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
      box-shadow: var(--shadow), var(--shadow2);
    }

    /* glass cover highlight layer */
    .gbtn::before{
      content:"";
      position:absolute;
      inset: 1px;
      border-radius: calc(var(--radius) - 2px);
      background:
        linear-gradient(180deg,
          rgba(255,255,255,.62) 0%,
          rgba(255,255,255,.24) 35%,
          rgba(255,255,255,.06) 60%,
          rgba(255,255,255,0) 100%);
      pointer-events:none;
      opacity:.95;
    }

    /* subtle specular streak that moves on hover */
    .gbtn::after{
      content:"";
      position:absolute;
      top:-40%;
      left:-30%;
      width: 60%;
      height: 180%;
      border-radius: 40px;
      background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.28) 45%,
        rgba(255,255,255,0) 90%);
      transform: rotate(18deg);
      opacity: .0;
      pointer-events:none;
      transition: opacity .18s ease, left .28s ease;
    }

    /* hover: lift + brighter + shine */
    .gbtn:hover{
      transform: translateY(-1px);
      filter: brightness(1.03) saturate(1.05);
      box-shadow: 0 14px 24px rgba(0,0,0,.20), 0 2px 0 rgba(0,0,0,.18);
    }
    .gbtn:hover::after{
      opacity: 1;
      left: 75%;
    }

    /* active: press down */
    .gbtn:active{
      transform: translateY(1px);
      box-shadow: 0 7px 12px rgba(0,0,0,.18), 0 1px 0 rgba(0,0,0,.20);
      filter: brightness(.98);
    }

    /* Focus ring */
    .gbtn:focus{
      outline: 3px solid rgba(255, 0, 0, .18);
      outline-offset: 3px;
    }

    /* --------------------------------
       VARIANTS (logo-inspired)
       -------------------------------- */

    /* Primary red (matches logo vibe) */
    .red{
      color: #ffffff;
      background:
        linear-gradient(180deg, var(--red2) 0%, var(--red) 55%, #a00000 100%);
      border-color: rgba(60,0,0,.55);
      text-shadow: 0 1px 0 rgba(0,0,0,.25);
    }

    /* Deep red (more dramatic) */
    .deepred{
      color:#ffffff;
      background:
        linear-gradient(180deg, #ff3a3a 0%, #c30000 50%, #7c0000 100%);
      border-color: rgba(40,0,0,.7);
    }

    /* Icy panel (like the logo background) */
    .ice{
      color: #102132;
      background:
        linear-gradient(180deg, #e9fbff 0%, var(--sky2) 60%, #9fd6ff 100%);
      border-color: rgba(16, 33, 50, .28);
    }

    /* Mint panel (like the logo background) */
    .mint{
      color: #102132;
      background:
        linear-gradient(180deg, #e9fffb 0%, var(--sky2) 60%, #9fffd6 100%);
      border-color: rgba(16, 33, 50, .28);
    }

    /* Mint-Red panel (like the logo background) */
    .mintr{
      color: #ee0000;
      background:
        linear-gradient(180deg, #e9fffb 0%, var(--sky2) 60%, #9fffd6 100%);
      border-color: rgba(16, 33, 50, .28);
    }



    /* Inverted: light bg, red text (logo reversal style) */
    .invert{
      color: var(--red);
      background:
        linear-gradient(180deg, #ffffff 0%, #f1fbff 60%, var(--sky2) 100%);
      border-color: rgba(130, 0, 0, .32);
      text-shadow: 0 1px 0 rgba(255,255,255,.55);
    }

    /* Outline: transparent, red border/text */
    .outline{
      background: transparent;
      color: var(--red);
      border-color: rgba(209, 15, 15, .75);
      box-shadow: 0 10px 18px rgba(0,0,0,.10), 0 2px 0 rgba(0,0,0,.12);
    }
    .outline::before{
      background: linear-gradient(180deg,
        rgba(255,255,255,.48) 0%,
        rgba(255,255,255,.18) 45%,
        rgba(255,255,255,0) 100%);
      opacity:.85;
    }

    /* Borders: a few options */
    .border-soft{ border-width: 1px; }
    .border-bold{ border-width: 2px; }
    .border-dash{ border-style: dashed; }

    /* Sizes */
    .sm{ padding: 9px 14px; min-height: 24px; font-size: 13px; border-radius: 12px; }
    .lg{ padding: 13px 22px; min-height: 48px; font-size: 15px; border-radius: 16px; }

    /* little square "icon" */
    .chip{
      width: 18px; height: 18px;
      border-radius: 5px;
      background: rgba(255,255,255,.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12);
    }
    .invert .chip, .ice .chip{ background: rgba(255,255,255,.55); }
    .outline .chip{ background: rgba(209,15,15,.15); }

  
/* ---------- Pastel variants (6-digit hex) ---------- */
.gbtn.two-line{
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 54px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.gbtn .sub{
  font-weight: 700;
  font-size: 12px;
  line-height: 1.05;
  letter-spacing: .20px;
  opacity: .92;
}

/* Pastel backgrounds + contrasting text */
.pastel-mint{
  background: linear-gradient(180deg, #e9fff6 0%, #c9f5e3 60%, #a7e9d1 100%);
  color: #0f3d2f;
  border-color: rgba(15, 61, 47, 0.28);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.60);
}
.pastel-mint .sub{ color:#2b6a57; }

.pastel-sky{
  background: linear-gradient(180deg, #eff9ff 0%, #cfeeff 60%, #b6e2ff 100%);
  color: #102132;
  border-color: rgba(16, 33, 50, 0.24);
}
.pastel-sky .sub{ color:#35546f; }

.pastel-lav{
  background: linear-gradient(180deg, #f6f0ff 0%, #dfd0ff 60%, #c7b1ff 100%);
  color: #2b1a4a;
  border-color: rgba(43, 26, 74, 0.26);
}
.pastel-lav .sub{ color:#5b3b93; }

.pastel-peach{
  background: linear-gradient(180deg, #fff2ea 0%, #ffd8c4 60%, #ffc0a3 100%);
  color: #4a2215;
  border-color: rgba(74, 34, 21, 0.26);
}
.pastel-peach .sub{ color:#8a4a33; }

.pastel-lemon{
  background: linear-gradient(180deg, #fffbe6 0%, #fff1a6 60%, #ffe176 100%);
  color: #2a2400;
  border-color: rgba(42, 36, 0, 0.22);
}
.pastel-lemon .sub{ color:#6a5a00; }

.pastel-rose{
  background: linear-gradient(180deg, #fff0f5 0%, #ffd0df 60%, #ffb4cc 100%);
  color: #4a1024;
  border-color: rgba(74, 16, 36, 0.26);
}
.pastel-rose .sub{ color:#8a2a4f; }

.pastel-sand{
  background: linear-gradient(180deg, #fff8ee 0%, #f0dcc0 60%, #e0c39b 100%);
  color: #3a2a16;
  border-color: rgba(58, 42, 22, 0.24);
}
.pastel-sand .sub{ color:#6f5533; }

.pastel-slate{
  background: linear-gradient(180deg, #f2f6fb 0%, #d4deea 60%, #b9c6d6 100%);
  color: #1a2430;
  border-color: rgba(26, 36, 48, 0.26);
}
.pastel-slate .sub{ color:#4a5a6a; }

/* Pastel with "logo red" text */
.pastel-redtext{
  background: linear-gradient(180deg, #ffffff 0%, #eff9ff 60%, #cfeeff 100%);
  color: #d10f0f;
  border-color: rgba(209, 15, 15, 0.32);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.70);
}
.pastel-redtext .sub{ color:#680000; }

/* Inverted: pastel surface, dark text but red subline */
.pastel-invert{
  background: linear-gradient(180deg, #eff9ff 0%, #cfeeff 60%, #b6e2ff 100%);
  color: #102132;
  border-color: rgba(16, 33, 50, 0.24);
}
.pastel-invert .sub{ color:#d10f0f; }

.sub_red { color:#dd0000; }

  
/* ============================
   DEMO TABLES (Version 5)
   ============================ */
table.demo{
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  overflow: hidden;
}
table.demo th, table.demo td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: middle;
  text-align: left;
  font-size: 14px;
}
table.demo th{
  background: rgba(0,0,0,0.04);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  color: #39424c;
}
table.demo tr:last-child td{ border-bottom: none; }
.codepill{
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  color: #1a2430;
  white-space: nowrap;
}
.demo-note{
  font-size: 13px;
  color: #4b5663;
  margin: 10px 0 16px 0;
  line-height: 1.4;
}
.btncell{ width: 280px; }


/* Make class strings easy to select/copy */
.codepill{
  user-select: all;
  cursor: text;
}

/* ============================
   ALIGNMENT MODIFIERS
   ============================
   Add ONE of these to your button when you want text alignment changes.
   Works with normal and two-line buttons.
   Examples:
     class="gbtn pastel-sky border-bold center"
     class="gbtn red border-bold two-line center"
*/
.gbtn.center{
  justify-content: center;
  text-align: center;
}
.gbtn.center.two-line{
  align-items: center;
}
.gbtn.center.two-line .sub{
  width: 100%;
  text-align: center;
}

.gbtn.left{
  justify-content: flex-start;
  text-align: left;
}
.gbtn.left.two-line{
  align-items: flex-start;
}

.gbtn.right{
  justify-content: flex-end;
  text-align: right;
}
.gbtn.right.two-line{
  align-items: flex-end;
}
.gbtn.right.two-line .sub{
  width: 100%;
  text-align: right;
}

/* ============================
   SUBSCRIBER HERO / TOOL NAV STANDARD
   ============================
   Use this for the common subscriber-page hero button row.

   Recommended row class:
     class="subscriberHeroNav"

   Backward-compatible selectors are included for current pages that still use:
     .subDashHeroTools .dashBtnRow
     .saHeroTools .saBtnRow

   Purpose:
   - Same page content width.
   - Same hero nav button height.
   - Same single-row behavior where screen width allows.
   - Current page may add border-dash without changing button size.
*/

.subscriberPageWrap,
.subDashWrap,
.saWrap{
  max-width: 1180px;
}

.subscriberHeroNav,
.subDashHeroTools .dashBtnRow,
.saHeroTools .saBtnRow{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

/* One standard hero-nav button box height.
   !important is intentional so older page-level rules cannot make
   two-line nav buttons taller than single-line nav buttons. */
.subscriberHeroNav .gbtn,
.subscriberHeroNav .gbtn.sm,
.subscriberHeroNav .gbtn.two-line,
.subDashHeroTools .dashBtnRow .gbtn,
.subDashHeroTools .dashBtnRow .gbtn.sm,
.subDashHeroTools .dashBtnRow .gbtn.two-line,
.saHeroTools .saBtnRow .gbtn,
.saHeroTools .saBtnRow .gbtn.sm,
.saHeroTools .saBtnRow .gbtn.two-line{
  height: 54px !important;
  min-height: 54px !important;
  box-sizing: border-box !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  align-items: center;
  justify-content: center;
}

/* Two-line text stays inside the same-height button box. */
.subscriberHeroNav .gbtn.two-line,
.subDashHeroTools .dashBtnRow .gbtn.two-line,
.saHeroTools .saBtnRow .gbtn.two-line{
  flex-direction: column;
  gap: 2px !important;
  line-height: 1.05;
  text-align: center;
}

/* Support both the existing .sub helper and the red sub-label used
   in the subscriber nav buttons. */
.gbtn .sub,
.gbtn .sub_red{
  display: block;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.05;
  letter-spacing: .20px;
}

.gbtn .sub_red,
.sub_red{
  color: #dd0000;
  font-weight: 900;
}

.gbtn.center.two-line .sub,
.gbtn.center.two-line .sub_red{
  width: 100%;
  text-align: center;
}

/* On narrow screens, keep the buttons readable and allow full-width stacking. */
@media(max-width:760px){
  .subscriberHeroNav,
  .subDashHeroTools .dashBtnRow,
  .saHeroTools .saBtnRow{
    align-items: stretch;
  }

  .subscriberHeroNav .gbtn,
  .subDashHeroTools .dashBtnRow .gbtn,
  .saHeroTools .saBtnRow .gbtn{
    width: 100%;
    height: auto !important;
    min-height: 54px !important;
  }
}

/* ============================
   END SUBSCRIBER HERO / TOOL NAV STANDARD
   ============================ */