:root{
    --bs-body-font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --primary:#24324a;
    --primary-rgb:36,50,74;
    --accent:#22a06b;
    --accent-rgb:34,160,107;
    --background:#f8fafc;
    --foreground:#18212f;
    --card:#ffffff;
    --card-soft:#eef2f6;
    --muted:#6b778c;
    --border:#dce4ee;
    --input:#dce4ee;
    --warning:#f59e0b;
    --danger:#dc2626;
    --info:#2563eb;
    --whatsapp:#1fb66b;
    --shadow-sm:0 10px 30px rgba(15,23,42,.06);
    --shadow:0 20px 50px rgba(15,23,42,.08);
    --radius:14px;
    --radius-lg:18px;
    --sidebar:#18212f;
    --sidebar-accent:#202b3c;
    --sidebar-border:#2b384a;
    --sidebar-muted:#9aa6bb;
    --sidebar-foreground:#edf2f7;
}
*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--background);
    color:var(--foreground);
    font-family:var(--bs-body-font-family);
    line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
h1,h2,h3,h4,h5,h6{
    color:var(--foreground);
    font-weight:700;
    letter-spacing:-.03em;
}
small,.text-muted,.text-muted-foreground{color:var(--muted)!important}
.section-padding{padding:4rem 0}
.section-padding-lg{padding:5rem 0}
.section-padding-sm{padding:2.5rem 0}
.container-wide{max-width:1280px;margin:0 auto}
.container-narrow{max-width:1140px;margin:0 auto}
.page-shell{padding-bottom:5rem}
.bg-card{background:var(--card)}
.bg-soft{background:var(--card-soft)}
.border-soft{border-color:var(--border)!important}
.rounded-soft{border-radius:var(--radius)}
.rounded-soft-lg{border-radius:var(--radius-lg)}
.shadow-soft{box-shadow:var(--shadow-sm)}
.shadow-elevated{box-shadow:var(--shadow)}
.site-topbar{
    display:none;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:var(--primary);
    color:rgba(255,255,255,.82);
}
.site-topbar .inner{
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    font-size:.76rem;
}
.site-topbar .meta{
    display:flex;
    flex-wrap:wrap;
    gap:1.25rem;
}
.site-topbar .meta span,
.site-topbar .badge-line{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}
.site-header{
    position:sticky;
    top:0;
    z-index:1030;
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(16px);
}
.site-navbar{min-height:72px}
.navbar-toggler{padding:.35rem .45rem;border:none;box-shadow:none!important}
.brand-mark{
    width:36px;height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.04em;
}
.brand-block strong{display:block;font-size:.92rem;line-height:1.1}
.brand-block small{display:block;font-size:.68rem;color:var(--muted);line-height:1.15}
.site-nav .nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.65rem .9rem!important;
    border-radius:10px;
    font-size:.92rem;
    font-weight:600;
    color:var(--muted);
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active{
    color:var(--foreground);
    background:var(--card-soft);
}
.btn{
    border-radius:10px;
    font-weight:700;
    padding:.72rem 1rem;
}
.btn-lg{padding:.92rem 1.2rem;border-radius:12px}
.btn-primary{
    background:var(--primary);
    border-color:var(--primary);
}
.btn-primary:hover,.btn-primary:focus{
    background:#1d2a40;border-color:#1d2a40;
}
.btn-accent,.btn-success,.btn-whatsapp{
    background:var(--whatsapp);
    border-color:var(--whatsapp);
    color:#fff;
}
.btn-accent:hover,.btn-success:hover,.btn-whatsapp:hover,
.btn-accent:focus,.btn-success:focus,.btn-whatsapp:focus{
    background:#17995a;border-color:#17995a;color:#fff;
}
.btn-soft{
    background:var(--card-soft);
    border:1px solid var(--border);
    color:var(--foreground);
}
.btn-soft:hover{
    background:#e4ebf3;color:var(--foreground);
}
.btn-outline-white-soft{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
}
.btn-outline-white-soft:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}
.hero-ref{
    background:var(--primary);
    color:#fff;
}
.hero-ref .section-wrap{
    padding:3rem 0 3.75rem;
}
.hero-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.hero-pill{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    border-radius:999px;
    background:rgba(255,255,255,.1);
    padding:.38rem .8rem;
    font-size:.76rem;
    font-weight:600;
}
.hero-title{
    font-size:clamp(2rem,4.1vw,3.8rem);
    line-height:1.06;
    margin:0 0 .85rem;
    color:#fff;
}
.hero-desc{
    max-width:680px;
    margin:0 0 .5rem;
    font-size:1.05rem;
    color:rgba(255,255,255,.82);
}
.hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin:0 0 1.5rem;
    padding:0;
    list-style:none;
    color:rgba(255,255,255,.66);
    font-size:.9rem;
}
.hero-meta li{display:flex;align-items:center;gap:.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-stat-box{
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.05);
    padding:1.8rem;
}
.hero-stat-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}
.hero-stat-item{
    border-radius:14px;
    background:rgba(255,255,255,.05);
    padding:1rem;
}
.hero-stat-item .icon{
    width:34px;height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.8);
    margin-bottom:.7rem;
}
.hero-stat-item .value{font-size:1.35rem;font-weight:800;line-height:1.1;color:#fff}
.hero-stat-item .label{font-size:.75rem;color:rgba(255,255,255,.56)}
.trust-strip{
    border-bottom:1px solid var(--border);
    background:var(--card);
}
.trust-strip .inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.8rem 2rem;
    padding:1rem 0;
    font-size:.92rem;
    color:var(--muted);
}
.trust-strip .item{font-weight:600}
.section-heading{
    max-width:720px;
    margin:0 auto 2.5rem;
    text-align:center;
}
.section-heading.text-start{
    margin-left:0;
    margin-right:0;
    text-align:left;
}
.section-title{
    margin:0 0 .45rem;
    font-size:clamp(1.7rem,3vw,2.5rem);
    line-height:1.14;
}
.section-subtitle{
    margin:0;
    color:var(--muted);
}
.step-grid,
.feature-grid,
.card-grid{
    display:grid;
    gap:1.5rem;
}
.step-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
.feature-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
.card-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
.step-card{text-align:center}
.step-circle{
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto .8rem;
    border-radius:999px;
    background:var(--primary);
    color:#fff;font-size:.9rem;font-weight:800;
}
.step-title{font-size:.95rem;margin:0 0 .25rem}
.step-desc{margin:0;font-size:.92rem;color:var(--muted)}
.feature-card,.public-card,.faq-card,.testimonial-card,.admin-panel,.empty-card{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    box-shadow:var(--shadow-sm);
}
.feature-card{
    padding:1.35rem;
    background:var(--background);
}
.feature-icon{
    width:40px;height:40px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:12px;
    color:var(--accent);
    background:rgba(var(--accent-rgb),.08);
    margin-bottom:.85rem;
}
.feature-card h3{font-size:.95rem;margin:0 0 .35rem}
.feature-card p{margin:0;font-size:.92rem;color:var(--muted)}
.catalog-card,.related-card{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease;
}
.catalog-card:hover,.related-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}
.catalog-media,.related-media{
    aspect-ratio:3/2;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--card-soft);
    overflow:hidden;
}
.catalog-media img,.related-media img,
.product-hero-media img,.gallery-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.placeholder-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;height:64px;
    border-radius:18px;
    background:rgba(36,50,74,.06);
    color:rgba(36,50,74,.28);
    font-size:1.6rem;
}
.catalog-body,.related-body{padding:1rem}
.catalog-title{
    margin:0;
    font-size:.95rem;
    font-weight:700;
    line-height:1.35;
}
.catalog-title a:hover,.related-title a:hover{color:var(--accent)}
.catalog-category{
    font-size:.75rem;
    color:var(--muted);
    margin-top:.2rem;
}
.catalog-summary,.related-summary{
    margin:.7rem 0 0;
    font-size:.83rem;
    color:var(--muted);
    line-height:1.6;
}
.catalog-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-top:1rem;
    padding-top:.9rem;
    border-top:1px solid var(--border);
}
.catalog-price{
    font-size:1rem;
    font-weight:800;
    color:var(--foreground);
}
.catalog-price small{font-size:.75rem;font-weight:500}
.pill-row{display:flex;flex-wrap:wrap;gap:.45rem}
.pill-btn,
.filter-pill,
.status-pill,
.trust-badge,
.mini-badge{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    border-radius:999px;
    padding:.45rem .9rem;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--muted);
    font-size:.78rem;
    font-weight:600;
}
.pill-btn.active,.filter-pill.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}
.mini-badge{
    padding:.28rem .62rem;
    font-size:.68rem;
}
.badge-accent{
    background:rgba(var(--accent-rgb),.09);
    border-color:rgba(var(--accent-rgb),.18);
    color:var(--accent);
}
.badge-warning-soft{
    background:rgba(245,158,11,.1);
    border-color:rgba(245,158,11,.18);
    color:#b45309;
}
.badge-danger-soft{
    background:rgba(220,38,38,.08);
    border-color:rgba(220,38,38,.16);
    color:#b91c1c;
}
.page-hero{
    padding:3rem 0 1.8rem;
}
.page-title{
    margin:0 0 .4rem;
    font-size:clamp(1.8rem,3vw,2.6rem);
}
.page-subtitle{
    max-width:720px;
    margin:0;
    color:var(--muted);
}
.filter-shell{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    box-shadow:var(--shadow-sm);
}
.search-shell,.search-pill,.admin-search{
    display:flex;
    align-items:center;
    gap:.55rem;
    border:1px solid var(--input);
    border-radius:10px;
    background:var(--card);
    padding:.72rem .9rem;
}
.search-shell input,.search-pill input,.admin-search input{
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    font-size:.92rem;
}
.public-card{padding:1.4rem}
.ai-highlight{
    border-radius:18px;
    border:1px solid var(--border);
    background:var(--background);
    padding:1.5rem;
}
.chat-bubble{
    max-width:88%;
    border-radius:12px;
    padding:.7rem .85rem;
    font-size:.9rem;
    line-height:1.55;
    box-shadow:var(--shadow-sm);
}
.chat-bubble.bot{background:var(--card)}
.chat-bubble.user{background:var(--primary);color:#fff}
.testimonial-card{padding:1.35rem}
.testimonial-card .stars{display:flex;gap:.25rem;margin-bottom:.8rem;font-size:.8rem}
.faq-item{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    box-shadow:var(--shadow-sm);
}
.faq-item summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem;
    font-size:.93rem;
    font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .answer{
    padding:0 1.1rem 1rem;
    color:var(--muted);
    font-size:.9rem;
}
.map-card{
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    background:var(--card-soft);
    min-height:280px;
}
.map-card iframe{
    width:100%;
    height:100%;
    min-height:280px;
    border:0;
}
.product-breadcrumb{
    border-bottom:1px solid var(--border);
    background:var(--card);
}
.product-breadcrumb .inner{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.9rem 0;
    font-size:.88rem;
    color:var(--muted);
}
.product-layout{
    display:grid;
    gap:2rem;
    grid-template-columns:1fr;
    padding:2rem 0 3rem;
}
.product-main{min-width:0}
.product-aside{min-width:0}
.product-hero-media{
    aspect-ratio:16/10;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card-soft);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.product-info-head{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    margin-bottom:.9rem;
}
.product-title{
    margin:0 0 .5rem;
    font-size:clamp(1.9rem,3vw,2.7rem);
}
.product-desc{margin:0;color:var(--muted)}
.detail-list{
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    background:var(--card);
}
.detail-row{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    padding:.95rem 1rem;
    border-top:1px solid var(--border);
    font-size:.92rem;
}
.detail-row:first-child{border-top:none}
.detail-icon{
    width:22px;
    color:var(--muted);
    flex:0 0 22px;
}
.product-sidebar-card{
    position:sticky;
    top:95px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    box-shadow:var(--shadow-sm);
    padding:1.35rem;
}
.price-copy{font-size:.88rem;color:var(--muted)}
.price-main{
    font-size:2rem;
    font-weight:800;
    line-height:1.1;
}
.price-main span{font-size:1rem;font-weight:500;color:var(--muted)}
.action-stack{display:grid;gap:.65rem}
.inline-trust{
    display:grid;
    gap:.6rem;
    margin-top:1rem;
    font-size:.83rem;
    color:var(--muted);
}
.related-grid{display:grid;gap:1rem;grid-template-columns:repeat(1,minmax(0,1fr))}
.footer-dark{
    border-top:1px solid rgba(255,255,255,.08);
    background:var(--primary);
    color:rgba(255,255,255,.78);
}
.footer-dark .footer-title{
    font-size:.85rem;
    font-weight:700;
    margin:0 0 .9rem;
    color:#fff;
}
.footer-dark p,.footer-dark li,.footer-dark small{color:rgba(255,255,255,.7)}
.footer-dark a:hover{color:#fff}
.footer-bottom{
    margin-top:2.5rem;
    padding-top:1.25rem;
    border-top:1px solid rgba(255,255,255,.08);
}
.quick-cta-stack{
    position:fixed;
    right:1.25rem;
    bottom:7.5rem;
    z-index:1040;
    display:flex;
    flex-direction:column;
    gap:.6rem;
}
.quick-cta-stack .btn{
    padding:.72rem .95rem;
    box-shadow:var(--shadow-sm);
}
.wa-float,.chat-float{
    position:fixed;
    z-index:1040;
    right:1.25rem;
    width:52px;
    height:52px;
    border:none;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
}
.wa-float{
    bottom:1.25rem;
    background:var(--whatsapp);
    color:#fff;
}
.chat-float{
    bottom:4.8rem;
    background:var(--primary);
    color:#fff;
}
.chat-panel{
    position:fixed;
    right:1.25rem;
    bottom:1.25rem;
    z-index:1050;
    width:340px;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    background:var(--card);
    box-shadow:0 30px 70px rgba(15,23,42,.18);
    display:none;
}
.chat-panel.open{display:block}
.chat-head{
    background:var(--primary);
    color:#fff;
    padding:1rem;
}
.chat-head .avatar{
    width:32px;height:32px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.14);
    font-size:.8rem;font-weight:700;
}
.chat-stream{
    display:flex;
    flex-direction:column;
    gap:.75rem;
    max-height:300px;
    overflow:auto;
    padding:1rem;
    background:#fbfdff;
}
.chat-row{display:flex}
.chat-row.user{justify-content:flex-end}
.chat-row.bot{justify-content:flex-start}
.chat-quick{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    padding:.8rem 1rem .2rem;
    border-top:1px solid var(--border);
}
.chat-quick button{
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--card);
    padding:.35rem .75rem;
    font-size:.75rem;
    font-weight:600;
    color:var(--muted);
}
.chat-quick button:hover{background:var(--card-soft)}
.chat-form{
    display:flex;
    gap:.6rem;
    padding: .8rem 1rem 1rem;
}
.chat-form input{
    flex:1;
    border:1px solid var(--input);
    border-radius:12px;
    background:#fff;
    padding:.72rem .85rem;
    font-size:.9rem;
}
.chat-form button{
    width:42px;height:42px;border:none;
    border-radius:12px;
    background:var(--primary);
    color:#fff;
}
.mobile-bottom-bar{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:1035;
    display:flex;
    align-items:center;
    justify-content:space-around;
    padding:.55rem .5rem .65rem;
    border-top:1px solid var(--border);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
}
.mobile-bottom-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.2rem;
    color:var(--muted);
    font-size:.62rem;
    font-weight:600;
}
.mobile-bottom-link i{font-size:1.1rem}
.mobile-bottom-link.center .circle{
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:999px;
    background:var(--whatsapp);
    color:#fff;
    margin-top:-1.15rem;
    box-shadow:var(--shadow);
}
.promo-pop{
    position:fixed;
    inset:auto 1rem 5.2rem 1rem;
    z-index:1025;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card);
    box-shadow:var(--shadow);
    padding:1rem;
    display:none;
}
.promo-pop.show{display:block}
.promo-pop .close{
    position:absolute;
    top:.7rem;
    right:.8rem;
    border:none;
    background:none;
    color:var(--muted);
}
.form-control,.form-select,textarea{
    border-color:var(--input)!important;
    border-radius:10px!important;
    min-height:44px;
    box-shadow:none!important;
}
textarea.form-control{min-height:auto}
.form-label{font-size:.84rem}
.admin-shell{
    display:flex;
    min-height:100vh;
    background:var(--background);
}
.admin-sidebar{
    width:240px;
    flex:0 0 240px;
    background:var(--sidebar);
    border-right:1px solid var(--sidebar-border);
    color:var(--sidebar-foreground);
    display:flex;
    flex-direction:column;
    transition:width .2s ease, flex-basis .2s ease;
}
.admin-sidebar.collapsed{
    width:76px;
    flex-basis:76px;
}
.admin-brand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.95rem .9rem;
    border-bottom:1px solid var(--sidebar-border);
}
.admin-brand .brand-link{
    display:flex;
    align-items:center;
    gap:.55rem;
    min-width:0;
}
.admin-brand .mark{
    width:28px;height:28px;border-radius:8px;
    background:var(--accent);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:.72rem;font-weight:800;
}
.admin-brand .text{
    min-width:0;
}
.admin-brand .text strong{
    display:block;
    font-size:.86rem;
    color:#fff;
    line-height:1.1;
}
.admin-brand .text small{
    display:block;
    color:var(--sidebar-muted);
    font-size:.68rem;
}
.sidebar-toggle{
    width:30px;height:30px;border:none;border-radius:8px;
    background:transparent;color:var(--sidebar-muted);
}
.sidebar-toggle:hover{background:var(--sidebar-accent);color:#fff}
.admin-menu{
    flex:1;
    overflow:auto;
    padding:.65rem;
}
.admin-menu-link{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.7rem .8rem;
    border-radius:10px;
    color:var(--sidebar-muted);
    font-size:.82rem;
    font-weight:600;
    margin-bottom:.15rem;
}
.admin-menu-link:hover,
.admin-menu-link.active{
    background:var(--sidebar-accent);
    color:#fff;
}
.admin-menu-link .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-sidebar.collapsed .admin-menu-link .label,
.admin-sidebar.collapsed .admin-brand .text{display:none}
.admin-sidebar.collapsed .admin-brand .brand-link{justify-content:center}
.admin-sidebar.collapsed .admin-menu-link{justify-content:center;padding-left:.6rem;padding-right:.6rem}
.admin-sidebar.collapsed .admin-brand{justify-content:center}
.admin-sidebar-footer{
    border-top:1px solid var(--sidebar-border);
    padding:.65rem;
}
.admin-main{display:flex;flex-direction:column;min-width:0;flex:1}
.admin-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.85rem 1rem;
    border-bottom:1px solid var(--border);
    background:var(--card);
}
.admin-search{
    width:100%;
    max-width:310px;
    background:var(--background);
}
.admin-top-actions{
    display:flex;
    align-items:center;
    gap:.75rem;
}
.admin-bell{
    position:relative;
    width:38px;height:38px;border:none;border-radius:10px;
    background:transparent;color:var(--muted);
}
.admin-bell:hover{background:var(--card-soft)}
.admin-bell .dot{
    position:absolute;
    top:10px;right:10px;
    width:8px;height:8px;border-radius:999px;background:var(--danger);
}
.admin-user{
    display:flex;
    align-items:center;
    gap:.6rem;
}
.admin-user .avatar{
    width:30px;height:30px;border-radius:999px;
    background:var(--primary);color:#fff;font-size:.75rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
}
.admin-content{padding:1.25rem}
.admin-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.25rem;
}
.admin-page-head h1{
    margin:0 0 .25rem;
    font-size:1.3rem;
}
.admin-page-head p{
    margin:0;
    color:var(--muted);
    font-size:.9rem;
}
.admin-panel{
    padding:0;
    overflow:hidden;
}
.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.1rem;
    border-bottom:1px solid var(--border);
}
.panel-body{padding:1rem 1.1rem}
.admin-kpi-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(1,minmax(0,1fr));
}
.kpi-card{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    box-shadow:var(--shadow-sm);
    padding:1rem;
}
.kpi-label{
    font-size:.74rem;
    font-weight:600;
    color:var(--muted);
    text-transform:none;
}
.kpi-value{
    margin-top:.35rem;
    font-size:1.85rem;
    font-weight:800;
    line-height:1.1;
}
.kpi-change{
    margin-top:.25rem;
    font-size:.75rem;
    color:var(--accent);
}
.metric-icon{
    width:34px;height:34px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(var(--accent-rgb),.09);color:var(--accent);
}
.metric-icon.metric-primary{
    background:rgba(var(--primary-rgb),.08);color:var(--primary);
}
.table-modern{
    margin:0;
}
.table-modern thead th{
    background:rgba(238,242,246,.75);
    color:var(--muted);
    font-size:.72rem;
    font-weight:700;
    text-transform:none;
    letter-spacing:0;
    white-space:nowrap;
    border-bottom:1px solid var(--border)!important;
    padding:.8rem .95rem;
}
.table-modern tbody td{
    padding:.95rem;
    border-bottom:1px solid var(--border);
    vertical-align:top;
}
.table-modern tbody tr:hover{background:#fafcff}
.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:.26rem .62rem;
    font-size:.69rem;
    font-weight:700;
    text-transform:none;
}
.status-new{background:#eff6ff;color:#1d4ed8}
.status-followup{background:#f3e8ff;color:#7e22ce}
.status-warm{background:#fff7ed;color:#c2410c}
.status-hot{background:#fff1f2;color:#be123c}
.status-won{background:#ecfdf3;color:#047857}
.status-lost{background:#fef2f2;color:#b91c1c}
.tabs-line{
    display:flex;
    gap:.35rem;
    overflow:auto;
    border-bottom:1px solid var(--border);
    padding:0 .25rem;
}
.tab-btn{
    border:none;
    background:none;
    padding:.95rem .75rem;
    border-bottom:2px solid transparent;
    color:var(--muted);
    font-size:.86rem;
    font-weight:600;
}
.tab-btn.active{
    border-bottom-color:var(--primary);
    color:var(--foreground);
}
.form-section-title{
    margin:0 0 .85rem;
    font-size:.9rem;
    font-weight:700;
}
.login-shell{
    min-height:100vh;
    background:linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%);
}
.login-card{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--card);
    box-shadow:var(--shadow);
}
.login-side{
    height:100%;
    padding:2rem;
    background:var(--primary);
    color:#fff;
}
.login-form{padding:2rem}
.login-side p{color:rgba(255,255,255,.72)}
.mini-tag{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    border-radius:999px;
    padding:.28rem .72rem;
    font-size:.68rem;
    font-weight:700;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--muted);
}
.alert-inline{
    border:1px dashed rgba(var(--accent-rgb),.28);
    background:rgba(var(--accent-rgb),.06);
    color:#0f5132;
    border-radius:12px;
    padding:.9rem 1rem;
}
.info-list{display:grid;gap:.8rem}
.info-list li{display:flex;gap:.7rem}
.slim-list{display:grid;gap:.9rem}
.progress-line{
    height:8px;
    border-radius:999px;
    background:var(--card-soft);
    overflow:hidden;
}
.progress-line span{
    display:block;
    height:100%;
    border-radius:999px;
    background:var(--accent);
}
.page-note{
    font-size:.78rem;
    color:var(--muted);
}
.sticky-mobile-cta{
    position:fixed;
    left:0;right:0;bottom:3.9rem;
    z-index:1030;
    padding:.8rem 1rem;
    background:linear-gradient(180deg,rgba(248,250,252,0),rgba(248,250,252,.94) 22%,rgba(248,250,252,.98));
}
.sticky-mobile-cta .btn{width:100%}
@media (min-width:768px){
    .site-topbar{display:block}
    .section-padding{padding:4.5rem 0}
    .step-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .chat-panel{bottom:1.5rem}
    .sticky-mobile-cta,.mobile-bottom-bar,.promo-pop{display:none!important}
}
@media (min-width:992px){
    .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .product-layout{grid-template-columns:minmax(0,3fr) minmax(320px,2fr)}
    .related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .admin-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .hero-ref .section-wrap{padding:4.2rem 0 4.5rem}
}
@media (max-width:991.98px){
    .quick-cta-stack,.wa-float,.chat-float{display:none!important}
    .site-nav{padding:1rem 0}
    .site-nav .nav-link{width:100%;justify-content:flex-start}
    .admin-sidebar{
        position:fixed;
        inset:0 auto 0 0;
        z-index:1050;
        transform:translateX(-100%);
        width:240px!important;
        flex-basis:240px!important;
    }
    .admin-sidebar.open{transform:translateX(0)}
    .admin-sidebar.collapsed{width:240px!important;flex-basis:240px!important}
    .admin-main{width:100%}
}
@media (max-width:767.98px){
    .hero-stat-box{display:none}
    .hero-title{font-size:2.1rem}
    .section-title{font-size:1.65rem}
    .page-title{font-size:1.7rem}
    .admin-content{padding:1rem}
    .admin-topbar{padding:.8rem}
    .admin-search{max-width:none}
    .chat-panel{
        left:.8rem;right:.8rem;width:auto;
    }
    body.has-mobile-bar{padding-bottom:4.4rem}
}


/* =========================
   PIXEL-TIGHT PASS OVERRIDES
   Menyamakan skala komponen, vertical rhythm,
   badge shape, icon sizing, dan table density
   lebih dekat ke referensi React/Tailwind.
   ========================= */
:root{
    --background:#f8fafc;
    --foreground:#1f2937;
    --card:#ffffff;
    --card-soft:#eef2f6;
    --muted:#6b7280;
    --border:#e2e8f0;
    --input:#e2e8f0;
    --radius:8px;
    --radius-lg:12px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.05);
    --shadow:0 8px 24px rgba(15,23,42,.08);
}
body{
    font-size:15px;
    letter-spacing:0;
}
h1,h2,h3,h4,h5,h6{
    letter-spacing:-.02em;
}
.container-wide{max-width:1280px}
.container-narrow{max-width:1152px}
.section-padding{padding:4rem 0}
.section-padding-sm{padding:2.5rem 0}
.section-padding-lg{padding:5rem 0}
.page-shell{padding-bottom:5.25rem}
.page-note{
    font-size:.75rem;
    color:var(--muted);
}
.bg-soft{background:#f4f7fb!important}
.rounded-soft{border-radius:var(--radius)!important}
.rounded-soft-lg{border-radius:var(--radius-lg)!important}
.public-card,.faq-card,.testimonial-card,.admin-panel,.empty-card,
.feature-card,.catalog-card,.related-card,.detail-list,.filter-shell,.ai-highlight,
.chat-panel,.product-hero-media,.faq-item,.kpi-card{
    border-radius:var(--radius)!important;
}
.btn{
    border-radius:8px;
    padding:.66rem 1rem;
    font-size:.88rem;
    line-height:1.2;
}
.btn-lg{
    border-radius:8px;
    padding:.82rem 1.15rem;
    font-size:.93rem;
}
.btn-sm{
    border-radius:8px;
    padding:.48rem .8rem;
    font-size:.78rem;
}
.btn-soft{
    background:#fff;
    border-color:var(--border);
}
.btn-soft:hover{
    background:var(--card-soft);
}
.site-topbar .inner{
    min-height:30px;
    font-size:.74rem;
}
.site-topbar .meta{gap:1rem}
.site-topbar i,
.hero-meta i,
.hero-pill i,
.mobile-bottom-link i,
.admin-menu-link i,
.metric-icon i,
.panel-kicker i{
    font-size:.9rem;
}
.site-header{
    background:rgba(255,255,255,.95);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(14px);
}
.site-navbar{min-height:68px}
.brand-mark{
    width:36px;
    height:36px;
    border-radius:10px;
    font-size:.82rem;
}
.brand-block strong{
    font-size:.88rem;
}
.brand-block small{
    font-size:.62rem;
    max-width:220px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.site-nav .nav-link{
    border-radius:6px;
    padding:.52rem .82rem!important;
    font-size:.875rem;
    font-weight:500;
}
.site-nav .nav-item .btn{
    padding:.62rem .92rem;
    font-size:.84rem;
}
.hero-ref .section-wrap{
    padding:2.85rem 0 3.65rem;
}
.hero-pills{
    gap:.42rem;
    margin-bottom:1rem;
}
.hero-pill,.trust-badge{
    padding:.28rem .72rem;
    border-radius:999px;
    font-size:.73rem;
    font-weight:500;
}
.hero-title{
    font-size:clamp(2.05rem,4.3vw,4rem);
    line-height:1.04;
    margin-bottom:.9rem;
}
.hero-desc{
    font-size:1rem;
    line-height:1.7;
    max-width:670px;
    margin-bottom:.8rem;
}
.hero-meta{
    gap:1.15rem;
    margin-bottom:1.6rem;
    font-size:.84rem;
}
.hero-actions{gap:.65rem}
.hero-stat-box{
    border-radius:12px;
    padding:1.25rem;
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
}
.hero-stat-grid{gap:.85rem}
.hero-stat-item{
    border-radius:8px;
    padding:.95rem;
    background:rgba(255,255,255,.045);
}
.hero-stat-item .icon{
    width:32px;
    height:32px;
    border-radius:8px;
    margin-bottom:.65rem;
}
.hero-stat-item .value{
    font-size:1.18rem;
}
.hero-stat-item .label{
    font-size:.7rem;
}
.trust-strip .inner{
    padding:.95rem 0;
    gap:.65rem 1.6rem;
    font-size:.87rem;
}
.section-heading{
    margin-bottom:2rem;
    max-width:720px;
}
.section-title{
    margin-bottom:.4rem;
    font-size:clamp(1.65rem,3vw,2.4rem);
    line-height:1.1;
}
.section-subtitle{
    font-size:.94rem;
    line-height:1.7;
}
.step-grid,.feature-grid,.card-grid,.related-grid{
    gap:1rem;
}
.step-card{
    padding:0 .25rem;
}
.step-circle{
    width:38px;
    height:38px;
    margin-bottom:.7rem;
    font-size:.83rem;
}
.step-title{
    font-size:.93rem;
    margin-bottom:.18rem;
}
.step-desc{
    font-size:.85rem;
    line-height:1.65;
}
.feature-card{
    padding:1.15rem;
    background:#fff;
}
.feature-icon{
    width:36px;
    height:36px;
    border-radius:8px;
    margin-bottom:.75rem;
}
.feature-icon i{
    font-size:.9rem;
}
.feature-card h3{
    font-size:.92rem;
    margin-bottom:.28rem;
}
.feature-card p{
    font-size:.84rem;
    line-height:1.65;
}
.catalog-card,.related-card{
    border-radius:8px;
    box-shadow:var(--shadow-sm);
}
.catalog-card:hover,.related-card:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 32px rgba(15,23,42,.08);
}
.catalog-media,.related-media{
    aspect-ratio:16/10;
    background:#f1f5f9;
}
.placeholder-icon{
    width:56px;
    height:56px;
    border-radius:14px;
    font-size:1.35rem;
}
.catalog-body,.related-body{
    padding:.95rem;
}
.catalog-title,.related-title{
    font-size:.92rem;
    line-height:1.35;
}
.catalog-category{
    margin-top:.16rem;
    font-size:.73rem;
}
.catalog-summary,.related-summary{
    margin-top:.52rem;
    font-size:.78rem;
    line-height:1.6;
}
.catalog-footer{
    gap:.75rem;
    margin-top:.8rem;
    padding-top:.78rem;
}
.catalog-price{
    font-size:.98rem;
}
.catalog-price small{
    font-size:.7rem;
}
.pill-row{
    gap:.36rem;
}
.pill-btn,
.filter-pill,
.status-pill,
.trust-badge{
    padding:.34rem .72rem;
    font-size:.73rem;
    font-weight:500;
    border-radius:999px;
}
.mini-badge{
    padding:.2rem .5rem;
    font-size:.625rem;
    font-weight:600;
    border-radius:999px;
}
.page-hero{
    padding:2.5rem 0 1.2rem;
}
.page-title{
    font-size:clamp(2rem,3vw,2.8rem);
    margin-bottom:.35rem;
    line-height:1.08;
}
.page-subtitle{
    font-size:.92rem;
    line-height:1.65;
}
.filter-shell{
    padding:1rem;
    gap:.8rem;
}
.search-pill,.admin-search{
    gap:.5rem;
    border-radius:8px;
    padding:.6rem .82rem;
    background:#fff;
}
.search-pill i,.admin-search i{
    font-size:.88rem;
}
.search-shell input,.search-pill input,.admin-search input{
    font-size:.875rem;
}
.form-control,.form-select{
    border-color:var(--input);
    border-radius:8px;
    padding:.62rem .78rem;
    font-size:.875rem;
    background:#fff;
    min-height:40px;
}
.form-control:focus,.form-select:focus{
    border-color:#c7d2fe;
    box-shadow:0 0 0 .2rem rgba(59,130,246,.08);
}
.public-card{
    padding:1.2rem;
}
.ai-highlight{
    padding:1.2rem;
    background:#f8fafc;
}
.chat-bubble{
    border-radius:12px;
    padding:.62rem .78rem;
    font-size:.84rem;
    line-height:1.6;
}
.testimonial-card{
    padding:1.1rem;
}
.testimonial-card .stars{
    margin-bottom:.65rem;
    font-size:.72rem;
}
.faq-item{
    border-radius:8px;
}
.faq-item summary{
    padding:.9rem 1rem;
    font-size:.9rem;
}
.faq-item .answer{
    padding:0 1rem .95rem;
    font-size:.84rem;
    line-height:1.65;
}
.product-breadcrumb .inner{
    padding-top:.78rem;
    padding-bottom:.78rem;
    font-size:.84rem;
}
.product-layout{
    gap:2rem;
    padding:2rem 0 3rem;
}
.product-hero-media{
    border-radius:8px;
}
.product-info-head{
    gap:.4rem;
    margin-bottom:.8rem;
}
.product-title{
    font-size:clamp(1.9rem,3vw,3rem);
    line-height:1.06;
    margin-bottom:.55rem;
}
.product-desc{
    font-size:.94rem;
    line-height:1.7;
}
.detail-list{
    border-radius:8px;
}
.detail-row{
    padding:.85rem .95rem;
    gap:.68rem;
    font-size:.87rem;
}
.detail-icon{
    width:18px;
    font-size:.86rem;
}
.product-aside .sticky-top{
    top:88px;
}
.price-card{
    border-radius:8px!important;
    padding:1.05rem!important;
}
.price-card .price{
    font-size:1.85rem!important;
    letter-spacing:-.02em;
}
.inline-trust{
    gap:.65rem!important;
}
.inline-trust > div{
    font-size:.76rem;
    line-height:1.5;
}
.footer-dark{
    padding-bottom:4.8rem;
}
.footer-dark .brand-mark{
    background:rgba(255,255,255,.1);
}
.footer-dark .footer-title{
    font-size:.82rem;
    margin-bottom:.82rem;
}
.footer-dark p,.footer-dark li,.footer-dark small{
    font-size:.84rem;
    line-height:1.7;
}
.footer-bottom{
    margin-top:2rem;
    padding-top:1.1rem;
}
.quick-cta-stack{
    right:1rem;
    gap:.5rem;
}
.quick-cta-stack .btn{
    padding:.65rem .9rem;
    font-size:.8rem;
}
.wa-float,.chat-float{
    width:48px;
    height:48px;
    right:1rem;
}
.chat-float{bottom:4.4rem}
.chat-panel{
    right:1rem;
    bottom:1rem;
    width:340px;
    border-radius:12px;
    box-shadow:0 24px 60px rgba(15,23,42,.16);
}
.chat-head{
    padding:.9rem 1rem;
}
.chat-head .avatar{
    width:30px;
    height:30px;
    font-size:.74rem;
}
.chat-stream{
    gap:.65rem;
    max-height:288px;
    padding:.9rem;
}
.chat-quick{
    gap:.38rem;
    padding:.7rem .9rem .15rem;
}
.chat-quick-btn{
    border-radius:999px;
    padding:.28rem .62rem;
    font-size:.68rem;
}
.chat-form{
    padding:.72rem .9rem .9rem;
}
.chat-form input{
    font-size:.86rem;
    padding:.58rem .72rem;
}
.chat-form button{
    width:36px;
    height:36px;
    border-radius:8px;
}
.mobile-bottom-bar{
    padding:.48rem .5rem .58rem;
}
.mobile-bottom-link{
    font-size:.62rem;
}
.mobile-bottom-link i{
    font-size:1rem;
}
.mobile-bottom-link.center .circle{
    width:40px;
    height:40px;
    margin-top:-1rem;
}
.promo-pop{
    border-radius:12px;
    padding:1rem;
    inset:auto .85rem 5rem .85rem;
}
.promo-pop .close{
    top:.65rem;
    right:.72rem;
}
.sticky-mobile-cta{
    padding:.72rem .85rem;
    bottom:3.7rem;
}
.admin-shell{
    background:#f8fafc;
}
.admin-sidebar{
    width:240px;
    flex-basis:240px;
}
.admin-sidebar.collapsed{
    width:64px;
    flex-basis:64px;
}
.admin-brand{
    padding:.78rem .75rem;
}
.admin-brand .mark{
    width:28px;
    height:28px;
    border-radius:6px;
    font-size:.72rem;
}
.admin-brand .text strong{
    font-size:.84rem;
}
.admin-brand .text small{
    font-size:.64rem;
}
.sidebar-toggle{
    width:28px;
    height:28px;
    border-radius:6px;
}
.admin-menu{
    padding:.45rem;
}
.admin-menu-link{
    gap:.62rem;
    min-height:34px;
    padding:.54rem .68rem;
    border-radius:6px;
    font-size:.8125rem;
    font-weight:500;
}
.admin-menu-link i{
    font-size:.9rem;
}
.admin-sidebar.collapsed .admin-menu-link{
    justify-content:center;
    padding:.55rem;
}
.admin-sidebar-footer{
    padding:.5rem;
}
.admin-main{
    min-width:0;
}
.admin-topbar{
    padding:.68rem 1rem;
    min-height:56px;
}
.admin-search{
    max-width:288px;
    background:var(--background);
}
.admin-bell{
    width:34px;
    height:34px;
    border-radius:8px;
}
.admin-user{
    gap:.5rem;
}
.admin-user .avatar{
    width:28px;
    height:28px;
    font-size:.72rem;
}
.admin-content{
    padding:1rem;
}
.admin-page-head{
    margin-bottom:1rem;
}
.admin-page-head h1{
    font-size:1.25rem;
    line-height:1.15;
    margin-bottom:.18rem;
}
.admin-page-head p{
    font-size:.84rem;
    line-height:1.55;
}
.panel-head{
    padding:.82rem .95rem;
}
.panel-body{
    padding:.95rem;
}
.admin-kpi-grid{
    gap:.75rem;
}
.kpi-card{
    padding:.92rem;
}
.kpi-label{
    font-size:.72rem;
    font-weight:500;
}
.kpi-value{
    margin-top:.26rem;
    font-size:1.7rem;
}
.kpi-change{
    margin-top:.15rem;
    font-size:.72rem;
}
.metric-icon{
    width:30px;
    height:30px;
    border-radius:8px;
}
.metric-icon i{
    font-size:.84rem;
}
.table-modern thead th{
    padding:.66rem .78rem;
    font-size:.71rem;
    font-weight:600;
}
.table-modern tbody td{
    padding:.72rem .78rem;
    font-size:.84rem;
    line-height:1.5;
}
.table-modern .thumb-box{
    width:36px;
    height:36px;
    border-radius:6px;
    overflow:hidden;
    background:var(--card-soft);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.table-modern .thumb-box img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.table-modern .text-main{
    font-size:.84rem;
    font-weight:600;
    line-height:1.25;
}
.table-modern .text-sub{
    margin-top:.12rem;
    font-size:.72rem;
    color:var(--muted);
    line-height:1.4;
}
.status-badge{
    padding:.24rem .58rem;
    font-size:.66rem;
    font-weight:600;
    letter-spacing:0;
}
.icon-action-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.2rem;
}
.icon-action-btn{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    color:var(--muted);
    transition:all .15s ease;
}
.icon-action-btn:hover{
    background:var(--card-soft);
    color:var(--foreground);
}
.icon-action-btn.danger:hover{
    background:#fef2f2;
    color:#b91c1c;
}
.icon-action-btn i{
    font-size:.86rem;
}
.table-compact-form{
    display:grid;
    gap:.42rem;
    min-width:210px;
}
.table-compact-form .form-select,
.table-compact-form .form-control{
    min-height:34px;
    padding:.42rem .62rem;
    font-size:.78rem;
}
.table-compact-form textarea.form-control{
    min-height:58px;
}
.admin-split-layout{
    display:grid;
    gap:1rem;
    grid-template-columns:minmax(0,1fr);
}
.lead-detail-panel{
    border:1px solid var(--border);
    background:var(--card);
    border-radius:8px;
    padding:1rem;
    box-shadow:var(--shadow-sm);
}
.lead-detail-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom:1rem;
}
.lead-detail-panel h3{
    margin:0;
    font-size:.95rem;
    font-weight:700;
}
.detail-stat-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
}
.detail-stat{
    min-width:0;
}
.detail-stat .label{
    margin-bottom:.2rem;
    font-size:.68rem;
    color:var(--muted);
}
.detail-stat .value{
    font-size:.83rem;
    line-height:1.4;
}
.pill-row.admin-tabs{
    gap:.34rem;
}
.pill-row.admin-tabs .pill-btn{
    padding:.32rem .72rem;
    font-size:.72rem;
}
.tabs-line{
    gap:0;
    padding:0 .05rem;
}
.tab-btn{
    padding:.8rem .78rem;
    font-size:.84rem;
    font-weight:500;
}
.form-section-title{
    font-size:.84rem;
    margin-bottom:.72rem;
}
.login-card{
    border-radius:16px;
}
.login-card .feature-side{
    padding:2rem!important;
}
.login-card .form-side{
    padding:2rem!important;
}
@media (min-width:768px){
    .section-padding{padding:4rem 0}
}
@media (min-width:992px){
    .section-padding{padding:4.5rem 0}
    .hero-ref .section-wrap{padding:3.2rem 0 4rem}
    .admin-content{padding:1.25rem}
}
@media (min-width:1200px){
    .admin-split-layout{
        grid-template-columns:minmax(0,1fr) 320px;
        align-items:start;
    }
    .lead-detail-panel{
        position:sticky;
        top:76px;
    }
}
@media (max-width:991.98px){
    .site-topbar{
        display:none!important;
    }
    .hero-ref .section-wrap{
        padding:2.4rem 0 3rem;
    }
    .hero-stat-box{
        margin-top:1.2rem;
    }
    .footer-dark{
        padding-bottom:5rem;
    }
}
@media (max-width:767.98px){
    .hero-title{
        font-size:2rem;
    }
    .hero-desc{
        font-size:.95rem;
    }
    .section-title{
        font-size:1.55rem;
    }
    .page-title{
        font-size:1.9rem;
    }
    .site-navbar{
        min-height:64px;
    }
    .catalog-body,.related-body,.public-card,.ai-highlight,.testimonial-card{
        padding:.95rem;
    }
    .chat-panel{
        inset:auto .75rem 5.05rem .75rem;
        width:auto;
    }
}


.image-preview-card{
    display:grid;
    gap:.45rem;
}
.image-preview-frame{
    position:relative;
    overflow:hidden;
    border:1px dashed rgba(36,50,74,.18);
    border-radius:18px;
    background:rgba(15,23,42,.04);
}
.image-preview-frame--square{
    aspect-ratio:1/1;
}
.image-preview-frame--landscape{
    aspect-ratio:16/9;
}
.image-preview-frame--portrait{
    aspect-ratio:4/5;
}
.image-preview-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.image-preview-empty{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    padding:1rem;
    text-align:center;
    font-size:.78rem;
    line-height:1.5;
    color:var(--muted);
}
.image-preview-note{
    font-size:.72rem;
    color:var(--muted);
}
.admin-avatar-preview{
    width:52px;
    height:52px;
    border-radius:14px;
    overflow:hidden;
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
    display:grid;
    place-items:center;
    font-weight:700;
}
.admin-avatar-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* Header one-line dynamic refinement */
.site-navbar{
    min-height:76px;
}
.header-line-shell{
    display:flex;
    align-items:center;
    gap:.9rem;
    min-height:76px;
}
.site-brand-inline{
    display:inline-flex;
    align-items:center;
    gap:.82rem;
    flex:0 1 auto;
    min-width:0;
    max-width:100%;
    text-decoration:none;
}
.brand-logo-inline{
    flex:0 0 40px;
    width:40px;
    height:40px;
}
.brand-inline-copy{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:.2rem;
    min-width:0;
    white-space:normal;
}
.brand-name-inline{
    font-size:1.24rem;
    font-weight:800;
    line-height:1.02;
    color:var(--foreground);
    letter-spacing:-.03em;
    white-space:nowrap;
}
.brand-tagline-inline{
    display:block;
    min-width:0;
    max-width:min(34vw, 420px);
    margin-top:0;
    font-size:.68rem;
    font-weight:400;
    line-height:1.15;
    color:#8a94a6;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.brand-tagline-inline::before{
    content:none;
}
.site-nav-inline{
    flex-wrap:nowrap;
    gap:.02rem;
}
.site-nav-inline .nav-link{
    white-space:nowrap;
    padding:.48rem .58rem !important;
    font-size:.8rem;
    line-height:1;
    letter-spacing:-.012em;
    font-weight:600;
}
@media (min-width: 1200px){
    .navbar-expand-xl .navbar-collapse{
        display:flex !important;
        flex-basis:auto;
        justify-content:flex-end;
        min-width:0;
    }
}
@media (max-width: 1399.98px){
    .header-line-shell{
        gap:.75rem;
    }
    .brand-name-inline{
        font-size:1.18rem;
    }
    .brand-tagline-inline{
        max-width:300px;
        font-size:.64rem;
    }
    .site-nav-inline .nav-link{
        padding:.45rem .52rem !important;
        font-size:.78rem;
    }
}
@media (max-width: 1199.98px){
    .site-navbar,
    .header-line-shell{
        min-height:70px;
    }
    .site-brand-inline{
        flex:1 1 auto;
        min-width:0;
    }
    .brand-inline-copy{
        gap:.46rem;
    }
    .brand-name-inline{
        font-size:1.02rem;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .brand-tagline-inline{
        max-width:220px;
        font-size:.62rem;
    }
    .site-nav-inline{
        flex-wrap:wrap;
        gap:.28rem;
        padding-top:.72rem;
    }
    .site-nav-inline .nav-link{
        justify-content:flex-start;
        width:100%;
        padding:.62rem .72rem !important;
        font-size:.84rem;
    }
}
@media (max-width: 575.98px){
    .brand-logo-inline,
    .brand-mark{
        width:34px;
        height:34px;
    }
    .brand-inline-copy{
        gap:.38rem;
    }
    .brand-name-inline{
        font-size:.98rem;
    }
    .brand-tagline-inline{
        font-size:.58rem;
        max-width:160px;
    }
}


/* Force tagline under logo + business name */
.site-brand-stacked{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:.18rem;
    flex:0 1 auto;
    min-width:0;
    max-width:100%;
    text-decoration:none;
}
.brand-top-row{
    display:inline-flex;
    align-items:center;
    gap:.82rem;
    min-width:0;
    max-width:100%;
}
.brand-top-row .brand-name-inline{
    display:block;
    white-space:nowrap;
}
.site-brand-stacked .brand-tagline-inline{
    display:block;
    padding-left:calc(40px + .82rem);
    margin-top:0;
    min-width:0;
    max-width:min(34vw, 430px);
    font-size:.68rem;
    font-weight:400;
    line-height:1.15;
    color:#8a94a6;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media (max-width: 1399.98px){
    .site-brand-stacked .brand-tagline-inline{
        max-width:300px;
        font-size:.64rem;
    }
}
@media (max-width: 1199.98px){
    .site-brand-stacked{
        flex:1 1 auto;
        min-width:0;
    }
    .site-brand-stacked .brand-tagline-inline{
        padding-left:calc(40px + .82rem);
        max-width:220px;
        font-size:.62rem;
    }
}
@media (max-width: 575.98px){
    .site-brand-stacked .brand-tagline-inline{
        padding-left:calc(34px + .72rem);
        max-width:170px;
        font-size:.58rem;
    }
    .brand-top-row{
        gap:.72rem;
    }
}


.admin-search{
    position:relative;
}
.admin-search-submit{
    border:none;
    background:transparent;
    color:var(--muted);
    width:30px;
    height:30px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
.admin-search-submit:hover{
    background:var(--card-soft);
    color:var(--heading);
}
.admin-search-large{
    max-width:none!important;
    padding:.82rem 1rem;
}
.admin-search-large .btn{
    margin-left:.35rem;
}
.admin-search-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}
.summary-chip{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.68rem .9rem;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--heading);
    font-size:.92rem;
}
.summary-chip .count{
    width:28px;
    height:28px;
    border-radius:999px;
    background:var(--heading);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.78rem;
}
.search-result-list{
    display:grid;
    gap:.85rem;
}
.search-result-item{
    display:block;
    padding:1rem 1.05rem;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--background);
    text-decoration:none;
    color:inherit;
    transition:all .18s ease;
}
.search-result-item:hover{
    border-color:rgba(22,94,69,.25);
    background:#fff;
    transform:translateY(-1px);
    box-shadow:var(--shadow-sm);
}
.search-result-title{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.45rem;
    font-weight:700;
    color:var(--heading);
    margin-bottom:.3rem;
}
.search-result-meta{
    color:var(--muted);
    font-size:.82rem;
    margin-bottom:.35rem;
}
.search-result-text{
    color:var(--text);
    font-size:.9rem;
    line-height:1.55;
}
.search-empty{
    padding:1rem 1.05rem;
    border:1px dashed var(--border);
    border-radius:16px;
    background:var(--background);
    color:var(--muted);
}
.empty-state{
    min-height:260px;
    display:grid;
    place-items:center;
    text-align:center;
    gap:.65rem;
}
.empty-state-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(22,94,69,.08);
    color:var(--primary);
    font-size:1.4rem;
    margin:0 auto;
}
.badge-success{
    background:rgba(22,163,74,.12);
    color:#15803d;
}
.badge-neutral{
    background:rgba(148,163,184,.14);
    color:#475569;
}

