/* Components: prototype direction-B refinements layered on base.css.
   Loaded after base.css (and after admin.css where the admin layout
   includes it; partner layout loads base + components only).
   ASCII-only comments. */

/* Base .page-header layout lives in admin.css which partner/layout.html does
   NOT load -> partner pages had no flex/spacing. components.css is loaded by
   both, so the base rule belongs here (safe, CSS-only). */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.page-header .actions { display: flex; gap: var(--space-2); }

/* Page header title: larger, tighter per prototype .page-head */
.page-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

/* Card / table-wrap: rounded 14px. Dense tables (more columns than the
   prototype) scroll horizontally instead of wrapping or clipping data. */
.card { box-shadow: var(--shadow-sm); }
.card.card-flush { overflow-x: auto; border-radius: var(--radius-md); }
.card.card-flush .table { margin: 0; }

/* Table cells a touch roomier (prototype td 14px 16px) */
.table th, .table td { padding: 14px 16px; }

/* Badge: soft fill, colored dot, no hard border (prototype .badge.ok/.warn) */
.badge { border-color: transparent; }
.badge .dot { width: 6px; height: 6px; }

/* KPI: subtle lift on hover (prototype .kpi:hover) */
.kpi-card { transition: transform var(--transition), box-shadow var(--transition); }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ---------- Reports page: reworked prototype port (presentation only) ----------
   Data is real (Report.total_clicks/total_orders/total_order_sum/total_payout);
   CPC/CR are display math; period totals are display aggregation. ASCII only. */

.rep-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-6);
}
.rep-toolbar .spacer { flex: 1; }
.rep-meta { font-size: var(--fs-sm); color: var(--color-text-subtle); white-space: nowrap; }
.rep-meta b { color: var(--color-text-muted); font-weight: var(--fw-semibold); }

/* KPI: icon chip, value-first, metric name, quiet caption */
.kpi-ic {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); margin-bottom: var(--space-3);
}
.kpi-ic svg { width: 20px; height: 20px; color: var(--color-primary); }
.kpi-ic.is-green { background: var(--color-success-soft); }
.kpi-ic.is-green svg { color: var(--color-success); }
.kpi-ic.is-amber { background: var(--color-warning-soft); }
.kpi-ic.is-amber svg { color: var(--color-warning); }
.kpi-card .kpi-value { margin-top: var(--space-2); }
.kpi-name { font-size: var(--fs-sm); color: var(--color-text-muted);
  font-weight: var(--fw-medium); margin-top: var(--space-3); }
.kpi-cap { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-top: 2px; }

/* Secondary metric strip (CR + UTM sum) - not a KPI card */
.rep-secondary {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  margin: 0 0 var(--space-5); padding: 0 2px;
  font-size: var(--fs-sm); color: var(--color-text-muted);
}
.rep-secondary b { color: var(--color-text); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; }
.rep-secondary .vsep { width: 1px; height: 14px; background: var(--color-border); }

/* Source cell: entity name + quiet import filename */
.src-name { font-weight: var(--fw-medium); }
.src-file { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-top: 2px; }

/* Period selector: real GET filter, styled as a pill (matches prototype) */
.period-select {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center;
  padding: 9px 38px 9px 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text); cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.period-select:hover { border-color: var(--color-text-subtle); }
.period-select:focus-visible {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* Product detail page (R1.5) - page-scoped, no global blast */
.product-photo {
  width: 120px; height: 120px; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-surface-alt); margin-bottom: var(--space-3);
}
.product-sep {
  border: 0; border-top: 1px solid var(--color-border-soft);
  margin: var(--space-4) 0;
}

/* Partner product detail - port of design/prototypes/partner-product.html
   (R1.5). Page-scoped component names, no bare global selectors. ASCII. */
.pd-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.pd-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  /* Soft premium backdrop so any photo ratio reads as a product card */
  background:
    radial-gradient(120% 120% at 30% 20%, #ffffff 0%, var(--color-surface-alt) 70%);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  overflow: hidden;
  color: var(--color-text-subtle);
}
/* contain: square / portrait / landscape all fit fully, no crop, no stretch */
.pd-photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}

/* Hero identity: strong product name + quiet meta + soft status.
   page-scoped, loaded for admin+partner but only used on product detail. */
.pd-main { min-width: 0; }
/* Full-width product header (prototype .page-head). Left-aligned, not the
   space-between admin .page-header layout. */
