*{box-sizing:border-box}
:root{
  --primary:#1e3a8a;
  --accent:#10b981;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --danger:#ef4444;
  --border:#e5e7eb;
  --sidebar:#0f1f4a;
}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
.layout{display:flex;height:100vh;overflow:hidden}
.sidebar{
  width:200px;background:#2c4360;color:#fff;display:flex;flex-direction:column;padding:20px 16px;overflow-y:auto;flex-shrink:0
}
.logo{font-size:18px;font-weight:700;margin-bottom:16px;color:#fff}
.nav{display:flex;flex-direction:column;gap:8px;margin-bottom:auto}
.nav-link{display:block;padding:10px 30px;border-radius:8px;color:#cbd5e1;text-decoration:none}
.nav-link:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-link.active{background:#1e3a8a;color:#fff;border-radius:25px}
.nav-link.danger{color:#fecaca}
.user-box{margin-top:16px;font-size:13px;color:#cbd5e1;background:rgba(255,255,255,0.06);padding:10px 12px;border-radius:8px}
.content{flex:1;padding:24px;overflow:auto}
.page-header{display:flex;justify-content:space-around;align-items:center;margin-bottom:16px}
.page-header h1{font-size:18px;color:var(--primary);margin:0}
.page-header .toolbar{width: 60%;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow:hidden}
.page-header .toolbar .search-input-group{flex:1}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.toolbar .search-input-group{flex:1}
.page-header .toolbar input{height:36px}
.page-header .toolbar .btn{height:36px;line-height:36px;padding:0 16px;border-radius:20px}
.card{background:var(--card);border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,.06);padding:16px;margin-bottom:16px;border:1px solid var(--border)}
.card-title{font-size:16px;color:var(--primary);margin-bottom:10px;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.grid.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.form{display:block}
.form-row{display:flex;flex-direction:column;margin-bottom:12px}
.form-row label{font-size:13px;margin-bottom:6px;color:var(--muted)}
input,select,textarea{padding:10px;border:1px solid var(--border);border-radius:20px;font-size:14px;background:#fff}
textarea{min-height:90px;resize:vertical}
.actions{display:flex;gap:8px;justify-content:flex-end}
.actions.between{justify-content:space-between}
.btn{display:inline-block;padding:10px 14px;border-radius:20px;border:1px solid var(--border);background:#eef2ff;color:var(--text);cursor:pointer;font-size:14px}
.btn:hover{filter:brightness(0.98)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent}
.btn.full{width:100%}
.search-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer;padding:0;line-height:0}
.search-btn .icon{width:20px;height:20px}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;display:block}
.search-input-group{position:relative;display:flex;align-items:center}
.search-input-group input{padding-right:34px;width:100%}
.clear-search-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;display:none;padding:0}
.search-input-group input:not(:placeholder-shown)+.clear-search-btn{display:inline}
.pwd-input-group{position:relative;display:flex;align-items:center}
.pwd-input-group input{padding-right:60px;width:100%}
.toggle-password-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:#64748b;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;padding:0}
.inline-form{display:inline-flex;gap:8px;align-items:center}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  background:#f8fafc;color:#334155;border-bottom:1px solid var(--border);padding:10px 20px;text-align:left;position:sticky;top:0
}
.table td{border-bottom:1px solid var(--border);padding:5px 20px;vertical-align:top}
.table tbody tr:hover{background:#f9fafb}
.table-actions{display:flex;gap:20px;align-items:center}
.verified-icon{color:var(--accent);font-size:20px;line-height:1;margin-left:8px}
.verified-badge{width:22px;height:22px;margin-left:8px;vertical-align:middle;filter:invert(35%) sepia(92%) saturate(600%) hue-rotate(85deg) brightness(92%) contrast(90%)}
.verified-badge.red{filter:invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)}
.verified-badge .badge-fill{fill:var(--accent)}
.verified-badge .badge-check{stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.name-link{color:var(--primary);text-decoration:none;cursor:pointer}
.name-link:hover{text-decoration:underline}
.fa.icon{display:inline-block;font-size:20px;line-height:1}
.cat-icon-preview{display:inline-block;font-size:18px;color:var(--muted);margin-left:6px;line-height:1}
.cat-editable{display:inline-block;padding:6px 8px;border:1px solid transparent;border-radius:10px;cursor:text}
.cat-editable:hover{background:#f8fafc;border-color:var(--border)}
.cat-en-editable{display:inline-block;padding:6px 8px;border:1px solid transparent;border-radius:10px;cursor:text}
.cat-en-editable:hover{background:#f8fafc;border-color:var(--border)}
.verified-days{color:var(--muted);font-size:18px;margin-left:6px}
.inline-flex{display:flex;align-items:center;gap:8px}
.verified-label{color:#334155;font-size:12px}
.w-50{width:50%}
.w-60{width:60%}
.w-100{width:100%}
.w-200{width:200px}
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(16,24,40,.12);padding:24px;max-width:420px;width:100%}
.login-title{font-size:18px;color:var(--primary);font-weight:700;margin-bottom:14px}
.login-form .form-row{margin-bottom:14px}
.stats{display:flex;gap:12px;flex-wrap:wrap}
.stat{background:#eef2ff;color:var(--primary);padding:12px 14px;border-radius:10px;border:1px solid var(--border)}
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:12px;box-shadow:0 16px 40px rgba(16,24,40,.18);padding:20px;width:640px;max-width:92vw;border:1px solid var(--border);max-height:90vh;overflow:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal-close{border:none;background:transparent;font-size:20px;line-height:1;color:#64748b;cursor:pointer;padding:4px 8px;border-radius:8px}
.modal-close:hover{background:#f1f5f9;color:#0f172a}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(16,24,40,.06);display:none;z-index:999}
.bottom-nav-inner{display:flex;justify-content:space-around;align-items:center;padding:10px 10px}
.bottom-link{display:flex;flex-direction:column;align-items:center;gap:4px;color:#334155;text-decoration:none;font-size:20px;padding:6px 8px;border-radius:8px}
.bottom-link.active{color:var(--primary);background:#eef2ff}
 .bottom-link .icon{width:22px;height:22px;color:inherit}
 .bottom-link .bottom-text{font-size:12px;line-height:1}
@media (max-width: 767px){
  .layout{display:block;height:auto;overflow:visible}
  .sidebar{display:none}
  .content{padding:16px}
  .page-header{flex-direction:column;align-items:flex-start;gap:10px}
  .page-header .toolbar{width:100%;display:flex;flex-direction:row;align-items:center;gap:10px}
  .page-header .toolbar .btn{margin-top:0}
  .page-header .toolbar .search-input-group{flex:1}
  .mobile-inner-card-only{background:transparent;border:none;box-shadow:none;padding:0;margin:0}
  .grid.two{grid-template-columns:1fr}
  .biz-table thead{display:none}
  .biz-table tbody tr{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,.06);margin-bottom:12px;padding:12px}
  .biz-table tbody td{display:block;padding:2px 0;border-bottom:none}
  .biz-table tbody tr td:first-child .name-link{font-size:15px;font-weight:600;color:var(--primary)}
  .biz-table .table-actions{gap:8px;justify-content:flex-start}
  .bottom-nav{display:block}
  body.has-bottom-nav .content{padding-bottom:76px}
  .w-50{width:100%}
  .w-30{width:100%}
  .w-200{width:100%}
  .cat-table thead{display:none}
  .cat-table tbody tr{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,.06);margin-bottom:12px;padding:12px}
  .cat-table tbody td{display:block;padding:6px 0;border-bottom:none}
  .cat-table tbody tr td:first-child{display:none}
  .cat-table .inline-form{display:block}
  .cat-table .table-actions{gap:8px;justify-content:flex-end}
  .cat-table tbody td.table-actions{display:flex;justify-content:flex-end;text-align:right}
  .agent-table thead{display:none}
  .agent-table tbody tr{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(16,24,40,.06);margin-bottom:12px;padding:12px}
  .agent-table tbody td{display:block;padding:2px 0;border-bottom:none}
  .agent-table tbody tr td:first-child{display:none}
}