/* === ROOT VARIABLES === */
:root{
    --bg:#f4f6fb;
    --card:#ffffff;
    --border:#e7ebf2;
    --text:#1f2937;
    --muted:#6b7280;
    --primary:#2f6fed;
    --primary-dark:#1d4ed8;
    --sidebar:#1a2233;
    --sidebar-2:#151c2b;
    --shadow:0 12px 26px rgba(15,23,42,0.08);
    --shadow-soft:0 8px 18px rgba(15,23,42,0.06);
}

*{box-sizing:border-box;}
body.dash-page{
    margin:0;
    font-family:"Manrope","Inter",Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
}
a{color:inherit;text-decoration:none;}

/* === LAYOUT CONTAINERS === */
.dash-layout{
    display:grid;
    grid-template-columns:196px 1fr;
    min-height:100vh;
}

/* Sidebar */
/* === SIDEBAR COMPONENTS === */
.dash-sidebar{
    background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
    color:#e5e7eb;
    padding:18px 12px 14px;
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
}
.dash-sidebar > *:first-child { /* brand */
    flex-shrink: 0;
}
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) rgba(255,255,255,0.05);
}
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.1);
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
}
.sidebar-footer, .support-tile {
    flex-shrink: 0;
    margin-top: auto;
}
.sidebar-brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:6px 6px 12px;
}
.sidebar-brand .logo{height:36px;}

.sidebar-section{padding:0 10px;}
.getting-started{
    display:block;
    color:inherit;
    text-decoration:none;
    background:#111c32;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:12px 14px;
    transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.getting-started:hover{
    background:#16233d;
    border-color:rgba(127,179,255,0.28);
    transform:translateY(-1px);
}
.gs-top{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:13px;
}
.progress-bar{
    margin-top:10px;
    height:6px;
    background:rgba(255,255,255,0.08);
    border-radius:999px;
    overflow:hidden;
}
.progress-fill{
    width:62%;
    height:100%;
    background:#6ea8ff;
    border-radius:999px;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:0 4px;
}
.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    color:#cbd5f1;
    padding:10px 12px;
    border-radius:12px;
    font-weight:600;
    font-size:14px;
}
.nav-item.btn{
    background:none;
    border:none;
    width:100%;
    text-align:left;
    cursor:pointer;
}
.nav-item i{width:18px;text-align:center;}
.nav-item.active{
    background:#3b82f6;
    color:#fff;
    box-shadow:0 10px 20px rgba(59,130,246,0.25);
}
.nav-item:hover{background:rgba(255,255,255,0.06);}

.nav-group{display:flex;flex-direction:column;gap:6px;}
.nav-sub{margin-left:32px;display:none;flex-direction:column;gap:6px;}
.nav-group.open .nav-sub{display:flex;}
.nav-sub-item{
    color:#cbd5f1;
    font-weight:600;
    font-size:13px;
    padding:8px 10px;
    border-radius:10px;
    display:block;
}
.nav-sub-item:hover{background:rgba(255,255,255,0.06);}
.nav-sub-item.active{
    color:#fff;
    background:#3b82f6;
    box-shadow:0 10px 20px rgba(59,130,246,0.25);
}

.sidebar-footer{
    margin-top:auto;
    padding:0 10px;
    font-size:13px;
}
.support-link{color:#aeb7d4;}
.support-tile{
    margin-top:12px;
    background:#121c30;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:12px;
    font-size:12px;
    color:#cbd5f1;
}
.support-title{margin-bottom:10px;line-height:1.4;font-weight:600;}
.support-action{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#7fb3ff;
    font-weight:600;
}

/* Main */
.dash-main{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.dash-topbar{
    position:sticky;
    top:0;
    z-index:20;
    background:#fff;
    border-bottom:1px solid var(--border);
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:18px;
    align-items:center;
    padding:11px 22px 11px 18px;
    box-shadow:none;
}
.search-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px 13px;
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    max-width:520px;
    box-shadow:none;
}
.search-box input{
    border:none;
    outline:none;
    width:100%;
    font-size:14px;
    background:transparent;
}
.search-icon{color:#94a3b8;font-size:14px;}

.topbar-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:nowrap;
}
.trial{
    background:transparent;
    border:none;
    padding:0;
    border-radius:0;
    font-size:13px;
    color:#4b5563;
    font-weight:500;
}
.trial a{color:#2563eb;}
.pill{
    border:none;
    background:#e7efff;
    color:#1e3a8a;
    border-radius:999px;
    padding:6px 10px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
}
.pill.ghost{
    background:#fff;
    border:1px solid #dbe3f0;
}
.top-icon, .avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--border);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#64748b;
    box-shadow:none;
    position:relative;
}
.notif-link{position:relative;}
.notif-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 10px rgba(239,68,68,.35);
}
.icon-btn{
    border:none;
    background:#fff;
    cursor:pointer;
}
.icon-btn,
.pill,
.top-icon,
.drawer-close,
.org-close,
.upgrade-close{
    text-decoration:none;
    color:inherit;
}
.drawer-close,
.org-close,
.upgrade-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.icon-btn.ghost{
    background:#f3f4f6;
    border:1px solid var(--border);
    width:28px;
    height:28px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.avatar{
    font-weight:700;
    background:#eef2ff;
    color:#1e3a8a;
}

/* Topbar tooltips */
.topbar-actions [data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:-36px;
    left:50%;
    transform:translateX(-50%);
    background:#0b1220;
    color:#fff;
    font-size:12px;
    padding:6px 10px;
    border-radius:8px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    box-shadow:0 10px 18px rgba(0,0,0,0.18);
    z-index:5;
}
.topbar-actions [data-tooltip]:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(2px);
}

