:root{--blue:#2563eb;--blue2:#3b82f6;--sky:#0ea5e9;--orange:#f97316;--green:#16a34a;--ink:#111827;--muted:#64748b;--line:#e5ecf6;--soft:#f5f9ff;--card:#fff;--shadow:0 20px 60px rgba(37,99,235,.10);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 0%,rgba(37,99,235,.12),transparent 28%),radial-gradient(circle at 92% 16%,rgba(14,165,233,.12),transparent 24%),linear-gradient(180deg,#f8fbff 0%,#eef6ff 44%,#f7fbff 100%);min-height:100vh}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.sinbyte-app{overflow-x:hidden}.sb-shell{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:100vh}.sb-sidebar{position:sticky;top:0;height:100vh;padding:28px 24px;background:rgba(255,255,255,.78);backdrop-filter:blur(22px);border-right:1px solid rgba(37,99,235,.10);box-shadow:18px 0 60px rgba(37,99,235,.06);z-index:30}.sb-nav-section{margin:30px 0 12px;color:#8a9ab5;text-transform:uppercase;letter-spacing:.09em;font-weight:800;font-size:12px}.sb-nav{display:flex;flex-direction:column;gap:8px}.sb-nav-link{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;color:#334155;font-weight:700;transition:.18s ease}.sb-nav-link:hover{background:#edf5ff;color:#1d4ed8;transform:translateX(2px)}.sb-nav-link.is-active{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:white;box-shadow:0 14px 28px rgba(37,99,235,.28)}.sb-ico{width:26px;height:26px;display:grid;place-items:center;background:rgba(37,99,235,.08);border-radius:10px}.is-active .sb-ico{background:rgba(255,255,255,.18)}.sb-upgrade-card{position:absolute;left:24px;right:24px;bottom:28px;padding:22px;border-radius:24px;background:linear-gradient(145deg,#eff6ff,#fff);border:1px solid rgba(37,99,235,.12);box-shadow:0 20px 40px rgba(37,99,235,.10)}.sb-upgrade-card strong{display:block;font-size:15px}.sb-upgrade-card p{margin:8px 0 14px;color:#64748b;font-size:13px;line-height:1.5}.sb-upgrade-card a{display:flex;justify-content:center;padding:12px;border-radius:14px;background:#2563eb;color:white;font-weight:800}.sb-rocket{font-size:36px;margin-bottom:10px}.sb-main{min-width:0;padding:24px 30px 0}.sb-topbar{height:74px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:20;background:rgba(248,251,255,.76);backdrop-filter:blur(18px);border-bottom:1px solid rgba(37,99,235,.08);padding:14px 30px}.sb-search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;padding:0 18px;border-radius:18px;background:white;border:1px solid #dbe8fb;box-shadow:0 12px 30px rgba(37,99,235,.08)}.sb-search span{color:#7c8da8;font-size:23px}.sb-search input{height:46px;border:0;outline:0;width:100%;background:transparent;color:#1e293b}.sb-top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.sb-pill{white-space:nowrap;background:white;border:1px solid #dbe8fb;border-radius:999px;padding:11px 14px;font-size:13px;font-weight:800;color:#1e40af;box-shadow:0 12px 28px rgba(37,99,235,.07)}.sb-pill-soft{color:#047857}.sb-icon-btn{position:relative;width:46px;height:46px;border:1px solid #dbe8fb;border-radius:16px;background:white;box-shadow:0 12px 28px rgba(37,99,235,.07);cursor:pointer}.sb-dot{position:absolute;right:5px;top:4px;background:#ef4444;color:white;border-radius:999px;min-width:18px;height:18px;font-size:11px;display:grid;place-items:center}.sb-user-button{display:flex;align-items:center;gap:10px;height:50px;padding:6px 10px 6px 6px;background:white;border:1px solid #dbe8fb;border-radius:18px;box-shadow:0 12px 28px rgba(37,99,235,.07);cursor:pointer}.sb-avatar{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:white;font-weight:900;display:grid;place-items:center}.sb-user-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}.sb-user-meta b{font-size:14px}.sb-user-meta small{font-size:12px;color:#64748b}.sb-caret{color:#64748b}.sb-action-menu,.sb-user-menu{position:relative}.sb-dropdown{display:none;position:absolute;right:0;top:calc(100% + 12px);width:260px;background:white;border:1px solid #dbe8fb;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.16);padding:10px;z-index:60}.sb-dropdown.is-open{display:block;animation:sbDrop .16s ease}.sb-dropdown-wide{width:360px}.sb-dropdown a{display:block;padding:12px 14px;border-radius:14px;color:#334155;font-weight:700}.sb-dropdown a:hover{background:#eff6ff;color:#1d4ed8}.sb-dropdown small{display:block;color:#64748b;font-weight:500;margin-top:4px}.sb-dropdown-title{padding:10px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:900}.sb-dropdown hr{border:0;border-top:1px solid #e5ecf6;margin:8px}.sb-hero-strip{margin:28px 0 22px;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:28px;border-radius:28px;background:linear-gradient(135deg,rgba(37,99,235,.98),rgba(14,165,233,.86)),radial-gradient(circle at right,rgba(249,115,22,.30),transparent 34%);color:white;overflow:hidden;position:relative}.sb-hero-strip:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);border-radius:50%}.sb-eyebrow{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.82);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:900}.sb-hero-strip h1{margin:8px 0 6px;font-size:30px;line-height:1.1}.sb-hero-strip p{margin:0;color:rgba(255,255,255,.82);font-weight:500}.sb-primary-link{position:relative;z-index:2;white-space:nowrap;padding:14px 18px;border-radius:16px;background:white;color:#1d4ed8;font-weight:900;box-shadow:0 14px 30px rgba(15,23,42,.15)}.sb-content{padding-bottom:30px}.sb-footer{display:flex;justify-content:space-between;gap:12px;padding:24px 0 30px;color:#64748b;font-size:13px}.sb-mobile-menu{display:none;width:44px;height:44px;border:1px solid #dbe8fb;background:white;border-radius:14px;font-weight:900}.container-fluid{width:100%;padding:0}.row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px}.row>[class*=col-],.col,.col-12,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-xl-3,.col-xl-4,.col-xl-6,.col-xl-8{padding-left:12px;padding-right:12px;width:100%}@media(min-width:768px){.col-md-3{width:25%}.col-md-4{width:33.333%}.col-md-5{width:41.666%}.col-md-6{width:50%}.col-md-7{width:58.333%}.col-md-8{width:66.666%}.col-md-9{width:75%}}@media(min-width:992px){.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-6{width:50%}.col-lg-7{width:58.333%}.col-lg-8{width:66.666%}.d-lg-block{display:block!important}}@media(min-width:1200px){.col-xl-3{width:25%}.col-xl-4{width:33.333%}.col-xl-6{width:50%}.col-xl-8{width:66.666%}}.card,.modal-content{background:white;border:1px solid #dbe8fb!important;border-radius:24px!important;box-shadow:var(--shadow)!important;overflow:hidden}.card-header,.modal-header{background:linear-gradient(180deg,#fff,#f8fbff)!important;border-bottom:1px solid #e5ecf6!important;padding:18px 22px!important}.card-body,.modal-body{padding:22px!important}.modal-footer{border-top:1px solid #e5ecf6!important;padding:16px 22px!important;background:#fbfdff}.h1,.h2,.h3,h1,h2,h3{color:#0f172a;font-weight:900;letter-spacing:-.03em}.text-gray-800,.text-gray-900{color:#0f172a!important}.text-primary{color:#2563eb!important}.text-success{color:#16a34a!important}.text-danger{color:#ef4444!important}.text-warning{color:#f97316!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:2rem!important}.mt-1{margin-top:.35rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.p-5{padding:2rem!important}.py-2{padding-top:.75rem!important;padding-bottom:.75rem!important}.shadow{box-shadow:var(--shadow)!important}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 16px;font-weight:900;cursor:pointer;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn-primary,.btn-success{background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;color:white!important}.btn-warning{background:#fff7ed!important;color:#c2410c!important;border:1px solid #fed7aa!important}.btn-danger,.btn-outline-danger{background:#fff1f2!important;color:#e11d48!important;border:1px solid #fecdd3!important}.btn-secondary{background:#eef4ff!important;color:#334155!important}.btn-block{display:flex;width:100%}.form-control,input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;border:1px solid #dbe8fb!important;border-radius:16px!important;background:white!important;color:#0f172a!important;outline:0;padding:13px 15px!important;box-shadow:0 10px 24px rgba(37,99,235,.05);transition:.16s ease}textarea{min-height:120px}input:focus,select:focus,textarea:focus,.form-control:focus{border-color:#60a5fa!important;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important}.form-group{margin-bottom:16px}.form-control-user{border-radius:999px!important;padding:14px 18px!important}.table{width:100%;border-collapse:separate!important;border-spacing:0;background:white;border:1px solid #dbe8fb;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);color:#1e293b}.table th{background:#f4f8ff;color:#475569;text-transform:uppercase;letter-spacing:.06em;font-size:12px}.table th,.table td{padding:14px 16px!important;border-bottom:1px solid #edf2fa!important}.table tr:last-child td{border-bottom:0!important}.table tr:hover td{background:#f8fbff}.badge{border-radius:999px;padding:5px 9px;font-size:11px}.alert{border-radius:18px;padding:14px 16px;border:1px solid #dbe8fb;background:white;box-shadow:var(--shadow)}.alert-success{background:#ecfdf5;color:#047857;border-color:#bbf7d0}.alert-danger{background:#fff1f2;color:#be123c;border-color:#fecdd3}.alert-warning{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.modal{display:none;position:fixed;z-index:1050;inset:0;overflow:auto;background:rgba(15,23,42,.48);backdrop-filter:blur(8px)}.modal.show{display:block}.modal-dialog{max-width:560px;margin:8vh auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100vh - 3.5rem)}.modal.right .modal-dialog{margin:0 0 0 auto;min-height:100vh;max-width:520px}.modal.right .modal-content{min-height:100vh;border-radius:28px 0 0 28px!important}.close{border:0;background:#eef4ff;border-radius:12px;width:36px;height:36px;font-size:20px;cursor:pointer}.dropdown-menu{background:white;border:1px solid #dbe8fb;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.16);padding:10px}.dropdown-item{display:block;padding:12px 14px;border-radius:14px;font-weight:700;color:#334155}.dropdown-item:hover{background:#eff6ff;color:#1d4ed8}.dropdown-divider{border-top:1px solid #e5ecf6;margin:8px 0}.sb-toast-stack{position:fixed;top:18px;right:18px;z-index:2000}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 520px;padding:34px;gap:28px}.auth-brand-panel{border-radius:34px;padding:34px;background:linear-gradient(145deg,rgba(37,99,235,.95),rgba(14,165,233,.88)),radial-gradient(circle at 80% 15%,rgba(249,115,22,.35),transparent 28%),radial-gradient(circle at 30% 88%,rgba(22,163,74,.28),transparent 26%);color:white;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 26px 80px rgba(37,99,235,.25)}.auth-brand span{color:white}.auth-copy h1{font-size:44px;line-height:1.04;margin:16px 0}.auth-copy p{font-size:17px;color:rgba(255,255,255,.82);max-width:620px;line-height:1.65}.auth-benefits{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.auth-benefits span{background:rgba(255,255,255,.14);padding:12px 14px;border-radius:999px;font-weight:800}.auth-card{align-self:center;background:white;border:1px solid #dbe8fb;border-radius:34px;box-shadow:0 24px 80px rgba(37,99,235,.16);overflow:hidden}.bg-login-image,.bg-register-image{background:linear-gradient(135deg,#eff6ff,#fff);min-height:100%;border-radius:28px 0 0 28px;position:relative}.bg-login-image:after,.bg-register-image:after{content:"🚀";font-size:76px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.small{font-size:13px;color:#2563eb;font-weight:800}.error-msg{display:block;margin-bottom:14px}.d-none{display:none!important}.d-sm-inline-block{display:inline-block!important}.text-center{text-align:center!important}.align-items-center{align-items:center!important}.justify-content-between{justify-content:space-between!important}.d-flex{display:flex!important}.d-sm-flex{display:flex!important}.mr-2{margin-right:.5rem!important}.ml-md-3{margin-left:1rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.rounded-circle{border-radius:999px!important}@keyframes sbDrop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.sb-shell{grid-template-columns:1fr}.sb-sidebar{position:fixed;left:-320px;width:292px;transition:.22s ease}.sb-sidebar.is-open{left:0}.sb-mobile-menu{display:block}.sb-hero-strip{flex-direction:column;align-items:flex-start}.sb-top-actions{gap:8px}.sb-pill{display:none}.sb-user-meta{display:none}.auth-shell{grid-template-columns:1fr}.auth-brand-panel{display:none}}@media(max-width:720px){.sb-main{padding:18px 16px 0}.sb-topbar{margin:-18px -16px 0;padding:12px 16px}.sb-search{display:none}.sb-hero-strip{padding:22px}.sb-hero-strip h1{font-size:24px}.sb-dropdown-wide{width:300px;right:-64px}.auth-shell{padding:16px}.p-5{padding:1.25rem!important}.modal-dialog{margin:6vh 14px}.row{margin-left:0;margin-right:0}.row>[class*=col-],.col,.col-12,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-xl-3,.col-xl-4,.col-xl-6,.col-xl-8{padding-left:0;padding-right:0}}


/* Customer UI polish: dashboard credits + check-free extension CTA */
.sb-dashboard{display:flex;flex-direction:column;gap:22px}.sb-dashboard-hero,.sb-checkfree-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border-radius:32px;background:linear-gradient(135deg,#ffffff 0%,#f2f8ff 42%,#eaf5ff 100%);border:1px solid #d9e9ff;box-shadow:0 24px 70px rgba(37,99,235,.12);position:relative;overflow:hidden}.sb-dashboard-hero:before,.sb-checkfree-hero:before{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.18),transparent 66%)}.sb-eyebrow-dark{display:inline-flex;align-items:center;gap:8px;color:#2563eb;font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.sb-dashboard-hero h1,.sb-checkfree-hero h1{margin:8px 0 8px;font-size:34px;line-height:1.08;color:#0f172a}.sb-dashboard-hero p,.sb-checkfree-hero p{margin:0;color:#64748b;font-size:15px;line-height:1.65;max-width:720px}.sb-hero-action,.sb-install-btn{min-height:58px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff!important;font-weight:900;box-shadow:0 18px 42px rgba(37,99,235,.24);white-space:nowrap;position:relative;z-index:2}.sb-hero-action:hover,.sb-install-btn:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(37,99,235,.30)}.sb-install-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.18);line-height:1}.sb-credit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.sb-credit-card{position:relative;overflow:hidden;border-radius:30px;padding:26px;border:1px solid #d9e9ff;background:#fff;box-shadow:0 22px 60px rgba(37,99,235,.12);min-height:190px}.sb-credit-card:after{content:"";position:absolute;right:-44px;bottom:-58px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.34)}.sb-credit-used{background:linear-gradient(135deg,#2563eb,#1d4ed8 62%,#0f62fe);color:#fff}.sb-credit-available{background:linear-gradient(135deg,#0ea5e9,#10b981 68%,#22c55e);color:#fff}.sb-credit-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2}.sb-credit-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:20px;background:rgba(255,255,255,.18);font-size:27px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}.sb-credit-label{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900;color:rgba(255,255,255,.78)}.sb-credit-value{position:relative;z-index:2;margin-top:22px;font-size:46px;line-height:1;font-weight:900;letter-spacing:-.05em;color:#fff}.sb-credit-caption{position:relative;z-index:2;margin-top:12px;color:rgba(255,255,255,.82);font-weight:700}.sb-credit-glow{position:absolute;inset:auto -40px -70px auto;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.14);filter:blur(3px)}.sb-home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.sb-action-card{display:block;padding:22px;border-radius:24px;background:#fff;border:1px solid #dbe8fb;box-shadow:0 16px 46px rgba(37,99,235,.10);color:#0f172a}.sb-action-card:hover{transform:translateY(-2px);border-color:#9cc8ff}.sb-action-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:#eff6ff;margin-bottom:14px;font-size:22px}.sb-action-card strong{display:block;font-size:16px}.sb-action-card small{display:block;margin-top:6px;color:#64748b;line-height:1.5}.sb-checkfree-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:24px}.sb-guide-card{background:#fff;border:1px solid #dbe8fb;border-radius:28px;padding:24px;box-shadow:0 18px 54px rgba(37,99,235,.10)}.sb-guide-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:18px;background:#eff6ff;font-size:23px;margin-bottom:14px}.sb-guide-card h3{font-size:18px;margin:0 0 12px;color:#0f172a}.sb-guide-card ul{margin:0;padding-left:20px;color:#475569;line-height:1.75}.sb-guide-card li{margin-bottom:6px}.modal#instruction .modal-title{font-weight:900;color:#0f172a}.modal#instruction .modal-body ul{margin:0;padding-left:20px;line-height:1.75;color:#475569}.modal#instruction .btn{min-height:46px;align-items:center;justify-content:center}.btn,.sb-primary-link,.sb-nav-link{line-height:1.1;align-items:center}@media(max-width:900px){.sb-credit-grid,.sb-home-actions,.sb-checkfree-guide{grid-template-columns:1fr}.sb-dashboard-hero,.sb-checkfree-hero{flex-direction:column;align-items:flex-start}.sb-hero-action,.sb-install-btn{width:100%}.sb-credit-value{font-size:38px}}



/* =========================================================
   Typography Sync - use Quick Indexing as global standard
   ========================================================= */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

body,
button,
input,
select,
textarea,
table,
.card,
.sb-card,
.customer-card,
.page-card,
.stat-card,
.metric-card {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.012em;
}

body {
  font-size: 14px;
  line-height: 1.55;
  color: #0f172a;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.card-title,
.sb-title,
.customer-title {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #0f172a;
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-weight: 760;
}

h1, .page-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
}

h2, .section-title {
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 780;
}

h3, .card-title, .sb-title {
  font-size: 18px;
  font-weight: 740;
}

p,
.text-muted,
.small,
.form-text,
.card-subtitle,
.page-subtitle,
.sb-subtitle {
  color: #64748b;
  letter-spacing: -0.008em;
}

label,
.form-label,
.control-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: #334155;
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -0.01em;
}

input,
select,
textarea,
.form-control,
.custom-select {
  min-height: 44px;
  font-size: 14px !important;
  font-weight: 520;
  color: #0f172a !important;
  border-radius: 14px !important;
  line-height: 1.35 !important;
}

textarea,
textarea.form-control {
  min-height: 120px;
  line-height: 1.55 !important;
}

button,
.btn,
.button,
a.btn,
input[type="submit"] {
  min-height: 42px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: -0.012em;
  line-height: 1 !important;
  border-radius: 14px !important;
}

.dropdown-menu,
.dropdown-item {
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.012em;
}

.table,
table {
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

.table thead th,
table thead th {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
}

.table tbody td,
table tbody td {
  color: #1e293b;
  font-weight: 520;
  vertical-align: middle !important;
}

.badge,
.status-badge,
.label,
.tag {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: -0.008em;
}

.nav-link,
.customer-nav a,
.app-nav a,
.sidebar a,
.navbar a {
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -0.012em;
}

.stat-label,
.metric-label,
.kpi-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 720;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.stat-value,
.metric-value,
.kpi-value,
.used-links-value,
.available-links-value {
  color: #0f172a;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 1;
}

.used-links-card,
.available-links-card,
.links-summary-card {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.alert,
.message,
.toast,
.notification {
  font-size: 14px;
  font-weight: 610;
  letter-spacing: -0.012em;
  line-height: 1.45;
}

.quick-indexing-page *,
.quick-indexing *,
#indexing-form * {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Normalize old Bootstrap/SB Admin typography leftovers */
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-primary,
.font-weight-bold,
.font-weight-bolder {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.font-weight-bold,
.font-weight-bolder {
  font-weight: 760 !important;
}

.small,
small {
  font-size: 12.5px !important;
  line-height: 1.45;
}

@media (max-width: 768px) {
  body { font-size: 13.5px; }
  h1, .page-title { font-size: 25px; }
  h2, .section-title { font-size: 21px; }
  button, .btn, a.btn { min-height: 40px; }
}




/* =========================================================
   Central notification block for long backend notifications
   ========================================================= */
.sb-notification-center {
  max-width: 1180px;
  margin: 0 auto 26px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(37, 99, 235, .16);
  background:
    radial-gradient(circle at 4% 0%, rgba(0, 173, 238, .14), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(255, 111, 35, .10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
}
.sb-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(226, 232, 240, .9);
}
.sb-notification-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: #1d4ed8;
  background: rgba(37, 99, 235, .09);
  border: 1px solid rgba(37, 99, 235, .12);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: -0.01em;
}
.sb-notification-kicker:before { content: "📣"; }
.sb-notification-head h2 {
  margin: 10px 0 0;
  color: #0f172a;
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -0.055em;
}
.sb-notification-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid rgba(249, 115, 22, .16);
  font-size: 13px;
  font-weight: 820;
}
.sb-notification-body {
  padding: 22px 24px 24px;
  color: #334155;
  font-size: 15px;
  line-height: 1.68;
}
.sb-notification-body #thong-bao-english,
.sb-notification-body .card {
  margin: 0 0 18px !important;
  border: 1px solid rgba(226, 232, 240, .95) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}
.sb-notification-body .card-header {
  padding: 16px 18px !important;
  border-bottom: 1px solid rgba(226, 232, 240, .85) !important;
  background: linear-gradient(135deg, #eff6ff, #fff) !important;
}
.sb-notification-body .card-header h6,
.sb-notification-body h6 {
  margin: 0 !important;
  color: #dc2626 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 860 !important;
  letter-spacing: -0.025em !important;
}
.sb-notification-body .card-body {
  padding: 18px !important;
}
.sb-notification-body p,
.sb-notification-body li {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
  font-weight: 560 !important;
  margin-bottom: 10px !important;
}
.sb-notification-body p {
  color: #0f172a !important;
  font-weight: 760 !important;
}
.sb-notification-body ul {
  margin: 10px 0 16px !important;
  padding-left: 20px !important;
}
@media (max-width: 768px) {
  .sb-notification-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .sb-notification-body,
  .sb-notification-head {
    padding-left: 18px;
    padding-right: 18px;
  }
}


.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}
.ref-kpi,.ref-card{background:#fff;border:1px solid #e5ecf6;border-radius:24px;padding:20px;box-shadow:0 12px 30px rgba(37,99,235,.08)}
.ref-kpi strong{font-size:32px;display:block;margin-top:8px}
.ref-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.ref-input{width:100%;padding:14px;border:1px solid #dbe8fb;border-radius:14px}
.ref-user{padding:10px 0;border-bottom:1px solid #eef2f7}
.sb-upgrade-card{position:static!important;margin-top:24px!important}
.sb-sidebar{overflow-y:auto}
.sb-upgrade-title{display:flex;align-items:center;gap:10px}
.sb-upgrade-title strong{display:inline!important}
@media(max-width:900px){.ref-grid,.ref-grid-2{grid-template-columns:1fr}}


/* =========================================================
   HARD LAYOUT FIX - keep all content inside sb-main
   ========================================================= */
html, body {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.sinbyte-app,
.sb-shell,
.sb-main,
.sb-content {
  box-sizing: border-box !important;
}

.sb-shell {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 292px minmax(0, 1fr) !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

.sb-sidebar {
  width: 292px !important;
  max-width: 292px !important;
  min-width: 292px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.sb-main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: calc(100vw - 292px) !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.sb-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.sb-content > *,
.sb-main > *,
.container-fluid,
.report-page,
.quick-page,
.payment-page,
.referral-page {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.sb-upgrade-card {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin-top: 24px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.sb-upgrade-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.sb-upgrade-title span {
  flex: 0 0 auto !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.sb-upgrade-title strong {
  display: inline !important;
  margin: 0 !important;
  min-width: 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.sb-notification-head,
.sb-notification-kicker,
.sb-notification-badge {
  display: none !important;
}

.sb-user-menu,
.sb-action-menu,
.sb-dropdown,
.sb-dropdown a,
.sb-user-menu a {
  pointer-events: auto !important;
}

.sb-dropdown {
  z-index: 99999 !important;
}

.report-grid,
.report-kpi-grid,
.ref-grid,
.ref-grid-2,
.quick-layout,
.pricing-grid {
  min-width: 0 !important;
}

.report-table-wrap,
.history-table-wrap,
.table-responsive {
  max-width: 100% !important;
  overflow-x: auto !important;
}

@media (max-width: 1024px) {
  .sb-shell {
    display: block !important;
  }

  .sb-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    transform: translateX(-104%) !important;
    transition: transform .2s ease !important;
    z-index: 100000 !important;
  }

  .sb-sidebar.is-open {
    transform: translateX(0) !important;
  }

  .sb-main {
    max-width: 100vw !important;
    width: 100% !important;
  }
}


/* =========================================================
   BASE DOM FIX - strict shell/content structure
   ========================================================= */
.sb-shell {
  display: grid !important;
  grid-template-columns: 292px minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  align-items: start !important;
}
.sb-sidebar {
  grid-column: 1 !important;
  width: 292px !important;
  min-width: 292px !important;
  max-width: 292px !important;
  height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.sb-main {
  grid-column: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: calc(100vw - 292px) !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.sb-content {
  margin-top: 30px;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.sb-content > .sb-notification-center,
.sb-content > .sb-dashboard,
.sb-content > .quick-page,
.sb-content > .payment-page,
.sb-content > .report-page,
.sb-content > .referral-page,
.sb-content > .container-fluid,
.sb-content > section {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.sb-notification-head,
.sb-notification-kicker,
.sb-notification-badge {
  display: none !important;
}
.sb-notification-center {
  width: 100% !important;
  margin: 0 0 26px !important;
}
.sb-notification-body {
  padding: 22px 24px 24px !important;
}
.sb-upgrade-card {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin-top: 24px !important;
  box-sizing: border-box !important;
}
.sb-upgrade-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}
.sb-upgrade-title strong {
  display: inline !important;
  margin: 0 !important;
}
.sb-user-details {
  position: relative !important;
  display: block !important;
}
.sb-user-details summary {
  list-style: none !important;
}
.sb-user-details summary::-webkit-details-marker {
  display: none !important;
}
.sb-user-details .sb-dropdown {
  display: none;
}
.sb-user-details[open] .sb-dropdown {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 99999 !important;
}
.sb-user-details .sb-dropdown a {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 100000 !important;
}
.report-table-wrap,
.history-table-wrap,
.table-responsive {
  max-width: 100% !important;
  overflow-x: auto !important;
}
@media (max-width: 1024px) {
  .sb-shell {
    display: block !important;
  }
  .sb-sidebar {
    position: fixed !important;
    transform: translateX(-104%) !important;
    z-index: 100000 !important;
  }
  .sb-sidebar.is-open {
    transform: translateX(0) !important;
  }
  .sb-main {
    max-width: 100vw !important;
  }
}

.sb-notice{
  width:100%;
  margin:0 0 26px;
  padding:22px;
  border-radius:28px;
  border:1px solid rgba(37,99,235,.16);
  background:
    radial-gradient(circle at 0% 0%, rgba(0,173,238,.13), transparent 34%),
    linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:0 22px 60px rgba(15,23,42,.08);
}

.sb-notice__header{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px;
}

.sb-notice__icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid rgba(37,99,235,.16);
  font-size:22px;
}

.sb-notice__header h3{
  margin:0;
  color:#0f172a;
  font-size:22px;
  font-weight:850;
  letter-spacing:-.04em;
}

.sb-notice__header p{
  margin:5px 0 0;
  color:#64748b;
  font-size:14px;
  line-height:1.55;
}

.sb-notice__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.sb-notice-card{
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 12px 30px rgba(15,23,42,.045);
}

.sb-notice-card__title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#0f172a;
  font-size:16px;
  font-weight:820;
}

.sb-notice-card__title span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

.sb-notice-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.sb-notice-list li{
  position:relative;
  padding-left:26px;
  color:#334155;
  font-size:14px;
  line-height:1.62;
  font-weight:560;
}

.sb-notice-list li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#2563eb;
  background:#eff6ff;
  font-size:11px;
  font-weight:900;
}

.sb-policy-alert{
  margin-top:14px;
  padding:13px 14px;
  border-radius:16px;
  color:#92400e;
  background:#fff7ed;
  border:1px solid rgba(249,115,22,.18);
  font-size:14px;
  line-height:1.58;
}

@media(max-width:900px){
  .sb-notice__grid{
    grid-template-columns:1fr;
  }
}

.sb-free-tool-banner{
    display:flex;
    align-items:center;
    gap:18px;

    padding:18px 22px;

    border-radius:24px;

    background:
        radial-gradient(circle at top left,
        rgba(0,173,238,.14),
        transparent 35%),
        linear-gradient(
        180deg,
        #ffffff,
        #f8fbff);

    border:1px solid rgba(37,99,235,.12);

    box-shadow:
        0 14px 40px rgba(15,23,42,.06);
}

.sb-free-tool-banner__icon{
    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:#eff6ff;
    color:#2563eb;

    font-size:24px;
    flex-shrink:0;
}

.sb-free-tool-banner__content{
    flex:1;
    min-width:0;
}

.sb-free-tool-banner__title{
    color:#0f172a;
    font-size:18px;
    font-weight:800;
    line-height:1.2;
}

.sb-free-tool-banner__desc{
    margin-top:4px;

    color:#64748b;
    font-size:14px;
    line-height:1.55;
}

.sb-free-tool-banner__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:44px;
    padding:0 18px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #00adee);

    color:#fff;
    text-decoration:none;
    font-weight:700;

    box-shadow:
        0 10px 25px rgba(37,99,235,.22);

    transition:.2s ease;
}

.sb-free-tool-banner__button:hover{
    transform:translateY(-1px);
    color:#fff;
}

@media(max-width:768px){
    .sb-free-tool-banner{
        flex-direction:column;
        align-items:flex-start;
    }

    .sb-free-tool-banner__button{
        width:100%;
    }
}


/* =========================================================
   Deep cleanup final: sidebar flow, auth, referral, empty table
   ========================================================= */
@media (min-width:1025px){
  .sb-mobile-menu{display:none!important}
}
.sb-sidebar{
  position:relative!important;
  top:auto!important;
  height:auto!important;
  min-height:100vh!important;
  overflow:visible!important;
  align-self:start!important;
}
.sb-upgrade-card{
  position:static!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  margin-top:24px!important;
}
.sb-upgrade-title{display:flex!important;align-items:center!important;gap:10px!important;white-space:nowrap!important}
.sb-upgrade-title strong{display:inline!important;margin:0!important}
@media(max-width:1024px){
  .sb-sidebar{position:fixed!important;height:100vh!important;overflow-y:auto!important}
}
.auth-card{display:flex;align-items:center;justify-content:center}
.auth-form-card{width:100%;max-width:460px;margin:auto;padding:8px}
.auth-form-head{text-align:left;margin-bottom:22px}
.auth-form-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:#eff6ff;border:1px solid rgba(37,99,235,.16);font-size:24px;margin-bottom:14px}
.auth-form-head h1{margin:0;color:#0f172a;font-size:30px;font-weight:860;letter-spacing:-.05em}
.auth-form-head p{margin:8px 0 0;color:#64748b;font-size:14.5px;line-height:1.6}
.auth-form{display:grid;gap:16px}
.auth-field label{display:block;margin-bottom:8px;color:#334155;font-size:13px;font-weight:780}
.auth-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-check{display:flex;align-items:center;gap:10px;color:#475569;font-size:13.5px;font-weight:650}
.auth-check input{width:17px;height:17px;accent-color:#2563eb}
.auth-submit{width:100%;min-height:48px;border:0;border-radius:16px;background:linear-gradient(135deg,#2563eb,#00adee);color:#fff!important;font-size:15px;font-weight:850;box-shadow:0 14px 28px rgba(37,99,235,.22);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font-size:13.5px;font-weight:720}
.auth-links a{color:#2563eb}
.auth-error{padding:12px 14px;border-radius:16px;background:#fff1f2;border:1px solid #fecdd3;color:#be123c;font-size:13.5px;font-weight:650;line-height:1.5}
@media(max-width:720px){.auth-field-grid{grid-template-columns:1fr}.auth-shell{padding:18px}.auth-brand-panel{display:none}}
.sb-empty-state{display:grid;justify-items:center;gap:10px;padding:34px 22px;text-align:center;border-radius:22px;background:linear-gradient(180deg,#fff,#f8fbff);border:1px dashed rgba(37,99,235,.22)}
.sb-empty-state.compact{padding:22px 16px}
.sb-empty-state.table-empty{margin:10px;background:linear-gradient(180deg,#fff,#f8fbff)}
.sb-empty-table-row td{padding:0!important;background:#fff!important}
.sb-empty-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:999px;background:#eff6ff;border:1px solid rgba(37,99,235,.16);font-size:24px}
.sb-empty-state h3{margin:0;color:#0f172a;font-size:18px;font-weight:850;letter-spacing:-.035em}
.sb-empty-state p{margin:0;max-width:520px;color:#64748b;font-size:14px;line-height:1.6;font-weight:560}
.sb-status{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:850;white-space:nowrap}
.sb-status-ok{color:#166534;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.18)}
.sb-status-warn{color:#92400e;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.18)}
.referral-page{padding:4px 0 38px}
.ref-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:22px;padding:28px;margin-bottom:22px;border-radius:28px;border:1px solid rgba(37,99,235,.16);background:radial-gradient(circle at 8% 0%,rgba(0,173,238,.16),transparent 35%),linear-gradient(135deg,#fff,#f8fbff);box-shadow:0 24px 70px rgba(15,23,42,.09)}
.ref-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;color:#1d4ed8;background:rgba(37,99,235,.09);border:1px solid rgba(37,99,235,.12);font-size:13px;font-weight:820}
.ref-hero h1{margin:15px 0 10px;color:#0f172a;font-size:clamp(30px,4vw,46px);line-height:1.03;letter-spacing:-.055em;font-weight:860}
.ref-hero p{margin:0;color:#64748b;font-size:15.5px;line-height:1.65;font-weight:540}
.ref-link-card,.ref-card,.ref-kpi{background:#fff;border:1px solid rgba(226,232,240,.95);border-radius:24px;box-shadow:0 14px 34px rgba(15,23,42,.055)}
.ref-link-card{padding:18px}.ref-link-card label{display:block;color:#64748b;font-size:12px;font-weight:820;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
.ref-copy-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.ref-copy-row input{min-height:46px;padding:0 14px;border:1px solid #dbe8fb;border-radius:16px;background:#f8fafc;font-weight:650}.ref-copy-row button{border:0;border-radius:15px;background:linear-gradient(135deg,#2563eb,#00adee);color:#fff;font-weight:850;padding:0 16px}
.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.ref-kpi{padding:20px}.ref-kpi span{color:#64748b;font-size:13px;font-weight:760}.ref-kpi strong{display:block;margin-top:8px;color:#0f172a;font-size:32px;font-weight:860;letter-spacing:-.055em}
.ref-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.ref-card{padding:20px}.ref-card h3{margin:0 0 14px;color:#0f172a;font-size:19px;font-weight:850;letter-spacing:-.04em}
.ref-policy-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ref-policy-list div{padding:16px;border-radius:18px;background:#f8fbff;border:1px solid #e2e8f0}.ref-policy-list span,.ref-policy-list small{display:block;color:#64748b;font-size:13px}.ref-policy-list strong{display:block;margin:6px 0;color:#2563eb;font-size:30px;font-weight:900}
.ref-user-list{display:grid;gap:10px}.ref-user{display:flex;align-items:center;gap:11px;padding:12px;border-radius:18px;background:#f8fafc;border:1px solid #e2e8f0}.ref-user-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:14px;background:#eff6ff;color:#2563eb;font-weight:900}.ref-user strong{display:block}.ref-user small{display:block;color:#64748b;margin-top:2px}
.ref-table-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.ref-table-head h3{margin:0}.ref-table-head p{margin:5px 0 0;color:#64748b;font-size:13.5px}
.ref-table-wrap{overflow-x:auto;border:1px solid #e2e8f0;border-radius:20px}.ref-table{width:100%;min-width:880px;border-collapse:separate;border-spacing:0}.ref-table th{padding:14px;color:#475569;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:11.5px;font-weight:850;letter-spacing:.035em;text-transform:uppercase;text-align:left}.ref-table td{padding:15px 14px;border-bottom:1px solid rgba(226,232,240,.72);font-size:13.5px;color:#1e293b}.ref-table tr:last-child td{border-bottom:0}.ref-table tr:hover td{background:#f8fbff}
@media(max-width:1100px){.ref-hero,.ref-grid-2{grid-template-columns:1fr}.ref-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.ref-grid{grid-template-columns:1fr}.ref-copy-row{grid-template-columns:1fr}.ref-policy-list{grid-template-columns:1fr}}


/* =========================================================
   Modal system fix - unified Sinbyte modal style
   Fix: close button aligned, header layout, body/footer spacing
   ========================================================= */

.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1050 !important;
  display: none;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: rgba(15, 23, 42, .52) !important;
  backdrop-filter: blur(8px);
  padding: 24px 14px;
}

.modal.show,
.modal[style*="display: block"] {
  display: block !important;
}

.modal-dialog {
  position: relative !important;
  width: auto !important;
  max-width: 560px;
  margin: 6vh auto !important;
  pointer-events: none;
}

.modal-dialog.modal-lg { max-width: 560px; }
.modal-dialog.modal-xl { max-width: 820px; }

.modal-dialog-centered {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100vh - 48px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.modal-content {
  position: relative !important;
  width: 100% !important;
  pointer-events: auto;
  overflow: hidden !important;
  border: 1px solid rgba(226, 232, 240, .95) !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .26) !important;
}

.modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 68px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(226, 232, 240, .92) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 173, 238, .10), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fbff) !important;
}

.modal-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
}

.modal-header .close,
button.close {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(203, 213, 225, .85) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #64748b !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06) !important;
  cursor: pointer !important;
  appearance: none !important;
}

.modal-header .close:hover,
button.close:hover {
  color: #dc2626 !important;
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  transform: none !important;
}

.modal-header .close span,
button.close span {
  display: block !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}

.modal-body {
  padding: 22px !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  background: #fff !important;
}

.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 22px !important;
  border-top: 1px solid rgba(226, 232, 240, .92) !important;
  background: #fbfdff !important;
}

.modal-footer .btn,
.modal-footer button,
.modal-footer a {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Right side modal/drawer compatibility */
.modal.right .modal-dialog {
  margin: 0 0 0 auto !important;
  min-height: 100vh !important;
  max-width: 520px !important;
}

.modal.right .modal-content {
  min-height: 100vh !important;
  border-radius: 28px 0 0 28px !important;
}

/* Fix old Bootstrap utility conflicts inside modals */
.modal .card,
.modal .card-body {
  box-shadow: none !important;
}

.modal .row {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.modal .row > [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Payment modal specific */
.payment-modal .modal-content,
.quick-modal .modal-content {
  border-radius: 26px !important;
}

.payment-modal .modal-header,
.quick-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Mobile */
@media (max-width: 640px) {
  .modal {
    padding: 12px !important;
  }

  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: none !important;
    width: 100% !important;
    margin: 3vh auto !important;
  }

  .modal-dialog-centered {
    min-height: calc(100vh - 24px) !important;
  }

  .modal-header {
    padding: 16px 16px !important;
    min-height: 62px !important;
  }

  .modal-title {
    font-size: 17px !important;
  }

  .modal-body {
    padding: 18px 16px !important;
  }

  .modal-footer {
    padding: 14px 16px !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .modal-footer .btn,
  .modal-footer button,
  .modal-footer a {
    width: 100% !important;
  }
}

.sb-brand{
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    text-decoration:none;
    padding:0;
    margin:0;
}

.sb-brand img{
    display:block;
    width:auto;
    height:60px;
    max-width:245px;
    object-fit:contain;
}

.sb-brand span{
    display:none;
}

@media (max-width:1024px){
    .sb-brand img{
        height:38px;
        max-width:180px;
    }
}