/* Sulina Panel — warm glass UI. Uses the theme's colour variables with safe fallbacks. */
.sp, .sp * { box-sizing: border-box; }
.sp {
	--p: var(--c-primary, #3b2314); --a: var(--c-accent, #8a5418); --bg: var(--c-bg, #f6eee2); --dk: var(--c-dark, #24150c);
	--gold: var(--c-gold, #d9b57a); --mut: color-mix(in srgb, var(--p) 62%, var(--bg));
	--glass: color-mix(in srgb, #fff 58%, transparent); --glass-b: rgb(255 255 255 / .7); --line: color-mix(in srgb, var(--p) 12%, transparent);
	--ok: #1f8a57; --warn: #b9770e; --bad: #b3262e; --info: #2d6a9f;
	--r: 22px; position: relative; isolation: isolate; color: var(--p); font-size: .94rem; line-height: 1.7;
	display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start;
	padding: clamp(14px, 2.4vw, 28px); margin-block: 8px; border-radius: 30px; overflow: clip;
	background: linear-gradient(160deg, color-mix(in srgb, var(--bg) 70%, #fff), color-mix(in srgb, var(--bg) 88%, var(--a)));
}
.sp-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sp-blobs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: sp-float 22s ease-in-out infinite alternate; }
.sp-blobs i:nth-child(1) { width: 340px; height: 340px; background: color-mix(in srgb, var(--a) 55%, transparent); top: -90px; inset-inline-end: -60px; }
.sp-blobs i:nth-child(2) { width: 300px; height: 300px; background: color-mix(in srgb, var(--gold) 70%, transparent); bottom: -80px; inset-inline-start: 6%; animation-delay: -8s; }
.sp-blobs i:nth-child(3) { width: 220px; height: 220px; background: color-mix(in srgb, var(--p) 35%, transparent); top: 38%; inset-inline-start: 38%; animation-delay: -14s; opacity: .3; }
@keyframes sp-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5%, 6%, 0) scale(1.15); } }

.sp-card { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid var(--glass-b); border-radius: var(--r); box-shadow: 0 14px 40px -22px rgb(59 35 20 / .5), inset 0 1px 0 rgb(255 255 255 / .6); }
.sp-block { padding: clamp(14px, 2vw, 22px); margin-bottom: 16px; }
.sp-block__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sp-block__h h3 { margin: 0; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; }
.sp-i { flex: none; }

/* Side */
.sp-side { padding: 16px; position: sticky; top: 92px; }
.sp-me { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.sp-me__t { min-width: 0; display: grid; }
.sp-me__t strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-me__t span { font-size: .8rem; color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.sp-nav { display: grid; gap: 4px; }
.sp-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; color: var(--p); text-decoration: none; font-weight: 600; font-size: .92rem; transition: background-color .2s, color .2s, transform .2s; min-height: 44px; }
.sp-nav a:hover { background: color-mix(in srgb, var(--a) 12%, transparent); }
.sp-nav a.is-on { background: linear-gradient(135deg, var(--p), var(--dk)); color: #f6e7d1; box-shadow: 0 10px 22px -12px rgb(36 21 12 / .9); }
.sp-nav__out { margin-top: 6px; color: var(--mut) !important; font-weight: 500 !important; }
.sp-badge { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: .74rem; display: grid; place-items: center; font-weight: 700; }

/* Avatar */
.sp-avatar { --s: 48px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; flex: none; background: linear-gradient(135deg, var(--a), var(--p)); color: #fff; font-weight: 700; font-size: calc(var(--s) * .42); box-shadow: 0 0 0 3px rgb(255 255 255 / .7), 0 8px 18px -8px rgb(59 35 20 / .6); }
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-avatarbox { text-align: center; }
.sp-avatarbox .sp-block__h { justify-content: center; }
.sp-avatar--xl { margin: 6px auto 12px; }

/* Head */
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 2px 14px; }
.sp-head h2 { margin: 0; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); line-height: 1.3; }
.sp-head p { margin: 2px 0 0; color: var(--mut); font-size: .88rem; }

/* Grid */
.sp-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.sp-grid--hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.sp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid--2 > .sp-block { margin-bottom: 0; }
.sp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Wallet hero */
.sp-wallet { position: relative; overflow: hidden; border-radius: 26px; padding: 22px; display: grid; gap: 6px; align-content: center; min-height: 170px; color: #f6e7d1;
	background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--a) 70%, transparent), transparent 60%), linear-gradient(145deg, #4a2a16, var(--dk));
	box-shadow: 0 24px 44px -24px rgb(36 21 12 / .95), inset 0 1px 0 rgb(255 255 255 / .18); }
