:root { --bg:#f5f7fb; --panel:#fff; --text:#1f2937; --muted:#6b7280; --primary:#2563eb; --danger:#dc2626; --border:#e5e7eb; }
*{box-sizing:border-box} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",Arial,sans-serif;background:var(--bg);color:var(--text)}
.topbar{background:#111827;color:#fff;padding:14px 22px;display:flex;justify-content:space-between;gap:16px}.brand{font-weight:700}.topbar a{color:#d1d5db;text-decoration:none;margin-left:16px}
.container{max-width:1280px;margin:24px auto;padding:0 20px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.card,.panel,.login-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card{padding:22px}.num{font-size:34px;font-weight:800}.label,.muted{color:var(--muted);font-size:14px}.good{color:#059669}.warn{color:#d97706}.danger{color:#dc2626}
.panel{padding:20px;margin-bottom:18px}.narrow{max-width:640px}.panel-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:14px}th{background:#f9fafb}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px}.dot{display:inline-block;width:9px;height:9px;border-radius:999px;margin-right:6px}.online{background:#10b981}.offline{background:#ef4444}
.actions{display:flex;flex-wrap:wrap;gap:6px;min-width:260px}.actions form,form.inline{display:inline}button,.button-link{border:1px solid var(--border);background:#fff;color:#111827;padding:8px 10px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;font-size:14px}
.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.danger-btn{color:#fff;background:var(--danger);border-color:var(--danger)}.form-grid{display:grid;gap:10px}input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px;font-size:15px}
.login-card{max-width:420px;margin:80px auto;padding:28px}.alert{padding:12px 14px;border-radius:10px;margin-bottom:12px;border:1px solid var(--border);background:#fff}.alert.success{border-color:#bbf7d0;background:#f0fdf4}.alert.danger{border-color:#fecaca;background:#fef2f2}.alert.warning{border-color:#fed7aa;background:#fff7ed}
textarea.config{width:100%;min-height:360px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;padding:14px;border:1px solid var(--border);border-radius:10px}pre{background:#0b1020;color:#e5e7eb;padding:14px;border-radius:10px;overflow:auto}

.warning-btn{color:#fff;background:#d97706;border-color:#d97706}.warning-btn:hover{background:#b45309}

.refresh-note{margin-left:14px;color:#6b7280;font-size:13px}

select{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px;font-size:15px;background:#fff}
.sync-inline{margin-left:12px;display:inline-block}

.traffic-note{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:12px 0;color:#475569;font-size:13px}
.rx-rate,.tx-rate{font-weight:700;white-space:nowrap}
.rx,.tx{white-space:nowrap}


/* v12.1 compact single-row layout */
.container{max-width:1440px}
.wide-panel{padding:16px}
.compact-head{align-items:flex-start}
.right-tools{text-align:right;line-height:1.8}
.compact-note{margin:8px 0 0 0;padding:8px 10px}
.compact-table-wrap{overflow-x:auto}
.peer-table{table-layout:fixed;min-width:1180px}
.compact-peer-table th,.compact-peer-table td{padding:8px 7px;font-size:12px;line-height:1.35;vertical-align:middle}
.col-user{width:95px}
.col-ip{width:170px}
.col-status{width:80px}
.col-online{width:70px}
.col-endpoint{width:145px}
.col-handshake{width:86px}
.col-rate{width:82px}
.col-total{width:78px}
.col-action{width:230px}
.user-cell strong{display:block;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subtext{display:block;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.mono-cell{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.endpoint{max-width:145px}
.allowed-ips{max-width:170px}
.status-badge{font-size:11px;padding:2px 7px;white-space:nowrap}
.rate-cell,.total-cell{font-weight:700;white-space:nowrap}
.compact-actions{display:flex;flex-wrap:nowrap;gap:4px;min-width:220px;white-space:nowrap}
.compact-actions form{display:inline-block;margin:0}
.mini-btn{padding:5px 7px;font-size:12px;border-radius:7px;line-height:1.2}
.sync-inline button{padding:6px 9px;font-size:12px}
@media (max-width: 900px){
  .container{padding:0 10px}
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .right-tools{text-align:left;margin-top:10px}
  .compact-head{display:block}
}


.bytes{font-weight:700;white-space:nowrap}.narrow{max-width:720px}

.sample-now-form{margin-top:10px;display:inline-block}.sample-now-form button{padding:8px 12px}

.form-grid label input[type="checkbox"]{width:auto;margin-right:8px}

.qr-box{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;display:inline-block;margin:12px 0}.qr-box img{width:220px;height:220px;display:block}.good-badge{background:#dcfce7;color:#166534}.warn-badge{background:#fef3c7;color:#92400e}

.danger-badge{background:#fee2e2;color:#991b1b}





/* V16.1.2 Config Lifecycle action button styles */
.compact-actions{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  align-items:center;
}
.compact-actions form{
  display:inline-block;
  margin:0;
}
.mini-btn,
.expire-edit > summary.mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:30px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:#0f172a;
  font-size:12px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}
.btn-token{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}
.btn-renew{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#15803d;
}
.btn-expire{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#c2410c;
}
.btn-save{
  border-color:#c7d2fe;
  background:#eef2ff;
  color:#4338ca;
}
.btn-revoke{
  border-color:#fecaca;
  background:#dc2626;
  color:#fff;
}
.btn-restore{
  border-color:#fde68a;
  background:#fef3c7;
  color:#92400e;
}
.btn-token:hover,
.btn-renew:hover,
.btn-expire:hover,
.btn-save:hover,
.btn-restore:hover{
  filter:brightness(.97);
}
.btn-revoke:hover{
  background:#b91c1c;
}
.expire-edit{
  display:inline-block;
  position:relative;
}
.expire-edit summary{
  list-style:none;
}
.expire-edit summary::-webkit-details-marker{
  display:none;
}
.expire-edit[open] form{
  position:absolute;
  right:0;
  top:34px;
  z-index:20;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  border-radius:10px;
  padding:8px;
  display:flex;
  gap:6px;
  align-items:center;
}
.expire-edit input[type="datetime-local"]{
  width:190px;
  padding:6px;
  font-size:12px;
}


.btn-edit{
  border-color:#ddd6fe;
  background:#f5f3ff;
  color:#6d28d9;
}
.button-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.btn-rotate{
  border-color:#fbcfe8;
  background:#fdf2f8;
  color:#be185d;
}
.inline-action{
  display:inline-block;
  margin:0;
}

.btn-suspend{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#c2410c;
}
.btn-resume{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#15803d;
}
.btn-terminate{
  border-color:#fecaca;
  background:#7f1d1d;
  color:#fff;
}


/* V19 Enterprise Dashboard UI */
.enterprise-actions{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  align-items:center;
}
.enterprise-actions .mini-btn,
.enterprise-actions .button-link{
  min-width:82px;
  height:30px;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  text-align:center;
  border:1px solid var(--border);
  box-sizing:border-box;
}
.btn-enable{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#15803d;
}
.btn-suspend{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#c2410c;
}
.btn-edit{
  border-color:#ddd6fe;
  background:#f5f3ff;
  color:#6d28d9;
}
.btn-config{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}
.btn-reissue{
  border-color:#fbcfe8;
  background:#fdf2f8;
  color:#be185d;
}
.btn-terminate{
  border-color:#fecaca;
  background:#7f1d1d;
  color:#fff;
}
.btn-terminate:hover{
  background:#991b1b;
}
.recover-cli-form{
  margin:8px 0 12px 0;
}
.panel-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.right-meta{
  text-align:right;
  min-width:260px;
}
.status-enabled{background:#dcfce7;color:#166534}
.status-disabled,.status-emergency_disabled,.status-cli_removed{background:#fee2e2;color:#991b1b}
.enterprise-peer-table th,
.enterprise-peer-table td{
  white-space:nowrap;
}



/* V19.1 Dashboard summary cards layout fix */
.cards{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:18px !important;
  margin:18px 0 22px 0 !important;
  align-items:stretch !important;
}
.cards .card{
  min-height:96px !important;
  padding:22px 24px !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
}
.cards .metric{
  font-size:34px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  margin-bottom:6px !important;
}
@media (max-width: 900px){
  .cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px){
  .cards{
    grid-template-columns:1fr !important;
  }
}



/* V19.2 force dashboard summary cards into one row */
.summary-grid{
  width:100%;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:18px !important;
  margin:18px 0 22px 0 !important;
}
.summary-card{
  background:#fff !important;
  border:1px solid var(--border, #e5e7eb) !important;
  border-radius:14px !important;
  min-height:96px !important;
  padding:22px 24px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.08) !important;
  box-sizing:border-box !important;
}
.summary-metric{
  display:block !important;
  font-size:34px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  margin-bottom:6px !important;
}
@media (max-width: 900px){
  .summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px){
  .summary-grid{
    grid-template-columns:1fr !important;
  }
}



/* V19.3 Dashboard summary layout hard fix */
main.container .wg-summary-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  column-gap:18px !important;
  row-gap:18px !important;
  margin:18px 0 22px 0 !important;
  align-items:stretch !important;
}
main.container .wg-summary-grid > .wg-summary-card{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  min-height:96px !important;
  padding:22px 24px !important;
  background:#fff !important;
  border:1px solid var(--border, #e5e7eb) !important;
  border-radius:14px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.08) !important;
  box-sizing:border-box !important;
}
main.container .wg-summary-grid .wg-summary-number{
  display:block !important;
  font-size:34px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  margin-bottom:6px !important;
}
@media (max-width: 900px){
  main.container .wg-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px){
  main.container .wg-summary-grid{
    grid-template-columns:1fr !important;
  }
}



/* V19.4 Dashboard summary cards hard fix */
main.container .wg-summary-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:18px !important;
  margin:18px 0 22px 0 !important;
}
main.container .wg-summary-grid > .wg-summary-card{
  display:block !important;
  min-width:0 !important;
  min-height:96px !important;
  padding:22px 24px !important;
  background:#fff !important;
  border:1px solid var(--border, #e5e7eb) !important;
  border-radius:14px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.08) !important;
  box-sizing:border-box !important;
}
main.container .wg-summary-number{
  display:block !important;
  font-size:34px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  margin-bottom:6px !important;
}
@media (max-width:900px){
  main.container .wg-summary-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
}
@media (max-width:520px){
  main.container .wg-summary-grid{grid-template-columns:1fr !important;}
}



/* V19.5 Dashboard summary final restore */
main.container .wg-dashboard-summary{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:20px !important;
  width:100% !important;
  margin:18px 0 24px 0 !important;
}
main.container .wg-dashboard-summary .wg-dashboard-card{
  display:block !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.08) !important;
  min-height:110px !important;
  padding:24px 26px !important;
  box-sizing:border-box !important;
}
main.container .wg-dashboard-summary .wg-dashboard-number{
  display:block !important;
  font-size:42px !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#1f2937 !important;
  margin-bottom:10px !important;
}
main.container .wg-dashboard-summary .wg-dashboard-label{
  display:block !important;
  font-size:15px !important;
  color:#64748b !important;
}
main.container .wg-dashboard-summary .wg-green{color:#059669 !important;}
main.container .wg-dashboard-summary .wg-orange{color:#d97706 !important;}
main.container .wg-dashboard-summary .wg-red{color:#dc2626 !important;}
.wg-panel-head{
  display:flex !important;
  justify-content:space-between !important;
  gap:20px !important;
  align-items:flex-start !important;
}
.wg-right-meta{
  text-align:right !important;
  min-width:280px !important;
}
@media (max-width: 1000px){
  main.container .wg-dashboard-summary{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px){
  main.container .wg-dashboard-summary{
    grid-template-columns:1fr !important;
  }
}



/* V20.1 Dashboard status badges and traffic indicators */
.connection-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:86px;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
}
.connection-online{
  background:#ecfdf5;
  color:#047857;
  border-color:#a7f3d0;
}
.connection-offline{
  background:#fff7ed;
  color:#c2410c;
  border-color:#fed7aa;
}
.connection-icon{
  font-size:12px;
  line-height:1;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  border:1px solid transparent;
  text-transform:none;
}
.status-enabled{
  background:#dcfce7;
  color:#166534;
  border-color:#bbf7d0;
}
.status-disabled,
.status-suspended{
  background:#f1f5f9;
  color:#475569;
  border-color:#cbd5e1;
}
.status-emergency_disabled{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca;
}
.status-cli_removed{
  background:#fef3c7;
  color:#92400e;
  border-color:#fde68a;
}
.status-revoked{
  background:#fee2e2;
  color:#b91c1c;
  border-color:#fecaca;
}
.status-expired{
  background:#e0f2fe;
  color:#075985;
  border-color:#bae6fd;
}

.endpoint-present{
  color:#047857;
  font-weight:600;
}
.endpoint-empty{
  color:#94a3b8;
}

.handshake-cell{
  font-weight:600;
}
.handshake-recent{ color:#047857; }
.handshake-warn{ color:#d97706; }
.handshake-old{ color:#dc2626; }
.handshake-none{ color:#94a3b8; }

.rx-rate,
.rx-total{
  color:#047857;
  font-weight:700;
}
.tx-rate,
.tx-total{
  color:#1d4ed8;
  font-weight:700;
}



/* V20.2 Traffic consistency states */
.pending-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  border:1px solid #bae6fd;
  font-size:11px;
  font-weight:700;
}
.neutral-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  border:1px solid #cbd5e1;
  font-size:11px;
  font-weight:700;
}



/* V20.3 consistency health messaging */
.alert.info{
  background:#eff6ff;
  color:#1e40af;
  border:1px solid #bfdbfe;
}