:root{--color-primary:#0ea5e9;--color-primary-dark:#0284c7;--color-primary-light:#e0f2fe;--color-primary-lighter:#f0f9ff;--color-bg:#f8fafc;--color-white:#fff;--color-text:#1e293b;--color-text-secondary:#64748b;--color-text-muted:#94a3b8;--color-border:#e2e8f0;--color-border-light:#f1f5f9;--color-success:#22c55e;--color-warning:#f59e0b;--color-danger:#ef4444;--sidebar-width:240px;--header-height:60px;--radius-sm:4px;--radius:8px;--radius-lg:12px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--transition:all .2s ease}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:14px;scroll-behavior:smooth}body{background:var(--color-bg);color:var(--color-text);font-family:Inter,Noto Sans Thai,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-primary);text-decoration:none;transition:var(--transition)}a:hover{color:var(--color-primary-dark)}.app-layout{overflow-x:clip;width:100%}.app-layout,.main-area{display:flex;min-height:100vh}.main-area{flex:1;flex-direction:column;margin-left:var(--sidebar-width);min-width:0;transition:margin-left .3s ease}.main-area.sidebar-collapsed{margin-left:0}.main-content{flex:1;min-width:0;overflow-x:hidden;padding:24px 32px}.card{background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{color:var(--color-text-secondary);font-size:.85rem;font-weight:500}.form-input,.form-select{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);font-family:inherit;font-size:.9rem;outline:none;padding:10px 14px;transition:var(--transition);width:100%}.form-input::-moz-placeholder{color:var(--color-text-muted)}.form-input::placeholder{color:var(--color-text-muted)}.form-input:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #0ea5e91a}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;cursor:pointer;padding-right:36px}.btn{align-items:center;border:none;border-radius:var(--radius);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.9rem;font-weight:500;gap:8px;justify-content:center;padding:10px 24px;transition:var(--transition);white-space:nowrap}.btn-primary{background:var(--color-primary);color:var(--color-white)}.btn-primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-md);color:var(--color-white);transform:translateY(-1px)}.btn-outline{background:var(--color-white);border:1px solid var(--color-primary);color:var(--color-primary)}.btn-outline:hover{background:var(--color-primary-lighter)}.btn-danger-outline{background:var(--color-white);border:1px solid var(--color-danger);color:var(--color-danger)}.btn-export{background:var(--color-danger);color:var(--color-white)}.btn-export:hover{background:#dc2626;box-shadow:var(--shadow-md);transform:translateY(-1px)}.data-table-wrapper{overflow-x:auto}.data-table{border-collapse:separate;border-spacing:0;font-size:.875rem;width:100%}.data-table thead th{background:var(--color-bg);border-bottom:2px solid var(--color-border);color:var(--color-text-secondary);font-weight:600;padding:14px 16px;position:sticky;text-align:left;top:0;white-space:nowrap}.data-table tbody tr{transition:var(--transition)}.data-table tbody tr:hover{background:var(--color-primary-lighter)}.data-table tbody td{border-bottom:1px solid var(--color-border-light);padding:14px 16px;vertical-align:middle}.data-table .link-primary{color:var(--color-primary);cursor:pointer;font-weight:600}.data-table .link-primary:hover{color:var(--color-primary-dark);text-decoration:underline}.pagination{align-items:center;color:var(--color-text-secondary);display:flex;font-size:.85rem;justify-content:space-between;padding:16px 0}.pagination-controls{align-items:center;display:flex;gap:4px}.pagination-btn{align-items:center;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:.85rem;height:36px;justify-content:center;transition:var(--transition);width:36px}.pagination-btn:hover:not(.active):not(:disabled){background:var(--color-primary-lighter);border-color:var(--color-primary);color:var(--color-primary)}.pagination-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);font-weight:600}.pagination-btn:disabled{cursor:not-allowed;opacity:.4}.badge{align-items:center;border-radius:20px;display:inline-flex;font-size:.75rem;font-weight:500;padding:3px 10px}.badge-blue{background:var(--color-primary-light);color:var(--color-primary-dark)}.badge-green{background:#dcfce7;color:#15803d}.badge-yellow{background:#fef3c7;color:#b45309}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease forwards}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@media(max-width:1024px){.main-area{margin-left:0}}