:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font-family: 'Sarabun', system-ui, sans-serif; margin:0; background:#f0f8ff; color:#1f2937; }
body.dark { background:#0f172a; color:#e2e8f0; }

.app-header { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#e6f1ff; border-bottom:1px solid #cfe0ff; position:sticky; top:0; z-index:10; }
body.dark .app-header { background:#0b1220; border-color:#15213a; }
.brand { display:flex; gap:10px; align-items:center; }
.logo { font-size:28px; }
.title { font-weight:700; line-height:1.1; }
.subtitle { font-size:12px; opacity:.7; }
.actions .chip { margin-left:8px; }

.container { max-width:980px; margin:0 auto; padding:12px; }

.tabs { display:flex; gap:8px; margin-bottom:10px; }
.tab { flex:1; padding:10px; border:none; border-radius:12px; font-weight:600; background:#eaefff; cursor:pointer; }
.tab.active { background:#cfe0ff; }
body.dark .tab { background:#172033; }
body.dark .tab.active { background:#1e2b46; }

.section { margin:14px 0; padding:12px; border-radius:14px; box-shadow:0 2px 5px rgba(0,0,0,.06); }
.rhythm { background:#ffe0e9; }
.intervention { background:#e0ffe6; }
.procedure { background:#fff1d6; }
.cause { background:#e6f7ff; }
.timer { background:#fff7d1; }
.record { background:#e0ecff; }
.inputs { background:#fff0f7; }

body.dark .rhythm{background:#36232c;} body.dark .intervention{background:#1e2e22;}
body.dark .procedure{background:#3a3020;} body.dark .cause{background:#182536;}
body.dark .timer{background:#3b3622;} body.dark .record{background:#16254a;}
body.dark .inputs{background:#3a2340;}

.wrap{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.cause-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.inputs-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:end; }
.inputs-grid label{ display:flex; flex-direction:column; gap:4px; font-size:14px; }
.inputs-grid input{ padding:8px; border-radius:8px; border:1px solid #ffaad4; background:#fff; }
body.dark .inputs-grid input{ background:#0b1220; border-color:#6b2b56; color:#e2e8f0; }

.btn{ border:none; border-radius:10px; padding:8px 12px; font-size:15px; cursor:pointer; }
.rhythm-btn{ background:#ffb6c1; }
.intervention-btn{ background:#90ee90; }
.procedure-btn{ background:#f7e2b7; }
.cause-btn{ background:#f7d1e0; }
.input-btn{ background:#ff90c2; color:#1f2937; }
.chip{ border:none; border-radius:999px; padding:8px 12px; background:#dbeafe; cursor:pointer; }

.bar{ background:#cbd5e1; border-radius:10px; overflow:hidden; height:20px; }
#ccfBar{ height:100%; width:0%; background:#4caf50; text-align:center; color:#fff; font-size:12px; }

.panel{ display:none; } .panel.show{ display:block; }

.log{ white-space:pre-wrap; background:#fff; padding:10px; border-radius:12px; min-height:160px; max-height:300px; overflow:auto; }
body.dark .log{ background:#0b1220; }

.flow img{ max-width:100%; height:auto; border-radius:10px; display:block; }

.fab{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:99; }
.fab-btn{ width:56px; height:56px; border-radius:999px; border:none; font-size:22px; background:#4a90e2; color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.2); }

.footer{ text-align:center; padding:18px; font-size:14px; opacity:.8; }
.footer a{ color:inherit; }