.pd-head { display: block; margin-bottom: var(--space-6); }
.pd-name {
  font-size: 22px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.pd-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.pd-art {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.pd-art code {
  font-family: var(--font-mono);
  color: var(--color-text);
  background: var(--color-surface-alt);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
/* Softer status pill: only size/weight refinement. Color stays from the
   badge-success / badge-warning / badge-danger / badge-default class so the
   same .pd-status works on partner (green) and admin (any state). */
.pd-status {
  font-weight: var(--fw-medium);
  padding: 5px 12px;
}
.pd-status .dot { opacity: 0.85; }

.linkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: var(--space-3) 0;
}
.linkbox svg { flex-shrink: 0; color: var(--color-text-muted); }
.linkbox input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text);
  padding: 0;
  outline: none;
}

/* Admin product detail - port of design/prototypes/admin-product-detail.html
   (Priority 2). Overview cards + tabs + quick actions; edit form preserved
   below. Page-scoped names, ASCII only. */
.pd-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}
.pd-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
a.pd-tab:hover { color: var(--color-text); }
.pd-tab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
/* Reusable tab counter pill, visually bound to the tab label */
.pd-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  border: 0;
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.35);
}
.pd-tab.active .pd-tab-count {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
}

/* Key/value characteristic rows (prototype .pd-row) */
.pd-rows { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--fs-md);
}
.pd-row:last-child { border-bottom: 0; }
.pd-row .k { color: var(--color-text-muted); }
.pd-row .v { font-weight: var(--fw-medium); text-align: right; }
.pd-row .v code {
  font-family: var(--font-mono);
  background: var(--color-surface-alt);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

/* Quick actions card (prototype right rail) */
.pd-actions { margin-top: var(--space-4); padding: var(--space-5); }
.pd-actions-title {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.pd-actions .btn { width: 100%; justify-content: center; margin-bottom: var(--space-2); }
.pd-actions .btn:last-child { margin-bottom: 0; }

/* Quick-actions: forms behave like the link buttons (full width, spaced) */
.pd-actions form { width: 100%; margin: 0 0 var(--space-2); }
.pd-actions form .btn { margin-bottom: 0; }
.pd-actions .btn { gap: var(--space-2); }
.pd-actions .btn svg { flex-shrink: 0; }

/* Soft accent treatment for the quick-actions card */
.pd-actions--accent {
  background:
    linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-surface) 64%);
  border-color: #d9dcff;
}
.pd-actions--accent .pd-actions-title {
  color: var(--color-primary-hover);
  font-weight: var(--fw-semibold);
}
.pd-actions--accent .btn {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.pd-actions--accent .btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

/* Secondary "service editing" - collapsible, visually quiet */
.pd-srv { margin-top: var(--space-5); padding: 0; }
.pd-srv > .card-body { padding-top: var(--space-4); }
.pd-srv-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pd-srv-summary::-webkit-details-marker { display: none; }
.pd-srv-summary { position: relative; }
/* chevron toggle (no text -> CSS stays ASCII-only) */
.pd-srv-summary::after {
  content: "";
  position: absolute;
  right: var(--space-6);
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.15s ease;
}
.pd-srv[open] .pd-srv-summary::after {
  transform: translateY(-35%) rotate(-135deg);
}
.pd-srv-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.pd-srv-hint { font-size: var(--fs-sm); color: var(--color-text-muted); }
.pd-srv[open] .pd-srv-summary { border-bottom: 1px solid var(--color-border-soft); }

/* Danger zone: one calm dedicated block, never floating */
.pd-danger { margin-top: var(--space-5); border-color: #f1c5c5; }
.pd-danger-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  flex-wrap: wrap;
}
.pd-danger-title { font-weight: var(--fw-semibold); color: var(--color-danger-text); }

/* Admin products list: calmer reports-style identity cell + tidy toolbar.
   ASCII only, page-safe (scoped classes). */
.table tr.is-archived { opacity: 0.55; }
.thumb-empty {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
}
.src-file code {
  font-family: var(--font-mono);
  background: var(--color-surface-alt);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}
/* Keep every toolbar control on one calm baseline (no drifting buttons) */
.rep-toolbar form { display: inline-flex; margin: 0; }
.rep-toolbar > * { vertical-align: middle; }

/* Partner detail: payout-methods as a tidy section + calm advanced UTM */
.pay-card { margin-top: var(--space-5); }
.pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.pay-method {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  min-width: 200px;
  margin: 0;
}
.pay-method input { margin: 0; }
.adv-utm {
  margin-top: var(--space-5);
  border-color: #fde68a;
  background: var(--color-warning-soft);
}
.adv-utm-summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  color: var(--color-warning-text);
  list-style: none;
}
.adv-utm-summary::-webkit-details-marker { display: none; }
.adv-utm-body { border-top: 1px solid #fde68a; }
.adv-utm-body, .adv-utm-body p { color: var(--color-warning-text); }
.input-wide { max-width: 320px; }

/* Partner balance pill (topbar right). Read-only display of "available";
   value comes from request.state (same source as the Finance page). */
.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-success-soft);
  color: var(--color-success-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.balance-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-success); flex-shrink: 0;
}

