body.page-dashboard { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 16px; color: #111; background: #f9fafb; display:flex; justify-content:center; }
.page-dashboard .card { width: 100%; max-width: 980px; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.page-dashboard h1 { margin: 0 0 8px; font-size: 1.5rem; }
.page-dashboard .muted { color: #6b7280; margin: 0 0 16px; }
.page-dashboard .status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.page-dashboard .dot { width: 10px; height: 10px; border-radius: 50%; }
.page-dashboard .dot.on { background: #10b981; }
.page-dashboard .dot.off { background: #ef4444; }
.page-dashboard form { display: inline; }
.page-dashboard .btn { border: 1px solid transparent; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.page-dashboard .btn.start { background: #111827; color: white; }
.page-dashboard .btn.stop { background: #ef4444; color: white; }
.page-dashboard .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-dashboard .row { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.page-dashboard .flash { padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 0.95rem; }
.page-dashboard .flash.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.page-dashboard .flash.error { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }
.page-dashboard code { background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }
.page-dashboard .panel { margin-top:16px; padding:12px; border:1px solid #e5e7eb; border-radius:10px; }
.page-dashboard .k { color:#374151; width:160px; display:inline-block; }
.page-dashboard .ok { color:#065f46; }
.page-dashboard .bad { color:#7f1d1d; }
.page-dashboard .hint { color:#6b7280; font-size:0.85rem; }
.page-dashboard .tbl { width:100%; border-collapse: collapse; margin-top: 8px; }
.page-dashboard .tbl th, .page-dashboard .tbl td { text-align:left; padding: 8px 10px; border-top: 1px solid #e5e7eb; vertical-align: middle; }
.page-dashboard .tbl th { color:#374151; font-size: 0.85rem; font-weight: 700; }
.page-dashboard .pill { display:inline-flex; align-items:center; gap:6px; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; border: 1px solid #e5e7eb; background:#f9fafb; color:#374151; }
.page-dashboard .pill.online { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.page-dashboard .pill.stopped { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
.page-dashboard .pill.unknown { background:#f3f4f6; border-color:#e5e7eb; color:#374151; }
.page-dashboard .pill img { width: 14px; height: 14px; display:block; }
.page-dashboard .status-ico { display:inline-flex; align-items:center; justify-content:center; border: none; background: transparent; padding: 0; }
.page-dashboard .status-ico img { width: 24px; height: 24px; display:block; }
.page-dashboard .status-ico svg { width: 24px; height: 24px; display:block; }
.page-dashboard .btn.small { padding: 6px 10px; border-radius: 10px; font-size: 0.85rem; }
.page-dashboard .btn.gray { background:#f3f4f6; color:#111; border:1px solid #e5e7eb; }
.page-dashboard .btn.blue { background:#2563eb; color:#fff; border:1px solid #2563eb; }
.page-dashboard .actions { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.page-dashboard .link { color:#2563eb; text-decoration:none; }

.page-dashboard .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.page-dashboard .icon-btn { width: 48px; height: 48px; padding: 0; display:inline-flex; align-items:center; justify-content:center; border-radius: 999px; }
.page-dashboard .icon-btn svg { width: 28px; height: 28px; }
.page-dashboard .icon-link { width: 48px; height: 48px; display:inline-flex; align-items:center; justify-content:center; border-radius: 999px; border: none; background: transparent; }
.page-dashboard .icon-link:hover { background:#f3f4f6; }
.page-dashboard .icon-btn img { width: 32px; height: 32px; display:block; }
.page-dashboard .icon-link img { width: 26px; height: 26px; display:block; }

.page-dashboard .btn.icon-btn { border: none; outline: none; box-shadow: none; }
.page-dashboard .btn.icon-btn:hover:not(:disabled) { filter: brightness(0.98); }

.page-dashboard .btn.start.icon-btn img,
.page-dashboard .btn.stop.icon-btn img,
.page-dashboard .btn.blue.icon-btn img {
  filter: brightness(0) invert(1);
}

.page-dashboard .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }

.page-dashboard .metrics { display:grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 560px){ .page-dashboard .metrics { grid-template-columns: 1fr 1fr; } }
.page-dashboard .metric { display:flex; justify-content:space-between; gap: 10px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 12px; background:#f9fafb; }
.page-dashboard .metric .k { width:auto; }

.page-dashboard .pm2-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.page-dashboard .pm2-card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background:#fff; }
.page-dashboard .pm2-head { display:flex; justify-content:space-between; align-items:flex-start; gap: 10px; }
.page-dashboard .pm2-name { font-weight: 800; }
.page-dashboard .pm2-sub { color:#6b7280; font-size: 0.85rem; margin-top:2px; }
.page-dashboard .pm2-stats { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.page-dashboard .pm2-stat { color:#374151; font-size: 0.9rem; display:flex; justify-content:space-between; gap: 8px; }
.page-dashboard .pm2-actions { display:flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.page-dashboard .chip { display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 999px; background:#f9fafb; color:#111; font-weight: 600; }
.page-dashboard .chip svg { width: 18px; height: 18px; }
.page-dashboard .chip img { width: 18px; height: 18px; display:block; }

.page-dashboard .tbl { display:none; }
.page-dashboard #vpanel { display:none; }

body.page-log { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 1.5rem; color: #111; }
.page-log .bar { display:flex; gap:12px; align-items:center; margin-bottom: 12px; }
.page-log .muted { color:#6b7280; }
.page-log .btn { border:1px solid #e5e7eb; padding:8px 12px; border-radius:8px; background:#f9fafb; text-decoration:none; color:#111; }
.page-log .btn.primary { background:#111827; color:#fff; border-color:#111827; }
.page-log pre { background:#0b1021; color:#e5e7eb; padding:16px; border-radius:12px; white-space: pre-wrap; word-wrap: break-word; overflow: visible; max-height: none; }
.page-log code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; white-space: pre-wrap; word-wrap: break-word; }
.page-log .controls { display:flex; gap:8px; align-items:center; }
.page-log input[type="number"] { width: 100px; padding:6px; border:1px solid #e5e7eb; border-radius:6px; }