:root{
  --bg:#0b1020;--surface:#121a2e;--text:#fff;--muted:#aab3c7;
  --button-bg:#fff;--button-text:#101522;--radius:18px;
  --shadow:0 24px 60px rgba(16,24,40,.18)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:"Sarabun",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:400}button,input,textarea,select{font:inherit}[hidden]{display:none!important}.muted{color:#667085}.tiny{font-size:12px}.center{text-align:center}.danger{color:#b42318!important}

/* ---------- Public Bio ---------- */
.public-page{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .35s ease}.bg-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.bio-shell{position:relative;z-index:1;width:min(100%,620px);margin:auto;padding:24px 16px 48px;min-height:100vh}.bio-card{position:relative;text-align:center;background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid rgba(255,255,255,.08);border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.2);backdrop-filter:blur(14px)}.cover{height:180px;background-size:cover;background-position:center}.avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;border:5px solid var(--surface);background:var(--surface);margin:34px auto 8px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.22)}.cover+.avatar{margin-top:-52px}.bio-card>.avatar{margin-top:34px}.avatar-fallback{display:grid;place-items:center;font-size:42px;font-weight:900}.bio-card h1{margin:8px 20px 6px;font-size:30px;line-height:1.2}.bio-description{margin:0 auto;color:var(--muted);line-height:1.62;max-width:500px;padding:0 22px}.address{color:var(--muted);font-size:14px;margin:10px 20px 0}.link-list{display:grid;gap:12px;padding:18px 18px 4px}.bio-link{position:relative;overflow:hidden;display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:10px;text-decoration:none;background:var(--button-bg);color:var(--button-text);padding:14px 15px;border-radius:var(--radius);font-weight:800;min-height:56px;border:1px solid transparent;box-shadow:0 8px 22px rgba(0,0,0,.10);transform:translateZ(0);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.link-icon{font-size:22px}.link-label{text-align:left}.link-arrow{font-size:26px;opacity:.45}.link-style-outline{background:transparent;color:var(--text);border-color:color-mix(in srgb,var(--text) 28%,transparent)}.link-style-glass{background:rgba(255,255,255,.11);color:var(--text);border-color:rgba(255,255,255,.14);backdrop-filter:blur(14px)}.link-style-gradient{background:linear-gradient(120deg,var(--button-bg),color-mix(in srgb,var(--button-bg) 55%,#7c3aed));color:var(--button-text)}.link-style-glow{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 28px color-mix(in srgb,var(--button-bg) 42%,transparent)}.social-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:16px 18px}.social-pill{min-width:76px;text-decoration:none;color:var(--text);display:grid;gap:5px;justify-items:center;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}.social-pill span{font-size:22px}.social-pill small{font-size:11px;color:var(--muted)}footer{padding:14px 18px 22px;color:var(--muted);font-size:12px}.error-card,.loading-card{margin-top:18vh;padding:26px;border-radius:22px;background:var(--surface);color:var(--text);text-align:center;box-shadow:var(--shadow)}.retry-btn{border:0;border-radius:12px;background:var(--button-bg);color:var(--button-text);padding:11px 16px;font-weight:800}

/* Banner carousel */
.banner-carousel{overflow:hidden;margin:18px 18px 2px;border-radius:18px}.banner-track{display:flex;transition:transform .45s cubic-bezier(.2,.7,.2,1)}.banner-slide{min-width:100%}.banner-slide a{display:block}.banner-slide img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;background:rgba(255,255,255,.06)}.banner-dots{display:flex;justify-content:center;gap:6px;padding:9px 0 0}.banner-dot{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.28)}.banner-dot.active{width:18px;border-radius:99px;background:var(--text)}

/* Skeleton */
.skeleton-card{padding:42px 18px}.skeleton{background:linear-gradient(100deg,rgba(255,255,255,.06) 20%,rgba(255,255,255,.14) 40%,rgba(255,255,255,.06) 60%);background-size:200% 100%;animation:skeleton 1.3s infinite}.skeleton-avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 20px}.skeleton-title{height:28px;width:55%;margin:0 auto 12px;border-radius:9px}.skeleton-text{height:16px;width:72%;margin:0 auto 30px;border-radius:8px}.skeleton-link{height:56px;border-radius:18px;margin:12px 0}@keyframes skeleton{to{background-position-x:-200%}}

/* Background FX */
.bgfx-gradient.public-page{background:linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--bg) 65%,#4338ca),var(--bg));background-size:220% 220%;animation:bgGradient 14s ease infinite}.bgfx-blobs .bg-fx .blob{position:absolute;border-radius:50%;filter:blur(28px);opacity:.35;animation:blobFloat 12s ease-in-out infinite alternate}.blob.b1{width:310px;height:310px;background:#7c3aed;left:-90px;top:8%}.blob.b2{width:280px;height:280px;background:#0ea5e9;right:-110px;top:36%;animation-delay:-4s!important}.blob.b3{width:230px;height:230px;background:#f59e0b;left:22%;bottom:-110px;animation-delay:-8s!important}.particle{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 12px rgba(255,255,255,.35);animation:particleFloat var(--d) ease-in-out infinite alternate}@keyframes bgGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes blobFloat{to{transform:translate3d(30px,-35px,0) scale(1.12)}}@keyframes particleFloat{to{transform:translate3d(12px,-36px,0);opacity:.25}}

/* Entrance FX */
.enter-item{opacity:1}.entrance-fade:not(.bio-ready) .enter-item{opacity:0}.entrance-slide-up:not(.bio-ready) .enter-item{opacity:0;transform:translateY(18px)}.entrance-zoom:not(.bio-ready) .enter-item{opacity:0;transform:scale(.96)}.bio-ready .enter-item{transition:opacity .55s ease var(--delay,0ms),transform .55s cubic-bezier(.2,.75,.25,1) var(--delay,0ms);opacity:1;transform:none}

/* Logo FX */
.logofx-float .logo-fx{animation:logoFloat 3.8s ease-in-out infinite}.logofx-pulse .logo-fx{animation:logoPulse 2.8s ease-in-out infinite}.logofx-glow .logo-fx{box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 34px color-mix(in srgb,var(--button-bg) 45%,transparent)}@keyframes logoFloat{50%{transform:translateY(-7px)}}@keyframes logoPulse{50%{box-shadow:0 0 0 12px rgba(255,255,255,0),0 0 28px color-mix(in srgb,var(--button-bg) 35%,transparent)}}

/* Button FX */
.buttonfx-press .bio-link:active,.buttonfx-press-ripple .bio-link:active{transform:scale(.965)}.buttonfx-glow .bio-link:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.18),0 0 24px color-mix(in srgb,var(--button-bg) 30%,transparent)}.ripple{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);animation:ripple .62s ease-out;pointer-events:none}@keyframes ripple{to{transform:translate(-50%,-50%) scale(16);opacity:0}}