/* Content */
.dash-content{
    max-width:1180px;
    padding:18px 20px 60px;
    margin:0 auto;
    width:100%;
}
body.dash-page.dashboard-complete .dash-content{
    max-width:1120px;
}
body.getting-started-page .dash-content{
    max-width:760px;
    padding-top:38px;
}
.hero-card{
    background:transparent;
    border:none;
    border-radius:0;
    padding:30px 0 8px;
    text-align:center;
    position:relative;
    overflow:visible;
}
.hero-card.confetti-bg{
    padding-top:34px;
}
.hero-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    position:relative;
    z-index:1;
}
.hero-copy{
    flex:1;
    min-width:0;
}
.hero-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    min-width:220px;
    padding-top:10px;
}
.recent-updates{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#3b82f6;
    background:#fff;
    border:1px solid #dbe4f4;
    border-radius:8px;
    padding:7px 10px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}
.recent-updates i:last-child{
    font-size:11px;
}
.updates-popover{
    position:fixed;
    inset:0;
    display:none;
    z-index:58;
    pointer-events:none;
}
.updates-popover.is-open{
    display:block;
    pointer-events:auto;
}
.updates-popover__backdrop{
    position:absolute;
    inset:0;
    background:transparent;
}
.updates-popover__card{
    position:absolute;
    top:144px;
    right:24px;
    width:300px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(15,23,42,0.18);
    border:1px solid #e5e7eb;
    overflow:hidden;
}
.updates-popover__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px 10px;
    font-weight:700;
    color:#1f2937;
    border-bottom:1px solid #f1f5f9;
}
.updates-popover__close{
    color:#6b7280;
    text-decoration:none;
    font-size:16px;
}
.updates-popover__body{
    padding:12px 14px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.updates-popover__chip,
.updates-popover__item{
    display:block;
    border-radius:10px;
    text-decoration:none;
}
.updates-popover__chip{
    align-self:flex-start;
    padding:9px 14px;
    background:#3b82f6;
    color:#fff;
    font-weight:700;
    box-shadow:0 8px 18px rgba(59,130,246,0.22);
}
.updates-popover__item{
    padding:12px 12px;
    border:1px solid #e5e7eb;
    background:#f8fafc;
}
.updates-popover__item strong{
    display:block;
    font-size:14px;
    color:#111827;
    margin-bottom:4px;
}
.updates-popover__item span{
    display:block;
    color:#64748b;
    font-size:12px;
    line-height:1.45;
}
.recent-update-float{
    position:fixed;
    right:14px;
    bottom:18px;
    width:360px;
    max-width:calc(100vw - 28px);
    background:#43496d;
    color:#fff;
    border-radius:0;
    box-shadow:0 14px 34px rgba(15,23,42,0.28);
    border-left:4px solid #fde047;
    z-index:60;
    padding:18px 16px 16px;
}
.recent-update-float__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.recent-update-float__head strong{
    color:#fbbf24;
    font-size:16px;
    line-height:1.35;
}
.recent-update-float__head a,
.recent-update-float__link{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    opacity:.92;
}
.recent-update-float p{
    margin:0 0 16px;
    color:#edf2ff;
    font-size:14px;
    line-height:1.55;
}
.recent-update-float__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.recent-update-float__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    background:#2dd4bf;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    border-radius:4px;
    font-size:13px;
}
.help-line{
    text-align:right;
    color:#6b7280;
    font-size:13px;
    line-height:1.35;
}
.help-line strong{
    color:#374151;
    font-size:14px;
}
.hero-copy .hero-sub,
.hero-copy .hero-contact{
    max-width:100%;
}
.hero-confetti{
    position:absolute;
    inset:0;
    height:120px;
    pointer-events:none;
    background:
      radial-gradient(circle at 0% 30%, rgba(250, 204, 21, .95) 0 2px, transparent 3px),
      radial-gradient(circle at 8% 12%, rgba(59,130,246,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 18% 26%, rgba(236,72,153,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 24% 5%, rgba(34,197,94,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 36% 18%, rgba(59,130,246,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 60% 6%, rgba(250,204,21,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 76% 18%, rgba(14,165,233,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 92% 28%, rgba(20,184,166,.95) 0 2px, transparent 3px);
    opacity:.95;
}
.hero-image{
    display:none;
}
.hero-card h1{
    margin:0 0 8px;
    font-size:26px;
    font-weight:700;
}
.hero-sub{
    margin:0 0 12px;
    color:#6b7280;
    font-size:16px;
}
.hero-contact{
    color:#6b7280;
    font-size:14px;
    margin-top:20px;
}
.confetti-bg{
    background:transparent;
}

.webinar-bar{
    margin:16px auto 22px;
    background:#fff4e8;
    border:1px solid #f2d4b0;
    border-radius:12px;
    padding:11px 16px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    color:#9a3412;
    font-weight:600;
}
.webinar-bar--getting-started{
    position:relative;
    background:linear-gradient(180deg,#eaf2ff 0%,#dfebff 100%);
    border:1px solid #d8e4fb;
    border-radius:14px;
    min-height:118px;
    padding:16px 18px;
    display:grid;
    grid-template-columns:132px minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    color:#1f2a44;
    font-weight:600;
    box-shadow:0 10px 18px rgba(47,115,232,0.08);
}
.webinar-bar--getting-started .webinar-close{
    display:none;
}
.webinar-brand{
    width:112px;
    height:76px;
    border-radius:10px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    box-shadow:0 8px 24px rgba(61,93,160,0.08);
    border:1px solid rgba(130,154,209,0.18);
}
.webinar-brand img{
    width:86px;
    max-width:86px;
    display:block;
}
.webinar-copy{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.webinar-title{
    font-size:20px;
    font-weight:600;
    color:#1f2a44;
}
.webinar-meta{
    display:flex;
    align-items:center;
    gap:22px;
    color:#2f405f;
    font-size:14px;
}
.webinar-meta span{
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.webinar-cta{
    margin-left:8px;
    min-width:116px;
    padding:11px 18px;
    border-radius:8px;
    background:#2f73e8;
    box-shadow:0 8px 18px rgba(47,115,232,0.18);
}
.webinar-icon{
    width:34px;height:34px;border-radius:10px;
    background:#ffe4cc;color:#ea580c;
    display:inline-flex;align-items:center;justify-content:center;
}
.calendar{color:#7c2d12;font-weight:500;}
.secondary-btn{
    margin-left:auto;
    background:var(--primary);
    color:#fff;
    border:none;
    padding:8px 14px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}
.secondary-btn.small{padding:6px 12px;border-radius:8px;}

.progress-card{
    background:#fff;
    border:1px solid #dfe5f0;
    border-radius:16px;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}
.progress-head{
    background:linear-gradient(90deg,#2f6fed,#3b82f6);
    color:#fff;
    padding:16px 22px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
.progress-head .label{font-weight:700;font-size:17px;}
.progress-head .sub{font-size:13px;color:#dbeafe;margin-top:5px;}
.setup-complete-note{
    margin:12px 20px 0;
    padding:10px 12px;
    border-radius:12px;
    background:#eef5ff;
    color:#2563eb;
    border:1px solid #c7dcff;
    font-size:13px;
    font-weight:600;
}
.progress-indicator{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}
.progress-indicator .bar{
    width:132px;height:6px;background:rgba(255,255,255,0.24);
    border-radius:999px;overflow:hidden;
}
.progress-indicator .fill{
    height:100%;
    background:#fff;
    border-radius:999px;
}
.fill-58{width:58%;}
.steps{display:flex;flex-direction:column;}
.step{
    display:grid;
    grid-template-columns:32px minmax(0,1fr) auto auto auto;
    align-items:center;
    gap:10px;
    padding:20px 22px;
    border-top:1px solid #eef2f7;
    font-weight:600;
    color:#1f2937;
    cursor:pointer;
}
.step .step-text{
    min-width:0;
    font-size:15px;
    color:#374151;
}
.step .check{
    width:22px;height:22px;border-radius:50%;
    background:#22c55e;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:11px;
}
.step .check.hollow{
    background:#e5e7eb;color:#9ca3af;
}
.step .arrow{
    color:#94a3b8;
    font-size:18px;
    justify-self:end;
    line-height:1;
}
.step .status{
    color:#5daea3;
    font-weight:700;
    font-size:12px;
    justify-self:end;
}
.step .status-link{
    color:#5daea3;
    text-decoration:none;
}
.step .status-link:hover{
    text-decoration:underline;
}
.step .pill{justify-self:end;}
.step-inline-link{
    justify-self:end;
    color:#3b82f6;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.step-inline-link:hover{
    text-decoration:underline;
}

.step-sublist{
    margin:0 0 12px 70px;
    padding:2px 0 12px 16px;
    border-left:1px solid #e5e7eb;
}
.step-subitem{
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 0;
    color:#4b5563;
    font-size:14px;
}
.subcheck{
    width:14px;height:14px;
    border-radius:50%;
    background:#dfe3ea;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:8px;
    flex:0 0 auto;
}
.subcheck.complete{
    background:#22c55e;
}
.subtext{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.sub-link{
    color:inherit;
    text-decoration:none;
}
.sub-link:hover{
    color:#2563eb;
}
.subnote{color:#6b7280;font-size:12px;}

.features-grid{
    margin:18px 0 8px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:8px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px 14px 20px;
    box-shadow:var(--shadow-soft);
}
.section-eyebrow{
    margin:18px 0 10px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-weight:700;
    color:#374151;
}
.feature-card{
    background:transparent;
    border:none;
    border-radius:10px;
    padding:10px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    box-shadow:none;
    font-weight:600;
    text-align:center;
    color:inherit;
}
.feature-icon{
    width:44px;height:44px;border-radius:14px;
    background:#eef2f7;color:#2563eb;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid #e5e7eb;
}
.feature-title{font-size:13px;color:#1f2937;}

.section-title{font-size:18px;margin:24px 0 12px;font-weight:700;color:#111827;}
.section-title.center{text-align:left;}

.help-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
}
.card{
    background:transparent;
    border:none;
    border-radius:0;
    padding:18px 22px;
    box-shadow:none;
}
.card.wide{border-right:1px solid var(--border);}
.card-subtitle{font-size:12px;color:#6b7280;font-weight:700;text-transform:uppercase;margin-bottom:10px;}
.video-card{
    background:#f8fafc;border:1px dashed #e2e8f0;border-radius:16px;
    min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;color:#64748b;
}
.play-btn{
    width:46px;height:46px;border-radius:50%;
    background:#3b82f6;color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 22px rgba(59,130,246,0.35);
}
.play-btn.big{width:56px;height:56px;font-size:18px;}
.support-list{display:flex;flex-direction:column;gap:12px;}
.support-item{
    display:flex;align-items:center;gap:10px;
    background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;
    padding:12px;font-weight:600;
}
.support-icon{
    width:28px;height:28px;border-radius:8px;background:#e2e8f0;color:#475569;
    display:flex;align-items:center;justify-content:center;
}

.info-strip{
    margin:20px 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
}
.info-item{
    background:transparent;border:none;border-radius:0;padding:14px 16px;
    display:flex;gap:10px;align-items:flex-start;color:#475569;
    font-size:13px;
}
.info-item + .info-item{border-left:1px solid var(--border);}
.info-icon{
    width:32px;height:32px;border-radius:50%;
    background:#eef2ff;color:#1d4ed8;
    display:flex;align-items:center;justify-content:center;
}
.info-item a{color:#2563eb;font-weight:600;}

.footer-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:20px;
    align-items:start;
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    box-shadow:none;
}
.promo-card{
    background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 18px 16px;
    box-shadow:var(--shadow-soft);
    display:flex;
    flex-direction:column;
    align-items:center;
}
.promo-img{
    width:78%;
    max-width:210px;
    border-radius:12px;
    margin:4px auto 12px;
    display:block;
}
.phone-card{
    color:#1f2937;
    font-size:15px;
    line-height:1.45;
    text-align:center;
    margin:0 auto 14px;
    max-width:300px;
}
.store-row{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}
.store-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#111827;
    color:#fff;
    border-radius:8px;
    padding:8px 12px;
    min-width:132px;
    min-height:42px;
    text-decoration:none;
    box-shadow:0 4px 10px rgba(17,24,39,0.18);
}
.store-badge i,
.store-badge img{
    width:18px;
    height:18px;
    flex:0 0 auto;
}
.store-badge img{
    object-fit:contain;
    filter:brightness(0) invert(1);
}
.store-text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
    text-align:left;
}
.store-text small{
    font-size:9px;
    letter-spacing:.02em;
    font-weight:700;
}
.store-text strong{
    font-size:13px;
    font-weight:700;
}
.link-col{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    box-shadow:none;
}
.link-col h4{
    margin:0 0 10px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#94a3b8;
    font-weight:700;
}
.link-col ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    color:#111827;
    font-size:15px;
}

.copyright{
    margin:18px 0 0;
    text-align:center;
    color:#64748b;
    font-size:12px;
}

.dashboard-alert{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #bfdbfe;
    background:#eff6ff;
    color:#1d4ed8;
    border-radius:12px;
    padding:12px 14px;
    font-size:14px;
    font-weight:700;
    margin:0 0 16px;
    box-shadow:0 8px 18px rgba(59,130,246,0.08);
}
.dashboard-alert.success{
    background:#e8f7ea;
    border-color:#bbf7d0;
    color:#1f7a3a;
}
.dashboard-alert.soft{
    margin-top:-8px;
}
body.getting-started-page .dashboard-alert{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:6px 0 0;
    margin:4px 0 0;
}
body.getting-started-page .dashboard-alert.success.soft{
    margin-top:0;
    padding-top:0;
}
.dashboard-overview{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:16px;
    align-items:start;
}
.overview-main,
.overview-side{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
}
.bank-holiday-card{
    background:linear-gradient(180deg,#fff8f1 0%,#fff4ea 100%);
    border-color:#f0ded0;
}
.bank-holiday-card .overview-head{
    background:transparent;
    border-bottom:1px solid rgba(240,222,208,0.8);
}
.bank-holiday-card .overview-head h2{
    color:#7a4e2d;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.02em;
}
.bank-holiday-body{
    padding:12px 12px 14px;
    color:#9a6b42;
    font-size:13px;
    line-height:1.45;
}
.bank-holiday-body p{
    margin:0 0 12px;
}
.bank-holiday-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border-radius:12px;
    padding:10px 12px;
    border:1px solid rgba(240,222,208,0.7);
}
.bank-holiday-date{
    width:44px;
    min-width:44px;
    text-align:center;
    color:#f97316;
    line-height:1;
    font-weight:700;
}
.bank-holiday-date strong{
    display:block;
    font-size:18px;
}
.bank-holiday-date span{
    display:block;
    font-size:11px;
    margin-top:2px;
}
.bank-holiday-title{
    color:#374151;
    font-size:14px;
    font-weight:700;
}
.bank-holiday-sub{
    color:#6b7280;
    font-size:12px;
    margin-top:2px;
}
.overview-card{
    background:#fff;
    border:1px solid #dfe5f0;
    border-radius:14px;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}
.overview-page .emp-overview-head{
    scroll-margin-top:96px;
}
.overview-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px 10px;
    border-bottom:1px solid #eef2f7;
}
.overview-head h2{
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#1f2937;
}
.overview-filter{
    font-size:12px;
    color:#64748b;
    font-weight:600;
}
.overview-payrun .overview-panel{
    padding:18px 16px 14px;
}
.overview-payrun h3{
    margin:0 0 16px;
    font-size:18px;
    font-weight:700;
    color:#334155;
}
.overview-meta-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) auto;
    gap:16px;
    align-items:end;
}
.meta-label{
    display:block;
    color:#64748b;
    font-size:13px;
    margin-bottom:6px;
}
.overview-meta-row strong{
    display:block;
    font-size:16px;
    color:#111827;
    font-weight:700;
}
.payrun-action{
    justify-self:end;
    height:34px;
}
.overview-note{
    margin:16px 0 0;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
}
.overview-two-col{
    display:grid;
    grid-template-columns:1fr 260px;
    gap:16px;
}
.overview-amount-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    padding:18px 16px 20px;
}
.overview-mini{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}
.overview-mini-ico{
    width:40px;
    height:40px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}
.overview-mini-ico.epf{background:#f4ecff;color:#8b5cf6;}
.overview-mini-ico.esi{background:#ecfdf5;color:#059669;}
.overview-mini-ico.tds{background:#fff3e8;color:#f97316;}
.overview-mini-label{
    color:#64748b;
    font-size:13px;
    font-weight:600;
}
.overview-mini-value{
    font-size:18px;
    font-weight:700;
    color:#111827;
}
.overview-mini a,
.employee-summary-box a{
    color:#3b82f6;
    font-size:13px;
    font-weight:700;
}
.employee-summary-box{
    padding:18px 16px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:228px;
    text-align:center;
}
.employee-summary-box .summary-label{
    color:#64748b;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.employee-summary-box strong{
    font-size:54px;
    line-height:1;
    color:#15803d;
    margin:22px 0 18px;
    font-weight:400;
}
.overview-chart-card .overview-chart{
    min-height:200px;
    padding:22px 16px 24px;
    position:relative;
    background:
      linear-gradient(to top, transparent 0 95%, rgba(203,213,225,.8) 95% 96%, transparent 96% 100%);
    background-size:100% 28px;
}
.overview-chart-empty{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#64748b;
    text-align:center;
    font-size:14px;
    padding:20px;
}
.todo-empty{
    min-height:260px;
    padding:20px 14px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#475569;
}
.todo-illustration{
    width:86px;
    height:86px;
    border-radius:22px;
    background:linear-gradient(135deg,#fce7f3,#ede9fe);
    color:#6366f1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    margin-bottom:14px;
}
.todo-empty h3{
    margin:0 0 6px;
    font-size:18px;
    color:#111827;
}
.todo-empty p{
    margin:0;
    color:#64748b;
    font-size:14px;
    line-height:1.5;
}
.dashboard-complete .features-grid{
    margin-top:20px;
}

body.setup-complete .dash-content{
    padding-bottom:72px;
}

@media (max-width: 960px){
    .dash-layout{grid-template-columns:1fr;}
    .dash-sidebar{
        position:relative;
        height:auto;
        padding:14px 12px 12px;
    }
    .sidebar-scroll{
        max-height:none;
        overflow:visible;
        padding-right:0;
    }
    .dash-topbar{
        grid-template-columns:1fr;
        padding:12px 16px;
    }
    .topbar-actions{
        justify-content:flex-start;
        gap:8px;
    }
    .dash-content{
        padding:20px 16px 40px;
    }
    .progress-head{
        flex-direction:column;
        align-items:flex-start;
    }
    .help-grid,
    .info-strip{
        grid-template-columns:1fr;
    }
    .card.wide{border-right:none;border-bottom:1px solid var(--border);}
}

@media (max-width: 640px){
    .dash-topbar{
        position:relative;
        top:0;
    }
    .search-box{
        width:100%;
    }
    .trial{
        width:100%;
        font-size:12px;
    }
    .sidebar-brand .logo{height:30px;}
    .dash-content{padding:16px 12px 32px;}
}

/* Drawers */
.org-drawer{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.3);
    display:none;
    align-items:flex-start;
    justify-content:flex-end;
    padding:18px 18px 18px 0;
    z-index:50;
}
body.org-drawer--open .org-drawer{display:flex;}
.org-panel{
    width:380px;
    max-width:92vw;
    background:#fff;
    border-left:1px solid var(--border);
    box-shadow:-10px 0 24px rgba(15,23,42,0.08);
    height:100%;
    display:flex;
    flex-direction:column;
    pointer-events:auto;
}
.org-drawer__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:700;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
}
.org-head-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.org-drawer__subhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px;
    font-weight:600;
    color:#374151;
    border-bottom:1px solid var(--border);
}
.manage-link{
    color:#2563eb;
    font-weight:600;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.org-close{
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
    color:#6b7280;
}
.org-list{
    padding:12px 16px;
    overflow:auto;
    flex:1;
}
.org-card{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:12px;
    display:flex;
    gap:12px;
    align-items:center;
}
.org-icon{
    width:34px;height:34px;border-radius:10px;
    background:#eef2ff;color:#2563eb;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #e2e8f0;
}
.org-name{font-weight:700;color:#111827;}
.org-id{font-size:12px;color:#64748b;}
.org-check{color:#2563eb;font-size:18px;margin-left:auto;}

/* Right side drawers */
.side-drawer{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.28);
    display:none;
    justify-content:flex-end;
    z-index:55;
}
.side-drawer.is-open{display:flex;}
.drawer-panel{
    width:380px;
    max-width:92vw;
    height:100%;
    background:#fff;
    border-left:1px solid var(--border);
    display:flex;
    flex-direction:column;
    box-shadow:-10px 0 24px rgba(15,23,42,0.08);
}
.drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
}
.drawer-title{font-weight:700;}
.drawer-actions{display:flex;align-items:center;gap:8px;}
.drawer-close{
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:16px;
}
.drawer-body{
    padding:16px;
    overflow:auto;
}
.empty-state{
    text-align:center;
    color:#6b7280;
}
.notif-list{display:flex;flex-direction:column;gap:12px;}
.notif-section{margin-bottom:18px;}
.notif-card{
    display:flex;
    gap:12px;
    padding:14px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 18px rgba(15,23,42,0.04);
}
.notif-card-ico{
    width:38px;
    height:38px;
    border-radius:12px;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
.notif-card-body{flex:1;min-width:0;}
.notif-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.notif-card-title{font-weight:700;color:#0f172a;line-height:1.3;}
.notif-card-body p{margin:0 0 8px;color:#334155;line-height:1.45;}
.notif-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;color:#64748b;}
.notif-meta span{white-space:nowrap;}
.salary-pill{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    background:#e2e8f0;
    color:#334155;
}
.salary-pill.status-pending{background:#fef3c7;color:#92400e;}
.salary-pill.status-draft{background:#dbeafe;color:#1d4ed8;}
.salary-pill.status-held{background:#fee2e2;color:#b91c1c;}
.salary-pill.status-released,
.salary-pill.status-approved,
.salary-pill.status-paid,
.salary-pill.status-completed{background:#dcfce7;color:#166534;}
.salary-pill.status-rejected{background:#fee2e2;color:#b91c1c;}
.notif-illustration{
    width:150px;
    height:150px;
    margin:22px auto 8px;
}
.notif-illustration img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}
.notif-action{
    margin-top:16px;
    align-self:flex-start;
    font-weight:700;
    border-radius:999px;
    padding:8px 14px;
    box-shadow:0 6px 14px rgba(37,99,235,0.06);
}
.drawer-section{margin-bottom:16px;}
.drawer-section-title{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#64748b;
    font-weight:700;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.section-caret{color:#3b82f6;font-size:12px;}
.drawer-subtitle{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#9ca3af;
    font-weight:700;
    margin:14px 0 8px;
}
.app-list{display:flex;flex-direction:column;gap:10px;}
.app-row{
    display:flex;gap:10px;align-items:center;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    background:#fff;
}
.app-name{font-weight:600;}
.app-sub{font-size:12px;color:#6b7280;}
.app-arrow{margin-left:auto;color:#94a3b8;}
.app-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}
.app-grid.compact{
    grid-template-columns:repeat(3,1fr);
    gap:8px 6px;
}
.app-tile{
    border:1px solid transparent;
    border-radius:12px;
    padding:10px 6px;
    text-align:center;
    font-size:12px;
    color:#475569;
    background:transparent;
}
.app-tile.selected{
    background:#f3f4f6;
}
.app-ico{
    width:28px;height:28px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:6px;
    background:transparent;
    color:#1d4ed8;
}
.app-ico svg{
    width:24px;height:24px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.zapp-c-blue{color:#1d4ed8;}
.zapp-c-red{color:#ef4444;}
.zapp-c-green{color:#16a34a;}
.zapp-c-amber{color:#f59e0b;}
.zapp-c-indigo{color:#4f46e5;}
.zapp-c-teal{color:#0ea5a4;}
.zapp-c-rose{color:#f43f5e;}
.zapp-c-orange{color:#f97316;}
.zapp-c-gray{color:#4b5563;}
.zapp-c-sky{color:#0ea5e9;}
.zapp-c-lime{color:#65a30d;}

.profile-meta{
    display:flex;gap:12px;align-items:center;margin-bottom:12px;
}
.profile-avatar{
    width:46px;height:46px;border-radius:50%;
    background:#eef2ff;color:#4f46e5;
    display:inline-flex;align-items:center;justify-content:center;font-weight:700;
}
.profile-name{font-weight:700;}
.profile-sub{font-size:12px;color:#6b7280;}
.profile-links{
    display:flex;justify-content:space-between;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:10px 0;margin-bottom:12px;
}
.profile-link{color:#2563eb;font-weight:600;font-size:13px;}
.profile-link.danger{color:#ef4444;}
.profile-panel{
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
}
.panel-title{font-weight:700;margin-bottom:8px;}
.panel-item{display:flex;align-items:center;gap:8px;color:#475569;margin:8px 0;font-size:13px;}

/* Help fab */
.help-fab{
    position:fixed;
    right:18px;
    top:96px;
    transform:none;
    background:#f97316;
    color:#fff;
    border:none;
    width:36px;height:36px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 20px rgba(249,115,22,0.35);
    z-index:35;
    cursor:pointer;
    transition:transform .2s ease, opacity .2s ease;
    text-decoration:none;
}
.help-fab.hide{opacity:.25;transform:translateY(-50%) scale(0.9);}

body.getting-started-page .hero-card{
    text-align:center;
    padding:0 0 14px;
}
body.getting-started-page .hero-row{
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:8px;
}
body.getting-started-page .hero-copy{
    text-align:center;
    max-width:720px;
}
body.getting-started-page .hero-copy .hero-sub{
    font-size:18px;
}
body.getting-started-page .hero-copy .hero-contact{
    display:block;
    margin-top:10px;
    font-size:13px;
}
body.getting-started-page .hero-actions{
    display:none;
}
body.getting-started-page .dashboard-alert{
    justify-content:flex-start;
    padding:6px 0 0;
}
body.getting-started-page .dashboard-alert.success.soft{
    padding-top:0;
    margin-top:0;
}
body.getting-started-page .help-fab{
    top:166px;
}
body.getting-started-page .updates-popover__card{
    top:144px;
}
body.getting-started-page .progress-card{
    margin-top:10px;
}
body.getting-started-page .setup-complete-note{
    margin:12px 0 0;
    padding:10px 14px;
    border-radius:12px;
    background:#eef5ff;
    color:#2563eb;
    border:1px solid #c7dcff;
    font-size:13px;
    font-weight:600;
}
body.getting-started-page .progress-head{
    padding:14px 18px;
}
body.getting-started-page .progress-head .label{
    font-size:18px;
}
body.getting-started-page .progress-head .sub{
    font-size:14px;
}
body.getting-started-page .steps .step{
    grid-template-columns:32px minmax(0,1fr) auto auto;
    padding:22px 18px;
}
body.getting-started-page .steps .step .step-text{
    font-size:16px;
}
body.getting-started-page .steps .step .pill,
body.getting-started-page .steps .step .step-inline-link{
    display:none;
}
body.getting-started-page .steps .step .status{
    color:#5ab7aa;
    font-size:12px;
}
body.getting-started-page .steps .step .arrow{
    color:#9aa4b8;
}
body.getting-started-page .step-sublist{
    display:none;
}

body.dash-page .sidebar-section{
    padding:0 4px 0 6px;
}
body.dash-page .getting-started{
    background:linear-gradient(180deg,#24324f,#1d2942);
    border-color:rgba(255,255,255,0.08);
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
}
body.dash-page .getting-started .gs-top{
    font-size:14px;
}
body.dash-page .getting-started .gs-top i{
    color:#fbbf24;
}
body.dash-page .getting-started .progress-bar{
    height:5px;
}
body.dash-page .getting-started .progress-fill{
    background:#6ea8ff;
}
body.dash-page .nav-item.active{
    box-shadow:0 8px 18px rgba(59,130,246,0.22);
}

/* Upgrade modal */
.upgrade-modal{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.45);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:70;
    padding:24px;
}
body.modal-open{overflow:hidden;}
.upgrade-modal[aria-hidden="false"]{display:flex;}
.upgrade-card{
    width:min(760px, 92vw);
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 28px 70px rgba(15,23,42,0.2);
    overflow:hidden;
}
.upgrade-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
    border-bottom:1px solid #e5e7eb;
}
.upgrade-head h3{margin:0;font-size:18px;font-weight:600;color:#111827;}
.upgrade-close{
    border:none;
    background:transparent;
    font-size:18px;
    cursor:pointer;
    color:#2563eb;
}
.upgrade-body{padding:18px 22px 10px;}
.upgrade-illustration{
    width:70px;
    height:70px;
    margin:2px auto 8px;
    border-radius:12px;
    background:#fde7f2;
    color:#e11d48;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    box-shadow:0 6px 16px rgba(225,29,72,0.18) inset;
}
.upgrade-sub{text-align:center;color:#4b5563;}
.upgrade-trial{font-weight:700;color:#111827;margin-bottom:6px;font-size:15px;}
.upgrade-sub p{margin:0 0 14px;font-size:13px;line-height:1.5;}
.upgrade-help{
    border:1px solid #e5e7eb;
    background:#f8fafc;
    border-radius:10px;
    padding:14px 16px;
}
.upgrade-help-title{
    display:flex;align-items:center;gap:8px;
    font-weight:600;color:#111827;margin-bottom:8px;
}
.upgrade-help-title .bulb{
    width:24px;height:24px;border-radius:50%;
    background:#ffedd5;color:#f59e0b;
    display:inline-flex;align-items:center;justify-content:center;
}
.upgrade-help-sub{font-size:12px;color:#6b7280;margin-bottom:10px;}
.upgrade-help-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:12px;
    align-items:stretch;
}
.help-chips{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
}
.help-chip{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:8px 12px;
    font-weight:600;
    color:#1f2937;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    height:38px;
}
.chip-ico{
    width:22px;height:22px;border-radius:6px;
    background:#eef2ff;color:#2563eb;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;
}
.help-card{
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#fff;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:86px;
}
.help-ico{
    width:36px;height:36px;border-radius:50%;
    background:#eef2ff;color:#4f46e5;
    display:flex;align-items:center;justify-content:center;
}
.help-card-title{font-weight:700;font-size:13px;}
.help-card-link{color:#2563eb;font-weight:600;font-size:13px;}
.upgrade-webinar{
    margin-top:10px;
    font-size:12px;
    color:#475569;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.webinar-ico{
    width:18px;height:18px;border-radius:4px;
    background:#dcfce7;color:#16a34a;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:11px;
}
.upgrade-webinar-link{color:#2563eb;font-weight:600;}
.upgrade-actions{
    display:flex;
    justify-content:flex-start;
    gap:12px;
    padding:12px 20px 18px;
    border-top:1px solid #e5e7eb;
}

.dash-content .hero-card + .webinar-bar,
.dash-content .hero-card + .webinar-bar + .progress-card{
    width:100%;
}
.upgrade-primary{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:8px 14px;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}
.upgrade-secondary{
    background:#fff;
    border:1px solid #d1d5db;
    color:#374151;
    padding:8px 14px;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.zapp-sprite{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

@media (max-width: 1100px){
    .dash-layout{grid-template-columns:220px 1fr;}
    .dash-topbar{grid-template-columns:1fr;gap:10px;}
    .topbar-actions{justify-content:flex-start;}
    .help-grid{grid-template-columns:1fr;}
    .info-strip{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .dashboard-overview,
    .overview-two-col{
        grid-template-columns:1fr;
    }
    .overview-meta-row{
        grid-template-columns:1fr;
    }
    .payrun-action{
        justify-self:start;
    }
}
@media (max-width: 820px){
    .dash-layout{grid-template-columns:1fr;}
    .dash-sidebar{
        position:relative;
        height:auto;
    }
    .dash-topbar{position:relative;}
    .features-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .refer-fab{right:12px;bottom:12px;}
    .upgrade-actions{flex-direction:column;align-items:stretch;}
    .overview-amount-grid{
        grid-template-columns:1fr;
    }
    .employee-summary-box strong{
        font-size:42px;
    }
}
