@import "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=Noto+Naskh+Arabic:wght@400;600&display=swap";:root{--color-bg:#f7f5f4;--color-surface:#eae9e9;--color-text:#201e1d;--color-accent:#0088b0;--color-accent-2:#d6006c;--color-divider:#201e1d29;--color-danger:#8a1c1c;--color-process-yellow:#edbb00;--color-accent-100:#e9f8ff;--color-accent-200:#cbeeff;--color-accent-300:#99e0ff;--color-accent-400:#62c5ee;--color-accent-500:#38a6cf;--color-accent-700:#006786;--color-accent-2-100:#fff1f4;--color-accent-2-200:#ffdee6;--color-accent-2-300:#ffc0d0;--color-accent-2-400:#ff90b1;--color-accent-2-500:#ff458e;--color-accent-2-700:#aa0b56;--color-neutral-300:#d7d3d3;--color-neutral-700:#605d5d;--font-heading:"Source Serif 4", Georgia, "Noto Naskh Arabic", serif;--font-body:"Source Serif 4", Georgia, "Noto Naskh Arabic", serif;--font-heading-weight:600;--radius:20px;--radius-lg:26px;--space-2:10px;--space-3:15px;--space-4:20px;--space-6:30px;--shadow-md:0 3px 10px #2d2b2b29;--shadow-lg:0 12px 32px #2d2b2b38}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;line-height:1.5}h1,h2{font-family:var(--font-heading);font-weight:var(--font-heading-weight);letter-spacing:-.02em}.app-shell{max-width:480px;padding:var(--space-4);padding-bottom:var(--space-6);flex-direction:column;min-height:100dvh;margin-inline:auto;display:flex}.app-header{justify-content:space-between;align-items:center;gap:var(--space-2);padding-block:var(--space-2) var(--space-4);display:flex;position:relative}.app-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);color:var(--color-text);margin:0;font-size:18px;text-decoration:none}.canvas{background:radial-gradient(circle at 20% 10%, var(--color-accent-300) 0, transparent 40%), radial-gradient(circle at 90% 30%, var(--color-accent-2-300) 0, transparent 35%), radial-gradient(circle at 40% 100%, #ffe9a0 0, transparent 40%), var(--color-bg);min-height:100dvh;position:relative;overflow:hidden}.blob{pointer-events:none;border-radius:50%;position:absolute}.blob.b-cyan{background:var(--color-accent-400);opacity:.55;animation:8s ease-in-out infinite drift}.blob.b-magenta{background:var(--color-accent-2-400);opacity:.5}.blob.b-yellow{background:var(--color-process-yellow);opacity:.45}.blob.b-ring{border:20px solid var(--color-accent-2-500);opacity:.35;background:0 0}.dot-screen{pointer-events:none;background-image:radial-gradient(circle,#201e1d2e 30%,#0000 32%);background-size:5px 5px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(115deg,#0000 55%,#000 100%);mask-image:linear-gradient(115deg,#0000 55%,#000 100%)}@keyframes drift{0%,to{transform:translate(0)}50%{transform:translate(14px,-10px)}}.glass{-webkit-backdrop-filter:blur(22px)saturate(1.3);border-radius:var(--radius-lg);background:#ffffff9e;border:1px solid #ffffffe6}.glass-strong{-webkit-backdrop-filter:blur(22px)saturate(1.3);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:#ffffff9e;border:1px solid #ffffffe6}.poster{border-radius:var(--radius-lg);color:#fff;padding:var(--space-4);box-shadow:var(--shadow-md);flex-direction:column;text-decoration:none;display:flex;position:relative;overflow:hidden}.poster:after{content:"";pointer-events:none;mix-blend-mode:multiply;opacity:.55;background-image:radial-gradient(circle,#201e1d38 30%,#0000 32%);background-size:4px 4px;position:absolute;inset:0}.poster>*{position:relative}.poster .poster-kicker{font-family:var(--font-heading);font-weight:var(--font-heading-weight);letter-spacing:.12em;text-transform:uppercase;font-size:11px}.poster .poster-name{font-family:var(--font-heading);font-weight:var(--font-heading-weight);letter-spacing:-.03em;font-size:44px;line-height:1}.poster .glass-chip{-webkit-backdrop-filter:blur(8px);background:#ffffff59;border-radius:999px;padding:4px 12px;font-size:12px}.qr-chip{width:64px;height:64px;color:var(--color-text);font-family:var(--font-heading);font-weight:var(--font-heading-weight);letter-spacing:.08em;background:#fff;border-radius:14px;flex:none;place-items:center;font-size:10px;display:grid}.page-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);letter-spacing:-.02em;margin:0;font-size:34px;line-height:1.05}.section-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);margin:0;font-size:18px}.kicker{font-family:var(--font-heading);font-weight:var(--font-heading-weight);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-2-700);font-size:11px}.muted{color:#201e1d99}.hint{color:#201e1d8c;font-size:12px}.mono{letter-spacing:.06em;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}button,.btn{font-family:var(--font-heading);font-weight:var(--font-heading-weight);cursor:pointer;color:var(--color-text);padding:var(--space-2) var(--space-4);background:0 0;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:6px;font-size:16px;line-height:1.2;text-decoration:none;display:inline-flex}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--color-accent-2);color:#fff}button.primary:hover:not(:disabled){background:var(--color-accent-2-700)}button.dark{background:var(--color-text);color:#fff;min-height:52px}button.secondary{border-color:var(--color-divider);background:#fff9}button.ghost{color:var(--color-accent-700);background:0 0}label{margin-block-end:var(--space-1);font-size:13px;font-weight:600;display:block}input,select{width:100%;font:inherit;color:inherit;padding:12px var(--space-3);border:1px solid var(--color-divider);background:#ffffffd9;border-radius:14px;font-size:16px}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.field-hint{color:#201e1d99;margin-block-start:6px;font-size:12px}.code-cells{grid-template-columns:repeat(6,1fr);gap:8px;margin-block-end:var(--space-2);display:grid}.code-cell{background:var(--color-accent-2-100);border:1px solid var(--color-divider);border-radius:14px;height:56px}.code-cell.filled{border:2px solid var(--color-accent-2);font-family:var(--font-heading);font-weight:var(--font-heading-weight);background:#fff;place-items:center;font-size:24px;display:grid}.kv{justify-content:space-between;gap:var(--space-3);border-block-end:1px solid #201e1d14;padding-block:12px;font-size:14px;display:flex}.kv:last-child{border-block-end:none}.kv .k{color:#201e1d99}.upload-card{border:1.5px dashed var(--color-accent-2-400);border-radius:var(--radius);background:0 0;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;font-size:14px;display:flex}.species-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.species-tile{cursor:pointer;color:#fff;height:118px;font-family:var(--font-heading);font-weight:var(--font-heading-weight);background:linear-gradient(150deg, var(--color-neutral-700), var(--color-neutral-300));border:none;border-radius:22px;justify-content:space-between;align-items:flex-end;padding:16px;font-size:18px;display:flex;position:relative}.species-tile.selected{outline:3px solid var(--color-accent-2);outline-offset:3px}.species-tile .chip{font-family:var(--font-body);background:var(--color-process-yellow);color:var(--color-text);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:400}.locale-switch{background:#ffffff8c;border:1px solid #ffffffe6;border-radius:999px;padding:3px;display:inline-flex}.locale-switch button{font-size:13px;font-family:var(--font-body);color:var(--color-text);background:0 0;border-radius:999px;min-height:0;padding:5px 14px;font-weight:400}.locale-switch button[aria-pressed=true]{background:var(--color-text);color:#fff}.error-banner{color:var(--color-danger);padding:var(--space-2) var(--space-3);background:#f9e3e3;border-radius:999px;font-size:.875rem}.success-banner{color:#067647;padding:var(--space-2) var(--space-3);background:#e5f5ec;border-radius:999px;font-size:.875rem}.field-error{color:var(--color-danger);margin-block-start:var(--space-1);font-size:.8rem}.stack>*+*{margin-block-start:var(--space-3)}.card{padding:var(--space-4)}.button-row{gap:8px;margin-block-start:var(--space-3);display:flex}.button-row>button{flex:1}.step-dots{gap:6px;display:flex}.step-dots span{background:#201e1d1f;border-radius:999px;width:26px;height:6px}.step-dots span.on{background:var(--color-accent-2)}
