/*
 * PROXY_SELL signature chrome — plain CSS, uses the design tokens defined
 * in app.css (loaded first). Kept out of the Tailwind entry because Tailwind v4
 * relocated these raw rules into a layer the browser dropped; a standalone
 * stylesheet parses reliably.
 *
 * v2 polish: theme-aware elevation, subtle surface sheen, hover micro-motion,
 * clearer buttons and table rows — a more finished SaaS feel without changing
 * any class contract.
 */

/* ---- Elevation + surface tokens (theme-aware) ------------------------- */
:root {
  --ps-shadow-sm: 0 1px 2px rgba(16, 22, 48, .05);
  --ps-shadow:    0 1px 2px rgba(16, 22, 48, .05), 0 10px 26px -16px rgba(16, 22, 48, .22);
  --ps-shadow-lg: 0 2px 6px rgba(16, 22, 48, .06), 0 26px 52px -22px rgba(16, 22, 48, .30);
  --ps-brand-glow: 0 10px 30px -12px color-mix(in oklab, var(--primary) 55%, transparent);
  /* faint top-down sheen laid over a card so flat panels get some life */
  --ps-sheen: linear-gradient(180deg, color-mix(in oklab, var(--foreground) 3.5%, transparent), transparent 42%);
  --ps-hair: color-mix(in oklab, var(--border) 70%, transparent);
}
.dark {
  --ps-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --ps-shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -16px rgba(0, 0, 0, .55);
  --ps-shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 30px 60px -22px rgba(0, 0, 0, .65);
  --ps-brand-glow: 0 12px 34px -12px color-mix(in oklab, var(--primary) 70%, transparent);
  --ps-sheen: linear-gradient(180deg, color-mix(in oklab, #fff 6%, transparent), transparent 46%);
  --ps-hair: color-mix(in oklab, var(--border) 90%, transparent);
}

/* Ambient brand atmosphere — the mockup's signature: two soft radial glows
   (primary top-right, accent bottom-left) fixed behind all content. Layered as
   background-image so Tailwind's bg-background color still provides the base. */
  body {
    background-image:
      radial-gradient(1100px 560px at 84% -10%, color-mix(in oklab, var(--primary) 24%, transparent), transparent 56%),
      radial-gradient(880px 520px at -10% 4%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 52%),
      radial-gradient(700px 500px at 50% 120%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

/* Corner-bracket frame around a page header */
  .ps-frame { position: relative; background: var(--ps-sheen); border-radius: var(--radius-xl); }
  .ps-corner { position: absolute; width: 15px; height: 15px;
    border: 1.5px solid color-mix(in oklab, var(--primary) 60%, transparent); }
  .ps-corner-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
  .ps-corner-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
  .ps-corner-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
  .ps-corner-br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

  /* Cards: a ring edge (not a border), shadcn-style, now with real elevation */
  /* PROXY_SELL cards — crisp product-catalog style (defined border, squarer,
     flat at rest, firm warm hover) — not TOKEN_SELL's soft glossy rounded cards. */
  .ps-card { position: relative; background: var(--card); border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--foreground) 5%, transparent);
    transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, border-color .16s ease; }
  .ps-card-hover { cursor: pointer; }
  .ps-card-hover:hover { transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
    box-shadow: 0 14px 30px -18px color-mix(in oklab, var(--primary) 55%, transparent); }
  .ps-card-feat { border-radius: 10px; border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 70%, transparent) inset, 0 16px 34px -20px color-mix(in oklab, var(--primary) 45%, transparent);
    background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 6%, var(--card)), var(--card) 55%); }

  /* Buttons */
  .ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .7rem 1.1rem; border-radius: calc(var(--radius) - 1px);
    font-weight: 650; font-size: 14px; border: 0; cursor: pointer;
    transition: transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s ease, filter .15s ease, background .15s ease; }
  .ps-btn:active { transform: translateY(1px); }
  .ps-btn-grad { color: #fff; background: var(--gradient-cta); box-shadow: var(--ps-brand-glow); }
  .ps-btn-grad:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px);
    box-shadow: 0 16px 36px -12px color-mix(in oklab, var(--primary) 75%, transparent); }
  .ps-btn-out { color: var(--foreground); background: color-mix(in oklab, var(--card) 60%, transparent);
    box-shadow: 0 0 0 1px var(--border) inset; }
  .ps-btn-out:hover { background: var(--primary); color: #fff;
    box-shadow: 0 0 0 1px var(--primary) inset, 0 8px 20px -10px color-mix(in oklab, var(--primary) 70%, transparent);
    transform: translateY(-1px); }

  /* Status pill */
  .ps-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px;
    box-shadow: 0 0 0 1px color-mix(in oklab, currentColor 22%, transparent) inset; }
  .ps-pill .d { width: 7px; height: 7px; border-radius: 999px; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 18%, transparent); }
  .ps-pill-ok   { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
  .ps-pill-ok .d   { background: var(--success); }
  .ps-pill-pend { background: color-mix(in oklab, var(--warning) 15%, transparent); color: var(--warning); }
  .ps-pill-pend .d { background: var(--warning); }
  .ps-pill-off  { background: color-mix(in oklab, var(--muted-foreground) 16%, transparent); color: var(--muted-foreground); }
  .ps-pill-off .d  { background: var(--muted-foreground); }

  /* Stat tile — elevated, with a hairline accent and hover lift */
  .ps-stat { position: relative; background: var(--card); border-radius: var(--radius);
    padding: 17px 18px; overflow: hidden;
    box-shadow: 0 0 0 1px var(--ps-hair) inset, var(--ps-shadow-sm);
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease; }
  .ps-stat::before { content: ""; position: absolute; inset: 0; background: var(--ps-sheen); pointer-events: none; }
  .ps-stat::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 999px;
    background: linear-gradient(var(--primary), color-mix(in oklab, var(--primary) 40%, transparent)); opacity: .0; transition: opacity .2s ease; }
  .ps-stat:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 30%, var(--border)) inset, var(--ps-shadow); }
  .ps-stat:hover::after { opacity: .9; }
  .ps-stat-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
  .ps-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 25px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 3px; }
  .ps-stat-ico { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; z-index: 1; }

  /* Panel + table */
  .ps-panel { position: relative; background: var(--card); border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: 0 0 0 1px var(--ps-hair) inset, var(--ps-shadow); }
  .ps-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .ps-table th { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted-foreground); font-weight: 700; padding: 12px 18px;
    background: color-mix(in oklab, var(--foreground) 3%, transparent); border-bottom: 1px solid var(--border); }
  .ps-table td { padding: 13px 18px; border-top: 1px solid color-mix(in oklab, var(--border) 45%, transparent); }
  .ps-table tbody tr { transition: background .14s ease; }
  .ps-table tbody tr:hover { background: color-mix(in oklab, var(--primary) 5%, transparent); }
  .ps-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* Form fields */
