/* shared UI helpers (front, builder, admin) */
.pw-wrap{position:relative;width:100%}
.pw-wrap>input{padding-right:2.9rem!important}
.pw-eye{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);border:0;background:none;color:#7b819f;padding:.45rem .6rem;border-radius:10px;line-height:1;cursor:pointer}
.pw-eye:hover,.pw-eye:focus-visible{color:var(--brand,#4f46e5);background:rgba(79,70,229,.08);outline:0}
.logo-chip{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:5px 10px}
.brand-img{display:block;object-fit:contain}
.brand-text{font-family:'Fraunces',Georgia,serif;font-weight:700;letter-spacing:-.01em}
.brand-text .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent,#f59e0b);margin-left:2px}
.imgprev{width:150px;height:72px;border:1px dashed #cdd1ea;border-radius:12px;display:grid;place-items:center;background:repeating-conic-gradient(#f3f4fb 0 25%,#fff 0 50%) 0/16px 16px;overflow:hidden;color:#9aa0b8;font-size:.8rem}
.imgprev.dark{background:#12142b}
.imgprev img{max-width:92%;max-height:62px;object-fit:contain}

/* OTP boxes */
.otp-boxes{display:flex;gap:.5rem;justify-content:center;margin:.25rem 0 .6rem}
.otp-box{width:48px;height:58px;text-align:center;font-size:1.6rem;font-weight:700;border:1.5px solid #dcdff0;border-radius:14px;background:#fff;color:#0f1224;transition:.15s;padding:0}
.otp-box:focus{outline:0;border-color:var(--brand,#4f46e5);box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.otp-eye{display:inline-flex;align-items:center;gap:.35rem;border:0;background:none;color:#6b7280;font-size:.85rem;margin:0 auto 1rem;padding:.25rem .6rem;border-radius:8px}
.otp-eye:hover{color:var(--brand,#4f46e5);background:rgba(79,70,229,.07)}
@media(max-width:380px){.otp-box{width:40px;height:50px;font-size:1.3rem}.otp-boxes{gap:.35rem}}

/* Premium split auth */
.auth-split{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#fff}
.auth-hero{position:relative;overflow:hidden;color:#fff;padding:3rem 3.5rem;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(900px 500px at 10% -10%,color-mix(in srgb,var(--accent,#f59e0b) 55%,transparent),transparent 60%),radial-gradient(700px 600px at 110% 110%,color-mix(in srgb,var(--brand,#4f46e5) 70%,#fff 0%),transparent 60%),linear-gradient(145deg,#12142b,color-mix(in srgb,var(--brand,#4f46e5) 80%,#0b0d22))}
.auth-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 80%);pointer-events:none}
.auth-hero>*{position:relative}
.auth-hero h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(2rem,3.2vw,3rem);line-height:1.1;font-weight:700;margin:0 0 1rem;letter-spacing:-.02em}
.auth-hero p.lead{color:rgba(255,255,255,.8);font-size:1.05rem;max-width:34rem}
.auth-points{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.8rem}
.auth-points li{display:flex;gap:.7rem;align-items:center;font-weight:500}
.auth-points i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:.9rem;flex:none}
.auth-hero .proof{font-size:.85rem;color:rgba(255,255,255,.65)}
.auth-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem 1.25rem;background:#fff}
.auth-box{width:100%;max-width:420px}
.auth-box .auth-logo{display:none;margin-bottom:1.5rem}
.auth-box h1{font-family:'Fraunces',Georgia,serif;font-weight:700;letter-spacing:-.02em}
.auth-box .form-control{border-radius:12px;padding:.8rem 1rem;border:1.5px solid #dcdff0}
.auth-box .form-control:focus{border-color:var(--brand,#4f46e5);box-shadow:0 0 0 4px rgba(79,70,229,.13)}
.auth-box .btn-lg{border-radius:14px;padding:.85rem 1rem;font-weight:600}
.auth-foot{margin-top:2rem;font-size:.8rem;color:#9aa0b8;text-align:center}
.auth-foot a{color:inherit}
@media(max-width:991px){
  .auth-split{grid-template-columns:1fr}
  .auth-hero{display:none}
  .auth-panel{justify-content:flex-start;padding-top:2.2rem;background:linear-gradient(180deg,#f3f4fd,#fff 260px)}
  .auth-box .auth-logo{display:block}
}

/* Front mobile app bar */
.appbar-front{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid #e8e9f3;padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom));box-shadow:0 -6px 24px -10px rgba(20,20,60,.18)}
.appbar-front a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#7b819f;text-decoration:none;font-size:.68rem;font-weight:600;padding:.3rem 0}
.appbar-front a i{font-size:1.3rem;line-height:1}
.appbar-front a.active{color:var(--brand,#4f46e5)}
.appbar-front a.ab-cta{align-self:center}
.appbar-front a.ab-cta i{display:grid;place-items:center;width:50px;height:50px;margin-top:-22px;border-radius:50%;background:var(--brand,#4f46e5);color:#fff;font-size:1.5rem;box-shadow:0 8px 20px -6px var(--brand,#4f46e5)}
@media(max-width:991.98px){body.has-appbar{padding-bottom:0}body.has-appbar footer.site{padding-bottom:calc(2rem + 78px + env(safe-area-inset-bottom,0px))}}
.auth-hero h2,.auth-hero .lead{color:#fff}
.auth-hero p.lead{color:rgba(255,255,255,.82)}
.toolbar .col-md{flex:1 1 230px;min-width:200px}
.text-center>.brand-img,.text-center .brand-img{margin-left:auto;margin-right:auto}

/* Button states: Bootstrap's .btn:hover/:active/:focus/:disabled recolour via --bs-btn-* vars, so custom buttons must set them (otherwise they flash white on hover) */
.btn-brand,.btn-go{--bs-btn-color:#fff;--bs-btn-bg:var(--brand,#4f46e5);--bs-btn-border-color:var(--brand,#4f46e5);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--brand,#4f46e5);--bs-btn-hover-border-color:var(--brand,#4f46e5);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--brand,#4f46e5);--bs-btn-active-border-color:var(--brand,#4f46e5);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--brand,#4f46e5);--bs-btn-disabled-border-color:var(--brand,#4f46e5);--bs-btn-focus-shadow-rgb:79,70,229;color:#fff;background-color:var(--brand,#4f46e5)}
.btn-brand:hover,.btn-brand:focus,.btn-brand:active,.btn-brand.active,.btn-go:hover,.btn-go:focus,.btn-go:active{color:#fff!important;background-color:var(--brand,#4f46e5)!important;filter:brightness(1.1)}
.btn-brand:active,.btn-go:active{filter:brightness(.94)}
.btn-accent{--bs-btn-color:#1b1300;--bs-btn-bg:var(--accent,#f59e0b);--bs-btn-border-color:var(--accent,#f59e0b);--bs-btn-hover-color:#1b1300;--bs-btn-hover-bg:var(--accent,#f59e0b);--bs-btn-hover-border-color:var(--accent,#f59e0b);--bs-btn-active-color:#1b1300;--bs-btn-active-bg:var(--accent,#f59e0b);--bs-btn-active-border-color:var(--accent,#f59e0b);color:#1b1300;background-color:var(--accent,#f59e0b)}
.btn-accent:hover,.btn-accent:focus,.btn-accent:active{color:#1b1300!important;background-color:var(--accent,#f59e0b)!important;filter:brightness(1.07)}
.btn-outline-brand{--bs-btn-color:var(--brand,#4f46e5);--bs-btn-border-color:var(--brand,#4f46e5);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--brand,#4f46e5);--bs-btn-hover-border-color:var(--brand,#4f46e5);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--brand,#4f46e5);--bs-btn-active-border-color:var(--brand,#4f46e5)}
.btn-outline-brand:hover,.btn-outline-brand:focus,.btn-outline-brand:active{color:#fff!important;background-color:var(--brand,#4f46e5)!important}
.btn-light{--bs-btn-hover-bg:#eceef8;--bs-btn-hover-border-color:#e3e5f3;--bs-btn-active-bg:#e3e5f3}
.btn:disabled,.btn.disabled{opacity:.6}
.btn-outline-warning{--bs-btn-color:#92400e;--bs-btn-border-color:#d97706;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#d97706;--bs-btn-hover-border-color:#d97706;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b45309;--bs-btn-active-border-color:#b45309}
.btn-ghost-light{color:#fff!important;border:1px solid rgba(255,255,255,.3);background:transparent;transition:.2s}
.btn-ghost-light:hover,.btn-ghost-light:focus{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff!important}
/* flash messages */
.flash-wrap{margin-top:14px}
.flash{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid;margin-bottom:8px;font-size:.95rem;line-height:1.45;box-shadow:0 4px 14px rgba(20,20,60,.06)}
.flash-ic{font-size:1.1rem;line-height:1.45;flex:none}
.flash-tx{flex:1;min-width:0;overflow-wrap:anywhere}
.flash-x{flex:none;background:none;border:0;padding:2px 4px;opacity:.55;color:inherit;line-height:1}
.flash-x:hover{opacity:1}
.flash-sm{font-size:.86rem;padding:9px 12px}
.flash-success{background:#ecfdf3;border-color:#a7e8c3;color:#14532d}
.flash-danger{background:#fef2f2;border-color:#fbc4c4;color:#7f1d1d}
.flash-warning{background:#fffbeb;border-color:#f6d98a;color:#78350f}
.flash-info{background:#eff6ff;border-color:#b6d4fb;color:#1e3a8a}
@media(max-width:575px){.flash{border-radius:10px}}
.flash-wrap:not(.container){margin:0 0 14px}
/* user dashboard */
.min-w-0{min-width:0}
.dnav{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.dnav::-webkit-scrollbar{display:none}
.dnav a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;color:#374151;text-decoration:none;white-space:nowrap;font-weight:600;font-size:.94rem;border:1px solid transparent;transition:.15s;flex:none}
.dnav a i{font-size:1.1rem;color:#6b7280}
.dnav a em{font-style:normal;font-size:.72rem;background:#eef0fb;color:#4338ca;border-radius:20px;padding:1px 8px;margin-left:auto}
.dnav a:hover{background:#f3f4fb;color:#111827}
.dnav a.on{background:#eef0ff;color:#4338ca;border-color:#dfe2fb}
.dnav a.on i{color:#4338ca}
.dnav a.out,.dnav a.out i{color:#b91c1c}
@media(min-width:992px){.dnav{flex-direction:column;overflow:visible;position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px}.dnav a{flex:auto}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;height:100%;position:relative}
.stat>i{position:absolute;right:14px;top:12px;font-size:1.3rem;color:#a5b4fc}
.stat .n{font-size:1.9rem;font-weight:800;line-height:1.1;color:#111827}
.stat .n small{font-size:1rem;color:#9ca3af;font-weight:700}
.stat .l{font-size:.82rem;color:#6b7280;font-weight:600}
.stat .ubar-h,.stat .ubar-s{display:none}
.stat .ubar{margin-top:8px}
.ubar-h{display:flex;justify-content:space-between;font-size:.82rem;color:#4b5563;margin-bottom:5px}
.ubar-h b{color:#111827}
.ubar-t{height:8px;background:#eef0f6;border-radius:99px;overflow:hidden}
.ubar-f{display:block;height:100%;border-radius:99px;transition:width .4s}
.ubar-f.ok{background:#4f46e5}.ubar-f.warn{background:#f59e0b}.ubar-f.bad{background:#dc2626}
.ubar-s{font-size:.76rem;color:#9ca3af;margin-top:4px}
.stat>.ubar-s{display:block}
.plan-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #eef0f6}
.plan-row:first-of-type{border-top:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.9rem}
.kv dt{color:#6b7280;font-weight:600}.kv dd{margin:0;text-align:right;color:#111827}
.dmain>.dash-card{height:auto}.dmain{min-width:0}@media(max-width:575px){.dmain .d-flex.flex-wrap form,.dmain .d-flex.flex-wrap>a.btn{flex:1 1 auto}.dmain .d-flex.flex-wrap form .btn{width:100%}}
/* ===== site header ===== */
body.has-appbar{max-width:100%;overflow-x:clip}
@media(max-width:991.98px){.row.g-5{--bs-gutter-x:1.5rem;--bs-gutter-y:2rem}}
.site-hd{position:sticky;top:0;z-index:1050}
.site-hd::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:box-shadow .25s;z-index:-1}
.site-hd.scrolled::before{box-shadow:0 8px 28px -14px rgba(20,22,60,.28)}
.site-hd .navbar{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:.55rem 0}
.hd-toggle{border:1px solid var(--line);background:#fff;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;color:var(--ink);box-shadow:0 4px 12px -6px rgba(20,22,60,.25)}
.hd-toggle:active{transform:scale(.96)}
.hd-links .nav-link{font-weight:600;font-size:.94rem;color:#374151;display:flex;align-items:center;gap:10px;border-radius:10px;transition:.15s}
.hd-links .nav-link i{font-size:1.1rem;color:#8b90ab}
.hd-links .nav-link:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent)}
.hd-links .nav-link.active{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.hd-links .nav-link.active i{color:var(--brand)}
.hd-actions{display:flex;align-items:center;gap:10px}
.hd-login{font-weight:600;font-size:.94rem;color:#374151;text-decoration:none;padding:.5rem .8rem;border-radius:10px;display:flex;align-items:center;gap:8px}
.hd-login:hover{background:#f3f4fb;color:var(--brand)}
.hd-cta{padding:.55rem 1.1rem;font-size:.92rem}
.hd-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#ec4899));flex:none}
.hd-avbtn{border:1px solid var(--line);background:#fff;border-radius:99px;padding:3px 10px 3px 3px;display:flex;align-items:center;gap:6px;color:#6b7280}
.hd-avbtn:hover{border-color:#cfd3ee}
.hd-dd{border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px -16px rgba(20,22,60,.3);padding:8px;min-width:210px}
.hd-dd .dropdown-item{border-radius:9px;padding:.5rem .75rem;font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:10px;color:#374151}
.hd-dd .dropdown-item i{color:#8b90ab}
.hd-dd .dropdown-item:hover{background:#f3f4fb;color:var(--brand)}
.hd-dd .dropdown-item.text-danger,.hd-dd .dropdown-item.text-danger i{color:#b91c1c}
@media(min-width:992px){
  .hd-links .nav-link{padding:.5rem .85rem}
  .hd-links .nav-link i{display:none}
  .hd-links .dropdown-toggle::after{margin-left:.35rem;vertical-align:.15em}
  .site-hd .offcanvas{position:static;visibility:visible!important;transform:none!important;background:none;border:0;flex-grow:1;display:flex;flex-direction:row;align-items:center}
  .site-hd .offcanvas-body{display:flex!important;align-items:center;padding:0!important;flex-grow:1!important;overflow:visible!important}
}
@media(max-width:991.98px){
  .site-hd .navbar{padding:.5rem 0}
  #nav.offcanvas{width:min(88vw,360px);border:0;border-radius:24px 0 0 24px;box-shadow:-24px 0 60px rgba(15,18,50,.28);background:#fff}
  #nav .offcanvas-header{padding:16px 18px 12px;border-bottom:1px solid var(--line);justify-content:space-between}
  #nav .offcanvas-body{padding:14px 14px 22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
  .hd-user{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,#fff),#fff);border:1px solid var(--line)}
  .hd-user b{display:block;font-size:.98rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hd-user small{display:block;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hd-links{gap:2px}
  .hd-links .nav-link{padding:13px 14px;font-size:1.02rem;border-radius:14px}
  .hd-links .dropdown-menu{position:static;box-shadow:none;border:0;background:#f7f8fd;margin:4px 0 6px 12px;border-radius:14px}
  .hd-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:auto}
  .hd-cta{width:100%;padding:.85rem 1rem;font-size:1rem;text-align:center}
  .hd-login{justify-content:center;border:1.5px solid var(--line);padding:.8rem 1rem;font-size:1rem}
  .hd-acct{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hd-acct a{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;background:#f7f8fd;color:#374151;font-weight:600;font-size:.9rem;text-decoration:none}
  .hd-acct a i{color:var(--brand)}
  .hd-acct a.out{color:#b91c1c}.hd-acct a.out i{color:#b91c1c}
}
/* mobile polish */
@media(max-width:575px){
  .hero .d-flex.flex-wrap.gap-2{flex-direction:column}
  .hero .d-flex.flex-wrap.gap-2 .btn{width:100%;text-align:center}
  .hero{padding-top:2.2rem}
  .appbar-front{border-radius:20px 20px 0 0;box-shadow:0 -10px 30px -12px rgba(20,22,60,.25)}
}

/* admin date/time wrap */
.dt{display:inline-flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.dt-d{font-weight:600;color:#1f2340}.dt-t{color:#6b7280;font-size:.85em}
