/* ───────────────────────────────────────────────────────────────
   subs.ryangrant.info — application stylesheet
   Hand-rolled (no Tailwind build step). Tokens from DESIGN_SYSTEM.md.
   ─────────────────────────────────────────────────────────────── */

/* ── Self-hosted fonts ─────────────────────────────────────────── */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces.woff2") format("woff2-variations"),
       url("/assets/fonts/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2-variations"),
       url("/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --rose-50:#FBF1F0;--rose-100:#F5DEDC;--rose-200:#EBC0BD;--rose-300:#DDA09C;--rose-400:#CC807B;
  --rose-500:#B86861;--rose-600:#9C544E;--rose-700:#7E433E;--rose-800:#5C322E;--rose-900:#3C201E;
  --sage-50:#F1F4EE;--sage-100:#DDE5D5;--sage-200:#C0CDB2;--sage-300:#A1B58D;--sage-400:#849C70;
  --sage-500:#6B8458;--sage-600:#566C47;--sage-700:#445637;--sage-800:#323F28;--sage-900:#212A1A;
  --fog-50:#EFF2F5;--fog-100:#D8DFE6;--fog-200:#B7C3CF;--fog-300:#94A4B5;--fog-400:#75879B;
  --fog-500:#5C6E83;--fog-600:#495869;--fog-700:#3A4753;--fog-800:#2B343D;--fog-900:#1C2228;
  --apricot-50:#FBF2EA;--apricot-100:#F5DFC9;--apricot-200:#ECC59C;--apricot-300:#E0A871;--apricot-400:#D18C4B;
  --apricot-500:#BD7434;--apricot-600:#9D5E2A;--apricot-700:#7C4922;--apricot-800:#5A361A;--apricot-900:#3B2412;
  --plum-50:#F4F0F4;--plum-100:#E4DBE5;--plum-200:#CBBACD;--plum-300:#AE96B2;--plum-400:#917497;
  --plum-500:#765A7D;--plum-600:#5F4865;--plum-700:#4B384F;--plum-800:#372839;--plum-900:#231A25;
  --clay-50:#FAEEEC;--clay-100:#F2D5D0;--clay-200:#E5AFA6;--clay-300:#D4877B;--clay-400:#C26352;
  --clay-500:#A94B3A;--clay-600:#8C3C2E;--clay-700:#6E2F25;--clay-800:#4F221B;--clay-900:#321611;
  --linen-0:#FFFCF7;--linen-50:#F8F4ED;--linen-100:#EFE9DD;--linen-200:#DDD5C5;--linen-300:#BBB1A0;
  --linen-400:#928876;--linen-500:#6E6657;--linen-600:#524C3F;--linen-700:#3A352B;--linen-800:#26221B;
  --linen-850:#1E1A14;--linen-900:#16130E;--linen-950:#0E0C09;

  --color-primary:var(--rose-500);
  --color-primary-hover:var(--rose-600);
  --color-accent:var(--plum-500);
  --color-success:var(--sage-500);
  --color-warning:var(--apricot-500);
  --color-danger:var(--clay-500);
  --color-info:var(--fog-500);

  --surface-base:var(--linen-900);
  --surface-glass:rgba(40,34,26,0.55);
  --surface-raised:rgba(50,42,32,0.78);
  --surface-subtle:rgba(40,34,26,0.35);

  --text-primary:var(--linen-50);
  --text-secondary:var(--linen-200);
  --text-muted:var(--linen-400);
  --text-inverse:var(--linen-900);

  --border-soft:rgba(255,252,247,0.08);
  --border-medium:rgba(255,252,247,0.10);
  --border-strong:rgba(255,252,247,0.16);

  --focus-ring:rgba(204,128,123,0.65);
  --focus-ring-soft:rgba(204,128,123,0.18);

  --font-serif:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",monospace;

  --radius-xs:6px;--radius-sm:10px;--radius:14px;--radius-md:18px;--radius-lg:20px;
  --radius-xl:24px;--radius-2xl:32px;--radius-card:20px;--radius-full:9999px;

  --shadow-glass:0 1px 0 0 rgba(255,252,247,0.06) inset, 0 8px 24px -8px rgba(0,0,0,0.45), 0 24px 48px -16px rgba(0,0,0,0.30);
  --shadow-raised:0 1px 0 0 rgba(255,252,247,0.08) inset, 0 16px 40px -8px rgba(0,0,0,0.55), 0 40px 80px -20px rgba(0,0,0,0.45);
  --shadow-subtle:0 1px 0 0 rgba(255,252,247,0.04) inset;
  --shadow-btn-primary:0 1px 0 0 rgba(255,252,247,0.20) inset, 0 8px 20px -6px rgba(184,104,97,0.45);
  --shadow-btn-primary-hover:0 1px 0 0 rgba(255,252,247,0.20) inset, 0 12px 28px -6px rgba(184,104,97,0.55);

  --duration-fast:150ms;--duration-base:250ms;--duration-medium:400ms;--duration-slow:600ms;
  --ease-out-soft:cubic-bezier(0.22,0.61,0.36,1);
  --ease-in-soft:cubic-bezier(0.55,0,0.85,0.4);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-glide:cubic-bezier(0.65,0,0.35,1);

  --container-max:72rem;
  --content-max:42rem;
  --safe-top:max(0.75rem, env(safe-area-inset-top));
  --safe-bottom:max(0.75rem, env(safe-area-inset-bottom));
}

