/* ============================================================================
   Airchip Backend — Unified Design System (single stylesheet)
   One CSS for every backend page. Themeable via [data-theme] + [data-accent].
   Fully responsive: data tables collapse to cards on mobile.
   ========================================================================= */

/* ---- Design tokens ---- */
:root {
  --accent:#006bb3;
  --accent-600:#00527f;
  --accent-50:#e7f2fa;
  --radius:14px;
  --radius-sm:9px;
  --gap: 20px;
  --sidebar-w: 248px;
  --header-h: 60px;
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* light theme surfaces */
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e6e9f0;
  --text: #1e2532;
  --text-muted: #6b7385;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-lg: 0 8px 24px rgba(16,24,40,.12);
  --success: #16a34a; --success-bg:#e7f6ec;
  --warning: #d97706; --warning-bg:#fdf1e3;
  --danger:  #dc2626; --danger-bg:#fdeaea;
  --info:    #2563eb; --info-bg:#e8f0fe;
}
[data-accent="teal"]   { --accent:#0d9488; --accent-600:#0b7c72; --accent-50:#e6f6f4; }
[data-accent="violet"] { --accent:#6d3ee0; --accent-600:#5a2fc4; --accent-50:#efeafc; }
[data-accent="slate"]  { --accent:#334155; --accent-600:#1e293b; --accent-50:#eef1f5; }

[data-theme="dark"] {
  --bg:#0f141c; --surface:#161d29; --surface-2:#1b2431; --border:#28323f;
  --text:#e6ebf2; --text-muted:#93a0b3;
  --accent-50: rgba(255,255,255,.06);
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
  --success-bg:rgba(22,163,74,.16); --warning-bg:rgba(217,119,6,.16);
  --danger-bg:rgba(220,38,38,.16); --info-bg:rgba(37,99,235,.16);
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
h1,h2,h3 { margin:0; font-weight:650; }

/* ============================ App shell ============================ */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.scrim { display: none; }   /* overlay only shown on mobile when the drawer is open */

.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display:flex; align-items:center; gap:10px; padding:16px 20px; height: var(--header-h); border-bottom:1px solid var(--border); }
.brand .logo { width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px; }
.brand b { font-size:16px; letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav { padding:12px 10px; overflow-y:auto; flex:1; }
.nav .group { text-transform:uppercase; font-size:11px; letter-spacing:.6px; color:var(--text-muted); padding:14px 12px 6px; }
.nav a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--radius-sm); color:var(--text); font-weight:500; margin:2px 0; }
.nav a .ic { width:18px;height:18px;opacity:.7; flex:0 0 18px; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--accent-50); color: var(--accent); font-weight:650; }
[data-theme="dark"] .nav a.active { color:#fff; }

.main { display:flex; flex-direction:column; min-width:0; }
.header {
  height: var(--header-h); display:flex; align-items:center; gap:16px;
  padding: 0 24px; background: var(--surface); border-bottom:1px solid var(--border);
  position: sticky; top:0; z-index: 20;
}
.header .search { flex:1; max-width:420px; position:relative; }
.header .search input { width:100%; }
.header .spacer { flex:1; }
.icon-btn { width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--text-muted); }
.icon-btn:hover { background: var(--surface-2); }
.user { display:flex; align-items:center; gap:10px; cursor:pointer; }
.avatar { width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px; }
.hamburger { display:none; }

.content { padding: 24px; max-width: 1900px; width:100%; }

/* Page header */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 20px; flex-wrap:wrap; }
.page-head .title h1 { font-size:22px; }
.page-head .title p { margin:4px 0 0; color:var(--text-muted); font-size:13px; }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ============================ Buttons ============================ */
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:10px; border:1px solid transparent;
  font: inherit; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; transition:.12s; line-height:1; }
.btn .ic { width:16px;height:16px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-600); }
.btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-danger { background:var(--danger-bg); color:var(--danger); }
.btn-danger:hover { filter:brightness(.97); }
.btn-sm { padding:6px 11px; font-size:12px; border-radius:8px; }

