/* ============================================================ ViaLab — design system Dark, lab-grade, teal-accented. --accent is injected at runtime from settings.primary_color (see partials/head.ejs); every accent tint below is derived from it with color-mix so the whole UI tracks the brand color. ============================================================ */ :root{ /* surfaces */ --bg:#0a0c10; --bg-2:#0c0f14; --panel:#13171e; --panel-2:#181d26; --panel-3:#1e242e; --line:#252b35; --line-2:#2f3742; /* ink */ --text:#eaeef2; --muted:#94a0ac; --faint:#6b7683; /* brand + semantic (accent overridden inline in ) */ --accent:#0E9594; --accent-2:color-mix(in srgb, var(--accent) 62%, #ffffff); --accent-ink:#04211f; --accent-soft:color-mix(in srgb, var(--accent) 14%, transparent); --accent-softer:color-mix(in srgb, var(--accent) 8%, transparent); --accent-border:color-mix(in srgb, var(--accent) 42%, var(--line)); --accent-glow:color-mix(in srgb, var(--accent) 30%, transparent); --ok:#34d399; --ok-soft:rgba(52,211,153,.13); --err:#f05a4b; --err-soft:rgba(240,90,75,.13); --warn:#e6b34a; --warn-soft:rgba(230,179,74,.12); /* elevation */ --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 6px 22px rgba(0,0,0,.38); --shadow-lg:0 26px 64px rgba(0,0,0,.55); --ring:0 0 0 3px var(--accent-glow); /* geometry */ --r-sm:9px; --r:13px; --r-lg:17px; --r-xl:22px; --ease:cubic-bezier(.4,0,.2,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif; color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background: radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg)); background-attachment:fixed; min-height:100vh; } h1,h2,h3,h4{line-height:1.2;letter-spacing:-.011em;font-weight:700} h1{letter-spacing:-.02em} p{margin:0 0 1rem} a{color:var(--accent-2);text-decoration:none;transition:color .15s var(--ease)} a:hover{color:color-mix(in srgb, var(--accent-2) 75%, #fff);text-decoration:underline;text-underline-offset:2px} code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent-2); background:var(--accent-softer);padding:.06em .38em;border-radius:6px;font-size:.92em} ::selection{background:color-mix(in srgb, var(--accent) 40%, transparent);color:#fff} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid transparent;background-clip:padding-box;border-radius:999px} ::-webkit-scrollbar-thumb:hover{background:var(--faint);border:3px solid transparent;background-clip:padding-box} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)} .container{max-width:980px;margin:0 auto;padding:2.25rem 1.25rem 4.5rem} /* ---------- header ---------- */ .site-header{display:flex;align-items:center;justify-content:space-between; padding:.85rem 1.5rem;border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px); position:sticky;top:0;z-index:20} .brand{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:800; letter-spacing:.02em;font-size:1.05rem} .brand:hover{text-decoration:none;color:var(--text)} .brand-mark{color:var(--accent);display:inline-flex;filter:drop-shadow(0 0 8px var(--accent-glow))} .brand-mark svg{display:block} .brand-text b{color:var(--accent-2);font-weight:800} .site-header nav{display:flex;align-items:center;gap:.35rem} .site-header nav a{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em; font-weight:600;padding:.45rem .7rem;border-radius:var(--r-sm);transition:color .15s var(--ease),background .15s var(--ease)} .site-header nav a:hover{color:var(--text);text-decoration:none;background:var(--panel-2)} .linkbtn{background:none;border:none;color:var(--muted);cursor:pointer;font:inherit; text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:600;padding:.45rem .7rem;border-radius:var(--r-sm)} .linkbtn:hover{color:var(--text);background:var(--panel-2)} /* ---------- hero / verify ---------- */ .hero{text-align:center;padding:2rem 0 1rem} .hero h1{font-size:2.4rem;margin:.2rem 0} .lead{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:.5rem auto} .verify-card{background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem;max-width:480px;margin:2rem auto;box-shadow:var(--shadow)} .verify-card.narrow{max-width:420px} .verify-card.center{text-align:center} .verify-card h1{font-size:1.5rem;margin:.1rem 0 .4rem} .verify-form{display:flex;flex-direction:column;gap:1.05rem} .verify-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.76rem;color:var(--muted); text-transform:uppercase;letter-spacing:.07em;font-weight:600} input,textarea,select{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm); color:var(--text);padding:.72rem .85rem;font-size:1rem;width:100%;font-family:inherit; transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)} input::placeholder,textarea::placeholder{color:var(--faint)} input:hover,textarea:hover,select:hover{border-color:var(--faint)} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);background:var(--panel)} input[type=file]{padding:.55rem .6rem;color:var(--muted);cursor:pointer} input[type=file]::file-selector-button{background:var(--panel-3);color:var(--text);border:1px solid var(--line-2); border-radius:8px;padding:.4rem .8rem;margin-right:.8rem;font-weight:600;cursor:pointer;transition:.15s var(--ease)} input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent-2)} .hint{color:var(--muted);font-size:.85rem;text-align:center;margin-top:1rem} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem} .step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem} .step span{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%; background:var(--accent);color:var(--accent-ink);font-weight:800;margin-bottom:.5rem} .step p{color:var(--muted);margin:0;font-size:.92rem} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 6%), var(--accent)); color:var(--accent-ink);border:1px solid color-mix(in srgb, var(--accent) 70%, #000); border-radius:var(--r-sm);padding:.72rem 1.3rem;font-weight:700;font-size:.97rem;cursor:pointer; text-align:center;letter-spacing:.01em;line-height:1.1; box-shadow:var(--shadow-sm), inset 0 1px 0 color-mix(in srgb,#fff 22%, transparent); transition:transform .12s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease)} .btn:hover{text-decoration:none;transform:translateY(-1px); box-shadow:0 8px 20px var(--accent-glow), inset 0 1px 0 color-mix(in srgb,#fff 26%, transparent); color:var(--accent-ink)} .btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)} .btn.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--line-2);box-shadow:var(--shadow-sm)} .btn.ghost:hover{border-color:var(--accent-border);background:var(--panel-3);color:var(--text)} .btn.danger{background:linear-gradient(180deg, color-mix(in srgb,var(--err) 90%,#fff 6%), var(--err)); color:#fff;border-color:color-mix(in srgb,var(--err) 70%,#000)} .btn.danger:hover{box-shadow:0 8px 20px rgba(240,90,75,.32)} .alert{background:var(--err-soft);border:1px solid color-mix(in srgb,var(--err) 55%,var(--line)); color:#f7b6ae;padding:.75rem 1rem;border-radius:var(--r-sm);margin-bottom:1rem;font-size:.92rem} /* ---------- COA / product view ---------- */ .coa-head{text-align:center;margin:1rem 0 1.5rem} .coa-head h1{margin:.5rem 0;font-size:2rem} .verified-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--ok-soft);color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);padding:.32rem .85rem;border-radius:999px; font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em} .verified-badge.pending{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)} .coa-meta{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;justify-content:center;margin-top:1.25rem} .coa-meta div{display:flex;flex-direction:column;gap:.15rem} .coa-meta span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600} .coa-meta strong{font-size:1.05rem} .coa-doc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; margin-top:1.25rem;box-shadow:var(--shadow)} .coa-doc object{display:block} /* ---------- footer ---------- */ .site-footer{border-top:1px solid var(--line);padding:2rem 1.5rem;text-align:center;color:var(--muted);font-size:.82rem; background:linear-gradient(180deg, transparent, var(--bg-2))} .disclaimer{max-width:72ch;margin:0 auto .5rem;line-height:1.6} .copy{color:var(--faint)} /* ---------- admin shell ---------- */ .admin-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap} .admin-bar h1{margin:0;font-size:1.7rem} .admin-bar-actions{display:flex;gap:.6rem;flex-wrap:wrap} .table{width:100%;border-collapse:collapse;font-size:.92rem; background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)} .table th,.table td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line)} .table tbody tr{transition:background .12s var(--ease)} .table tbody tr:hover{background:var(--panel-2)} .table tbody tr:last-child td{border-bottom:none} .table th{color:var(--muted);text-transform:uppercase;font-size:.68rem;letter-spacing:.07em;font-weight:700; background:var(--panel-2)} .pill{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.7rem;font-weight:700; text-transform:uppercase;letter-spacing:.03em;border:1px solid transparent} .pill.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)} .pill.off{background:rgba(127,140,141,.16);color:var(--muted);border-color:var(--line-2)} .pill.draft{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.5rem} .form-grid label{display:flex;flex-direction:column;gap:.4rem;font-size:.74rem;color:var(--muted); text-transform:uppercase;letter-spacing:.06em;font-weight:600} .form-grid .full{grid-column:1/-1} .batch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem} .card{background:linear-gradient(180deg, var(--panel-2), var(--panel));border:1px solid var(--line); border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--shadow-sm)} .card h2{margin-top:0;font-size:1.02rem;letter-spacing:.01em} .card.center{text-align:center} .kv{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);align-items:center} .kv:last-child{border-bottom:none} .kv span{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600} code.big{font-size:1.1rem;font-weight:700;letter-spacing:.05em;background:var(--accent-soft);padding:.25rem .6rem} .qr{width:220px;height:220px;background:#fff;border-radius:var(--r-sm);padding:10px;box-shadow:var(--shadow)} .danger-zone{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;gap:.6rem;flex-wrap:wrap} /* ---------- redaction UI ---------- */ .redact-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap; background:color-mix(in srgb, var(--panel) 82%, transparent);backdrop-filter:blur(10px); border:1px solid var(--line);border-radius:var(--r);padding:.75rem 1rem;margin-bottom:1rem;position:sticky;top:66px;z-index:5;box-shadow:var(--shadow-sm)} .redact-toolbar .hint{margin:0;flex:1;text-align:left} .redact-status{min-height:1.4rem;margin-bottom:.5rem;font-size:.9rem} .redact-status.busy{color:var(--accent-2)} .redact-status.ok{color:var(--ok)} .redact-status.err{color:var(--err)} .redact-page{margin-bottom:1.5rem} .redact-page-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;font-weight:600} .redact-canvas-wrap{position:relative;width:100%;max-width:820px;margin:0 auto;border:1px solid var(--line); background:#fff;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow)} .redact-canvas-wrap img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none} .redact-overlay{position:absolute;inset:0;cursor:crosshair} .redact-box{position:absolute;background:#000;border:1px solid #000;cursor:pointer} .redact-box.drawing{background:rgba(0,0,0,.55);border:1px dashed var(--accent-2)} /* ============================================================ Landing page ============================================================ */ .lp-hero{position:relative;overflow:hidden;text-align:center;padding:4.5rem 0 3.5rem; border-bottom:1px solid var(--line); background: radial-gradient(720px 340px at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%), linear-gradient(170deg,#0a1113 0%,#0b1417 55%,#0a1214 100%)} .lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background:linear-gradient(transparent 96%, color-mix(in srgb,var(--accent) 8%, transparent) 96%) 0 0/100% 34px, linear-gradient(90deg, transparent 96%, color-mix(in srgb,var(--accent) 8%, transparent) 96%) 0 0/34px 100%; -webkit-mask-image:radial-gradient(600px 300px at 50% 0%, #000, transparent 70%); mask-image:radial-gradient(600px 300px at 50% 0%, #000, transparent 70%)} .lp-hero>.container{position:relative;z-index:1} .lp-hero .lead{font-size:1.18rem;color:#c2cbd2} .lp-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700; color:var(--accent-2);margin-bottom:.7rem;padding:.3rem .8rem;border:1px solid var(--accent-border); border-radius:999px;background:var(--accent-softer)} .lp-hero h1{font-size:3.2rem;margin:.4rem 0 1rem;letter-spacing:-.03em;font-weight:800; background:linear-gradient(92deg,#ffffff 30%, color-mix(in srgb, var(--accent) 55%, #fff)); -webkit-background-clip:text;background-clip:text;color:transparent} .lp-verify{margin-top:-2.75rem;position:relative;z-index:2;box-shadow:var(--shadow-lg)} .lp-verify h2{margin-top:0;text-align:center;font-size:1.4rem} .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:3.75rem 0} .pillar{background:linear-gradient(180deg, var(--panel-2), var(--panel));border:1px solid var(--line); border-radius:var(--r-lg);padding:1.7rem;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)} .pillar:hover{transform:translateY(-4px);border-color:var(--accent-border);box-shadow:var(--shadow)} .pillar-icon{font-size:1.7rem;margin-bottom:.6rem;display:inline-grid;place-items:center;width:3rem;height:3rem; border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--accent-border)} .pillar h3{margin:.3rem 0 .5rem;font-size:1.08rem} .pillar p{color:var(--muted);margin:0;font-size:.93rem} .story{max-width:760px;margin:4.5rem auto;text-align:center} .story h2{font-size:2rem;margin:.2rem 0 1.3rem} .story p{color:#c4ccd2;font-size:1.05rem;text-align:left;margin:0 0 1rem} .story strong{color:var(--text)} .how{margin:4.5rem 0 2rem;text-align:center} .how h2{font-size:2rem;margin-bottom:2rem} .how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;text-align:left} .how-step{background:linear-gradient(180deg, var(--panel-2), var(--panel));border:1px solid var(--line); border-radius:var(--r-lg);padding:1.5rem;position:relative;transition:transform .2s var(--ease),border-color .2s var(--ease)} .how-step:hover{transform:translateY(-4px);border-color:var(--accent-border)} .how-step span{display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%; background:var(--accent);color:var(--accent-ink);font-weight:800;margin-bottom:.8rem;box-shadow:0 0 0 5px var(--accent-soft)} .how-step h4{margin:.2rem 0 .45rem;font-size:1rem} .how-step p{color:var(--muted);margin:0;font-size:.9rem} .standards{max-width:780px;margin:4.5rem auto 2rem;text-align:center} .standards h2{font-size:1.9rem;margin:.2rem 0 1.5rem} .standards-list{list-style:none;padding:0;margin:0;text-align:left;display:grid;gap:.7rem} .standards-list li{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:var(--r-sm);padding:1rem 1.15rem;color:var(--muted);font-size:.96rem; transition:border-color .18s var(--ease),background .18s var(--ease)} .standards-list li:hover{background:var(--panel-2);border-left-color:var(--accent-2)} .standards-list strong{color:var(--text)} /* ============================================================ Batch Brand ============================================================ */ .accent-text{color:var(--accent-2)} .notice{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));color:#ecd7a4; padding:.8rem 1rem;border-radius:var(--r-sm);margin-bottom:1rem;font-size:.9rem} .notice code{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)} .brand-form{display:flex;flex-direction:column;gap:1.15rem;max-width:640px} .field{display:flex;flex-direction:column;gap:.45rem} .field-label{font-size:.85rem;color:var(--muted);font-weight:600} .field-label em{font-style:normal;opacity:.7;font-weight:400} .brand-form input[type=text],.brand-form input[type=file]{width:100%} .chip-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:-.3rem} .chip-hint{font-size:.8rem;color:var(--muted)} .chip{background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);border-radius:999px; padding:.3rem .8rem;font-size:.82rem;cursor:pointer;transition:.15s var(--ease)} .chip:hover{border-color:var(--accent-border);color:var(--accent-2);background:var(--panel-3)} .file-list{display:flex;flex-direction:column;gap:.3rem} .file-list-head{font-size:.8rem;color:var(--accent-2);font-weight:700;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.04em} .file-row{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;padding:.45rem .7rem; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm)} .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .file-size{color:var(--muted);flex:none} .toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap; background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line); border-radius:var(--r);padding:.8rem 1.1rem;margin-bottom:1.2rem;box-shadow:var(--shadow-sm)} .toolbar .hint{color:var(--muted);font-size:.82rem;text-align:left;margin:0} .check{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;cursor:pointer;user-select:none} .check input{width:auto} .brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.15rem} .brand-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} .brand-card:hover{transform:translateY(-3px);border-color:var(--accent-border);box-shadow:var(--shadow)} .brand-thumb{position:relative;aspect-ratio:3/4;background:#0b0f14;display:grid;place-items:center;overflow:hidden} .brand-thumb img{width:100%;height:100%;object-fit:cover;object-position:top} .brand-spinner{position:absolute;width:26px;height:26px;border-radius:50%; border:3px solid rgba(255,255,255,.14);border-top-color:var(--accent-2);animation:bspin .8s linear infinite} .brand-card[data-status="done"] .brand-spinner, .brand-card[data-status="error"] .brand-spinner{display:none} @keyframes bspin{to{transform:rotate(360deg)}} .brand-meta{padding:.75rem .8rem;display:flex;flex-direction:column;gap:.45rem} .brand-name{font-size:.83rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brand-status{min-height:1.3rem;font-size:.8rem;color:var(--muted)} .brand-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap} .pub-check{font-size:.8rem;color:var(--muted)} .mini-link{font-size:.8rem} .tag{display:inline-block;padding:.16rem .55rem;border-radius:6px;font-size:.7rem;font-weight:700; background:rgba(127,140,141,.16);color:var(--muted);border:1px solid var(--line-2);letter-spacing:.02em} .tag.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)} .tag.err{background:var(--err-soft);color:#f7b6ae;border-color:color-mix(in srgb,var(--err) 35%,transparent)} .tag.pub{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-border)} .publish-result{margin:1.2rem 0} .pub-ok{background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent); border-radius:var(--r-sm);padding:.9rem 1.1rem;font-size:.9rem} .pub-row{margin-top:.4rem;font-size:.85rem} .muted-inline{color:var(--muted);font-size:.85em} /* ============================================================ Incoming queue + nav badge ============================================================ */ .nav-badge{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem; border-radius:999px;background:var(--err);color:#fff;font-size:.68rem;font-weight:800;line-height:1; box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 22%,transparent)} .incoming-card .brand-thumb{cursor:pointer} .incoming-card .brand-meta{gap:.55rem} .ai-read{font-size:.8rem;color:var(--accent-2);font-weight:600} .cap{font-size:.78rem;color:var(--muted);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .incoming-card select,.incoming-card .batch-input,.incoming-card .new-prod input{width:100%;font-size:.85rem;padding:.5rem .55rem} .new-prod{display:flex;flex-direction:column;gap:.4rem} .row-msg{font-size:.8rem;min-height:1rem} .row-msg.ok{color:var(--ok)} .row-msg.err{color:#f7b6ae} /* ---------- responsive ---------- */ @media (max-width:820px){ .pillars,.how-grid{grid-template-columns:1fr 1fr} .lp-hero{padding:3.25rem 0 2.75rem} .lp-hero h1{font-size:2.35rem} } @media (max-width:640px){ .container{padding:1.75rem 1.1rem 3.5rem} .form-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .site-header{padding:.7rem 1rem} .site-header nav{gap:.1rem} .site-header nav a,.linkbtn{padding:.4rem .5rem;font-size:.74rem} .hero h1{font-size:1.9rem} } @media (max-width:520px){ .pillars,.how-grid{grid-template-columns:1fr} .lp-hero h1{font-size:2rem} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} }