:root {
    --bg-color: #111;
    --text-color: #eee;
    --accent-color: #00ffcc;
    --accent-hover: #00ccaa;
    --card-bg: #222;
    --border-color: #333;
    --error-color: #ff4444;
    --success-color: #00cc66;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

header {
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    margin-bottom: 30px;
}

h1 a {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
}

h2 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    margin-top: 30px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.domain-list {
    list-style: none;
    padding: 0;
}

.domain-list li {
    margin-bottom: 10px;
}

.domain-link {
    display: block;
    background: var(--card-bg);
    padding: 15px;
    color: var(--text-color);
    text-decoration: none;
    border: 1px solid var(--border-color);
    transition: background 0.2s, border-color 0.2s;
}

.domain-link:hover {
    background: #333;
    border-color: var(--accent-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

th {
    color: var(--accent-color);
}

input[type="text"], input[type="password"], textarea {
    width: 100%;
    background: #000;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px;
    font-family: inherit;
    box-sizing: border-box;
    margin-bottom: 10px;
}

textarea {
    min-height: 200px;
    font-family: monospace;
}

button {
    background: var(--accent-color);
    color: #000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
    text-transform: uppercase;
}

button:hover {
    background: var(--accent-hover);
}

button.delete {
    background: var(--error-color);
    color: white;
}

button.delete:hover {
    background: #cc3333;
}

.flash-messages {
    margin-bottom: 20px;
}

.flash {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.flash.success {
    background: rgba(0, 204, 102, 0.2);
    border: 1px solid var(--success-color);
}

.flash.error {
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid var(--error-color);
}

.tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    color: #888;
}

.tab-link:hover {
    color: var(--text-color);
}

/* Rudimentary CSS-only tabs logic (Target-based) */
/* Actually, for simplicity and "No JS", we can just list sections vertically or use radio hack if tabs are strictly required. 
   Let's just list sections vertically for now as it's cleaner and functionally robust without JS tricks. */