/* ============================ Cards / stats ============================ */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-pad { padding:18px 20px; }
.grid { display:grid; gap:var(--gap); }
.stats { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--gap); }
.stat { padding:18px 20px; }
.stat .label { color:var(--text-muted); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.stat .value { font-size:26px; font-weight:750; margin-top:8px; }
.stat .trend { font-size:12.5px; margin-top:6px; color:var(--success); }
.stat .trend.down { color:var(--danger); }
.stat .ic-badge { width:40px;height:40px;border-radius:10px;background:var(--accent-50);color:var(--accent);display:grid;place-items:center;float:right; }

/* ============================ Toolbar / filters ============================ */
.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--border); }
.toolbar .grow { flex:1; min-width:180px; }
.field { position:relative; }
input:not([type]), input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=date], input[type=tel], select, textarea {
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface);
  color:var(--text); font:inherit; font-size:13.5px; outline:none; transition:.12s;
}
select { appearance:none; padding-right:34px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7385' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.search .ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px;height:16px;color:var(--text-muted); }
.search input { padding-left:36px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border:1px solid var(--border); border-radius:20px; font-size:12.5px; color:var(--text-muted); background:var(--surface); cursor:pointer; }
.chip.active { background:var(--accent-50); border-color:var(--accent); color:var(--accent); }

/* ============================ Data table (responsive) ============================ */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:13.5px; }
table.data th { text-align:left; padding:12px 16px; color:var(--text-muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2); position:sticky; top:0; }
table.data th.sortable { cursor:pointer; }
table.data th.sortable::after { content:"↕"; opacity:.4; margin-left:6px; font-size:11px; }
table.data th.sort-asc::after { content:"↑"; opacity:1; color:var(--accent); }
table.data td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data tbody tr:hover { background:var(--surface-2); }
table.data tbody tr:last-child td { border-bottom:0; }
/* money/amount columns */
table.data th.num, table.data td.num { text-align:right; }
.cell-strong { font-weight:650; color:var(--text); }
.mono { font-variant-numeric: tabular-nums; }
.muted { color:var(--text-muted); }
/* Must stay a real table-cell (no flex on the td itself): a flex td opts out
   of table layout, so its bottom border no longer follows the row height when
   another cell wraps to multiple lines. */
td.row-actions { text-align:right; white-space:nowrap; }
td.row-actions .btn-icon { vertical-align:middle; margin-left:3px; }
/* icon-only row action buttons (label stays as tooltip/aria-label) */
.btn-icon { width:30px; height:30px; padding:0; display:inline-grid; place-items:center; border-radius:8px; }
.btn-icon svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.t-hide-label { display:none; }

/* Money / status pills */
.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.pill.ok { background:var(--success-bg); color:var(--success); }
.pill.warn { background:var(--warning-bg); color:var(--warning); }
.pill.dang { background:var(--danger-bg); color:var(--danger); }
.pill.info { background:var(--info-bg); color:var(--info); }
.pill.neutral { background:var(--surface-2); color:var(--text-muted); }
.money { font-variant-numeric:tabular-nums; font-weight:650; }
.money.neg { color:var(--danger); }

/* Pagination */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; flex-wrap:wrap; }
.pager .pages { display:flex; gap:6px; align-items:center; }
.pager .pages a { min-width:34px; height:34px; padding:0 8px; display:grid; place-items:center; border:1px solid var(--border); border-radius:8px; color:var(--text); font-weight:600; }
.pager .pages a.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.pager .pages a:hover:not(.active) { background:var(--surface-2); }
.pager .meta { color:var(--text-muted); font-size:13px; }

