/* MotionSites-inspired finish. Layout and sizing remain in the page stylesheets. */
:root {
  --bg: #f3f4f6;
  --sidebar-bg: #f8f9fa;
  --toolbar-bg: #f8f9fa;
  --surface: #ffffff;
  --raised-surface: #ffffff;
  --inset: #f3f4f6;
  --hover: #eef0f2;
  --text: #15171c;
  --muted: #68707c;
  --line: #e3e5e8;
  --line-strong: #cdd1d6;
  --accent: #22251d;
  --accent-fill: #c4ff32;
  --accent-hover: #b5ef24;
  --accent-ink: #171b10;
  --accent-soft: #eff9d5;
  --success: #327546;
  --warning: #946719;
  --danger: #b83232;
  --danger-soft: #fbeaea;
}

body { color: var(--text); }
.app-sidebar { background: var(--sidebar-bg); }
.sidebar-product, h1, h2, h3 { letter-spacing: -.025em; }
.sidebar-product { font-weight: 750; }
.sidebar-user-company { background: #fff; border-radius: 9px; }
.sidebar-link { border-radius: 9px; }
.sidebar-link.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.sidebar-link.active small { color: #d1d5da; }
.card, .catalog-block, .wq-metric, .wq-platform, .wq-task-list,
.wq-task-detail, .login-card { border-radius: 12px; }
.card:not(.catalog-card), .wq-metric, .wq-platform, .login-card {
  box-shadow: 0 1px 2px rgba(21, 23, 28, .025);
}
.button, .button.small, .wq-btn, .login-btn, .platform-option {
  border-radius: 999px;
}
.button.primary, .button.accent, .wq-btn-primary, .login-btn {
  color: var(--accent-ink);
  font-weight: 700;
}
.button.primary:hover:not(:disabled), .button.accent:hover:not(:disabled),
.wq-btn-primary:hover, .login-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.plan-switch { background: #fff; border-radius: 999px; }
.plan-switch-btn { border-radius: 999px; }
.plan-switch-btn.active { background: var(--text); color: #fff; }
.platform-option:has(input:checked) {
  border-color: var(--text);
  background: var(--text);
  color: #fff;
}
.platform-option input { accent-color: var(--accent-fill); }
.table-wrap, .wq-table-wrap { border-radius: 10px; }
.data-table th, .wq-table th { background: #f7f8f9; }
.data-table tbody tr:hover td, .wq-table tbody tr:hover { background: #f7f8f5; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea { border-radius: 8px; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid #82ad10;
  outline-offset: 2px;
}
dialog { background: #fff; border-radius: 14px; }
.wq-tab.is-active { color: var(--text); }
.wq-tab.is-active::after { background: var(--accent-fill); }
.wq-metric strong { letter-spacing: -.04em; }
.wq-task.is-active { background: var(--accent-soft); }
.wq-platform-head { background: #fff; }
.login-card, .form-group input { background: #fff; }
.login-brand { color: var(--text); }
.form-group input:focus { border-color: #82ad10; box-shadow: 0 0 0 3px rgba(196, 255, 50, .2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}