:root {
  color-scheme: light;
  --qt-bg: #f5f6f8;
  --qt-surface: #ffffff;
  --qt-surface-soft: #f9fafb;
  --qt-border: #e5e7eb;
  --qt-border-strong: #d1d5db;
  --qt-text: #1f2937;
  --qt-text-muted: #6b7280;
  --qt-primary: #e5322d;
  --qt-primary-hover: #c8231f;
  --qt-primary-soft: #ffe9e8;
  --qt-primary-soft-strong: #ffd7d5;
  --qt-success: #16a34a;
  --qt-warning: #d97706;
  --qt-danger: #dc2626;
  --qt-focus-ring: rgba(229, 50, 45, 0.24);
  --qt-shadow: 0 14px 30px -20px rgba(15, 23, 42, 0.28), 0 6px 14px rgba(15, 23, 42, 0.08);
}

body[data-theme='quicktools'] {
  margin: 0;
  min-height: 100vh;
  color: var(--qt-text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% -12%, rgba(229, 50, 45, 0.12), transparent 42%),
    radial-gradient(circle at 88% -10%, rgba(248, 113, 113, 0.1), transparent 38%),
    linear-gradient(180deg, #fafafb 0%, var(--qt-bg) 34%, #f0f2f5 100%);
}

body[data-theme='quicktools'] a {
  color: var(--qt-primary);
  text-decoration-thickness: 1px;
}

body[data-theme='quicktools'] a:hover,
body[data-theme='quicktools'] a:focus {
  color: var(--qt-primary-hover);
}

body[data-theme='quicktools'] .shadow-glow {
  box-shadow: var(--qt-shadow) !important;
}

body[data-theme='quicktools'] .bg-gradient-to-br,
body[data-theme='quicktools'] .bg-gradient-to-b {
  background-image: none !important;
}

body[data-theme='quicktools'] .bg-white,
body[data-theme='quicktools'] .bg-white\/70,
body[data-theme='quicktools'] .bg-white\/80,
body[data-theme='quicktools'] .bg-white\/85,
body[data-theme='quicktools'] .bg-white\/90,
body[data-theme='quicktools'] .bg-white\/95,
body[data-theme='quicktools'] .bg-white\/10 {
  background-color: var(--qt-surface) !important;
  color: var(--qt-text) !important;
  border-color: var(--qt-border) !important;
}

body[data-theme='quicktools'] .bg-slate-100,
body[data-theme='quicktools'] .bg-slate-200,
body[data-theme='quicktools'] .bg-slate-50,
body[data-theme='quicktools'] .bg-slate-50\/70,
body[data-theme='quicktools'] .bg-slate-50\/80,
body[data-theme='quicktools'] .bg-indigo-50\/70,
body[data-theme='quicktools'] .bg-indigo-50\/85 {
  background-color: var(--qt-surface-soft) !important;
  color: var(--qt-text) !important;
  border-color: var(--qt-border) !important;
}

body[data-theme='quicktools'] .bg-slate-950,
body[data-theme='quicktools'] .bg-slate-900,
body[data-theme='quicktools'] .bg-slate-800 {
  background-color: var(--qt-bg) !important;
  color: var(--qt-text) !important;
}

body[data-theme='quicktools'] .text-slate-950,
body[data-theme='quicktools'] .text-slate-900,
body[data-theme='quicktools'] .text-slate-800,
body[data-theme='quicktools'] .text-slate-100,
body[data-theme='quicktools'] .text-white,
body[data-theme='quicktools'] .text-slate-100\/80 {
  color: var(--qt-text) !important;
}

body[data-theme='quicktools'] .text-slate-700,
body[data-theme='quicktools'] .text-slate-600,
body[data-theme='quicktools'] .text-slate-500,
body[data-theme='quicktools'] .text-slate-400,
body[data-theme='quicktools'] .text-slate-300,
body[data-theme='quicktools'] .text-slate-200,
body[data-theme='quicktools'] .text-slate-200\/80 {
  color: var(--qt-text-muted) !important;
}

body[data-theme='quicktools'] .text-indigo-700,
body[data-theme='quicktools'] .text-indigo-600,
body[data-theme='quicktools'] .text-indigo-500,
body[data-theme='quicktools'] .text-indigo-200,
body[data-theme='quicktools'] .text-indigo-200\/80 {
  color: var(--qt-primary) !important;
}

body[data-theme='quicktools'] .bg-indigo-50,
body[data-theme='quicktools'] .bg-indigo-100 {
  background-color: var(--qt-primary-soft) !important;
  color: var(--qt-primary) !important;
}

body[data-theme='quicktools'] .bg-indigo-600,
body[data-theme='quicktools'] .bg-indigo-500 {
  background-color: var(--qt-primary) !important;
  color: #ffffff !important;
}

body[data-theme='quicktools'] .hover\:bg-indigo-600:hover,
body[data-theme='quicktools'] .hover\:bg-indigo-500:hover {
  background-color: var(--qt-primary-hover) !important;
}

body[data-theme='quicktools'] .hover\:bg-indigo-100:hover,
body[data-theme='quicktools'] .hover\:bg-indigo-50:hover {
  background-color: var(--qt-primary-soft-strong) !important;
}

body[data-theme='quicktools'] .bg-emerald-500,
body[data-theme='quicktools'] .bg-emerald-600 {
  background-color: var(--qt-success) !important;
  color: #fff !important;
}

body[data-theme='quicktools'] .text-emerald-700,
body[data-theme='quicktools'] .text-emerald-600,
body[data-theme='quicktools'] .text-emerald-500 {
  color: var(--qt-success) !important;
}

body[data-theme='quicktools'] .text-amber-600 {
  color: var(--qt-warning) !important;
}

body[data-theme='quicktools'] .text-rose-600,
body[data-theme='quicktools'] .text-rose-500 {
  color: var(--qt-danger) !important;
}

body[data-theme='quicktools'] .bg-rose-50,
body[data-theme='quicktools'] .bg-rose-100 {
  background-color: #fee2e2 !important;
}

body[data-theme='quicktools'] .border-white\/10,
body[data-theme='quicktools'] .border-white\/20,
body[data-theme='quicktools'] .border-white\/40,
body[data-theme='quicktools'] .border-white\/60,
body[data-theme='quicktools'] .border-white\/70,
body[data-theme='quicktools'] .border-slate-100,
body[data-theme='quicktools'] .border-slate-200,
body[data-theme='quicktools'] .border-slate-200\/70,
body[data-theme='quicktools'] .border-slate-200\/80,
body[data-theme='quicktools'] .border-slate-300,
body[data-theme='quicktools'] .border-indigo-100,
body[data-theme='quicktools'] .border-indigo-200,
body[data-theme='quicktools'] .border-indigo-300,
body[data-theme='quicktools'] .border-indigo-400,
body[data-theme='quicktools'] .border-indigo-500 {
  border-color: var(--qt-border-strong) !important;
}

body[data-theme='quicktools'] input:not([type='checkbox']):not([type='radio']),
body[data-theme='quicktools'] textarea,
body[data-theme='quicktools'] select {
  background-color: #fff !important;
  color: var(--qt-text) !important;
  border: 1px solid var(--qt-border) !important;
  box-shadow: none !important;
}

body[data-theme='quicktools'] input[type='checkbox']:not([data-qt-consent-toggle]) {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 1px solid var(--qt-border-strong) !important;
  border-radius: 0.25rem;
  background-color: #fff !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.7rem 0.7rem;
  box-shadow: none !important;
  cursor: pointer;
}

body[data-theme='quicktools'] input[type='checkbox']:not([data-qt-consent-toggle]):checked {
  border-color: var(--qt-primary) !important;
  background-color: var(--qt-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-theme='quicktools'] input[type='checkbox']:not([data-qt-consent-toggle]):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body[data-theme='quicktools'] input[type='checkbox']:not([data-qt-consent-toggle]):focus {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 3px var(--qt-focus-ring) !important;
  outline: none !important;
}

body[data-theme='quicktools'] select:not([multiple]):not([size]),
body[data-theme='quicktools'] select:not([multiple])[size='1'] {
  padding-right: 2.3rem !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5L10 12L14.5 7.5' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: right 0.7rem center;
  -webkit-appearance: none;
  appearance: none;
}

body[data-theme='quicktools'] input::placeholder,
body[data-theme='quicktools'] textarea::placeholder {
  color: #9ca3af;
}

body[data-theme='quicktools'] input:focus,
body[data-theme='quicktools'] textarea:focus,
body[data-theme='quicktools'] select:focus,
body[data-theme='quicktools'] .focus\:outline-none:focus,
body[data-theme='quicktools'] .focus\:ring-2:focus,
body[data-theme='quicktools'] .focus\:ring-indigo-200:focus,
body[data-theme='quicktools'] .focus\:ring-slate-200:focus,
body[data-theme='quicktools'] .focus\:ring-rose-200:focus,
body[data-theme='quicktools'] .focus\:ring-emerald-200:focus {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 3px var(--qt-focus-ring) !important;
  outline: none !important;
}

body[data-theme='quicktools'] .hover\:text-indigo-600:hover,
body[data-theme='quicktools'] .hover\:text-indigo-200:hover,
body[data-theme='quicktools'] .hover\:text-white:hover {
  color: var(--qt-primary-hover) !important;
}

body[data-theme='quicktools'] .hover\:border-indigo-200:hover,
body[data-theme='quicktools'] .hover\:border-slate-300:hover,
body[data-theme='quicktools'] .hover\:border-rose-200:hover {
  border-color: #fca5a5 !important;
}

body[data-theme='quicktools'] .shadow-lg,
body[data-theme='quicktools'] .shadow-2xl,
body[data-theme='quicktools'] .shadow-sm {
  box-shadow: var(--qt-shadow) !important;
}

body[data-theme='quicktools'] .backdrop-blur {
  backdrop-filter: none !important;
}

body[data-theme='quicktools'] .bg-black\/50 {
  background-color: rgba(17, 24, 39, 0.55) !important;
}

body[data-theme='quicktools'] .shape-card {
  background: #ffffff !important;
  border: 1px solid var(--qt-border) !important;
  color: var(--qt-text) !important;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body[data-theme='quicktools'] .shape-card:hover {
  border-color: #fca5a5 !important;
  box-shadow: 0 12px 24px -18px rgba(229, 50, 45, 0.45) !important;
  transform: translateY(-1px);
}

body[data-theme='quicktools'] .shape-card--active {
  background: #fff5f5 !important;
  border-color: #f87171 !important;
  box-shadow: 0 12px 24px -18px rgba(229, 50, 45, 0.45), 0 0 0 1px rgba(248, 113, 113, 0.45) !important;
}

body[data-theme='quicktools'] .shape-preview {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--qt-border) !important;
}

body[data-theme='quicktools'] .qt-topbar {
  position: static;
  top: auto;
  z-index: auto;
  padding: 1.1rem 0 0.6rem;
  backdrop-filter: none;
}

body[data-theme='quicktools'] .qt-topbar-row {
  padding: 0.2rem 0;
}

body[data-theme='quicktools'] .qt-brand {
  color: var(--qt-text) !important;
  text-decoration: none;
}

body[data-theme='quicktools'] .qt-brand:hover {
  color: var(--qt-text) !important;
}

body[data-theme='quicktools'] .qt-tool-grid {
  margin-top: 0.25rem;
}

body[data-theme='quicktools'] .qt-tool-menu-toggle {
  display: none;
}

body[data-theme='quicktools'] .qt-tool-menu-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

body[data-theme='quicktools'] .qt-tool-link {
  text-decoration: none;
  background: #fff !important;
  border-color: var(--qt-border) !important;
  color: var(--qt-text-muted) !important;
}

body[data-theme='quicktools'] .qt-tool-link:hover {
  border-color: #fca5a5 !important;
  color: var(--qt-primary) !important;
  box-shadow: 0 12px 20px -18px rgba(229, 50, 45, 0.45) !important;
}

body[data-theme='quicktools'] .qt-tool-link--active {
  background: #fff2f2 !important;
  color: var(--qt-primary) !important;
  border-color: #f87171 !important;
}

body[data-theme='quicktools'] .qt-tool-link--active:hover {
  color: var(--qt-primary-hover) !important;
}

body[data-theme='quicktools'] .qt-tool-icon-wrap {
  background: #f3f4f6 !important;
}

body[data-theme='quicktools'] .qt-tool-link--active .qt-tool-icon-wrap {
  background: #ffe1df !important;
}

body[data-theme='quicktools'] .qt-tool-icon {
  filter: drop-shadow(0 6px 8px rgba(15, 23, 42, 0.12));
}

body[data-theme='quicktools'] .ring-indigo-200,
body[data-theme='quicktools'] .ring-slate-200,
body[data-theme='quicktools'] .ring-rose-200 {
  --tw-ring-color: var(--qt-focus-ring) !important;
}

body[data-theme='quicktools'] .qt-consent-card,
body[data-theme='quicktools'] .qt-consent-modal {
  background: #ffffff !important;
  color: var(--qt-text) !important;
  border: 1px solid var(--qt-border) !important;
  box-shadow: var(--qt-shadow) !important;
}

body[data-theme='quicktools'] .qt-consent-card p,
body[data-theme='quicktools'] .qt-consent-modal p,
body[data-theme='quicktools'] .qt-consent-category p {
  color: var(--qt-text-muted) !important;
}

body[data-theme='quicktools'] .qt-consent-category {
  background: #fafafa !important;
  border-color: var(--qt-border) !important;
}

body[data-theme='quicktools'] .qt-consent-button-primary {
  background: var(--qt-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -14px rgba(229, 50, 45, 0.55) !important;
}

body[data-theme='quicktools'] .qt-consent-button-primary:hover {
  background: var(--qt-primary-hover) !important;
}

body[data-theme='quicktools'] .qt-consent-button-secondary,
body[data-theme='quicktools'] .qt-consent-manage {
  background: #fff5f5 !important;
  color: var(--qt-primary) !important;
  border-color: #fca5a5 !important;
}

body[data-theme='quicktools'] .qt-consent-backdrop {
  background: rgba(17, 24, 39, 0.45) !important;
}

@media (max-width: 768px) {
  body[data-theme='quicktools'] .qt-tool-menu-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 0.2rem;
    border: 1px solid var(--qt-border) !important;
    border-radius: 1rem;
    background: #fff !important;
    color: var(--qt-text) !important;
    padding: 0.78rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 12px 18px -20px rgba(15, 23, 42, 0.55);
  }

  body[data-theme='quicktools'] .qt-tool-menu-toggle[aria-expanded='true'] .qt-tool-menu-toggle-icon {
    transform: rotate(45deg);
  }

  body[data-theme='quicktools'] .qt-tool-grid[data-tool-menu].qt-tool-grid--collapsible {
    display: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    margin-top: 0;
  }

  body[data-theme='quicktools'] .qt-tool-grid[data-tool-menu].qt-tool-grid--collapsible.is-open {
    display: flex;
    max-height: none;
    opacity: 1;
    pointer-events: auto;
    margin-top: 0.65rem;
  }

  body[data-theme='quicktools'] .qt-tool-link {
    width: 100% !important;
    max-width: none;
  }

  body[data-theme='quicktools'] .qt-brand p:last-child {
    font-size: 0.94rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme='quicktools'] * {
    transition: none !important;
    animation: none !important;
  }
}