/* ============================ Forms ============================ */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px 22px; }
.form-section { margin-bottom:6px; }
.form-section > h3 { font-size:14px; margin-bottom:2px; }
.form-section > p { color:var(--text-muted); font-size:12.5px; margin:2px 0 0; }
label.lbl { display:block; font-weight:600; font-size:13px; margin-bottom:7px; }
label.lbl .req { color:var(--danger); }
.help { color:var(--text-muted); font-size:12px; margin-top:6px; }
.help.error { color:var(--danger); }
.col-2 { grid-column: span 2; }
.form-actions { display:flex; gap:10px; padding-top:4px; }
.date-widget { display:flex; gap:8px; }
.date-widget select { width:auto; }
.form-foot { display:flex; justify-content:flex-end; gap:10px; padding-top:6px; }
.switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input { display:none; }
.switch .track { width:42px;height:24px;border-radius:20px;background:var(--border);position:relative;transition:.15s; }
.switch .track::after { content:""; position:absolute; width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .track { background:var(--accent); }
.switch input:checked + .track::after { left:21px; }

/* section splitter inside cards */
.card-sec { padding:20px; border-bottom:1px solid var(--border); }
.card-sec:last-child { border-bottom:0; }

/* accent swatches (settings personalization, from mockup2 settings.html) */
.swatches { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.sw-opt { cursor:pointer; display:inline-flex; }
.sw-opt input { display:none; }
.sw { width:28px; height:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border); }
.sw-opt input:checked + .sw, .sw.on { outline:2px solid var(--accent); outline-offset:2px; }
#brandSwatches .sw { cursor:pointer; }

/* personalization page: logo drop zone + portal live preview (mockup2 settings.html) */
.logo-drop { display:flex; align-items:center; gap:16px; }
.logo-drop .prev { width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--border); display:grid; place-items:center; overflow:hidden; font-weight:800; color:var(--text-muted); }
.logo-drop .prev img { max-width:100%; max-height:100%; }
.dz { flex:1; border:1.5px dashed var(--border); border-radius:12px; padding:14px 16px; color:var(--text-muted); font-size:13px; text-align:center; cursor:pointer; }
.dz:hover { border-color:var(--accent); color:var(--accent); }
.pv { --pv:#006bb3; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface-2); }
.pv-top { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
.pv-top .pmenu { color:var(--text-muted); font-size:13px; font-weight:600; }
.pv-top .spacer { flex:1; }
.pv-brand { display:flex; align-items:center; gap:8px; font-weight:800; color:var(--pv); }
.pv-brand .pmark { width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid var(--border); display:grid; place-items:center; overflow:hidden; font-size:12px; color:var(--pv); }
.pv-brand .pmark img { max-width:100%; max-height:100%; }
.pv-body { padding:18px; }
.pv-hello { font-weight:750; font-size:16px; margin-bottom:8px; }
.pv-credit { display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--pv) 10%, transparent); color:var(--pv); border-radius:10px; padding:8px 14px; font-weight:750; }
.pv-btn { display:inline-block; margin-top:14px; background:var(--pv); color:#fff; border-radius:9px; padding:9px 16px; font-weight:650; font-size:13px; }

/* ============================ Login ============================ */
.auth { min-height:100vh; display:grid; place-items:center; padding:24px;
  background: radial-gradient(1200px 500px at 50% -10%, var(--accent-50), transparent), var(--bg); }
.auth .box { width:100%; max-width:380px; }
.auth .brand { justify-content:center; border:0; height:auto; padding:0 0 22px; }
.auth .card { padding:28px; }
.auth h1 { font-size:20px; text-align:center; margin-bottom:4px; }
.auth .sub { text-align:center; color:var(--text-muted); font-size:13px; margin-bottom:22px; }
.auth label.lbl { margin-top:14px; }
.auth .form-error { background:var(--danger-bg); color:var(--danger); padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:6px; }
.auth .form-success { background:var(--success-bg); color:var(--success); padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:6px; }
.auth .links { text-align:center; margin-top:18px; font-size:13px; display:grid; gap:6px; }
.auth .remember { display:flex; gap:8px; align-items:center; margin-top:14px; font-size:13.5px; font-weight:500; cursor:pointer; }
.auth .remember input { width:auto; accent-color:var(--accent); }
.btn-block { width:100%; justify-content:center; }
.auth .btn-block { margin-top:18px; }
.btn-lg { padding:12px 22px; font-size:15px; }

/* ============================ Responsive ============================ */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:.2s; width:280px; box-shadow:var(--shadow-lg); }
  .sidebar.open { transform:none; }
  .hamburger { display:grid; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .col-2 { grid-column: span 1; }
  .content { padding:16px; }
  .scrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55; }
  .scrim.show { display:block; }

  /* --- data table becomes stacked cards --- */
  table.data thead { display:none; }
  table.data, table.data tbody, table.data tr, table.data td { display:block; width:100%; }
  table.data tr { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; padding:6px 4px; box-shadow:var(--shadow); }
  table.data td { border:0; padding:9px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  table.data td .t-hide-label { display:block; color:var(--text-muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
  table.data td[data-label]::before { content:attr(data-label); color:var(--text-muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
  table.data td.row-actions { justify-content:flex-start; flex-wrap:wrap; gap:6px; white-space:normal; padding-top:12px; }
  table.data td.row-actions .btn-icon { margin-left:0; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .header .search { display:none; }
  .page-actions .btn span { display:none; }
}

/* Device-frame preview (mockup gallery only) */
.frame-phone { width:390px; max-width:100%; height:760px; border:10px solid #10151d; border-radius:36px; overflow:hidden; box-shadow:var(--shadow-lg); background:#000; }
.frame-phone iframe, .frame-desktop iframe { width:100%; height:100%; border:0; }
.frame-desktop { width:100%; height:720px; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface); }

/* ============================================================================
   Public landing page (airchip.de replacement) — same tokens, marketing layout
   ========================================================================= */
.lp { max-width:1180px; margin:0 auto; padding:0 24px; }
.lp-nav { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.lp-nav .in { display:flex; align-items:center; gap:20px; height:66px; }
.lp-nav .links { display:flex; gap:22px; margin-left:18px; }
.lp-nav .links a { color:var(--text); font-weight:550; font-size:14px; }
.lp-nav .links a:hover { color:var(--accent); }
.lp-nav .cta { margin-left:auto; display:flex; gap:10px; align-items:center; }
.lp-hero { padding:72px 0 56px; text-align:center; background:radial-gradient(900px 420px at 50% -10%, var(--accent-50), transparent); }
.lp-hero h1 { font-size:clamp(30px,5vw,52px); line-height:1.08; letter-spacing:-.5px; max-width:820px; margin:0 auto; }
.lp-hero p { font-size:clamp(16px,2.2vw,20px); color:var(--text-muted); max-width:640px; margin:18px auto 26px; }
.lp-hero .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.lp-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:20px; background:var(--accent-50); color:var(--accent); font-weight:650; font-size:13px; margin-bottom:20px; }
.lp-sec { padding:56px 0; }
.lp-sec.alt { background:var(--surface-2); border-block:1px solid var(--border); }
.lp-h2 { font-size:clamp(24px,3.5vw,34px); text-align:center; letter-spacing:-.3px; }
.lp-sub { text-align:center; color:var(--text-muted); max-width:620px; margin:12px auto 36px; }
.lp-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lp-feature .ic-badge { width:46px;height:46px;border-radius:12px;background:var(--accent-50);color:var(--accent);display:grid;place-items:center;font-size:22px;margin-bottom:12px; }
.lp-feature h3 { font-size:17px; margin-bottom:6px; }
.lp-feature p { color:var(--text-muted); font-size:14px; margin:0; }
.lp-split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.lp-op { background:linear-gradient(135deg,var(--accent),var(--accent-600)); color:#fff; border-radius:var(--radius); padding:40px; }
.lp-op h2 { font-size:30px; margin-bottom:12px; }
.lp-op ul { padding-left:18px; margin:16px 0; line-height:1.9; opacity:.95; }
.lp-station { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); margin-bottom:10px; }
.lp-foot { border-top:1px solid var(--border); padding:36px 0; color:var(--text-muted); font-size:13px; }
@media(max-width:820px){ .lp-grid3{grid-template-columns:1fr} .lp-split{grid-template-columns:1fr} .lp-nav .links{display:none} }

/* Responsive multi-column helpers (collapse to 1 col on small screens) */
.cols-2   { display:grid; gap:var(--gap); grid-template-columns:1fr 1fr; }
.cols-main{ display:grid; gap:var(--gap); grid-template-columns:2fr 1fr; }
@media(max-width:820px){ .cols-2, .cols-main { grid-template-columns:1fr; } }

/* Landing nav: keep Anmelden/Registrieren inside the viewport on phones */
@media(max-width:560px){
  .lp-nav .cta .icon-btn { display:none; }         /* hide theme toggle on small screens */
  .lp-nav .in { gap:8px; height:58px; }
  .lp-nav .cta { gap:6px; }
  .lp-nav .cta .btn { padding:8px 12px; font-size:12.5px; }
  .lp .in .brand b { font-size:15px; }
}

/* Landing 4-step grid (responsive; replaces an inline 4-col that overflowed on phones) */
.lp-grid4 { display:grid; gap:20px; grid-template-columns:repeat(4,1fr); }
@media(max-width:820px){ .lp-grid4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .lp-grid4{ grid-template-columns:1fr; } }

/* --- mockups2/airchip: SVG icons in shell + brand logo image --- */
.nav a .ic svg, .search .ic svg, .header .ic svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ic-badge svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.btn .ic svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.brand img.logo-img { width:30px; height:30px; border-radius:8px; object-fit:contain; background:#fff; }

/* ---- Customer portal (PLAN_04 phase 6) ---------------------------------- */
.lp-station { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); margin-bottom:10px; }
.portal-credit-card { background:linear-gradient(135deg,var(--accent),var(--accent-600)); color:#fff; }
.portal-credit-card .label { opacity:.85; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.portal-credit-card .amount { font-size:40px; font-weight:800; margin:8px 0 2px; }
.portal-credit-card .meta { opacity:.85; font-size:13px; }
.portal-credit-card .actions { margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.portal-credit-card .btn-light { background:#fff; color:var(--accent-600); }
.portal-credit-card .btn-dark { background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.35); }
.btn-paypal { background:#ffc439; color:#003087; font-weight:800; padding:12px 26px; }
.btn-paypal .pp { color:#0070ba; }
.chip-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.portal-preview-pill { white-space:nowrap; }
.field-label { font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
.header select.portal-station-select { max-width:280px; min-width:0; flex:0 1 auto; }
.header .portal-station-label { white-space:nowrap; }
@media (max-width:760px) {
  .portal-preview-pill { display:none; }
  .header .portal-station-label { display:none; }
  .header select.portal-station-select { max-width:150px; }
  body[data-role="portal"] .header .user > .muted { display:none; }
  body[data-role="portal"] .header .user > .btn { display:none; }
}