@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&family=Fraunces:opsz,wght@9..144,600&display=swap');

/* === CLEAN: Warm Cowork palette, system fonts, no effects === */
#frame-opt4.clean .browser-dots span:nth-child(1) { background: #ff5f57; }
#frame-opt4.clean .browser-dots span:nth-child(2) { background: #ffbd2e; }
#frame-opt4.clean .browser-dots span:nth-child(3) { background: #28c940; }
#frame-opt4.clean .browser-chrome { background: #f5f0eb; border-bottom-color: #e8e0d8; }
#frame-opt4.clean .browser-url { background: #fff; border-color: #e8e0d8; color: #6b5b4f; }
#frame-opt4.clean .browser-controls { color: #6b5b4f; }
#frame-opt4.clean .browser-content { background: #faf8f5; }
#frame-opt4.clean .cw-topbar { background: #f5f0eb; border-bottom-color: #e8e0d8; }
#frame-opt4.clean .cw-traffic-lights span { background: #d4c8bc; }
#frame-opt4.clean .cw-nav-arrows { color: #a89888; }
#frame-opt4.clean .cw-mode-tab { color: #6b5b4f; border-bottom-color: transparent; }
#frame-opt4.clean .cw-mode-tab.cw-active { color: #1a1a1a; border-bottom-color: #d4734a; font-weight: 600; }
#frame-opt4.clean .cw-icon-rail { background: #faf8f5; border-right-color: #e8e0d8; }
#frame-opt4.clean .cw-rail-icon { color: #6b5b4f; }
#frame-opt4.clean .cw-rail-icon:hover { color: #1a1a1a; }
#frame-opt4.clean .cw-rail-icon-active { color: #d4734a; }
#frame-opt4.clean .cw-avatar { background: #f5f0eb; border-color: #d4c8bc; color: #6b5b4f; }
#frame-opt4.clean .cw-overview-title { color: #1a1a1a; }
#frame-opt4.clean .cw-filter-btn { background: #fff; border-color: #e8e0d8; color: #6b5b4f; }
#frame-opt4.clean .cw-filter-btn.cw-filter-active { background: #1a1a1a; color: #faf8f5; border-color: #1a1a1a; }
#frame-opt4.clean .cw-session-card { background: #fff; border-color: #e8e0d8; }
#frame-opt4.clean .cw-session-card:hover { border-color: #6b5b4f; }
#frame-opt4.clean .cw-card-header { border-bottom-color: #f0ebe5; }
#frame-opt4.clean .cw-card-title { color: #1a1a1a; }
#frame-opt4.clean .cw-card-time { color: #a89888; }
#frame-opt4.clean .cw-status-running { background: #d4734a; border-color: #c0613a; }
#frame-opt4.clean .cw-status-idle { background: #f5f0eb; border-color: #d4c8bc; }
#frame-opt4.clean .cw-status-done { background: #a89888; border-color: #8a7e70; }
#frame-opt4.clean .cw-card-preview { background: #f5f0eb; }
#frame-opt4.clean .cw-card-preview-title { color: #1a1a1a; }
#frame-opt4.clean .cw-stat-block { background: #fff; color: #1a1a1a; }
#frame-opt4.clean .cw-preview-bar { background: #e8e0d8; }
#frame-opt4.clean .cw-card-msg-user { color: #1a1a1a; }
#frame-opt4.clean .cw-card-msg-claude { color: #6b5b4f; }
#frame-opt4.clean .cw-card-footer { border-top-color: #f0ebe5; }
#frame-opt4.clean .cw-card-meta { color: #a89888; }
#frame-opt4.clean .cw-card-open { background: #fff; border-color: #e8e0d8; color: #1a1a1a; }
#frame-opt4.clean .cw-card-open:hover { background: #f5f0eb; }
#frame-opt4.clean .cw-card-new { border-color: #d4c8bc; }
#frame-opt4.clean .cw-card-new:hover { background: #f5f0eb; }
#frame-opt4.clean .cw-card-new-icon { color: #d4734a; }
#frame-opt4.clean .cw-card-new-label { color: #6b5b4f; }
#frame-opt4.clean .cw-card-completed { opacity: 0.6; }
#frame-opt4.clean .wf-marker { display: none; }