.ps-field { margin-bottom: 16px; }
.ps-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }
.ps-input {
  width: 100%; height: 44px; padding: 0 13px; font-size: 14px;
  color: var(--foreground); background: var(--input);
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ps-input::placeholder { color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); }
.ps-input:hover { border-color: color-mix(in oklab, var(--ring) 40%, var(--border)); }
.ps-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent); }
.ps-alert { display: flex; gap: 8px; align-items: flex-start; padding: 12px 15px; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 14px; box-shadow: var(--ps-shadow-sm); }
.ps-alert ul { margin: 0; padding-left: 18px; list-style: disc; }
.ps-alert-danger  { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--destructive) 40%, transparent) inset; }
.ps-alert-success { color: var(--success);     background: color-mix(in oklab, var(--success) 12%, transparent);     box-shadow: 0 0 0 1px color-mix(in oklab, var(--success) 40%, transparent) inset; }
.ps-alert-info    { color: var(--info);        background: color-mix(in oklab, var(--info) 12%, transparent);        box-shadow: 0 0 0 1px color-mix(in oklab, var(--info) 40%, transparent) inset; }

/* Section header + empty/copy helpers (used across dashboard pages) */
.ps-sect-label { font-family: 'Public Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--primary); }
.ps-empty { padding: 44px 20px; text-align: center; color: var(--muted-foreground); }
.ps-code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--foreground);
  background: color-mix(in oklab, var(--muted) 70%, var(--card)); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  word-break: break-all; box-shadow: var(--ps-shadow-sm) inset; }
.ps-copy-btn { font-size: 12px; font-weight: 600; color: var(--muted-foreground); cursor: pointer; background: none; border: 0; transition: color .15s ease; }
.ps-copy-btn:hover { color: var(--primary); }
.ps-tab { padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted-foreground);
  border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.ps-tab:hover { color: var(--foreground); }
.ps-tab-active { color: var(--foreground); border-bottom-color: var(--primary); }
.ps-btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .45rem .85rem; width: auto;
  border-radius: calc(var(--radius) - 3px); font-weight: 650; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 55%, transparent); color: var(--foreground);
  transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, background .14s ease, color .14s ease; }
