:root{--primary: #2563eb;--primary-hover: #1d4ed8;--bg-main: #f8fafc;--bg-card: #ffffff;--text-main: #0f172a;--text-muted: #64748b;--border: #e2e8f0;--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--radius: 12px;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--sidebar-width: 260px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{cursor:pointer;border:none;background:none;font-family:inherit;transition:all .2s ease}input,select,textarea{font-family:inherit;font-size:14px}.premium-card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:2rem;transition:transform .2s ease,box-shadow .2s ease}.premium-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.animate-fade{animation:fadeIn .3s ease-out forwards}.animate-scale{animation:scaleIn .2s cubic-bezier(.16,1,.3,1) forwards}.desktop-only{display:flex}.mobile-only{display:none}@media (max-width: 1024px){.desktop-only{display:none!important}.mobile-only{display:flex!important}.premium-card{padding:1rem!important}}.sidebar-container{width:260px;background-color:var(--bg-card);border-right:1px solid var(--border);height:100vh;display:flex;flex-direction:column;padding:1.5rem;position:sticky;top:0;z-index:1001;transition:transform .3s ease}.responsive-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.task-modal-grid{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}@media (max-width: 1024px){.sidebar-container{position:fixed;left:0;transform:translate(-100%)}.sidebar-container.open{transform:translate(0)}.responsive-grid{grid-template-columns:1fr;gap:1.2rem}}.task-info-bar{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);background-color:#fcfcfc}.task-description-compact{font-size:.9rem;line-height:1.5;color:var(--text-main);background:#fff;padding:.8rem 1rem;border-radius:8px;border:1px solid var(--border);margin-bottom:1rem;border-left:4px solid var(--primary);white-space:pre-wrap}.task-details-flex{display:flex;flex-wrap:wrap;gap:2rem}.task-detail-item{flex:1;min-width:150px}.task-detail-item h5{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.4rem;font-weight:700}.task-items-container{padding:1.5rem;background-color:#fff;flex:1}@media (max-width: 768px){.task-details-flex{flex-direction:column;gap:1.2rem}.task-detail-item{min-width:100%}.task-info-bar,.task-items-container{padding:1rem}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .3s ease}@media (min-width: 1025px){.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;padding:0;width:100%;z-index:2000}.modal-content-wide,.modal-content-medium{margin-left:var(--sidebar-width);max-width:min(800px,calc(95vw - var(--sidebar-width)))!important}}.modal-content-wide{width:90%;max-width:800px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:var(--radius);box-shadow:0 25px 50px -12px #00000040}.modal-content-medium{width:90%;max-width:550px;padding:2rem;max-height:90vh;overflow-y:auto;background:#fff;border-radius:var(--radius);box-shadow:0 25px 50px -12px #00000040}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}@media (max-width: 768px){.modal-content-wide{width:95%!important}.modal-content-medium{width:95%!important;padding:1.2rem!important}.modal-grid{grid-template-columns:1fr;gap:1rem}}