body {
  /* Default Primary Theme Color */
  --theme-color: #1f75cb;
  /* Fonts */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.75rem;
  --font-size-huge: 2.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Layout Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-xxl: 4rem;
  /* Borders & Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-round: 50%;
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* Light Theme Colors (Default) */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-translucent: rgba(255, 255, 255, 0.8);
  --text-primary: #0f172a;
  --text-secondary: var(--theme-color); /* Safe fallback */
  --text-muted: #64748b;
  --accent-primary: var(--theme-color);
  --accent-secondary: var(--theme-color); /* Safe fallback */
  --accent-warning: #f59e0b;
  --accent-success: #10b981;
  --accent-danger: #ef4444;
  --shadow-color: rgba(15, 23, 42, 0.08);
  --shadow: 0 4px 20px var(--shadow-color);
  --shadow-hover: 0 10px 30px rgba(15, 23, 42, 0.12);
  --border: rgba(15, 23, 42, 0.08);
  --border-hover: rgba(15, 23, 42, 0.16);
  --scroll-behavior: smooth;
}

html.dark body {
  /* Dark Theme Colors - Soft and not too dark */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-translucent: rgba(15, 23, 42, 0.8);
  --text-primary: #f8fafc;
  --text-secondary: var(--theme-color); /* Safe fallback */
  --text-muted: #cbd5e1; /* High contrast muted text */
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 25px var(--shadow-color);
  --shadow-hover: 0 10px 35px rgba(0, 0, 0, 0.5);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --scroll-behavior: smooth;
}

/* Feature query to override with custom theme color derivations if supported by the browser */
@supports (color: hsl(from white h s l)) {
  body {
    --bg-primary: hsl(from var(--theme-color) h 30% 96%);
    --bg-secondary: #ffffff;
    --bg-tertiary: hsl(from var(--theme-color) h 30% 91%);
    --bg-translucent: hsla(from var(--theme-color) h 30% 96% / 80%);
    --text-secondary: hsl(from var(--theme-color) h calc(s - 15%) 30%);
    --accent-secondary: hsl(from var(--theme-color) calc(h + 30deg) calc(s + 10%) 45%);
    --shadow-color: hsl(from var(--theme-color) h calc(s - 10%) 20% / 8%);
    --shadow: 0 4px 20px var(--shadow-color);
    --shadow-hover: 0 10px 30px hsl(from var(--theme-color) h calc(s - 10%) 20% / 15%);
  }
  html.dark body {
    --bg-primary: hsl(from var(--theme-color) h 20% 12%);
    --bg-secondary: hsl(from var(--theme-color) h 18% 18%);
    --bg-tertiary: hsl(from var(--theme-color) h 16% 25%);
    --bg-translucent: hsla(from var(--theme-color) h 20% 12% / 80%);
    --text-primary: #ffffff;
    --text-secondary: hsl(from var(--theme-color) h calc(s + 10%) 75%);
    --text-muted: hsl(from var(--theme-color) h 10% 72%);
    --border: hsla(from var(--theme-color) h 20% 40% / 12%);
    --border-hover: hsla(from var(--theme-color) h 20% 40% / 22%);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-fade-in {
  animation: fadeIn var(--transition-slow) both;
}

.animate-slide-up {
  animation: slideUp var(--transition-normal) both;
}

.animate-scale-in {
  animation: scaleIn var(--transition-normal) both;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}

.hover-lift {
  transition: translate var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.hover-lift:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  scroll-behavior: var(--scroll-behavior);
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--accent-secondary);
}

textarea {
  resize: none;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

mark.highlight {
  background-color: var(--accent-warning);
  color: #000000;
  padding: 0 2px;
  border-radius: 2px;
}

.main-content {
  flex-grow: 1;
}

.is-hidden {
  display: none !important;
}

.inline-form {
  display: inline;
}

.account-container {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin-bottom: var(--space-md);
  margin-top: var(--space-lg);
}
.account-container .account-title {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-lg);
}
.account-container .account-content {
  max-width: 100%;
  margin: 0;
}
.account-container .account-content .account-card {
  margin: 0 0 var(--space-lg) 0;
  max-width: 100%;
}
.account-container .account-content .account-card .account-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}
.account-container .account-content .logout-container {
  margin-bottom: var(--space-lg);
}
.account-container .account-content .account-last-login {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: 1px solid transparent;
  gap: var(--space-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}
.btn:hover {
  transform: translateY(-1px);
  background-color: var(--bg-tertiary);
  filter: brightness(0.95);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--accent-primary);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: var(--accent-primary);
  filter: brightness(0.9);
}

.btn-danger {
  background-color: var(--accent-danger);
  color: #ffffff;
}
.btn-danger:hover {
  background-color: var(--accent-danger);
  filter: brightness(0.9);
}

