/* ==========================================================================
   Sangriha Core — component styles (account hub, studio, auth, wallet).
   Tokens are defined with :where() so the Sangriha theme can override them.
   ========================================================================== */

:where(:root) {
	--sg-brand: #e11d34;
	--sg-brand-2: #a10f22;
	--sg-brand-3: #6d0616;
	--sg-grad: linear-gradient(135deg, var(--sg-brand) 0%, var(--sg-brand-2) 55%, var(--sg-brand-3) 100%);
	--sg-bg: #faf7f6;
	--sg-surface: #fff;
	--sg-surface-2: #f4efed;
	--sg-text: #1b1214;
	--sg-muted: #6f6467;
	--sg-line: rgba(27, 18, 20, .09);
	--sg-radius: 22px;
	--sg-radius-sm: 14px;
	--sg-shadow: 0 1px 2px rgba(30, 8, 12, .05), 0 12px 32px -16px rgba(30, 8, 12, .22);
	--sg-ok: #0f9d6b;
	--sg-wait: #c27c0e;
	--sg-err: #d92d3a;
	--sg-ease: cubic-bezier(.2, .8, .2, 1);
	--sg-display: "Anek Devanagari Variable", "Anek Devanagari", "Mukta", system-ui, sans-serif;
	--sg-font: "Mukta", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sg-i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
.sg-verified { display: inline-flex; color: var(--sg-brand); margin-inline-start: .3em; }
.sg-verified .sg-i { width: .9em; height: .9em; }

/* ---------- Buttons ---------- */
.sgc-btn {
	--h: 46px;
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: var(--h); padding: 0 1.25em; border-radius: 999px; border: 1px solid transparent;
	font: 600 1rem/1 var(--sg-font); text-decoration: none; cursor: pointer;
	transition: transform .2s var(--sg-ease), box-shadow .2s var(--sg-ease), background .2s, opacity .2s;
	-webkit-tap-highlight-color: transparent;
}
.sgc-btn:active { transform: scale(.97); }
.sgc-btn[disabled] { opacity: .45; pointer-events: none; }
.sgc-btn--primary { color: #fff; background: var(--sg-grad); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--sg-brand) 70%, transparent); }
.sgc-btn--primary:hover { box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--sg-brand) 80%, transparent); color: #fff; }
.sgc-btn--ghost { color: var(--sg-text); background: var(--sg-surface); border-color: var(--sg-line); }
.sgc-btn--ghost:hover { border-color: color-mix(in srgb, var(--sg-brand) 40%, transparent); color: var(--sg-brand); }
.sgc-btn--danger { color: var(--sg-err); background: transparent; border-color: color-mix(in srgb, var(--sg-err) 30%, transparent); }
.sgc-btn--block { width: 100%; }
.sgc-btn--lg { --h: 54px; font-size: 1.05rem; padding: 0 1.6em; }
.sgc-link { background: none; border: 0; padding: 0; color: var(--sg-brand); font: 600 .9rem var(--sg-font); cursor: pointer; text-decoration: none; }

/* ---------- Fields ---------- */
.sgc-form { display: grid; gap: 12px; }
.sgc-label { font: 600 .88rem var(--sg-font); color: var(--sg-muted); margin: 6px 2px -4px; }
.sgc-label small { font-weight: 400; opacity: .8; }
.sgc-field {
	position: relative; display: flex; align-items: center; gap: 10px;
	background: var(--sg-surface-2); border: 1.5px solid transparent; border-radius: 16px;
	padding: 0 14px; transition: border-color .2s, background .2s, box-shadow .2s;
}
.sgc-field:focus-within { background: var(--sg-surface); border-color: var(--sg-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sg-brand) 14%, transparent); }
.sgc-field > span { color: var(--sg-muted); display: inline-flex; }
.sgc-field input, .sgc-field textarea, .sgc-field select {
	flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--sg-text);
	font: 400 1rem/1.5 var(--sg-font); padding: 13px 0; box-shadow: none; appearance: none; -webkit-appearance: none;
}
.sgc-field textarea { resize: vertical; min-height: 64px; }
.sgc-field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 22px; }
.sgc-field em { font-style: normal; font-size: .85rem; color: var(--sg-muted); white-space: nowrap; }
.sgc-field__eye { border: 0; background: none; color: var(--sg-muted); padding: 6px; cursor: pointer; display: inline-flex; }
.sgc-field__eye.is-on { color: var(--sg-brand); }
.sgc-check { display: flex; align-items: flex-start; gap: 10px; font: 400 .93rem/1.5 var(--sg-font); color: var(--sg-text); cursor: pointer; }
.sgc-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sg-brand); flex: none; }
.sgc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sgc-row--end { justify-content: flex-end; }
.sgc-msg { margin: 0; min-height: 1.2em; font: 500 .92rem var(--sg-font); text-align: center; }
.sgc-msg.is-ok { color: var(--sg-ok); }
.sgc-msg.is-error { color: var(--sg-err); }
.sgc-fine { margin: 0; font-size: .82rem; color: var(--sg-muted); text-align: center; }
.sgc-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }
.sgc-form.is-busy [type="submit"] { position: relative; color: transparent; }
.sgc-form.is-busy [type="submit"]::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #fff; border-right-color: transparent; animation: sgc-spin .7s linear infinite; }
.sgc-form.is-shake { animation: sgc-shake .4s; }
@keyframes sgc-spin { to { transform: rotate(360deg); } }
@keyframes sgc-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.sgc-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -4px; }
.sgc-strength i { height: 4px; border-radius: 4px; background: var(--sg-line); transition: background .3s; }
.sgc-strength[data-s="1"] i:nth-child(-n+1) { background: var(--sg-err); }
.sgc-strength[data-s="2"] i:nth-child(-n+2) { background: var(--sg-wait); }
.sgc-strength[data-s="3"] i:nth-child(-n+3) { background: #64a30d; }
.sgc-strength[data-s="4"] i { background: var(--sg-ok); }

/* ---------- Segmented control ---------- */
.sgc-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 999px; background: var(--sg-surface-2); }
.sgc-seg button { position: relative; z-index: 1; border: 0; background: none; padding: 11px; border-radius: 999px; font: 600 .95rem var(--sg-font); color: var(--sg-muted); cursor: pointer; transition: color .25s; }
.sgc-seg button.is-on { color: var(--sg-text); }
.sgc-seg__pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--sg-surface); box-shadow: var(--sg-shadow); transition: transform .35s var(--sg-ease); }
.is-register .sgc-seg__pill { transform: translateX(100%); }