/* ── Reset & body ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.55;
  color:var(--text-primary);
  background:var(--surface-base);
  min-height:100svh;
  position:relative;
  overflow-x:hidden;
  font-feature-settings:"ss01","ss03","cv11","tnum" 0;
}

/* The painted aurora — soft, layered radial gradients behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 12% 10%, rgba(184,104,97,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 22%, rgba(118,90,125,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 78% 88%, rgba(107,132,88,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 18% 92%, rgba(189,116,52,0.12) 0%, transparent 65%),
    linear-gradient(180deg, var(--linen-900) 0%, var(--linen-950) 100%);
}

img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--rose-300);text-decoration:none;transition:color var(--duration-fast)}
a:hover{color:var(--rose-200)}

/* ── Typography ─────────────────────────────────────────────────── */
.font-serif{font-family:var(--font-serif)}
.font-sans{font-family:var(--font-sans)}
.font-mono{font-family:var(--font-mono)}
.tabular{font-variant-numeric:tabular-nums}

h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:var(--font-serif);font-weight:500;color:var(--text-primary);letter-spacing:-0.01em;line-height:1.15;font-variation-settings:"opsz" 144,"SOFT" 50}
h1,.h1{font-size:1.875rem;line-height:1.10;letter-spacing:-0.015em}
h2,.h2{font-size:1.5rem}
h3,.h3{font-size:1.25rem}
.display{font-family:var(--font-serif);font-weight:500;font-size:2.25rem;line-height:1.05;letter-spacing:-0.02em;text-wrap:balance;font-variation-settings:"opsz" 144,"SOFT" 80}
.subtitle{font-size:1.0625rem;color:var(--text-secondary);line-height:1.4;letter-spacing:-0.005em}
.caption{font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted)}
.small{font-size:0.8125rem;letter-spacing:0.01em}
.muted{color:var(--text-muted)}
.dim{color:var(--text-secondary)}

/* ── Glass surfaces ─────────────────────────────────────────────── */
.glass{
  background-color:var(--surface-glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border-medium);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glass);
}
.glass-raised{
  background-color:var(--surface-raised);
  backdrop-filter:blur(32px) saturate(150%);
  -webkit-backdrop-filter:blur(32px) saturate(150%);
  border:1px solid rgba(255,252,247,0.14);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-raised);
}
.glass-subtle{
  background-color:var(--surface-subtle);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-subtle);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background-color:rgba(40,34,26,0.92)}
  .glass-raised{background-color:rgba(50,42,32,0.95)}
}

