@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --vk-bg-base: #141414;
  --vk-bg-surface: #1c1c1c;
  --vk-bg-elevated: #222222;
  --vk-bg-card: #1e1e1e;
  --vk-bg-hover: #282828;
  --vk-accent-primary: #e05a2b;
  --vk-accent-orange: #d4521f;
  --vk-accent-warm: #f07040;
  --vk-accent-muted: #7a3319;
  --vk-text-primary: #f0f0f0;
  --vk-text-secondary: #9a9a9a;
  --vk-text-muted: #585858;
  --vk-border-default: rgba(255,255,255,0.06);
  --vk-border-subtle: rgba(255,255,255,0.04);
  --vk-border-active: rgba(224,90,43,0.4);
  --vk-status-success: #5ba05b;
  --vk-font-display: 'Outfit', sans-serif;
  --vk-font-body: 'Plus Jakarta Sans', sans-serif;
  --vk-radius-sm: 6px;
  --vk-radius-md: 10px;
  --vk-radius-lg: 14px;
  --vk-radius-xl: 18px;
  --vk-radius-full: 999px;
  --vk-sidebar-w: 196px;
  --vk-topbar-h: 52px;
}

.vk-root-body {
  margin: 0;
  background: var(--vk-bg-base);
}

.vk-root-body #wpadminbar {
  display: none;
}