@media (max-width: 991.98px){
    .admin-search{
        max-width:none;
    }
}



/* Admin live search dropdown */
.admin-live-search{
    position:relative;
}
.admin-live-search.open{
    z-index:1085;
}

.admin-search-dropdown{
    position:absolute;
    top:calc(100% + .55rem);
    left:0;
    width:min(760px, calc(100vw - 2rem));
    max-height:72vh;
    overflow:auto;
    border:1px solid rgba(15,23,42,.08);
    border-radius:20px;
    background:rgba(255,255,255,.985);
    box-shadow:0 28px 70px rgba(15,23,42,.16);
    backdrop-filter:saturate(180%) blur(18px);
}
.admin-search-results-list{
    padding:.55rem;
}
.admin-search-summary{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    padding:.8rem .85rem .75rem;
    border-bottom:1px solid rgba(15,23,42,.06);
    margin-bottom:.35rem;
}
.admin-search-summary-copy{
    display:flex;
    flex-direction:column;
    gap:.2rem;
}
.admin-search-summary-copy strong{
    color:var(--foreground);
    font-size:.88rem;
    font-weight:800;
}
.admin-search-summary-copy span{
    color:var(--muted);
    font-size:.74rem;
    line-height:1.45;
}
.admin-search-chip-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:.4rem;
}
.admin-search-chip{
    display:inline-flex;
    align-items:center;
    padding:.26rem .56rem;
    border-radius:999px;
    background:rgba(var(--accent-rgb),.10);
    color:var(--accent);
    font-size:.68rem;
    font-weight:700;
}
.admin-search-section{
    padding:.15rem 0 .45rem;
}
.admin-search-section + .admin-search-section{
    border-top:1px solid rgba(15,23,42,.05);
    margin-top:.2rem;
    padding-top:.6rem;
}
.admin-search-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.15rem .3rem .45rem;
}
.admin-search-section-title{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:var(--foreground);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.01em;
}
.admin-search-section-title i{
    color:var(--primary);
}
.admin-search-section-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    padding:.18rem .48rem;
    border-radius:999px;
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
    font-size:.68rem;
    font-weight:800;
}
.admin-search-item{
    display:flex;
    align-items:flex-start;
    gap:.8rem;
    padding:.82rem .86rem;
    border-radius:14px;
    transition:background .16s ease, transform .16s ease, border-color .16s ease;
}
.admin-search-item:hover,
.admin-search-item.active{
    background:rgba(var(--accent-rgb),.08);
}
.admin-search-item + .admin-search-item{
    margin-top:.18rem;
}
.admin-search-item-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
    font-size:.92rem;
}
.admin-search-item-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:.18rem;
}
.admin-search-item-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.75rem;
}
.admin-search-item-title{
    color:var(--foreground);
    font-size:.88rem;
    font-weight:700;
    line-height:1.3;
}
.admin-search-item-type{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.22rem .5rem;
    border-radius:999px;
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
    font-size:.68rem;
    font-weight:700;
    white-space:nowrap;
}
.admin-search-item-meta,
.admin-search-item-excerpt{
    color:var(--muted);
    font-size:.76rem;
    line-height:1.45;
}
.admin-search-item-excerpt{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.admin-search-dropdown-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:.55rem .7rem .75rem;
    border-top:1px solid rgba(15,23,42,.06);
    margin-top:.2rem;
}
.admin-search-see-all{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.52rem .72rem;
    border-radius:12px;
    color:var(--primary);
    font-size:.8rem;
    font-weight:700;
}
.admin-search-see-all:hover{
    background:rgba(var(--primary-rgb),.06);
}
.admin-search-empty{
    display:flex;
    align-items:center;
    gap:.85rem;
    padding:1rem;
}
.admin-search-empty-icon{
    width:40px;
    height:40px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
}
.admin-search-full-grid{
    display:grid;
    gap:.75rem;
}
.admin-search-full-item{
    display:flex;
    align-items:flex-start;
    gap:.85rem;
    padding:.95rem 1rem;
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    background:#fff;
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.admin-search-full-item:hover{
    transform:translateY(-1px);
    border-color:rgba(var(--accent-rgb),.24);
    box-shadow:0 16px 40px rgba(15,23,42,.08);
}
@media (max-width: 991.98px){
    .admin-search-dropdown{
        width:100%;
        max-height:60vh;
    }
    .admin-search-summary{
        flex-direction:column;
        align-items:flex-start;
    }
    .admin-search-chip-row{
        justify-content:flex-start;
    }
}



.demo-badge{
    display:inline-flex;align-items:center;gap:.5rem;
    background:#ff8c1a;color:#fff;font-weight:800;
    border-radius:999px;padding:.45rem .9rem;
    font-size:.72rem;letter-spacing:.02em;box-shadow:0 10px 24px rgba(255,140,26,.22);
}
.demo-badge-public{position:relative;z-index:5}
.demo-badge-admin-side,.demo-badge-admin-top,.demo-badge-login{justify-content:center}
.demo-badge-admin-side{margin:0 1rem 1rem}
.demo-badge-admin-top{display:none}
.demo-inline-notice{
    background:rgba(255,140,26,.12);border:1px solid rgba(255,140,26,.26);
    color:#8a4b00;border-radius:18px;padding:.9rem 1rem;font-weight:600
}
.demo-toast{
    position:fixed;right:1rem;bottom:1rem;z-index:1080;background:#ff8c1a;color:#fff;
    padding:.8rem 1rem;border-radius:14px;box-shadow:0 18px 35px rgba(0,0,0,.18);
    opacity:0;transform:translateY(10px);transition:all .18s ease
}
.demo-toast.show{opacity:1;transform:translateY(0)}
.demo-disabled-control{opacity:.72}
@media (min-width: 992px){.demo-badge-admin-top{display:inline-flex}}


.demo-readonly-form{
    position:relative;
}
.demo-readonly-ribbon{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    margin-bottom:1rem;
    padding:.35rem .7rem;
    border-radius:999px;
    background:rgba(255,159,67,.14);
    color:#b85e00;
    font-size:.8rem;
    font-weight:700;
}
.demo-readonly-form .form-control[readonly],
.demo-readonly-form textarea[readonly]{
    background:#f8fafc;
    cursor:not-allowed;
}
.demo-readonly-form .form-control:disabled,
.demo-readonly-form .form-select:disabled,
.demo-readonly-form input:disabled,
.demo-readonly-form textarea:disabled,
.demo-readonly-form select:disabled,
.demo-readonly-form button:disabled{
    opacity:.85;
    cursor:not-allowed;
}
.demo-action-disabled{
    opacity:.55;
    pointer-events:auto;
}