.sp-wallet::before { content: ""; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(90deg, transparent 0 46px, #fff 46px 47px), repeating-linear-gradient(0deg, transparent 0 46px, #fff 46px 47px); }
.sp-wallet__shine { position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 42%, rgb(255 236 200 / .16) 50%, transparent 58%); animation: sp-shine 8s ease-in-out infinite; }
@keyframes sp-shine { 0%, 50% { transform: translateX(-30%); } 100% { transform: translateX(30%); } }
.sp-wallet > * { position: relative; }
.sp-wallet__label { display: flex; align-items: center; gap: 8px; font-size: .85rem; opacity: .85; }
.sp-wallet__amount { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); line-height: 1.15; font-weight: 700; letter-spacing: .01em; }
.sp-wallet__amount small { font-size: .45em; opacity: .8; font-weight: 500; }
.sp-wallet .sp-btn { justify-self: start; margin-top: 6px; }

/* Stats */
.sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.sp-stat { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 14px 8px; text-align: center; text-decoration: none; color: var(--p); transition: transform .25s, box-shadow .25s; }
a.sp-stat:hover { transform: translateY(-3px); }
.sp-stat b { font-size: 1.5rem; line-height: 1.1; }
.sp-stat span { font-size: .78rem; color: var(--mut); }
.sp-stat .sp-i { color: var(--a); }

