:root{--bg: #090c10;--surface: #131a22;--surface-2: #1b242f;--surface-3: #232e3b;--line: rgba(255, 255, 255, .09);--line-strong: rgba(255, 255, 255, .16);--text: #eaf0f6;--muted: #94a3b4;--primary: #10b981;--primary-strong: #059669;--primary-ink: #04140d;--accent: #ea580c;--danger: #f87171;--warning: #fbbf24;--r-sm: 10px;--r: 16px;--r-lg: 22px;--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);--shadow-2: 0 12px 32px rgba(0, 0, 0, .45);--glow: 0 0 0 4px rgba(16, 185, 129, .22);--step: .2s cubic-bezier(.2, .8, .3, 1);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--text);font-family:Nunito Sans,system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.5;background:radial-gradient(1200px 600px at 50% -10%,rgba(16,185,129,.14),transparent 60%),radial-gradient(900px 500px at 100% 0%,rgba(59,130,246,.08),transparent 55%),var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:Rubik,system-ui,sans-serif;letter-spacing:-.01em;margin:0}.app{display:flex;flex-direction:column;min-height:100%;max-width:460px;margin:0 auto;padding:20px 16px calc(24px + env(safe-area-inset-bottom));gap:20px}@media (min-width: 768px){.app{max-width:720px;padding-top:32px;gap:24px}}@media (min-width: 1080px){.app{max-width:1120px;padding:40px 32px 48px;gap:28px}.app__title{font-size:1.45rem}.brand{font-size:1.2rem}}.app__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;font-family:Rubik,sans-serif;font-weight:600;font-size:1.05rem}.brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,var(--primary),var(--primary-strong));color:var(--primary-ink);box-shadow:var(--shadow-1)}.brand__mark svg{width:19px;height:19px}.secure-note{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted)}.secure-note svg{width:14px;height:14px;color:var(--primary)}.app__title{font-size:1.15rem}.steps{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}.steps__dot{width:22px;height:4px;border-radius:999px;background:var(--surface-3);transition:background var(--step),width var(--step)}.steps__dot--active{background:linear-gradient(90deg,var(--primary),var(--primary-strong));width:30px}.card{background:linear-gradient(180deg,var(--surface),rgba(19,26,34,.86));border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-2)}.section-title{display:flex;align-items:center;gap:8px;font-family:Rubik,sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.section-title svg{width:15px;height:15px;color:var(--primary)}.muted{color:var(--muted);font-size:.87rem;margin:0}.product-grid{display:grid;grid-template-columns:1fr;gap:18px}@media (min-width: 700px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}.product{overflow:hidden;padding:0;height:100%;transition:transform var(--step),border-color var(--step)}@media (hover: hover){.product:hover{transform:translateY(-3px);border-color:var(--line-strong)}}.product__media{position:relative;margin:0}.product__image{width:100%;aspect-ratio:4 / 3;object-fit:cover;display:block;background:var(--surface-2)}.product__media:after{content:"";position:absolute;inset:auto 0 0 0;height:56%;background:linear-gradient(to top,rgba(9,12,16,.92),transparent);pointer-events:none}.product__stock{position:absolute;top:12px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:.73rem;font-weight:700;background:#090c10c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line)}.product__stock--ok{color:var(--primary)}.product__stock--low{color:var(--warning)}.product__stock--out{color:var(--danger)}.product__body{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1}.product__body .button{margin-top:auto}.product__name{font-size:1.06rem;line-height:1.3}.product__description{color:var(--muted);font-size:.87rem;margin:0}.product__price{font-family:Rubik,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.94rem}.row--total{font-family:Rubik,sans-serif;font-weight:700;font-size:1.2rem;border-top:1px dashed var(--line-strong);padding-top:14px;margin-top:2px}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:14px;padding:15px 18px;font-family:Rubik,sans-serif;font-size:1rem;font-weight:600;min-height:50px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(145deg,var(--primary),var(--primary-strong));color:var(--primary-ink);box-shadow:0 6px 18px #10b98142;transition:transform var(--step),box-shadow var(--step),filter var(--step)}.button svg{width:18px;height:18px}@media (hover: hover){.button:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 10px 24px #10b98157}}.button:active:not(:disabled){transform:translateY(1px) scale(.995)}.button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.button--ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong);box-shadow:none}@media (hover: hover){.button--ghost:hover:not(:disabled){background:var(--surface-2);filter:none}}:where(button,a,input,select):focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:12px}.field{display:flex;flex-direction:column;gap:6px}.field__label{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}.field__input{background:var(--surface-2);border:1px solid var(--line);border-radius:13px;color:var(--text);padding:13px 14px;font-size:1rem;font-family:inherit;min-height:50px;width:100%;transition:border-color var(--step),box-shadow var(--step),background var(--step)}.field__input::placeholder{color:#63748a}.field__input:focus{outline:none;background:var(--surface-3);border-color:var(--primary);box-shadow:var(--glow)}.field__input[aria-invalid=true]{border-color:var(--danger)}.field__error{display:flex;align-items:center;gap:5px;color:var(--danger);font-size:.78rem}.field-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-number{position:relative}.card-number__brand{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;height:34px;padding:6px 9px;border-radius:8px;background:#fff;box-shadow:var(--shadow-1);pointer-events:none}.card-number__brand svg{height:100%;width:auto;display:block}.card-number__brand--visa svg{height:auto;width:44px}.card-number .field__input{padding-right:88px;font-variant-numeric:tabular-nums;letter-spacing:.04em}.card-preview{position:relative;border-radius:18px;padding:18px;min-height:172px;display:flex;flex-direction:column;justify-content:space-between;color:#f4f8ff;background:radial-gradient(120% 120% at 0% 0%,rgba(16,185,129,.4),transparent 55%),linear-gradient(145deg,#1f2a37,#0d141d);border:1px solid var(--line-strong);box-shadow:var(--shadow-2);overflow:hidden}.card-preview:after{content:"";position:absolute;width:260px;height:260px;right:-110px;top:-130px;border-radius:50%;background:#ffffff0d}.card-preview__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.card-preview__chip{width:42px;height:31px;border-radius:7px;background:linear-gradient(150deg,#f5d087,#b8862f);box-shadow:inset 0 0 0 1px #00000040}.card-preview__number{font-family:Rubik,sans-serif;font-size:1.28rem;letter-spacing:.1em;font-variant-numeric:tabular-nums;word-spacing:.16em}.card-preview__meta{display:flex;gap:22px;font-size:.78rem}.card-preview__meta span{display:block;color:#f4f8ff99;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}.card-preview__meta strong{font-weight:600;letter-spacing:.04em}.card-preview .card-number__brand{position:static;transform:none;height:30px}.backdrop{border:none;margin:0;padding:0;max-width:none;max-height:none;width:100%;color:var(--text);position:fixed;top:0;right:0;bottom:0;left:0;background:#05080ca8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;z-index:10}.backdrop__sheet{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-bottom:none;border-radius:26px 26px 0 0;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;padding:10px 18px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:13px;box-shadow:0 -18px 50px #0000008c;animation:sheet-up .28s cubic-bezier(.2,.9,.25,1)}.backdrop__handle{width:42px;height:4px;border-radius:999px;background:var(--line-strong);margin:2px auto 8px}@keyframes sheet-up{0%{transform:translateY(14%);opacity:.6}}.card-summary{display:flex;align-items:center;gap:9px}.status{text-align:center;align-items:center;gap:12px;padding:26px 18px}.status__icon{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;margin-bottom:2px}.status__icon svg{width:34px;height:34px}.status__icon--approved{background:#10b98129;color:var(--primary);box-shadow:0 0 0 8px #10b98112}.status__icon--declined,.status__icon--error{background:#f8717129;color:var(--danger);box-shadow:0 0 0 8px #f8717112}.status__icon--pending{background:#fbbf2429;color:var(--warning);box-shadow:0 0 0 8px #fbbf2412}.status__icon--pending svg{animation:spin 1.1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status__badge{font-family:Rubik,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}.status__badge--approved{color:var(--primary)}.status__badge--declined,.status__badge--error{color:var(--danger)}.status__badge--pending{color:var(--warning)}.status__amount{font-family:Rubik,sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.02em}.status__reference{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px}.alert{display:flex;align-items:flex-start;gap:9px;background:#2b1a1d;border:1px solid #5c2b31;color:#fecaca;border-radius:13px;padding:12px 14px;font-size:.88rem}.alert svg{width:17px;height:17px;flex-shrink:0;margin-top:2px}.skeleton{border-radius:var(--r-lg);height:320px;background:linear-gradient(100deg,var(--surface) 30%,var(--surface-3) 50%,var(--surface) 70%);background-size:220% 100%;animation:shimmer 1.3s ease-in-out infinite}@keyframes shimmer{to{background-position:-140% 0}}.stack{display:flex;flex-direction:column;gap:10px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.checkout__grid{display:flex;flex-direction:column;gap:14px}.checkout__fields{display:flex;flex-direction:column;gap:14px;min-width:0}@media (min-width: 1080px){.checkout__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}.checkout__aside{position:sticky;top:32px;order:2}.checkout__fields{order:1}.card-preview{min-height:208px;padding:22px}.card-preview__number{font-size:1.45rem}}@media (min-width: 1080px){.backdrop{align-items:center;padding:32px}.backdrop__sheet{border:1px solid var(--line);border-radius:var(--r-lg);max-width:480px;max-height:84vh;padding:22px;box-shadow:0 30px 70px #0009;animation:sheet-in .24s cubic-bezier(.2,.9,.25,1)}.backdrop__handle{display:none}.status{max-width:560px;margin:0 auto;padding:40px 24px}}@keyframes sheet-in{0%{transform:scale(.97);opacity:0}}