/* ---------- Auth ---------- */
.sgc-auth { position: relative; isolation: isolate; overflow: hidden; max-width: 440px; margin: 24px auto; padding: 28px 22px 24px; border-radius: 28px; background: var(--sg-surface); box-shadow: var(--sg-shadow); border: 1px solid var(--sg-line); display: grid; gap: 18px; }
.sgc-auth__glow { position: absolute; inset: -40% -20% auto; height: 260px; z-index: -1; background: radial-gradient(50% 60% at 30% 40%, color-mix(in srgb, var(--sg-brand) 22%, transparent), transparent 70%), radial-gradient(40% 50% at 75% 30%, color-mix(in srgb, #ff7a59 18%, transparent), transparent 70%); filter: blur(10px); animation: sgc-float 12s ease-in-out infinite alternate; }
@keyframes sgc-float { to { transform: translate3d(4%, 6%, 0) scale(1.08); } }
.sgc-auth__head { text-align: center; }
.sgc-auth__mark { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 20px; background: var(--sg-grad); color: #fff; box-shadow: 0 14px 30px -12px var(--sg-brand); margin-bottom: 12px; }
.sgc-auth__mark .sg-i { width: 28px; height: 28px; }
.sgc-auth__title { font: 700 1.45rem/1.25 var(--sg-display); margin: 0 0 6px; color: var(--sg-text); }
.sgc-auth__intro { margin: 0; color: var(--sg-muted); font-size: .95rem; line-height: 1.55; }

/* ---------- Account hero ---------- */
.sgc-account { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; font-family: var(--sg-font); color: var(--sg-text); }
.sgc-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 26px 20px 18px; color: #fff; display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; }
.sgc-hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--sg-grad); }
.sgc-hero__bg::before, .sgc-hero__bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; }
.sgc-hero__bg::before { width: 220px; height: 220px; right: -60px; top: -80px; background: #ff8a65; animation: sgc-float 10s ease-in-out infinite alternate; }
.sgc-hero__bg::after { width: 180px; height: 180px; left: -50px; bottom: -90px; background: #3b0410; }
.sgc-hero__avatar { position: relative; width: 78px; height: 78px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #fff, rgba(255, 255, 255, .3)); cursor: pointer; }
.sgc-hero__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sgc-hero__avatar.is-busy img { opacity: .5; }
.sgc-hero__cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--sg-brand-2); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.sgc-hero__cam .sg-i { width: 15px; height: 15px; }
.sgc-hero__who h1 { margin: 0 0 6px; font: 700 1.4rem/1.2 var(--sg-display); color: #fff; display: flex; align-items: center; }
.sgc-hero .sg-verified { color: #fff; }
.sgc-level { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 4px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.sgc-level--star { background: linear-gradient(90deg, #ffd56b, #ffb347); color: #4a1d00; }
.sgc-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 6px 0 0; padding: 12px 6px 4px; border-top: 1px solid rgba(255, 255, 255, .2); text-align: center; }
.sgc-stats dt { font-size: .78rem; opacity: .8; }
.sgc-stats dd { margin: 0; font: 700 1.35rem var(--sg-display); }

/* ---------- Tabs ---------- */
.sgc-tabs { position: sticky; top: calc(var(--sg-header-h, 0px) + 8px); z-index: 5; display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: color-mix(in srgb, var(--sg-surface) 82%, transparent); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border: 1px solid var(--sg-line); box-shadow: var(--sg-shadow); }
.sgc-tabs::-webkit-scrollbar { display: none; }
.sgc-tabs button { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 999px; background: none; color: var(--sg-muted); font: 600 .9rem var(--sg-font); cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; }
.sgc-tabs button.is-on { background: var(--sg-text); color: var(--sg-surface); }
.sgc-dot { position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sg-brand); color: #fff; font-size: .7rem; line-height: 18px; }
.sgc-panel { display: grid; gap: 14px; animation: sgc-in .35s var(--sg-ease); }
@keyframes sgc-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Cards ---------- */
.sgc-card { background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 18px; box-shadow: var(--sg-shadow); }
.sgc-card h3 { margin: 0 0 12px; font: 700 1.1rem var(--sg-display); display: flex; align-items: center; gap: 8px; }
.sgc-card h4 { margin: 18px 0 8px; font: 600 .95rem var(--sg-display); color: var(--sg-muted); }
.sgc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sgc-empty { color: var(--sg-muted); margin: 0; }
.sgc-emptystate { text-align: center; padding: 34px 18px; border-radius: var(--sg-radius); background: var(--sg-surface); border: 1px dashed var(--sg-line); color: var(--sg-muted); }
.sgc-emptystate > .sg-i { width: 40px; height: 40px; color: var(--sg-brand); opacity: .8; }
.sgc-emptystate h3 { margin: 10px 0 4px; color: var(--sg-text); font: 700 1.1rem var(--sg-display); }
.sgc-emptystate p { margin: 0 auto; max-width: 340px; }
.sgc-note { padding: 14px 18px; border-radius: 16px; background: var(--sg-surface-2); }

/* ---------- Wallet ---------- */
.sgc-wallet { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 22px 22px 18px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #ff6a4d 0%, transparent 45%), linear-gradient(140deg, #2a0710 0%, var(--sg-brand-3) 35%, var(--sg-brand-2) 70%, var(--sg-brand) 100%); box-shadow: 0 24px 50px -24px var(--sg-brand-3); aspect-ratio: 1.75 / 1; max-height: 260px; display: flex; flex-direction: column; }
.sgc-wallet__shine { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%); background-size: 250% 100%; animation: sgc-shine 5s ease-in-out infinite; }
@keyframes sgc-shine { 0%, 30% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }
.sgc-wallet__top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; opacity: .92; letter-spacing: .02em; }
.sgc-wallet__chip { width: 40px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #ffe08a, #d8a63c); color: #6b4300; }
.sgc-wallet__balance { margin-top: auto; font: 800 2.6rem/1 var(--sg-display); letter-spacing: -.01em; }
.sgc-wallet__balance small { font: 500 1rem var(--sg-font); opacity: .8; }
.sgc-wallet__value { opacity: .85; margin: 4px 0 12px; }
.sgc-wallet__meter, .sgc-meter { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.sgc-wallet__meter i, .sgc-meter i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, #ffe08a, #fff); transition: width 1s var(--sg-ease); }
.sgc-meter { background: var(--sg-surface-2); }
.sgc-meter i { background: var(--sg-grad); }
.sgc-wallet__foot { display: flex; justify-content: space-between; font-size: .8rem; opacity: .85; margin-top: 8px; }
.sgc-earn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sgc-earn li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--sg-surface-2); font-size: .9rem; }
.sgc-earn b { color: var(--sg-brand); font-family: var(--sg-display); }
.sgc-levelbar { margin-top: 14px; display: grid; gap: 6px; font-size: .85rem; color: var(--sg-muted); }
.sgc-levelbar > div:first-child { display: flex; justify-content: space-between; }
.sgc-ledger { list-style: none; margin: 0; padding: 0; }
.sgc-ledger li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--sg-line); }
.sgc-ledger li:last-child { border: 0; }
.sgc-ledger span { display: grid; }
.sgc-ledger small { color: var(--sg-muted); font-size: .8rem; }
.sgc-ledger em { font: 700 1.05rem var(--sg-display); font-style: normal; }
.sgc-ledger .is-in em { color: var(--sg-ok); }
.sgc-ledger .is-out em { color: var(--sg-muted); }
.sgc-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.sgc-pillopt input { position: absolute; opacity: 0; pointer-events: none; }
.sgc-pillopt span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--sg-line); font-weight: 600; cursor: pointer; transition: all .2s; }
.sgc-pillopt input:checked + span { border-color: var(--sg-brand); background: color-mix(in srgb, var(--sg-brand) 10%, transparent); color: var(--sg-brand); }

/* ---------- Chips & lists ---------- */
.sgc-chip { display: inline-block; padding: 4px 10px 3px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sgc-chip--ok { background: color-mix(in srgb, var(--sg-ok) 14%, transparent); color: var(--sg-ok); }
.sgc-chip--wait { background: color-mix(in srgb, var(--sg-wait) 14%, transparent); color: var(--sg-wait); }
.sgc-chip--no { background: color-mix(in srgb, var(--sg-err) 12%, transparent); color: var(--sg-err); }
.sgc-works { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sgc-works li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--sg-surface); border: 1px solid var(--sg-line); }
.sgc-works__img { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--sg-surface-2); color: var(--sg-muted); }
.sgc-works__img img { width: 100%; height: 100%; object-fit: cover; }
.sgc-works__body { display: grid; min-width: 0; }
.sgc-works__body small { color: var(--sg-muted); font-size: .78rem; }
.sgc-works__body a, .sgc-works__body strong { font: 600 1rem/1.35 var(--sg-display); color: var(--sg-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sgc-works__reason { font-size: .82rem; color: var(--sg-err); font-style: normal; }
.sgc-works__meta { display: grid; justify-items: end; gap: 4px; }
.sgc-works__meta b { color: var(--sg-ok); font-family: var(--sg-display); }
.sgc-minilist { display: grid; gap: 10px; }
.sgc-mini { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 18px; background: var(--sg-surface); border: 1px solid var(--sg-line); text-decoration: none; color: var(--sg-text); transition: transform .2s var(--sg-ease); }
.sgc-mini:active { transform: scale(.98); }
.sgc-mini__img { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--sg-surface-2); }
.sgc-mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgc-mini__body { display: grid; gap: 2px; min-width: 0; }
.sgc-mini__body small { color: var(--sg-brand); font-weight: 600; font-size: .78rem; }
.sgc-mini__body strong { font: 600 1rem/1.35 var(--sg-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sgc-mini__body em { font-style: normal; color: var(--sg-muted); font-size: .8rem; }
.sgc-offline ul { margin: 0; padding-left: 18px; }
.sgc-offline a { color: var(--sg-text); }

/* ---------- Notifications ---------- */
.sgc-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sgc-notes a { position: relative; display: grid; gap: 2px; padding: 14px 16px 12px 18px; border-radius: 18px; background: var(--sg-surface); border: 1px solid var(--sg-line); color: var(--sg-text); text-decoration: none; }
.sgc-notes .is-new a { background: color-mix(in srgb, var(--sg-brand) 6%, var(--sg-surface)); border-color: color-mix(in srgb, var(--sg-brand) 22%, transparent); }
.sgc-notes .is-new a::before { content: ""; position: absolute; left: 7px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--sg-brand); }
.sgc-notes b { font: 600 .98rem/1.4 var(--sg-display); }
.sgc-notes span { color: var(--sg-muted); font-size: .9rem; }
.sgc-notes small { color: var(--sg-muted); font-size: .76rem; }
.sgc-push { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 20px; background: var(--sg-surface); border: 1px solid var(--sg-line); }
.sgc-push__icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--sg-grad); color: #fff; }
.sgc-push b { display: block; }
.sgc-push small { color: var(--sg-muted); font-size: .82rem; line-height: 1.4; display: block; }
.sgc-push.is-unsupported { opacity: .55; }
.sgc-switch { position: relative; width: 50px; height: 30px; border-radius: 99px; border: 0; background: var(--sg-surface-2); cursor: pointer; transition: background .25s; box-shadow: inset 0 0 0 1px var(--sg-line); }
.sgc-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s var(--sg-ease); }
.sgc-switch.is-on { background: var(--sg-ok); }
.sgc-switch.is-on i { transform: translateX(20px); }
.sgc-follows { display: flex; flex-wrap: wrap; gap: 8px; }
.sgc-follow { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--sg-surface-2); }
.sgc-follow a { color: var(--sg-text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.sgc-follow button { width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sg-surface); color: var(--sg-muted); cursor: pointer; }

/* ---------- Writer studio ---------- */
.sgc-studio { max-width: 780px; margin: 0 auto; font-family: var(--sg-font); color: var(--sg-text); gap: 14px; }
.sgc-studio__head { text-align: center; padding: 8px 6px 4px; }
.sgc-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 5px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--sg-brand); background: color-mix(in srgb, var(--sg-brand) 9%, transparent); }
.sgc-studio__head h1 { font: 800 clamp(1.6rem, 5vw, 2.4rem)/1.2 var(--sg-display); margin: 12px 0 8px; letter-spacing: -.01em; }
.sgc-studio__head p { color: var(--sg-muted); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.sgc-theme-pill { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 12px !important; padding: 8px 14px; border-radius: 999px; background: var(--sg-surface); border: 1px solid var(--sg-line); }
.sgc-kinds { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sgc-kinds legend { margin-bottom: 8px; }
.sgc-kind input { position: absolute; opacity: 0; pointer-events: none; }
.sgc-kind span { display: grid; justify-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 18px; background: var(--sg-surface); border: 1.5px solid var(--sg-line); cursor: pointer; transition: all .25s var(--sg-ease); text-align: center; }
.sgc-kind .sg-i { width: 24px; height: 24px; color: var(--sg-muted); transition: color .2s; }
.sgc-kind b { font: 700 1rem var(--sg-display); }
.sgc-kind small { font-size: .74rem; color: var(--sg-muted); }
.sgc-kind input:checked + span { border-color: var(--sg-brand); background: color-mix(in srgb, var(--sg-brand) 7%, var(--sg-surface)); transform: translateY(-2px); box-shadow: 0 12px 24px -16px var(--sg-brand); }
.sgc-kind input:checked + span .sg-i { color: var(--sg-brand); }
.sgc-kind input:focus-visible + span { outline: 2px solid var(--sg-brand); outline-offset: 2px; }
.sgc-studio__title { width: 100%; border: 0; outline: 0; background: transparent; font: 800 clamp(1.5rem, 5vw, 2.1rem)/1.3 var(--sg-display); color: var(--sg-text); padding: 10px 2px; border-bottom: 2px solid var(--sg-line); transition: border-color .2s; }
.sgc-studio__title:focus { border-color: var(--sg-brand); }
.sgc-editor { border-radius: 22px; background: var(--sg-surface); border: 1px solid var(--sg-line); box-shadow: var(--sg-shadow); overflow: hidden; }
.sgc-editor__bar { position: sticky; top: var(--sg-header-h, 0px); z-index: 2; display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--sg-line); background: color-mix(in srgb, var(--sg-surface) 90%, transparent); backdrop-filter: blur(10px); }
.sgc-editor__bar button { min-width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--sg-text); font: 700 1rem var(--sg-display); cursor: pointer; display: grid; place-items: center; }
.sgc-editor__bar button:hover { background: var(--sg-surface-2); }
.sgc-editor__stat { margin-left: auto; font-size: .8rem; color: var(--sg-muted); }
.sgc-editor__saved { font-size: .78rem; color: var(--sg-ok); opacity: 0; transition: opacity .3s; }
.sgc-editor__saved.is-on { opacity: 1; }
.sgc-editor__area { min-height: 46vh; padding: 20px 20px 40px; outline: 0; font: 400 1.12rem/1.9 var(--sg-font); }
.sgc-editor__area:empty::before { content: attr(data-placeholder); color: var(--sg-muted); opacity: .7; }
.sgc-editor__area h2 { font: 700 1.3rem var(--sg-display); margin: 1em 0 .4em; }
.sgc-editor__area blockquote { margin: 1em 0; padding: .2em 1em; border-left: 3px solid var(--sg-brand); color: var(--sg-muted); }
.sgc-studio.is-poem .sgc-editor__area { font-family: "Noto Serif Devanagari", var(--sg-font); text-align: center; white-space: pre-wrap; font-size: 1.15rem; line-height: 2.1; }
.sgc-studio.is-poem [data-hide-poem] { display: none; }
.sgc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.sgc-grid2 > div { display: grid; gap: 12px; }
.sgc-drop { position: relative; display: grid; place-items: center; min-height: 190px; border-radius: 22px; border: 2px dashed var(--sg-line); background: var(--sg-surface); cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; text-align: center; }
.sgc-drop--tall { min-height: 300px; }
.sgc-drop.is-over { border-color: var(--sg-brand); background: color-mix(in srgb, var(--sg-brand) 6%, var(--sg-surface)); }
.sgc-drop__empty { display: grid; justify-items: center; gap: 4px; padding: 16px; color: var(--sg-muted); }
.sgc-drop__empty .sg-i { width: 32px; height: 32px; color: var(--sg-brand); }
.sgc-drop__empty b { color: var(--sg-text); }
.sgc-drop__empty small { font-size: .8rem; }
.sgc-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sgc-drop.has-file { border-style: solid; border-color: transparent; }
.sgc-guide { border-radius: 18px; background: var(--sg-surface-2); padding: 12px 16px; }
.sgc-guide summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sgc-guide ul { margin: 10px 0 0; padding-left: 20px; color: var(--sg-muted); line-height: 1.7; }
.sgc-studio__submit { position: sticky; bottom: calc(var(--sg-tabbar-h, 0px) + 12px); z-index: 3; display: grid; gap: 6px; padding-top: 6px; }
.sgc-studio__submit .sgc-btn { width: 100%; }

