*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0; background: #0e1117; color: #d4d4d4; min-height: 100vh;
}
nav {
    background: #161b22; border-bottom: 2px solid #c9a22740;
    padding: 0 24px; height: 54px; display: flex; align-items: center; gap: 4px;
}
.nav-brand { font-weight: 700; font-size: 17px; color: #c9a227; margin-right: auto; }
nav a {
    color: #d4d4d4; text-decoration: none;
    padding: 6px 12px; border-radius: 5px; font-size: 14px; transition: background .15s;
}
nav a:hover { background: #21262d; color: #c9a227; }
.page { max-width: 960px; margin: 0 auto; padding: 32px 20px; }
.card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 24px; margin: 16px 0; }
h1 { color: #c9a227; font-size: 22px; margin: 0 0 20px; }
h2 { color: #e0e0e0; font-size: 16px; margin: 0 0 12px; }
.badge { padding: 3px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.badge-green { background: #1a4731; color: #3fb950; border: 1px solid #3fb95050; }
.badge-red   { background: #4b1113; color: #f85149; border: 1px solid #f8514950; }
.btn {
    padding: 9px 18px; border: none; border-radius: 6px; cursor: pointer;
    font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block;
    transition: filter .15s;
}
.btn:hover { filter: brightness(1.15); }
.btn-primary   { background: #c9a227; color: #0e1117; }
.btn-danger    { background: #da3633; color: #fff; }
.btn-secondary { background: #30363d; color: #d4d4d4; }
input[type=text], input[type=password], textarea {
    width: 100%; padding: 9px 12px;
    background: #0d1117; border: 1px solid #30363d;
    border-radius: 6px; color: #d4d4d4; font-size: 14px; transition: border-color .15s;
}
input:focus, textarea:focus { outline: none; border-color: #c9a227; }
label { display: block; margin-bottom: 6px; font-size: 13px; color: #8b949e; }
.alert { padding: 12px 16px; border-radius: 6px; margin: 12px 0; font-size: 14px; }
.alert-error   { background: #4b1113; border: 1px solid #f8514950; color: #f8d7da; }
.alert-success { background: #1a4731; border: 1px solid #3fb95050; color: #ccffd8; }
.alert-warning { background: #3d2b00; border: 1px solid #d29922; color: #ffd680; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat {
    background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
    padding: 20px; text-align: center;
}
.stat-val   { font-size: 28px; font-weight: 700; color: #c9a227; margin: 8px 0 4px; }
.stat-label { font-size: 11px; color: #8b949e; text-transform: uppercase; letter-spacing: 1px; }
.file-list { list-style: none; padding: 0; margin: 0; }
.file-list li {
    padding: 10px 14px; border: 1px solid #30363d; border-radius: 6px; margin: 6px 0;
    display: flex; align-items: center; justify-content: space-between; background: #0d1117;
}
textarea.editor {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 13px; height: 420px; resize: vertical;
}
#log {
    background: #0d1117; color: #3fb950; border: 1px solid #30363d;
    padding: 14px; border-radius: 6px; font-family: monospace; font-size: 13px;
    height: 260px; overflow-y: auto; white-space: pre-wrap; margin-top: 16px;
}