/* =============================================================================
   TikAPIs — design layer on top of Bootstrap 5

   Structure, in order:
     1. Tokens          colours, fonts, radii — the only place values are defined
     2. Base            body, typography, links
     3. Layout          containers, navbar, footer, wide (panel) layout
     4. Components      buttons, cards, forms, tables, badges — shared everywhere
     5. Marketing       hero, plans, docs — public pages only
     6. Panel           admin-only pieces that reuse the components above
     7. Utilities       small helpers

   Rule: a component is styled once, here. Templates use these classes and never
   inline styles, so there is a single place to change how anything looks.
   ============================================================================= */

/* ============================ 1. TOKENS =================================== */

:root {
  /* brand */
  --brand: #00d3f2;
  --brand-strong: #0aa7c2;
  --brand-ink: #04222a;
  --glow: rgba(0, 211, 242, 0.16);
  --brand-shadow: rgba(8, 110, 134, 0.5);

  /* Solid-button fill. Deeper than --brand so white text stays readable on it. */
  --btn-from: #0a8fb0;
  --btn-to: #06627f;

  /* The brand gradient. Defined once — step badges, checkout markers and progress
     bars all reach for this rather than repeating the colour stops. */
  --grad-brand: linear-gradient(135deg, var(--brand), var(--brand-strong));

  /* Status colours, so "success green" is one value and not three near-misses. */
  --ok: #16a34a;
  --ok-soft: rgba(22, 163, 74, 0.15);

  /* Elevation. Two steps, both built from one ink colour. */
  --shadow-ink: 2, 8, 23;
  --shadow-md: 0 10px 30px rgba(var(--shadow-ink), 0.14);
  --shadow-lg: 0 16px 40px rgba(var(--shadow-ink), 0.16);

  /* Inline code. Bootstrap's default is a pink that fights the brand and goes muddy
     on a dark background, so it is set here for both themes. */
  --code-color: #b5257a;
  --code-bg: rgba(15, 23, 42, 0.05);

  /* surfaces */
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #eef2f6;
  --line: rgba(15, 23, 42, 0.12);

  /* type */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* shape & rhythm */
  --radius: 14px;
  --radius-sm: 9px;
  --nav-height: 3.75rem;

  /* Content column widths. Bootstrap's .container caps at 1320px; the panel gets a
     wider cap because of the sidebar, but stays a centred column either way. */
  --width-wide: 1480px;
}

[data-bs-theme="dark"] {
  /* Daha önce çok koyuydu (#10151c ≈ siyah). Profesyonel, gözü yormayan bir
     slate tonuna açıldı — kartlar/paneller zemine göre net ayrışsın diye üç
     kademe. */
  --surface: #1a212e;
  --surface-2: #222c3b;
  --surface-3: #2c3749;
  --line: rgba(255, 255, 255, 0.13);
  --glow: rgba(0, 211, 242, 0.14);
  /* On a dark page the fill can be brighter without losing the white label, and the
     shadow has to be the brand colour or it disappears into the background. */
  --brand-shadow: rgba(0, 170, 200, 0.32);
  --btn-from: #0f9dbe;
  --btn-to: #0a6f8d;

  --shadow-ink: 0, 0, 0;
  --shadow-md: 0 10px 30px rgba(var(--shadow-ink), 0.4);
  --shadow-lg: 0 16px 40px rgba(var(--shadow-ink), 0.5);

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.16);

  /* Pink on a dark page reads as a fault. Code takes a light cyan instead — the same
     family as the brand, and it stays legible against every surface we use. */
  --code-color: #7fdcf0;
  --code-bg: rgba(255, 255, 255, 0.06);
}

/* ============================= 2. BASE ==================================== */

body {
  font-family: var(--font-body);
  font-size: 0.975rem;
  line-height: 1.65;
  letter-spacing: -0.006em;
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Nothing may scroll the page sideways. A single overwide element — a long key, a
     wide table, a row asking for a bigger gutter than its container has padding for
     — otherwise makes every page on a phone drag horizontally. `clip` rather than
     `hidden` because `hidden` would break position: sticky on the navbar. */
  overflow-x: clip;
}

