/*
 * The reseller pages: a light, quiet workplace. One accent (KinoPlayer's
 * gold) for the action that matters on each screen, grey for everything
 * that only informs, and cards with a real edge so a page of numbers
 * reads as a set of boxes rather than a wall. Shared tokens with the
 * console (admin.css), so the operator and the reseller see the same house.
 */
:root {
  --page: #f6f7f9;
  --card: #ffffff;
  --sunken: #f1f3f6;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;
  --gold: #d9a441;
  --gold-deep: #b98624;
  --gold-ink: #3b2a08;
  --gold-wash: #fbf3e2;
  --ok: #15803d;
  --ok-wash: #e8f7ee;
  --warn: #b45309;
  --warn-wash: #fdf3e2;
  --bad: #b91c1c;
  --bad-wash: #fdecec;
  --info: #1d4ed8;
  --info-wash: #e8effd;
  --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, 'Noto Sans Arabic', sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --radius: 12px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.05);
  --max: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
.brand:hover, .btn:hover { text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
h2 { font-size: 22px; line-height: 1.25; font-weight: 700; }
h3 { font-size: 16px; font-weight: 600; }
[hidden] { display: none !important; }
code, .mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.center { text-align: center; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .eyebrow { letter-spacing: 0; }

/* ── header / nav ────────────────────────────────────────────────────── */
.top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.top__row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.brand__mark { height: 26px; width: auto; flex: none; }
.brand__word { height: 18px; width: auto; }
.brand__tag { margin-inline-start: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: var(--sunken); }
@media (max-width: 600px) { .brand__tag { display: none; } }
.home-link { margin-inline-start: 8px; gap: 4px; color: var(--ink-3); }
.home-link:hover { color: var(--ink); }
.home-link__chevron { font-size: 18px; line-height: 1; margin-top: -2px; }
[dir="rtl"] .home-link__chevron { transform: scaleX(-1); display: inline-block; }
@media (max-width: 700px) { .home-link span:last-child { display: none; } .home-link { padding-inline: 8px; } }
.top__spacer { flex: 1; }
.langs { display: flex; gap: 2px; background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.langs button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.langs button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.balance { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunken); }
.balance b { font-size: 18px; }
.balance span { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
[dir="rtl"] .balance span { letter-spacing: 0; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.12s, border-color 0.12s, transform 0.08s; white-space: nowrap; }
.btn:hover { background: var(--sunken); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(217, 164, 65, 0.45); outline-offset: 2px; }
.btn--primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.btn--primary:hover { background: #e2b055; }
.btn--danger { color: var(--bad); border-color: #f1b5b5; }
.btn--danger:hover { background: var(--bad-wash); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--tab { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--tab[aria-selected="true"] { background: var(--card); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }

/* ── cards ───────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.card__head p { color: var(--ink-3); font-size: 14px; margin-top: 4px; }
.card + .card { margin-top: 16px; }
.grid > .card { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .card { padding: 18px; } .wrap { padding: 0 16px; } h1 { font-size: 24px; } }

.stat { padding: 18px 20px; }
.stat .eyebrow { margin-bottom: 8px; }
.stat b { display: block; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.stat small { color: var(--ink-3); }
/* A shop on an unlimited year counts what is left of the day, not money. */
.stat--year b { color: var(--ok); }
/* The lock on a line: a hairline above it, because it is a decision about
   the link rather than another field describing it. */
.field--lock { border-top: 1px solid var(--line); padding-top: 14px; }
.field--lock .check { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; cursor: pointer; }
.field--lock .check input { width: 16px; height: 16px; accent-color: var(--gold); }
.field--lock .stack { margin-top: 10px; }

/* ── forms ───────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; width: 100%; }
/* A colour well, not a text box: the swatch fills the control and the padding is a frame around it. */
.field input[type="color"] { padding: 4px; cursor: pointer; }
.field .row.small input[type="checkbox"] { width: auto; min-height: 0; }
.field textarea { padding: 10px 14px; min-height: 80px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.25); }
.field .hint { font-size: 13px; color: var(--ink-3); }
.field .error { font-size: 13px; color: var(--bad); }
.field input.mono { letter-spacing: 0.08em; text-transform: uppercase; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.strength { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.strength i { display: block; height: 100%; width: 0; background: var(--bad); transition: width 0.2s, background 0.2s; }
.strength[data-level="1"] i { width: 25%; }
.strength[data-level="2"] i { width: 50%; background: var(--warn); }
.strength[data-level="3"] i { width: 75%; background: var(--ok); }
.strength[data-level="4"] i { width: 100%; background: var(--ok); }
.mt-24 { margin-top: 24px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.wrap--narrow { max-width: 760px; }
.card--faq { margin-top: 24px; padding: 8px 24px; }

/* ── notices, badges ─────────────────────────────────────────────────── */
.notice { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid; font-size: 14px; }
.notice--ok { background: var(--ok-wash); border-color: #b7e4c7; color: var(--ok); }
.notice--warn { background: var(--warn-wash); border-color: #f5d7a3; color: var(--warn); }
.notice--bad { background: var(--bad-wash); border-color: #f1b5b5; color: var(--bad); }
.notice--info { background: var(--info-wash); border-color: #c3d3fb; color: var(--info); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.badge--ok { background: var(--ok-wash); color: var(--ok); }
.badge--warn { background: var(--warn-wash); color: var(--warn); }
.badge--bad { background: var(--bad-wash); color: var(--bad); }
.badge--info { background: var(--info-wash); color: var(--info); }
.badge--grey { background: var(--sunken); color: var(--ink-2); border-color: var(--line); }

/* ── tables ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: start; background: var(--sunken); color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
[dir="rtl"] th { letter-spacing: 0; }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
td.wrap { white-space: normal; min-width: 160px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbfc; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.empty { padding: 32px; text-align: center; color: var(--ink-3); }

/* ── landing ─────────────────────────────────────────────────────────── */
.hero { padding: 72px 0 40px; text-align: center; }
.hero h1 { font-size: 40px; max-width: 760px; margin: 12px auto 0; }
.hero p { max-width: 640px; margin: 16px auto 0; color: var(--ink-2); font-size: 17px; }
.hero .row { justify-content: center; margin-top: 28px; }
@media (max-width: 600px) { .hero { padding: 40px 0 24px; } .hero h1 { font-size: 28px; } }
.section { padding: 40px 0; }
.section h2 { text-align: center; }
.section > .wrap > p.lead { text-align: center; color: var(--ink-2); max-width: 640px; margin: 8px auto 28px; }
.step { position: relative; padding-top: 28px; }
.step__n { position: absolute; top: 18px; inset-inline-start: 22px; width: 28px; height: 28px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.step h3 { margin-top: 18px; }
.step p { color: var(--ink-2); margin-top: 6px; font-size: 14px; }
.pack { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; position: relative; text-align: center; }
.pack--featured { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash), var(--shadow); }
.pack__tag { position: absolute; top: -12px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--gold); color: var(--gold-ink); font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
[dir="rtl"] .pack__tag { transform: translateX(50%); }
.pack__credits { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.pack__credits small { font-size: 14px; color: var(--ink-3); font-weight: 600; display: block; margin-top: 2px; }
.pack__price { font-size: 28px; font-weight: 700; }
.pack__price small { font-size: 14px; color: var(--ink-3); font-weight: 500; display: block; }
.pack__per { color: var(--ink-2); font-size: 14px; }
.pack .btn { margin-top: 8px; }
.pack__profit { margin-top: 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ok-wash, rgba(31, 157, 97, 0.1)); color: var(--ok); font-size: 14px; line-height: 1.4; }
.pack__profit b { font-size: 20px; display: block; }
.pack__month { color: var(--ink-2); font-size: 14px; }
.pack__month b { color: var(--ink); }
.calc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin: 20px auto 8px; padding: 14px 18px; max-width: 640px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.calc label { font-weight: 600; font-size: 14px; }
.calc input[type="range"] { flex: 1 1 200px; accent-color: var(--gold); }
.calc output { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: center; }
.calc .hint { flex-basis: 100%; text-align: center; margin: 0; }
.pack[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-wash); }
button.pack { font: inherit; color: inherit; cursor: pointer; }
.feature h3 { display: flex; align-items: center; gap: 10px; }
.feature p { color: var(--ink-2); margin-top: 8px; font-size: 14px; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--gold); flex: none; }
details.faq { border-bottom: 1px solid var(--line); padding: 14px 0; }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::after { content: '+'; color: var(--ink-3); font-weight: 400; }
details.faq[open] summary::after { content: '−'; }
details.faq p { color: var(--ink-2); margin-top: 8px; font-size: 14px; }
.footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--ink-3); font-size: 13px; }
.footer .row { justify-content: space-between; }

/* ── auth pages ──────────────────────────────────────────────────────── */
.auth { max-width: 460px; margin: 56px auto; }
.auth h1 { font-size: 26px; margin-bottom: 4px; }
.auth > .card > p { color: var(--ink-3); margin-bottom: 20px; }

/* ── panel ───────────────────────────────────────────────────────────── */
.panel { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px 0 56px; }
.side { display: flex; flex-direction: column; gap: 4px; align-self: start; position: sticky; top: 88px; }
.panel > * { min-width: 0; }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; gap: 16px; } .side { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; } .side::-webkit-scrollbar { display: none; } .side .btn--tab { flex: none; white-space: nowrap; } }
.side .btn--tab { justify-content: flex-start; }
.view > h1 { margin-bottom: 4px; }
.view > p.lead { color: var(--ink-3); margin-bottom: 20px; }
.plan-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-choice button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); font: inherit; color: inherit; cursor: pointer; text-align: start; }
.plan-choice button b { font-size: 17px; }
.plan-choice button small { color: var(--ink-3); }
.plan-choice button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-wash); box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.2); }
.preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; background: var(--sunken); border-radius: var(--radius-sm); font-size: 14px; }
.preview span { display: block; color: var(--ink-3); font-size: 12px; }
@media (max-width: 600px) { .preview, .plan-choice { grid-template-columns: 1fr; } }
.summary { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--gold-wash); border: 1px solid #f1dcac; font-size: 14px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 20px; }
.steps div { padding: 12px 16px; display: flex; gap: 10px; align-items: center; color: var(--ink-3); font-weight: 600; font-size: 14px; border-inline-end: 1px solid var(--line); }
.steps div:last-child { border-inline-end: 0; }
.steps div i { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--sunken); border: 1px solid var(--line); }
.steps div[aria-current="step"] { color: var(--ink); background: var(--gold-wash); }
.steps div[aria-current="step"] i { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.steps div.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } .steps div { border-inline-end: 0; border-bottom: 1px solid var(--line); } }
.invoice { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.invoice img { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.invoice dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14px; }
.invoice dt { color: var(--ink-3); }
.invoice dd { margin: 0; word-break: break-all; }
.copy { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 600px) { .invoice { grid-template-columns: 1fr; } .invoice img { margin: 0 auto; } }
.amount-big { font-size: 26px; font-weight: 700; }
.timer { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); width: 20%; transition: width 0.4s; }
.progress--seen i { width: 70%; }
.card--gap { margin-top: 16px; }
.toast--bad { background: var(--bad); color: #fff; }
.toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); z-index: 20; }
[dir="rtl"] .toast { transform: translateX(50%); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filters input { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; min-width: 220px; }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.credits-neg { color: var(--bad); }
.credits-pos { color: var(--ok); }

/* ── landing: hero with the panel, tabs of real screens, feature cards ── */
.hero--split { text-align: start; padding: 56px 0 40px; background: radial-gradient(900px 420px at 85% 0%, var(--gold-wash), transparent 60%), var(--page); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.hero--split h1 { font-size: clamp(30px, 2.2vw + 18px, 44px); line-height: 1.12; letter-spacing: -0.02em; margin: 10px 0 14px; }
.hero--split .lead { margin: 0 0 22px; max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--lg { padding: 12px 20px; font-size: 15px; }
.chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; color: var(--ink-2); }
.chips li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-inline-end: 6px; }
.hero__visual { position: relative; }
.window { margin: 0; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -28px rgba(17, 24, 39, 0.35), var(--shadow); overflow: hidden; }
.window__bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--sunken); border-bottom: 1px solid var(--line); }
.window__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.window img { display: block; width: 100%; height: auto; }
.window--hero { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
[dir="rtl"] .window--hero { transform: perspective(1400px) rotateY(6deg) rotateX(2deg); transform-origin: right center; }
.float-toast { position: absolute; inset-inline-start: -16px; bottom: 28px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--ink); animation: rise 0.8s 0.4s both; }
.float-toast__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-wash); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .window--hero { transform: none; } .float-toast { position: static; margin-top: 12px; display: inline-flex; } }
.section--tint { background: var(--sunken); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 18px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); width: max-content; max-width: 100%; }
.tabs button { font: inherit; font-weight: 600; font-size: 14px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab-pane { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.tab-pane__copy h3 { font-size: 20px; margin: 0 0 12px; letter-spacing: -0.01em; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-inline-start: 28px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-wash); color: var(--gold-deep); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 900px) { .tab-pane { grid-template-columns: 1fr; } }
.feat { position: relative; padding-top: 22px; }
.feat__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gold-wash); border: 1px solid var(--gold-edge, #e6c88f); font-size: 18px; margin-bottom: 12px; }
.feat h3 { margin: 0 0 6px; font-size: 16px; }
.feat p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px 32px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.cta-band h2 { margin: 0 0 6px; color: #fff; font-size: 24px; }
.cta-band p { margin: 0; color: #c8ccd4; }
.hero--split p { margin-inline: 0; text-align: start; }
.hero--split .chips { justify-content: flex-start; }
.hero--split .eyebrow { margin: 0; }
.cta-band h2 { text-align: start; }

/* ── phones ────────────────────────────────────────────────────────────── */
.grid > * { min-width: 0; }
@media (max-width: 700px) {
  .top__row { flex-wrap: wrap; min-height: 0; padding: 10px 16px; gap: 8px 10px; }
  .top__row > .btn { min-height: 40px; }
  .langs button { padding: 5px 10px; }
  .top__spacer { display: none; }
  .brand, .home-link { order: -2; }
  .langs { order: -1; margin-inline-start: auto; }
  .top__row > .btn, .top__row > .balance { flex: 1 1 auto; justify-content: center; }
  .home-link { flex: none !important; }
  .hero--split { padding: 28px 0 24px; }
  .hero--split h1 { font-size: 27px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; max-width: 100%; border-radius: 12px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; }
  .calc { padding: 12px; }
  .row--between { flex-wrap: wrap; }
  .filters { gap: 6px; }
  .filters input { flex: 1 1 100%; }
  .cta-band { padding: 22px 20px; }
  .cta-band .btn { width: 100%; }
  h1 { font-size: 24px; }
  .steps { grid-template-columns: 1fr; }
  .steps div { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 24px; }
  .pack__credits { font-size: 28px; }
  .pack__price { font-size: 24px; }
  .window--hero { transform: none; }
  .duo { padding-inline-start: 0; }
}
.demo-banner { background: var(--ink); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 16px; }

/* ── the page's own dialog ─────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(17, 24, 39, 0.45); opacity: 0; transition: opacity 0.18s; }
.modal-backdrop.is-open { opacity: 1; }
.modal { position: fixed; z-index: 41; inset-inline: 16px; top: 50%; margin-inline: auto; width: min(440px, calc(100% - 32px)); transform: translateY(-50%) scale(0.96); opacity: 0; transition: opacity 0.18s, transform 0.18s; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(17, 24, 39, 0.4); padding: 24px; }
.modal.is-open { opacity: 1; transform: translateY(-50%) scale(1); }
.modal__title { font-size: 18px; margin: 0 0 6px; }
.modal__body { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.modal__field { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); margin-bottom: 16px; }
.modal__field:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 480px) { .modal__actions { flex-direction: column-reverse; } .modal__actions .btn { width: 100%; } }

/* ── the panel shell: a sidebar with the account and the sections ─────── */
body.app { background: var(--page); }
.sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 248px; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; background: var(--card); border-inline-end: 1px solid var(--line); z-index: 30; overflow-y: auto; }
.sidebar__brand { padding: 4px 8px 14px; }
.sidebar__user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); text-align: start; font: inherit; cursor: pointer; color: var(--ink); }
.sidebar__user:hover { border-color: var(--line-strong); }
.sidebar__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff 0 5px, transparent 6px), radial-gradient(ellipse at 50% 100%, #fff 0 12px, transparent 13px), var(--gold); opacity: 0.9; }
.sidebar__who { display: grid; min-width: 0; }
.sidebar__who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__who small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__nav { display: grid; gap: 2px; margin-top: 10px; }
.navitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; text-align: start; width: 100%; }
.navitem:hover { background: var(--sunken); color: var(--ink); text-decoration: none; }
.navitem.is-active { background: var(--gold-wash); color: var(--gold-ink); box-shadow: inset 3px 0 0 var(--gold); }
[dir="rtl"] .navitem.is-active { box-shadow: inset -3px 0 0 var(--gold); }
.navitem i { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--ink-3); }
.navitem.is-active i { color: var(--gold-deep); }
/* How many customers are waiting, beside the entry that answers them. */
/* One line a shop keeps on a customer's television, in the sheet that lists them. */
.linkrow { gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.linkrow:last-child { border-bottom: 0; }
.linkrow small { display: block; }
.navitem__count { margin-inline-start: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-size: 12px; font-weight: 700; text-align: center; }
.navitem svg, .icon-btn svg, .btn svg, .popmenu svg, .sys-icon svg, .search__icon svg, .dl-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar__foot { margin-top: auto; display: grid; gap: 8px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.sidebar__foot .langs { width: max-content; }
.content { margin-inline-start: 248px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar__title { font-size: 18px; margin: 0; }
.topbar__spacer { flex: 1; }
.topbar .balance { flex-direction: row-reverse; }
.menu-btn { display: none; }
.app .view { padding: 20px 24px 60px; }
/*
 * The title is in the bar above, so the page does not repeat it. The line
 * under it is another matter: every view carries a sentence that says what
 * the page is for and how it works, written in all three languages, and
 * this rule hid every one of them. A shop asking what a code is for was
 * reading nothing because the answer was two hundred pixels away with
 * display:none on it.
 */
.app .view > h1 { display: none; }
.app .view > .lead { max-width: 68ch; margin: 0 0 20px; color: var(--ink-2); }
.app .card--gap { margin-top: 16px; }
.btn svg { margin-inline-end: 2px; }

/* toolbar over the customers table */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.toolbar__spacer { flex: 1; }
.search { position: relative; display: block; width: 280px; max-width: 100%; }
.search__icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; display: grid; }
.search input { width: 100%; padding: 9px 12px; padding-inline-start: 38px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); font: inherit; color: var(--ink); }
.search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.radios { display: flex; flex-wrap: wrap; gap: 4px; }
.radio { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.radio i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); flex: none; }
.radio.is-on { background: var(--sunken); color: var(--ink); }
.radio.is-on i { border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--card); background: var(--gold); }
.radio small { color: var(--ink-4); font-weight: 500; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch--active { background: var(--ok); } .swatch--soon { background: var(--warn); } .swatch--expired { background: var(--bad); }

/* the dense table */
.card--table { padding: 0; overflow: hidden; }
.card--table .table-wrap { border: 0; border-radius: 0; }
table.dense th { padding: 10px 14px; }
table.dense td { padding: 9px 14px; font-size: 13.5px; }
table.dense td.mono { font-size: 13px; }
.sys-icon { display: inline-grid; vertical-align: middle; margin-inline-end: 8px; color: var(--ink-4); }
.sys-icon svg { width: 16px; height: 16px; }
.sys { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #e8f0fe; color: #1d4ed8; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.note-cell { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2); cursor: pointer; padding: 0; }
.icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.icon-btn--gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.icon-btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.icon-btn--ghost { border-color: transparent; background: transparent; width: 26px; height: 26px; color: var(--ink-4); }
.icon-btn--ghost:hover { background: var(--sunken); color: var(--ink); }
.icon-btn--ghost svg { width: 15px; height: 15px; }
.row-actions { display: inline-flex; gap: 6px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); }
.pager__btns { display: inline-flex; align-items: center; gap: 6px; }
.pager__btns .btn { min-height: 30px; padding: 0 10px; }
.popmenu { position: absolute; z-index: 50; min-width: 200px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); display: grid; }
.popmenu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: start; }
.popmenu button:hover { background: var(--sunken); }
.popmenu button.is-danger { color: var(--bad); }
.popmenu svg { width: 16px; height: 16px; color: var(--ink-3); }

