/* Wiggo web — mirrors the Android app's light "Wiggo" look (SrcUi palette). */
:root {
	--w-violet: #6c4dff;
	--w-violet-deep: #4a32c4;
	--w-violet-tint: #ede9ff;
	--w-coral: #ff6b6b;
	--w-yellow: #ffd43b;
	--w-midnight: #14122b;
	--w-cloud: #f7f5ff;
	--w-ink: #14122b;
	--w-ink-soft: rgba(20, 18, 43, .62);
	--w-line: rgba(20, 18, 43, .1);
	--w-shadow: 0 10px 24px rgba(108, 77, 255, .12);
	--bs-body-font-family: 'Manrope', system-ui, sans-serif;
	--bs-body-color: var(--w-ink);
	--bs-primary: var(--w-violet);
	--bs-primary-rgb: 108, 77, 255;
	--bs-link-color: var(--w-violet);
}

html { background: var(--w-cloud); }
body {
	min-height: 100vh;
	font-family: 'Manrope', system-ui, sans-serif;
	color: var(--w-ink);
	background:
		radial-gradient(circle at 5% 10%, rgba(108, 77, 255, .10) 0, rgba(108, 77, 255, .10) 280px, transparent 281px),
		radial-gradient(circle at 100% 70%, rgba(255, 212, 59, .28) 0, rgba(255, 212, 59, .28) 260px, transparent 261px),
		linear-gradient(#f1edff, #f7f5ff);
	background-attachment: fixed;
}
.w-title, h1, h2, h3, h4, h5 { font-family: 'Fredoka', 'Manrope', sans-serif; font-weight: 600; color: var(--w-ink); }
.text-secondary { color: var(--w-ink-soft) !important; }

.w-avatar {
	width: 48px; height: 48px; padding: 3px; border: 0; border-radius: 50%;
	background: linear-gradient(135deg, var(--w-yellow), var(--w-coral), var(--w-violet));
}
.w-avatar img, .w-avatar span {
	width: 100%; height: 100%; border-radius: 50%; background: #fff; object-fit: cover;
	display: flex; align-items: center; justify-content: center; color: var(--w-violet); font-size: 1.3rem;
}
.dropdown-menu { border-radius: 18px; border: 1px solid var(--w-line); box-shadow: var(--w-shadow); }

/* cards */
.w-card {
	background: #fff; border: 1px solid var(--w-line); border-radius: 28px;
	box-shadow: var(--w-shadow); padding: 22px;
}
.w-balance .metric { text-align: center; }
.w-balance .metric i { font-size: 1.6rem; }
.w-balance .metric .val { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.8rem; line-height: 1.2; }
.w-balance .metric .lbl { font-size: .85rem; color: var(--w-ink-soft); }
.w-balance .divider { width: 2px; background: rgba(20, 18, 43, .18); align-self: stretch; margin: 0 8px; }

/* greeting: Oyen + tilted speech bubble */
.w-greeting { display: flex; align-items: center; gap: 12px; }
.w-greeting img { width: 110px; height: 110px; object-fit: contain; flex: none; }
.w-bubble {
	background: var(--w-cloud); border-radius: 28px; padding: 16px 22px;
	transform: rotate(-1.4deg); box-shadow: 0 8px 18px rgba(108, 77, 255, .18);
}
.w-bubble h2 { font-size: 1.35rem; margin: 0 0 4px; line-height: 1.2; }
.w-bubble p { margin: 0; font-size: .9rem; color: var(--w-ink-soft); }

/* pastel menu tiles */
.w-tile {
	display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; height: 100%;
	border-radius: 28px; padding: 18px; text-decoration: none; color: var(--w-ink);
	box-shadow: 0 8px 18px rgba(108, 77, 255, .10); transition: transform .12s;
}
.w-tile:hover { transform: translateY(-2px); color: var(--w-ink); }
.w-tile > div:last-child { margin-top: auto; padding-top: 14px; }
.w-tile .ico {width: 56px; height: 56px; padding: 9px; border-radius: 18px; background: #fff; }
.w-tile .ico img { width: 100%; height: 100%; object-fit: contain; }
.w-tile h3 { font-size: 1.35rem; margin: 12px 0 4px; line-height: 1.15; }
.w-tile p { margin: 0; font-size: .8rem; color: var(--w-ink-soft); line-height: 1.3; }
.w-tile.t0 { background: #e4dcff; } .w-tile.t1 { background: #ffdada; }
.w-tile.t2 { background: #ffefb8; } .w-tile.t3 { background: #d6f3e4; }

/* buttons: 3D violet pill */
.btn-wiggo, .btn-primary {
	--bs-btn-bg: var(--w-violet); --bs-btn-border-color: var(--w-violet);
	--bs-btn-hover-bg: #7a5cff; --bs-btn-hover-border-color: #7a5cff;
	--bs-btn-active-bg: var(--w-violet-deep); --bs-btn-active-border-color: var(--w-violet-deep);
	--bs-btn-disabled-bg: var(--w-violet); --bs-btn-disabled-border-color: var(--w-violet);
	font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.1rem; color: #fff;
	border-radius: 32px; padding: 12px 28px; border: 0;
	box-shadow: 0 4px 0 var(--w-violet-deep);
}
.btn-primary:active, .btn-wiggo:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--w-violet-deep); }
.btn-primary:disabled { opacity: .5; }
.btn-primary i, .btn-wiggo i { color: var(--w-yellow); margin-right: 6px; }
.btn-soft {
	border-radius: 14px; border: 1px solid var(--w-line); background: rgba(20, 18, 43, .06);
	color: var(--w-ink); font-weight: 600;
}
.btn-soft:hover { background: rgba(20, 18, 43, .1); }

/* forms */
.form-label { font-weight: 600; font-size: .9rem; }
.form-control, .form-select {
	border-radius: 16px; border: 1px solid rgba(20, 18, 43, .16); background-color: #fff; padding: 11px 14px;
}
.form-control:focus, .form-select:focus { border-color: var(--w-violet); box-shadow: 0 0 0 .2rem rgba(108, 77, 255, .18); }

/* floating midnight pill nav */
.w-nav {
	position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 1030;
	width: min(420px, calc(100% - 56px)); height: 52px; padding: 0 6px;
	display: flex; background: var(--w-midnight); border-radius: 26px;
	box-shadow: 0 8px 18px rgba(20, 18, 43, .30);
}
.w-nav a {
	flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none;
}
.w-nav a span {
	width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.w-nav a.active { color: var(--w-yellow); }
.w-nav a.active span { background: rgba(255, 255, 255, .16); }

/* page head + gallery */
.w-pagehead { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.w-pagehead h1 { font-size: 1.7rem; margin: 0; }
.w-pagehead > a:not(.btn) { color: var(--w-ink); font-size: 1.4rem; text-decoration: none; }
.thumb { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; background: var(--w-violet-tint); border-radius: 22px; }
.thumb-box {
	aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--w-violet-tint);
	border-radius: 22px; overflow: hidden; box-shadow: 0 6px 14px rgba(108, 77, 255, .10);
}
.thumb-box img, .thumb-box video { width: 100%; height: 100%; object-fit: cover; }
.result-media { max-width: 100%; max-height: 70vh; border-radius: 22px; }

.w-empty { text-align: center; padding: 28px 0; }
.w-empty img { height: 170px; }
.w-empty h2 { font-size: 1.5rem; white-space: pre-line; margin: 16px 0 8px; }

/* login / landing */
.w-hero { text-align: center; padding: 28px 0 8px; }
.w-hero img.mascot { height: 190px; }
.w-hero h1 { font-size: 2.2rem; margin: 14px 0 8px; }
.btn-google {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
	background: #fff; border: 1px solid var(--w-line); border-radius: 32px; padding: 12px 24px;
	font-weight: 700; box-shadow: var(--w-shadow); color: var(--w-ink);
}
.btn-google:hover { background: var(--w-cloud); }

@media (max-width: 420px) {
	.w-greeting img { width: 84px; height: 84px; }
	.w-bubble { padding: 12px 16px; }
	.w-bubble h2 { font-size: 1.1rem; }
}

/* login popup */
.w-login { border: 0; border-radius: 32px; padding: 28px 28px 30px; text-align: center; background: var(--w-cloud); }
.w-login .btn-close { position: absolute; top: 18px; right: 18px; }
.w-login .mascot { height: 150px; margin: 0 auto; display: block; }
.w-login .wordmark { height: 96px; display: block; margin: -14px auto -20px; mix-blend-mode: multiply; }
.w-login p { color: rgba(20, 18, 43, .88); margin: 8px 0 22px; line-height: 1.4; }
.btn-google { font-family: 'Fredoka', sans-serif; font-size: 1.05rem; color: #241f4d; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }

/* ---------- web app layout: sidebar + topbar + wide content ---------- */
.w-app { display: flex; min-height: 100vh; }
.w-side {
	display: none; flex-direction: column; width: 250px; flex: none; position: sticky; top: 0; height: 100vh;
	padding: 18px 16px; background: rgba(255, 255, 255, .85); border-right: 1px solid var(--w-line);
}
.w-side-logo { display: block; margin: -10px 0 8px; }
.w-side-logo img { width: 170px; mix-blend-mode: multiply; margin: -14px 0 -14px -6px; display: block; }
.w-side-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.w-side-nav a {
	display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px;
	color: var(--w-ink); text-decoration: none; font-weight: 700; font-size: .95rem;
}
.w-side-nav a i { font-size: 1.15rem; color: var(--w-ink-soft); }
.w-side-nav a:hover { background: var(--w-violet-tint); }
.w-side-nav a.active { background: var(--w-violet); color: #fff; box-shadow: 0 6px 14px rgba(108, 77, 255, .28); }
.w-side-nav a.active i { color: var(--w-yellow); }
.w-side-foot {
	margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 20px;
	background: var(--w-cloud); font-size: .8rem; color: var(--w-ink-soft); line-height: 1.3;
}
.w-side-foot img { width: 52px; height: 52px; object-fit: contain; flex: none; }

.w-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.w-topbar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 18px; position: sticky; top: 0; z-index: 1020;
	background: rgba(247, 245, 255, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--w-line);
}
.w-top-logo img { height: 64px; margin: -14px 0 -14px -10px; mix-blend-mode: multiply; display: block; }
.w-top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.w-chips { display: flex; gap: 8px; }
.w-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
	background: #fff; border: 1px solid var(--w-line); font-size: .9rem;
}
.w-chip i { color: var(--w-violet); }
.w-chip small { color: var(--w-ink-soft); }
.w-content { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 18px 110px; }

@media (min-width: 992px) {
	.w-side { display: flex; }
	.w-nav, .w-top-logo { display: none !important; }
	.w-topbar { padding: 14px 32px; }
	.w-content { padding: 28px 32px 48px; }
	.w-topbar { justify-content: flex-end; }
}
@media (max-width: 575px) {
	.w-chip small { display: none; }
}

/* wide dashboard pieces */
@media (min-width: 768px) {
	.w-tile { flex-direction: row; align-items: center; gap: 18px; min-height: 0; }
	.w-tile > div:last-child { margin-top: 0; padding-top: 0; }
	.w-tile .ico { flex: none; width: 72px; height: 72px; }
	.w-tile h3 { margin-top: 0; }
	.w-tile p { font-size: .88rem; }
	.w-greeting img { width: 150px; height: 150px; }
	.w-bubble h2 { font-size: 1.8rem; }
	.w-bubble p { font-size: 1rem; }
}

/* shop packages */
.w-pack {
	position: relative; height: 100%; padding: 22px 18px 18px; border-radius: 28px; color: var(--w-ink);
	box-shadow: 0 8px 18px rgba(108, 77, 255, .10);
}
.w-pack.t0 { background: #e4dcff; } .w-pack.t1 { background: #ffdada; }
.w-pack.t2 { background: #ffefb8; } .w-pack.t3 { background: #d6f3e4; }
.w-pack h3 { font-size: 1.25rem; margin: 0 0 8px; }
.w-pack ul { list-style: none; padding: 0; margin: 0 0 10px; font-size: .9rem; color: var(--w-ink-soft); }
.w-pack li i { margin-right: 6px; color: var(--w-violet); }
.w-pack .price { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.4rem; }
.w-pack .usd { font-size: .85rem; color: var(--w-ink-soft); }
.w-ribbon {
	position: absolute; top: 12px; right: 12px; background: var(--w-coral); color: #fff; font-size: .7rem;
	font-weight: 800; padding: 3px 10px; border-radius: 999px;
}

/* tools */
.w-tool-card { display: block; text-decoration: none; }
.cmp { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 24px; background: #fff; --pos: 50%; user-select: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp .after { clip-path: inset(0 0 0 var(--pos)); }
.cmp .bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .4); pointer-events: none; }
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.cmp .tag { position: absolute; bottom: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(20, 18, 43, .7); color: #fff; font-size: .75rem; font-weight: 700; }
.checker { display: inline-block; border-radius: 22px; overflow: hidden;
	background: repeating-conic-gradient(#e9e5f8 0% 25%, #fff 0% 50%) 50% / 20px 20px; }
.scale-btn { min-width: 64px; }
.scale-btn.active { background: var(--w-violet); color: #fff; border-color: var(--w-violet); }
.tool-preview { max-width: 100%; max-height: 260px; border-radius: 20px; margin-top: 12px; }

/* topbar round buttons, characters */
.w-bell { position: relative; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--w-line); color: var(--w-ink); text-decoration: none; font-size: 1.1rem; }
.w-bell span { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
	background: var(--w-coral); color: #fff; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.w-char { position: relative; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: var(--w-violet-tint); box-shadow: 0 6px 14px rgba(108, 77, 255, .12); }
.w-char img { width: 100%; height: 100%; object-fit: cover; }
.w-char .bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 8px; justify-content: center;
	background: linear-gradient(transparent, rgba(20, 18, 43, .65)); }
.w-char.busy { display: flex; align-items: center; justify-content: center; }

.w-side { overflow-y: auto; }
.w-side-foot { flex: none; }

.w-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.w-actions .btn { border-radius: 12px; }

/* "Oyen lagi ngeracik..." loading popup */
.busy-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(20, 18, 43, .45); backdrop-filter: blur(2px); }
.busy-overlay[hidden] { display: none; }
.busy-card { width: 260px; padding: 22px 24px 24px; border-radius: 32px; text-align: center; background: linear-gradient(#f1edff, #f7f5ff); box-shadow: 0 18px 36px rgba(0, 0, 0, .22); }
.busy-card img { height: 110px; object-fit: contain; }
.busy-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.1rem; margin: 14px 0 16px; color: var(--w-ink); }

/* full preview (media on the left, prompt details on the right). Pictures keep their own shape: never stretched, cropped or zoomed in. */
.pv { flex-direction: row; height: 100%; border: 0; border-radius: 0; background: #fafafa; }
.pv-media { position: relative; flex: 1 1 auto; min-width: 0; background: #14122b; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv-stage { width: 100%; height: 100%; box-sizing: border-box; padding: 20px; display: flex; align-items: center; justify-content: center; }
.pv-stage img, .pv-stage video { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; background: #000; }
.pv-close { position: absolute; top: 16px; left: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; }
.pv-badge { position: absolute; top: 18px; right: 18px; z-index: 3; padding: 3px 10px; border-radius: 8px; background: #000; color: #fff; font-size: .8rem; }
.pv-side { flex: 0 0 440px; max-width: 100%; box-sizing: border-box; padding: 28px; overflow-y: auto; display: flex; flex-direction: column; background: #fafafa; }
.pv-title { font-size: 1.25rem; margin: 0 0 14px; }
.pv-prompt { background: #ebebef; border-radius: 10px; padding: 10px 12px; max-height: 180px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; font-size: .92rem; margin-bottom: 18px; }
.pv-label { font-size: .72rem; color: var(--w-ink-soft); margin-bottom: 2px; }
.pv-uuid { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; word-break: break-all; cursor: copy; color: var(--w-ink); }
.pv-hint { font-family: ui-monospace, Consolas, monospace; font-size: .68rem; color: var(--w-ink-soft); margin: 2px 0 18px; }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 18px; font-size: .95rem; }
.pv-grid:empty, .pv-grid:not(:has(> :not([hidden]))) { display: none; }
.pv-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-refs img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--w-line); }
.pv-actions { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-actions .btn { border-radius: 10px; font-weight: 700; font-size: .92rem; padding: 10px 12px; }
.pv-btn-dark { background: #111; color: #fff; border: 1px solid #111; }
.pv-btn-dark:hover { background: #2a2a2a; color: #fff; }
.pv-btn-outline { background: #fff; color: var(--w-violet-deep); border: 1px solid rgba(108, 77, 255, .35); }
.pv-btn-outline:hover { background: var(--w-violet-tint); color: var(--w-violet-deep); }
.pv-danger { color: #c0392b; border-color: rgba(192, 57, 43, .35); }
.pv-danger:hover { background: #fdecea; color: #c0392b; }
@media (max-width: 991px) {
	.pv { flex-direction: column; }
	.pv-media { flex: 0 0 56vh; }
	.pv-side { flex: 1 1 auto; width: 100%; padding: 20px; }
}
.thumb-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.thumb-btn img, .thumb-btn video { width: 100%; height: 100%; object-fit: cover; }
.play-badge { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center;
	justify-content: center; background: rgba(20, 18, 43, .6); color: #fff; font-size: 1.6rem; pointer-events: none; }

/* Android download: its own block further down the sidebar, apart from the page links */
.w-side-android {
	display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; padding: 12px 16px; border-radius: 16px;
	border: 1px dashed rgba(108, 77, 255, .4); color: var(--w-ink); text-decoration: none; font-weight: 700; font-size: .95rem;
}
.w-side-android i { color: #3ddc84; font-size: 1.25rem; }
.w-side-android:hover { background: var(--w-violet-tint); color: var(--w-ink); }

/* prompt tools */
.prompt-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.prompt-tools .btn { border-radius: 12px; }
.prompt-tools .pt-auto { background: var(--w-violet-tint); border-color: rgba(108, 77, 255, .35); color: var(--w-violet-deep); font-weight: 700; }
.pt-status { flex-basis: 100%; }