[data-bs-theme="dark"] body {
  background:
    radial-gradient(1100px 520px at 15% -8%, rgba(0, 211, 242, 0.09), transparent 60%),
    radial-gradient(900px 460px at 88% 4%, rgba(124, 92, 255, 0.09), transparent 60%),
    var(--surface);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .price,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* Inline code reads as a chip, so a header name or an endpoint path is picked out of
   the sentence around it. `pre code` is excluded: inside a block the chip would draw
   a box around every line. */
code {
  color: var(--code-color);
  background: var(--code-bg);
  border-radius: 5px;
  padding: 0.1em 0.36em;
  overflow-wrap: anywhere;
}

/* In a table cell, breaking mid-token turns a short order reference into a three-line
   stack and drags the column — and the row height — with it. Cells keep their code on
   one line and let the column be as wide as it needs to be. */
td code, th code { overflow-wrap: normal; }

pre code,
a code,
.btn code {
  background: none;
  padding: 0;
}

a code { color: inherit; }

pre {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  overflow-x: auto;
}

.lead { font-size: 1.08rem; line-height: 1.65; }

.gradient-text {
  background: linear-gradient(120deg, var(--brand), #7c5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================ 3. LAYOUT =================================== */

.navbar {
  /* Symmetric padding: Bootstrap's default leaves the brand looking top-heavy
     once the nav links wrap, which read as a gap above the menu. */
  padding-block: 0.5rem;
  min-height: var(--nav-height);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.navbar-brand {
  padding-block: 0;
  margin-right: 1.5rem;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  line-height: 1.4;
}

.navbar .navbar-nav { align-items: stretch; }

.navbar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.4;
  transition: color 0.15s ease, background 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: var(--brand);
  background: var(--glow);
}

/* Breakpoints below must match the navbar's expand class (navbar-expand-md → 768px). */
@media (min-width: 768px) {
  .navbar .navbar-nav { align-items: center; }
}

/* The header call to action. Sized to its label on desktop; full width once the menu
   collapses, where a shrink-to-fit button looks stranded. */
.nav-cta { padding-inline: 0.95rem; }

/* Stacked, roomier nav once it collapses into the toggle menu.
   The open menu is an opaque, scrollable panel so it never bleeds the page
   content behind it (a transparent collapse looked like the menu was "inside"
   the page). Dropdowns render inline (accordion) within that panel. */
@media (max-width: 767.98px) {
  .navbar-collapse {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
    max-height: calc(100vh - var(--nav-height) - 1rem);
    overflow-y: auto;
  }
  .navbar .nav-link { padding-block: 0.5rem; }
  /* Accordion inside the opaque panel — transparent is fine here since the
     panel itself is solid; add a subtle indent + divider for hierarchy. */
  .navbar .dropdown-menu {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0.75rem;
    margin-left: 0.25rem;
    border-left: 2px solid var(--line);
  }
  .navbar .dropdown-menu .dropdown-item { padding-block: 0.45rem; }
  .nav-cta { display: flex; width: 100%; }
}

footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
}

footer a:hover { color: var(--brand) !important; }

/* --- Profesyonel site footer (base.html'de global) --- */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.site-footer .container { padding-top: 2.25rem; padding-bottom: 1.25rem; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: 2rem 3rem;
  padding-bottom: 1.5rem;
}
.footer-brand { min-width: 0; }
.footer-logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--bs-body-color); font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem;
}
.footer-logo .brand-mark { width: 2rem; height: 2rem; font-size: 1rem; }
.footer-logo-name { white-space: nowrap; }
.footer-tagline {
  margin: 0.75rem 0 0.85rem; max-width: 34ch;
  color: var(--bs-secondary-color); font-size: 0.86rem; line-height: 1.6;
}
.footer-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--bs-secondary-color);
}
.footer-dot-sep { opacity: 0.5; }
.footer-version { font-variant-numeric: tabular-nums; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; min-width: 0; }
.footer-col-title {
  margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bs-secondary-color);
}
.footer-col a, .footer-linkbtn {
  color: var(--bs-body-color); text-decoration: none; font-size: 0.875rem;
  transition: color 0.15s ease;
}
.footer-col a:hover, .footer-linkbtn:hover { color: var(--brand); }
.footer-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.footer-copy { font-size: 0.8rem; color: var(--bs-secondary-color); }
.footer-bottom-right { display: flex; align-items: center; gap: 0.85rem; }
.footer-meta { font-size: 0.78rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* Wide layout — the panel. The panel needs more room than a marketing page, but it
   must still be a centred column: stretched edge to edge on a wide monitor the rows
   become unreadably long. One rule widens the header, content and footer containers
   together, so all three stay aligned. */
.layout-wide .container {
  max-width: var(--width-wide);
  padding-inline: 1.25rem;
}

@media (min-width: 1400px) {
  .layout-wide .container { padding-inline: 2rem; }
}

/* ========================== 4. COMPONENTS ================================= */

/* --- buttons --- */

.btn {
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 0.92rem;
  --bs-btn-font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  line-height: 1.5;
  white-space: nowrap;
  transition: filter 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease, color 0.15s ease;
}

.btn:focus-visible { box-shadow: 0 0 0 0.2rem var(--glow); }
.btn:disabled { opacity: 0.55; }

.btn-sm {
  --bs-btn-padding-y: 0.32rem;
  --bs-btn-padding-x: 0.7rem;
  --bs-btn-font-size: 0.82rem;
}

.btn-lg {
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: 1rem;
}

/* The primary action everywhere — "Get started", "Log in", "View pricing" and every
   Send in the panel are all this one class, so they cannot drift apart.

   White label on a deep teal fill. The brand cyan is too light to carry white text
   (it reads at about 2.9:1), so the button uses the deeper end of the brand ramp and
   keeps the bright cyan for headings and links where it sits on a dark background.
   No border and no black shadow: the only shadow is tinted with the button's own
   colour, which is what stops it looking like a bright chip with a dark ring. */
.btn-brand {
  --shadow-rest: 0 1px 2px -1px var(--brand-shadow), 0 6px 16px -8px var(--brand-shadow);
  --shadow-lift: 0 2px 6px -2px var(--brand-shadow), 0 12px 26px -10px var(--brand-shadow);
  /* Pin every Bootstrap button colour var to white/transparent. Without this, the
     :active state falls back to Bootstrap's defaults (dark text + a solid bg that
     hides the gradient) — which is why the label turned black on click. */
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  background-image: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  border: 0;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-rest);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  /* Removing the border removes Bootstrap's 1px of border box; put it back as
     padding so a brand button lines up with an outline button beside it. */
  padding-block: calc(var(--bs-btn-padding-y) + 1px);
}

