:root{--bg-main: #0b0f19;--bg-card: rgba(21, 29, 44, .75);--bg-card-hover: rgba(30, 42, 64, .85);--bg-glass: rgba(15, 23, 42, .65);--border-color: rgba(255, 255, 255, .08);--border-glow: rgba(99, 102, 241, .3);--primary: #6366f1;--primary-hover: #4f46e5;--primary-glow: rgba(99, 102, 241, .25);--text-main: #f8fafc;--text-muted: #94a3b8;--text-dim: #64748b;--accent-blue: #3b82f6;--accent-emerald: #10b981;--accent-amber: #f59e0b;--accent-rose: #f43f5e;--accent-purple: #a855f7;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-main: 0 10px 30px -5px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(99, 102, 241, .15);--font-family: "Plus Jakarta Sans", "Sarabun", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-main);color:var(--text-main);min-height:100vh;background-image:radial-gradient(circle at 15% 15%,rgba(99,102,241,.12) 0%,transparent 40%),radial-gradient(circle at 85% 80%,rgba(168,85,247,.1) 0%,transparent 40%);background-attachment:fixed;overflow-x:hidden;line-height:1.5}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f172a80}::-webkit-scrollbar-thumb{background:#94a3b840;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6366f180}.app-container{display:flex;flex-direction:column;min-height:100vh}.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100;gap:1.5rem;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:.75rem}.brand-icon{width:40px;height:40px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary),var(--accent-purple));display:flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:var(--shadow-glow)}.brand-title{font-size:1.35rem;font-weight:800;background:linear-gradient(135deg,#fff,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}.brand-subtitle{font-size:.75rem;color:var(--text-muted);font-weight:500}.role-switcher-container{display:flex;align-items:center;gap:.75rem;background:#1e293b99;padding:.4rem .8rem;border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all .2s ease}.role-switcher-container:hover{border-color:var(--border-glow)}.role-label{font-size:.8rem;color:var(--text-muted);white-space:nowrap}.role-select{background:transparent;color:var(--text-main);border:none;font-weight:600;font-size:.95rem;font-family:inherit;cursor:pointer;outline:none;padding-right:.5rem}.role-select option{background:#1e293b;color:#f8fafc}.navbar-actions{display:flex;align-items:center;gap:.75rem}.search-box{position:relative;display:flex;align-items:center}.search-input{background:#1e293b80;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.5rem 1rem .5rem 2.3rem;color:var(--text-main);font-size:.88rem;font-family:inherit;width:220px;transition:all .2s ease}.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);width:280px}.search-icon{position:absolute;left:.75rem;color:var(--text-muted);pointer-events:none}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.1rem;border-radius:var(--radius-md);font-size:.88rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s ease;border:none;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--primary),#4f46e5);color:#fff;box-shadow:0 4px 12px #6366f14d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #6366f166}.btn-secondary{background:#1e293bb3;color:var(--text-main);border:1px solid var(--border-color)}.btn-secondary:hover{background:#334155cc;border-color:#fff3}.btn-sm{padding:.35rem .7rem;font-size:.8rem;border-radius:var(--radius-sm)}.main-content{flex:1;padding:2rem;max-width:1600px;margin:0 auto;width:100%}.view-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.view-title-group h1{font-size:1.75rem;font-weight:800;display:flex;align-items:center;gap:.75rem}.view-title-group p{color:var(--text-muted);font-size:.9rem;margin-top:.25rem}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:2rem}.metric-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;transition:all .25 ease;position:relative;overflow:hidden}.metric-card:hover{transform:translateY(-2px);border-color:var(--border-glow)}.metric-info h3{font-size:.85rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.metric-value{font-size:2rem;font-weight:800;margin-top:.25rem;line-height:1}.metric-icon{width:50px;height:50px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem}.section-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem}.section-title{font-size:1.1rem;font-weight:700;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.member-card{background:#1e293b80;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem 1.25rem;transition:all .2s ease;cursor:pointer}.member-card:hover,.member-card.active{border-color:var(--primary);background:#1e293bcc}.member-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.member-user-info{display:flex;align-items:center;gap:.75rem}.member-avatar{font-size:1.5rem;width:40px;height:40px;background:#ffffff0d;border-radius:50%;display:flex;align-items:center;justify-content:center}.member-name{font-weight:700;font-size:.95rem}.member-role{font-size:.78rem;color:var(--text-muted)}.workload-bar-container{margin-top:.75rem}.workload-bar{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;display:flex}.workload-segment{height:100%;transition:width .3s ease}.workload-stats{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-muted);margin-top:.5rem}.kanban-board{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;align-items:start}@media (max-width: 1200px){.kanban-board{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.kanban-board{grid-template-columns:1fr}.navbar,.main-content{padding:1rem}}.kanban-column{background:#0f172a80;border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1rem;min-height:550px;display:flex;flex-direction:column;transition:all .2s ease}.kanban-column.drag-over{background:#6366f114;border-color:var(--primary);border-style:dashed}.column-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.88rem;margin-bottom:1rem;border-bottom:1px solid var(--border-color)}.column-title{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:700}.column-count{background:#ffffff1a;color:var(--text-main);padding:.15rem .6rem;border-radius:12px;font-size:.78rem;font-weight:700}.task-list{display:flex;flex-direction:column;gap:1rem;flex:1}.task-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.1rem;cursor:grab;transition:all .2s ease;position:relative}.task-card:hover{transform:translateY(-2px);border-color:#fff3;box-shadow:var(--shadow-main);background:var(--bg-card-hover)}.task-card:active{cursor:grabbing}.task-card.dragging{opacity:.4;border-style:dashed}.task-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.task-title{font-size:.95rem;font-weight:700;color:var(--text-main);line-height:1.35}.task-desc{font-size:.83rem;color:var(--text-muted);margin-bottom:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.88rem}.tag-badge{font-size:.72rem;padding:.15rem .5rem;border-radius:4px;background:#ffffff0f;color:var(--text-muted);border:1px solid rgba(255,255,255,.05)}.priority-badge{font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:20px;white-space:nowrap}.task-meta{display:flex;align-items:center;justify-content:space-between;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.06);font-size:.78rem;color:var(--text-muted)}.deadline-badge{display:flex;align-items:center;gap:.35rem}.deadline-badge.overdue{color:var(--accent-rose);font-weight:700}.deadline-badge.due-soon{color:var(--accent-amber);font-weight:600}.task-assignee{display:flex;align-items:center;gap:.35rem;font-weight:600;color:var(--text-main)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .2s ease}.modal-content{background:#151d2c;border:1px solid var(--border-color);border-radius:var(--radius-xl);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px #000000b3;padding:1.75rem;position:relative}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.modal-title{font-size:1.35rem;font-weight:700}.btn-close{background:transparent;border:none;color:var(--text-muted);font-size:1.25rem;cursor:pointer;padding:.25rem;border-radius:50%;transition:all .2s ease}.btn-close:hover{color:var(--text-main);background:#ffffff1a}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.85rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem}.form-input,.form-select,.form-textarea{width:100%;background:#1e293b99;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.65rem .9rem;color:var(--text-main);font-family:inherit;font-size:.9rem;transition:all .2s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@keyframes fadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
