:root{--color-primary: #0ea5e9;--color-accent: #10b981;--color-bg: #ffffff;--color-fg: #0f172a;--color-muted: #475569;--color-danger: #ef4444;--radius: 10px;--space-1: 8px;--space-2: 12px;--space-3: 16px;--space-4: 24px;--space-6: 32px;--shadow: 0 10px 25px rgba(2, 6, 23, .08);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-fg)}.container{display:flex;align-items:stretch;justify-content:center;gap:var(--space-6);padding:var(--space-4);min-height:100dvh}.auth-container{display:flex;flex-direction:row;align-items:flex-start;padding:12px;gap:10px;min-height:100dvh}.auth-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;width:591px;height:1024px;flex:none;order:0;align-self:stretch;flex-grow:1;background:#fff;position:relative}.card{background:#fff;border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow);max-width:520px;width:100%}.logo-section{display:flex;flex-direction:column;align-items:center;padding:0;gap:10px;width:100%;height:32px;flex:none;order:0;flex-grow:0;margin-bottom:32px}@media (min-width: 768px){.auth-card{position:relative}.logo-section{position:absolute;top:20px;left:20px;align-items:flex-start;margin-bottom:0;z-index:10}}@media (max-width: 767px){.logo-section{align-items:center;margin-bottom:32px}}.logo{display:flex;flex-direction:row;align-items:center;padding:0;gap:12px;width:79px;height:32px;flex:none;order:0;flex-grow:0}.logo-icon{width:32px;height:32px;border-radius:6px;position:relative;flex:none;order:0;flex-grow:0}.vector{position:absolute;background:#367aff}.vector-1{left:0%;right:59.49%;top:0%;bottom:37.24%}.vector-2{left:26.27%;right:62.77%;top:55.55%;bottom:15.33%}.vector-3{left:22.49%;right:70.59%;top:65.09%;bottom:2.66%}.vector-4{left:15.14%;right:77.66%;top:70.48%;bottom:0%}.vector-5{left:6.23%;right:82.08%;top:64.92%;bottom:8.05%}.vector-6{left:1.08%;right:85.77%;top:55.53%;bottom:27.3%}.logo-text{width:35px;height:26px;font-family:Inter,sans-serif;font-style:normal;font-weight:600;font-size:24px;line-height:110%;text-align:center;letter-spacing:-.04em;color:#232323;flex:none;order:1;flex-grow:0}.auth-content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;gap:32px;width:100%;max-width:400px;flex:none;order:1;align-self:stretch;flex-grow:1}.auth-text{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;gap:12px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0}.title{font-family:Inter,sans-serif;font-style:normal;font-weight:700;font-size:32px;line-height:1.2;text-align:center;color:#232323;margin:0 0 8px;width:100%}@media (min-width: 768px){.title{text-align:left;margin-top:60px;max-width:400px;margin-left:auto;margin-right:auto}}@media (max-width: 767px){.title{text-align:center;margin-top:0;max-width:none;margin-left:auto;margin-right:auto}}.subtitle{font-family:Inter,sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.5;color:#969696;text-align:center;margin:0 0 32px;width:100%}@media (min-width: 768px){.subtitle{text-align:left;max-width:400px;margin-left:auto;margin-right:auto}}@media (max-width: 767px){.subtitle{text-align:center;max-width:none;margin-left:auto;margin-right:auto}}.auth-form{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;gap:20px;width:100%;flex:none;order:1;flex-grow:0}.input-group{position:relative;width:100%;height:59px}.input-field{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:16px;gap:2px;isolation:isolate;width:100%;height:59px;border:1.5px solid #D9D9D9;border-radius:10px;background:#fff;font-family:Inter,sans-serif;font-style:normal;font-weight:400;font-size:18px;line-height:150%;color:#232323;flex:none;order:0;flex-grow:0}.input-field:focus{border-color:#367aff;outline:none}.input-label{display:flex;flex-direction:row;align-items:center;padding:0 4px;gap:10px;position:absolute;width:auto;height:21px;left:12px;top:-10.5px;background:#fff;flex:none;order:1;flex-grow:0;z-index:1}.input-label-text{font-family:Inter,sans-serif;font-style:normal;font-weight:500;font-size:14px;line-height:150%;color:#9a9a9a;flex:none;order:0;flex-grow:0}.input-label-text.active{color:#367aff}.calendar-icon{width:24px;height:24px;flex:none;order:0;flex-grow:0;z-index:0;position:relative}.calendar-icon:before{content:"";position:absolute;left:12.5%;right:12.5%;top:8.33%;bottom:8.33%;border:2px solid #232323}.date-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.date-input-wrapper input[type=date]{width:100%;padding:12px 16px;border-radius:8px;border:1px solid #e2e8f0;outline:none;font-size:16px;font-family:Inter,sans-serif;color:#232323;background:#fff;transition:border-color .2s;cursor:pointer}.date-input-wrapper input[type=date]:focus{border-color:#367aff;box-shadow:0 0 0 3px #367aff1a}.date-input-wrapper input[type=date]:hover{border-color:#367aff}.date-input-wrapper input[type=date]::-webkit-calendar-picker-indicator{background:transparent;bottom:0;color:transparent;cursor:pointer;height:auto;left:0;position:absolute;right:0;top:0;width:auto}.date-input-wrapper input[type=date]::-webkit-datetime-edit{padding:0}.date-input-wrapper input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0}.date-input-wrapper input[type=date]::-webkit-datetime-edit-text{color:#6b7280;padding:0 4px}.date-input-wrapper input[type=date]::-webkit-datetime-edit-month-field,.date-input-wrapper input[type=date]::-webkit-datetime-edit-day-field,.date-input-wrapper input[type=date]::-webkit-datetime-edit-year-field{color:#232323;padding:0 2px}.date-input-wrapper input[type=date]::-webkit-datetime-edit-month-field:focus,.date-input-wrapper input[type=date]::-webkit-datetime-edit-day-field:focus,.date-input-wrapper input[type=date]::-webkit-datetime-edit-year-field:focus{background-color:#367aff1a;border-radius:4px;outline:none}.otp-input-wrapper{position:relative;display:flex;align-items:center;gap:10px}.otp-input-wrapper input{padding-right:40px;width:100%}.otp-toggle{position:absolute;right:12px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#6b7280;transition:color .2s}.otp-toggle:hover{color:#367aff}.title{margin:0 0 var(--space-2);font-size:28px;line-height:1.2}.muted{color:var(--color-muted);font-family:Inter,sans-serif;font-weight:400;font-size:16px;line-height:1.5;text-align:center;margin:0}.muted a{color:#367aff;text-decoration:none}.grid.gap{display:grid;gap:16px;width:100%;max-width:400px;margin:0 auto}label{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--color-muted)}input{width:100%;padding:12px 16px;border-radius:8px;border:1px solid #e2e8f0;outline:none;font-size:16px;font-family:Inter,sans-serif;color:#232323;background:#fff;transition:border-color .2s}input:focus{border-color:#367aff}.auth-button{box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:16px 8px;gap:8px;width:100%;height:54px;background:#367aff;border-radius:10px;border:none;cursor:pointer;flex:none;order:3;align-self:stretch;flex-grow:0}.auth-button-text{width:72px;height:22px;font-family:Inter,sans-serif;font-style:normal;font-weight:600;font-size:18px;line-height:120%;letter-spacing:-.01em;color:#fff;flex:none;order:0;flex-grow:0}.auth-link{width:100%;font-family:Inter,sans-serif;font-style:normal;font-weight:400;font-size:18px;line-height:150%;text-align:center;color:#6c6c6c;flex:none;order:2;align-self:stretch;flex-grow:0;margin:0}.auth-link a{color:#367aff;text-decoration:none}.actions{display:flex;gap:var(--space-2);margin-top:var(--space-3)}.topbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid #e2e8f0}.brand{font-weight:800;color:var(--color-primary);text-decoration:none}.link{background:transparent;border:none;color:var(--color-primary);cursor:pointer}.illustration{display:none;flex-direction:row;align-items:flex-start;padding:12px;gap:10px;width:849px;height:1024px;flex:none;order:1;align-self:stretch;flex-grow:0;position:relative}.illustration-content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px;gap:32px;width:825px;height:1000px;background:url(/images/illustration.svg);background-size:cover;background-position:center;border-radius:24px;flex:none;order:0;align-self:stretch;flex-grow:1}.hide-sm{display:none}.password-row{display:flex;gap:var(--space-2)}.check{display:flex;align-items:center;gap:8px}.error{color:var(--color-danger);font-size:14px}.field-error{color:var(--color-danger);font-size:12px;margin-top:4px}input.error{border-color:var(--color-danger)}.dashboard{align-items:flex-start}.stack{display:grid;gap:var(--space-4);width:100%;max-width:720px}.card.welcome .note-composer{display:flex;gap:var(--space-2);align-items:center;margin-top:var(--space-2)}.notes{display:grid;gap:var(--space-2)}.note-card{display:flex;justify-content:space-between;align-items:center;border:1px solid #e2e8f0;padding:var(--space-2) var(--space-3);border-radius:8px;background:#fff}.icon.danger{background:transparent;border:none;color:var(--color-danger);font-size:18px;cursor:pointer}.divider{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#e2e8f0}.divider span{color:var(--color-muted);font-size:14px}.btn.google{display:flex;align-items:center;gap:var(--space-2);justify-content:center;width:100%}.btn{background:#367aff;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;width:100%;font-family:Inter,sans-serif;display:flex;align-items:center;justify-content:center}.btn.primary{background:#367aff;color:#fff}.btn.ghost{background:transparent;color:#367aff;border:1px solid #e2e8f0}.btn.ghost:hover{background:#f8fafc}.btn:disabled{opacity:.6;cursor:not-allowed}.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--color-muted)}.check input[type=checkbox]{width:auto;margin:0}.loading-spinner{display:flex;align-items:center;justify-content:center;padding:var(--space-4);color:var(--color-muted)}input:disabled{opacity:.6;cursor:not-allowed}.dashboard-container{min-height:100vh;background:#fff;padding:0}.dashboard-content{padding:20px;max-width:400px;margin:0 auto}.dashboard-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-bottom:1px solid #f0f0f0}.topbar-left{display:flex;align-items:center;gap:12px}.dashboard-logo{display:flex;align-items:center;justify-content:center}.dashboard-title{font-family:Inter,sans-serif;font-weight:700;font-size:18px;color:#232323;margin:0}.sign-out-btn{background:none;border:none;color:#367aff;font-family:Inter,sans-serif;font-size:16px;font-weight:500;cursor:pointer;padding:0}.sign-out-btn:hover{opacity:.8}.welcome-card{background:#fff;border-radius:12px;padding:24px;margin-bottom:20px;box-shadow:0 2px 8px #0000001a;border:1px solid #f0f0f0}.welcome-title{font-family:Inter,sans-serif;font-weight:700;font-size:24px;color:#232323;margin:0 0 8px;line-height:1.2}.welcome-email{font-family:Inter,sans-serif;font-weight:400;font-size:16px;color:#232323;margin:0}.create-note-btn{width:100%;background:#367aff;color:#fff;border:none;border-radius:12px;padding:16px 24px;font-family:Inter,sans-serif;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:24px;transition:background-color .2s}.create-note-btn:disabled{opacity:.6;cursor:not-allowed}.notes-section{margin-bottom:24px}.notes-title{font-family:Inter,sans-serif;font-weight:700;font-size:18px;color:#232323;margin:0 0 12px}.no-notes{font-family:Inter,sans-serif;font-size:16px;color:#6b7280;text-align:center;padding:24px;margin:0}.dashboard-note-card{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 2px 8px #0000001a;border:1px solid #f0f0f0;transition:box-shadow .2s}.note-content{font-family:Inter,sans-serif;font-size:16px;color:#232323;margin:0;flex:1;padding-right:12px}.delete-note-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:8px;border-radius:6px;transition:background-color .2s;display:flex;align-items:center;justify-content:center;min-width:36px;height:36px}.delete-note-btn:hover{background:#fef2f2}.note-actions{display:flex;gap:4px}.edit-note-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:8px;border-radius:6px;transition:background-color .2s;display:flex;align-items:center;justify-content:center;min-width:36px;height:36px}.edit-note-btn:hover{background:#f0f9ff}.note-edit-form{width:100%;display:flex;flex-direction:column;gap:12px}.note-edit-textarea{width:100%;min-height:80px;padding:12px 16px;border:1px solid #e2e8f0;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;resize:vertical;outline:none}.note-edit-textarea:focus{border-color:#367aff;box-shadow:0 0 0 3px #367aff1a}.btn-primary-small{background:#367aff;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn-secondary-small{background:#f8fafc;color:#475569;border:1px solid #e2e8f0;border-radius:6px;padding:8px 16px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn-secondary-small:hover{background:#f1f5f9}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;padding:24px;width:90%;max-width:500px;box-shadow:0 10px 25px #0003}.modal-content h3{font-family:Inter,sans-serif;font-weight:700;font-size:20px;color:#232323;margin:0 0 16px}.note-textarea{width:100%;min-height:120px;padding:12px 16px;border:1px solid #e2e8f0;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;resize:vertical;outline:none;margin-bottom:20px}.note-textarea:focus{border-color:#367aff;box-shadow:0 0 0 3px #367aff1a}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.btn.secondary{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}.btn.secondary:hover{background:#f1f5f9}@media (min-width: 1200px){.auth-container{justify-content:flex-start}.illustration{display:flex}.hide-sm{display:block}}.welcome-card{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px #0000001a}.welcome-title{font-size:24px;font-weight:700;color:#1f2937;margin:0 0 8px}.welcome-email{font-size:14px;color:#6b7280;margin:0}.create-note-btn{width:100%;background:#3b82f6;color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:24px;transition:background-color .2s}.create-note-btn:hover:not(:disabled){background:#2563eb}.create-note-btn:disabled{background:#9ca3af;cursor:not-allowed}.notes-section{margin-top:24px}.notes-title{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 16px}.notes-list{display:flex;flex-direction:column;gap:12px}.dashboard-note-card{background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s}.dashboard-note-card:hover{box-shadow:0 4px 12px #00000026}.note-content{margin-bottom:12px}.note-text{font-size:16px;color:#1f2937;font-weight:500;margin-bottom:4px}.note-preview{font-size:14px;color:#6b7280;margin:0;line-height:1.4;max-height:60px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.note-actions{display:flex;gap:8px;justify-content:flex-end}.edit-btn,.delete-btn{background:none;border:none;font-size:16px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.edit-btn:hover,.delete-btn:hover{background:#f3f4f6}.note-edit-form{display:flex;flex-direction:column;gap:12px}.note-edit-textarea{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-family:inherit;resize:vertical;min-height:80px}.note-edit-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.note-edit-actions{display:flex;gap:8px;justify-content:flex-end}.btn-secondary-small,.btn-primary-small{padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary-small{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.btn-secondary-small:hover{background:#e5e7eb}.btn-primary-small{background:#3b82f6;color:#fff;border:1px solid #3b82f6}.btn-primary-small:hover{background:#2563eb}.no-notes{text-align:center;color:#6b7280;font-style:italic;margin:20px 0}.illustration-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;background:#ffffffe6;padding:20px;border-radius:12px;box-shadow:0 4px 12px #0000001a}.illustration-logo .logo-text{font-size:18px;font-weight:700;color:#1f2937;margin:0}