body { background: var(--ambient-color, #fff); transition: background-color 8s ease; }
.lab-section { scroll-margin-top: 85px; }
.lab-section p { line-height: 1.85; }
.lab-section label { font-size: 13px; }
.lab-section select, .lab-section input:not([type="checkbox"]), .lab-section button { min-height: 44px; }
.lab-section input[type="date"], .lab-section input[type="month"] { max-width: 100%; border: 1px solid #dedbe5; border-radius: 10px; padding: 8px; background: #fff; color: #36313e; font: inherit; }
.activity-mode-label { display:flex; gap:10px; align-items:center; font-size:12px; margin: 12px 0; }
.sleep-activity-cell-fill.level-1, .sleep-activity-legend i.level-1 { background:#a5a1ac; }
.sleep-activity-cell-fill.level-2, .sleep-activity-legend i.level-2 { background:#b8a0d8; }
.sleep-activity-cell-fill.level-3, .sleep-activity-legend i.level-3 { background:#8655b5; }
.sleep-activity-cell-fill.level-4, .sleep-activity-legend i.level-4 { background:#512779; }
.sleep-activity-cell-fill.quality-pending { opacity:1; background:repeating-linear-gradient(135deg,#f5f2f7 0 3px,#cdc5d3 3px 4px); }
.activity-art { position:absolute; inset:0; width:100%; height:100%; border-radius:3px; pointer-events:none; }
.sleep-activity-cell { position:relative; }
.lab-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; margin:20px 0; }
.lab-stat { padding:18px; border:1px solid #e9e3ef; background:#faf8fc; border-radius:16px; }
.lab-stat span, .lab-stat small { display:block; color:#79717f; font-size:12px; }
.lab-stat strong { display:block; margin:9px 0; font-size:23px; color:#513663; font-weight:550; }
.lab-stat small { line-height:1.6; }
.lab-details { margin:20px 0; border-top:1px solid #ece7ef; padding-top:16px; font-size:13px; }
.lab-details summary { cursor:pointer; min-height:44px; padding:10px 0; }
.lab-check { display:flex; gap:10px; align-items:center; min-height:44px; }
.lab-check input { width:20px; height:20px; accent-color:#72538c; }
.art-weekdays, .art-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.art-weekdays { margin:22px 0 10px; text-align:center; color:#8c8295; font-size:12px; }
.art-calendar button, .art-empty { min-width:0; border:1px solid #eee8f1; border-radius:12px; overflow:hidden; padding:0; background:#f8f6fa; }
.art-calendar canvas { display:block; width:100%; height:auto; aspect-ratio:1; }
.art-calendar .art-day { display:block; padding:5px; text-align:center; color:#75667e; font-size:12px; }
.art-empty { min-height:70px; color:#b1a8b8; font-size:12px; padding:10px; }
.art-spacer { min-height:0; }
.art-dialog { width:min(820px,calc(100% - 24px)); max-height:92dvh; overflow-y:auto; border:1px solid #e0d8e7; border-radius:20px; padding:24px; color:#343037; }
.art-dialog::backdrop { background:#29223288; backdrop-filter:blur(5px); }
.art-dialog form { display:flex; justify-content:flex-end; }
.art-dialog button, .art-dialog select { min-height:44px; }
.art-dialog h2 { font-size:24px; margin:12px 0; }
#art-main, #share-preview { display:block; width:100%; height:auto; border-radius:14px; margin:15px 0; }
.art-rotation { display:flex; gap:14px; align-items:center; }
.art-rotation input { flex:1; min-width:0; height:44px; accent-color:#765398; }
.lab-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mood-buttons { display:flex; gap:8px; margin:18px 0; }
.mood-buttons button { flex:1; min-width:0; font-size:28px; padding:12px 3px; border-radius:14px; }
.mood-buttons span { display:block; margin-top:5px; font-size:11px; color:#726778; }
.mood-buttons button[aria-pressed="true"] { border-color:#74578c; background:#eee6f5; box-shadow:0 0 0 1px #74578c; }
.lab-note-label { display:grid; gap:8px; }
.lab-note-label textarea { font:inherit; border:1px solid #ded6e5; border-radius:12px; padding:12px; width:100%; resize:vertical; }
.file-button { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border:1px solid #dedbd4; border-radius:9px; cursor:pointer; }
.file-button input { max-width:175px; font-size:11px; margin-left:8px; }
.weather-panel { padding:22px; border:1px solid #e7e0ec; border-radius:18px; margin-top:26px; background:#fcfafd; }
.weather-panel a { text-decoration:underline; }
#correlation-plot { max-width:100%; height:auto; display:block; background:#faf8fc; border-radius:14px; }
.correlation-pairs { max-height:230px; overflow:auto; font-size:12px; line-height:2; margin-top:12px; }
@media (max-width:650px) {
  .art-weekdays, .art-calendar { gap:4px; }
  .art-calendar button, .art-empty { border-radius:7px; }
  .art-empty { min-height:56px; padding:5px; }
  .art-dialog { padding:16px; }
  .lab-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .lab-stat { padding:13px; }
  .lab-stat strong { font-size:20px; }
  .weather-panel { padding:15px; }
  .mood-buttons { gap:4px; }
  .mood-buttons button { font-size:25px; }
  .lab-section .controls label { min-width:0; max-width:100%; }
  .lab-section .controls select { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) { body { transition:none; } }