*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green: #6a8f3c;--green-dark: #4e6b2b;--navy: #1b2a4a;--white: #ffffff;--bg: #f4f6f8;--border: #dde2ea;--text: #1e2733;--text-muted: #6b7585;--accent: #7c3aed;--danger: #dc2626;--warn: #d97706;--radius: 6px;--shadow: 0 1px 3px rgba(0,0,0,.1)}body{font-family:Sarabun,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}.app-shell{display:flex;flex-direction:column;height:100vh}.app-header{background:var(--navy);color:var(--white);display:flex;align-items:center;gap:12px;padding:0 20px;height:52px;flex-shrink:0}.app-header .logo{background:var(--green);color:#fff;font-weight:700;font-size:12px;padding:4px 8px;border-radius:4px;line-height:1.2;text-align:center}.app-header h1{font-size:16px;font-weight:600}.app-nav{background:var(--green-dark);display:flex}.app-nav a{color:#fffc;padding:10px 20px;text-decoration:none;font-size:13px;font-weight:500;transition:background .15s}.app-nav a:hover,.app-nav a.active{background:var(--green);color:#fff}.app-body{flex:1;overflow:auto;display:flex}.split-layout{display:flex;width:100%}.split-list{width:300px;min-width:260px;border-right:1px solid var(--border);background:#fff;display:flex;flex-direction:column}.split-detail{flex:1;padding:24px;overflow:auto}.list-header{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center}.list-search{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:inherit}.list-search:focus{outline:none;border-color:var(--green)}.btn-new{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--green);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}.btn-new:hover{background:var(--green-dark)}.list-scroll{flex:1;overflow-y:auto}.list-item{padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}.list-item:hover{background:#f0f4f8}.list-item.active{background:#e6f0d8;border-left:3px solid var(--green)}.list-item-title{font-weight:600;font-size:13px}.list-item-sub{color:var(--text-muted);font-size:12px;margin-top:2px}.list-item-row{display:flex;justify-content:space-between;align-items:center}.detail-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;max-width:900px}.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}.detail-title{font-size:16px;font-weight:700;color:var(--navy)}.detail-actions{display:flex;gap:8px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 24px}.form-full{grid-column:1/-1}.field{display:flex;flex-direction:column;gap:4px}.field label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.field input,.field select{padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:inherit;background:#fff}.field input:focus,.field select:focus{outline:none;border-color:var(--green)}.field input[readonly],.field input:disabled{background:#f4f6f8;color:var(--text-muted)}.field-check{flex-direction:row;align-items:center;gap:8px}.field-check label{text-transform:none;letter-spacing:0;font-size:13px;color:var(--text)}.field-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--green)}.btn{padding:7px 16px;border:none;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:opacity .15s}.btn:hover{opacity:.85}.btn-primary{background:var(--green);color:#fff}.btn-secondary{background:#e5e7eb;color:var(--text)}.btn-danger{background:var(--danger);color:#fff}.btn-icon{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:var(--radius);color:var(--text-muted);font-size:16px}.btn-icon:hover{background:#f0f0f0;color:var(--text)}.table-wrap{overflow-x:auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;font-size:13px}th{background:var(--navy);color:#fff;padding:9px 12px;text-align:left;font-weight:600;font-size:12px}td{padding:9px 12px;border-bottom:1px solid var(--border)}tr:hover td{background:#f7f9fc}tr:last-child td{border-bottom:none}.toast{position:fixed;bottom:24px;right:24px;background:var(--navy);color:#fff;padding:12px 20px;border-radius:var(--radius);font-size:13px;z-index:9999;animation:slidein .2s ease}.toast.success{background:var(--green-dark)}.toast.error{background:var(--danger)}@keyframes slidein{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}.empty{text-align:center;color:var(--text-muted);padding:40px 20px}.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}.badge-green{background:#d1fae5;color:#065f46}.badge-yellow{background:#fef3c7;color:#92400e}.badge-red{background:#fee2e2;color:#991b1b}.section-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:12px}