:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0c0f14;--surface: rgba(255, 255, 255, .04);--surface-hover: rgba(255, 255, 255, .07);--border: rgba(255, 255, 255, .08);--text: #e8eaed;--text-dim: rgba(255, 255, 255, .45);--accent: #7c6ff7;--accent-soft: rgba(124, 111, 247, .15)}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}body{padding:0}.app{max-width:440px;margin:0 auto;padding:2rem 1.25rem 3rem}.header{text-align:center;margin-bottom:2.25rem}.header h1{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.25rem}.header p{font-size:.85rem;color:var(--text-dim)}.nav{display:flex;gap:.35rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:.3rem;margin-bottom:2rem}.nav button{flex:1;padding:.6rem 1rem;border:none;border-radius:.55rem;background:transparent;color:var(--text-dim);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.nav button:hover{color:var(--text);background:var(--surface-hover)}.nav button.active{background:var(--accent-soft);color:#c4bfff;font-weight:600}.mood-picker{margin-bottom:1.5rem}.mood-picker h2{font-size:1rem;font-weight:600;margin-bottom:.35rem}.mood-picker .subtitle{font-size:.82rem;color:var(--text-dim);margin-bottom:1.25rem}.moods{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}.mood-btn{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem .8rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface);cursor:pointer;transition:all .2s;min-width:72px}.mood-btn:hover{border-color:#ffffff2e;background:var(--surface-hover);transform:translateY(-2px)}.mood-btn.selected{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 4px 20px #7c6ff733}.mood-btn .emoji{font-size:2rem;line-height:1}.mood-btn .label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:500}.mood-btn.selected .label{color:#c4bfff}.note-area{margin-bottom:1.25rem}.note-area textarea{width:100%;min-height:80px;padding:.85rem 1rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface);color:var(--text);font-family:inherit;font-size:.88rem;resize:vertical;outline:none;transition:border-color .2s}.note-area textarea::placeholder{color:var(--text-dim)}.note-area textarea:focus{border-color:#7c6ff780}.save-btn{width:100%;padding:.85rem;border:none;border-radius:.75rem;background:var(--accent);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.save-btn:hover{background:#6b5ee6}.save-btn:disabled{opacity:.35;cursor:not-allowed}.save-btn:disabled:hover{background:var(--accent)}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(20px);background:#1a6b3a;color:#bbf7d0;padding:.7rem 1.5rem;border-radius:2rem;font-size:.85rem;font-weight:500;opacity:0;transition:all .3s;pointer-events:none;z-index:10}.toast.visible{opacity:1;transform:translate(-50%) translateY(0)}.today-summary{text-align:center;padding:2rem 1rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface);margin-bottom:1.5rem}.today-summary .big-emoji{font-size:3.5rem;line-height:1;margin-bottom:.5rem}.today-summary .mood-label{font-size:1.1rem;font-weight:600;margin-bottom:.25rem}.today-summary .mood-note{font-size:.85rem;color:var(--text-dim);font-style:italic;max-width:280px;margin:0 auto}.today-summary .logged-at{font-size:.72rem;color:var(--text-dim);margin-top:.65rem}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.history-header h2{font-size:1rem;font-weight:600}.clear-btn{font-size:.72rem;color:var(--text-dim);background:none;border:1px solid var(--border);border-radius:.5rem;padding:.3rem .7rem;cursor:pointer;transition:all .2s}.clear-btn:hover{color:#f87171;border-color:#f871714d}.entry-list{display:flex;flex-direction:column;gap:.5rem}.entry-item{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface)}.entry-item .emoji{font-size:1.6rem;line-height:1;flex-shrink:0}.entry-item .details{flex:1;min-width:0}.entry-item .day{font-size:.82rem;font-weight:600}.entry-item .note-preview{font-size:.78rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.entry-item .time{font-size:.72rem;color:var(--text-dim);flex-shrink:0}.delete-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:.25rem;opacity:.5;transition:opacity .2s;flex-shrink:0}.delete-btn:hover{opacity:1;color:#f87171}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-dim)}.empty-state .icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}.empty-state p{font-size:.88rem}.insights-section{margin-top:2rem}.insights-section h2{font-size:1rem;font-weight:600;margin-bottom:1rem}.insight-cards{display:flex;flex-direction:column;gap:.65rem}.insight-card{padding:1rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface)}.insight-card .label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}.insight-card .value{font-size:1.4rem;font-weight:700}.insight-card .sub{font-size:.78rem;color:var(--text-dim);margin-top:.15rem}.week-chart{margin-top:1.5rem}.week-chart h3{font-size:.88rem;font-weight:600;margin-bottom:1rem}.chart-row{display:flex;align-items:end;gap:.5rem;height:120px;padding:0 .25rem;margin-bottom:.5rem}.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}.chart-bar{width:100%;max-width:36px;border-radius:.4rem .4rem 0 0;min-height:4px;transition:height .3s}.chart-label{font-size:.68rem;color:var(--text-dim);margin-top:.4rem;text-transform:uppercase;letter-spacing:.04em}.chart-emoji{font-size:.85rem;margin-bottom:.25rem}.streak-banner{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;border:1px solid rgba(250,204,21,.15);border-radius:.75rem;background:#facc150f;margin-bottom:1.5rem}.streak-banner .streak-icon{font-size:1.3rem}.streak-banner .streak-text{font-size:.85rem;font-weight:500}.streak-banner .streak-text strong{color:#facc15}@media(max-width:480px){.app{padding:1.25rem 1rem 2rem}.mood-btn{min-width:60px;padding:.8rem .6rem}.mood-btn .emoji{font-size:1.7rem}}