:root { --bg:#06060b; --bg-soft:#0b0b14; --surface:rgba(255,255,255,.035); --surface2:rgba(255,255,255,.025); --raised:rgba(255,255,255,.07); --border:rgba(255,255,255,.09); --card:rgba(255,255,255,.035); --text:#f2f2f7; --muted:#9595aa; --brand:#7c5cff; --brand-2:#22d3ee; --green:#25d366; --red:#ff4d8d; --amber:#ffb800; --radius:22px; --max:1180px; --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html, * { scrollbar-width:thin; scrollbar-color:rgba(124,92,255,.5) transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(124,92,255,.5); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#7c5cff; }
html { color-scheme:dark; }
body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
.hidden { display:none !important; }
h1 { font-size:clamp(2rem,4.8vw,3.2rem); line-height:1.1; letter-spacing:-.03em; font-weight:800; }
h2 { font-size:clamp(1.4rem,2.6vw,1.75rem); letter-spacing:-.02em; font-weight:800; margin-bottom:14px; }
h3 { font-size:1.05rem; letter-spacing:-.01em; font-weight:800; }
a { color:inherit; text-decoration:none; }
.muted { color:var(--muted); font-size:.88rem; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#c8c8dd; padding:7px 15px; border-radius:100px; border:1px solid var(--border); background:var(--card); margin-bottom:18px; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

.bg-fx { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg-fx::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%); opacity:.6; }
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.4; }
.orb-1 { width:620px; height:620px; background:radial-gradient(circle,#7c5cff,transparent 70%); top:-260px; left:-160px; animation:float1 18s ease-in-out infinite; }
.orb-2 { width:540px; height:540px; background:radial-gradient(circle,#22d3ee,transparent 70%); top:120px; right:-200px; animation:float2 22s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(60px,50px) scale(1.1); } }
@keyframes float2 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-70px,60px) scale(1.08); } }
@media (prefers-reduced-motion:reduce) { .orb { animation:none; } }
.container { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:22px; }

.header { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(6,6,11,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--border); box-shadow:0 12px 40px -24px #000; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:18px; height:74px; }
.logo { display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.12rem; letter-spacing:-.03em; color:var(--text); }
.logo-mark { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(140deg,#7c5cff,#22d3ee); font-size:1rem; font-weight:800; color:#fff; box-shadow:0 8px 22px -8px rgba(124,92,255,.9), inset 0 1px 0 rgba(255,255,255,.4); }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a, .nav-cart { display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:600; color:#b9b9cb; white-space:nowrap; padding:9px 14px; border-radius:100px; transition:color .25s, background .25s; }
.nav-links a:hover, .nav-cart:hover, .nav-links a[aria-current="page"] { color:#fff; background:rgba(255,255,255,.06); }
.nav-actions { display:flex; align-items:center; gap:8px; }
.nav-actions .button { padding:11px 20px; font-size:.86rem; }
.nav-cart-count { display:inline-block; min-width:1.4em; padding:0 .4em; border-radius:999px; background:var(--brand); color:#fff; font-size:.75em; font-weight:700; line-height:1.4; text-align:center; }
.nav-cart-count[hidden] { display:none; }
.account-menu { position:relative; }

.account-dropdown { position:absolute; right:0; top:calc(100% + 10px); z-index:200; min-width:220px; padding:6px; display:flex; flex-direction:column; gap:2px; background:#12121c; border:1px solid var(--border); border-radius:14px; box-shadow:0 22px 50px -18px rgba(0,0,0,.85); }
.account-dropdown[hidden] { display:none; }
.account-dropdown-email { padding:8px 12px 10px; margin-bottom:4px; border-bottom:1px solid var(--border); font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-dropdown a, .account-dropdown button { display:block; width:100%; padding:9px 12px; border:0; border-radius:9px; background:none; box-shadow:none; font:inherit; font-size:.92rem; font-weight:600; color:#d6d6e4; text-align:left; text-decoration:none; cursor:pointer; }
.account-dropdown a:hover, .account-dropdown button:hover { background:rgba(255,255,255,.07); color:#fff; transform:none; }

.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:118px 22px 110px; }
.page-head { margin-bottom:30px; }
.page-head p { margin-top:10px; color:var(--muted); font-size:1rem; max-width:62ch; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:0 20px 50px -30px #000; }
.section { margin-bottom:36px; }

label.field { display:flex; flex-direction:column; font-size:.8rem; color:var(--muted); margin-bottom:14px; }
label.field > span { margin-bottom:6px; }
input, textarea, select { width:100%; padding:12px 15px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.035); color:var(--text); font-family:inherit; font-size:.95rem; transition:border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,92,255,.22); }
textarea { resize:vertical; min-height:80px; }

button, .button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:100px; border:0; background:linear-gradient(100deg,#7c5cff,#a855f7 45%,#22d3ee); background-size:180% 100%; color:#fff; font-family:inherit; font-weight:700; font-size:.95rem; letter-spacing:-.01em; line-height:1.2; cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:0 10px 34px -10px rgba(124,92,255,.85), inset 0 1px 0 rgba(255,255,255,.28); transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background-position .3s; }
button:hover, .button:hover { transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(124,92,255,1); background-position:100% 0; }
button.secondary, .button.secondary { background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text); box-shadow:none; backdrop-filter:blur(10px); }
button.secondary:hover, .button.secondary:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); box-shadow:none; }
button.danger { background:transparent; border:1px solid rgba(255,77,141,.4); color:var(--red); box-shadow:none; padding:8px 14px; font-size:.8rem; }
button.danger:hover { background:rgba(255,77,141,.08); box-shadow:none; }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.status { font-size:.85rem; min-height:1.2em; margin-top:12px; color:var(--muted); }
.status.err { color:var(--red); }
.status.ok { color:var(--green); }

.layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
.aside { position:sticky; top:100px; }
.line { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--border); }
.line:first-child { border-top:none; padding-top:0; }
.line-main { min-width:0; }
.line-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.line-main small { color:var(--muted); font-size:.78rem; }
.line-end { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.line-end b { font-size:.95rem; }
.line-end button { padding:6px 10px; font-size:.75rem; }
.total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:16px; margin-top:6px; border-top:1px solid var(--border); }
.total b { font-size:1.4rem; letter-spacing:-.02em; }
.aside .button, .aside button.primary { width:100%; margin-top:14px; }
.empty { text-align:center; padding:40px 16px; color:var(--muted); }
.empty .button { margin-top:14px; }

fieldset.tpl-fields { border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:14px; background:var(--surface2); }
fieldset.tpl-fields legend { padding:0 8px; font-weight:700; font-size:.92rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.confirm { text-align:center; padding:28px 12px; }
.confirm .check { width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:rgba(37,211,102,.14); color:var(--green); font-size:1.6rem; font-weight:700; }
.pay-box { text-align:left; margin-top:18px; padding:16px; border-radius:14px; background:var(--surface2); border:1px solid var(--border); }
.pay-box p { white-space:pre-wrap; font-size:.9rem; margin-top:8px; }

@media (max-width:900px) {
  .layout { grid-template-columns:minmax(0,1fr); }
  .aside { position:static; }
}
@media (max-width:760px) {
  .nav-links { display:none; }
}
@media (max-width:560px) {
  .nav { height:64px; }
  .wrap { padding:100px 14px 110px; }
  .card { padding:18px; }
  .grid2 { grid-template-columns:1fr; }
  .nav-actions .button { padding:9px 16px; font-size:.82rem; }
}