:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0f172a;--bg-card: #1e293b;--bg-card-hover: #253348;--border: rgba(255, 255, 255, .08);--text: #f1f5f9;--text-dim: #94a3b8;--accent: #818cf8;--accent-dim: rgba(129, 140, 248, .15);--danger: #f87171;--radius: .75rem}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{max-width:640px;margin:0 auto;padding:1.5rem 1rem 4rem}header{margin-bottom:1.5rem}.header-content{display:flex;flex-direction:column;gap:.25rem}.logo{display:flex;align-items:center;gap:.5rem}.logo-icon{font-size:2rem;line-height:1}h1{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;color:var(--text)}.subtitle{color:var(--text-dim);font-size:.9rem}.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.5rem}.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;text-align:center;display:flex;flex-direction:column;gap:.125rem}.stat-value{font-size:1.1rem;font-weight:700;color:var(--accent);letter-spacing:-.02em}.stat-label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.tabs{display:flex;gap:.25rem;margin-bottom:1.5rem;background:var(--bg-card);border-radius:var(--radius);padding:.25rem;border:1px solid var(--border)}.tab{flex:1;padding:.6rem 1rem;border:none;background:transparent;color:var(--text-dim);font-size:.9rem;font-weight:500;border-radius:calc(var(--radius) - .25rem);cursor:pointer;transition:all .2s}.tab:hover{color:var(--text)}.tab.active{background:var(--accent);color:#fff}.add-btn{width:100%;padding:1.25rem;border:2px dashed rgba(129,140,248,.3);background:var(--accent-dim);color:var(--accent);font-size:1rem;font-weight:600;border-radius:var(--radius);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.add-btn span{font-size:1.5rem;line-height:1}.add-btn:hover{border-color:var(--accent);background:#818cf833}.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.form-card h2{font-size:1.1rem;font-weight:600;margin-bottom:1.25rem;color:var(--text)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.field{display:flex;flex-direction:column;gap:.375rem}.field.full-width{grid-column:1 / -1}.field label{font-size:.8rem;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.field input,.field textarea{padding:.6rem .75rem;background:#0000004d;border:1px solid var(--border);border-radius:.5rem;color:var(--text);font-size:.95rem;font-family:inherit;outline:none;transition:border-color .2s}.field input:focus,.field textarea:focus{border-color:var(--accent)}.field textarea{resize:vertical;min-height:3rem}.quality-select{display:flex;align-items:center;gap:.5rem}.quality-btn{width:2.5rem;height:2.5rem;border:2px solid var(--border);background:transparent;color:var(--text-dim);font-size:.95rem;font-weight:600;border-radius:.5rem;cursor:pointer;transition:all .2s}.quality-btn:hover{border-color:var(--text-dim);color:var(--text)}.quality-btn.selected{color:#fff}.quality-label{font-size:.85rem;font-weight:500;margin-left:.25rem}.form-actions{display:flex;gap:.75rem;margin-top:1.25rem;justify-content:flex-end}.btn-cancel{padding:.6rem 1.25rem;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:.9rem;font-weight:500;border-radius:.5rem;cursor:pointer;transition:all .2s}.btn-cancel:hover{color:var(--text);border-color:var(--text-dim)}.btn-save{padding:.6rem 1.5rem;border:none;background:var(--accent);color:#fff;font-size:.9rem;font-weight:600;border-radius:.5rem;cursor:pointer;transition:opacity .2s}.btn-save:hover{opacity:.9}.recent-entries,.history-section{margin-top:1.5rem}.recent-entries h3,.history-header h3{font-size:.85rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.history-header{margin-bottom:.75rem}.range-info{font-size:.8rem;color:var(--text-dim);margin-top:.25rem}.sleep-card{display:flex;align-items:center;gap:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.5rem;transition:border-color .2s;position:relative}.sleep-card:hover{border-color:#ffffff26}.card-date{display:flex;flex-direction:column;align-items:center;min-width:3rem}.day-name{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.day-date{font-size:.85rem;font-weight:600;color:var(--text)}.card-details{flex:1;min-width:0}.card-time{font-size:.95rem;font-weight:500;color:var(--text)}.card-duration{font-size:.8rem;color:var(--accent);font-weight:600}.card-notes{font-size:.8rem;color:var(--text-dim);margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-quality{display:flex;flex-direction:column;align-items:center;gap:.25rem}.quality-badge{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.85rem;font-weight:700}.quality-text{font-size:.7rem;color:var(--text-dim)}.card-delete{position:absolute;top:.5rem;right:.5rem;width:1.5rem;height:1.5rem;border:none;background:transparent;color:transparent;font-size:1rem;cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:all .2s}.sleep-card:hover .card-delete{color:var(--text-dim)}.card-delete:hover{background:#f8717126;color:var(--danger)!important}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-dim)}.empty-icon{font-size:3rem;display:block;margin-bottom:1rem}.empty-state p{font-size:.95rem;margin-bottom:.25rem}@media(max-width:480px){.stats-bar{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.field.full-width{grid-column:1}.sleep-card{flex-wrap:wrap;gap:.75rem}.card-details{flex-basis:100%;order:3}.card-quality{margin-left:auto;order:2}}