.ps-btn-sm:hover { transform: translateY(-1px); box-shadow: var(--ps-shadow-sm); }
/* keep the outline/gradient variants dominant when combined with ps-btn-sm */
.ps-btn-sm.ps-btn-out { background: color-mix(in oklab, var(--card) 55%, transparent); }
.ps-btn-sm.ps-btn-grad { border-color: transparent; }

/* Destructive button + inline tag (admin proxy management) */
.ps-btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: calc(var(--radius) - 2px); font-size: 12.5px; font-weight: 650;
  cursor: pointer; border: 1px solid color-mix(in oklab, var(--destructive) 45%, transparent);
  background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive);
  transition: background .15s ease, border-color .15s ease, transform .14s ease; }
.ps-btn-danger:hover { background: color-mix(in oklab, var(--destructive) 20%, transparent);
  border-color: color-mix(in oklab, var(--destructive) 70%, transparent); transform: translateY(-1px); }
.ps-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted-foreground);
  background: var(--muted); border: 1px solid var(--border); }

/* Segmented range control (monitor page) */
.ps-seg2 { transition: transform .14s ease, box-shadow .14s ease, color .14s ease, border-color .14s ease; }
.ps-seg2:hover { color: var(--foreground); }
.ps-seg2-on { box-shadow: 0 6px 16px -10px color-mix(in oklab, var(--primary) 60%, transparent); }

/* --- "Độ sẵn sàng" status strip (provider-check style history) ----------- */
/* A row of thin bars, oldest→newest. Height encodes latency, colour encodes
   up/down — the classic status-page uptime strip. Bars are set inline so the
   strip renders identically whether painted by Blade or refreshed by JS. */
.ps-uptime { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.ps-uptime-bar { flex: 1 1 0; min-width: 3px; border-radius: 3px; position: relative;
                 background: var(--muted); transition: opacity .15s ease; cursor: default; }
.ps-uptime-bar.is-up   { background: var(--success); }
.ps-uptime-bar.is-down { background: var(--destructive); height: 100% !important; }
.ps-uptime-bar.is-void { background: color-mix(in oklab, var(--muted-foreground) 22%, transparent); height: 30% !important; }
.ps-uptime-bar:hover { opacity: .75; }
/* Native tooltip via title= is enough; this keeps the strip legible on mobile. */
.ps-uptime-empty { display: flex; align-items: center; justify-content: center; height: 44px;
                   font-size: 12px; color: var(--muted-foreground);
                   border: 1px dashed var(--border); border-radius: 10px; }
.ps-uptime-axis { display: flex; justify-content: space-between; margin-top: 6px;
                  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted-foreground); }
.ps-metric { padding: 12px 14px; border-radius: 12px; background: color-mix(in oklab, var(--card) 55%, transparent);
             box-shadow: 0 0 0 1px var(--border) inset; }
.ps-metric-val { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.ps-count-chip { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
                 padding: 3px 9px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); }

/* ============ Colorful storefront (showcase · flags · card strip · hero art) ============ */
/* Product-type showcase card — each type sets --c to its signature colour. */
.ps-cat{position:relative;display:flex;flex-direction:column;border-radius:16px;padding:20px 18px;overflow:hidden;color:inherit;
  background:linear-gradient(160deg, color-mix(in oklab, var(--c) 20%, var(--card)), var(--card) 78%);
  border:1px solid color-mix(in oklab, var(--c) 32%, transparent);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.ps-cat:hover{transform:translateY(-3px);border-color:color-mix(in oklab, var(--c) 55%, transparent);
  box-shadow:0 20px 44px -24px color-mix(in oklab, var(--c) 75%, transparent)}
.ps-cat::before{content:"";position:absolute;right:-34px;top:-34px;width:140px;height:140px;border-radius:999px;pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab, var(--c) 42%, transparent), transparent 70%)}
.ps-cat-ico{position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;font-size:25px;
  background:color-mix(in oklab, var(--c) 24%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c) 42%, transparent)}
.ps-cat h3{position:relative;font-size:15.5px;font-weight:800;margin:13px 0 0}
.ps-cat p{position:relative;font-size:12.5px;color:var(--muted-foreground);margin:3px 0 0;line-height:1.45}
.ps-cat .from{position:relative;margin-top:auto;padding-top:12px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;
  color:color-mix(in oklab, var(--c) 80%, var(--foreground));display:flex;align-items:center;gap:5px}
