.app{min-height:calc(100vh - 120px)}.container{max-width:800px;margin:0 auto;padding:0}.date-header{display:flex;align-items:center;justify-content:space-between;background:var(--tfl-white);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);border-radius:12px;box-shadow:0 2px 8px #0036881a;border:1px solid rgba(0,54,136,.1)}.date-info{display:flex;align-items:center;gap:var(--spacing-md)}.date-icon{color:var(--tfl-blue);background:#0036881a;padding:8px;border-radius:8px}.date-title{font-size:1.5rem;font-weight:700;color:var(--tfl-blue);margin:0}.date-subtitle{font-size:.9rem;color:var(--tfl-dark-grey);margin:0;text-transform:capitalize}.add-button{background:var(--tfl-red);color:var(--tfl-white);border:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #e320174d}.add-button:hover{background:#d11d0c;transform:translateY(-2px);box-shadow:0 4px 16px #e3201766}.add-button:active{transform:translateY(0)}.note-form{background:var(--tfl-white);border-radius:12px;padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:0 4px 16px #00368826;border:2px solid var(--tfl-blue);animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.form-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.form-icon{background:var(--tfl-blue);color:var(--tfl-white);padding:8px;border-radius:8px}.form-title{font-size:1.2rem;font-weight:600;color:var(--tfl-blue);margin:0}.form-time{font-size:.9rem;color:var(--tfl-dark-grey);display:flex;align-items:center;gap:var(--spacing-xs)}.note-textarea{width:100%;min-height:120px;padding:var(--spacing-md);border:2px solid rgba(0,54,136,.2);border-radius:8px;font-family:var(--font-family);font-size:1rem;line-height:1.6;resize:vertical;transition:border-color .2s ease}.note-textarea:focus{outline:none;border-color:var(--tfl-blue);box-shadow:0 0 0 3px #0036881a}.note-textarea::placeholder{color:var(--tfl-dark-grey);opacity:.7}.form-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-md)}.button-primary{background:var(--tfl-blue);color:var(--tfl-white);border:none;padding:12px 24px;border-radius:8px;font-family:var(--font-family);font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:var(--spacing-sm)}.button-primary:hover{background:#0052a3;transform:translateY(-1px);box-shadow:0 4px 12px #0036884d}.button-primary:active{transform:translateY(0)}.button-secondary{background:transparent;color:var(--tfl-dark-grey);border:2px solid rgba(102,102,102,.3);padding:12px 24px;border-radius:8px;font-family:var(--font-family);font-weight:500;cursor:pointer;transition:all .2s ease}.button-secondary:hover{background:#6666661a;border-color:var(--tfl-dark-grey)}.form-hint{margin-top:var(--spacing-md);text-align:center}.form-hint small{color:var(--tfl-dark-grey);font-size:.8rem;opacity:.8}.notes-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.note-item{background:var(--tfl-white);border-radius:12px;padding:var(--spacing-lg);box-shadow:0 2px 8px #0036881a;border:1px solid rgba(0,54,136,.1);transition:all .2s ease;position:relative;overflow:hidden}.note-item:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00368826}.note-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.note-meta{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--tfl-dark-grey);font-size:.9rem}.note-sync-status{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.8rem;padding:4px 8px;border-radius:12px;font-weight:500}.sync-pending{background:#ffd70033;color:#b8860b}.sync-synced{background:#00a16633;color:var(--tfl-success)}.sync-error{background:#e3201733;color:var(--tfl-red)}.sync-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.note-text{font-size:1rem;line-height:1.6;color:var(--tfl-blue);margin:0;white-space:pre-wrap}.empty-state{text-align:center;padding:var(--spacing-xl) var(--spacing-lg);background:var(--tfl-white);border-radius:12px;box-shadow:0 2px 8px #0036881a}.empty-icon{font-size:3rem;margin-bottom:var(--spacing-md);opacity:.6}.empty-state h3{color:var(--tfl-blue);margin-bottom:var(--spacing-sm);font-size:1.3rem}.empty-state p{color:var(--tfl-dark-grey);margin-bottom:var(--spacing-lg)}@media (max-width: 768px){.date-header{padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.date-title{font-size:1.3rem}.add-button{width:44px;height:44px}.note-form,.note-item{padding:var(--spacing-md)}.form-actions{flex-direction:column}.button-primary,.button-secondary{width:100%;justify-content:center}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}.add-button:focus,.button-primary:focus,.button-secondary:focus{outline:3px solid rgba(0,54,136,.5);outline-offset:2px}.tfl-loading{display:inline-block;width:20px;height:20px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:tfl-spin 1s linear infinite}@keyframes tfl-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stats-panel{background:var(--tfl-white);border-radius:12px;padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:0 2px 8px #0036881a;border:1px solid rgba(0,54,136,.1)}.stats-title{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--tfl-blue);font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-lg)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--spacing-md)}.stat-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:#0036880d;border-radius:8px;transition:all .2s ease}.stat-item:hover{background:#0036881a;transform:translateY(-1px)}.stat-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff}.stat-icon.today{background:var(--tfl-blue)}.stat-icon.total{background:var(--tfl-dark-grey)}.stat-icon.synced{background:var(--tfl-success)}.stat-icon.error{background:var(--tfl-red)}.stat-content{flex:1}.stat-value{font-size:1.5rem;font-weight:700;color:var(--tfl-blue);line-height:1}.stat-label{font-size:.8rem;color:var(--tfl-dark-grey);margin-top:2px}