/* ---------- Login / auth screen (branded SaaS) ---------- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background:
    radial-gradient(900px 500px at 12% 10%, #eef0ff 0%, transparent 60%),
    radial-gradient(800px 600px at 95% 90%, #f3e8ff 0%, transparent 55%),
    var(--color-bg, #f7f8fa);
}
.auth-grid {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 20px 60px rgba(16, 18, 27, 0.12);
  overflow: hidden;
}
.auth-hero {
  background: linear-gradient(160deg, #161922 0%, #1d2230 60%, #262b3d 100%);
  color: #fff;
  padding: var(--space-8, 48px) var(--space-7, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
}
.auth-logo { display: flex; align-items: center; gap: var(--space-3); }
.auth-logo-mark {
  width: 38px; height: 38px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.auth-logo-text { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.auth-hero-lead {
  margin-top: var(--space-5);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.auth-features { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3); }
.auth-features li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.85);
}
.auth-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #818cf8, #c4b5fd);
}
.auth-hero-foot {
  font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}
.auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8, 48px) var(--space-7, 32px);
}
.auth-card { width: 100%; max-width: 360px; }
.auth-card-head { margin-bottom: var(--space-5); }
.auth-card-head h1 {
  font-size: 24px; font-weight: var(--fw-semibold);
  letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
.auth-submit { width: 100%; justify-content: center; margin-top: var(--space-2); }
.auth-note {
  margin-top: var(--space-5);
  font-size: var(--fs-xs); color: var(--color-text-subtle);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .auth-grid { grid-template-columns: 1fr; max-width: 420px; }
  .auth-hero { display: none; }
  .auth-panel { padding: var(--space-7, 32px) var(--space-6); }
}

/* Promotion stickers - branded soft capsules (5 types). ASCII-only. */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sticker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0; opacity: 0.85;
}
.sticker--sm { margin-left: var(--space-2); padding: 1px 9px; vertical-align: middle; }

/* priority -> amber */
.sticker--priority  { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
/* recommend -> indigo */
.sticker--recommend { color: #4338ca; background: #eef0ff; border-color: #c7d2fe; }
/* new -> green */
.sticker--new       { color: #15803d; background: #ecfdf3; border-color: #bbf7d0; }
/* hit -> violet */
.sticker--hit       { color: #6d28d9; background: #f5f0ff; border-color: #ddd4fb; }
/* sale -> rose */
.sticker--sale      { color: #be123c; background: #fff1f3; border-color: #fecdd3; }

/* Admin promotion control block (toggle + sticker select + rank) */
.promo-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-5);
  margin: var(--space-4) 0;
}
.promo-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4);
}
.promo-title { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.promo-sub {
  font-size: var(--fs-sm); color: var(--color-text-muted);
  margin-top: 2px; max-width: 520px;
}
.promo-body { margin-top: var(--space-4); }
.promo-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.promo-preview {
  margin-top: var(--space-3);
  font-size: var(--fs-sm); color: var(--color-text-muted);
  display: flex; align-items: center; gap: var(--space-2);
}

/* Analytics: period-first toolbar + honest no-data + formula card.
   ASCII only, page-scoped. */
.an-period {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.an-period .spacer { flex: 1; }
.an-period-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.an-period-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}
.an-period-dash { color: var(--color-text-subtle); }
.an-period-now {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.an-cache {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.an-cache.is-fresh { background: var(--color-success-soft); color: var(--color-success-text); }
.an-cache.is-cache { background: var(--color-surface-alt); color: var(--color-text-muted); }
.an-nodata { color: var(--color-text-subtle); font-weight: var(--fw-medium); }
.an-formula { margin-top: var(--space-5); }

/* Collapsible "what to know" notes - hideable, calm (not a loud alert) */
.an-warn {
  margin-bottom: var(--space-5);
  background: var(--color-warning-soft);
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
}
.an-warn > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-warning-text);
}
.an-warn > summary { position: relative; }
.an-warn > summary::-webkit-details-marker { display: none; }
.an-warn > summary::after {
  content: "";
  position: absolute;
  right: var(--space-5);
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-warning-text);
  border-bottom: 2px solid var(--color-warning-text);
  transform: translateY(-65%) rotate(45deg);
}
.an-warn[open] > summary::after { transform: translateY(-35%) rotate(-135deg); }
.an-warn .list-tight {
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-6) 0 var(--space-7);
  color: var(--color-warning-text);
  font-size: var(--fs-sm);
}

