*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0f1117; color: #e1e4e8; line-height: 1.6;
}
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }

nav { background: #161b22; border-bottom: 1px solid #30363d; padding: 0.75rem 1.5rem; }
.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.nav-inner .brand { font-size: 1.25rem; font-weight: 700; color: #f0f6fc; }
.nav-links { display: flex; gap: 1.5rem; }
.nav-links a { color: #8b949e; font-size: 0.9rem; }

main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }

.header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.header-bar h1 { font-size: 1.5rem; }
.header-actions { display: flex; gap: 0.5rem; }

.card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; margin-bottom: 1rem; }
.card-header { padding: 1rem 1.25rem 0.5rem; display: flex; justify-content: space-between; align-items: center; }
.card-header h3 { font-size: 1.1rem; }
.card-body { padding: 0.5rem 1.25rem 1.25rem; }

.monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
.monitor-card { transition: border-color 0.2s; }
.monitor-card:hover { border-color: #58a6ff; }

.url { color: #8b949e; font-size: 0.85rem; word-break: break-all; margin-bottom: 0.25rem; }
.selector code { background: #21262d; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.8rem; }
.meta { color: #6e7681; font-size: 0.8rem; margin-top: 0.25rem; }
.meta.changed { color: #3fb950; }
.meta.ai { color: #d29922; }

.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.badge-active { background: #1b3a1f; color: #3fb950; }
.badge-inactive { background: #3d2020; color: #f85149; }

.btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background 0.2s; }
.btn-primary { background: #238636; color: #fff; border-color: #238636; }
.btn-primary:hover { background: #2ea043; text-decoration: none; }
.btn-secondary { background: #21262d; color: #c9d1d9; border-color: #30363d; }
.btn-secondary:hover { background: #30363d; text-decoration: none; }
.btn-danger { background: #da3633; color: #fff; border-color: #da3633; }
.btn-danger:hover { background: #f85149; }
.btn-small { padding: 0.3rem 0.75rem; font-size: 0.8rem; }

.form { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 1.5rem; max-width: 700px; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9rem; }
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select { width: 100%; padding: 0.5rem 0.75rem; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #e1e4e8; font-size: 0.9rem; }
.form-group textarea { font-family: inherit; }
.form-group small { display: block; color: #6e7681; font-size: 0.8rem; margin-top: 0.25rem; }
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }
.form-details { margin-bottom: 1rem; }
.form-details summary { cursor: pointer; font-weight: 600; color: #58a6ff; padding: 0.5rem 0; }
.form-details[open] summary { margin-bottom: 0.75rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: auto; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #161b22; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; }
th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid #21262d; font-size: 0.875rem; }
th { background: #0d1117; font-weight: 600; }
.row-changed { background: #1b3a1f40; }
.error-text { color: #f85149; }
.preview { background: #0d1117; border: 1px solid #30363d; border-radius: 4px; padding: 0.5rem; font-size: 0.75rem; max-height: 200px; overflow-y: auto; margin-top: 0.25rem; white-space: pre-wrap; word-break: break-word; }

.test-result { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; margin-top: 0.5rem; }
.test-success { background: #1b3a1f; color: #3fb950; border: 1px solid #238636; }
.test-error { background: #3d2020; color: #f85149; border: 1px solid #da3633; }
.test-icon { font-size: 1.1rem; }

.empty-state { text-align: center; padding: 3rem; color: #6e7681; }
.empty-state p { margin-bottom: 1rem; }

h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }

[x-cloak] { display: none !important; }

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-container { width: 100%; max-width: 400px; padding: 1.5rem; }
.login-card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 2rem; text-align: center; }
.login-card h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.login-subtitle { color: #6e7681; font-size: 0.9rem; margin-bottom: 1.5rem; }
.login-card .form { background: none; border: none; padding: 0; max-width: 100%; }
.login-card .form-group { text-align: left; }
.login-btn { width: 100%; margin-top: 0.5rem; }
.login-error { background: #3d2020; color: #f85149; border: 1px solid #da3633; border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.85rem; margin-top: 0.5rem; }