/* === POLISHED: Google Fonts, subtle gradients, shadows, entrance anim === */
#frame-opt4.polished .browser-dots span:nth-child(1) { background: #ff5f57; }
#frame-opt4.polished .browser-dots span:nth-child(2) { background: #ffbd2e; }
#frame-opt4.polished .browser-dots span:nth-child(3) { background: #28c940; }
#frame-opt4.polished .browser-chrome { background: #f5f0eb; border-bottom-color: #e8e0d8; }
#frame-opt4.polished .browser-url { background: #fff; border-color: #e8e0d8; color: #6b5b4f; }
#frame-opt4.polished .browser-controls { color: #6b5b4f; }
#frame-opt4.polished .browser-content { background: #faf8f5; }
#frame-opt4.polished { font-family: 'Source Sans 3', -apple-system, sans-serif; }
#frame-opt4.polished .cw-topbar { background: linear-gradient(180deg, #f7f2ec, #f0ebe5); border-bottom-color: #e8e0d8; }
#frame-opt4.polished .cw-traffic-lights span { background: #d4c8bc; }
#frame-opt4.polished .cw-nav-arrows { color: #a89888; }
#frame-opt4.polished .cw-mode-tab { color: #6b5b4f; transition: color 150ms ease-out; }
#frame-opt4.polished .cw-mode-tab.cw-active { color: #1a1a1a; border-bottom-color: #d4734a; }
#frame-opt4.polished .cw-icon-rail { background: #faf8f5; border-right-color: #e8e0d8; }
#frame-opt4.polished .cw-rail-icon { color: #6b5b4f; transition: color 150ms ease-out; }
#frame-opt4.polished .cw-rail-icon:hover { color: #1a1a1a; }
#frame-opt4.polished .cw-rail-icon-active { color: #d4734a; }
#frame-opt4.polished .cw-avatar { background: #f5f0eb; border-color: #d4c8bc; color: #6b5b4f; }
#frame-opt4.polished .cw-overview-title { color: #1a1a1a; font-family: 'Fraunces', serif; font-weight: 600; }
#frame-opt4.polished .cw-filter-btn { background: #fff; border-color: #e8e0d8; color: #6b5b4f; transition: all 150ms ease-out; }
#frame-opt4.polished .cw-filter-btn:hover { background: #f5f0eb; }
#frame-opt4.polished .cw-filter-btn.cw-filter-active { background: #1a1a1a; color: #faf8f5; border-color: #1a1a1a; }
#frame-opt4.polished .cw-session-card {
  background: #fff; border-color: #e8e0d8;
  box-shadow: 0 2px 8px rgba(107,91,79,0.08);
  transition: box-shadow 200ms ease-out, border-color 200ms ease-out;
}
#frame-opt4.polished .cw-session-card:hover {
  border-color: #6b5b4f;
  box-shadow: 0 4px 16px rgba(107,91,79,0.13);
}
#frame-opt4.polished .cw-card-header { border-bottom-color: #f0ebe5; }
#frame-opt4.polished .cw-card-title { color: #1a1a1a; font-weight: 600; }
#frame-opt4.polished .cw-card-time { color: #a89888; }
#frame-opt4.polished .cw-status-running { background: #d4734a; border-color: #c0613a; }
#frame-opt4.polished .cw-status-idle { background: #f5f0eb; border-color: #d4c8bc; }
#frame-opt4.polished .cw-status-done { background: #a89888; border-color: #8a7e70; }
#frame-opt4.polished .cw-card-preview { background: linear-gradient(135deg, #f5f0eb, #faf8f5); }
#frame-opt4.polished .cw-card-preview-title { color: #1a1a1a; }
#frame-opt4.polished .cw-stat-block { background: #fff; color: #1a1a1a; box-shadow: 0 1px 3px rgba(107,91,79,0.08); }
#frame-opt4.polished .cw-preview-bar { background: #e8e0d8; }
#frame-opt4.polished .cw-card-msg-user { color: #1a1a1a; }
#frame-opt4.polished .cw-card-msg-claude { color: #6b5b4f; }
#frame-opt4.polished .cw-card-footer { border-top-color: #f0ebe5; }
#frame-opt4.polished .cw-card-meta { color: #a89888; }
#frame-opt4.polished .cw-card-open { background: #fff; border-color: #e8e0d8; color: #1a1a1a; transition: all 150ms ease-out; }
#frame-opt4.polished .cw-card-open:hover { background: #f5f0eb; }
#frame-opt4.polished .cw-card-new { border-color: #d4c8bc; transition: background 150ms ease-out; }
#frame-opt4.polished .cw-card-new:hover { background: #f5f0eb; }
#frame-opt4.polished .cw-card-new-icon { color: #d4734a; }
#frame-opt4.polished .cw-card-new-label { color: #6b5b4f; }
#frame-opt4.polished .cw-card-completed { opacity: 0.6; }
#frame-opt4.polished .wf-marker { display: none; }

/* Polished: running status pulse */
@media (prefers-reduced-motion: no-preference) {
  @keyframes opt4-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
  #frame-opt4.polished .cw-status-running { animation: opt4-pulse 2s ease-in-out infinite; }

  @keyframes opt4-cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  #frame-opt4.polished .cw-session-card:nth-child(1) { animation: opt4-cardIn 300ms ease-out both; }
  #frame-opt4.polished .cw-session-card:nth-child(2) { animation: opt4-cardIn 300ms ease-out 50ms both; }
  #frame-opt4.polished .cw-session-card:nth-child(3) { animation: opt4-cardIn 300ms ease-out 100ms both; }
  #frame-opt4.polished .cw-session-card:nth-child(4) { animation: opt4-cardIn 300ms ease-out 150ms both; }
  #frame-opt4.polished .cw-session-card:nth-child(5) { animation: opt4-cardIn 300ms ease-out 200ms both; }
}

/* Polished: decorative accent line on active filter */
#frame-opt4.polished .cw-filter-btn.cw-filter-active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 20%; right: 20%;
  height: 2px;
  background: #d4734a;
  border-radius: 1px;
}
#frame-opt4.polished .cw-filter-btn { position: relative; }

/* Polished: subtle accent on card header for running sessions */
#frame-opt4.polished .cw-session-card:not(.cw-card-completed):not(.cw-card-new) .cw-card-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #d4734a, transparent);
  border-radius: 8px 8px 0 0;
}
#frame-opt4.polished .cw-card-header { position: relative; }

/* --- Self-reveal: hide badge, color sub-tabs --- */
#frame-opt4-tabs .sub-tab-badge { display: none; }
#frame-opt4-tabs .sub-tab-btn[data-variant="clean"] { color: #64B5F6; }
#frame-opt4-tabs .sub-tab-btn[data-variant="clean"]:hover { color: #1E88E5; }
#frame-opt4-tabs .sub-tab-btn[data-variant="clean"].active { color: #1565C0; border-bottom-color: #1565C0; }
#frame-opt4-tabs .sub-tab-btn[data-variant="polished"] { color: #81C784; }
#frame-opt4-tabs .sub-tab-btn[data-variant="polished"]:hover { color: #43A047; }
#frame-opt4-tabs .sub-tab-btn[data-variant="polished"].active { color: #2E7D32; border-bottom-color: #2E7D32; }