.vk-app-shell,
.vk-auth-screen {
  background: var(--vk-bg-base);
  color: var(--vk-text-primary);
  font-family: var(--vk-font-body);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.vk-app-shell *,
.vk-auth-screen * {
  box-sizing: border-box;
}

.vk-app-shell a,
.vk-auth-screen a {
  color: inherit;
}

.vk-app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.vk-sidebar {
  background: var(--vk-bg-surface);
  border-right: 1px solid var(--vk-border-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  overflow-y: auto;
  padding: 18px 12px;
  width: var(--vk-sidebar-w);
}

.vk-sidebar-logo {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 4px 6px 14px;
  text-decoration: none;
}

.vk-logo-icon {
  align-items: center;
  background: var(--vk-accent-primary);
  border-radius: var(--vk-radius-sm);
  display: flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.vk-logo-icon img {
  height: 20px;
  width: 20px;
}

.vk-sidebar-logo span:last-child {
  color: var(--vk-text-primary);
  font-family: var(--vk-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.vk-sidebar-search {
  align-items: center;
  background: var(--vk-bg-elevated);
  border: 1px solid var(--vk-border-default);
  border-radius: var(--vk-radius-md);
  color: var(--vk-text-muted);
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  padding: 7px 10px;
}

.vk-sidebar-search input {
  background: none;
  border: 0;
  color: var(--vk-text-secondary);
  flex: 1;
  font-size: 12px;
  outline: none;
  min-width: 0;
}

.vk-ai-badge {
  align-items: center;
  background: linear-gradient(135deg, var(--vk-accent-primary), var(--vk-accent-warm));
  border-radius: 4px;
  color: #fff;
  display: flex;
  font-size: 9px;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.vk-nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vk-nav-label {
  color: var(--vk-text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 10px 8px 4px;
  text-transform: uppercase;
}

.vk-nav-item,
.vk-logout-btn {
  align-items: center;
  border-radius: var(--vk-radius-md);
  color: var(--vk-text-secondary);
  display: flex;
  font-size: 12.5px;
  font-weight: 500;
  gap: 9px;
  padding: 8px 10px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.vk-nav-item:hover,
.vk-logout-btn:hover {
  background: var(--vk-bg-hover);
  color: var(--vk-text-primary);
  text-decoration: none;
}

.vk-nav-item.active {
  background: var(--vk-accent-primary);
  color: #fff;
}

.vk-sidebar-bottom {
  border-top: 1px solid var(--vk-border-default);
  margin-top: auto;
  padding-top: 12px;
}

.vk-app-main {
  background: var(--vk-bg-base);
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.vk-topbar {
  align-items: center;
  background: var(--vk-bg-base);
  border-bottom: 1px solid var(--vk-border-default);
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  height: var(--vk-topbar-h);
  padding: 0 20px;
}

.vk-topbar-pill,
.vk-menu-btn {
  align-items: center;
  background: var(--vk-bg-elevated);
  border: 1px solid var(--vk-border-default);
  border-radius: var(--vk-radius-full);
  color: var(--vk-text-secondary);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  padding: 5px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.vk-topbar-pill:hover,
.vk-menu-btn:hover {
  background: var(--vk-bg-hover);
  color: var(--vk-text-primary);
  text-decoration: none;
}

.vk-topbar-pill.pro {
  border-color: rgba(224,90,43,0.2);
  color: var(--vk-accent-warm);
}

.vk-topbar-right {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.vk-avatar-group {
  display: flex;
}

.vk-avatar {
  align-items: center;
  border: 2px solid var(--vk-bg-base);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.vk-avatar:not(:first-child) {
  margin-left: -8px;
}

.vk-avatar.av1 {
  background: linear-gradient(135deg, var(--vk-accent-primary), var(--vk-accent-warm));
}

.vk-avatar.av2 {
  background: linear-gradient(135deg, #3a7bd5, #5a9be8);
}

.vk-mobile-menu-btn {
  display: none;
  color: var(--vk-text-secondary);
}

.vk-mobile-panel {
  background: var(--vk-bg-surface);
}

.vk-offcanvas-logo {
  height: 38px;
  max-width: 180px;
}

.vk-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  padding: 22px 20px;
}

.vk-dashboard-head,
.vk-section-header,
.vk-tab-bar,
.vk-goal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.vk-dashboard-head h1 {
  color: var(--vk-text-primary);
  font-family: var(--vk-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0 0 4px;
}

.vk-dashboard-head p,
.vk-card p {
  color: var(--vk-text-secondary);
  margin: 0;
}

.vk-grid-view-btn,
.vk-icon-btn {
  align-items: center;
  background: var(--vk-bg-elevated);
  border: 1px solid var(--vk-border-default);
  border-radius: var(--vk-radius-sm);
  color: var(--vk-text-muted);
  display: flex;
  font-size: 11.5px;
  gap: 5px;
  padding: 5px 10px;
}

.vk-top-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.vk-section-title {
  align-items: center;
  color: var(--vk-text-primary);
  display: flex;
  font-family: var(--vk-font-display);
  font-size: 18px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: -0.3px;
  margin: 0 0 14px;
}

.vk-section-title .count {
  color: var(--vk-text-muted);
  font-size: 13px;
  font-weight: 500;
}

.vk-task-progress-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vk-card,
.vk-performance-card,
.vk-auth-card {
  background: var(--vk-bg-card);
  border: 1px solid var(--vk-border-default);
  border-radius: var(--vk-radius-lg);
  color: var(--vk-text-primary);
  padding: 16px;
  position: relative;
}

.vk-card-stat {
  min-height: 132px;
}

.vk-card-label {
  color: var(--vk-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vk-big-number {
  color: var(--vk-text-primary);
  font-family: var(--vk-font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  margin: 8px 0;
}

.vk-card-date {
  color: var(--vk-text-muted);
  font-size: 11px;
}

.vk-performance-card {
  background: linear-gradient(160deg, #21130d 0%, #1c1c1c 100%);
  border-radius: var(--vk-radius-xl);
  border-color: rgba(224,90,43,0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 206px;
  padding: 20px;
}

.vk-perf-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.vk-perf-title {
  color: var(--vk-text-primary);
  font-family: var(--vk-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.vk-perf-tabs {
  display: flex;
  gap: 6px;
}

.vk-perf-tabs span {
  border-radius: var(--vk-radius-full);
  color: var(--vk-text-muted);
  font-size: 11px;
  padding: 4px 10px;
}

.vk-perf-tabs .active {
  background: var(--vk-accent-primary);
  color: #fff;
}

.vk-perf-metrics {
  display: flex;
  gap: 24px;
}

.vk-perf-metrics small {
  color: var(--vk-text-muted);
  display: block;
  font-size: 10px;
}

.vk-perf-num {
  color: var(--vk-text-muted);
  display: block;
  font-family: var(--vk-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
}

.vk-perf-num.main {
  color: var(--vk-text-primary);
  font-size: 42px;
}

.vk-progress-track {
  background: var(--vk-bg-elevated);
  border-radius: var(--vk-radius-full);
  height: 5px;
  overflow: hidden;
}

.vk-progress-track span {
  background: var(--vk-accent-primary);
  display: block;
  height: 100%;
}

.vk-all-about-section {
  display: flex;
  flex-direction: column;
}

.vk-tab-bar {
  border-bottom: 1px solid var(--vk-border-default);
  gap: 0;
  margin-bottom: 14px;
}

.vk-tab-you {
  color: var(--vk-text-primary);
  font-family: var(--vk-font-display);
  font-size: 18px;
  font-weight: 700;
  margin-right: 8px;
}

.vk-tab {
  border-bottom: 2px solid transparent;
  color: var(--vk-text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 14px;
}

.vk-tab.active {
  border-bottom-color: var(--vk-accent-primary);
  color: var(--vk-text-primary);
}

.vk-section-actions {
  margin-left: auto;
}

.vk-bottom-grid,
.vk-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vk-client-card h3,
.vk-card h2,
.vk-inline-form h3 {
  color: var(--vk-text-primary);
  font-family: var(--vk-font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.vk-client-card h3 a {
  color: var(--vk-text-primary);
  text-decoration: none;
}

.vk-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.vk-list-row {
  align-items: center;
  background: var(--vk-bg-elevated);
  border: 1px solid var(--vk-border-default);
  border-radius: var(--vk-radius-md);
  color: var(--vk-text-secondary);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 10px;
  text-decoration: none;
}

.vk-list-row:hover {
  background: var(--vk-bg-hover);
  color: var(--vk-text-primary);
  text-decoration: none;
}

.vk-status-pill {
  background: rgba(224,90,43,0.14);
  border-radius: var(--vk-radius-full);
  color: var(--vk-accent-warm);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  white-space: nowrap;
}

.vk-inline-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vk-inline-form label,
.vk-auth-card label {
  color: var(--vk-text-secondary);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vk-inline-form input,
.vk-inline-form select,
.vk-inline-form textarea,
.vk-auth-card input {
  background: var(--vk-bg-elevated);
  border: 1px solid var(--vk-border-default);
  border-radius: var(--vk-radius-md);
  color: var(--vk-text-primary);
  display: block;
  font: inherit;
  margin-top: 6px;
  outline: none;
  padding: 9px 10px;
  width: 100%;
}

.vk-inline-form input:focus,
.vk-inline-form select:focus,
.vk-inline-form textarea:focus,
.vk-auth-card input:focus {
  border-color: var(--vk-border-active);
}

.vk-primary-btn,
.vk-secondary-btn {
  border: 0;
  border-radius: var(--vk-radius-md);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  padding: 9px 14px;
  text-decoration: none;
}

.vk-primary-btn {
  background: var(--vk-accent-primary);
  color: #fff !important;
}

.vk-secondary-btn {
  background: var(--vk-bg-elevated);
  color: var(--vk-text-secondary) !important;
}

.vk-primary-btn:hover,
.vk-secondary-btn:hover {
  filter: brightness(1.08);
  text-decoration: none;
}

.vk-auth-screen {
  background:
    linear-gradient(135deg, rgba(20,20,20,0.90), rgba(20,20,20,0.72)),
    url('../img/design-reference.jpg') center/cover no-repeat,
    var(--vk-bg-base);
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.85fr);
  min-height: 100vh;
}

.vk-auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 64px;
}

.vk-auth-brand img {
  height: 46px;
  margin-bottom: 34px;
  max-width: 220px;
}

.vk-auth-brand h1 {
  color: var(--vk-text-primary);
  font-family: var(--vk-font-display);
  font-size: 48px;
  line-height: 1.04;
  margin: 0 0 14px;
  max-width: 560px;
}

.vk-auth-brand p {
  color: var(--vk-text-secondary);
  font-size: 16px;
  max-width: 450px;
}

.vk-auth-panel {
  align-items: center;
  background: rgba(20,20,20,0.72);
  border-left: 1px solid var(--vk-border-default);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 28px;
}

.vk-auth-card {
  max-width: 430px;
  width: 100%;
}

.vk-auth-card h2 {
  color: var(--vk-text-primary);
  font-family: var(--vk-font-display);
  font-size: 28px;
  margin: 0 0 6px;
}

.vk-auth-card p,
.vk-auth-switch {
  color: var(--vk-text-secondary);
}

.vk-auth-switch {
  border-top: 1px solid var(--vk-border-default);
  margin-top: 18px;
  padding-top: 14px;
}

.vk-auth-icon {
  border-radius: var(--vk-radius-sm);
  display: block;
  height: 46px;
  margin-bottom: 16px;
  width: 46px;
}

.vk-check {
  align-items: center;
  display: flex !important;
  gap: 8px;
}

.vk-check input {
  margin: 0;
  width: auto;
}

.vk-message {
  background: rgba(224,90,43,0.16);
  border: 1px solid var(--vk-border-active);
  border-radius: var(--vk-radius-md);
  color: var(--vk-accent-warm);
  margin-bottom: 12px;
  max-width: 430px;
  padding: 10px 12px;
  width: 100%;
}

@media (max-width: 1180px) {
  .vk-task-progress-grid,
  .vk-bottom-grid,
  .vk-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vk-top-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .vk-app-shell {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .vk-sidebar {
    display: none;
  }

  .vk-mobile-menu-btn {
    display: inline-flex;
  }

  .vk-app-main {
    min-height: 100vh;
  }

  .vk-content {
    overflow: visible;
  }

  .vk-auth-screen {
    grid-template-columns: 1fr;
  }

  .vk-auth-brand {
    min-height: auto;
    padding: 36px 24px 12px;
  }

  .vk-auth-brand h1 {
    font-size: 34px;
  }

  .vk-auth-panel {
    border-left: 0;
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .vk-content {
    padding: 16px 12px 28px;
  }

  .vk-task-progress-grid,
  .vk-bottom-grid,
  .vk-form-grid {
    grid-template-columns: 1fr;
  }

  .vk-topbar-pill:not(.pro),
  .vk-avatar-group {
    display: none;
  }

  .vk-dashboard-head,
  .vk-tab-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}