/* ===== TEMA CLARO-TECH =====
   Fundo claro neutro
   Cartões brancos com sombra leve
   Um único acento azul-elétrico
   Tipografia limpa
   Muito espaço em branco
*/
[data-tema="claro-tech"] {
  --bg: #f8fafc;
  --bg-deep: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f8fafc;
  --surface-hover: #f1f5f9;
  --ink: #0f172a;
  --ink-muted: #334155;      /* Darker for better contrast */
  --ink-dim: #64748b;        /* Darker for better contrast */
  --line: #cbd5e1;           /* Darker for better contrast */
  --line-bright: #0284c7;    /* Darker accent */
  --brand: #0369a1;          /* Darker brand for 4.5:1 on white */
  --brand-2: #075985;
  --brand-gradient: linear-gradient(135deg, var(--brand), var(--brand-2));
  --accent: #0369a1;         /* Darker azul-elétrico for 4.5:1 on white */
  --accent-ink: #fff;
  --accent-bg: rgba(2, 132, 199, 0.12);   /* More opaque for contrast */
  --accent-border: rgba(2, 132, 199, 0.4);
  --accent-hover: #075981;
  --accent-light: rgba(2, 132, 199, 0.15);  /* More opaque */
  --accent-medium: rgba(2, 132, 199, 0.4);   /* More opaque for contrast */
  --accent-strong: rgba(2, 132, 199, 0.6);   /* More opaque for contrast */
  --danger: #dc2626;         /* Darker red for 4.5:1 on white */
  --danger-ink: #fff;
  --danger-bg: rgba(220, 38, 38, 0.12);
  --danger-border: rgba(220, 38, 38, 0.4);
  --warning: #b45309;        /* Darker amber for 4.5:1 on white */
  --warning-ink: #fff;
  --warning-bg: rgba(180, 83, 9, 0.12);
  --warning-border: rgba(180, 83, 9, 0.4);
  --info: #005ea2;   /* Darker for 4.5:1 with white text */
  --info-ink: #fff;
  --info-bg: #005ea2;   /* Fully opaque for guaranteed 4.5:1 contrast with white text */
  --info-border: rgba(0, 94, 162, 0.4);
  --violet: #8b5cf6;
  --violet-ink: #fff;
  --violet-bg: rgba(139, 92, 246, 0.15);   /* More opaque */
  --violet-border: rgba(139, 92, 246, 0.4);
  --focus: #0284c7;
  --focus-ring: rgba(2, 132, 199, 0.3);   /* More opaque */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.1);
  --shadow-inner: inset 0 1px 0 #fff;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --transition-fast: 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-slow: 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --lh-tight: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --card-padding-mobile: 16px;
  --card-padding-desktop: 22px;
  --card-gap: 12px;
}

/* Background limpo */
[data-tema="claro-tech"] body {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%) !important;
  background-attachment: fixed !important;
}

/* Cards limpos - branco com sombra sutil */
[data-tema="claro-tech"] section,
[data-tema="claro-tech"] .box,
[data-tema="claro-tech"] .module-card,
[data-tema="claro-tech"] .stat,
[data-tema="claro-tech"] .module-stat,
[data-tema="claro-tech"] .pf-card,
[data-tema="claro-tech"] .notif-item,
[data-tema="claro-tech"] .notification-panel section,
[data-tema="claro-tech"] .cn-link,
[data-tema="claro-tech"] .cn-ok,
[data-tema="claro-tech"] .unid-card,
[data-tema="claro-tech"] .asg-dir-card,
[data-tema="claro-tech"] .asg-group,
[data-tema="claro-tech"] .asg-unidades,
[data-tema="claro-tech"] .asg-names,
[data-tema="claro-tech"] .asg-detail,
[data-tema="claro-tech"] .treino-card,
[data-tema="claro-tech"] .prob-card,
[data-tema="claro-tech"] .om-card,
[data-tema="claro-tech"] .lv-item,
[data-tema="claro-tech"] .lv-foto,
[data-tema="claro-tech"] .lv-prev,
[data-tema="claro-tech"] .asg-orfas,
[data-tema="claro-tech"] .asg-orfa,
[data-tema="claro-tech"] .asg-semhoje,
[data-tema="claro-tech"] .cfg-preview,
[data-tema="claro-tech"] .settings-main,
[data-tema="claro-tech"] .settings-nav {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-base) !important;
}

/* Hover sutil */
[data-tema="claro-tech"] section:hover,
[data-tema="claro-tech"] .box:hover,
[data-tema="claro-tech"] .module-card:hover,
[data-tema="claro-tech"] .stat:hover,
[data-tema="claro-tech"] .module-stat:hover,
[data-tema="claro-tech"] .pf-card:hover,
[data-tema="claro-tech"] .notif-item:hover,
[data-tema="claro-tech"] .unid-card:hover,
[data-tema="claro-tech"] .asg-dir-card:hover,
[data-tema="claro-tech"] .asg-group:hover,
[data-tema="claro-tech"] .treino-card:hover,
[data-tema="claro-tech"] .prob-card:hover,
[data-tema="claro-tech"] .om-card:hover,
[data-tema="claro-tech"] .lv-item:hover,
[data-tema="claro-tech"] .lv-foto:hover,
[data-tema="claro-tech"] .lv-prev:hover,
[data-tema="claro-tech"] .asg-orfa:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
}

/* Selected/active state */
[data-tema="claro-tech"] .asg-dir-card.on,
[data-tema="claro-tech"] .module-card.on,
[data-tema="claro-tech"] .module-subnav button.on,
[data-tema="claro-tech"] .topnav button.on,
[data-tema="claro-tech"] .unid-card.on,
[data-tema="claro-tech"] .normas-chip.on {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: var(--shadow-md), 0 0 0 2px var(--accent) inset !important;
}

/* Botões limpos */
[data-tema="claro-tech"] button {
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  transition: all var(--transition-fast) !important;
  min-height: 44px !important;
  border: 1px solid transparent !important;
}