.btn-success {
  background-color: var(--accent-success);
  color: #ffffff;
}
.btn-success:hover {
  background-color: var(--accent-success);
  filter: brightness(0.9);
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  padding: 0;
}

.btn-plus {
  background-color: var(--accent-primary);
  color: #ffffff;
  font-size: var(--font-size-xl);
}
.btn-plus:hover {
  background-color: var(--accent-secondary);
}

.category-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  align-items: center;
}
.category-toolbar .category-pill-group {
  display: inline-flex;
  align-items: center;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
  overflow: hidden;
}
.category-toolbar .category-pill-group:hover {
  border-color: var(--border-hover);
}
.category-toolbar .category-pill-group:has(.category-pill.active) {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.category-toolbar .category-pill-group:has(.category-pill.active) .category-pill {
  color: #ffffff;
}
.category-toolbar .category-pill-group:has(.category-pill.active) .category-delete-btn {
  color: rgba(255, 255, 255, 0.8);
}
.category-toolbar .category-pill-group:has(.category-pill.active) .category-delete-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
}
.category-toolbar .category-pill-group .category-pill {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}
.category-toolbar .category-pill-group .category-pill:last-child {
  border-radius: var(--radius-lg);
}
.category-toolbar .category-pill-group .category-pill:not(:last-child) {
  padding-right: 6px;
}
.category-toolbar .category-pill-group .category-pill:hover {
  color: var(--text-primary);
}
.category-toolbar .category-pill-group .category-pill.active {
  background-color: var(--accent-primary);
  color: #ffffff;
}
.category-toolbar .category-pill-group .category-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px 12px 8px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: var(--transition-fast);
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  margin: 0;
}
.category-toolbar .category-pill-group .category-delete-btn:hover {
  color: var(--accent-danger);
  background-color: rgba(239, 68, 68, 0.08);
}

.btn-full {
  width: 100%;
  padding: 12px;
}

.btn-large {
  font-size: var(--font-size-lg);
  padding: 14px 28px;
}

.btn-submit-full {
  margin-top: var(--space-md);
  width: 100%;
}

.website-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-normal);
  min-width: 0;
}
.website-card.website-card-sm {
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-md);
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}
.website-card.website-card-sm .site-icon {
  width: 48px;
  height: 48px;
  font-size: var(--font-size-xxl);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.website-card.website-card-sm .site-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  transition: color var(--transition-fast);
}
.website-card.website-card-sm:hover {
  border-color: var(--accent-primary);
  background-color: var(--bg-tertiary);
}
.website-card.website-card-sm:hover .site-icon {
  transform: scale(1.1);
  border-color: var(--accent-primary);
}
.website-card.website-card-sm:hover .site-title {
  color: var(--accent-primary);
}
.website-card .card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.website-card .card-header .site-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
}
.website-card .card-header .site-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.website-card .card-body {
  flex-grow: 1;
  margin-bottom: var(--space-md);
}
.website-card .card-body .site-url {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  word-break: break-all;
  margin-bottom: var(--space-sm);
  display: block;
}
.website-card .card-body .site-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.website-card .card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.website-card .card-categories .cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  /* Fallbacks for older browsers */
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border);
  /* Modern theme-derived colors */
  background-color: hsl(from var(--theme-color) h 45% 94%);
  color: var(--text-secondary);
  border: 1px solid hsl(from var(--theme-color) h 45% 88%);
}
.website-card .card-stats {
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.website-card .card-stats .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.website-card .card-stats .stat-row .stat-val {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.website-card .card-stats .stat-row-sub {
  font-size: 10px;
}
.website-card .card-stats .stat-row-meta {
  font-size: 10px;
  opacity: 0.8;
  margin-top: 2px;
}
.website-card .card-actions {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  gap: var(--space-xs);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.website-card .card-actions .action-btn {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  cursor: pointer;
}
.website-card .card-actions .action-btn:hover {
  background-color: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}
.website-card .card-actions button.action-btn {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
.website-card:hover .card-actions {
  opacity: 1;
}

/* Dark mode overrides for cards */
html.dark .website-card .card-categories .cat-badge {
  /* Fallbacks for older browsers */
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border);
  /* Modern theme-derived colors */
  background-color: hsl(from var(--theme-color) h 45% 15%);
  color: var(--text-secondary);
  border: 1px solid hsl(from var(--theme-color) h 45% 25%);
}

.dashboard-section {
  margin-bottom: var(--space-xl);
}
.dashboard-section .section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  border-left: 4px solid var(--accent-primary);
  padding-left: var(--space-sm);
}
.dashboard-section.main-section {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.dashboard-section + .dashboard-section.main-section {
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
}

.dashboard-container {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xxl);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.dashboard-grid.dashboard-grid-sm {
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
}
@media (max-width: 1024px) {
  .dashboard-grid.dashboard-grid-sm {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .dashboard-grid.dashboard-grid-sm {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
  flex-wrap: wrap;
}
.dashboard-header .nav-stats {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}
.dashboard-header .nav-stats .stat-badge {
  background-color: var(--bg-tertiary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.dashboard-header .nav-stats .stat-badge strong {
  color: var(--text-primary);
}

.dashboard-title {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
}

.dashboard-header-actions {
  display: flex;
  gap: var(--space-sm);
}

.empty-state {
  text-align: center;
  padding: var(--space-xxl) var(--space-md);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}
.empty-state .empty-icon {
  font-size: var(--font-size-huge);
  margin-bottom: var(--space-sm);
}

.empty-state-section {
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.landing-section {
  margin-bottom: var(--space-xxl);
}

.landing-section-title {
  text-align: center;
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-xxl);
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xxl);
}
.landing-features .feature-item {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  transition: var(--transition-normal);
}
.landing-features .feature-item .feature-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  display: inline-block;
}
.landing-features .feature-item h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
}
.landing-features .feature-item p {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.landing-features .feature-item:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow);
  border-color: var(--accent-primary);
}

.landing-hero {
  text-align: center;
  padding: var(--space-xxl) 0;
  max-width: 800px;
  margin: 0 auto;
}
.landing-hero h1 {
  font-size: var(--font-size-huge);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-hero p {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

.flash-container {
  position: fixed;
  top: 85px;
  right: var(--space-md);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 400px;
  width: calc(100% - 32px);
}

.flash-message {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  color: #ffffff;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideUp 0.3s forwards;
}
.flash-message.flash-success {
  background-color: var(--accent-success);
}
.flash-message.flash-danger {
  background-color: var(--accent-danger);
}
.flash-message.flash-warning {
  background-color: var(--accent-warning);
  color: #000000;
}
.flash-message .flash-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: var(--font-size-md);
  padding: 0;
  margin-left: var(--space-md);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}
.flash-message .flash-close:hover {
  opacity: 1;
}

footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: var(--space-lg) 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  margin-top: auto;
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}
footer .footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  max-width: 600px;
  margin: var(--space-xl) auto;
  box-shadow: var(--shadow);
}
.form-card .form-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 150px);
  padding: var(--space-md) var(--space-md);
}

