:root{
  --brand:#2563eb; --brand-dark:#1e40af; --brand-soft:#eef4ff; --ink:#0f172a; --muted:#64748b;
  --bg:#f4f6fb; --card:#ffffff; --line:#e9edf5;
  --side:#0f172a; --side-2:#0b1220; --side-ink:#cbd5e1;
  --radius:.85rem;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow:0 4px 14px rgba(16,24,40,.07);
  --shadow-lg:0 12px 32px rgba(16,24,40,.12);
}
*{font-family:'Kanit',system-ui,sans-serif}
body{background:var(--bg);color:var(--ink);margin:0}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:252px;background:linear-gradient(180deg,var(--side),var(--side-2));color:var(--side-ink);position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transition:.2s;z-index:1040;border-right:1px solid rgba(255,255,255,.04)}
.main{flex:1;margin-left:252px;display:flex;flex-direction:column;min-width:0}
.brand{display:flex;align-items:center;gap:.65rem;padding:1.15rem 1.25rem;color:#fff;font-weight:700;font-size:1.18rem;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;background:linear-gradient(180deg,#101a30,rgba(11,18,32,.92));backdrop-filter:blur(6px);z-index:2}
.brand i{font-size:1.5rem;color:var(--brand)}
.brand small{display:block;font-weight:400;font-size:.7rem;color:#8da2c0;letter-spacing:.02em}
.menu{padding:.75rem .6rem 1.6rem;display:flex;flex-direction:column;gap:3px}
.menu-item{display:flex;align-items:center;gap:.75rem;padding:.64rem .85rem;border-radius:.6rem;color:var(--side-ink);text-decoration:none;font-size:.93rem;font-weight:500;transition:.15s}
.menu-item i{font-size:1.12rem;width:1.35rem;text-align:center;transition:transform .15s}
.menu-item:hover{background:rgba(255,255,255,.06);color:#fff}
.menu-item:hover i{transform:translateX(2px)}
.menu-item.active{background:linear-gradient(135deg,var(--brand),#3b82f6);color:#fff;font-weight:600;box-shadow:0 8px 18px rgba(37,99,235,.38)}
.menu-item.active i{color:#fff}
.menu-header{font-size:.66rem;font-weight:700;letter-spacing:.06em;color:#5b6b85;padding:.95rem .9rem .35rem;text-transform:uppercase}
.menu-header:first-child{padding-top:.4rem}

/* ---------- Hub cards (หน้าหมวดหมู่แบบการ์ด) ---------- */
.hub-card{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid #eef2f7;border-radius:.85rem;padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.05);transition:.15s;height:100%}
.hub-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.09);transform:translateY(-2px);border-color:#dbe4f0}
.hub-ic{width:54px;height:54px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.55rem;flex:none}
.hub-tx{flex:1;min-width:0}
.hub-ttl{font-weight:600;font-size:1.06rem;line-height:1.2}
.hub-desc{color:var(--muted);font-size:.85rem;line-height:1.45;margin-top:.2rem}
.hub-arrow{color:#cbd5e1;font-size:1.15rem;flex:none;transition:.15s}
.hub-card:hover .hub-arrow{color:var(--brand);transform:translateX(3px)}
.hub-blue{background:#eff6ff;color:#2563eb}
.hub-green{background:#ecfdf5;color:#059669}
.hub-purple{background:#f5f3ff;color:#7c3aed}
.hub-amber{background:#fffbeb;color:#d97706}
.hub-pink{background:#fdf2f8;color:#db2777}
.hub-teal{background:#f0fdfa;color:#0d9488}

/* ---------- Agent sales product catalog ---------- */
.sales-products{padding-top:.6rem}
.sales-products-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.sales-products-head h2{font-size:1.35rem;font-weight:700;margin:.1rem 0 .25rem}
.sales-products-head p{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0;max-width:720px}
.sales-product-category{margin-top:1.2rem}
.sales-cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.sales-cat-head h3{font-size:1rem;font-weight:700;margin:0;display:flex;align-items:center;gap:.45rem}
.sales-cat-head h3 i{color:var(--brand)}
.sales-cat-head p{font-size:.85rem;color:var(--muted);margin:.2rem 0 0}
.sales-cat-head>span{background:#fff;border:1px solid #e2e8f0;border-radius:2rem;color:#475569;font-size:.78rem;font-weight:600;padding:.22rem .7rem;white-space:nowrap}
.sales-product-card{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid #e7edf5;border-radius:1rem;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.06);transition:transform .18s,box-shadow .18s,border-color .18s}
.sales-product-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(15,23,42,.14);border-color:#cbd5e1;color:var(--ink)}
.sales-product-media{position:relative;height:172px;overflow:hidden;background:#0f172a}
.sales-product-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.sales-product-card:hover .sales-product-media img{transform:scale(1.06)}
.sales-product-placeholder{position:absolute;inset:0;overflow:hidden}
.sales-product-placeholder::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.30),transparent 62%)}
.sales-product-placeholder.tone-blue{background:linear-gradient(135deg,#2563eb,#0e7490)}
.sales-product-placeholder.tone-green{background:linear-gradient(135deg,#059669,#16a34a)}
.sales-product-placeholder.tone-amber{background:linear-gradient(135deg,#d97706,#ea580c)}
.sales-product-placeholder.tone-purple{background:linear-gradient(135deg,#7c3aed,#db2777)}
.sales-product-placeholder.tone-teal{background:linear-gradient(135deg,#0d9488,#0284c7)}
.sp-main{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.1rem;color:#fff;filter:drop-shadow(0 6px 16px rgba(15,23,42,.32));z-index:1;transition:transform .25s}
.sales-product-card:hover .sp-main{transform:translate(-50%,-50%) scale(1.09)}
.sp-watermark{position:absolute;right:-16px;bottom:-30px;font-size:7rem;line-height:1;color:rgba(255,255,255,.14)}
.sp-chip{position:absolute;z-index:2;top:.6rem;font-size:.72rem;font-weight:700;padding:.24rem .62rem;border-radius:2rem;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;box-shadow:0 2px 6px rgba(15,23,42,.12)}
.sp-code{left:.6rem;background:rgba(255,255,255,.92);color:#1e293b}
.sp-price{right:.6rem;background:rgba(15,23,42,.6);color:#fff}
.sales-product-body{padding:.9rem 1rem .85rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.sales-product-body h4{font-size:1.1rem;font-weight:700;line-height:1.3;margin:0}
.sales-product-hook{color:#475569;font-size:.86rem;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sales-product-fit{margin-top:auto;color:var(--muted);font-size:.8rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sales-product-fit i{color:#059669;margin-right:.25rem}
.sales-product-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-top:1px solid #eef2f7;padding:.7rem 1rem;background:#fbfcfe}
.sp-comm{color:#475569;font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.sp-comm i{color:#059669}
.sp-cta{background:var(--brand);color:#fff;font-size:.8rem;font-weight:600;padding:.32rem .82rem;border-radius:2rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem;transition:background .15s}
.sales-product-card:hover .sp-cta{background:var(--brand-dark)}
.sp-cta i{transition:transform .15s}
.sales-product-card:hover .sp-cta i{transform:translateX(3px)}
@media(max-width:575px){
  .sales-products-head,.sales-cat-head{align-items:flex-start;flex-direction:column}
  .sales-product-media{height:160px}
}

/* ---------- Lead form (premium) ---------- */
.lf-badge{width:48px;height:48px;border-radius:.8rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex:none}
.form-section{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#94a3b8;text-transform:uppercase;margin-bottom:.7rem;padding-bottom:.4rem;border-bottom:1px dashed #e2e8f0}
.lead-form .form-label{font-weight:600;font-size:.85rem;color:#475569;margin-bottom:.3rem}
.lead-form .input-group-text{background:#f8fafc;border-color:#e2e8f0;color:#64748b;min-width:42px;justify-content:center}
.lead-form .form-control,.lead-form .form-select{border-color:#e2e8f0}
.lead-form .form-control:focus,.lead-form .form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.seg>span{flex:1 1 90px}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{display:block;text-align:center;border:1px solid #e2e8f0;border-radius:.6rem;padding:.55rem .4rem;cursor:pointer;font-weight:600;font-size:.84rem;color:#475569;transition:.12s;background:#fff;margin:0;height:100%}
.seg label:hover{border-color:#cbd5e1}
.seg input:checked+label{border-color:var(--brand);background:#eff6ff;color:var(--brand-dark);box-shadow:inset 0 0 0 1px var(--brand)}
.seg .seg-hot input:checked+label{border-color:#dc2626;background:#fef2f2;color:#b91c1c;box-shadow:inset 0 0 0 1px #dc2626}
.seg .seg-warm input:checked+label{border-color:#d97706;background:#fffbeb;color:#b45309;box-shadow:inset 0 0 0 1px #d97706}
.seg input:focus-visible+label{outline:2px solid var(--brand);outline-offset:1px}
.lf-lock{border-left:3px solid #10b981}
.lead-steps{list-style:none;padding:0;margin:0;position:relative}
.lead-steps li{display:flex;gap:.7rem;padding-bottom:1rem;position:relative}
.lead-steps li:last-child{padding-bottom:0}
.lead-steps .num{width:26px;height:26px;border-radius:50%;background:#eff6ff;color:var(--brand);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex:none;z-index:1}
.lead-steps li:not(:last-child)::before{content:"";position:absolute;left:12px;top:26px;bottom:-2px;width:2px;background:#e2e8f0}
.lead-steps .st-t{font-weight:600;font-size:.9rem;line-height:1.3}
.lead-steps .st-d{font-size:.8rem;color:var(--muted);line-height:1.4}

/* ---------- Agent dashboard (premium) ---------- */
.dash-hero{position:relative;overflow:hidden;border-radius:1.1rem;padding:1.8rem 2rem;color:#fff;background:linear-gradient(120deg,#1e3a8a 0%,#2563eb 52%,#0e7490 100%)}
.dash-hero .deco{position:absolute;right:-20px;bottom:-55px;font-size:13rem;opacity:.13;transform:rotate(-10deg);line-height:1;pointer-events:none}
.dash-hero .greet{opacity:.9;font-size:.95rem}
.dash-hero h1{font-size:1.8rem;font-weight:700;margin:.1rem 0 .6rem}
.dash-hero .meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.dash-hero .pill{background:rgba(255,255,255,.18);border-radius:2rem;padding:.22rem .75rem;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.dash-hero .hl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.6rem;margin-top:1.2rem}
.dash-hero .hl .n{font-size:1.7rem;font-weight:700;line-height:1}
.dash-hero .hl .n-sm{font-size:1.2rem}
.dash-hero .hl .c{opacity:.85;font-size:.78rem;margin-top:.15rem}
.dash-hero .hl-actions{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
@media(max-width:575px){.dash-hero{padding:1.4rem 1.3rem}.dash-hero h1{font-size:1.4rem}.dash-hero .hl-actions{margin-left:0;width:100%}}
.kpi{background:#fff;border-radius:.9rem;padding:1.1rem 1.2rem;box-shadow:0 1px 3px rgba(15,23,42,.06);height:100%;border:1px solid #eef2f7;transition:transform .15s,box-shadow .15s}
.kpi:hover{box-shadow:0 12px 26px rgba(15,23,42,.1);transform:translateY(-3px)}
.kpi .ic{width:46px;height:46px;border-radius:.7rem;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:.7rem}
.kpi .v{font-size:1.7rem;font-weight:700;line-height:1.1}
.kpi .l{color:var(--muted);font-size:.85rem}
.kpi .h{font-size:.76rem;font-weight:600;margin-top:.35rem;display:flex;align-items:center;gap:.15rem}
.donut{--p:0;width:128px;height:128px;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p)*1%),#e9eef5 0);display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.donut::before{content:"";position:absolute;inset:13px;background:#fff;border-radius:50%}
.donut .dn{position:relative;text-align:center}
.donut .dn b{font-size:1.5rem;font-weight:700;display:block;line-height:1}
.donut .dn small{font-size:.7rem;color:var(--muted)}
.funnel-stat{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;font-size:.92rem;border-bottom:1px dashed #f1f5f9}
.funnel-stat:last-child{border-bottom:none}
.funnel-stat .dot{width:10px;height:10px;border-radius:50%;flex:none}
.funnel-stat .fn-v{font-weight:700;margin-left:auto;font-size:1.05rem}
.lead-row{display:flex;align-items:center;gap:.8rem;padding:.65rem .25rem;border-bottom:1px solid #f1f5f9;text-decoration:none;color:var(--ink);transition:.12s}
.lead-row:last-child{border-bottom:none}
.lead-row:hover{background:#f8fafc}
.dash-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex:none}
.lead-row .lr-main{min-width:0;flex:1}
.lead-row .lr-name{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-row .lr-sub{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-row .lr-date{font-size:.75rem;color:var(--muted);white-space:nowrap}

/* ---------- Marketing Kit (premium) ---------- */
.pill-tabs{border:none!important;gap:.5rem;flex-wrap:wrap}
.pill-tabs .nav-link{border:1px solid #e2e8f0;border-radius:2rem;padding:.5rem 1.05rem;color:#475569;font-weight:600;background:#fff;font-size:.88rem}
.pill-tabs .nav-link:hover{border-color:#cbd5e1;color:#1e293b}
.pill-tabs .nav-link.active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.mk-cap{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #eef2f7;border-radius:.9rem;padding:1rem 1.1rem;box-shadow:0 1px 3px rgba(15,23,42,.06);transition:transform .15s,box-shadow .15s}
.mk-cap:hover{box-shadow:0 10px 24px rgba(15,23,42,.09);transform:translateY(-2px)}
.mk-cap-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem}
.mk-plat{font-size:.74rem;font-weight:700;padding:.22rem .62rem;border-radius:2rem;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.mk-facebook{background:#e7f0fe;color:#1d4ed8}
.mk-tiktok{background:#111827;color:#fff}
.mk-general{background:#f1f5f9;color:#475569}
.mk-prod{font-size:.74rem;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-cap-title{font-weight:700;font-size:.95rem;margin-bottom:.5rem}
.mk-cap-body{white-space:pre-wrap;font-size:.88rem;line-height:1.65;color:#334155;background:#f8fafc;border:1px solid #eef2f7;border-radius:.6rem;padding:.7rem .8rem;margin-bottom:.8rem;max-height:250px;overflow:auto;flex:1}
.mk-img{background:#fff;border:1px solid #eef2f7;border-radius:.8rem;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.06);transition:box-shadow .15s;height:100%}
.mk-img:hover{box-shadow:0 10px 22px rgba(15,23,42,.1)}
.mk-img-media{display:block;height:150px;overflow:hidden;background:#f1f5f9}
.mk-img-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.mk-img:hover .mk-img-media img{transform:scale(1.07)}
.mk-img-foot{display:flex;align-items:center;gap:.4rem;padding:.55rem .7rem}
.mk-img-foot span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.8rem}
.mk-pdf{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid #eef2f7;border-radius:.8rem;padding:.85rem 1rem;box-shadow:0 1px 3px rgba(15,23,42,.05);margin-bottom:.6rem;flex-wrap:wrap}
.mk-pdf .pdf-ic{width:42px;height:42px;border-radius:.6rem;background:#fef2f2;color:#dc2626;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:none}

/* ---------- Product Playbook (premium) ---------- */
.pb-jump{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.pb-jump a{border:1px solid #e2e8f0;border-radius:2rem;padding:.35rem .9rem;font-size:.85rem;font-weight:600;color:#475569;text-decoration:none;background:#fff;display:inline-flex;align-items:center;gap:.35rem}
.pb-jump a:hover{border-color:var(--brand);color:var(--brand)}
.pb-compare thead th{background:#f8fafc;color:#475569;font-weight:600;font-size:.85rem}
.pb-compare tbody tr:hover{background:#f8fafc}
.pb-pname{display:inline-flex;align-items:center;gap:.55rem;font-weight:700}
.pb-dot{width:32px;height:32px;border-radius:.55rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex:none}
.pb-price-pill{background:#eff6ff;color:var(--brand-dark);font-weight:700;border-radius:2rem;padding:.22rem .75rem;white-space:nowrap}
.pb-card{border-radius:.95rem;overflow:hidden;scroll-margin-top:80px}
.pb-head{display:flex;align-items:center;gap:.9rem;padding:1rem 1.3rem;color:#fff}
.pb-head-ic{width:46px;height:46px;border-radius:.7rem;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:none}
.pb-head h5{margin:0;font-weight:700}
.pb-head .pb-price{margin-left:auto;font-weight:700;font-size:1.05rem;background:rgba(255,255,255,.2);padding:.25rem .8rem;border-radius:2rem;white-space:nowrap}
.pb-block{background:#f8fafc;border:1px solid #f1f5f9;border-radius:.7rem;padding:.85rem .95rem;height:100%}
.pb-block-t{font-weight:600;font-size:.9rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}
.pb-block-b{font-size:.86rem;color:#475569;line-height:1.6}
.pb-diff{background:#eff6ff;border:1px solid #dbeafe;border-radius:.7rem;padding:.85rem .95rem}
.pb-faq .accordion-item{border-color:#eef2f7;margin-bottom:.4rem;border-radius:.6rem!important;overflow:hidden}
.pb-faq .accordion-button{font-weight:600;font-size:.9rem;padding:.7rem .9rem;border-radius:.6rem}
.pb-faq .accordion-button:not(.collapsed){background:#eff6ff;color:var(--brand-dark);box-shadow:none}
.pb-faq .accordion-button:focus{box-shadow:none;border-color:#dbeafe}
.pb-faq .accordion-body{color:#475569;line-height:1.6}

/* ---------- Demo accounts (premium) ---------- */
.demo-ghead{display:flex;align-items:center;gap:.7rem;margin:.4rem 0 .9rem}
.demo-ghead .gi{width:40px;height:40px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;flex:none}
.demo-ghead h3{font-size:1.05rem;font-weight:700;margin:0}
.demo-ghead .price{margin-left:auto;background:#eff6ff;color:var(--brand-dark);font-weight:700;border-radius:2rem;padding:.2rem .75rem;font-size:.85rem;white-space:nowrap}
.demo-card{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid #e7edf5;border-radius:.95rem;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.06);transition:transform .15s,box-shadow .15s}
.demo-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.12)}
.demo-banner{position:relative;height:104px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.demo-banner .big{font-size:2.9rem;position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(15,23,42,.3))}
.demo-banner .demo-wm{position:absolute;left:-14px;bottom:-26px;font-size:5.5rem;opacity:.16;line-height:1}
.demo-banner .demo-tag{position:absolute;top:.6rem;right:.6rem;background:rgba(255,255,255,.22);font-size:.64rem;font-weight:700;letter-spacing:.08em;padding:.2rem .55rem;border-radius:2rem;z-index:2}
.demo-body{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.demo-title{font-weight:700;font-size:1rem}
.demo-creds{background:#f8fafc;border:1px solid #eef2f7;border-radius:.6rem;padding:.55rem .6rem;display:flex;flex-direction:column;gap:.4rem}
.demo-cred{display:flex;align-items:center;gap:.5rem}
.demo-cred .lbl{font-size:.74rem;color:var(--muted);width:60px;flex:none}
.demo-cred .val{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;font-weight:600;flex:1;min-width:0;background:#fff;border:1px solid #e2e8f0;border-radius:.4rem;padding:.22rem .55rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-cred .cbtn{border:1px solid #e2e8f0;background:#fff;border-radius:.4rem;width:32px;height:30px;display:flex;align-items:center;justify-content:center;color:#64748b;flex:none;cursor:pointer;transition:.12s}
.demo-cred .cbtn:hover{border-color:var(--brand);color:var(--brand)}
.demo-note{font-size:.78rem;color:#92400e;line-height:1.45;background:#fffbeb;border-radius:.5rem;padding:.45rem .6rem;margin-top:auto}
.demo-price-chip{position:absolute;top:.6rem;left:.6rem;z-index:2;background:rgba(255,255,255,.94);color:#1e293b;font-size:.8rem;font-weight:700;padding:.2rem .65rem;border-radius:2rem;box-shadow:0 2px 6px rgba(15,23,42,.18)}
.demo-prog-sub{font-size:.78rem;color:var(--muted);margin-top:.1rem}

/* ---------- Training "Sales Academy" ---------- */
.academy-hero{position:relative;overflow:hidden;border-radius:1rem;padding:2rem 2.2rem;color:#fff;background:linear-gradient(120deg,#0f766e 0%,#0e7490 55%,#1e3a8a 100%)}
.academy-hero .eyebrow{display:inline-block;background:rgba(255,255,255,.18);padding:.25rem .85rem;border-radius:2rem;font-size:.76rem;font-weight:600;letter-spacing:.03em;margin-bottom:.7rem}
.academy-hero h1{font-size:1.85rem;font-weight:700;line-height:1.3;margin:0 0 .6rem;max-width:640px}
.academy-hero p{opacity:.92;max-width:580px;margin:0 0 1.2rem;font-size:.95rem}
.academy-hero .deco{position:absolute;right:-30px;bottom:-50px;font-size:15rem;opacity:.13;transform:rotate(-8deg);pointer-events:none;line-height:1}
.btn-academy{background:#fff;color:#0f766e;font-weight:600;border:none}
.btn-academy:hover{background:#ecfdf5;color:#0f766e}
.btn-academy-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-academy-ghost:hover{background:rgba(255,255,255,.22);color:#fff}
@media(max-width:575px){.academy-hero{padding:1.4rem 1.3rem}.academy-hero h1{font-size:1.4rem}}

.lp-stat{background:#fff;border-radius:.85rem;padding:1.05rem 1.2rem;box-shadow:0 1px 3px rgba(0,0,0,.05);height:100%}
.lp-stat .lbl{color:var(--muted);font-size:.85rem;margin-bottom:.2rem}
.lp-stat .val{font-size:1.7rem;font-weight:700;line-height:1.15}

.eyebrow-mut{font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--brand);text-transform:uppercase}
.lp-card{background:#fff;border-radius:.95rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);height:100%;display:flex;flex-direction:column;transition:.15s}
.lp-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.1);transform:translateY(-3px)}
.lp-head{padding:1.1rem 1.2rem;color:#fff;min-height:96px;display:flex;flex-direction:column;justify-content:center}
.lp-head .lp-badge{align-self:flex-start;background:rgba(255,255,255,.22);font-size:.72rem;font-weight:600;padding:.18rem .7rem;border-radius:2rem;margin-bottom:.4rem}
.lp-head h5{margin:0;font-weight:700;font-size:1.15rem}
.lp-teal{background:linear-gradient(135deg,#0f766e,#115e59)}
.lp-coral{background:linear-gradient(135deg,#c2410c,#9a3412)}
.lp-ocean{background:linear-gradient(135deg,#0e7490,#155e75)}
.lp-violet{background:linear-gradient(135deg,#6d28d9,#4c1d95)}
.lp-body{padding:1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.lp-meta{font-size:.82rem;color:var(--muted);margin-bottom:.5rem;display:flex;gap:.5rem;align-items:center}
.lp-meta .pill{background:#f1f5f9;border-radius:2rem;padding:.1rem .65rem;font-weight:600;color:#475569}
.lp-desc{font-size:.88rem;color:#475569;line-height:1.5;margin-bottom:.85rem;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lp-prog{height:7px;border-radius:4px;background:#eef2f7;overflow:hidden;margin-bottom:.9rem}
.lp-prog>span{display:block;height:100%;background:linear-gradient(90deg,#10b981,#059669)}
.lp-chip{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .7rem;border:1px solid #eef2f7;border-radius:.6rem;text-decoration:none;color:var(--ink);margin-bottom:.4rem;transition:.12s}
.lp-chip:last-child{margin-bottom:0}
.lp-chip:hover{border-color:#cbd5e1;background:#f8fafc}
.lp-chip .t{font-size:.86rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-chip .s{font-size:.72rem;font-weight:600;padding:.13rem .55rem;border-radius:2rem;flex:none;white-space:nowrap}
.lp-chip .s.on{background:#dcfce7;color:#15803d}
.lp-chip .s.off{background:#eff6ff;color:#2563eb}

/* ===== ระดับตัวแทน (หน้า training) ===== */
.tier-now{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center;border-radius:1rem;padding:1.3rem 1.5rem;color:#fff;background:linear-gradient(120deg,#0f766e 0%,#0e7490 60%,#1e3a8a 100%)}
.tier-now .tn-left{min-width:240px}
.tier-now .tn-eyebrow{display:inline-block;background:rgba(255,255,255,.2);padding:.2rem .8rem;border-radius:2rem;font-size:.74rem;font-weight:600;margin-bottom:.5rem}
.tier-now .tn-name{font-size:1.75rem;font-weight:800;line-height:1.12;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tier-now .tn-rate{background:rgba(255,255,255,.22);font-size:.85rem;font-weight:700;padding:.15rem .6rem;border-radius:2rem}
.tier-now .tn-sub{opacity:.92;font-size:.86rem;margin-top:.35rem;max-width:400px}
.tier-now .tn-right{flex:1;min-width:230px;max-width:360px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:.85rem;padding:.85rem 1rem}
.tier-now .tn-next-label{font-size:.74rem;opacity:.85;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.tier-now .tn-next-name{font-weight:700;margin:.1rem 0 .5rem}
.tier-now .tn-bar{height:9px;border-radius:2rem;background:rgba(255,255,255,.25);overflow:hidden}
.tier-now .tn-bar span{display:block;height:100%;border-radius:2rem;background:#fde68a;transition:width .4s}
.tier-now .tn-need{font-size:.8rem;margin-top:.45rem;opacity:.96}
.tier-now .tn-need b{color:#fde68a}
.tier-now .tn-top{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:.4rem}

.tier-ladder{display:grid;gap:.55rem}
.tier-row{display:flex;gap:.85rem;align-items:flex-start;background:#fff;border:1px solid #eef2f7;border-left:4px solid #e2e8f0;border-radius:.8rem;padding:.85rem 1rem}
.tier-row .tr-step{width:30px;height:30px;flex:none;border-radius:50%;background:#f1f5f9;color:#64748b;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.88rem}
.tier-row .tr-main{flex:1;min-width:0}
.tier-row .tr-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tier-row .tr-top b{font-size:.98rem}
.tier-row .tr-rate{background:#ecfdf5;color:#047857;font-weight:700;font-size:.76rem;padding:.1rem .55rem;border-radius:2rem}
.tier-row .tr-pill{font-size:.7rem;font-weight:600;padding:.1rem .55rem;border-radius:2rem;background:#eef2ff;color:#4338ca}
.tier-row .tr-pill.now{background:#0e7490;color:#fff}
.tier-row .tr-pill.team{background:#fef3c7;color:#92400e}
.tier-row .tr-desc{color:var(--muted);font-size:.84rem;margin-top:.25rem}
.tier-row .tr-req{font-size:.8rem;color:#475569;margin-top:.35rem;display:flex;align-items:flex-start;gap:.35rem}
.tier-row .tr-req i{color:#0e7490;margin-top:.12rem}
.tier-row.is-done{border-left-color:#22c55e}
.tier-row.is-done .tr-step{background:#dcfce7;color:#15803d}
.tier-row.is-now{border-left-color:#0e7490;background:#f0fdfa;box-shadow:0 6px 18px rgba(14,116,144,.13)}
.tier-row.is-now .tr-step{background:#0e7490;color:#fff}
.tier-row.is-future{opacity:.7}

/* ===== เว็บไซต์การตลาดของฉัน (agent/site) ===== */
.site-page{display:flex;flex-direction:column;gap:1.4rem}
.site-hero{position:relative;overflow:hidden;border-radius:1.1rem;padding:1.9rem 2.1rem;color:#fff;background:linear-gradient(120deg,#1e3a8a 0%,#2563eb 55%,#0ea5e9 100%)}
.site-hero .deco{position:absolute;right:-22px;bottom:-44px;font-size:11rem;opacity:.14;transform:rotate(-8deg);line-height:1;pointer-events:none}
.site-hero .eyebrow{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.18);padding:.25rem .85rem;border-radius:2rem;font-size:.74rem;font-weight:600;letter-spacing:.03em;margin-bottom:.65rem}
.site-hero h1{font-size:1.55rem;font-weight:800;line-height:1.3;margin:0 0 .55rem;max-width:660px}
.site-hero p{opacity:.93;max-width:640px;margin:0;font-size:.93rem;line-height:1.65}
.site-hero p b{color:#fde68a}
@media(max-width:575px){.site-hero{padding:1.4rem 1.3rem}.site-hero h1{font-size:1.25rem}}

.site-note{display:flex;gap:.7rem;align-items:flex-start;background:#eff6ff;border:1px solid #bfdbfe;border-radius:.85rem;padding:.85rem 1.1rem;color:#1e3a8a;font-size:.87rem;line-height:1.6}
.site-note i{font-size:1.05rem;margin-top:.1rem;flex:none;color:#2563eb}

.site-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;align-items:start}
@media(min-width:992px){.site-grid{grid-template-columns:1.65fr 1fr}}
.site-editor{display:flex;flex-direction:column;gap:1rem;min-width:0}
.site-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
@media(min-width:992px){.site-side{position:sticky;top:16px}}

.site-card{background:#fff;border:1px solid #eef2f7;border-radius:1rem;box-shadow:0 1px 3px rgba(15,23,42,.05);overflow:hidden}
.site-card-head{display:flex;align-items:center;gap:.5rem;padding:.95rem 1.2rem;border-bottom:1px solid #f1f5f9;font-weight:700;font-size:.96rem}
.site-card-head i{color:var(--brand)}
.site-card-body{padding:1.2rem}

.site-toggle{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid #eef2f7;border-radius:1rem;padding:1rem 1.2rem;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.site-toggle .tt{flex:1;min-width:0}
.site-toggle .tt b{font-size:1rem}
.site-toggle .tt span{display:block;color:var(--muted);font-size:.82rem;margin-top:.1rem}
.site-status{flex:none;font-size:.76rem;font-weight:700;padding:.2rem .7rem;border-radius:2rem}
.site-status.on{background:#dcfce7;color:#15803d}
.site-status.off{background:#f1f5f9;color:#64748b}

.site-logo-prev{max-height:52px;max-width:100%;border-radius:8px;border:1px solid #e2e8f0;background:#0b1d46;padding:4px}
.site-field{margin-bottom:0}
.site-field+.site-field{margin-top:1rem}
.site-field label{font-weight:600;font-size:.85rem;margin-bottom:.3rem;display:block}
.site-field .hint{font-size:.78rem;color:var(--muted);margin-top:.28rem}

.site-url{display:flex;gap:.4rem}
.site-url input{flex:1;border:1px solid #cbd5e1;border-radius:.6rem;padding:.5rem .7rem;font-size:.8rem;background:#f8fafc;color:var(--ink);min-width:0}
.site-url button{flex:none;border:1px solid var(--brand);background:#eff6ff;color:var(--brand);border-radius:.6rem;width:42px;cursor:pointer;transition:.15s}
.site-url button:hover{background:var(--brand);color:#fff}
.site-qr{display:flex;justify-content:center;margin:.2rem 0 .5rem}
.site-qr #qr{padding:8px;background:#fff;border:1px solid #eef2f7;border-radius:12px;line-height:0}
.site-qr-cap{text-align:center;color:var(--muted);font-size:.8rem;margin-bottom:.6rem}
.site-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.site-metric{background:#f8fafc;border-radius:.7rem;padding:.75rem;text-align:center}
.site-metric b{display:block;font-size:1.55rem;font-weight:800;line-height:1.1}
.site-metric.v b{color:var(--brand)}
.site-metric.l b{color:#16a34a}
.site-metric span{font-size:.77rem;color:var(--muted)}

.site-section-head{margin-top:.4rem}
.site-section-head .eyebrow{color:var(--brand);font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase}
.site-section-head h2{font-size:1.25rem;font-weight:800;margin:.18rem 0 .25rem}
.site-section-head p{color:var(--muted);font-size:.9rem;margin:0;max-width:780px;line-height:1.55}

.site-benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin-top:.9rem}
.site-benefit{background:#fff;border:1px solid #eef2f7;border-radius:.9rem;padding:1.1rem;box-shadow:0 1px 3px rgba(15,23,42,.05);transition:.15s}
.site-benefit:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,23,42,.1);border-color:#dbeafe}
.site-benefit .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:#eff6ff;color:var(--brand);margin-bottom:.65rem}
.site-benefit b{font-size:.95rem}
.site-benefit p{color:var(--muted);font-size:.84rem;line-height:1.55;margin:.25rem 0 0}

.site-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:.7rem;margin-top:.9rem}
.site-tip{display:flex;gap:.8rem;background:#fff;border:1px solid #eef2f7;border-left:3px solid var(--brand);border-radius:.7rem;padding:.85rem 1rem}
.site-tip .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.84rem;display:flex;align-items:center;justify-content:center}
.site-tip b{font-size:.9rem}
.site-tip p{color:var(--muted);font-size:.83rem;line-height:1.5;margin:.15rem 0 0}

/* ---------- Topbar ---------- */
.topbar{height:64px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding:0 1.5rem;position:sticky;top:0;z-index:1030}
.page-title{font-weight:700;font-size:1.1rem;flex:1;color:var(--ink);letter-spacing:-.01em}
.content{padding:1.6rem;width:100%;max-width:1520px;margin:0 auto}
@media(min-width:1400px){.content{padding:1.6rem 2rem}}

/* ---------- Cards / tables ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:var(--card)}
.card-header{background:transparent;border-bottom:1px solid var(--line);font-weight:600;padding:.9rem 1.15rem;border-radius:var(--radius) var(--radius) 0 0!important}
.stat-card{border-radius:.8rem;padding:1.1rem 1.2rem;background:#fff;display:flex;align-items:center;gap:1rem}
.stat-card .ic{width:48px;height:48px;border-radius:.7rem;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;flex:none}
.stat-card .v{font-size:1.5rem;font-weight:700;line-height:1.1}
.stat-card .l{color:var(--muted);font-size:.85rem}
.table>:not(caption)>*>*{padding:.78rem .9rem;border-bottom-color:#f1f4f9}
.table thead th{background:#f7f9fc;color:var(--muted);font-weight:600;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap}
.table tbody tr{transition:background .12s}
.table-hover tbody tr:hover,.table tbody tr:hover{background:#f8faff}
.badge{font-weight:600;padding:.4em .65em;border-radius:.5rem}

/* ---------- Admin dashboard ---------- */
.admin-dashboard{width:100%}
.admin-dashboard .dashboard-stat-row,
.admin-dashboard .dashboard-panel-row{
  --dash-gap:1.25rem;
  display:grid;
  gap:var(--dash-gap);
  margin-top:0;
  margin-left:0;
  margin-right:0;
}
.admin-dashboard .dashboard-stat-row>*,
.admin-dashboard .dashboard-panel-row>*{
  width:auto;
  max-width:none;
  padding-left:0;
  padding-right:0;
  margin-top:0;
}
.admin-dashboard .dashboard-stat-row-primary{grid-template-columns:repeat(4,minmax(0,1fr))}
.admin-dashboard .dashboard-stat-row-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-dashboard .stat-card{
  min-height:92px;
  height:100%;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.admin-dashboard .stat-card>div:last-child{min-width:0}
.admin-dashboard .stat-card .l{line-height:1.35}
.admin-dashboard .dashboard-panel-row{
  grid-template-columns:minmax(0,7fr) minmax(320px,5fr);
  align-items:stretch;
}
.admin-dashboard .dashboard-panel-row>[class*="col-"]{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.admin-dashboard .dashboard-panel-row .col-lg-5{gap:var(--dash-gap)}
.admin-dashboard .dashboard-panel-row .col-lg-5>.card{margin-bottom:0!important}
.admin-dashboard .dashboard-panel-row .col-lg-7>.card{
  flex:1;
  min-height:320px;
}
.admin-dashboard .dashboard-panel-row .card{width:100%}
.admin-dashboard .dashboard-panel-row .list-group-item{gap:1rem}

/* ---------- Auth ---------- */
.auth-body{background:linear-gradient(135deg,#1e3a8a,#2563eb);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.auth-wrap{background:#fff;border-radius:1rem;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:2rem;width:100%;max-width:460px}
.auth-wrap.wide{max-width:760px}
.auth-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}
.auth-brand i{font-size:2.2rem;color:var(--brand)}

/* ---------- Misc ---------- */
.text-muted-2{color:var(--muted)}
.level-pill{display:inline-block;padding:.2em .6em;border-radius:1rem;background:#eff6ff;color:var(--brand-dark);font-size:.8rem;font-weight:600}
.hook-box{background:#fffbeb;border-left:3px solid #f59e0b;padding:.6rem .9rem;border-radius:.4rem;font-style:italic}
a{color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

/* ===== Modern UI refresh (โมเดิร์น คงธีมเดิม) — ปรับทุกหน้าหลังบ้านพร้อมกัน ===== */
.btn{border-radius:.6rem;font-weight:600;transition:.15s;padding:.5rem .95rem}
.btn-sm{border-radius:.5rem;padding:.34rem .7rem}
.btn-lg{border-radius:.7rem}
.btn-primary{box-shadow:0 6px 16px rgba(37,99,235,.24)}
.btn-primary:hover{box-shadow:0 9px 22px rgba(37,99,235,.32);transform:translateY(-1px)}
.btn-light{background:#fff;border:1px solid var(--line);color:#334155}
.btn-light:hover{background:#f4f6fb;border-color:#d8e0ec}
.btn-outline-secondary{border-color:#d8e0ec}
.form-control,.form-select{border-radius:.6rem;border-color:#d8e0ec;padding:.5rem .8rem;transition:border-color .15s,box-shadow .15s}
.form-control-sm,.form-select-sm{border-radius:.5rem}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.form-label{font-weight:600;font-size:.86rem;color:#334155;margin-bottom:.35rem}
.input-group-text{border-radius:.6rem;background:#f4f6fb;border-color:#d8e0ec;color:var(--muted)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(37,99,235,.15);border-color:var(--brand)}
.dropdown-menu{border:1px solid var(--line);border-radius:.8rem;box-shadow:var(--shadow-lg);padding:.35rem;font-size:.92rem}
.dropdown-item{border-radius:.5rem;padding:.5rem .7rem}
.dropdown-item:active{background:var(--brand)}
.alert{border:1px solid transparent;border-radius:.75rem}
.alert-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert-danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}
.stat-card{box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.stat-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.nav-tabs{border-bottom:1px solid var(--line);gap:.15rem}
.nav-tabs .nav-link{border:0;border-bottom:2.5px solid transparent;border-radius:.5rem .5rem 0 0;color:var(--muted);font-weight:600;padding:.6rem 1rem;transition:.15s}
.nav-tabs .nav-link:hover{background:#f4f6fb;color:var(--ink)}
.nav-tabs .nav-link.active{color:var(--brand);background:transparent;border-bottom-color:var(--brand)}
.modal-content{border:0;border-radius:1rem;box-shadow:var(--shadow-lg)}
.modal-header,.modal-footer{border-color:var(--line)}
.list-group-item{border-color:var(--line)}
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin-bottom:1.15rem}
.page-head h1{font-size:1.4rem;font-weight:700;margin:0;letter-spacing:-.01em}
.page-head .sub{color:var(--muted);font-size:.9rem;margin-top:.1rem}
/* หัวข้อหน้า + breadcrumb มาตรฐาน */
.page-header{margin-bottom:1.3rem}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.32rem;font-size:.82rem;color:var(--muted);margin-bottom:.5rem}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.28rem;transition:color .15s}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{font-size:.66rem;opacity:.55}
.crumbs .cur{color:var(--ink);font-weight:600}
.page-header-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem}
.page-header h1{font-size:1.5rem;font-weight:700;margin:0;letter-spacing:-.015em;color:var(--ink)}
.page-header .page-actions{display:flex;gap:.5rem;flex-wrap:wrap}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cdd6e3;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#9aa8bd;background-clip:content-box}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);background-clip:content-box}

/* ---------- Notifications bell ---------- */
.notif-menu{width:350px;max-height:450px;overflow-y:auto}
.notif-item{display:flex;gap:.6rem;padding:.6rem .9rem;border-bottom:1px solid #f1f5f9;text-decoration:none;color:var(--ink)}
.notif-item:hover{background:#f8fafc}
.notif-item i{font-size:1.15rem;color:var(--brand);flex:none;margin-top:.15rem}
.notif-item.unread{background:#eff6ff}
.notif-item.unread .ttl{font-weight:700}
.notif-item .ttl{font-size:.9rem;line-height:1.35}
.notif-item .bd{font-size:.8rem;color:var(--muted)}
.notif-item .tm{font-size:.7rem;color:var(--muted);margin-top:.15rem}
#notifBtn{position:relative}
#notifBadge{position:absolute;top:-5px;right:-5px;font-size:.62rem;padding:.2em .42em}
@keyframes bellpulse{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(11deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
.bell-ring{animation:bellpulse .7s ease}

/* ---------- Chat ---------- */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 140px);min-height:420px;background:#fff;border-radius:.8rem;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden}
.chat-tabs{display:flex;gap:.25rem;padding:.45rem .45rem 0;background:#f1f5f9}
.chat-tab{flex:1;text-align:center;padding:.55rem;border-radius:.6rem .6rem 0 0;cursor:pointer;font-weight:600;color:var(--muted);background:#e2e8f0;border:none}
.chat-tab.active{background:#fff;color:var(--brand)}
.chat-panel{flex:1;display:flex;flex-direction:column;min-height:0}
.chat-body{flex:1;overflow-y:auto;padding:1rem;background:#f8fafc;display:flex;flex-direction:column;gap:.5rem}
.chat-foot{padding:.6rem;border-top:1px solid #eef2f7;display:flex;gap:.5rem;background:#fff}
.chat-foot textarea{resize:none;border-radius:1.2rem;padding:.5rem .9rem}
.bubble{max-width:78%;padding:.55rem .85rem;border-radius:1rem;font-size:.95rem;white-space:pre-wrap;word-break:break-word;line-height:1.55}
.bubble .t{display:block;font-size:.66rem;opacity:.65;margin-top:.25rem}
.b-me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:.3rem}
.b-them{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:.3rem}
.b-ai{align-self:flex-start;background:#f5f3ff;border:1px solid #ddd6fe;border-bottom-left-radius:.3rem}
.b-sys{align-self:center;background:#fef3c7;color:#92400e;font-size:.82rem;border-radius:.5rem;padding:.35rem .7rem;max-width:90%}
.chat-empty{margin:auto;color:var(--muted);text-align:center}
.chat-img{max-width:220px;max-height:220px;border-radius:.55rem;display:block;cursor:pointer}
.chat-file{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .7rem;background:rgba(0,0,0,.06);border-radius:.6rem;text-decoration:none;color:inherit;max-width:240px}
.chat-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem}
.chat-file i{font-size:1.6rem;color:#dc2626;flex:none}
.b-me .chat-file{background:rgba(255,255,255,.22);color:#fff}
.b-me .chat-file i{color:#fecaca}
.ai-badge{display:inline-flex;align-items:center;gap:.3rem;background:#ede9fe;color:#6d28d9;font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:1rem}

/* ---------- Training lesson ---------- */
.training-body{line-height:1.75}
.training-body img{max-width:100%;border-radius:.45rem;margin:.5rem 0}
.training-body h4,.training-body h5{margin-top:1rem;font-weight:600}
.training-body blockquote{background:#f8fafc;border-left:3px solid var(--brand);padding:.6rem .9rem;border-radius:.4rem;font-style:italic;margin:.6rem 0}
.lesson-block{margin-bottom:1.6rem}
.lesson-block:last-child{margin-bottom:0}

/* ---------- Responsive ---------- */
@media(max-width:991px){
  .sidebar{transform:translateX(-100%)}
  .main{margin-left:0}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .admin-dashboard .dashboard-stat-row-primary,
  .admin-dashboard .dashboard-stat-row-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-dashboard .dashboard-panel-row{grid-template-columns:1fr}
}
@media(max-width:575px){
  .content{padding:1rem}
  .admin-dashboard .dashboard-stat-row-primary,
  .admin-dashboard .dashboard-stat-row-secondary{grid-template-columns:1fr}
  .admin-dashboard .stat-card{min-height:86px}
}

/* ---------- Agent Training Academy refresh ---------- */
.academy-page,.lesson-page{max-width:1380px;margin:0 auto}
.academy-page{display:flex;flex-direction:column}
.academy-page>*{order:20}
.academy-tier-compact{order:1}
.academy-hero-pro{order:2}
.academy-stat-grid{order:3}
.academy-learning-head{order:4}
.academy-course-grid,.academy-empty{order:5}
.academy-alert{order:6}
.academy-roadmap-head{order:7}
.academy-roadmap{order:8}
.academy-hero-pro{position:relative;overflow:hidden;border-radius:1rem;background:linear-gradient(118deg,#0f766e 0%,#155e75 46%,#1e3a8a 100%);color:#fff;padding:2rem;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:1.4rem;align-items:end;box-shadow:0 18px 38px rgba(15,23,42,.18)}
.academy-hero-copy{position:relative;z-index:1}
.academy-eyebrow{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);border-radius:2rem;padding:.28rem .78rem;font-size:.78rem;font-weight:700;margin-bottom:.85rem}
.academy-welcome{display:inline-flex;align-items:center;max-width:100%;margin:0 0 .9rem;padding:.42rem .82rem;border-radius:.75rem;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.20);font-size:1.03rem;font-weight:800;line-height:1.45;color:#fff;box-shadow:0 8px 18px rgba(15,23,42,.10)}
.academy-hero-pro h1{font-size:2rem;font-weight:800;line-height:1.32;letter-spacing:0;margin:0 0 .9rem;max-width:760px}
.academy-hero-pro p{font-size:.98rem;line-height:1.82;opacity:.92;max-width:690px;margin:0}
.academy-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.2rem}
.academy-btn-primary,.academy-btn-secondary{display:inline-flex;align-items:center;gap:.38rem;border-radius:.65rem;font-weight:700;padding:.58rem .95rem}
.academy-btn-primary{background:#fff;color:#0f766e;border:1px solid #fff}
.academy-btn-primary:hover{background:#ecfdf5;color:#0f766e}
.academy-btn-secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.46)}
.academy-btn-secondary:hover{background:rgba(255,255,255,.2);color:#fff}
.academy-hero-panel{position:relative;z-index:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:.9rem;padding:1.05rem;display:flex;align-items:center;gap:1rem;backdrop-filter:blur(6px)}
.academy-ring{--p:0;position:relative;width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#facc15 calc(var(--p)*1%),rgba(255,255,255,.22) 0);flex:none}
.academy-ring:before{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:#134e4a}
.academy-ring span{position:relative;font-size:1.35rem;font-weight:800}
.academy-panel-label{font-size:.75rem;text-transform:uppercase;font-weight:700;letter-spacing:.08em;opacity:.8}
.academy-panel-title{font-size:1.25rem;font-weight:800;line-height:1.2;margin:.12rem 0}
.academy-panel-text{font-size:.82rem;line-height:1.5;opacity:.9}
.agent-rank-panel{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;padding:1rem}
.agent-rank-top{display:flex;align-items:center;gap:.75rem}
.agent-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:#fff;color:#0f766e;font-size:1.25rem;font-weight:900;box-shadow:0 8px 18px rgba(15,23,42,.18)}
.agent-rank-id{min-width:0}
.agent-rank-id span,.agent-rank-current span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.78}
.agent-rank-id b{display:block;font-size:1.05rem;font-weight:900;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-rank-id em{display:inline-flex;margin-top:.16rem;font-style:normal;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);border-radius:2rem;padding:.1rem .55rem;font-size:.75rem;font-weight:800}
.agent-rank-current{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:.75rem;padding:.72rem .8rem}
.agent-rank-current strong{display:block;font-size:1.25rem;font-weight:900;line-height:1.22;margin:.05rem 0}
.agent-rank-current small{font-size:.8rem;opacity:.9}
.agent-rank-progress{display:flex;align-items:center;gap:.75rem;background:rgba(15,23,42,.14);border-radius:.75rem;padding:.72rem .8rem}
.agent-rank-progress .rank-ring{width:64px;height:64px}
.agent-rank-progress .rank-ring:before{width:48px;height:48px}
.agent-rank-progress .rank-ring span{font-size:.95rem}
.agent-rank-progress b{display:block;font-size:.88rem;font-weight:900;line-height:1.25}
.agent-rank-progress p{font-size:.78rem;line-height:1.45;opacity:.9;margin:.15rem 0 0}
.academy-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin:1rem 0 1.4rem}
.academy-stat{background:#fff;border:1px solid #e7edf5;border-radius:.85rem;padding:1rem 1.05rem;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.academy-stat span{display:block;color:#64748b;font-size:.82rem;font-weight:600}
.academy-stat strong{display:block;font-size:1.45rem;font-weight:800;line-height:1.15;margin:.18rem 0;color:#0f172a}
.academy-stat small{color:#64748b;font-size:.78rem;line-height:1.4}
.academy-stat-status.ready{border-color:#bbf7d0;background:#f0fdf4}
.academy-stat-status.warming{border-color:#fde68a;background:#fffbeb}
.academy-stat-status.starter{border-color:#bfdbfe;background:#eff6ff}
.academy-section-head{margin:1.55rem 0 .75rem}
.academy-section-head span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#0f766e;text-transform:uppercase;margin-bottom:.18rem}
.academy-section-head h2{font-size:1.28rem;font-weight:800;letter-spacing:0;margin:0;color:#0f172a}
.academy-section-head p{color:#64748b;font-size:.9rem;line-height:1.6;margin:.25rem 0 0;max-width:780px}
.academy-roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.academy-road-step{background:#fff;border:1px solid #e7edf5;border-radius:.85rem;padding:1.05rem;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.academy-road-step i{width:42px;height:42px;border-radius:.7rem;background:#ecfdf5;color:#0f766e;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:.7rem}
.academy-road-step b{display:block;font-size:1rem;color:#0f172a;margin-bottom:.25rem}
.academy-road-step p{color:#64748b;font-size:.86rem;line-height:1.55;margin:0}
.academy-alert{display:flex;gap:.85rem;align-items:flex-start;background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:.85rem;padding:.9rem 1rem;margin:1rem 0;color:#78350f}
.academy-alert i{font-size:1.35rem;line-height:1}
.academy-alert b{display:block;margin-bottom:.08rem}
.academy-alert span{display:block;font-size:.88rem;line-height:1.5}
.academy-tier-compact{background:#fff;border:1px solid #e7edf5;border-radius:.95rem;padding:1rem;margin-bottom:1rem;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.tier-compact-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.tier-compact-head span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#0f766e;text-transform:uppercase;margin-bottom:.1rem}
.tier-compact-head h2{font-size:1.2rem;font-weight:800;letter-spacing:0;margin:0;color:#0f172a}
.tier-compact-head p{color:#64748b;font-size:.86rem;line-height:1.45;margin:0;max-width:560px;text-align:right}
.tier-level-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.tier-level-card{position:relative;overflow:hidden;min-height:150px;border:1px solid #e2e8f0;border-radius:.8rem;background:#fff;padding:.9rem;display:flex;flex-direction:column;gap:.42rem;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.tier-level-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#cbd5e1}
.tier-level-card:after{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none}
.tier-level-card:nth-child(1){border-color:#bfdbfe}
.tier-level-card:nth-child(1):before{background:#2563eb}
.tier-level-card:nth-child(1):after{background:linear-gradient(135deg,#2563eb,#22c55e)}
.tier-level-card:nth-child(2){border-color:#99f6e4}
.tier-level-card:nth-child(2):before{background:#0f766e}
.tier-level-card:nth-child(2):after{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.tier-level-card:nth-child(3){border-color:#fed7aa}
.tier-level-card:nth-child(3):before{background:#f97316}
.tier-level-card:nth-child(3):after{background:linear-gradient(135deg,#f97316,#eab308)}
.tier-level-card:nth-child(4){border-color:#c4b5fd}
.tier-level-card:nth-child(4):before{background:#7c3aed}
.tier-level-card:nth-child(4):after{background:linear-gradient(135deg,#7c3aed,#2563eb)}
.tier-level-card.is-done{box-shadow:0 6px 16px rgba(34,197,94,.09)}
.tier-level-card.is-now{border-color:#7c3aed;background:#f5f3ff;box-shadow:0 14px 28px rgba(124,58,237,.16)}
.tier-level-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.tier-level-no{position:relative;z-index:1;font-size:1.08rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:#0f766e;border-radius:.62rem;padding:.22rem .62rem;white-space:nowrap;box-shadow:0 8px 16px rgba(15,23,42,.12)}
.tier-level-card:nth-child(1) .tier-level-no{background:linear-gradient(135deg,#2563eb,#0e7490)}
.tier-level-card:nth-child(2) .tier-level-no{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.tier-level-card:nth-child(3) .tier-level-no{background:linear-gradient(135deg,#f97316,#d97706)}
.tier-level-card:nth-child(4) .tier-level-no{background:linear-gradient(135deg,#7c3aed,#2563eb)}
.tier-state{font-size:.68rem;font-weight:800;border-radius:2rem;padding:.13rem .48rem;white-space:nowrap}
.tier-state.done{background:#dcfce7;color:#15803d}
.tier-state.current{background:#0f766e;color:#fff}
.tier-state.future{background:#eef2ff;color:#4338ca}
.tier-level-card h3,.tier-level-rate,.tier-level-card p,.tier-level-foot,.tier-state{position:relative;z-index:1}
.tier-level-card h3{font-size:1rem;font-weight:800;line-height:1.25;margin:.1rem 0 0;color:#0f172a}
.tier-level-rate{align-self:flex-start;background:#ecfdf5;color:#047857;border-radius:.72rem;padding:.38rem .62rem;font-size:.78rem;font-weight:900;line-height:1;box-shadow:0 8px 16px rgba(15,23,42,.08)}
.tier-level-rate .rate-num{font-size:1.55rem;font-weight:900;letter-spacing:0;line-height:.95;margin-left:.18rem}
.tier-level-rate .rate-unit{font-size:1rem;font-weight:900;margin-left:.03rem}
.tier-level-rate .rate-caption{display:block;font-size:.68rem;font-weight:800;color:#64748b;margin-top:.18rem}
.tier-level-card:nth-child(1) .tier-level-rate{background:#eff6ff;color:#1d4ed8}
.tier-level-card:nth-child(2) .tier-level-rate{background:#ecfdf5;color:#047857}
.tier-level-card:nth-child(3) .tier-level-rate{background:#fff7ed;color:#c2410c}
.tier-level-card:nth-child(4) .tier-level-rate{background:#f5f3ff;color:#6d28d9}
.tier-level-card p{color:#64748b;font-size:.8rem;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tier-level-foot{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;color:#475569;font-size:.76rem;line-height:1.35}
.tier-level-foot span,.tier-level-foot em{display:inline-flex;align-items:center;gap:.25rem;min-width:0}
.tier-level-foot span{flex:1 1 100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tier-level-foot i{color:#0f766e}
.tier-level-foot em{font-style:normal;background:#fef3c7;color:#92400e;border-radius:2rem;padding:.1rem .48rem;font-weight:800}
.academy-tier-now{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:1rem;align-items:stretch;background:linear-gradient(118deg,#134e4a,#0f766e 46%,#0e7490);border-radius:1rem;padding:1.25rem;color:#fff}
.tier-kicker{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.17);border-radius:2rem;padding:.22rem .72rem;font-size:.78rem;font-weight:700;margin-bottom:.65rem}
.academy-tier-now h3{font-size:1.75rem;font-weight:800;line-height:1.2;margin:0}
.academy-tier-now h3 small{display:inline-flex;vertical-align:middle;background:rgba(255,255,255,.16);border-radius:2rem;padding:.16rem .62rem;font-size:.85rem;font-weight:700;margin-left:.35rem}
.academy-tier-now p{max-width:560px;opacity:.9;margin:.4rem 0 0;font-size:.9rem;line-height:1.6}
.tier-next-box{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:.85rem;padding:.95rem;display:flex;flex-direction:column;gap:.35rem}
.tier-next-box span{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.tier-next-box b{font-size:.98rem}
.tier-next-box small,.tier-next-box em{font-size:.8rem;line-height:1.45;font-style:normal;opacity:.92}
.tier-next-box small b{color:#fde68a}
.tier-progress{height:9px;border-radius:2rem;background:rgba(255,255,255,.25);overflow:hidden;margin:.25rem 0}
.tier-progress i{display:block;height:100%;background:#facc15;border-radius:inherit}
.academy-tier-list{display:grid;gap:.55rem;margin-top:.75rem}
.academy-tier-row{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid #e7edf5;border-left:4px solid #e2e8f0;border-radius:.85rem;padding:.9rem 1rem}
.academy-tier-row.is-done{border-left-color:#22c55e}
.academy-tier-row.is-now{border-left-color:#0f766e;background:#f0fdfa;box-shadow:0 10px 24px rgba(15,118,110,.12)}
.academy-tier-row.is-future{opacity:.78}
.tier-step{width:32px;height:32px;border-radius:50%;background:#f1f5f9;color:#64748b;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.academy-tier-row.is-done .tier-step{background:#dcfce7;color:#15803d}
.academy-tier-row.is-now .tier-step{background:#0f766e;color:#fff}
.tier-row-title{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.tier-row-title b{font-size:1rem}
.tier-row-title small{background:#ecfdf5;color:#047857;border-radius:2rem;padding:.12rem .58rem;font-weight:800;font-size:.76rem}
.tier-row-title em{font-style:normal;background:#0f766e;color:#fff;border-radius:2rem;padding:.12rem .55rem;font-size:.72rem;font-weight:700}
.tier-row-title em.team{background:#fef3c7;color:#92400e}
.academy-tier-row p{margin:.22rem 0;color:#64748b;font-size:.84rem;line-height:1.45}
.tier-req{display:flex;gap:.35rem;color:#475569;font-size:.8rem;line-height:1.45}
.tier-req i{color:#0f766e;margin-top:.12rem}
.academy-empty{background:#fff;border:1px dashed #cbd5e1;border-radius:.9rem;padding:2rem;text-align:center;color:#64748b;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.academy-empty i{font-size:2.2rem;color:#94a3b8}
.academy-empty b{color:#0f172a}
.academy-course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1rem}
.academy-course-card{background:#fff;border:1px solid #e7edf5;border-radius:.95rem;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.06);display:flex;flex-direction:column;min-width:0;transition:transform .16s,box-shadow .16s,border-color .16s}
.academy-course-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,23,42,.13);border-color:#cbd5e1}
.course-cover{min-height:112px;color:#fff;padding:1rem;display:flex;flex-direction:column;justify-content:space-between}
.course-cover i{font-size:2.2rem;filter:drop-shadow(0 6px 12px rgba(15,23,42,.22))}
.course-cover span{align-self:flex-start;background:rgba(255,255,255,.2);border-radius:2rem;padding:.16rem .62rem;font-size:.72rem;font-weight:800}
.academy-tone-teal{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.academy-tone-coral{background:linear-gradient(135deg,#c2410c,#f97316)}
.academy-tone-ocean{background:linear-gradient(135deg,#0369a1,#0e7490)}
.academy-tone-gold{background:linear-gradient(135deg,#b45309,#eab308)}
.course-body{padding:1rem;display:flex;flex-direction:column;flex:1;min-width:0}
.course-meta{display:flex;justify-content:space-between;gap:.65rem;color:#64748b;font-size:.78rem;font-weight:700;margin-bottom:.45rem}
.course-body h3{font-size:1.08rem;font-weight:800;line-height:1.3;margin:0 0 .35rem;color:#0f172a}
.course-body p{color:#64748b;font-size:.84rem;line-height:1.55;margin:0 0 .8rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.course-progress{height:8px;border-radius:2rem;background:#eef2f7;overflow:hidden;margin-bottom:1rem}
.course-progress i{display:block;height:100%;background:linear-gradient(90deg,#10b981,#0f766e);border-radius:inherit}
.course-lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem;margin-top:auto}
.lesson-link{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:.55rem .65rem;align-items:start;border:1px solid #e2e8f0;border-radius:.78rem;padding:.78rem;text-decoration:none;color:#0f172a;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .16s,box-shadow .16s,border-color .16s,background .16s}
.lesson-link:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,118,110,.10),rgba(37,99,235,.08));opacity:0;transition:opacity .16s}
.lesson-link:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.11);border-color:#99f6e4;color:#0f172a}
.lesson-link:hover:before{opacity:1}
.lesson-link.done{border-color:#bbf7d0;background:linear-gradient(180deg,#f0fdf4,#fff)}
.lesson-no{position:relative;z-index:1;width:42px;height:42px;border-radius:.7rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;font-size:1.05rem;font-weight:900;line-height:1;box-shadow:0 8px 16px rgba(15,118,110,.18)}
.lesson-link.done .lesson-no{background:linear-gradient(135deg,#16a34a,#22c55e)}
.lesson-main{position:relative;z-index:1;display:block;min-width:0}
.lesson-main strong{display:block;font-size:.95rem;font-weight:900;line-height:1.35;letter-spacing:0;margin-bottom:.18rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lesson-main small{display:block;color:#64748b;font-size:.76rem;line-height:1.35}
.lesson-link b{position:relative;z-index:1;grid-column:1/3;justify-self:start;font-size:.74rem;color:#2563eb;background:#eff6ff;border-radius:2rem;padding:.18rem .6rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.25rem}
.lesson-link.done b{color:#15803d;background:#dcfce7}

.lesson-back{display:inline-flex;align-items:center;gap:.38rem;margin-bottom:.8rem;text-decoration:none;background:#fff;border:1px solid #e2e8f0;border-radius:.65rem;color:#475569;font-weight:700;font-size:.86rem;padding:.5rem .78rem}
.lesson-back:hover{border-color:#cbd5e1;color:#0f172a;background:#f8fafc}
.lesson-hero{position:relative;overflow:hidden;border-radius:1rem;min-height:260px;background:#0f172a;color:#fff;display:flex;align-items:flex-end;margin-bottom:1rem}
.lesson-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.58}
.lesson-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,42,.88),rgba(15,23,42,.48) 58%,rgba(15,23,42,.16))}
.lesson-hero-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f766e,#1e3a8a);font-size:8rem;color:rgba(255,255,255,.18)}
.lesson-hero-copy{position:relative;z-index:1;padding:1.55rem 1.65rem;max-width:780px}
.lesson-hero-copy>span{display:inline-flex;align-items:center;gap:.36rem;background:rgba(255,255,255,.16);border-radius:2rem;padding:.22rem .7rem;font-size:.76rem;font-weight:800;margin-bottom:.65rem}
.lesson-hero h1{font-size:1.85rem;font-weight:800;line-height:1.25;letter-spacing:0;margin:0 0 .45rem}
.lesson-hero p{font-size:.95rem;line-height:1.65;opacity:.92;margin:0;max-width:700px}
.lesson-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.95rem}
.lesson-badges b{display:inline-flex;align-items:center;gap:.32rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.18);border-radius:2rem;padding:.2rem .62rem;font-size:.78rem}
.lesson-badges b.done{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,380px);gap:1rem;align-items:start}
.lesson-content{background:#fff;border:1px solid #e7edf5;border-radius:.95rem;padding:1.15rem;box-shadow:0 1px 3px rgba(15,23,42,.06);min-width:0}
.lesson-section-title{border-bottom:1px solid #eef2f7;padding-bottom:.75rem;margin-bottom:1rem}
.lesson-section-title span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;color:#0f766e;text-transform:uppercase}
.lesson-section-title h2{font-size:1.18rem;font-weight:800;margin:.12rem 0 0}
.lesson-media-img{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:.75rem;background:#f8fafc}
.lesson-video{border-radius:.75rem;overflow:hidden;background:#0f172a}
.lesson-caption{color:#64748b;font-size:.82rem;margin-top:.45rem}
.lesson-empty{border:1px dashed #cbd5e1;border-radius:.85rem;padding:2rem;text-align:center;color:#64748b;display:flex;flex-direction:column;gap:.25rem;align-items:center}
.lesson-empty i{font-size:2rem;color:#94a3b8}
.lesson-empty b{color:#0f172a}
.lesson-after{margin-top:1.15rem;border-radius:.85rem;background:#f8fafc;border:1px solid #e7edf5;padding:1rem}
.lesson-after h3{font-size:1rem;font-weight:800;margin:0 0 .75rem;display:flex;align-items:center;gap:.4rem}
.lesson-after h3 i{color:#d97706}
.lesson-after-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}
.lesson-after-grid span{background:#fff;border:1px solid #eef2f7;border-radius:.65rem;padding:.72rem;color:#475569;font-size:.84rem;line-height:1.45}
.quiz-panel{position:sticky;top:78px;background:#fff;border:1px solid #e7edf5;border-radius:.95rem;box-shadow:0 1px 3px rgba(15,23,42,.06);overflow:hidden}
.quiz-head{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border-bottom:1px solid #eef2f7;background:#fbfcfe}
.quiz-head>i{width:42px;height:42px;border-radius:.7rem;background:#eff6ff;color:#2563eb;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;flex:none}
.quiz-head b{display:block;font-size:1rem;line-height:1.25}
.quiz-head span{display:block;color:#64748b;font-size:.8rem;line-height:1.45;margin-top:.12rem}
.quiz-panel form{padding:1rem}
.quiz-note{color:#64748b;font-size:.88rem;line-height:1.55;margin:0 0 1rem}
.quiz-question{border-bottom:1px solid #eef2f7;padding-bottom:.9rem;margin-bottom:.9rem}
.quiz-question:last-of-type{border-bottom:0}
.quiz-title{font-weight:800;font-size:.9rem;line-height:1.45;margin-bottom:.55rem}
.quiz-choice{display:flex;gap:.55rem;align-items:flex-start;border:1px solid #e2e8f0;border-radius:.65rem;padding:.55rem .62rem;margin-bottom:.45rem;cursor:pointer;transition:background .12s,border-color .12s}
.quiz-choice:hover{background:#f8fafc;border-color:#cbd5e1}
.quiz-choice input{margin-top:.2rem;flex:none}
.quiz-choice span{font-size:.86rem;line-height:1.45}
.lesson-submit{background:#0f766e;border-color:#0f766e;color:#fff;font-weight:800;border-radius:.65rem;padding:.62rem .9rem}
.lesson-submit:hover{background:#115e59;border-color:#115e59;color:#fff}
.training-body{color:#334155;font-size:.95rem;line-height:1.85}
.training-body h1,.training-body h2,.training-body h3,.training-body h4,.training-body h5{color:#0f172a;font-weight:800;letter-spacing:0;margin:1.05rem 0 .55rem}
.training-body p{margin-bottom:.85rem}
.training-body ul,.training-body ol{padding-left:1.35rem;margin-bottom:.9rem}
.training-body li{margin-bottom:.35rem}
.training-body img{max-width:100%;border-radius:.75rem;margin:.6rem 0}
.training-body blockquote{background:#f0fdfa;border-left:4px solid #0f766e;color:#134e4a;padding:.75rem 1rem;border-radius:.65rem;font-style:normal;margin:.85rem 0}
.lesson-block{margin-bottom:1.35rem}
.lesson-block:last-child{margin-bottom:0}

@media(max-width:1199px){
  .academy-course-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
  .tier-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .academy-hero-pro{grid-template-columns:1fr}
  .academy-hero-panel{max-width:460px}
}
@media(max-width:991px){
  .academy-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .academy-roadmap,.lesson-after-grid{grid-template-columns:1fr}
  .academy-tier-now,.lesson-layout{grid-template-columns:1fr}
  .quiz-panel{position:static}
}
@media(max-width:575px){
  .academy-hero-pro{padding:1.35rem}
  .academy-hero-pro h1,.lesson-hero h1{font-size:1.45rem}
  .academy-hero-panel{align-items:flex-start;flex-direction:column}
  .agent-rank-panel{align-items:stretch}
  .agent-rank-progress{align-items:flex-start}
  .academy-stat-grid,.academy-course-grid,.tier-level-grid,.course-lessons{grid-template-columns:1fr}
  .academy-tier-compact{padding:.85rem}
  .tier-compact-head{align-items:flex-start;flex-direction:column;gap:.25rem}
  .tier-compact-head p{text-align:left}
  .academy-tier-now h3{font-size:1.35rem}
  .academy-tier-now h3 small{margin:.35rem 0 0;display:inline-flex}
  .lesson-hero{min-height:230px}
  .lesson-hero-copy{padding:1.2rem}
  .lesson-content{padding:1rem}
}