.btn-brand:hover,
.btn-brand:focus,
.btn-brand:focus-visible,
.btn-brand:active,
.btn-brand:visited { color: #ffffff; }

.btn-brand:hover {
  filter: brightness(1.09);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.btn-brand:focus-visible { box-shadow: var(--shadow-lift), 0 0 0 0.2rem var(--glow); }

.btn-brand:active {
  transform: translateY(0);
  filter: brightness(0.94);
  box-shadow: var(--shadow-rest);
}

.btn-brand:disabled,
.btn-brand.disabled {
  box-shadow: none;
  transform: none;
  filter: grayscale(0.3);
}

/* The header call to action carries an arrow; nudge it so it reads as one unit. */
.btn-brand .bi { font-size: 0.9em; transition: transform 0.15s ease; }
.btn-brand:hover .bi { transform: translateX(2px); }

/* Users who ask for less motion still get the shadow and colour feedback. */
@media (prefers-reduced-motion: reduce) {
  .btn-brand,
  .btn-brand:hover,
  .btn-brand:active { transform: none; transition: box-shadow 0.15s ease; }
  .btn-brand:hover .bi { transform: none; }
}

/* Outline buttons read as washed-out by default; give them a real border and a
   solid hover so secondary actions still look deliberate. */
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--bs-secondary-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--bs-secondary-color);
  --bs-btn-active-color: var(--bs-body-color);
}

.btn-outline-info {
  --bs-btn-color: var(--brand-strong);
  --bs-btn-border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  --bs-btn-hover-bg: var(--glow);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-strong);
  --bs-btn-active-bg: var(--glow);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-active-color: var(--brand-strong);
}

[data-bs-theme="dark"] .btn-outline-info {
  --bs-btn-color: var(--brand);
  --bs-btn-hover-color: var(--brand);
  --bs-btn-active-color: var(--brand);
}

/* Full-width form submits should not stretch their icon gap oddly. */
.btn.w-100 { justify-content: center; }

/* Buttons sitting side by side inside a table cell or toolbar.
   Deliberately does not wrap: in an action column, a wrapped button drops onto its
   own line and the row grows a step taller than every other row. The cell is
   nowrap too, so the column asks the table for the width it needs instead. */
.btn-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.btn-row form { display: inline-flex; margin: 0; }

/* Icon-only buttons should be square, not a wide pill with a glyph adrift in it. */
.btn-row .btn > .bi:only-child { margin-inline: -0.15rem; }

/* --- cards --- */