.login-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.login-error {
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  padding: 8px 12px;
}

.form-group {
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.form-group.form-group-spaced {
  margin-bottom: var(--space-lg);
}
.form-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.form-group input[type=text],
.form-group input[type=url],
.form-group input[type=password],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-family: inherit;
  outline: none;
  transition: var(--transition-fast);
}
.form-group input[type=text]::placeholder,
.form-group input[type=url]::placeholder,
.form-group input[type=password]::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder {
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--text-muted);
  opacity: 0.8;
}
.form-group input[type=text]:focus,
.form-group input[type=url]:focus,
.form-group input[type=password]:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-primary);
  background-color: var(--bg-secondary);
}
.form-group .error-message {
  color: var(--accent-danger);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-top: 2px;
}
.form-group .category-checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.form-group .category-checkbox-list label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}
.form-group .category-checkbox-list label input {
  accent-color: var(--accent-primary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.form-group-checkbox {
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-sm) !important;
}
.form-group-checkbox.form-group-top {
  margin-top: var(--space-sm);
}
.form-group-checkbox.form-group-bottom {
  margin-bottom: var(--space-md);
}

header {
  background-color: var(--bg-translucent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}
header .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: var(--space-md);
}
header .nav-brand {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
header .nav-search-bar {
  flex-grow: 1;
  max-width: 450px;
  position: relative;
}
header .nav-search-bar input {
  width: 100%;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  outline: none;
}
header .nav-search-bar input:focus {
  border-color: var(--accent-primary);
  background-color: var(--bg-secondary);
}
header .nav-search-bar .search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
header .nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
header .nav-btn-text {
  display: inline;
}
@media (max-width: 900px) {
  header {
    padding: 0 var(--space-md);
  }
  header .nav-container {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-md) 0;
  }
  header .nav-search-bar {
    order: 3;
    max-width: 100%;
    width: 100%;
  }
  header .nav-btn-text {
    display: none !important;
  }
  header .nav-actions a.btn {
    padding: 10px 12px;
  }
}

.btn-scroll-top {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 45px;
  height: 45px;
  border-radius: var(--radius-round);
  background-color: var(--accent-primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-normal), transform var(--transition-normal), background-color var(--transition-fast);
  z-index: 99;
  pointer-events: none;
}
.btn-scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.btn-scroll-top:hover {
  background-color: var(--accent-primary);
  filter: brightness(0.9);
  transform: scale(1.05);
}

/*# sourceMappingURL=app-7d1043473d.output.css.map */