.ps-cat .from::after{content:"→";opacity:.6;transition:transform .16s ease}
.ps-cat:hover .from::after{transform:translateX(3px)}
/* Country coverage flag strip */
.ps-flags{display:flex;flex-wrap:wrap;gap:7px 8px;justify-content:center;font-size:23px;line-height:1;max-width:640px;margin:0 auto}
.ps-flags span{transition:transform .15s ease;cursor:default}
.ps-flags span:hover{transform:scale(1.25) translateY(-2px)}
/* Coloured top strip on a plan card */
.ps-strip{height:4px;border-radius:16px 16px 0 0;background:linear-gradient(90deg, var(--c), color-mix(in oklab, var(--c) 35%, transparent))}
/* Hero decorative network svg */
.ps-hero-art{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none;mix-blend-mode:screen}
.ps-orb{position:absolute;border-radius:999px;filter:blur(38px);opacity:.55;pointer-events:none}

/* ============ PROXY_SELL type system — editorial, distinct from TOKEN_SELL ============ */
/* Display: Fraunces (characterful serif) for headings; sans for eyebrows/body;
   JetBrains Mono kept ONLY for real data (prices, endpoints). */
.ps-display{font-family:'Fraunces','Iowan Old Style',Georgia,serif;font-weight:600;letter-spacing:-.015em;line-height:1.05;font-optical-sizing:auto}
.ps-display-hero{font-family:'Fraunces','Iowan Old Style',Georgia,serif;font-weight:900;letter-spacing:-.02em;line-height:1.0;font-optical-sizing:auto}
.ps-eyebrow{font-family:'Public Sans',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--primary)}
/* Editorial section header: left-aligned, ruled, number marker */
.ps-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:22px;padding-bottom:14px;border-bottom:1.5px solid var(--border);position:relative}
.ps-sec::after{content:"";position:absolute;left:0;bottom:-1.5px;width:64px;height:1.5px;background:var(--primary)}
.ps-sec .ps-sec-t{min-width:0}
.ps-sec h2{margin:6px 0 0}
.ps-sec .ps-sec-n{font-family:'Fraunces',serif;font-weight:600;font-size:13px;color:var(--muted-foreground);
  border:1.5px solid var(--border);border-radius:999px;padding:3px 12px;white-space:nowrap}
/* Ticker (country flags scroll) */
.ps-ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ps-ticker>div{display:inline-flex;gap:14px;white-space:nowrap;animation:ps-scroll 34s linear infinite;font-size:26px}
@keyframes ps-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ps-ticker>div{animation:none}}

/* Editorial nav — underline-on-active (not TOKEN_SELL's filled pill) */
.ps-nav-link{position:relative;padding:6px 2px;font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  color:var(--muted-foreground);transition:color .15s ease}
.ps-nav-link:hover{color:var(--foreground)}
.ps-nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.ps-nav-link:hover::after{transform:scaleX(.4);background:color-mix(in oklab,var(--primary) 55%,transparent)}
.ps-nav-link.is-active{color:var(--foreground)}
.ps-nav-link.is-active::after{transform:scaleX(1);background:var(--primary)}

/* ===== Legal / policy pages (Terms, Privacy, Refund, AUP, Abuse) ===== */
.ps-legal{max-width:820px;margin:0 auto;padding:40px 24px 96px}
.ps-legal-head{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.ps-legal-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-foreground)}
.ps-legal h1{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(26px,4vw,36px);line-height:1.1;
  margin:10px 0 0;letter-spacing:-.01em;color:var(--foreground)}
.ps-legal-meta{margin-top:10px;font-size:13px;color:var(--muted-foreground)}
.ps-legal h2{font-size:19px;font-weight:700;margin:36px 0 10px;letter-spacing:-.01em;
  color:var(--foreground);scroll-margin-top:88px}
.ps-legal h3{font-size:15.5px;font-weight:600;margin:20px 0 6px;color:var(--foreground)}
.ps-legal p{font-size:14.5px;line-height:1.72;color:var(--muted-foreground);margin:10px 0}
.ps-legal ul,.ps-legal ol{margin:10px 0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.ps-legal li{font-size:14.5px;line-height:1.62;color:var(--muted-foreground)}
.ps-legal a{color:var(--primary);text-decoration:none}
.ps-legal a:hover{text-decoration:underline}
.ps-legal strong{color:var(--foreground);font-weight:600}
.ps-legal address{font-style:normal;color:var(--muted-foreground)}
.ps-legal-toc{margin:20px 0 8px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;
  background:var(--card)}
.ps-legal-toc .ps-legal-eyebrow{font-size:11px}
.ps-legal-toc ul{margin:9px 0 0;gap:5px}
.ps-legal-toc li{font-size:13.5px}
.ps-legal-note{margin-top:34px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;
  background:color-mix(in oklab,var(--muted-foreground) 6%,transparent);font-size:13px;line-height:1.6}
.ps-legal-note p{font-size:13px;margin:6px 0}
.ps-legal-updated{display:inline-flex;align-items:center;gap:6px}