/* phones: the sidebar becomes a drawer behind a button in the top bar */
.sidebar-backdrop { display: none; }
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform 0.24s, visibility 0s 0.24s; box-shadow: var(--shadow-lg, 0 24px 60px rgba(17, 24, 39, 0.25)); width: min(300px, 84vw); }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar-open .sidebar { transform: none; visibility: visible; transition: transform 0.24s; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(17, 24, 39, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .content { margin-inline-start: 0; }
  .topbar { padding: 10px 14px; flex-wrap: wrap; }
  .topbar__title { font-size: 16px; }
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
  .menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--ink); }
  .app .view { padding: 14px 14px 48px; }
  .search { width: 100%; }
  .toolbar .btn { flex: 1 1 auto; justify-content: center; }
}
body.app { overflow-x: clip; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.modal__head .modal__title { margin: 0; }
.modal__close { font-size: 14px; }
.dl-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.dl-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
a.dl-item:hover { background: var(--sunken); text-decoration: none; }
.dl-item > span:last-child { display: grid; gap: 2px; min-width: 0; }
.dl-item b { font-size: 15px; }
.dl-item small { color: var(--ink-3); font-size: 12.5px; }
.dl-item small .btn { min-height: 26px; padding: 0 8px; font-size: 12px; margin-inline-start: 6px; vertical-align: middle; }
.dl-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; }
.dl-icon svg { width: 24px; height: 24px; }
.dl-icon--gold { background: var(--gold); color: var(--gold-ink); }
.dl-icon--orange { background: #f4f5f7; }
.dl-icon--orange img { border-radius: 8px; }
.dl-icon--dark { background: var(--ink); }

/* ── the sign-in screen, as the shop's customer will see it ───────────── */
.signin { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center;
  background: #12151c; border-radius: 14px; padding: 22px; }
.signin__mark { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #f7f9fc; }
.signin__mark img { max-width: 160px; max-height: 90px; object-fit: contain; }
.signin__form { display: flex; flex-direction: column; gap: 10px; }
.signin__field { border: 1px solid #2a3140; border-radius: 10px; padding: 11px 13px; color: #8a94a6; font-size: 13px; background: #191d26; }
.signin__go { border-radius: 10px; padding: 11px 13px; text-align: center; font-weight: 700; color: #16110a; background: #e8b45c; }
/* The four characters the television answers with: the point of that screen, so it looks like it. */
.signin__ask { display: flex; align-items: baseline; justify-content: center; gap: 10px; border: 1px dashed #3a4354; border-radius: 10px; padding: 11px 13px; background: #191d26; }
.signin__ask b { color: #8a94a6; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.signin__ask .mono { color: #e8b45c; font-size: 22px; font-weight: 700; letter-spacing: .18em; }
.signin__ways { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; color: #b4becc; font-size: 13px; }
.signin__ways b { color: #7c8899; font-weight: 600; margin-inline-end: 4px; }
@media (max-width: 720px) { .signin { grid-template-columns: 1fr; } }

/* ── picking a picture ─────────────────────────────────────────────────
 * The browser's own file control speaks the browser's language and wears
 * the operating system's paint. This is the same input, invisible, inside
 * a surface that belongs to the page: the picture it holds, its name and
 * size, a button, and a target to drop one on.
 */
.drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--sunken); transition: border-color .15s, background .15s; }
.drop.is-over { border-color: var(--gold); background: var(--gold-wash); }
.drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop__thumb { width: 84px; height: 48px; object-fit: contain; background: #12151c; border-radius: 8px; padding: 4px; }
.drop__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.drop__words b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop label.btn { cursor: pointer; }

/* The number a shop reads out to its customers: big enough to read out. */
.code-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.code-card__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; letter-spacing: 0.08em; }

/*
 * The guided activation.
 *
 * A shop spends money on this page, so the three steps look like three
 * steps: one question at a time, the answer to the last one carried along
 * at the top, and a summary written as sentences before the only button
 * that costs anything.
 */
.input--lg { font-size: 20px; letter-spacing: 0.08em; padding: 14px 16px; }
.hint--under { margin-top: -4px; text-align: end; }
.row--end { justify-content: flex-end; }
.chosen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--gold-deep); font: inherit; text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }
.plan-choice--rich button { align-items: flex-start; text-align: start; }
.plan-until { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.plan-choice--rich button[aria-pressed="true"] .plan-until { color: var(--gold-ink); }
.summary-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.summary-list > div { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.summary-list > div:last-child { border-bottom: 0; }
.summary-list dt { color: var(--ink-3); font-size: 14px; }
.summary-list dd { margin: 0; color: var(--ink); }
.btn--lg { padding: 13px 26px; font-size: 16px; }
@media (max-width: 600px) {
  .summary-list > div { grid-template-columns: 1fr; gap: 2px; }
  .row--between { flex-wrap: wrap; gap: 10px; }
}

/*
 * A row's actions say what they do.
 *
 * They were two circles with an icon each, and a shop had to hover to find
 * out which one spent a credit. The words are there on a desk and step
 * aside on a phone, where the icons and the order are already learned.
 */
.row-actions { display: inline-flex; gap: 8px; align-items: center; }
.row-actions .btn { white-space: nowrap; }
.btn__label { margin-inline-start: 2px; }
@media (max-width: 900px) { .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
/* The word beside the three dots is a luxury: it goes first when the table
   is tight, because the icon is the one every list in the world uses. */
@media (max-width: 1400px) { .btn__label--wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ── Moving customers to another server ──────────────────────────────────
   The sheet is a list of people, so it is built like one: a name in the
   weight a name deserves, and the device code and the subscription beneath
   it in the small grey that says "to tell two of them apart", not "to read".
   Everything in here is a row of its own; the first version was a label per
   customer with no rule to make it a block, so the browser flowed them side
   by side and two customers shared a line. */
.movebox__from { margin: 0 0 14px; color: var(--ink-3); }
.movebox__from b { color: var(--ink); }
.movebox__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 8px; font-size: 13px; color: var(--ink-3); }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--gold-deep); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }

.checklist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-height: 46vh; overflow-y: auto; }
.checkline { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--card); }
.checkline:last-child { border-bottom: 0; }
.checkline > label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.checkline input { flex: none; width: 18px; height: 18px; accent-color: var(--gold-deep); }
.checkline__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkline__who b { font-weight: 600; }
/* The code and the subscription name read left to right whichever way the
   page runs, and they are one line that truncates rather than two that wrap:
   a list of twenty customers has to stay scannable. */
.checkline__who small { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkline.is-off { background: var(--sunken); }
.checkline.is-off > label { cursor: default; }
.checkline.is-off .checkline__who b { color: var(--ink-3); }
.pill--lock { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--gold-wash); color: var(--gold-ink); border: 1px solid var(--gold); }

/* A sheet with a list in it is as tall as the list, which on a shop with
   thirty customers is taller than the screen: the buttons went under the
   fold and the last customer was cut in half by them. The sheet is capped
   instead, the list is the only part that scrolls, and the two buttons stay
   where a hand expects them. */
.modal--sheet { max-height: min(86vh, 760px); display: flex; flex-direction: column; }
.modal--sheet .modal__body { display: flex; flex-direction: column; min-height: 0; flex: 1; margin-bottom: 0; }
.modal--sheet .checklist { flex: 1; min-height: 0; max-height: none; }
.modal--sheet .modal__foot { flex: none; margin-top: 16px; }

/* ── The login beside the line it belongs to ─────────────────────────────
   A shop reads this out on the telephone or pastes it into its own panel.
   The password is dotted out because the sheet is open on a counter in a
   shop; the copy button takes the real one without ever drawing it, and the
   eye is there for the times the shop has to read it aloud. */
.linkrow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.linkrow:last-child { border-bottom: 0; }
.creds { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 0; }
.creds > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.creds dt { font-size: 12px; color: var(--ink-3); }
.creds dd { display: flex; align-items: center; gap: 2px; margin: 0; min-width: 0; }
/* Latin credentials inside an Arabic page: left to right, and one line that
   truncates rather than a wrap that hides half of a long address. */
.creds__value { direction: ltr; unicode-bidi: isolate; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creds__value--wrap { max-width: 42ch; }

/* The two buttons under a sheet that has a list above them. */
.sheet-foot { margin-top: 16px; gap: 12px; }
.notice--good { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--gold-wash); border: 1px solid var(--gold); color: var(--gold-ink); }

/* Moving a customer to another television is neither the ordinary action on
   this sheet nor a destructive one, and it was wearing the ghost style of a
   cancel button. It is told apart by weight rather than by hue: the accent
   drawn as an outline, where the primary is the same accent filled. A second
   colour was tried and taken out again, because this panel has one. */
.btn--move { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-deep); background: transparent; border-color: var(--gold); }
.btn--move:hover { background: var(--gold-wash); border-color: var(--gold-deep); }
.btn--move svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }