html[data-look="cocoa"] {
  --bg: #F6F3EF; --ink: #27231F; --muted: #5C534C; --line: #E6DFD6; --card: #fff;
  --header-a: #3F2B25; --header-b: #89644E; --btn: #624333; --point: #D8BE8A; --point-soft: #F4EBD7;
}
#to-dash {
  position: fixed; top: 7px; right: 12px; z-index: 200;
  display: inline-flex; align-items: center; gap: 8px;
  background: #0f766e; color: #fff; text-decoration: none;
  border: 1px solid #0f766e; border-radius: 7px;
  padding: 11px 17px;
  font: 800 14px Pretendard, sans-serif;
  box-shadow: 0 2px 6px #0f766e33;
}
#to-dash::before {
  content: "";
  width: 18px; height: 14px;
  background: currentColor;
  clip-path: polygon(100% 36%, 42% 36%, 42% 4%, 0 50%, 42% 96%, 42% 64%, 100% 64%);
}
#to-dash:hover { background: #095f59; border-color: #095f59; }
#to-dash:focus-visible { outline: 3px solid #D8BE8A; outline-offset: 2px; }
html[data-look="cocoa"] body { background: var(--bg) !important; color: var(--ink); }
html[data-look="cocoa"] body > div[style*="7c2d12"] {
  background: #624333 !important; color: #fff !important; padding-right: 168px !important;
}
html[data-look="cocoa"] .bg-violet-950\/80,
html[data-look="cocoa"] .bg-slate-900\/90 {
  background-color: rgba(63, 43, 37, .9) !important;
}
html[data-look="cocoa"] .bg-violet-50,
html[data-look="cocoa"] .bg-violet-50\/50 { background-color: var(--point-soft) !important; }
html[data-look="cocoa"] .text-violet-200,
html[data-look="cocoa"] .text-violet-300,
html[data-look="cocoa"] .text-violet-900 { color: #D8BE8A !important; }
html[data-look="cocoa"] .bg-purple-gradient,
html[data-look="cocoa"] .quick-nav-btn.evaluated {
  background: linear-gradient(135deg, var(--header-a), var(--header-b)) !important;
  color: #fff !important;
}
html[data-look="cocoa"] .bg-purple-gradient-light,
html[data-look="cocoa"] .cand-item.active,
html[data-look="cocoa"] .cand-item:hover,
html[data-look="cocoa"] .bg-violet-100 { background: var(--point-soft) !important; color: var(--ink) !important; }
html[data-look="cocoa"] .cand-item.active { border-left-color: var(--btn) !important; }
html[data-look="cocoa"] .bg-slate-50,
html[data-look="cocoa"] .bg-slate-50\/50 { background-color: var(--bg) !important; }
html[data-look="cocoa"] .score-input:focus { outline-color: var(--btn) !important; }
html[data-look="cocoa"] .text-violet-600,
html[data-look="cocoa"] .text-violet-700,
html[data-look="cocoa"] .text-violet-800,
html[data-look="cocoa"] .admin-tab-btn.active { color: var(--btn) !important; border-bottom-color: var(--btn) !important; }
html[data-look="cocoa"] .border-violet-200,
html[data-look="cocoa"] .border-violet-100 { border-color: var(--line) !important; }
html[data-look="cocoa"] header.bg-slate-900 {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--header-a), var(--header-b)) !important;
}
html[data-look="cocoa"] .bg-slate-900 { background-color: #3F2B25 !important; color: #fff; }
html[data-look="cocoa"] .bg-violet-600,
html[data-look="cocoa"] .bg-slate-800,
html[data-look="cocoa"] .bg-emerald-500,
html[data-look="cocoa"] .bg-emerald-600,
html[data-look="cocoa"] .bg-orange-900 { background-color: var(--btn) !important; }
html[data-look="cocoa"] .text-emerald-600,
html[data-look="cocoa"] .text-emerald-700,
html[data-look="cocoa"] .text-emerald-800 { color: var(--btn) !important; }
html[data-look="cocoa"] .bg-emerald-50,
html[data-look="cocoa"] .bg-emerald-100,
html[data-look="cocoa"] .bg-emerald-50\/50,
html[data-look="cocoa"] .bg-emerald-50\/60 { background-color: var(--point-soft) !important; }
html[data-look="cocoa"] .bg-header-gradient,
html[data-look="cocoa"] .from-slate-800,
html[data-look="cocoa"] .from-indigo-800,
html[data-look="cocoa"] .from-indigo-500 { --tw-gradient-from: var(--header-a) var(--tw-gradient-from-position); }
html[data-look="cocoa"] .bg-header-gradient { background-image: linear-gradient(135deg, var(--header-a), var(--header-b)) !important; }
html[data-look="cocoa"] .via-slate-900,
html[data-look="cocoa"] .via-indigo-600 { --tw-gradient-via: var(--btn) var(--tw-gradient-via-position); }
html[data-look="cocoa"] .to-indigo-900,
html[data-look="cocoa"] .to-indigo-950,
html[data-look="cocoa"] .to-violet-600 { --tw-gradient-to: var(--header-b) var(--tw-gradient-to-position); }
html[data-look="cocoa"] .to-indigo-50\/30 { --tw-gradient-to: var(--point-soft) var(--tw-gradient-to-position); }
html[data-look="cocoa"] .bg-indigo-500,
html[data-look="cocoa"] .bg-indigo-600 { background-color: var(--btn) !important; }
html[data-look="cocoa"] .glass-card-dark {
  background: #fff !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; backdrop-filter: none !important;
}
html[data-look="cocoa"] .glass-card-dark .text-white,
html[data-look="cocoa"] .glass-card-dark [class*="text-indigo"],
html[data-look="cocoa"] .glass-card-dark [class*="text-emerald"],
html[data-look="cocoa"] .glass-card-dark [class*="text-cyan"],
html[data-look="cocoa"] .glass-card-dark [class*="text-slate-300"] { color: var(--ink) !important; }
html[data-look="cocoa"] .budget-table thead th,
html[data-look="cocoa"] .budget-table thead th * {
  background: var(--point-soft) !important; color: var(--ink) !important;
}
html[data-look="cocoa"] .from-slate-800.via-slate-900.to-indigo-900,
html[data-look="cocoa"] .from-slate-800.via-slate-900.to-indigo-950,
html[data-look="cocoa"] .from-indigo-500.via-indigo-600.to-violet-600 {
  background-image: linear-gradient(to bottom right, #3F2B25, #624333, #89644E) !important;
}
html[data-look="cocoa"] .from-indigo-800.to-indigo-950 {
  background-image: linear-gradient(to right, #3F2B25, #624333) !important;
}