/* Zindul — minimal stylesheet. Plain, readable, dark. */

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: #111;
    color: #ddd;
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main {
    max-width: 640px;
    margin: 40px auto;
    padding: 0 20px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
}

header h1 { margin: 0; font-size: 18px; }

h1 { font-size: 24px; margin: 0 0 20px; font-weight: 600; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 14px; margin: 20px 0 8px; font-weight: 600; }
h3:first-of-type { margin-top: 0; }

.muted { color: #888; font-size: 13px; }
.hidden { display: none; }
.error { color: #f66; }

/* --- forms + panels ---------------------------------------------------- */

.panel {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 20px;
    margin: 20px 0;
}

label {
    display: block;
    margin: 10px 0;
    font-size: 13px;
    color: #aaa;
}

input[type=email], input[type=password], input[type=text], input[type=number], select {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    background: #222;
    border: 1px solid #444;
    border-radius: 3px;
    color: #eee;
    font-size: 14px;
    font-family: inherit;
}

input:focus { outline: none; border-color: #666; }

button {
    padding: 8px 16px;
    background: #333;
    border: 1px solid #555;
    border-radius: 3px;
    color: #eee;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

button:hover { background: #444; }

button[type=submit] { margin-top: 12px; }

/* Anchor styled as button (used for the loader download link). */
a#download-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #333;
    border: 1px solid #555;
    border-radius: 3px;
    color: #eee;
    text-decoration: none;
}
a#download-btn:hover { background: #444; text-decoration: none; }

.msg { margin-top: 12px; min-height: 1em; }

/* --- tabs -------------------------------------------------------------- */

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
}

.tab-btn {
    flex: 1;
    border-radius: 4px 4px 0 0;
    border-bottom: none;
    background: #222;
}

.tab-btn.active {
    background: #1a1a1a;
    border-color: #333;
}

.tabs + .panel { border-radius: 0 0 4px 4px; margin-top: 0; }

/* --- keys table -------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th, td {
    padding: 8px 10px;
    border-bottom: 1px solid #2a2a2a;
    text-align: left;
}

th {
    color: #888;
    font-weight: 500;
}

code {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #9cf;
}

a { color: #9cf; text-decoration: none; }
a:hover { text-decoration: underline; }