body { font-family: Arial, sans-serif; background:#f1f5f9; }
  select,input { outline:none; font-family:Arial,sans-serif; }
  select:focus,input:focus { box-shadow:0 0 0 2px #93c5fd; border-color:#3b82f6; }
  .tab-btn  { border-bottom:3px solid transparent; transition:color .15s; background:none; border-top:none; border-left:none; border-right:none; cursor:pointer; }
  .tab-btn.active { border-bottom-color:#2563eb; color:#2563eb; font-weight:700; }
  .tab-pane { display:none; }
  .tab-pane.active { display:block; }
  .pc { border:2px solid #e5e7eb; border-radius:10px; padding:8px 4px; text-align:center; cursor:pointer; background:white; transition:all .15s; }
  .pc:hover { border-color:#93c5fd; background:#f0f9ff; }
  .pc.on  { border-color:#2563eb; background:#eff6ff; }
  .pc.off { opacity:.3; cursor:not-allowed; pointer-events:none; }
  input[readonly] { background:#f9fafb; color:#6b7280; }
  .badge-P { background:#fef3c7; color:#92400e; border:1px solid #fde68a; padding:2px 8px; border-radius:99px; font-size:.7rem; cursor:pointer; }
  .badge-E { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; padding:2px 8px; border-radius:99px; font-size:.7rem; cursor:pointer; }
  .bl-P { border-left:3px solid #f59e0b; }
  .bl-E { border-left:3px solid #10b981; }
  .mtd  { min-width:95px; }
  .card { background:white; border:1px solid #e5e7eb; border-radius:14px; padding:20px; }

* { box-sizing: border-box; }
body { margin: 0; color: #0f172a; }
button, label { -webkit-tap-highlight-color: transparent; }
button:disabled, input:disabled { opacity: .65; cursor: not-allowed; }
.hidden { display: none !important; }
@media (max-width: 860px) {
  .u019, .u057, .u086, .u118 { grid-template-columns: 1fr !important; }
  .u004, .u050, .u072, .u109 { overflow-x: auto; }
}

/* Static inline styles extracted from the legacy billing prototype. */
.u001 { background:white;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,.07); }
.u002 { max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.u003 { font-size:1rem;font-weight:700;color:#0f172a; }
.u004 { font-size:.7rem;color:#94a3b8; }
.u005 { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.u006 { font-size:.75rem;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:6px 14px; }
.u007 { background:#f0fdf4;border:1px solid #86efac;color:#166534;border-radius:8px;padding:6px 12px;font-size:.75rem;font-weight:600;cursor:pointer;white-space:nowrap; }
.u008 { background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:8px;padding:6px 12px;font-size:.75rem;font-weight:600;cursor:pointer;white-space:nowrap; }
.u009 { display:none; }
.u010 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:center;justify-content:center; }
.u011 { background:white;border-radius:16px;padding:24px;width:360px;box-shadow:0 25px 60px rgba(0,0,0,.25); }
.u012 { font-size:.875rem;font-weight:700;color:#0f172a;margin-bottom:6px; }
.u013 { font-size:.8rem;color:#475569;margin-bottom:16px;background:#f8fafc;border-radius:8px;padding:10px;line-height:1.6; }
.u014 { font-size:.75rem;font-weight:600;color:#475569;margin-bottom:8px; }
.u015 { display:flex;flex-direction:column;gap:8px;margin-bottom:16px; }
.u016 { display:flex;align-items:flex-start;gap:8px;cursor:pointer;padding:8px;border:1px solid #e2e8f0;border-radius:8px; }
.u017 { margin-top:2px; }
.u018 { font-size:.8rem;font-weight:600;color:#0f172a; }
.u019 { font-size:.72rem;color:#64748b; }
.u020 { font-size:.72rem;color:#dc2626; }
.u021 { display:flex;gap:10px; }
.u022 { flex:1;background:#2563eb;color:white;border:none;border-radius:9px;padding:10px;font-size:.8rem;font-weight:700;cursor:pointer; }
.u023 { background:none;border:1px solid #e2e8f0;border-radius:9px;color:#64748b;font-size:.8rem;cursor:pointer;padding:10px 14px; }
.u024 { background:white;border-bottom:1px solid #e5e7eb; }
.u025 { max-width:1120px;margin:0 auto;padding:0 16px;display:flex;gap:24px; }
.u026 { padding:10px 0;font-size:.875rem; }
.u027 { max-width:1120px;margin:0 auto;padding:20px 16px; }
.u028 { display:grid;grid-template-columns:340px 1fr;gap:20px; }
.u029 { font-size:.875rem;font-weight:700;color:#0f172a;margin-bottom:16px; }
.u030 { display:none;background:#f0fdf4;border:1px solid #86efac;color:#166534;border-radius:8px;padding:8px 12px;font-size:.75rem;margin-bottom:12px; }
.u031 { display:none;background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;border-radius:8px;padding:8px 12px;font-size:.75rem;margin-bottom:12px; }
.u032 { margin-bottom:14px; }
.u033 { font-size:.75rem;font-weight:600;color:#475569;margin-bottom:7px; }
.u034 { color:#ef4444 }
.u035 { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
.u036 { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px; }
.u037 { font-size:.75rem;font-weight:600;color:#475569;margin-bottom:4px; }
.u038 { width:100%;border:1px solid #d1d5db;border-radius:8px;padding:7px 10px;font-size:.8rem; }
.u039 { display:flex;gap:6px; }
.u040 { flex:1;border:1px solid #d1d5db;border-radius:8px;padding:7px 10px;font-size:.8rem; }
.u041 { background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:8px;padding:7px 12px;font-size:.75rem;font-weight:600;cursor:pointer;white-space:nowrap; }
.u042 { display:none;margin-top:8px;background:#f8faff;border:1px solid #bfdbfe;border-radius:10px;padding:12px; }
.u043 { font-size:.75rem;font-weight:700;color:#1d4ed8;margin-bottom:8px; }
.u044 { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px; }
.u045 { font-size:.7rem;color:#64748b;margin-bottom:3px; }
.u046 { width:100%;border:1px solid #d1d5db;border-radius:7px;padding:6px 8px;font-size:.8rem;box-sizing:border-box;text-transform:uppercase; }
.u047 { width:100%;border:1px solid #d1d5db;border-radius:7px;padding:6px 8px;font-size:.8rem;box-sizing:border-box; }
.u048 { font-size:.7rem;color:#64748b;margin-bottom:5px; }
.u049 { display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px; }
.u050 { display:none;color:#dc2626;font-size:.7rem;margin-bottom:6px; }
.u051 { display:flex;gap:8px; }
.u052 { flex:1;background:#2563eb;color:white;border:none;border-radius:7px;padding:7px;font-size:.8rem;font-weight:700;cursor:pointer; }
.u053 { background:none;border:1px solid #e2e8f0;border-radius:7px;color:#64748b;font-size:.8rem;cursor:pointer;padding:7px 10px; }
.u054 { width:100%;border:1px solid #d1d5db;border-radius:8px;padding:7px 10px;font-size:.8rem;box-sizing:border-box; }
.u055 { background:#eff6ff;border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px; }
.u056 { font-size:.875rem;color:#475569; }
.u057 { font-size:1.25rem;font-weight:700;color:#2563eb; }
.u058 { width:100%;background:#2563eb;color:white;border:none;border-radius:10px;padding:12px;font-size:.875rem;font-weight:700;cursor:pointer; }
.u059 { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px; }
.u060 { font-size:.875rem;font-weight:700;color:#0f172a; }
.u061 { border:1px solid #d1d5db;border-radius:7px;padding:4px 8px;font-size:.75rem; }
.u062 { display:flex;flex-direction:column;gap:8px;max-height:580px;overflow-y:auto;padding-right:2px; }
.u063 { display:none;text-align:center;padding:40px 0;color:#94a3b8;font-size:.875rem; }
.u064 { display:grid;grid-template-columns:300px 1fr;gap:20px; }
.u065 { font-size:.875rem;font-weight:700;color:#0f172a;margin-bottom:14px; }
.u066 { margin-bottom:10px; }
.u067 { width:100%;border:1px solid #d1d5db;border-radius:8px;padding:7px 10px;font-size:.875rem;box-sizing:border-box;text-transform:uppercase; }
.u068 { font-size:.68rem;color:#94a3b8;margin-top:3px; }
.u069 { width:100%;border:1px solid #d1d5db;border-radius:8px;padding:7px 10px;font-size:.875rem;box-sizing:border-box; }
.u070 { margin-bottom:12px; }
.u071 { font-size:.75rem;font-weight:600;color:#475569;margin-bottom:6px; }
.u072 { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.u073 { display:none;background:#f0fdf4;border:1px solid #86efac;color:#166534;border-radius:7px;padding:7px 10px;font-size:.75rem;margin-bottom:10px; }
.u074 { display:none;background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;border-radius:7px;padding:7px 10px;font-size:.75rem;margin-bottom:10px; }
.u075 { width:100%;background:#2563eb;color:white;border:none;border-radius:9px;padding:10px;font-size:.875rem;font-weight:700;cursor:pointer; }
.u076 { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px; }
.u077 { display:flex;gap:8px;align-items:center; }
.u078 { border:1px solid #d1d5db;border-radius:7px;padding:4px 8px;font-size:.75rem;width:120px; }
.u079 { overflow-x:auto; }
.u080 { width:100%;font-size:.8rem;border-collapse:collapse; }
.u081 { background:#f8fafc;font-size:.7rem;text-transform:uppercase;color:#64748b; }
.u082 { padding:8px 12px;text-align:left;border-bottom:2px solid #e2e8f0; }
.u083 { padding:8px 12px;text-align:center;border-bottom:2px solid #e2e8f0; }
.u084 { padding:8px 12px;text-align:right;border-bottom:2px solid #e2e8f0; }
.u085 { padding:8px 12px;border-bottom:2px solid #e2e8f0; }
.u086 { display:none;text-align:center;padding:40px;color:#94a3b8;font-size:.875rem; }
.u087 { display:grid;grid-template-columns:320px 1fr;gap:20px; }
.u088 { display:flex;align-items:center;gap:8px; }
.u089 { flex:1;border:1px solid #d1d5db;border-radius:8px;padding:7px 10px;font-size:.875rem;box-sizing:border-box; }
.u090 { display:flex;align-items:center;gap:4px;font-size:.75rem;color:#475569;white-space:nowrap;cursor:pointer; }
.u091 { cursor:pointer; }
.u092 { border:1px solid #d1d5db;border-radius:7px;padding:4px 8px;font-size:.75rem;width:140px; }
.u093 { padding:8px 12px;text-align:right;border-bottom:2px solid #e2e8f0;min-width:130px; }
.u094 { padding:8px 12px;border-bottom:2px solid #e2e8f0;min-width:160px; }
.u095 { background:white;border-radius:12px;border:1px solid #e5e7eb;padding:14px;margin-bottom:14px; }
.u096 { display:grid;grid-template-columns:repeat(6,1fr);gap:8px; }
.u097 { border:1px solid #d1d5db;border-radius:8px;padding:6px 8px;font-size:.75rem; }
.u098 { flex:1;border:1px solid #d1d5db;border-radius:8px;padding:6px;font-size:.75rem;cursor:pointer;background:white; }
.u099 { flex:1;background:#16a34a;color:white;border:none;border-radius:8px;padding:6px;font-size:.75rem;cursor:pointer; }
.u100 { background:white;border-radius:12px;border:1px solid #e5e7eb;overflow:auto; }
.u101 { padding:10px 12px;text-align:left; }
.u102 { padding:10px 12px;text-align:right; }
.u103 { padding:10px 12px;text-align:right;font-weight:700; }
.u104 { padding:10px 12px;text-align:center; }
.u105 { padding:10px 12px; }
.u106 { background:#f8fafc;border-top:2px solid #e5e7eb;font-weight:700; }
.u107 { padding:10px 12px;text-align:right;font-size:.75rem;color:#64748b; }
.u108 { padding:10px 12px;text-align:right;color:#2563eb; }
.u109 { display:none;text-align:center;padding:48px;color:#94a3b8;font-size:.875rem; }
.u110 { display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap; }
.u111 { border:1px solid #d1d5db;border-radius:8px;padding:7px 12px;font-size:.875rem;background:white; }
.u112 { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.u113 { grid-column:span 2 }
.u114 { font-size:.75rem;font-weight:700;text-transform:uppercase;color:#64748b;letter-spacing:.05em;margin-bottom:12px; }
.u115 { font-size:.75rem;border-collapse:collapse;width:100%; }
.u116 { background:#f1f5f9;border:1px solid #e2e8f0;padding:8px 12px;text-align:left;color:#64748b;font-weight:600; }
.u117 { background:#eff6ff;border:1px solid #e2e8f0;padding:8px 12px;text-align:center; }
.u118 { background:#f1f5f9;border:1px solid #e2e8f0;padding:8px 12px;text-align:center;font-weight:700; }
.u119 { font-size:.7rem;color:#94a3b8;margin-top:8px; }
.u120 { font-size:.75rem;font-weight:700;text-transform:uppercase;color:#64748b;letter-spacing:.05em;margin-bottom:10px; }
.u121 { border-bottom:1px solid #f1f5f9;font-size:.7rem;text-transform:uppercase;color:#94a3b8; }
.u122 { padding-bottom:6px;text-align:left; }
.u123 { padding-bottom:6px;text-align:right; }
.u124 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99;align-items:center;justify-content:center; }
.u125 { background:white;border-radius:16px;padding:24px;width:300px;box-shadow:0 25px 60px rgba(0,0,0,.25); }
.u126 { font-size:.875rem;font-weight:700;color:#0f172a;margin-bottom:4px; }
.u127 { font-size:.75rem;color:#64748b;margin-bottom:16px; }
.u128 { display:flex;gap:10px;margin-bottom:12px; }
.u129 { flex:1;border:1px solid #fde68a;border-radius:9px;padding:9px;font-size:.8rem;color:#92400e;background:#fef3c7;cursor:pointer;font-weight:600; }
.u130 { flex:1;border:1px solid #a7f3d0;border-radius:9px;padding:9px;font-size:.8rem;color:#065f46;background:#d1fae5;cursor:pointer;font-weight:600; }
.u131 { width:100%;background:none;border:none;color:#94a3b8;font-size:.8rem;cursor:pointer; }

/* Auth and role-aware UI */
.hidden { display: none !important; }
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #f1f5f9; }
.login-card { width: min(420px, 100%); background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 26px; box-shadow: 0 22px 60px rgba(15, 23, 42, .1); }
.login-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.login-subtitle { margin: 4px 0 18px; font-size: .82rem; color: #64748b; }
.login-card label, .field-label { display: block; margin: 12px 0 5px; font-size: .75rem; font-weight: 700; color: #475569; }
.login-card input, .field-input { width: 100%; border: 1px solid #d1d5db; border-radius: 9px; padding: 9px 10px; font-size: .875rem; background: #fff; }
.login-card button, .primary-btn { width: 100%; margin-top: 14px; background: #2563eb; color: white; border: 0; border-radius: 9px; padding: 10px 12px; font-weight: 700; cursor: pointer; }
.login-help { color: #64748b; font-size: .75rem; line-height: 1.45; margin: 14px 0 0; }
.session-user { font-size: .75rem; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; }
.session-logout { background: #fff; border: 1px solid #e2e8f0; color: #475569; border-radius: 8px; padding: 6px 10px; font-size: .75rem; font-weight: 700; cursor: pointer; }
.app-message { border-radius: 8px; padding: 8px 10px; font-size: .78rem; margin-bottom: 10px; }
.app-message.ok { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.app-message.error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.users-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; }
.section-title { font-size: .875rem; font-weight: 700; color: #0f172a; margin-bottom: 14px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th { text-align: left; color: #64748b; background: #f8fafc; border-bottom: 2px solid #e2e8f0; padding: 8px 10px; }
.data-table td { border-bottom: 1px solid #f1f5f9; padding: 9px 10px; }
.small-btn { border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; border-radius: 7px; padding: 4px 8px; font-size: .72rem; cursor: pointer; }
.danger-btn { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; border-radius: 7px; padding: 4px 8px; font-size: .72rem; cursor: pointer; }
.role-user .admin-only { display: none !important; }
.role-user .admin-control { display: none !important; }
@media (max-width: 820px) { .users-grid { grid-template-columns: 1fr; } }