*{box-sizing:border-box}body,h1,h2,h3,p,ul,li{margin:0;padding:0}body{font-family:Segoe UI,Hiragino Sans,Microsoft JhengHei,sans-serif;background-color:#f3f4f6;color:#1f2937}button{font-family:inherit}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f2937,#374151)}.login-box{background:#fff;border-radius:12px;padding:40px;width:360px;box-shadow:0 15px 40px #0000004d}.login-box h1{font-size:1.5em;margin-bottom:6px;color:#111827}.login-box .subtitle{color:#6b7280;font-size:.9em;margin-bottom:24px}.login-box .field{margin-bottom:16px}.login-box label{display:block;font-size:.85em;font-weight:600;color:#374151;margin-bottom:6px}.login-box input{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:1em}.login-box input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}.login-box .error{color:#dc2626;font-size:.85em;margin-bottom:14px}.btn-primary{width:100%;padding:11px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:1em;font-weight:600;cursor:pointer;transition:background .2s ease}.btn-primary:hover{background:#1d4ed8}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.app-shell{display:flex;min-height:100vh}.sidebar{width:220px;flex-shrink:0;background:#111827;color:#e5e7eb;display:flex;flex-direction:column;padding:20px 0}.sidebar h2{font-size:1.1em;color:#fff;padding:0 20px 20px;border-bottom:1px solid #374151;margin-bottom:10px}.sidebar nav{flex-grow:1}.sidebar-link{display:block;padding:12px 20px;color:#d1d5db;cursor:pointer;font-size:.95em;border-left:3px solid transparent;transition:background .15s ease,color .15s ease}.sidebar-link:hover{background:#1f2937;color:#fff}.sidebar-link.active{background:#1f2937;color:#fff;border-left-color:#2563eb;font-weight:600}.sidebar-footer{padding:14px 20px 0;border-top:1px solid #374151}.sidebar-footer .who{font-size:.85em;color:#9ca3af;margin-bottom:10px}.sidebar-footer .who strong{color:#e5e7eb;display:block}.logout-btn{width:100%;padding:8px;background:transparent;border:1px solid #4b5563;color:#d1d5db;border-radius:6px;cursor:pointer;font-size:.85em}.logout-btn:hover{background:#374151}.main-area{flex-grow:1;padding:30px 36px;max-width:100%;overflow-x:auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}.page-header h1{font-size:1.5em;color:#111827}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}.toolbar input,.toolbar select{padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:.9em}.btn{padding:9px 16px;border-radius:7px;border:none;font-size:.9em;font-weight:600;cursor:pointer;transition:opacity .15s ease}.btn:hover{opacity:.88}.btn.btn-add{background:#2563eb;color:#fff}.btn.btn-secondary{background:#e5e7eb;color:#374151}.btn.btn-small{padding:5px 10px;font-size:.82em}.table-wrap{background:#fff;border-radius:10px;box-shadow:0 1px 3px #00000014;overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:720px}thead th{text-align:left;font-size:.8em;color:#6b7280;text-transform:uppercase;letter-spacing:.03em;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#f9fafb;white-space:nowrap}tbody td{padding:12px 16px;border-bottom:1px solid #f1f2f4;font-size:.92em;vertical-align:middle}tbody tr:hover{background:#f9fafb}.thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid #e5e7eb;background:#f3f4f6}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78em;font-weight:600}.badge.on{background:#dcfce7;color:#15803d}.badge.off{background:#fee2e2;color:#b91c1c}.badge.role-super{background:#ede9fe;color:#6d28d9}.badge.role-admin{background:#dbeafe;color:#1d4ed8}.cell-desc{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6b7280}.pagination{display:flex;gap:8px;align-items:center;margin-top:16px;font-size:.88em;color:#4b5563}.pagination button{padding:5px 12px;border:1px solid #d1d5db;background:#fff;border-radius:6px;cursor:pointer}.pagination button:disabled{opacity:.4;cursor:not-allowed}.state-message{padding:40px;text-align:center;color:#9ca3af}.state-message.error{color:#dc2626}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#11182780;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-box{background:#fff;border-radius:12px;padding:28px;width:92%;max-width:520px;max-height:88vh;overflow-y:auto;box-shadow:0 15px 40px #0000004d}.modal-box h2{font-size:1.25em;margin-bottom:18px;color:#111827}.form-row{margin-bottom:14px}.form-row label{display:block;font-size:.85em;font-weight:600;color:#374151;margin-bottom:6px}.form-row input[type=text],.form-row input[type=number],.form-row input[type=password],.form-row textarea,.form-row select{width:100%;padding:9px 11px;border:1px solid #d1d5db;border-radius:7px;font-size:.95em;font-family:inherit}.form-row textarea{resize:vertical;min-height:70px}.form-row .checkbox-row{display:flex;align-items:center;gap:8px}.form-row .hint{font-size:.78em;color:#9ca3af;margin-top:4px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.image-preview{margin-top:8px;width:90px;height:90px;object-fit:cover;border-radius:8px;border:1px solid #e5e7eb;background:#f9fafb}.form-row p{font-size:.95em;color:#111827}.modal-box .table-wrap{box-shadow:none;border:1px solid #e5e7eb}.modal-box table{min-width:0}code,.mono-cell,.credential-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}.mono-cell{background:#f3f4f6;padding:2px 6px;border-radius:4px}.credential-banner{background:#f0fdf4;border:1px solid #86efac;border-radius:10px;padding:16px 18px;margin-bottom:18px}.credential-title{font-weight:700;color:#15803d;margin-bottom:2px}.credential-row{display:flex;align-items:center;gap:10px;padding:6px 0;flex-wrap:wrap}.credential-label{min-width:96px;color:#6b7280;font-size:.85em}.credential-value{background:#fff;border:1px solid #d1d5db;border-radius:6px;padding:6px 10px;flex:1;min-width:200px;word-break:break-all}