/* ── Layout primitives ──────────────────────────────────────────── */
.container{max-width:var(--container-max);margin:0 auto;padding:0 1rem}
@media(min-width:768px){.container{padding:0 1.5rem}}
.stack > * + *{margin-top:var(--stack-gap, 1rem)}
.row{display:flex;align-items:center;gap:.75rem}
.row-tight{display:flex;align-items:center;gap:.5rem}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.center{display:grid;place-items:center}
.flex{display:flex}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.flex-1{flex:1}.flex-none{flex:none}
.w-full{width:100%}.min-w-0{min-width:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-center{text-align:center}.text-right{text-align:right}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.hidden{display:none !important}
@media(min-width:768px){
  .md\:hidden{display:none !important}
  .md\:block{display:block !important}
  .md\:flex{display:flex !important}
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.625rem 1rem;min-height:42px;
  font-family:var(--font-sans);font-weight:500;font-size:.9375rem;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--duration-fast) var(--ease-spring);
  text-decoration:none;color:inherit;
  white-space:nowrap;
}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring-soft);}
.btn[disabled],.btn:disabled{opacity:.5;pointer-events:none}
.btn-lg{padding:.875rem 1.5rem;min-height:48px;font-size:1rem;border-radius:var(--radius-md)}

.btn-primary{
  color:var(--linen-50);
  background:linear-gradient(180deg, var(--rose-400) 0%, var(--rose-600) 100%);
  box-shadow:var(--shadow-btn-primary);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn-primary-hover);color:var(--linen-50)}
.btn-primary:active{transform:scale(.98) translateY(0)}

.btn-secondary{
  color:var(--linen-50);
  background:rgba(255,252,247,0.04);
  border:1px solid rgba(255,252,247,0.12);
  backdrop-filter:blur(10px);
}
.btn-secondary:hover{background:rgba(255,252,247,0.08);border-color:rgba(255,252,247,0.18);transform:translateY(-1px)}
.btn-secondary:active{transform:scale(.98)}

.btn-ghost{color:var(--text-secondary)}
.btn-ghost:hover{background:rgba(255,252,247,0.06);color:var(--text-primary)}

.btn-danger{
  color:var(--linen-50);
  background:linear-gradient(180deg, var(--clay-400) 0%, var(--clay-600) 100%);
  box-shadow:0 1px 0 0 rgba(255,252,247,0.20) inset, 0 8px 20px -6px rgba(169,75,58,0.45);
}
.btn-danger:hover{transform:translateY(-1px)}
.btn-danger:active{transform:scale(.98)}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-full);color:var(--text-secondary);
  transition:all var(--duration-fast) var(--ease-spring);cursor:pointer;
}
.icon-btn:hover{background:rgba(255,252,247,0.06);color:var(--text-primary)}

/* ── Form controls ──────────────────────────────────────────────── */
label{display:block}
.field{display:block;margin-bottom:1rem}
.field > .label,.label{
  display:block;margin-bottom:.4rem;
  font-size:.8125rem;font-weight:500;letter-spacing:.01em;color:var(--text-secondary);
}
.input,select.input,textarea.input{
  display:block;width:100%;
  padding:.75rem 1rem;min-height:44px;
  font-family:var(--font-sans);font-size:1rem;color:var(--text-primary);
  background:rgba(0,0,0,0.20);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,252,247,0.10);
  border-radius:var(--radius-sm);
  box-shadow:0 1px 0 0 rgba(255,252,247,0.04) inset;
  transition:all var(--duration-fast) var(--ease-out-soft);
  appearance:none;
}
.input::placeholder{color:var(--linen-400)}
.input:hover{border-color:rgba(255,252,247,0.16)}
.input:focus{
  outline:none;
  border-color:rgba(204,128,123,0.6);
  background:rgba(0,0,0,0.30);
  box-shadow:0 0 0 4px var(--focus-ring-soft), 0 1px 0 0 rgba(255,252,247,0.06) inset;
}
textarea.input{min-height:96px;resize:vertical;line-height:1.5}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23BBB1A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.75rem;
}

.help{font-size:.8125rem;color:var(--text-muted);margin-top:.35rem}
.field-error{color:var(--clay-300);font-size:.8125rem;margin-top:.35rem}