[data-tema="claro-tech"] button.main,
[data-tema="claro-tech"] button[data-module-action="asg-rot-apply"],
[data-tema="claro-tech"] button[data-module-action="asg-copy"],
[data-tema="claro-tech"] button[data-module-action="asg-local-add"],
[data-tema="claro-tech"] .auth-google {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-tema="claro-tech"] button.main:hover,
[data-tema="claro-tech"] button.main:focus-visible {
  background: var(--accent-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

[data-tema="claro-tech"] button.main:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-tema="claro-tech"] button.in {
  background: var(--success-light) !important;
  border-color: var(--success) !important;
  color: var(--success) !important;
}

[data-tema="claro-tech"] button.in:hover {
  background: var(--success) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-tema="claro-tech"] button.out,
[data-tema="claro-tech"] button.danger,
[data-tema="claro-tech"] .asg-del-lista {
  background: var(--danger-light) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

[data-tema="claro-tech"] button.out:hover,
[data-tema="claro-tech"] button.danger:hover,
[data-tema="claro-tech"] .asg-del-lista:hover {
  background: var(--danger) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-tema="claro-tech"] button.link {
  color: var(--accent) !important;
  background: transparent !important;
  border: none !important;
  font-weight: 500 !important;
}

[data-tema="claro-tech"] button.link:hover {
  color: var(--accent-hover) !important;
  text-decoration: underline !important;
}

[data-tema="claro-tech"] button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

[data-tema="claro-tech"] button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Botões pequenos */
[data-tema="claro-tech"] .mover,
[data-tema="claro-tech"] .actions button:not(.main):not(.in):not(.out):not(.danger):not(.link) {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  min-width: 40px !important;
  font-size: 0.85rem !important;
}

[data-tema="claro-tech"] .mover:hover,
[data-tema="claro-tech"] .actions button:not(.main):not(.in):not(.out):not(.danger):not(.link):hover {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

/* Inputs limpos */
[data-tema="claro-tech"] input,
[data-tema="claro-tech"] select,
[data-tema="claro-tech"] textarea {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  padding: 12px 14px !important;
  transition: all var(--transition-fast) !important;
  min-height: 44px !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-tema="claro-tech"] input::placeholder,
[data-tema="claro-tech"] textarea::placeholder {
  color: var(--ink-dim) !important;
}

[data-tema="claro-tech"] input:focus,
[data-tema="claro-tech"] select:focus,
[data-tema="claro-tech"] textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm) !important;
  outline: none !important;
}

[data-tema="claro-tech"] label {
  color: var(--ink-muted) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.02em !important;
}

/* Select */
[data-tema="claro-tech"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 38px !important;
  appearance: none !important;
}

/* Tabelas limpas */
[data-tema="claro-tech"] table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

[data-tema="claro-tech"] th {
  background: var(--bg) !important;
  border-bottom: 2px solid var(--line) !important;
  color: var(--ink-muted) !important;   /* Use darker ink-muted */
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 16px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

[data-tema="claro-tech"] td {
  border-bottom: 1px solid var(--line) !important;
  padding: 12px 16px !important;
  color: var(--ink) !important;
  vertical-align: middle !important;
  transition: background var(--transition-fast) !important;
}

[data-tema="claro-tech"] tr:hover td {
  background: var(--accent-light) !important;
}

[data-tema="claro-tech"] tr:last-child td {
  border-bottom: none !important;
}

/* Status pills limpos */
[data-tema="claro-tech"] .st,
[data-tema="claro-tech"] .tag,
[data-tema="claro-tech"] .module-status,
[data-tema="claro-tech"] .asg-dir-turnos,
[data-tema="claro-tech"] .pend-row b,
[data-tema="claro-tech"] .pf-tag {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

[data-tema="claro-tech"] .st.aprovada,
[data-tema="claro-tech"] .st.ativas,
[data-tema="claro-tech"] .pf-tag:not(.bad) {
  background: var(--success-light) !important;
  color: var(--success) !important;
  border: 1px solid var(--success-medium) !important;
}

[data-tema="claro-tech"] .st.pendente,
[data-tema="claro-tech"] .st.recusada,
[data-tema="claro-tech"] .pf-tag.bad {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger-medium) !important;
}

[data-tema="claro-tech"] .tag {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
  border: 1px solid var(--warning-medium) !important;
}

/* Topbar limpa */
[data-tema="claro-tech"] header.topbar {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--line) !important;
  border-bottom-color: var(--accent) !important;
  box-shadow: var(--shadow-md) !important;
}

[data-tema="claro-tech"] .brand-logo {
  background: linear-gradient(135deg, var(--accent), var(--brand-to)) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

[data-tema="claro-tech"] .brand-name {
  background: linear-gradient(90deg, var(--accent), var(--brand-to)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-tema="claro-tech"] .topnav button {
  color: var(--ink-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}

[data-tema="claro-tech"] .topnav button:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

[data-tema="claro-tech"] .topnav button.on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;            /* White for contrast on accent background */
  box-shadow: 0 0 0 1px var(--accent) inset !important;
}

[data-tema="claro-tech"] .topnav button.on::after {
  background: var(--brand) !important;
}

[data-tema="claro-tech"] .topnav button svg {
  color: var(--ink-dim) !important;
  opacity: 0.7 !important;
}

[data-tema="claro-tech"] .topnav button.on svg,
[data-tema="claro-tech"] .topnav button:hover svg {
  color: var(--accent) !important;
  opacity: 1 !important;
}

[data-tema="claro-tech"] .user-txt b {
  color: var(--ink) !important;
}

[data-tema="claro-tech"] .user-txt small {
  color: var(--accent) !important;
}

[data-tema="claro-tech"] .avatar {
  background: linear-gradient(135deg, var(--accent), var(--brand-to)) !important;
  border: 2px solid var(--line) !important;
}

/* Notification bell */
[data-tema="claro-tech"] .notification-bell {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--ink-muted) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-tema="claro-tech"] .notification-bell:hover {
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

[data-tema="claro-tech"] .notification-count {
  background: var(--danger) !important;
  box-shadow: 0 0 12px var(--danger) !important;
}

/* Module cards hub */
[data-tema="claro-tech"] .module-card {
  border-radius: var(--radius-xl) !important;
  padding: 28px !important;
  min-height: 200px !important;
}

[data-tema="claro-tech"] .module-card::before {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
}

[data-tema="claro-tech"] .mc-ico {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-ink) !important;             /* White text for contrast on accent background */
  border-radius: var(--radius-md) !important;
}

[data-tema="claro-tech"] .module-card:hover .mc-ico {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Checklist hero */
[data-tema="claro-tech"] .asg-hero {
  background: var(--bg) !important;
}

[data-tema="claro-tech"] .asg-start {
  background: linear-gradient(135deg, var(--accent), var(--brand-to)) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-tema="claro-tech"] .asg-start-in .asg-play {
  color: #fff !important;
}

/* Names/detail panels */
[data-tema="claro-tech"] .asg-names {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-tema="claro-tech"] .asg-names-header {
  border-bottom-color: var(--line) !important;
  background: var(--bg) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

[data-tema="claro-tech"] .asg-names-header input {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

[data-tema="claro-tech"] .asg-dir-card.on {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent) inset !important;
}

[data-tema="claro-tech"] .asg-group {
  border-radius: var(--radius-lg) !important;
}

[data-tema="claro-tech"] .asg-head {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}

[data-tema="claro-tech"] .asg-unid select {
  border-color: var(--line) !important;
}

[data-tema="claro-tech"] .asg-unid.falta select {
  border-color: var(--warning) !important;
}

[data-tema="claro-tech"] .asg-unid .on {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}

[data-tema="claro-tech"] .asg-semhoje {
  background: var(--accent-light) !important;
  border-color: var(--accent-medium) !important;
  color: var(--ink) !important;
}

[data-tema="claro-tech"] .asg-semhoje b {
  color: var(--accent) !important;
}

[data-tema="claro-tech"] .asg-orfas {
  border-style: dashed !important;
  border-color: var(--line) !important;
  background: var(--bg) !important;
}

[data-tema="claro-tech"] .asg-orfas summary {
  color: var(--accent) !important;
}

[data-tema="claro-tech"] .asg-orfa {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

[data-tema="claro-tech"] .asg-del-lista {
  border-color: var(--danger) !important;
}

/* Forms */
[data-tema="claro-tech"] .module-form {
  gap: 16px !important;
}

[data-tema="claro-tech"] .module-form .field {
  margin-bottom: 0 !important;
}

[data-tema="claro-tech"] .module-form input,
[data-tema="claro-tech"] .module-form select,
[data-tema="claro-tech"] .module-form textarea {
  padding: 12px 14px !important;
}

/* Stats */
[data-tema="claro-tech"] .stat,
[data-tema="claro-tech"] .module-stat {
  background: var(--panel) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  border: 1px solid var(--line) !important;
}

[data-tema="claro-tech"] .stat b,
[data-tema="claro-tech"] .module-stat strong {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

[data-tema="claro-tech"] .stat span,
[data-tema="claro-tech"] .module-stat span {
  color: var(--ink-dim) !important;
  font-size: 0.8rem !important;
}

/* Progress bars */
[data-tema="claro-tech"] .bar .trk,
[data-tema="claro-tech"] .treino-bar,
[data-tema="claro-tech"] .asg-prog {
  background: var(--bg) !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
}

[data-tema="claro-tech"] .bar i,
[data-tema="claro-tech"] .treino-bar i,
[data-tema="claro-tech"] .asg-prog i {
  background: linear-gradient(90deg, var(--accent), var(--brand-to)) !important;
  border-radius: 999px !important;
}

/* Treino cards */
[data-tema="claro-tech"] .treino-card {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius-lg) !important;
}

[data-tema="claro-tech"] .treino-card.feito {
  border-color: var(--success-medium) !important;
  background: var(--success-light) !important;
}

[data-tema="claro-tech"] .treino-n {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-medium) !important;
}

[data-tema="claro-tech"] .treino-card.feito .treino-n {
  background: var(--success) !important;
  color: #fff !important;
  border-color: var(--success) !important;
}

[data-tema="claro-tech"] .treino-op {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius-md) !important;
}

[data-tema="claro-tech"] .treino-op.certa {
  border-color: var(--success-medium) !important;
  background: var(--success-light) !important;
}

[data-tema="claro-tech"] .treino-op.errada {
  border-color: var(--danger-medium) !important;
  background: var(--danger-light) !important;
}

/* Settings */
[data-tema="claro-tech"] .settings-nav {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

[data-tema="claro-tech"] .settings-nav button {
  color: var(--ink-muted) !important;
  background: transparent !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
}

[data-tema="claro-tech"] .settings-nav button:hover {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

[data-tema="claro-tech"] .settings-nav button.on {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

[data-tema="claro-tech"] .settings-link {
  background: var(--panel) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--line) !important;
}

[data-tema="claro-tech"] .settings-link:hover {
  border-color: var(--accent) !important;
  background: var(--bg) !important;
}

[data-tema="claro-tech"] .switch .knob {
  background: var(--line) !important;
}

[data-tema="claro-tech"] .switch input:checked + .knob {
  background: var(--accent) !important;
}

[data-tema="claro-tech"] .cfg-preview {
  border-style: dashed !important;
  border-color: var(--line) !important;
  background: var(--bg) !important;
}

[data-tema="claro-tech"] .pv-logo {
  background: linear-gradient(135deg, var(--accent), var(--brand-to)) !important;
}

[data-tema="claro-tech"] .pv-btn {
  background: var(--accent) !important;
}

/* Modal */
[data-tema="claro-tech"] .cn-scan-frame {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5), var(--shadow-xl) !important;
}

[data-tema="claro-tech"] .cn-scan-btn {
  background: linear-gradient(135deg, var(--accent), var(--brand-to)) !important;
}

/* Notif toast */
[data-tema="claro-tech"] .notif-toast {
  background: var(--panel) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-xl) !important;
  color: var(--ink) !important;
}

/* Loading skeleton */
[data-tema="claro-tech"] .skeleton {
  background: linear-gradient(90deg, var(--bg) 25%, var(--line) 50%, var(--bg) 75%) !important;
  background-size: 200% 100% !important;
  animation: claro-shimmer 1.5s infinite !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--line) !important;
}

@keyframes claro-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Scrollbar limpa */
[data-tema="claro-tech"] ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

[data-tema="claro-tech"] ::-webkit-scrollbar-track {
  background: transparent !important;
}

[data-tema="claro-tech"] ::-webkit-scrollbar-thumb {
  background: var(--line) !important;
  border-radius: 4px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

[data-tema="claro-tech"] ::-webkit-scrollbar-thumb:hover {
  background: var(--ink-dim) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-tema="claro-tech"] *,
  [data-tema="claro-tech"] *::before,
  [data-tema="claro-tech"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile adjustments */
@media (max-width: 800px) {
  [data-tema="claro-tech"] .asg-split {
    grid-template-columns: 1fr !important;
  }
  [data-tema="claro-tech"] .asg-names {
    position: sticky !important;
    top: 90px !important;
    max-height: 280px !important;
    height: auto !important;
  }
  [data-tema="claro-tech"] .module-card {
    min-height: auto !important;
    padding: 20px !important;
  }
  [data-tema="claro-tech"] .topnav button {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }
}

/* Theme selector cards */
[data-tema="claro-tech"] .tema-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

[data-tema="claro-tech"] .tema-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  text-align: left !important;
  box-shadow: var(--shadow-md) !important;
}

[data-tema="claro-tech"] .tema-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
}

[data-tema="claro-tech"] .tema-card.on {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent) inset !important;
}

[data-tema="claro-tech"] .tema-ico {
  font-size: 2.5rem !important;
  line-height: 1 !important;
  color: var(--accent) !important;
}

[data-tema="claro-tech"] .tema-nome {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

[data-tema="claro-tech"] .tema-desc {
  font-size: 0.8rem !important;
  color: var(--ink-dim) !important;
  line-height: 1.4 !important;
}

[data-tema="claro-tech"] .switch input:checked + .knob::after {
  background: var(--bg) !important;
}