/* SKU analytics table: compact + aligned so columns don't drift / overflow */
.an-sku-table th,
.an-sku-table td {
  padding: 10px 12px;
  font-size: var(--fs-sm);
  vertical-align: middle;
}
.an-sku-table .num { white-space: nowrap; }
.an-sku-table .an-sku-name { min-width: 200px; }
.an-sku-table .src-name { line-height: 1.3; }
.an-sku-table thead th { white-space: nowrap; }

/* Row action buttons: equal height, consistent gap, right-aligned */
.row-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.row-actions .btn { white-space: nowrap; }
/* Toolbar right cluster reads as one tidy action group */
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.toolbar-actions form { display: inline-flex; margin: 0; }

/* Product partners matrix: tidy info card + aligned controls.
   Switch markup/classes untouched (UX tests depend on them). */
.info-card { background: var(--color-primary-soft); border-color: #c7d2fe;
  margin-bottom: var(--space-4); }
.info-card, .info-card p { color: #312e81; }
.info-card .t-sub { color: #4338ca; font-size: var(--fs-sm); }
.th-center { text-align: center; }
.input-mid { max-width: 200px; }
.src-name .badge-vip { margin-left: var(--space-2); }

/* Creatives list + upload: even thumbnails, aligned action cluster,
   pretty native file picker. ASCII only, page-scoped. */
.cr-col-prev { width: 96px; }
.cr-thumb {
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.cr-thumb-empty {
  background: linear-gradient(135deg, var(--color-surface-alt) 0%, #e2e8f0 100%);
  color: var(--color-text-muted);
}
.cr-thumb-empty small { font-size: 10px; letter-spacing: 0.5px; }
.cr-warn { font-size: var(--fs-sm); color: var(--color-warning-text); margin-top: 2px; }
.cr-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.cr-actions form { display: inline-flex; margin: 0; }

/* Pretty native file input (no JS, no backend) */
.file-input { padding: 0; overflow: hidden; }
.file-input::file-selector-button {
  border: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--fw-medium);
  padding: 10px 16px;
  margin-right: var(--space-4);
  cursor: pointer;
  border-right: 1px solid var(--color-border);
  transition: background var(--transition);
}
.file-input::file-selector-button:hover { background: var(--color-border-soft); }
.input-narrow { max-width: 120px; }
.input-search { max-width: 340px; }

/* Soft note / reminder side card */
.note-card { background: var(--color-warning-soft); border-color: #fde68a; }
.note-card, .note-card p { color: var(--color-warning-text); }
.note-card-title { color: var(--color-warning-text); }

/* Partner detail matrix: compact photo + wide link in one aligned row,
   creatives full-width below. One closed designed block. */
/* ONE fixed row height for both blocks -> pixel-identical, no auto guessing */
.pd-top {
  --pd-row-h: 210px;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}
.pd-photo--compact {
  aspect-ratio: auto;
  height: var(--pd-row-h);
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
}
.pd-photo--compact img {
  position: absolute;
  inset: var(--space-4);
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--space-4));
  max-height: calc(100% - 2 * var(--space-4));
  margin: auto;
  object-fit: contain;
}
/* Link card: exact same fixed height, content vertically centered, clipped */
.pd-linkcard {
  display: block;
  height: var(--pd-row-h);
  overflow: hidden;
}
.pd-linkcard .card-body {
  width: 100%;
  height: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pd-linkcard .card-title { margin-bottom: var(--space-1); }
.pd-linkcard .form-help { margin: var(--space-2) 0 0; }
.pd-linkcard .linkbox { margin: var(--space-3) 0 0; }
.pd-creatives { display: block; }

@media (max-width: 860px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-photo { max-width: 320px; }
  .pd-top { grid-template-columns: 1fr; }
  .pd-photo--compact { max-width: 200px; }
}