.card {
  --bs-card-border-radius: var(--radius);
  --bs-card-border-color: var(--line);
  --bs-card-bg: var(--surface);
  --bs-card-cap-bg: var(--surface-2);
}

.card-header {
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 0.75rem 1rem;
}

.surface-2 { background: var(--surface-2); }

/* --- forms: one definition, used by the site and the panel alike --- */

.form-label {
  font-size: 0.83rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--bs-secondary-color);
}

.form-control,
.form-select {
  border-radius: var(--radius-sm);
  border-color: var(--line);
  background-color: var(--surface-2);
  font-size: 0.92rem;
  padding: 0.5rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-2);
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem var(--glow);
}

.form-control::placeholder { color: var(--bs-secondary-color); opacity: 0.65; }

textarea.form-control { line-height: 1.6; min-height: 6rem; }

/* A field holding code, not prose — analytics snippets, wallet addresses. */
.font-mono {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: pre;
}

/* Safety net. Django renders a widget with no class if a form forgets BootstrapMixin,
   and a bare <input> inherits nothing from Bootstrap — it lands on the page as an
   unstyled browser default. This matches only elements carrying no class at all, so
   it can never fight .form-control / .form-check-input. */
form :where(input, select, textarea):not([class]):not([type="hidden"]) {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--bs-body-color);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form :where(input, select, textarea):not([class]):focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem var(--glow);
}

form :where(input[type="checkbox"], input[type="radio"]):not([class]) {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  padding: 0;
  accent-color: var(--brand);
}

.form-text { font-size: 0.79rem; line-height: 1.5; margin-top: 0.3rem; }

.form-check-input {
  border-color: var(--line);
  background-color: var(--surface-2);
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

.form-check-input:focus { box-shadow: 0 0 0 0.2rem var(--glow); }

.form-check-label { font-size: 0.9rem; }

/* --- dropdowns --- */

.dropdown-menu {
  --bs-dropdown-border-radius: var(--radius-sm);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-font-size: 0.9rem;
  box-shadow: var(--shadow-md);
  padding-block: 0.35rem;
}

.dropdown-item { padding: 0.45rem 1rem; border-radius: 0; }
.dropdown-item:active { background: var(--glow); color: inherit; }
.dropdown-divider { border-color: var(--line); }

/* --- tables --- */

.table {
  --bs-table-border-color: var(--line);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.table > thead > tr > th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.table > tbody > tr > td {
  padding: 0.65rem 0.85rem;
  vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

/* A table inside a card should not double up on the card's rounded corners. */
.card > .table-responsive { border-radius: 0 0 var(--radius) var(--radius); }

/* --- badges & alerts --- */

.badge {
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.35em 0.6em;
  border-radius: 6px;
}

.alert {
  --bs-alert-border-radius: var(--radius-sm);
  --bs-alert-border-color: var(--line);
  font-size: 0.92rem;
}

/* --- list groups --- */

.list-group-item {
  border-color: var(--line);
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
}

/* --- monospace blocks --- */

.key-box,
.pay-address,
.amount-value { font-family: var(--font-mono); }

.key-box {
  font-size: 0.78rem;
  line-height: 1.6;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
  word-break: break-all;
}

.pay-address { font-size: 0.86rem; word-break: break-all; }

.amount-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ========================== 5. MARKETING ================================== */

.hero { padding: 5.5rem 0 3.5rem; text-align: center; }

.hero h1 {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
}

.hero .lead { max-width: 40rem; margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

/* Cards that lift on hover — used by features, plans and portal links. */
.feature-card,
.plan-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.feature-card:hover,
.plan-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: var(--glow);
  color: var(--brand);
  font-size: 1.2rem;
}

.plan-card.featured {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 0 0 1px var(--glow), var(--shadow-lg);
}

.price {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan-features { list-style: none; padding: 0; margin: 0; }

.plan-features li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.28rem 0;
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
}

.plan-features i { color: var(--ok); margin-top: 0.15rem; }

/* Numbered circle — checkout steps and the docs quick start share it. */
.step-badge,
.checkout-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.step-badge {
  background: var(--grad-brand);
  color: var(--brand-ink);
}

.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.checkout-steps li { display: flex; align-items: center; gap: 0.5rem; }
.checkout-steps span { border: 1px solid var(--line); }
.checkout-steps .current { color: var(--bs-body-color); font-weight: 500; }

.checkout-steps .current span {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--brand-ink);
}

.checkout-steps .done span {
  background: var(--glow);
  border-color: transparent;
  color: var(--brand);
}

/* Documentation contents rail. The offset is derived from the navbar height rather
   than hard-coded, so changing --nav-height moves it too. */
.doc-nav {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
}

.doc-nav .nav-link {
  color: var(--bs-secondary-color);
  border-left: 2px solid var(--line);
  border-radius: 0;
  padding: 0.25rem 0 0.25rem 0.8rem;
  font-size: 0.88rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.doc-nav .nav-link:hover,
.doc-nav .nav-link:focus-visible {
  color: var(--brand);
  border-left-color: var(--brand);
  background: none;
}

/* HTTP method chip. One rule, one colour per method. */
.method-get,
.method-post {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
}

.method-get { background: var(--ok-soft); color: var(--ok); }
.method-post { background: var(--glow); color: var(--brand-strong); }
[data-bs-theme="dark"] .method-post { color: var(--brand); }

/* The chip column: wide enough for the longest method, never wider. */
.method-col { width: 4.5rem; }

.accordion {
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: var(--radius-sm);
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--glow);
}

.accordion-button {
  gap: 0.5rem;
  font-size: 0.95rem;
}

.accordion-button:not(.collapsed) {
  background: var(--glow);
  color: inherit;
  box-shadow: none;
}

/* Bootstrap ships a dark chevron as a data URI, which disappears on a dark page.
   The filter is the only way to recolour a background-image. */
[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.8); }

.accordion-button:not(.collapsed)::after { filter: none; }
[data-bs-theme="dark"] .accordion-button:not(.collapsed)::after {
  filter: invert(1) brightness(1.8);
}

.legal p { color: var(--bs-secondary-color); line-height: 1.75; }
.legal h2 { font-size: 1.05rem; font-weight: 600; margin-top: 2rem; }

/* ============================ 6. PANEL ==================================== */

/* Side navigation. Below lg it becomes a horizontal strip that scrolls. */
.panel-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: calc(var(--nav-height) + 1rem);
}

