* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f0f0f1; color: #1d2327; }
.wp1-topbar { display: flex; justify-content: space-between; align-items: center; background: #1d2327; color: #fff; padding: 12px 20px; flex-wrap: wrap; gap: 8px; }
.wp1-brand a { color: #fff; text-decoration: none; font-weight: 600; }
.wp1-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.wp1-nav a { color: #c3c4c7; text-decoration: none; }
.wp1-nav a:hover { color: #fff; }
.wp1-main { padding: 20px; max-width: 1400px; margin: 0 auto; }
.description, .meta { color: #646970; }
.wp1-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #646970; }
.wp1-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #1d6f42; animation: wp1-pulse 2s infinite; }
.wp1-live__dot--stale { background: #dba617; animation: none; }
@keyframes wp1-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.wp1-nm .wp1-nm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.wp1-nm .wp1-nm-card { background: #fff; border: 1px solid #c3c4c7; border-radius: 8px; padding: 16px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: border-color .2s, box-shadow .2s; min-width: 0; overflow: hidden; }
.wp1-nm .wp1-nm-card:hover { border-color: #8c8f94; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.wp1-nm .wp1-nm-card h2 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #646970; }
.wp1-nm .wp1-nm-stat { font-size: 2em; font-weight: 600; margin: .2em 0; line-height: 1.2; transition: color .3s; }
.wp1-nm .wp1-nm-stat--ip { font-size: 1.35em; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp1-nm [data-stat="ddns-detail"], .wp1-nm [data-stat="ddns-sync"] { overflow-wrap: anywhere; word-break: break-word; }
.wp1-nm .wp1-nm-meter { background: #f0f0f1; border-radius: 999px; height: 10px; overflow: hidden; margin: 8px 0; }
.wp1-nm .wp1-nm-meter__bar { display: block; height: 100%; background: linear-gradient(90deg, #2271b1, #135e96); transition: width .5s ease; }
.wp1-server-stats { margin: 20px 0; }
.wp1-server-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.wp1-server-metric { background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 8px; padding: 14px 16px; }
.wp1-server-metric h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #646970; }
.wp1-server-metric .wp1-nm-stat { font-size: 1.8em; margin: 0 0 8px; }
.wp1-server-metric--ok .wp1-nm-stat { color: #1d6f42; }
.wp1-server-metric--warn .wp1-nm-stat { color: #dba617; }
.wp1-server-metric--bad .wp1-nm-stat { color: #b32d2e; }
.wp1-server-metric--ok .wp1-nm-meter__bar { background: linear-gradient(90deg, #1d6f42, #0f5132); }
.wp1-server-metric--warn .wp1-nm-meter__bar { background: linear-gradient(90deg, #dba617, #8a6d00); }
.wp1-server-metric--bad .wp1-nm-meter__bar { background: linear-gradient(90deg, #d63638, #8a1f1f); }
.wp1-container-disk { margin: 20px 0; }
.wp1-container-disk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.wp1-container-disk-card { background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 14px 16px; }
.wp1-container-disk-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.wp1-container-disk-card h3 { margin: 0; font-size: 13px; font-weight: 600; }
.wp1-container-disk-card h3 code { font-size: 12px; }
.wp1-container-disk-card .wp1-nm-stat { font-size: 1.6em; margin: 0 0 8px; color: #2271b1; }
.wp1-container-disk-card .wp1-nm-meter__bar { background: linear-gradient(90deg, #2271b1, #135e96); }
.wp1-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wp1-nm .wp1-nm-card--healthy .wp1-nm-stat { color: #1d6f42; }
.wp1-nm .wp1-nm-card--warn .wp1-nm-stat { color: #dba617; }
.wp1-nm .wp1-nm-card--stopped .wp1-nm-stat { color: #b32d2e; }
.wp1-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.wp1-pill--ok { background: #d8f3e0; color: #1d6f42; }
.wp1-pill--warn { background: #fcf3cf; color: #8a6d00; }
.wp1-pill--bad { background: #fcebea; color: #b32d2e; }
.wp1-pill--muted { background: #f0f0f1; color: #646970; }
.button, button { background: #f6f7f7; border: 1px solid #8c8f94; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.button:hover, button:hover { background: #fff; border-color: #646970; }
.button-primary, button.button-primary { background: #2271b1; border-color: #135e96; color: #fff; }
.button-primary:hover { background: #135e96; }
.button-danger { background: #fcf0f1; border-color: #d63638; color: #b32d2e; }
.button-small { font-size: 12px; padding: 4px 8px; }
.wp1-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.wp1-table th, .wp1-table td { border: 1px solid #dcdcde; padding: 10px 12px; text-align: left; vertical-align: middle; }
.wp1-table th { background: #f6f7f7; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #646970; }
.wp1-table tr.ok { background: #f6fff8; }
.wp1-table tr.fail { background: #fff6f6; }
.wp1-table tr.warn { background: #fffdf5; }
.wp1-panel { background: #fff; border: 1px solid #c3c4c7; padding: 16px; margin: 16px 0; border-radius: 8px; }
.wp1-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.wp1-code, pre.wp1-code { background: #1d2327; color: #f0f0f1; padding: 12px; overflow: auto; max-height: 320px; font-size: 12px; border-radius: 6px; }
.wp1-form label { display: block; margin: 12px 0; }
.wp1-form input[type=text], .wp1-form input[type=password], .wp1-form select { width: 100%; max-width: 420px; padding: 8px; }
.wp1-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wp1-actions form.inline { display: inline; margin: 0; }
.wp1-theme-apply { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wp1-theme-apply select { padding: 4px 6px; font-size: 12px; max-width: 160px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; }
.wp1-error { color: #b32d2e; }
.wp1-theme-warning { margin: 4px 0 0; font-size: 12px; color: #b32d2e; max-width: 420px; }
.wp1-inline-form label { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; }
.wp1-inline-form input[type=text] { width: auto; min-width: 220px; max-width: 420px; flex: 1 1 220px; }
.wp1-search-results td p.description { margin: 4px 0 0; max-width: 480px; }
@media (max-width: 768px) {
  .wp1-main { padding: 12px; }
  .wp1-nm .wp1-nm-stat { font-size: 1.6em; }
  .wp1-table { font-size: 13px; }
  .wp1-table th, .wp1-table td { padding: 8px; }
}