:root {
  
  --bs-primary: #008aff;
  --bs-primary-rgb: 0, 138, 255;
  --bs-primary-text-emphasis: #0067c2;
  --bs-primary-bg-subtle: #d2ebff;
  --bs-primary-border-subtle: #99d3ff;

  
  --bs-body-bg: #eaeff6;
  --bs-body-color: #46516b;
  --bs-secondary-color: #7a8699;
  --bs-border-color: #dde2ec;
  --bs-heading-color: #1e2433;

  

  
  --bs-success-bg-subtle: #cbf3dc;
  --bs-success-border-subtle: #8fe0b3;
  --bs-warning-bg-subtle: #ffe8ad;
  --bs-warning-border-subtle: #ffd066;
  --bs-danger-bg-subtle: #ffd7d7;
  --bs-danger-border-subtle: #ff9f9f;
  --bs-info-bg-subtle: #c3ecfb;
  --bs-info-border-subtle: #7fd8f5;
  --bs-secondary-bg-subtle: #e2e5ee;
  --bs-secondary-border-subtle: #c3c9d6;

  
  --wp-surface: #ffffff;
  --wp-surface-alt: #f4f6fb;
  --wp-sidebar-bg: #1a2138;
  --wp-sidebar-bg-active: #232b47;
  --wp-sidebar-color: #aab2c8;
  --wp-sidebar-color-active: #ffffff;

  
  --wp-topbar-height: 4.25rem;

  
  --wp-radius-sm: .375rem;
  --wp-radius: .625rem;
  --wp-radius-lg: 1rem;
  --wp-radius-xl: 1.25rem;

  
  --wp-shadow-sm: 0 1px 3px rgba(30, 36, 51, .09);
  --wp-shadow: 0 6px 16px rgba(30, 36, 51, .09), 0 1px 3px rgba(30, 36, 51, .06);
  --wp-shadow-lg: 0 16px 36px rgba(30, 36, 51, .14);

  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bs-border-radius: var(--wp-radius);
  --bs-border-radius-lg: var(--wp-radius-lg);
  --bs-border-radius-sm: var(--wp-radius-sm);
}

body {
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--bs-heading-color);
  font-weight: 700;
  letter-spacing: -.01em;
}

a { text-decoration: none; }

.text-muted { color: var(--bs-secondary-color) !important; }


.btn { font-weight: 600; border-radius: var(--wp-radius-sm); padding: .5rem 1rem; }
.btn-lg { border-radius: var(--wp-radius); padding: .75rem 1.5rem; }
.btn-sm, .btn-group-sm .btn { padding: .125rem .4rem; }

.btn-sm { border-radius: var(--wp-radius-sm); padding: .3rem .7rem; font-size: .875rem; }
.btn-primary { box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), .28); }
.btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }


.card {
  --bs-card-bg: var(--wp-surface);
  background-color: var(--wp-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--wp-radius-lg);
  box-shadow: var(--wp-shadow-sm);
}
.card-header {
  padding: var(--bs-card-cap-padding-x);
  background: transparent;
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 700;
  color: var(--bs-heading-color);
}
.card-footer {
  padding: var(--bs-card-cap-padding-x);
  background: transparent;
  border-top: 1px solid var(--bs-border-color);
}
.card-flush { border: none; box-shadow: none; }