/* Featured FX */
.featured-link{outline:2px solid color-mix(in srgb,var(--button-bg) 55%,#f59e0b)}.featuredfx-shimmer .featured-link::after{content:"";position:absolute;inset:-2px;transform:translateX(-140%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shimmer 4.5s ease-in-out infinite}.featuredfx-pulse .featured-link{animation:featuredPulse 2.8s ease-in-out infinite}.featuredfx-glow .featured-link{box-shadow:0 0 0 2px rgba(255,255,255,.08),0 0 30px color-mix(in srgb,var(--button-bg) 45%,transparent)}@keyframes shimmer{0%,62%{transform:translateX(-140%) skewX(-20deg)}82%,100%{transform:translateX(140%) skewX(-20deg)}}@keyframes featuredPulse{50%{transform:scale(1.018)}}

.mobile-lite .bg-fx{display:none}.mobile-lite.bgfx-gradient.public-page{animation:none;background:linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--bg) 78%,#4338ca))}.mobile-lite .logo-fx,.mobile-lite .featured-link{animation:none!important}\n.reduced-motion *,.reduced-motion *::before,.reduced-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.reduced-motion .enter-item{opacity:1!important;transform:none!important}

/* ---------- Admin ---------- */
.admin-page{background:#f5f7fb;color:#101828}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#0b1020,#172554)}.panel{background:#fff;border:1px solid #e7eaf0;border-radius:18px;padding:18px;box-shadow:0 6px 20px rgba(16,24,40,.04)}.login-card{width:min(100%,420px);display:grid;gap:14px}.brand-badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#111827;color:#fff;font-weight:900}.login-card h1{margin:0}.login-card label,.form-grid label,.dialog-card label{display:grid;gap:7px;font-weight:650;font-size:14px}input,textarea,select{width:100%;border:1px solid #d0d5dd;border-radius:12px;padding:11px 12px;background:#fff;color:#101828;outline:none}input:focus,textarea:focus,select:focus{border-color:#7aa2ff;box-shadow:0 0 0 3px rgba(37,99,235,.1)}button,.outline,.upload-btn{border:0;border-radius:12px;padding:10px 14px;font-weight:750;text-decoration:none;cursor:pointer}.primary{background:#2563eb;color:#fff}.primary:disabled{opacity:.55;cursor:wait}.outline{background:#fff;border:1px solid #d0d5dd;color:#344054}.ghost{background:transparent;color:#475467}.admin-layout{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:18px;background:#0f172a;color:#fff;display:flex;flex-direction:column;gap:16px}.sidebar-brand{display:flex;gap:12px;align-items:center}.sidebar-brand small{display:block;color:#94a3b8}.sidebar nav{display:grid;gap:7px}.sidebar nav button{background:transparent;color:#cbd5e1;text-align:left}.sidebar nav button.active,.sidebar nav button:hover{background:#1e293b;color:#fff}.sidebar .outline{margin-top:auto}.mobile-topbar{display:none}.admin-main{min-width:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;padding:24px;align-items:start}.editor-area{min-width:0}.tab-pane{display:none}.tab-pane.active{display:block}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.section-head h1{margin:0 0 4px;font-size:28px}.section-head p{margin:0}.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}.stat{background:#fff;border:1px solid #e7eaf0;border-radius:18px;padding:18px}.stat span{display:block;color:#667085}.stat strong{font-size:34px}.rank-list>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eef2f6}.rank-list>div:last-child{border-bottom:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .full{grid-column:1/-1}.switch-line{display:flex!important;grid-auto-flow:column;justify-content:flex-start!important;align-items:center!important;gap:8px!important}.switch-line input{width:auto}.upload-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}.upload-row>div{display:grid;gap:7px}.upload-btn{display:inline-grid;place-items:center;background:#eef4ff;color:#1849a9;border:1px dashed #84adff;cursor:pointer}.inline{width:max-content;margin-top:10px}.sortable-list,.panel-list{display:grid;gap:10px}.manage-row{display:grid;grid-template-columns:24px 42px minmax(0,1fr) auto auto;align-items:center;gap:10px;background:#fff;border:1px solid #e7eaf0;border-radius:16px;padding:12px}.manage-row.dragging{opacity:.45}.drag{cursor:grab;color:#98a2b3;font-size:22px}.manage-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#f2f4f7;font-size:20px}.manage-main{min-width:0}.manage-main strong,.manage-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.manage-main small{color:#667085}.status{font-size:12px;font-weight:800;padding:5px 8px;border-radius:99px}.status.on{background:#ecfdf3;color:#027a48}.status.off{background:#f2f4f7;color:#667085}.row-actions{display:flex;gap:5px}.row-actions button{padding:7px 9px;background:#f8fafc;color:#344054}.row-actions button:disabled{opacity:.3;cursor:not-allowed}.banner-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.banner-admin-card{display:grid;gap:12px}.banner-admin-card img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:12px;background:#f2f4f7}.banner-admin-card small{display:block;color:#667085}.theme-grid .color-input{display:flex;align-items:center;gap:10px}.color-input input[type=color]{width:54px;height:42px;padding:3px}.color-input code{font-size:12px;color:#667085}.form-subhead{border-top:1px solid #eef2f6;padding-top:14px;display:flex;justify-content:space-between;gap:10px;color:#344054}.form-subhead span{font-size:12px;color:#667085}.info-box{margin-top:16px}.info-box code{display:inline-block;margin:8px 0;padding:5px 8px;background:#f2f4f7;border-radius:8px}.preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.preset-card{display:grid;text-align:left;gap:6px;background:#fff;border:1px solid #e7eaf0;padding:12px}.preset-card.active{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}.preset-card small{color:#667085}.preset-swatch{height:56px;border-radius:12px;display:block}.p-minimal{background:linear-gradient(135deg,#f5f7fb,#fff)}.p-smooth{background:linear-gradient(135deg,#0b1020,#4338ca)}.p-modern{background:linear-gradient(135deg,#111827,#6d28d9,#0ea5e9)}.p-professional{background:linear-gradient(135deg,#071225,#d6aa55)}.p-neon{background:linear-gradient(135deg,#080612,#7c3aed,#06b6d4)}.p-playful{background:linear-gradient(135deg,#312e81,#f472b6,#fef3c7)}

/* Admin phone preview */
.preview-area{position:sticky;top:24px}.preview-title{text-align:center;color:#667085;font-size:13px;margin-bottom:10px}.phone-frame{width:330px;height:680px;border-radius:42px;background:#111827;padding:11px;margin:auto;box-shadow:0 24px 60px rgba(16,24,40,.22)}.phone-screen{position:relative;height:100%;border-radius:33px;overflow:auto;background:var(--pbg);color:var(--ptext);scrollbar-width:none}.phone-screen::-webkit-scrollbar{display:none}.preview-bg{position:absolute;inset:0;pointer-events:none}.preview-gradient{background:linear-gradient(135deg,transparent,rgba(99,102,241,.22),transparent)}.preview-blobs::before,.preview-blobs::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;filter:blur(20px);opacity:.3}.preview-blobs::before{background:#7c3aed;left:-45px;top:80px}.preview-blobs::after{background:#0ea5e9;right:-55px;bottom:120px}.preview-particles{background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.4) 0 1px,transparent 2px),radial-gradient(circle at 70% 50%,rgba(255,255,255,.35) 0 1px,transparent 2px),radial-gradient(circle at 45% 80%,rgba(255,255,255,.35) 0 1px,transparent 2px)}.pcover{height:130px;background-size:cover;background-position:center;position:relative}.pbody{position:relative;text-align:center;padding:0 14px 24px;background:transparent;min-height:100%}.pavatar{width:78px;height:78px;border-radius:50%;object-fit:cover;border:4px solid var(--pbg);margin-top:20px;background:var(--psurface)}.pcover+.pbody .pavatar{margin-top:-39px}.pfallback{display:inline-grid;place-items:center;font-size:28px;font-weight:800}.p-logo-float{animation:logoFloat 3.8s ease-in-out infinite}.p-logo-pulse{box-shadow:0 0 0 8px rgba(255,255,255,.06)}.p-logo-glow{box-shadow:0 0 24px rgba(255,255,255,.3)}.pbody h3{margin:8px 0 5px}.pbody p{color:var(--pmuted);font-size:12px;line-height:1.45}.pbanner{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:12px;margin:8px 0}.plinks{display:grid;gap:8px;margin-top:12px}.plinks div{display:flex;align-items:center;gap:8px;text-align:left;background:var(--pbtn);color:var(--pbtntext);padding:10px 11px;border-radius:var(--pradius);font-size:12px;font-weight:800;position:relative;overflow:hidden}.plinks .p-link-outline{background:transparent;color:var(--ptext);border:1px solid rgba(255,255,255,.22)}.plinks .p-link-glass{background:rgba(255,255,255,.1);color:var(--ptext)}.plinks .p-link-gradient{background:linear-gradient(120deg,var(--pbtn),#8b5cf6)}.plinks .p-featured{outline:2px solid rgba(255,255,255,.3)}.p-featured-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%);animation:shimmer 4s infinite}.p-featured-pulse{animation:featuredPulse 2.8s infinite}.p-featured-glow{box-shadow:0 0 18px rgba(255,255,255,.25)}.psocials{display:flex;justify-content:center;gap:9px;font-size:18px;margin-top:14px}

.toast{position:fixed;z-index:1000;right:18px;bottom:18px;background:#101828;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow)}.toast.error{background:#b42318}dialog{border:0;border-radius:20px;padding:0;box-shadow:var(--shadow);width:min(92vw,500px)}dialog::backdrop{background:rgba(15,23,42,.5)}.dialog-card{position:relative;padding:20px;display:grid;gap:14px}.dialog-card h2{margin:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.dialog-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;padding:0}

@media(max-width:1050px){.workspace{grid-template-columns:1fr}.preview-area{position:static}.phone-frame{width:320px;height:640px}.preview-area{padding-bottom:30px}}
@media(max-width:760px){.admin-layout{display:block}.sidebar{position:fixed;z-index:30;left:-280px;width:260px;transition:.2s left}.menu-open .sidebar{left:0}.mobile-topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid #e7eaf0;padding:12px 15px}.mobile-topbar button{background:#f2f4f7}.workspace{padding:14px}.section-head{align-items:flex-start}.section-head h1{font-size:24px}.stat-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.manage-row{grid-template-columns:34px minmax(0,1fr) auto;gap:8px}.manage-row .drag{display:none}.manage-row .manage-icon{width:34px;height:34px;grid-column:1}.manage-row .manage-main{grid-column:2}.manage-row .status{grid-column:3}.manage-row .row-actions{grid-column:1/-1;justify-content:flex-end;border-top:1px solid #eef2f6;padding-top:8px}.banner-admin-grid{grid-template-columns:1fr}.preview-area{display:none}.upload-row{grid-template-columns:1fr}.upload-btn{width:100%}.section-head{flex-wrap:wrap}.section-head>.primary{width:100%}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-subhead{display:grid}.bio-shell{padding:12px 10px 30px}.bio-card{border-radius:22px}.cover{height:150px}.avatar{width:92px;height:92px}.bio-card h1{font-size:26px}.link-list{padding-left:12px;padding-right:12px}.banner-carousel{margin-left:12px;margin-right:12px}}
@media(max-width:480px){.preset-grid{grid-template-columns:1fr 1fr}.preset-card{padding:9px}.preset-swatch{height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* Sarabun typography tuning */
h1,h2,h3,.bio-card h1{font-family:"Sarabun",system-ui,sans-serif;font-weight:700}button,input,textarea,select,.bio-link{font-family:"Sarabun",system-ui,sans-serif}.bio-description,.address,.muted{font-weight:400}.bio-link,.primary,.outline,.ghost{font-weight:600}