/* ============================================================
   AI-ANCHOR: CSS_V99110_STORE — toko link-in-bio publik /u/<handle> + preview di /studio.
   Tema toko = konten milik member (seperti Linktree/Stan), sengaja punya palet sendiri; UI AIBIO tetap ikut brand.css.
   Kelas halaman: as-t-<tema> · as-b-<gaya tombol> · as-c-<sudut> · as-f-<font> (kunci = [JS:STORE:OPTIONS]).
   ============================================================ */
[hidden] { display: none !important; }
.as-body { margin: 0; min-width: 320px; background: #000; }

/* ---------- tema (variabel) ---------- */
/* TASK-067: --as-mut 6 tema disesuaikan (hue sama, terang/gelap saja) → ≥ 4.5:1 di kartu, latar & glow (dihitung, bukan dikira) */
.as-t-midnight { --as-bg: #000000; --as-bg2: radial-gradient(120% 55% at 50% 0%, rgba(77, 126, 255, .24), rgba(77, 126, 255, 0) 62%); --as-card: #0d0d0d; --as-card2: #171717; --as-txt: #e8f2ee; --as-mut: #a3aebd; --as-acc: #4d7eff; --as-acc-txt: #000000; --as-acc-soft: rgba(77, 126, 255, .16); --as-line: rgba(255, 255, 255, .08); color-scheme: dark; }
.as-t-aurora { --as-bg: #050a18; --as-bg2: radial-gradient(80% 45% at 15% 0%, rgba(122, 160, 255, .38), rgba(122, 160, 255, 0) 60%), radial-gradient(70% 45% at 95% 12%, rgba(61, 255, 176, .2), rgba(61, 255, 176, 0) 60%); --as-card: rgba(255, 255, 255, .06); --as-card2: rgba(255, 255, 255, .1); --as-txt: #eef3ff; --as-mut: #cdd5e8; --as-acc: #c8d8ff; --as-acc-txt: #050a18; --as-acc-soft: rgba(200, 216, 255, .14); --as-line: rgba(255, 255, 255, .1); color-scheme: dark; }
.as-t-paper { --as-bg: #f6f1e7; --as-bg2: none; --as-card: #ffffff; --as-card2: #efe8da; --as-txt: #1b1a17; --as-mut: #6b6457; --as-acc: #1b1a17; --as-acc-txt: #f6f1e7; --as-acc-soft: rgba(27, 26, 23, .08); --as-line: rgba(27, 26, 23, .12); color-scheme: light; }
.as-t-mint { --as-bg: #04140f; --as-bg2: radial-gradient(110% 50% at 50% 0%, rgba(61, 255, 176, .18), rgba(61, 255, 176, 0) 60%); --as-card: #0a1f18; --as-card2: #10291f; --as-txt: #e6fff4; --as-mut: #8fb5a5; --as-acc: #3dffb0; --as-acc-txt: #01140d; --as-acc-soft: rgba(61, 255, 176, .14); --as-line: rgba(61, 255, 176, .14); color-scheme: dark; }
.as-t-sunset { --as-bg: #1a0b12; --as-bg2: linear-gradient(180deg, #3a1420 0%, rgba(58, 20, 32, 0) 55%); --as-card: rgba(255, 255, 255, .06); --as-card2: rgba(255, 255, 255, .1); --as-txt: #ffede6; --as-mut: #d2a99b; --as-acc: #ff8a5b; --as-acc-txt: #1a0b12; --as-acc-soft: rgba(255, 138, 91, .16); --as-line: rgba(255, 255, 255, .1); color-scheme: dark; }
.as-t-mono { --as-bg: #ffffff; --as-bg2: none; --as-card: #ffffff; --as-card2: #f2f2f2; --as-txt: #0a0a0a; --as-mut: #5c5c5c; --as-acc: #0a0a0a; --as-acc-txt: #ffffff; --as-acc-soft: rgba(0, 0, 0, .06); --as-line: #0a0a0a; color-scheme: light; }
.as-t-neon { --as-bg: #050505; --as-bg2: radial-gradient(90% 40% at 50% 0%, rgba(198, 255, 61, .12), rgba(198, 255, 61, 0) 60%); --as-card: #0e0e0e; --as-card2: #161616; --as-txt: #f2ffe6; --as-mut: #97a38a; --as-acc: #c6ff3d; --as-acc-txt: #0a0a0a; --as-acc-soft: rgba(198, 255, 61, .14); --as-line: rgba(198, 255, 61, .18); color-scheme: dark; }
.as-t-blush { --as-bg: #fff1f3; --as-bg2: radial-gradient(100% 45% at 50% 0%, rgba(224, 69, 123, .12), rgba(224, 69, 123, 0) 60%); --as-card: #ffffff; --as-card2: #ffe3e8; --as-txt: #2a1a1f; --as-mut: #6a4d55; --as-acc: #e0457b; --as-acc-txt: #ffffff; --as-acc-soft: rgba(224, 69, 123, .1); --as-line: rgba(224, 69, 123, .18); color-scheme: light; }
/* TASK-033 B3 (owner #35 "lebih berwarna & lebih banyak"): +6 tema → 14. Kunci WAJIB sama dengan [JS:STORE:OPTIONS] theme + vps/server.js. */
.as-t-ocean { --as-bg: #03111c; --as-bg2: radial-gradient(110% 50% at 50% 0%, rgba(34, 211, 238, .22), rgba(34, 211, 238, 0) 62%); --as-card: #071d2b; --as-card2: #0b2638; --as-txt: #e6f7ff; --as-mut: #86a9bd; --as-acc: #22d3ee; --as-acc-txt: #03111c; --as-acc-soft: rgba(34, 211, 238, .16); --as-line: rgba(34, 211, 238, .16); color-scheme: dark; }
.as-t-grape { --as-bg: #0f0a1f; --as-bg2: radial-gradient(85% 45% at 15% 0%, rgba(167, 139, 250, .32), rgba(167, 139, 250, 0) 60%), radial-gradient(70% 40% at 95% 10%, rgba(236, 72, 153, .18), rgba(236, 72, 153, 0) 60%); --as-card: rgba(255, 255, 255, .06); --as-card2: rgba(255, 255, 255, .1); --as-txt: #f3eeff; --as-mut: #c6bce0; --as-acc: #a78bfa; --as-acc-txt: #0f0a1f; --as-acc-soft: rgba(167, 139, 250, .16); --as-line: rgba(255, 255, 255, .1); color-scheme: dark; }
.as-t-gold { --as-bg: #0b0906; --as-bg2: radial-gradient(100% 45% at 50% 0%, rgba(245, 197, 66, .18), rgba(245, 197, 66, 0) 60%); --as-card: #15110a; --as-card2: #1d180e; --as-txt: #fff8e6; --as-mut: #b3a47e; --as-acc: #f5c542; --as-acc-txt: #0b0906; --as-acc-soft: rgba(245, 197, 66, .14); --as-line: rgba(245, 197, 66, .18); color-scheme: dark; }
.as-t-candy { --as-bg: #fff6ee; --as-bg2: linear-gradient(160deg, rgba(255, 95, 162, .2) 0%, rgba(255, 184, 107, .18) 55%, rgba(255, 246, 238, 0) 80%); --as-card: #ffffff; --as-card2: #ffe9dc; --as-txt: #2b1420; --as-mut: #704656; --as-acc: #ff4f9a; --as-acc-txt: #2b1420; --as-acc-soft: rgba(255, 79, 154, .12); --as-line: rgba(255, 79, 154, .2); color-scheme: light; }
.as-t-lava { --as-bg: #140505; --as-bg2: radial-gradient(90% 45% at 20% 0%, rgba(255, 77, 77, .26), rgba(255, 77, 77, 0) 60%), radial-gradient(70% 40% at 90% 8%, rgba(255, 159, 67, .16), rgba(255, 159, 67, 0) 60%); --as-card: #1e0909; --as-card2: #2a0d0d; --as-txt: #ffecec; --as-mut: #c99a9a; --as-acc: #ff4d4d; --as-acc-txt: #140505; --as-acc-soft: rgba(255, 77, 77, .16); --as-line: rgba(255, 77, 77, .18); color-scheme: dark; }
.as-t-sky { --as-bg: #eef6ff; --as-bg2: radial-gradient(100% 45% at 50% 0%, rgba(22, 105, 224, .14), rgba(22, 105, 224, 0) 60%); --as-card: #ffffff; --as-card2: #e1efff; --as-txt: #0b1b33; --as-mut: #435a75; --as-acc: #1669e0; --as-acc-txt: #ffffff; --as-acc-soft: rgba(22, 105, 224, .1); --as-line: rgba(22, 105, 224, .18); color-scheme: light; }

/* ---------- halaman ---------- */
.as-page { --as-r: 14px; --as-r-card: 20px; position: relative; min-height: 100vh; min-height: 100dvh; background-color: var(--as-bg); background-image: var(--as-bg2); background-repeat: no-repeat; color: var(--as-txt); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.as-page *, .as-page *::before, .as-page *::after { box-sizing: border-box; }
.as-page h1, .as-page h2, .as-page h3, .as-page p, .as-page ul { margin: 0; }
.as-wrap { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; margin: 0 auto; padding: 48px 16px 48px; }
.as-c-square { --as-r: 4px; --as-r-card: 6px; }
.as-c-round { --as-r: 14px; --as-r-card: 20px; }
.as-c-pill { --as-r: 999px; --as-r-card: 26px; }
.as-f-bakbak .as-name, .as-f-bakbak .as-offer-title, .as-f-bakbak .as-state h1 { font-family: 'Bakbak One', Impact, sans-serif; font-weight: 400; letter-spacing: .01em; }
.as-f-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }
.as-f-serif { font-family: Georgia, 'Times New Roman', serif; }

/* ---------- header ---------- */
.as-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.as-avatar { display: flex; line-height: 1; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--as-card); background: var(--as-card2) center / cover no-repeat; box-shadow: 0 0 0 2px var(--as-acc); color: var(--as-acc); font-size: 32px; font-weight: 800; }
.as-name { margin-top: 8px; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.as-handle { color: var(--as-mut); font: 500 14px/1.3 'JetBrains Mono', ui-monospace, monospace; }
.as-bio { max-width: 38ch; color: var(--as-mut); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.as-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.as-social { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--as-card2); color: var(--as-txt); transition: transform .15s ease; }
.as-social:hover { transform: translateY(-2px); }
.as-social svg { width: 20px; height: 20px; }
.as-share { position: absolute; top: -22px; right: -4px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--as-line); border-radius: 50%; background: var(--as-card); color: var(--as-txt); cursor: pointer; }
.as-share svg { width: 18px; height: 18px; }

/* ---------- produk utama (dipin): asset + akses Premium ---------- */
.as-offer { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px; border: 1px solid var(--as-line); border-radius: var(--as-r-card); background: var(--as-card); box-shadow: 0 20px 50px rgba(0, 0, 0, .22); }
.as-offer-tag { align-self: flex-start; padding: 8px 12px; border-radius: 999px; background: var(--as-acc-soft); color: var(--as-acc); color: color-mix(in oklab, var(--as-acc) 62%, #fff); /* TASK-065: aksen di latar aksen-lembut → dicerahkan (fallback warna aksen di browser lama) */ font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.as-c-square .as-offer-tag { border-radius: 4px; }
/* tema terang: aksen cerah di atas as-acc-soft terlalu tipis untuk teks 11 px — pakai warna teks (TASK-034 B3: + candy) */
.as-t-paper .as-offer-tag, .as-t-mono .as-offer-tag, .as-t-candy .as-offer-tag { color: var(--as-txt); }
.as-offer-title { font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; }
.as-offer-sub { color: var(--as-mut); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.as-bullets { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
.as-bullets li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.as-bullets li::before { content: ""; position: absolute; top: .2em; left: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--as-acc-soft); }
.as-bullets li::after { content: ""; position: absolute; top: .42em; left: 7.5px; width: 5px; height: 8px; border-right: 2px solid var(--as-acc); border-bottom: 2px solid var(--as-acc); transform: rotate(45deg); }
.as-t-paper .as-bullets li::after, .as-t-mono .as-bullets li::after, .as-t-candy .as-bullets li::after { border-color: var(--as-txt); }
.as-incl { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--as-line); }
.as-incl h3 { color: var(--as-mut); font: 700 12px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.as-incl ul { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; }
.as-incl li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; }
.as-incl li::before { content: ""; position: absolute; top: .55em; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--as-acc); }
.as-pricebox { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 4px; }
.as-price { font: 800 32px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.02em; }
.as-pricenote { color: var(--as-mut); font-size: 14px; text-align: right; }
.as-offer-note { color: var(--as-mut); font-size: 12px; line-height: 1.5; text-align: center; }

/* ---------- tombol & link (gaya: as-b-*) ---------- */
.as-btn, .as-link { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 16px; border: 2px solid transparent; border-radius: var(--as-r); font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.as-btn:active, .as-link:active { transform: scale(.985); }
.as-cta { background: var(--as-acc); color: var(--as-acc-txt); box-shadow: 0 12px 30px var(--as-acc-soft); }
.as-links { display: flex; flex-direction: column; gap: 12px; }
.as-link { background: var(--as-card2); color: var(--as-txt); }
.as-link span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.as-link svg { flex: none; width: 16px; height: 16px; opacity: .6; }
.as-link::before { content: ""; flex: none; width: 16px; }
.as-b-outline .as-link { border-color: var(--as-txt); background: transparent; }
.as-b-outline .as-cta { box-shadow: none; }
.as-b-soft .as-link { background: var(--as-acc-soft); }
.as-b-soft .as-cta { box-shadow: none; }
.as-b-shadow .as-link { border-color: var(--as-txt); background: var(--as-card); box-shadow: 4px 4px 0 var(--as-acc); }
.as-b-shadow .as-cta { border-color: var(--as-txt); box-shadow: 4px 4px 0 var(--as-txt); }
.as-b-shadow .as-link:active, .as-b-shadow .as-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--as-acc); }

/* ---------- footer ---------- */
.as-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 12px; text-align: center; }
.as-own { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--as-line); border-radius: 999px; background: var(--as-card); color: var(--as-txt); font-size: 14px; font-weight: 700; text-decoration: none; }
.as-powered { display: inline-flex; align-items: center; min-height: 44px; color: var(--as-mut); font-size: 12px; text-decoration: none; }

/* ---------- state: memuat / tidak ada / draft / galat ---------- */
.as-state { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 8px; text-align: center; }
.as-state h1 { font-size: 24px; font-weight: 800; line-height: 1.2; }
.as-state p { max-width: 34ch; color: var(--as-mut); line-height: 1.55; }
.as-state .as-btn { width: auto; min-width: 220px; }
.as-skel { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 24px; }
.as-skel i { display: block; border-radius: 14px; background: var(--as-card2); animation: as-pulse 1.4s ease-in-out infinite; }
@keyframes as-pulse { 50% { opacity: .45; } }
.as-toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 10; padding: 12px 16px; border-radius: 999px; background: rgba(10, 10, 10, .92); color: #ffffff; font: 600 14px/1.3 'Inter', sans-serif; transform: translateX(-50%); }

/* ---------- contoh tema (dipakai pemilih tema di /studio) ---------- */
.as-swatch { position: relative; display: block; width: 100%; height: 86px; overflow: hidden; border: 1px solid var(--as-line); border-radius: 6px; background-color: var(--as-bg); background-image: var(--as-bg2); }
.as-swatch i { position: absolute; right: 14%; left: 14%; height: 13%; border-radius: 4px; background: var(--as-card2); }
.as-swatch i:nth-child(1) { top: 20%; }
.as-swatch i:nth-child(2) { top: 41%; }
.as-swatch i:nth-child(3) { top: 64%; background: var(--as-acc); }

@media (prefers-reduced-motion: reduce) {
	.as-skel i { animation: none; }
	.as-btn, .as-link, .as-social { transition: none; }
}