.panel-nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.panel-nav a:hover { background: var(--surface-2); color: var(--bs-body-color); }
.panel-nav a.active { background: var(--glow); color: var(--brand); font-weight: 600; }

@media (max-width: 991.98px) {
  .panel-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: static;
    margin-bottom: 0.25rem;
    padding-bottom: 0.4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .panel-nav::-webkit-scrollbar { display: none; }
  .panel-nav a { flex: 0 0 auto; }
}

/* Stat tiles. */
.stat-tile .card-body { padding: 1rem 1.1rem; }

/* Same shape as .eyebrow, a touch smaller because a tile is a tighter space. */
.stat-label {
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  line-height: 1.4;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-block: 0.1rem;
}

.stat-note { font-size: 0.78rem; color: var(--bs-secondary-color); line-height: 1.45; }

/* Pagination bar under a list. One rule for every paged section in the panel. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}

.pager-count {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}

.pager-size {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.pager-size .form-select { width: auto; }

.pagination {
  --bs-pagination-border-color: var(--line);
  --bs-pagination-bg: transparent;
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-border-color: var(--line);
  --bs-pagination-hover-color: var(--brand);
  --bs-pagination-focus-bg: var(--surface-2);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--glow);
  --bs-pagination-active-bg: var(--btn-from);
  --bs-pagination-active-border-color: var(--btn-from);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--line);
  --bs-pagination-border-radius: var(--radius-sm);
}

/* Header strip carrying a select-all box and the bulk action for a list. */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

/* One row of the ticket list: checkbox, subject block, then the meta on the right. */
.ticket-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid var(--line);
}

.ticket-row:last-child { border-bottom: 0; }
.ticket-row:hover { background: var(--surface-2); }

.ticket-row-main {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ticket-row-main:hover .fw-semibold { color: var(--brand); }

/* Destructive actions, set apart from the reversible ones above them so a delete is
   never one careless click away from a save. */
.danger-zone {
  border-top: 1px solid var(--bs-danger-border-subtle, var(--line));
  background: var(--bs-danger-bg-subtle);
}

.danger-zone .section-label { color: var(--bs-danger-text-emphasis); }

/* Empty-state row inside a panel table or list. */
.panel-empty {
  text-align: center;
  color: var(--bs-secondary-color);
  padding: 2rem 1rem !important;
}

/* Filter bar above a list. Wraps rather than squeezing: the email log carries a
   search box and two dropdowns, and a fixed 420px squashed the search field to a
   few characters. The text input takes the slack; the selects stay their own size. */
.panel-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.panel-search input[type="search"],
.panel-search input[type="text"] {
  flex: 1 1 14rem;
  min-width: 12rem;
  max-width: 26rem;
}

.panel-search .form-select { flex: 0 0 auto; width: auto; }

/* Sent & drafts. A row has a subject, a state and up to two buttons — more than a
   table can fit in a half-width card without scrolling sideways, so it is a grid that
   wraps instead. Nothing here scrolls: the card grows to the rows it holds. */
.sendlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sendlist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "main state actions";
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
}

