@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;border:none;background:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}menu,ul,ol{list-style:none;margin:0;padding:0}#root,#__next{isolation:isolate}:root{--font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--page-bg: #f5f4f2;--surface: #ffffff;--border: #e2e0dd;--sidebar-bg: #1c1917;--sidebar-text: #e7e5e4;--sidebar-muted:#a8a29e;--text: #292524;--text-muted: #78716c;--accent: #6366f1;--accent-hover: #4f46e5;--danger: #ef4444;--success: #22c55e}html{font-family:var(--font-family)}body{background-color:var(--page-bg);color:var(--text)}h1{font-size:1.875rem;line-height:2.25rem;font-weight:700;color:var(--text-muted);margin-bottom:.5rem}h2{font-size:1.5rem;line-height:1.75rem;font-weight:700;color:var(--primary);margin-bottom:1rem}h2.light{color:var(--light);text-transform:uppercase}@media (max-width: 768px){h2{font-size:1.25rem;line-height:1.75rem}}.card{background-color:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem}.section-label{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.field-input{width:100%;border-bottom:1px solid var(--border);padding:.5rem 0;color:var(--text);background:none}.field-input:focus{outline:none;border-color:var(--accent)}button{font-size:1rem;line-height:1.5rem;padding:.5rem 1rem;border-radius:.375rem;transition:all .3s ease;cursor:pointer}button.primary{background-color:var(--accent);color:#fff}button.primary:hover{color:var(--text);background-color:var(--text-muted)}button.secondary{color:var(--text);border:1px solid var(--border)}button.secondary:hover{color:var(--gray)}button.secondary.danger{color:var(--text-muted)}button.secondary.danger:hover{color:var(--danger)}button.list{text-align:left;padding:.25rem .5rem;border-radius:.125rem;width:100%;margin:.25rem 0;border-left:3px solid transparent;border-radius:0;color:#fff}button.list.active,button.list:hover{color:var(--text-muted);background-color:var(--text);border-left:3px solid var(--border)}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background-color:#dc2626;color:var(--light);padding:12px 24px;border-radius:6px;box-shadow:0 4px 6px -1px #0000001a;z-index:1000;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;animation:slideUp .3s ease-out;button {background: none; border: none; color: var(--light); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; opacity: .8;}}.toast.toast--success{background-color:var(--sidebar-bgGray)}@keyframes slideUp{0%{transform:translate(-50%) translateY(100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}dialog{padding:1.5rem 2rem;border-radius:.375rem;box-shadow:#0000 0 0,#0000 0 0,#0000001a 0 4px 6px -1px,#0000001a 0 2px 4px -2px}dialog::backdrop{background-color:#1c1917e6}dialog .error-list{list-style:disc;list-style-position:inside;margin-bottom:2rem;color:var(--text-muted)}.lang-toggle{position:fixed;top:1rem;right:1.5rem;z-index:100}main{height:100vh;display:flex}main>div{flex:1;padding:3rem 4rem;overflow-y:auto}aside{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;width:22rem;padding:4rem 2rem;background-color:var(--sidebar-bg);color:#fff;border-right:1px solid var(--border);ul {list-style: none; padding: 0; margin: 2rem 0 0;} button.primary {color: var(--text);}}header{max-width:48rem;margin:0 auto 1rem;padding-bottom:1rem;border-bottom:2px solid #d6d3d1}header>div{display:flex;align-items:center;justify-content:space-between}header .intro p{color:var(--gray);margin-bottom:1rem}header>p{color:var(--text-muted);white-space:pre-wrap}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--page-bg)}.login-container{padding:2.5rem;width:100%;max-width:35rem;h1 {font-size: 1.25rem; font-weight: 700; color: var(--accent); margin-bottom: 2rem;} h2 {font-size: 1.5rem; color: var(--text); margin-bottom: .25rem;} .login-subtitle {color: var(--text-muted); font-size: .875rem; margin-bottom: 1.75rem;} .login-error {color: var(--danger); font-size: .875rem; margin-bottom: 1rem;} .login-footer {display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-size: .875rem; color: var(--text-muted);} button.primary {width: 100%; margin-top: 1.5rem; padding: .75rem; font-weight: 600;}}.intro-desc{color:var(--text-muted);margin-bottom:1rem}.empty-project{max-width:28rem;margin:6rem auto 0;text-align:center;svg {width: 7rem; height: auto; margin: 0 auto 1.5rem; display: block;}}.create-project{width:100%;max-width:48rem;margin:0 auto}.create-project>form{margin-top:1rem;menu {display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin: 1rem 0;} .form-row {display: grid; grid-template-columns: 1fr 16rem; gap: 0 2rem;}}.input{display:flex;flex-direction:column;gap:.5rem;margin:1.25rem 0;label {font-size: .75rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05rem; color: var(--text-muted);} input,textarea {width: 100%; border-bottom: 1px solid var(--border) ; border-radius: .125rem; background-color: var(--surface); color: var(--text); padding: .625rem .75rem; transition: border-color .2s; border-radius: 0; &:focus {outline: none; border-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent);}} textarea {min-height: 7rem; resize: vertical;} &&.input--invalid {input,textarea {border-color: var(--danger);} label {color: var(--danger);}}}.tasks{box-shadow:0 1px 3px #0000000a,0 4px 16px #0000000a;max-width:48rem;margin:2rem auto 0;h2 {margin-bottom: 1.25rem;} > p {color: var(--text-muted); font-style: italic; font-size: .875rem; margin-top: 1rem;} > ul {display: flex; flex-direction: column; margin-top: .5rem; background: none; padding: 0; > li {display: flex; align-items: center; gap: .75rem; padding: .75rem .5rem; border-bottom: 1px solid var(--border); border-radius: 0; transition: background-color .15s; &:last-child {border-bottom: none;} p {flex: 1; color: var(--text); margin: 0; font-size: .9rem;} > button.secondary {display: flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; padding: 0; border: 2px solid var(--border); border-radius: .25rem; color: transparent; font-size: .75rem; flex-shrink: 0; order: -1; transition: border-color .15s,background-color .15s,color .15s; &:hover {border-color: var(--accent); background-color: rgba(99,102,241,.08); color: var(--accent);}} &:hover button {opacity: 1;}}}}.create-task{display:flex;align-items:center;gap:.75rem;padding-bottom:1.25rem;margin-bottom:.5rem;input {flex: 1; background: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: .9rem; &::-moz-placeholder {color: var(--text-muted);} &::placeholder {color: var(--text-muted);} &:focus {outline: none;}}}@media (max-width: 768px){main{flex-direction:column;height:auto;min-height:100vh}main>div{padding:2rem 1.5rem}aside{width:100%;flex-direction:row;align-items:center;flex-wrap:wrap;gap:1rem;padding:1.25rem 1.5rem}aside>div{flex:1;ul {margin: 0; display: flex; gap: .5rem; flex-wrap: wrap;}}.create-project>form .form-row{grid-template-columns:1fr}.lang-toggle{top:auto;bottom:1rem}}