/* Seal & Ledger — shared design system for buy pages and admin.
   Subject: a signing authority. Licenses are signed seals bound to machines.
   Ink = signing teal, Seal = stamp red (seal mark + danger only), Paper = cool porcelain. */
@font-face{font-family:"Plex Mono";src:url(/static/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/static/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/static/fonts/plex-mono-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#EEF1F0; --paper-2:#E3E8E6; --sheet:#FBFCFB; --line:#CFD7D4; --line-strong:#9FB0AB;
  --ink:#123F4A; --ink-2:#0B2E36; --ink-soft:#DCE8E8; --text:#17242A; --muted:#5A6B70;
  --seal:#B4372A; --seal-soft:#F6E3E0; --ok:#1F6E4A; --ok-soft:#DDEFE5; --warn:#8A5A00; --warn-soft:#F7EBCF;
  --mono:"Plex Mono",ui-monospace,"Cascadia Code","SFMono-Regular",Menlo,monospace;
  --sans:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --r:6px; --r-lg:10px; --shadow:0 1px 0 rgba(18,63,74,.04),0 8px 24px -12px rgba(18,63,74,.18);
  --t:160ms cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink-2);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
h1,h2,h3{color:var(--ink-2);line-height:1.25;margin:0 0 .5em;font-weight:650;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)} h2{font-size:1.2rem} h3{font-size:1rem}
p{margin:0 0 .8em}
small,.small{font-size:.85rem;color:var(--muted)}
code,.mono,pre{font-family:var(--mono);font-size:.9em}
code{background:var(--ink-soft);color:var(--ink-2);padding:.08em .4em;border-radius:4px;overflow-wrap:anywhere}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper-2);padding:.9rem 1rem;border-radius:var(--r);margin:0 0 1em}
hr{border:0;border-top:1px dashed var(--line-strong);margin:1.5rem 0}

/* Eyebrow: a stamped label, used only to name a section's role. */
.eyebrow{display:inline-block;font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px solid currentColor;padding:.35rem .5rem;border-radius:3px;margin-bottom:.9rem}

/* Sheets */
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(1rem,.8rem + 1vw,1.6rem);margin:0 0 1.25rem}
.sheet > h2:first-child,.sheet > h3:first-child{margin-top:0}
/* Perforated stub edge: the license-certificate tear line */
.perf{position:relative}
.perf::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:radial-gradient(circle,var(--paper) 2.5px,transparent 3px) 0 0/12px 2px repeat-x}

/* Forms */
label{display:block;font-size:.88rem;font-weight:550;color:var(--ink-2);margin:0 0 1rem}
label > input,label > select,label > textarea{margin-top:.35rem}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--text);background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);padding:.62rem .75rem;min-height:44px;transition:border-color var(--t),box-shadow var(--t)}
textarea{min-height:6rem;resize:vertical;font-family:var(--mono);font-size:.88rem}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(18,63,74,.16)}
input[readonly]{background:var(--paper-2);font-family:var(--mono);font-size:.85rem}
input[type=checkbox],input[type=radio]{width:1.1rem;height:1.1rem;min-height:0;margin:0 .5rem 0 0;vertical-align:-.15em;accent-color:var(--ink)}
label:has(> input[type=checkbox]){display:flex;align-items:center;font-weight:500;cursor:pointer}
input[type=file]{padding:.45rem;background:var(--paper-2);border-style:dashed}
.hint{display:block;margin:-.6rem 0 1rem;font-size:.82rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:0 1rem}

/* Buttons */
button,.btn,[role=button]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem 1.15rem;font:600 .95rem/1.2 var(--sans);color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:var(--r);cursor:pointer;text-decoration:none;transition:background var(--t),transform var(--t),box-shadow var(--t)}
button:hover,.btn:hover,[role=button]:hover{background:var(--ink-2);color:#fff;text-decoration:none}
button:active,.btn:active,[role=button]:active{transform:translateY(1px)}
button.secondary,.btn.secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
button.secondary:hover,.btn.secondary:hover{background:var(--ink-soft);color:var(--ink-2);border-color:var(--ink)}
button.danger,.btn.danger{background:transparent;color:var(--seal);border-color:#E2B3AD}
button.danger:hover,.btn.danger:hover{background:var(--seal-soft);color:var(--seal)}
button.block,.btn.block{width:100%}
button:disabled{opacity:.55;cursor:not-allowed}
.htmx-request button,button.htmx-request{opacity:.7;cursor:progress}

/* Notices */
.notice{border:1px solid var(--line);border-left:4px solid var(--ink);background:var(--sheet);border-radius:var(--r);padding:.75rem 1rem;margin:0 0 1.25rem}
.notice.error,[role=alert]:not(:empty){border-left-color:var(--seal);background:var(--seal-soft);color:#7A2219}
.notice.ok{border-left-color:var(--ok);background:var(--ok-soft)}
p[role=alert]:empty{display:none}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.35rem;font:500 .74rem/1 var(--mono);letter-spacing:.04em;padding:.32rem .5rem;border-radius:3px;background:var(--paper-2);color:var(--ink-2);white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.bad{background:var(--seal-soft);color:var(--seal)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;display:inline-block}

/* Tables */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
th{text-align:left;font:500 .72rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.6rem .75rem;border-bottom:1px solid var(--line-strong);white-space:nowrap;background:var(--sheet);position:sticky;top:0}
td{padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
tbody tr{transition:background var(--t)} tbody tr:hover{background:#F3F6F5}
td.empty{text-align:center;color:var(--muted);padding:2rem}

/* Details / disclosure */
details{border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);margin:0 0 1rem}
details > summary{cursor:pointer;list-style:none;padding:.75rem 1rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:.5rem;min-height:44px}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"+";font-family:var(--mono);width:1rem;transition:transform var(--t)}
details[open] > summary::before{content:"−"}
details > :not(summary){padding:0 1rem}
details > form{padding:0 1rem 1rem}

/* Seal mark: the signature visual. Concentric rings + mono label, set in stamp red. */
.seal{--s:84px;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;color:var(--seal);position:relative;transform:rotate(-8deg);flex:none}
.seal::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;box-shadow:inset 0 0 0 4px var(--sheet),inset 0 0 0 5px currentColor}
.seal span{font:600 .62rem/1.15 var(--mono);letter-spacing:.12em;text-align:center;text-transform:uppercase}

/* Card number: always mono, always grouped */
.card-no{font:500 1rem/1.3 var(--mono);letter-spacing:.06em;color:var(--ink-2);overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}