/* Rows */
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.sp-block__h + .sp-row, .sp-tabs + .sp-row, .sp-search + .sp-row, .sp-block > .sp-row:first-child { border-top: 0; }
.sp-row--link { border-radius: 14px; padding-inline: 10px; transition: background-color .2s; }
.sp-row--link:hover { background: color-mix(in srgb, var(--a) 8%, transparent); }
.sp-row.is-new { background: color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 14px; }
.sp-row--col { display: grid; justify-content: stretch; }
.sp-row__main { min-width: 0; flex: 1; }
.sp-row__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.sp-row__top strong { font-size: .96rem; }
.sp-row__sub { margin: 0; color: var(--p); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.sp-row__meta { margin: 0; color: var(--mut); font-size: .78rem; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sp-row__meta .sp-i { width: 14px; height: 14px; }
.sp-row__side { display: grid; justify-items: end; gap: 6px; flex: none; }
.sp-money { font-weight: 700; white-space: nowrap; }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 4px rgb(179 38 46 / .15); }
.sp-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sp-actions--end { justify-content: flex-end; margin: 14px 0 0; }
.sp-prod { color: var(--p); font-weight: 700; text-decoration: none; }
.sp-stars { color: #d4d0c8; letter-spacing: 2px; font-size: 1.05rem; direction: ltr; text-align: start; }
.sp-stars i { font-style: normal; } .sp-stars i.on { color: #e0a321; }
.sp-quote { margin: 4px 0; }

/* Chips */
.sp-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.sp-chip--ok { background: rgb(31 138 87 / .14); color: var(--ok); } .sp-chip--warn { background: rgb(185 119 14 / .15); color: var(--warn); }
.sp-chip--bad { background: rgb(179 38 46 / .13); color: var(--bad); } .sp-chip--info { background: rgb(45 106 159 / .14); color: var(--info); }
.sp-chip--mute { background: rgb(59 35 20 / .1); color: var(--mut); }

/* Buttons */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 99px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .25s, background-color .2s, color .2s; }
.sp-btn:active { transform: scale(.97); }
.sp-btn--primary { background: linear-gradient(135deg, var(--p), var(--dk)); color: #f6e7d1; box-shadow: 0 12px 24px -14px rgb(36 21 12 / .9); }
.sp-btn--primary:hover { box-shadow: 0 16px 28px -14px rgb(36 21 12 / 1); transform: translateY(-1px); color: #fff; }
.sp-btn--ghost { background: rgb(255 255 255 / .5); color: var(--p); border-color: var(--line); }
.sp-btn--ghost:hover { background: #fff; }
.sp-btn--gold { background: linear-gradient(135deg, #f0d29b, #d9b57a); color: #3b2314; box-shadow: 0 10px 22px -12px rgb(0 0 0 / .6); }
.sp-btn--sm { min-height: 36px; padding: 0 14px; font-size: .8rem; }
.sp-btn--block { width: 100%; }
.sp-link { background: none; border: 0; padding: 0; color: var(--a); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.sp-link:hover { text-decoration: underline; } .sp-link--danger { color: var(--bad); }
.sp-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; color: var(--mut); text-decoration: none; font-weight: 600; }
.sp-back .sp-i { width: 16px; height: 16px; } [dir="rtl"] .sp-back .sp-i { transform: none; } [dir="ltr"] .sp-back .sp-i { transform: scaleX(-1); }
.sp-center { text-align: center; }

/* Forms */
.sp-form { display: grid; gap: 12px; }
.sp-field { display: grid; gap: 4px; }
.sp-field > span { font-size: .8rem; font-weight: 600; color: var(--mut); }
.sp input[type="text"], .sp input[type="tel"], .sp input[type="email"], .sp input[type="password"], .sp input[type="search"], .sp select, .sp textarea {
	width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgb(255 255 255 / .72); color: var(--p); font: inherit; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.sp textarea { resize: vertical; min-height: 96px; }
.sp input:focus, .sp select:focus, .sp textarea:focus { outline: 0; border-color: var(--a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 18%, transparent); background: #fff; }
.sp .sp-code { text-align: center; font-size: 1.6rem; letter-spacing: .5em; font-weight: 700; }
.sp-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .88rem; }
.sp-check input { width: 18px; height: 18px; accent-color: var(--a); }
.sp-hint { margin: 0; font-size: .8rem; color: var(--mut); }
.sp-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-file { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px dashed var(--line); border-radius: 14px; cursor: pointer; color: var(--mut); font-size: .86rem; background: rgb(255 255 255 / .4); }
.sp-file:hover { border-color: var(--a); } .sp-file input { display: none; } .sp-file--sm { padding: 6px 12px; border-radius: 99px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chipbtn { min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: rgb(255 255 255 / .6); font: inherit; font-weight: 700; color: var(--p); cursor: pointer; transition: all .2s; }
.sp-chipbtn:hover, .sp-chipbtn.is-on { background: var(--p); color: #f6e7d1; border-color: var(--p); }
.sp-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sp-inline select { width: auto; min-height: 38px; }
.sp-search { margin: 0 0 8px; } .sp-search input { min-height: 40px !important; }

/* Tabs / pager */
.sp-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 8px; padding-bottom: 4px; scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tabs a { flex: none; padding: 7px 14px; border-radius: 99px; text-decoration: none; color: var(--mut); font-weight: 600; font-size: .84rem; border: 1px solid transparent; }
.sp-tabs a.is-on { background: var(--p); color: #f6e7d1; } .sp-tabs a:not(.is-on):hover { background: color-mix(in srgb, var(--a) 10%, transparent); }
.sp-pager { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.sp-pager a { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; text-decoration: none; color: var(--p); background: rgb(255 255 255 / .5); font-weight: 700; }
.sp-pager a.is-on { background: var(--p); color: #fff; }
.sp-empty { text-align: center; padding: 26px 10px; color: var(--mut); } .sp-empty .sp-i { width: 38px; height: 38px; opacity: .5; } .sp-empty p { margin: 6px 0 0; }

/* Ledger */
.sp-led { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); }
.sp-led:first-child { border-top: 0; }
.sp-led > div:first-child { display: grid; min-width: 0; } .sp-led span, .sp-led em { font-size: .78rem; color: var(--mut); font-style: normal; }
.sp-led__n { text-align: end; display: grid; justify-items: end; }
.sp-led b { font-size: 1.02rem; } .sp-led b.is-plus { color: var(--ok); } .sp-led b.is-minus { color: var(--bad); }

/* Tickets */
.sp-thread { padding: clamp(14px, 2vw, 22px); }
.sp-thread__h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.sp-thread__h h2 { margin: 0 0 2px; font-size: 1.1rem; line-height: 1.5; }
.sp-chat { display: grid; gap: 14px; padding: 10px 0 18px; }
.sp-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 92%; }
.sp-msg.is-staff { margin-inline-start: auto; flex-direction: row-reverse; }
.sp-bubble { background: rgb(255 255 255 / .78); border: 1px solid var(--line); border-radius: 18px; border-start-start-radius: 6px; padding: 10px 14px; min-width: 0; }
.sp-msg.is-staff .sp-bubble { background: linear-gradient(145deg, #4a2a16, var(--dk)); color: #f6e7d1; border-color: transparent; border-start-start-radius: 18px; border-start-end-radius: 6px; }
.sp-bubble__h { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; font-size: .78rem; margin-bottom: 2px; } .sp-bubble__h time { opacity: .65; font-size: .72rem; white-space: nowrap; }
.sp-bubble__b { overflow-wrap: anywhere; font-size: .92rem; }
.sp-attach { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; padding: 4px 10px; border-radius: 99px; background: rgb(0 0 0 / .08); color: inherit; text-decoration: none; font-size: .8rem; }
.sp-reply { border-top: 1px solid var(--line); padding-top: 14px; }
.sp-reply__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-thread__f { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* Auth / pay */
.sp--auth, .sp--pay { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: clamp(24px, 5vw, 56px); }
.sp-authcard { width: min(100%, 440px); padding: clamp(18px, 3vw, 30px); display: grid; gap: 14px; }
.sp-authcard__head { text-align: center; } .sp-authcard__head h2 { margin: 6px 0 2px; font-size: 1.35rem; } .sp-authcard__head p { margin: 0; color: var(--mut); font-size: .86rem; }
.sp-authcard__head img { max-height: 56px; width: auto; } .sp-authcard__head > .sp-i { width: 34px; height: 34px; color: var(--a); }
.sp-seg { display: flex; padding: 4px; gap: 4px; border-radius: 99px; background: rgb(59 35 20 / .08); }
.sp-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 99px; background: transparent; color: var(--mut); font: inherit; font-weight: 700; cursor: pointer; transition: all .2s; }
.sp-seg button.is-on { background: #fff; color: var(--p); box-shadow: 0 6px 14px -8px rgb(59 35 20 / .6); }
.sp-pane[hidden] { display: none; } .sp-pane { display: grid; gap: 12px; } .sp-pane .sp-link { text-align: center; }
.sp-pay-sum { display: grid; text-align: center; gap: 2px; padding: 16px; border-radius: 18px; background: rgb(255 255 255 / .6); border: 1px solid var(--line); }
.sp-pay-sum strong { font-size: 1.7rem; } .sp-pay-sum span, .sp-pay-sum em { color: var(--mut); font-size: .84rem; font-style: normal; }

/* Flash */
.sp-flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; margin-bottom: 14px; font-weight: 600; font-size: .9rem; animation: sp-in .45s cubic-bezier(.2, .8, .2, 1); }
.sp-flash--ok { background: rgb(31 138 87 / .14); color: #14663f; border: 1px solid rgb(31 138 87 / .25); }
.sp-flash--err { background: rgb(179 38 46 / .12); color: #8f1b22; border: 1px solid rgb(179 38 46 / .25); }
@keyframes sp-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.sp-main > * { animation: sp-up .5s cubic-bezier(.2, .8, .2, 1) both; } .sp-main > *:nth-child(2) { animation-delay: .04s; } .sp-main > *:nth-child(3) { animation-delay: .08s; }
@keyframes sp-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Mobile */
@media (max-width: 900px) {
	.sp { grid-template-columns: minmax(0, 1fr); gap: 12px; border-radius: 22px; padding: 12px; font-size: .9rem; }
	.sp--auth, .sp--pay { padding-block: 22px; }
	.sp-side { position: static; padding: 10px; }
	.sp-me { padding: 2px 2px 10px; } .sp-me .sp-avatar { --s: 52px !important; }
	.sp-nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
	.sp-nav::-webkit-scrollbar { display: none; }
	.sp-nav a { flex: none; padding: 8px 14px; min-height: 40px; font-size: .84rem; }
	.sp-nav__out { display: none !important; }
	.sp-grid--hero, .sp-grid--2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.sp-grid--2 > .sp-block { margin-bottom: 0; }
	.sp-wallet { min-height: 0; padding: 16px 18px; border-radius: 22px; }
	.sp-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-stat { padding: 10px 4px; } .sp-stat b { font-size: 1.25rem; }
	.sp-msg { max-width: 100%; }
}
@media (max-width: 560px) {
	.sp-cols { grid-template-columns: minmax(0, 1fr); }
	.sp-row { flex-wrap: wrap; } .sp-row__side { width: 100%; justify-items: stretch; grid-template-columns: auto 1fr; align-items: center; }
	.sp-row--link .sp-row__side { width: auto; display: flex; }
	.sp-actions { justify-content: flex-start; }
	.sp-thread__h { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .sp-blobs i, .sp-wallet__shine, .sp-main > *, .sp-flash { animation: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sp-card { background: rgb(255 255 255 / .86); } }

/* Inside wp-admin: bubbles without the front-end shell */
.sp--plain { display: block; padding: 0; background: none; border-radius: 0; margin: 0; overflow: visible; }

/* Give the signed-in panel the theme's full container width */
body.has-sulina-panel .entry-content--page > .sp[data-sp] { max-width: var(--container, 1180px); margin-inline: auto; }
body.has-sulina-panel .page-article { padding-block: clamp(16px, 3vw, 36px); }