:root{--on-surface: #191c1e;--on-surface-variant: #434655;--outline: #737686;--outline-variant: #c3c6d7;--primary: #004ac6;--on-primary: #ffffff;--primary-container: #2563eb;--secondary: #505f76;--secondary-container: #d0e1fb;--surface-container: #eceef0;--surface-container-high: #e6e8ea;--error: #ba1a1a;--error-container: #ffdad6;--accent-in-progress: rgba(37, 99, 235, 1);--accent-done: rgba(16, 185, 129, 1);--font-body: "Inter", system-ui, sans-serif;--font-display: "Manrope", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}*{margin:0}button{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}input,select,textarea{font-family:inherit}body{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--on-surface);-webkit-font-smoothing:antialiased;-moz-osx-osmoothing:grayscale;background:radial-gradient(circle at top left,#f7f9fb,#d0e1fb);min-height:100vh}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}.glass-panel{background:#fffc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 32px #0053db0d}.modal-overlay{background:#00174b26;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.app{padding:32px;min-height:100vh;display:flex;justify-content:center;align-items:flex-start}.app__inner{max-width:80rem;width:100%}.board{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}@media(min-width:768px){.board{grid-template-columns:repeat(3,minmax(0,1fr))}}.banner-error{margin-bottom:24px;border-radius:.75rem;background:#ffdad666;color:var(--error);padding:8px 16px;font-size:14px;line-height:1.5}.loading{color:var(--on-surface-variant);padding:0 8px}.column{border-radius:.75rem;padding:16px;display:flex;flex-direction:column;gap:16px}.column--todo{border-color:#c3c6d74d}.column--in-progress{border-color:#2563eb4d}.column--done{border-color:#10b9814d}.column__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px}.column__heading{display:flex;align-items:center;gap:8px}.column__title{font-family:var(--font-display);font-size:20px;line-height:1.4;font-weight:600;color:var(--on-surface)}.column__count{background:#2563eb33;color:var(--primary);font-family:var(--font-body);font-size:12px;line-height:1;letter-spacing:.05em;font-weight:600;padding:2px 8px;border-radius:9999px}.column__add{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:9999px;color:var(--primary);transition:background-color .15s ease}.column__add:hover{background:#004ac61a}.column__add .material-symbols-outlined{font-size:20px}.column__list{display:flex;flex-direction:column;gap:16px;min-height:24px}.column--drop-active{box-shadow:inset 0 0 0 2px #004ac659,0 8px 32px #0053db0d}.task-slot{display:flex;flex-direction:column;gap:16px}.drop-line{height:3px;border-radius:9999px;background:var(--primary);box-shadow:0 0 0 3px #004ac626}.column__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;border:2px dashed rgba(195,198,215,.3);border-radius:.75rem}.column--in-progress .column__empty{border-color:#004ac633}.column__empty-icon{font-size:30px;margin-bottom:8px;color:#73768666}.column--in-progress .column__empty-icon{color:#004ac64d}.column__empty-text{font-size:12px;line-height:1rem;color:#43465599;font-weight:500}.task-card{border-radius:.75rem;padding:16px;background:#ffffffe6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--outline-variant);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:grab}.task-card:active{cursor:grabbing}.task-card--dragging{opacity:.4;transform:none!important;box-shadow:none!important}.task-card:hover{background:#ffffffd9;transform:translateY(-2px);box-shadow:0 12px 24px -10px #0000001a;border-color:#0053db}.task-card--in-progress,.task-card--in-progress:hover{border-color:var(--accent-in-progress)}.task-card--done,.task-card--done:hover{border-color:var(--accent-done)}.task-card--done{opacity:.8}.task-card__body{display:flex;flex-direction:column;gap:8px}.task-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.task-card__title{font-family:var(--font-body);font-size:16px;line-height:1.6;font-weight:600;color:var(--on-surface);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-card--done .task-card__title{text-decoration:line-through;text-decoration-color:var(--outline)}.task-card__actions{display:flex;gap:4px;opacity:0;transition:opacity .15s ease}.task-card:hover .task-card__actions{opacity:1}.task-card__edit{padding:4px;border-radius:.25rem;color:var(--secondary);transition:background-color .15s ease;display:inline-flex}.task-card__edit:hover{background:var(--secondary-container)}.task-card__edit .material-symbols-outlined{font-size:18px}.task-card__url{font-size:12px;color:var(--primary);width:fit-content;max-width:100%;position:relative;z-index:10;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-card__url:hover{text-decoration:underline}.task-card--done .task-card__url{color:#004ac699}.task-card__desc{font-size:12px;color:var(--on-surface-variant);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task-card--done .task-card__desc{color:#43465599}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}.modal__dialog{border-radius:.75rem;width:100%;max-width:32rem;box-shadow:0 25px 50px -12px #00000040;padding:24px;display:flex;flex-direction:column;gap:24px}.modal__header{display:flex;justify-content:space-between;align-items:center}.modal__title{font-family:var(--font-display);font-size:24px;line-height:1.3;letter-spacing:-.01em;font-weight:600;color:var(--on-surface)}.modal__close{padding:8px;border-radius:9999px;color:var(--outline);transition:background-color .15s ease;display:inline-flex}.modal__close:hover{background:var(--surface-container)}.modal__fields{display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:4px}.field__label{font-family:var(--font-body);font-size:12px;line-height:1;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--outline)}.field__input{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#ffffff80;border:1px solid var(--outline-variant);border-radius:.5rem;padding:8px 12px;font-size:14px;line-height:1.5;color:var(--on-surface)}.field__input::placeholder{color:var(--outline)}.field__input:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.field__input--lg{font-size:16px;line-height:1.6}.field__input--textarea{height:8rem;resize:vertical}select.field__input{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737686' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.modal__footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:16px;border-top:1px solid rgba(195,198,215,.3)}.modal__actions{display:flex;gap:8px}.btn-delete{display:flex;align-items:center;gap:8px;padding:8px 16px;color:var(--error);border-radius:.5rem;transition:background-color .15s ease;font-family:var(--font-body);font-size:14px;line-height:1;font-weight:500}.btn-delete:hover{background:#ffdad633}.btn-delete .material-symbols-outlined{font-size:18px}.btn-close{padding:8px 24px;color:var(--on-surface);border-radius:.5rem;transition:background-color .15s ease;font-family:var(--font-body);font-size:14px;line-height:1;font-weight:500}.btn-close:hover{background:var(--surface-container-high)}.btn-save{padding:8px 32px;background:var(--primary);color:var(--on-primary);border-radius:.5rem;transition:background-color .15s ease;font-family:var(--font-body);font-size:14px;line-height:1;font-weight:500;box-shadow:0 10px 15px -3px #004ac633,0 4px 6px -4px #004ac633}.btn-save:hover{background:#004ac6e6}.btn-save:disabled{opacity:.4;cursor:not-allowed}