.sendlist-row:last-child { border-bottom: 0; }

/* minmax(0, 1fr) above plus this is what lets the subject ellipsis instead of
   forcing the grid wider than the card. */
.sendlist-main { grid-area: main; min-width: 0; }

.sendlist-subject {
  display: block;
  font-weight: 500;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sendlist-meta {
  display: block;
  font-size: 0.76rem;
  color: var(--bs-secondary-color);
}

.sendlist-state {
  grid-area: state;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.sendlist-actions {
  grid-area: actions;
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

.sendlist-actions form { margin: 0; }

/* Progress and errors sit on their own line under the row. */
.sendlist-progress {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sendlist-progress .progress {
  flex: 1;
  height: 0.4rem;
  background: var(--surface-3);
}

.sendlist-progress .progress-bar {
  background: linear-gradient(90deg, var(--btn-from), var(--brand));
  transition: width 0.4s ease;
}

.sendlist-progress .sendlist-meta { white-space: nowrap; }

.sendlist-error {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: var(--bs-danger-text-emphasis, #d9534f);
  overflow-wrap: anywhere;
}

/* Narrow cards stack the row rather than squeezing three columns into 20rem. */
@media (max-width: 575.98px) {
  .sendlist-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main  state"
      "actions actions";
  }
  .sendlist-actions { justify-content: flex-start; }
}

/* Support conversation. Shared with the customer's own ticket page — the same
   message bubbles serve both sides, so they are defined once. */
.thread-row { display: flex; margin-bottom: 0.75rem; }
.thread-row.from-staff { justify-content: flex-end; }
.thread-row .card { max-width: min(85%, 40rem); }
.thread-row .card-body { padding: 0.6rem 0.85rem; }
.thread-meta { font-size: 0.72rem; color: var(--bs-secondary-color); }
.thread-body { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6; }

/* =========================== 7. UTILITIES ================================= */

/* Small capitalised label above a block of content — "Your details", "On this page",
   "Orders". It replaces `text-uppercase small fw-semibold text-body-secondary`, which
   was repeated on ten templates and drifted by a class each time.
   Not to be confused with .eyebrow, the pill badge in the hero. */
.section-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bs-secondary-color);
  line-height: 1.4;
}

/* Caps a paragraph at a comfortable reading width, centred by mx-auto. */
.measure { max-width: 44rem; }

/* Payment QR. Fixed width so the image never inflates the checkout column. */
.qr-code { max-width: 190px; width: 100%; height: auto; }

/* Stop a long email or name stretching a table off-screen.

   Truncation only, no display of its own. The utility used to set
   `display: inline-block`, which on a <td> takes the cell out of its row — that is
   what pulled the panel tables apart and forced the horizontal scrollbar. It also
   silently beat a `d-block` sitting on the same element. Callers pick the box:
   `d-inline-block` inside a cell, `d-block` for a stacked line. Overflow needs a
   non-inline box to apply, so an element with neither still shows its full text
   rather than breaking the layout. */
.truncate-sm,
.truncate-md {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-sm { max-width: 9rem; }
.truncate-md { max-width: 15rem; }

@media (max-width: 767.98px) {
  .truncate-sm { max-width: 7rem; }
  .truncate-md { max-width: 10rem; }
}

/* Anchor targets clear the sticky navbar. */
[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }

/* Sortable column heading. Same weight as a plain <th>; the icon is what says it
   can be clicked, so the header row does not turn into a wall of links. */
.sort-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.sort-link:hover { color: var(--brand); }
.sort-link .bi { font-size: 0.75em; opacity: 0.5; }
.sort-link:hover .bi { opacity: 1; }
.sort-link.is-active { color: var(--brand); }
.sort-link.is-active .bi { opacity: 1; }

/* Label/value pairs on a detail page. */
.detail-list { margin: 0; }
.detail-list dt {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-secondary-color);
  margin-top: 0.9rem;
}
.detail-list dt:first-child { margin-top: 0; }
.detail-list dd { margin: 0.15rem 0 0; font-size: 0.92rem; }