@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap";:root{--color-primary:#dc2626;--color-primary-hover:#b91c1c;--color-primary-light:#fee2e2;--color-primary-50:#fef2f2;--color-black:#0f0f0f;--color-dark:#1a1a1a;--color-dark-2:#2d2d2d;--color-gray-900:#111827;--color-gray-800:#1f2937;--color-gray-700:#374151;--color-gray-600:#4b5563;--color-gray-500:#6b7280;--color-gray-400:#9ca3af;--color-gray-300:#d1d5db;--color-gray-200:#e5e7eb;--color-gray-100:#f3f4f6;--color-gray-50:#f9fafb;--color-white:#fff;--color-success:#059669;--color-success-light:#d1fae5;--color-warning:#d97706;--color-warning-light:#fef3c7;--color-danger:#dc2626;--color-danger-light:#fee2e2;--color-info:#2563eb;--color-info-light:#dbeafe;--gantt-completed:#059669;--gantt-incomplete:#e5e7eb;--gantt-today:#dc262626;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--sidebar-width:260px;--topbar-height:64px;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{color:var(--color-gray-900);background-color:var(--color-gray-50);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,Noto Sans Thai,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer;border:none;outline:none;font-family:inherit}input,select,textarea{font-family:inherit;font-size:inherit}.app-layout{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--color-black);height:100vh;color:var(--color-white);z-index:100;transition:transform var(--transition-normal);flex-direction:column;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.sidebar-logo{border-bottom:1px solid var(--color-dark-2);align-items:center;gap:12px;padding:20px 24px;display:flex}.sidebar-logo-icon{background:var(--color-primary);border-radius:var(--radius-md);color:#fff;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;font-weight:800;display:flex}.sidebar-logo-text{letter-spacing:-.02em;font-size:18px;font-weight:700}.sidebar-nav{flex:1;padding:16px 12px}.sidebar-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--color-gray-500);margin-top:8px;padding:12px 12px 8px;font-size:11px;font-weight:600}.sidebar-link{border-radius:var(--radius-md);color:var(--color-gray-400);transition:all var(--transition-fast);align-items:center;gap:12px;margin-bottom:2px;padding:10px 12px;font-size:14px;font-weight:500;display:flex}.sidebar-link:hover{background:var(--color-dark-2);color:var(--color-white)}.sidebar-link.active{background:var(--color-primary);color:var(--color-white)}.sidebar-link-icon{text-align:center;width:24px;font-size:18px}.main-content{margin-left:var(--sidebar-width);flex-direction:column;flex:1;min-height:100vh;display:flex}.topbar{height:var(--topbar-height);background:var(--color-white);border-bottom:1px solid var(--color-gray-200);z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffe6;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.topbar-title{color:var(--color-gray-900);font-size:20px;font-weight:700}.topbar-actions{align-items:center;gap:12px;display:flex}.page-content{flex:1;padding:24px}.card{background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-normal)}.card:hover{box-shadow:var(--shadow-md)}.card-header{border-bottom:1px solid var(--color-gray-100);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.card-title{color:var(--color-gray-900);font-size:16px;font-weight:600}.card-body{padding:24px}.btn{border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;display:inline-flex}.btn-primary{background:var(--color-primary);color:var(--color-white)}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #dc26264d}.btn-dark{background:var(--color-dark);color:var(--color-white)}.btn-dark:hover{background:var(--color-dark-2)}.btn-outline{color:var(--color-gray-700);border:1px solid var(--color-gray-300);background:0 0}.btn-outline:hover{background:var(--color-gray-50);border-color:var(--color-gray-400)}.btn-success{background:var(--color-success);color:var(--color-white)}.btn-success:hover{background:#047857}.btn-danger{background:var(--color-danger);color:var(--color-white)}.btn-sm{padding:6px 14px;font-size:13px}.btn-lg{padding:14px 28px;font-size:16px}.btn-icon{border-radius:var(--radius-md);width:40px;height:40px;padding:0}.form-group{margin-bottom:20px}.form-label{color:var(--color-gray-700);margin-bottom:6px;font-size:14px;font-weight:600;display:block}.form-input{border:1px solid var(--color-gray-300);border-radius:var(--radius-md);width:100%;color:var(--color-gray-900);background:var(--color-white);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:10px 14px;font-size:14px}.form-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #dc26261a}.form-select{border:1px solid var(--color-gray-300);border-radius:var(--radius-md);width:100%;color:var(--color-gray-900);background:var(--color-white);cursor:pointer;padding:10px 14px;font-size:14px}.form-select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #dc26261a}.badge{border-radius:var(--radius-full);white-space:nowrap;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.badge-success{background:var(--color-success-light);color:var(--color-success)}.badge-warning{background:var(--color-warning-light);color:var(--color-warning)}.badge-danger{background:var(--color-danger-light);color:var(--color-danger)}.badge-info{background:var(--color-info-light);color:var(--color-info)}.badge-neutral{background:var(--color-gray-100);color:var(--color-gray-600)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;display:grid}.stat-card{background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200);transition:transform var(--transition-fast), box-shadow var(--transition-fast);align-items:flex-start;gap:16px;padding:20px 24px;display:flex}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.stat-icon-primary{background:var(--color-primary-light);color:var(--color-primary)}.stat-icon-success{background:var(--color-success-light);color:var(--color-success)}.stat-icon-warning{background:var(--color-warning-light);color:var(--color-warning)}.stat-icon-info{background:var(--color-info-light);color:var(--color-info)}.stat-value{color:var(--color-gray-900);font-size:28px;font-weight:800;line-height:1.2}.stat-label{color:var(--color-gray-500);margin-top:2px;font-size:13px;font-weight:500}.table-container{overflow-x:auto}.table{border-collapse:collapse;width:100%}.table th{background:var(--color-gray-50);text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--color-gray-500);border-bottom:1px solid var(--color-gray-200);padding:12px 16px;font-size:12px;font-weight:600}.table td{color:var(--color-gray-700);border-bottom:1px solid var(--color-gray-100);padding:14px 16px;font-size:14px}.table tr:hover td{background:var(--color-gray-50)}.gantt-container{border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);background:var(--color-white);overflow-x:auto}.gantt-table{border-collapse:collapse;min-width:100%}.gantt-table th{color:var(--color-gray-500);text-align:center;border:1px solid var(--color-gray-200);background:var(--color-gray-50);z-index:10;padding:8px 4px;font-size:11px;font-weight:600;position:sticky;top:0}.gantt-table td{border:1px solid var(--color-gray-100);min-width:28px;height:36px;padding:0}.gantt-task-name{color:var(--color-gray-800);white-space:nowrap;background:var(--color-white);z-index:5;border-right:2px solid var(--color-gray-200);min-width:200px;padding:8px 12px;font-size:13px;font-weight:500;position:sticky;left:0}.gantt-task-name.main-task{color:var(--color-gray-900);background:var(--color-gray-50);font-weight:700}.gantt-task-name .task-check{color:var(--color-success);margin-left:6px}.gantt-task-name.subtask{color:var(--color-gray-600);padding-left:32px;font-weight:400}.gantt-cell-completed{background:var(--gantt-completed)}.gantt-cell-incomplete{background:var(--gantt-incomplete)}.gantt-cell-today{background:var(--gantt-today)}.photo-comparison{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;display:grid}.photo-comparison-panel{border:2px dashed var(--color-gray-300);border-radius:var(--radius-lg);aspect-ratio:4/3;background:var(--color-gray-50);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.photo-comparison-panel.reference{border-color:var(--color-info);border-style:solid}.photo-comparison-panel.captured{border-color:var(--color-primary)}.photo-comparison-panel img{object-fit:cover;width:100%;height:100%}.photo-comparison-label{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;font-size:11px;font-weight:700;position:absolute;top:8px;left:8px}.photo-comparison-label.reference{background:var(--color-info);color:#fff}.photo-comparison-label.captured{background:var(--color-primary);color:#fff}.login-page{background:linear-gradient(135deg, var(--color-black) 0%, var(--color-dark) 50%, #1a0000 100%);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-page:before{content:"";background:radial-gradient(circle,#dc262626 0%,#0000 70%);border-radius:50%;width:600px;height:600px;position:absolute;top:-50%;right:-20%}.login-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);width:100%;max-width:420px;box-shadow:var(--shadow-xl);background:#ffffff0d;border:1px solid #ffffff1a;padding:40px}.login-card .form-input{color:var(--color-white);background:#ffffff14;border-color:#ffffff26}.login-card .form-input::placeholder{color:var(--color-gray-500)}.login-card .form-input:focus{border-color:var(--color-primary);background:#ffffff1f}.login-card .form-label{color:var(--color-gray-300)}.login-title{color:var(--color-white);text-align:center;margin-bottom:8px;font-size:28px;font-weight:800}.login-subtitle{color:var(--color-gray-400);text-align:center;margin-bottom:32px;font-size:14px}.notification-badge{background:var(--color-primary);color:#fff;border:2px solid var(--color-white);border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:700;animation:2s ease-in-out infinite pulse;display:flex;position:absolute;top:-4px;right:-4px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.waiting-room{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;display:flex}.waiting-spinner{border:4px solid var(--color-gray-200);border-top-color:var(--color-primary);border-radius:50%;width:60px;height:60px;margin-bottom:24px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.waiting-title{color:var(--color-gray-900);margin-bottom:8px;font-size:24px;font-weight:700}.waiting-text{color:var(--color-gray-500);font-size:14px}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#00000080;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--color-white);border-radius:var(--radius-xl);width:100%;max-width:560px;max-height:90vh;box-shadow:var(--shadow-xl);animation:.3s slideUp;overflow-y:auto}.modal-header{border-bottom:1px solid var(--color-gray-100);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-title{font-size:18px;font-weight:700}.modal-body{padding:24px}.modal-footer{border-top:1px solid var(--color-gray-100);justify-content:flex-end;gap:8px;padding:16px 24px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.photo-comparison{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.gantt-task-name{min-width:150px}}@media (width<=480px){.stats-grid{grid-template-columns:1fr}.page-content{padding:16px}}.tree-table{border-collapse:collapse;background:var(--color-white);border:1px solid var(--color-gray-200);width:100%}.tree-table th{background:var(--color-gray-50);text-align:left;text-transform:uppercase;color:var(--color-gray-500);border-bottom:2px solid var(--color-gray-200);border-right:1px solid var(--color-gray-100);padding:12px 16px;font-size:12px;font-weight:600}.tree-table td{color:var(--color-gray-800);border-bottom:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-100);padding:12px 16px;font-size:14px}.tree-table tr.row-main td{background:var(--color-gray-50);font-weight:600}.tree-table tr.row-main:hover td{background:var(--color-gray-100)}.tree-table tr.row-sub td{background:var(--color-white)}.tree-table tr.row-sub:hover td{background:var(--color-gray-50)}.tree-table tr.row-add td{background:var(--color-white);padding:8px 16px}.tree-table-add-btn{color:var(--color-success);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast);background:0 0;border:none;align-items:center;gap:6px;padding:4px 8px;font-size:13px;font-weight:600;display:inline-flex}.tree-table-add-btn:hover{background:var(--color-success-light)}.tree-table-toggle{color:var(--color-gray-500);cursor:pointer;width:24px;height:24px;transition:color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;margin-right:8px;display:inline-flex}.tree-table-toggle:hover{color:var(--color-primary)}