.modal-content { --bs-modal-bg: #ffffff; background-color: #ffffff; }
.dropdown-menu { --bs-dropdown-bg: #ffffff; background-color: #ffffff; }
.accordion-item { --bs-accordion-bg: #ffffff; background-color: #ffffff; }
.accordion-button {
  --bs-accordion-btn-bg: #ffffff;
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
  background-color: #ffffff;
}
.accordion-button:not(.collapsed) { background-color: var(--bs-primary-bg-subtle); }
.list-group-item { --bs-list-group-bg: #ffffff; background-color: #ffffff; }
.popover { --bs-popover-bg: #ffffff; background-color: #ffffff; }
.offcanvas { --bs-offcanvas-bg: #ffffff; background-color: #ffffff; }
.toast { --bs-toast-bg: #ffffff; background-color: #ffffff; }
.form-control,
.form-select,
.input-group-text {
  background-color: #ffffff;
  border-color: var(--bs-border-color);
}
.form-control:focus,
.form-select:focus {
  background-color: #ffffff;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--wp-surface-alt);
}
.form-check-input {
  background-color: #ffffff;
  border-color: var(--bs-border-color);
}





:root { --wp-bar-h: 4.55rem; }

.wp-navbar {
  background: var(--wp-surface);
  border-bottom: 1px solid var(--bs-border-color);
  padding-top: .85rem;
  padding-bottom: .85rem;
  min-height: var(--wp-bar-h);
}
.brand-mark {
  width: 2.1rem; height: 2.1rem; border-radius: .55rem;
  background: linear-gradient(135deg, var(--bs-primary), #46b6ff);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.wp-navbar .navbar-brand { font-weight: 800; font-size: 1.25rem; color: var(--bs-heading-color); }
.wp-navbar .navbar-brand .brand-mark { margin-right: .5rem; }
.wp-navbar .nav-link { font-weight: 600; color: var(--bs-body-color); padding: .5rem 1rem; }
.wp-navbar .nav-link.active, .wp-navbar .nav-link:hover { color: var(--bs-primary); }


.wp-footer {
  background: var(--wp-surface);
  border-top: 1px solid var(--bs-border-color);

  
  min-height: var(--wp-bar-h);
  display: flex;
  align-items: center;
  padding-block: .5rem;
}
.wp-footer > .container { width: 100%; }
.wp-footer h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-heading-color); }
.wp-footer a.footer-link { color: var(--bs-secondary-color); font-weight: 500; }
.wp-footer a.footer-link:hover { color: var(--bs-primary); }


.hero-section {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) calc(100% - 6rem), var(--bs-body-bg) 100%),
    radial-gradient(60rem 32rem at 88% -12%, rgba(0,138,255,.18), transparent 62%),
    radial-gradient(50rem 26rem at -5% 110%, rgba(0,138,255,.10), transparent 60%),
    var(--bs-body-bg);
}


.app-shell { min-height: 100vh; }

.app-sidebar {
  width: 260px;
  background: var(--wp-sidebar-bg);
  color: var(--wp-sidebar-color);
  min-height: 100vh;
  position: sticky;
  top: 0;
}
.app-sidebar .sidebar-brand {
  color: #fff; font-weight: 800; font-size: 1.1rem;
  height: var(--wp-topbar-height);
  padding: 0 1.25rem;
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-sizing: border-box;
}
.app-sidebar .sidebar-brand .brand-mark {
  width: 2rem; height: 2rem; border-radius: .5rem;
  margin-right: .6rem;
}
.app-sidebar .nav-section-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: #6b7794; padding: 1.1rem 1.25rem .4rem;
  font-weight: 700;
}
.app-sidebar .nav-link {
  color: var(--wp-sidebar-color);
  font-weight: 600; font-size: .89rem;
  padding: .6rem 1.25rem; border-radius: 0;
  display: flex; align-items: center; gap: .65rem;
  border-left: 3px solid transparent;
}
.app-sidebar .nav-link i { font-size: 1.05rem; opacity: .85; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.app-sidebar .nav-link.active {
  background: var(--wp-sidebar-bg-active);
  color: #fff; border-left-color: var(--bs-primary);
}
.app-sidebar .nav-link .badge { margin-left: auto; }
.app-sidebar .sidebar-storage {
  margin: 1rem 1.25rem; padding: 1rem;
  background: rgba(255,255,255,.05);
  border-radius: var(--wp-radius);
}


.sidebar-panel-switch {
  padding: .85rem 1.25rem .25rem;
}
.sidebar-panel-switch .btn-group { border-radius: var(--wp-radius-sm); overflow: hidden; }
.sidebar-tab-btn {
  flex: 1;
  background: rgba(255,255,255,.05);
  color: var(--wp-sidebar-color);
  border: 1px solid rgba(255,255,255,.09);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .01em;
  padding: .45rem .5rem;
}
.sidebar-tab-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.sidebar-tab-btn.active {
  background: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}
.sidebar-panel[data-panel-hidden="true"] { display: none; }


.empty-state { padding: 3.5rem 1.5rem; text-align: center; }
.empty-state-icon {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--wp-surface-alt);
  color: var(--bs-secondary-color);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.9rem; margin-bottom: 1.25rem;
}
.empty-state h5 { color: var(--bs-heading-color); margin-bottom: .5rem; }
.empty-state p { max-width: 380px; margin-left: auto; margin-right: auto; }

.app-topbar {
  background: var(--wp-surface);
  border-bottom: 1px solid var(--bs-border-color);
  height: var(--wp-topbar-height);
  padding: 0 1.5rem;
  display: flex; align-items: center;
  position: sticky; top: 0; z-index: 1020;
  box-sizing: border-box;
}

.app-main { flex: 1; min-width: 0; }
.app-content { padding: 1.75rem; }


:root { --wp-appbar-h: 3.4rem; }

.app-sidebar .sidebar-back { min-height: var(--wp-appbar-h); }

.app-footer {
  padding: .5rem 1.75rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: .8rem;
  color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1.5rem;
  min-height: var(--wp-appbar-h);
}
.app-footer a { color: var(--bs-secondary-color); font-weight: 500; }
.app-footer a:hover { color: var(--bs-primary); }
.app-footer .app-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }


.stat-icon {
  width: 3rem; height: 3rem; border-radius: var(--wp-radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.stat-trend { font-weight: 700; font-size: .8rem; }


.dropbox {
  border: 2px dashed var(--bs-primary-border-subtle);
  background: var(--bs-primary-bg-subtle);
  border-radius: var(--wp-radius);
  transition: background .15s ease, border-color .15s ease;
}
.dropbox.dragover, .dropbox:hover { background: #d9ecff; border-color: var(--bs-primary); }

.file-row { border-bottom: 1px solid var(--bs-border-color); }
.file-row:last-child { border-bottom: none; }
.file-icon {
  width: 2.6rem; height: 2.6rem; border-radius: var(--wp-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}



.table { --bs-table-bg: transparent; }
.table thead th {
  background-color: var(--wp-surface-alt);
  border-bottom-width: 1px;
  color: var(--bs-secondary-color) !important;
}
.table td { vertical-align: middle; }
.table tbody tr:hover td { background-color: var(--wp-surface-alt); }


.compare-table-wrap {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--wp-radius-lg);
  box-shadow: var(--wp-shadow);
  overflow: hidden;
}
.compare-table { --bs-table-bg: transparent; }
.compare-table th, .compare-table td { padding: 1rem 1.1rem; border-color: var(--bs-border-color); }
.compare-table thead th {
  background: var(--wp-surface-alt);
  vertical-align: bottom;
  border-bottom-width: 1px;
  text-transform: none;
  letter-spacing: normal;
}
.compare-table .plan-col-label { color: var(--bs-secondary-color); font-weight: 700; font-size: .85rem; }
.compare-table .plan-name { font-size: 1.05rem; font-weight: 800; }
.compare-table .plan-price { font-size: 1.5rem; font-weight: 800; line-height: 1.3; }
.compare-table tbody tr:hover td { background-color: var(--wp-surface-alt); }
.compare-table .plan-col-highlight {
  background: #eef7ff;
  border-left: 1px solid #cfe9ff;
  border-right: 1px solid #cfe9ff;
}
.compare-table tbody tr:hover td.plan-col-highlight { background-color: #dff0ff; }
.compare-table .plan-col-business {
  background: #eceef3;
  border-left: 1px solid #c9ced9;
  border-right: 1px solid #c9ced9;
}
.compare-table tbody tr:hover td.plan-col-business { background-color: #e0e3ec; }
.compare-table .text-business { color: var(--wp-sidebar-bg); }
.compare-table .badge-business { background: var(--wp-sidebar-bg); }
.compare-table .btn-business { background: var(--wp-sidebar-bg); border-color: var(--wp-sidebar-bg); color: #fff; font-weight: 600; }
.compare-table .btn-business:hover { background: #0f1424; border-color: #0f1424; color: #fff; }
.compare-table .compare-cta-row td { border-bottom: none; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.compare-table .feature-check,
.compare-table .feature-dash {
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.compare-table .feature-check { background: var(--bs-success-bg-subtle); color: #17924f; }
.compare-table .feature-dash { background: var(--wp-surface-alt); color: var(--bs-secondary-color); }


.avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.section-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bs-primary);
}
.rounded-xl { border-radius: var(--wp-radius-lg) !important; }
.shadow-wp { box-shadow: var(--wp-shadow) !important; }

@media (max-width: 991.98px) {
  .app-sidebar { position: fixed; left: -260px; top: 0; height: 100vh; z-index: 1040; transition: left .2s ease; }
  .app-sidebar.show { left: 0; }
}