/* Toggle switch */
.toggle{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;border-radius:9999px;background:rgba(255,252,247,0.10);transition:all var(--duration-base) var(--ease-spring);cursor:pointer;flex:none}
.toggle[data-checked="1"]{background:linear-gradient(90deg, var(--rose-500), var(--rose-400))}
.toggle::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:9999px;background:var(--linen-50);box-shadow:0 2px 4px rgba(0,0,0,0.30), 0 1px 0 0 rgba(255,252,247,0.40) inset;transition:transform var(--duration-base) var(--ease-spring)}
.toggle[data-checked="1"]::after{transform:translateX(20px)}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}

/* Checkbox */
.checkbox{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;user-select:none}
.checkbox input{position:absolute;opacity:0;pointer-events:none}
.checkbox .box{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,252,247,0.18);transition:all var(--duration-fast) var(--ease-spring);flex:none}
.checkbox input:checked + .box{background:var(--rose-500);border-color:var(--rose-400)}
.checkbox .box svg{width:12px;height:12px;color:var(--linen-50);opacity:0;transition:opacity var(--duration-fast)}
.checkbox input:checked + .box svg{opacity:1}

/* ── Top app bar ────────────────────────────────────────────────── */
.app-bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem 1rem;
  padding-top:var(--safe-top);
  background-color:var(--surface-glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--border-medium);
}
.app-bar h1{font-family:var(--font-serif);font-size:1.125rem;font-weight:500;color:var(--text-primary);margin:0;flex:1;text-align:center}
@media(min-width:768px){
  .app-bar{margin:1rem 1rem 0;border-radius:var(--radius-xl);border:1px solid var(--border-medium)}
  .app-bar h1{text-align:left}
}

/* ── Bottom action bar (mobile FAB) ─────────────────────────────── */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:.75rem 1rem;
  padding-bottom:var(--safe-bottom);
  display:flex;align-items:center;gap:.5rem;
  background-color:var(--surface-raised);
  backdrop-filter:blur(32px) saturate(150%);
  -webkit-backdrop-filter:blur(32px) saturate(150%);
  border-top:1px solid var(--border-medium);
  border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
}
@media(min-width:768px){.bottom-bar{display:none}}

main.with-bottom-bar{padding-bottom:7rem}
@media(min-width:768px){main.with-bottom-bar{padding-bottom:2rem}}

/* ── Cards / list rows ──────────────────────────────────────────── */
.card{padding:1.25rem;border-radius:var(--radius-lg);background:var(--surface-glass);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--border-medium);box-shadow:var(--shadow-glass)}
@media(min-width:768px){.card{padding:1.5rem}}

.list-row{
  display:flex;align-items:center;gap:.875rem;
  padding:.875rem 1rem;
  border-radius:var(--radius);
  background:var(--surface-subtle);
  border:1px solid var(--border-soft);
  transition:all var(--duration-fast) var(--ease-out-soft);
  text-decoration:none;color:inherit;
}
.list-row:hover{transform:translateY(-1px);background:rgba(255,252,247,0.05)}
.list-row .name{font-weight:500;font-size:.9375rem;color:var(--text-primary)}
.list-row .meta{font-size:.8125rem;color:var(--text-muted)}
.list-row .price{font-weight:600;font-size:1rem;font-variant-numeric:tabular-nums}
.list-row .cycle{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}