/* ---------- Toast fallback ---------- */
.sgc-toast { position: fixed; left: 50%; bottom: calc(24px + var(--sg-tabbar-h, 0px)); z-index: 99999; transform: translate(-50%, 20px); opacity: 0; padding: 12px 20px; border-radius: 999px; background: #1b1214; color: #fff; font: 500 .95rem var(--sg-font); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transition: all .35s var(--sg-ease); }
.sgc-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.sgc-toast.is-error { background: var(--sg-err); }

@media (max-width: 560px) {
	.sgc-kinds { grid-template-columns: repeat(2, 1fr); }
	.sgc-grid2, .sgc-actions { grid-template-columns: 1fr; }
	.sgc-earn { grid-template-columns: 1fr; }
	.sgc-tabs button span { font-size: .85rem; }
	.sgc-wallet__balance { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sgc-wallet__shine, .sgc-auth__glow, .sgc-hero__bg::before { animation: none; }
}
.sgc-auth, .sgc-form, .sgc-account, .sgc-studio, .sgc-panel { grid-template-columns: minmax(0, 1fr); }
.sgc-auth > *, .sgc-form > *, .sgc-account > *, .sgc-panel > * { min-width: 0; }
.sgc-field input, .sgc-field textarea, .sgc-field select { width: 100%; }
/* v1.3 — logout */
.sgc-hero__logout { position: absolute; z-index: 2; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: 600 .78rem var(--sg-font, inherit); text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s; }
.sgc-hero__logout:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.sgc-hero__logout svg { width: 15px; height: 15px; }
.sgc-btn--logout { margin-top: 12px; display: flex !important; align-items: center; justify-content: center; gap: 8px; color: #e11d34 !important; background: transparent !important; border: 1.5px solid color-mix(in srgb, #e11d34 40%, transparent) !important; }
.sgc-btn--logout svg { width: 18px; height: 18px; }
@media (max-width: 380px) { .sgc-hero__logout span { display: none; } .sgc-hero__logout { padding: 8px; } }
/* v1.3 — album photos in the photo form */
.sgc-more { display: grid; gap: 10px; margin: 12px 0 4px; }
.sgc-more__add { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed var(--sg-line, #ddd); cursor: pointer; transition: border-color .2s; }
.sgc-more__add:hover { border-color: var(--sg-brand, #e11d34); }
.sgc-more__add svg { width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 12px; background: var(--sg-surface-2, #f3eeed); color: var(--sg-brand, #e11d34); }
.sgc-more__add span { display: grid; font-weight: 600; }
.sgc-more__add small { font-weight: 400; opacity: .7; font-size: .78rem; }
.sgc-more__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.sgc-more__item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--sg-surface-2, #eee); }
.sgc-more__item img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.sgc-more__item button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; line-height: 20px; cursor: pointer; }
/* v1.4 — author fields in account settings */
.sgc-socials { margin: 6px 0 4px; border: 1px solid var(--sg-line, #eee); border-radius: 16px; padding: 4px 14px; }
.sgc-socials summary { cursor: pointer; padding: 10px 0; font-weight: 650; }
.sgc-socials .sgc-field { margin-bottom: 8px; }
.sgc-socials__k { flex: none; min-width: 84px; font-size: .8rem; font-weight: 600; color: var(--sg-muted, #777); }
.sgc-viewprofile { display: inline-block; margin: 8px 0 14px; font-weight: 600; color: var(--sg-brand, #e11d34); text-decoration: none; }

/* v1.5 — premium verified badge (always blue rosette, white tick; readable on any background) */
.sg-verified { color: #1d9bf0 !important; display: inline-flex; align-items: center; vertical-align: middle; flex: none; }
.sg-verified .sg-i { width: 1.05em !important; height: 1.05em !important; filter: drop-shadow(0 1px 1.5px rgba(29, 155, 240, .35)); }
.sg-verified .sg-i path:last-child { stroke: #fff !important; }
:is(.sg-feature, .sg-cine__body, .sg-hs__body, .sg-mo, .sg-podium, .sg-reel, .sgc-hero, .sg-sv, .sg-lb) .sg-verified .sg-i { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95)) drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
/* v1.5 — editor: sticky toolbar no longer covers the text */
.sgc-editor { overflow: visible; overflow: clip; overflow-clip-margin: 0; }
@supports not (overflow: clip) { .sgc-editor { overflow: visible; } }
.sgc-editor__bar { top: calc(var(--sg-header-h, 0px) + 6px); border-radius: 22px 22px 0 0; background: color-mix(in srgb, var(--sg-surface) 94%, transparent); }
html:has(.sg-top.is-hidden) .sgc-editor__bar { top: 6px; }
.sgc-editor__area { padding-top: 22px; scroll-padding-top: 120px; }
.sgc-editor__area > :first-child { margin-top: 0; }
/* v1.5 — forgot password */
.sgc-auth.is-lost .sgc-seg { display: none; }
.sgc-lost__head { display: grid; gap: 6px; margin-bottom: 6px; }
.sgc-lost__head b { font: 750 1.15rem var(--sg-display, inherit); }
.sgc-lost__head p { margin: 0; color: var(--sg-muted, #777); line-height: 1.6; font-size: .92rem; }
.sgc-lost__back { justify-self: center; margin-top: 4px; border: 0; background: none; cursor: pointer; font: inherit; }
.sgc-auth--reset .sgc-auth__mark { background: var(--sg-grad, linear-gradient(135deg, #e11d34, #6d0616)); color: #fff; }