/* Logo placeholder */
.logo-ph{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9999px;font-family:var(--font-serif);font-weight:500;font-size:.9375rem;letter-spacing:-.01em;flex:none;font-variation-settings:"opsz" 36,"SOFT" 50}
.logo-ph[data-tint="0"]{background:rgba(184,104,97,0.22);color:#EBC0BD}
.logo-ph[data-tint="1"]{background:rgba(118,90,125,0.25);color:#CBBACD}
.logo-ph[data-tint="2"]{background:rgba(107,132,88,0.22);color:#C0CDB2}
.logo-ph[data-tint="3"]{background:rgba(189,116,52,0.22);color:#ECC59C}
.logo-ph[data-tint="4"]{background:rgba(92,110,131,0.25);color:#B7C3CF}
.logo-ph[data-tint="5"]{background:rgba(169,75,58,0.22);color:#E5AFA6}
.logo-img{width:40px;height:40px;border-radius:10px;background:rgba(255,252,247,0.06);object-fit:contain;padding:4px;flex:none}
.logo-lg{width:56px;height:56px;border-radius:14px}

/* ── Credit-card chip ───────────────────────────────────────────── */
.cc-chip{
  position:relative;display:inline-flex;align-items:center;gap:.625rem;
  padding:.625rem .875rem;border-radius:12px;
  background:linear-gradient(135deg, rgba(255,252,247,0.06) 0%, rgba(255,252,247,0.02) 100%);
  border:1px solid var(--border-medium);
  box-shadow:0 1px 0 0 rgba(255,252,247,0.05) inset;
  font-size:.875rem;font-weight:500;color:var(--text-primary);overflow:hidden;
}
.cc-chip::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--cc-band, linear-gradient(90deg,#5C6E83,#94A4B5))}
.cc-chip .net{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.cc-chip .num{font-variant-numeric:tabular-nums}
.cc-chip[data-network="visa"]{--cc-band:linear-gradient(90deg,#1A1F71 0%,#4A6CF7 100%)}
.cc-chip[data-network="mastercard"]{--cc-band:linear-gradient(90deg,#EB001B 0%,#FF5F00 50%,#F79E1B 100%)}
.cc-chip[data-network="amex"]{--cc-band:linear-gradient(90deg,#006FCF 0%,#2E77BB 100%)}
.cc-chip[data-network="discover"]{--cc-band:linear-gradient(90deg,#FF6000 0%,#FFB438 100%)}

/* Large card visualization */
.cc-large{
  position:relative;aspect-ratio:1.586/1;width:100%;max-width:380px;
  border-radius:var(--radius-card);padding:1.25rem;
  background:linear-gradient(135deg, rgba(255,252,247,0.10) 0%, rgba(255,252,247,0.02) 50%, rgba(255,252,247,0.06) 100%),
             var(--cc-bg, linear-gradient(135deg,#2B343D 0%,#1C2228 100%));
  border:1px solid rgba(255,252,247,0.12);
  box-shadow:0 1px 0 0 rgba(255,252,247,0.10) inset, 0 16px 40px -12px rgba(0,0,0,0.55);
  color:var(--linen-50);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
}
.cc-large::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg, transparent 40%, rgba(255,252,247,0.08) 50%, transparent 60%);pointer-events:none}
.cc-large[data-network="visa"]{--cc-bg:linear-gradient(135deg,#1A1F71 0%,#0E1226 100%)}
.cc-large[data-network="mastercard"]{--cc-bg:linear-gradient(135deg,#7E0010 0%,#FF5F00 50%,#3F1F00 100%)}
.cc-large[data-network="amex"]{--cc-bg:linear-gradient(135deg,#003F73 0%,#001C36 100%)}
.cc-large[data-network="discover"]{--cc-bg:linear-gradient(135deg,#FF6000 0%,#3A1A00 100%)}
.cc-large .net{font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;opacity:.85}
.cc-large .num{font-family:var(--font-mono);font-size:1.125rem;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.cc-large .label{font-size:.625rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.cc-large .holder{font-size:.875rem;font-weight:500}

/* ── Status pills ───────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:500;letter-spacing:.02em;background:rgba(255,252,247,0.06);color:var(--text-secondary);border:1px solid var(--border-soft)}
.pill-success{background:rgba(107,132,88,0.18);color:var(--sage-200);border-color:rgba(107,132,88,0.3)}
.pill-warning{background:rgba(189,116,52,0.18);color:var(--apricot-200);border-color:rgba(189,116,52,0.3)}
.pill-danger{background:rgba(169,75,58,0.18);color:var(--clay-200);border-color:rgba(169,75,58,0.3)}
.pill-info{background:rgba(92,110,131,0.18);color:var(--fog-200);border-color:rgba(92,110,131,0.3)}

/* ── Toasts / flash messages ────────────────────────────────────── */
.flashes{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:.5rem;width:calc(100vw - 2rem);max-width:28rem}
.toast{
  padding:.875rem 1rem;border-radius:var(--radius-md);
  background:var(--surface-raised);
  backdrop-filter:blur(32px) saturate(150%);-webkit-backdrop-filter:blur(32px) saturate(150%);
  border:1px solid var(--border-medium);border-left:3px solid var(--sage-400);
  box-shadow:var(--shadow-raised);
  font-size:.9375rem;color:var(--text-primary);
  animation:lift-in var(--duration-medium) var(--ease-out-soft);
}
.toast.error{border-left-color:var(--clay-400)}
.toast.info{border-left-color:var(--fog-400)}
.toast.warning{border-left-color:var(--apricot-400)}

@keyframes lift-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* ── Tabs ───────────────────────────────────────────────────────── */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border-soft);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{position:relative;padding:.75rem 1rem;min-height:44px;font-size:.9375rem;font-weight:500;color:var(--text-muted);background:transparent;border:0;cursor:pointer;white-space:nowrap;text-decoration:none}
.tab:hover{color:var(--text-secondary)}
.tab[aria-selected="true"]{color:var(--text-primary)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:-1px;height:2px;background:linear-gradient(90deg, var(--rose-400), var(--plum-400));border-radius:9999px}

/* ── Misc ───────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--border-soft);margin:1rem 0}
.empty{padding:3rem 1.5rem;text-align:center;border-radius:var(--radius-lg);background:var(--surface-subtle);border:1px solid var(--border-soft)}
.empty .glow{margin:0 auto 1.5rem;width:128px;height:128px;border-radius:9999px;background:linear-gradient(135deg, rgba(184,104,97,0.15) 0%, rgba(118,90,125,0.10) 50%, rgba(107,132,88,0.15) 100%);display:grid;place-items:center}

.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:2rem 0 .75rem}
.section-title h2{font-size:1.125rem}
.section-subtitle{font-size:.8125rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}

/* Logo picker grid */
.logo-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.logo-pick{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .5rem;border-radius:var(--radius);background:var(--surface-subtle);border:2px solid transparent;cursor:pointer;transition:all var(--duration-fast)}
.logo-pick:hover{background:rgba(255,252,247,0.06)}
.logo-pick.is-selected{border-color:var(--rose-500);background:rgba(184,104,97,0.10)}
.logo-pick img{width:64px;height:64px;border-radius:12px;background:rgba(255,252,247,0.06);object-fit:contain;padding:8px}
.logo-pick .src{font-size:.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}

/* Definition list */
.dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.9375rem}
.dl dt{color:var(--text-muted)}
.dl dd{color:var(--text-primary)}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border-soft);font-size:.9375rem}
.table th{font-weight:500;color:var(--text-muted);font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Animated entrance for main content ─────────────────────────── */
.fade-in{animation:fade-in var(--duration-base) var(--ease-out-soft)}
.lift-in{animation:lift-in var(--duration-medium) var(--ease-out-soft)}

/* ── Login screen ───────────────────────────────────────────────── */
.login-shell{min-height:100svh;display:grid;place-items:center;padding:2rem 1rem}
.login-card{width:100%;max-width:440px;padding:2.5rem 1.75rem;text-align:center;border-radius:var(--radius-2xl)}
@media(min-width:480px){.login-card{padding:3rem 2.5rem}}
.monogram{margin:0 auto 1.5rem;width:64px;height:64px;border-radius:var(--radius-xl);background:linear-gradient(135deg, var(--rose-400), var(--plum-500), var(--fog-500));display:grid;place-items:center;color:var(--linen-50);font-family:var(--font-serif);font-size:1.75rem;font-weight:500;font-variation-settings:"opsz" 144, "SOFT" 80, "WONK" 1;box-shadow:0 8px 24px -6px rgba(184,104,97,0.45)}

/* Honeypot field — hidden from users, visible to dumb bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Form layout helpers ────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.form-grid.cols-2{grid-template-columns:1fr 1fr}}