:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --border: #e2e5ea;
    --text: #1f2933;
    --muted: #6b7280;
    --primary: #3b5bdb;
    --primary-dark: #2f4bc4;
    --ok: #1a7f37;
    --ok-bg: #e6f4ea;
    --err: #b42318;
    --err-bg: #fdecea;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

.topbar {
    background: #16181d;
    color: #fff;
    padding: 0.9rem 1.25rem;
}
.topbar-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.topbar .logout { margin-left: 0.6rem; }
.topbar a.btn { text-decoration: none; white-space: nowrap; }
.topbar .brand { color: #fff; text-decoration: none; }
.topbar .brand:hover { color: #fff; text-decoration: none; }
.lang-switch { font-size: 0.85rem; color: var(--muted); }
.lang-switch a { color: var(--primary); text-decoration: none; font-weight: 600; }
.lang-switch a:hover { text-decoration: underline; }
.topbar .lang-switch { margin-left: auto; color: #9ca3af; white-space: nowrap; }
.topbar .lang-switch a { color: #fff; }
@media (max-width: 640px) {
    .topbar-inner { flex-wrap: wrap; gap: 0.5rem 0.6rem; }
    .topbar .brand-sub { display: none; }
    .topbar .btn { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
}
.topbar .lang-switch a { color: #fff; }
.login-lang { margin-top: 1rem; text-align: center; }

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.2rem; margin: 0 0 1rem; }
h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 1.4rem 0 0.6rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
}

.muted { color: var(--muted); }

.flash {
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 500;
}
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-error { background: var(--err-bg); color: var(--err); }

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}
.tab {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}
.tab:hover { border-color: var(--primary); }
.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.panel { margin-bottom: 1.5rem; }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.8rem;
}
label.check { font-weight: 400; }

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.65rem;
    margin-top: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}
textarea { resize: vertical; }

.hint { font-size: 0.78rem; color: var(--muted); margin-top: -0.3rem; }
.hint-inline { display: block; font-weight: 400; color: var(--muted); }

.btn {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
}
.btn:hover { background: var(--primary-dark); }
.btn-ghost {
    background: transparent;
    color: #d1d5db;
    border: 1px solid #374151;
}
.btn-ghost:hover { background: #22262e; color: #fff; }

.badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    vertical-align: middle;
}
.badge-on { background: var(--ok-bg); color: var(--ok); }
.badge-off { background: var(--err-bg); color: var(--err); }
.badge-warn { background: rgba(245, 158, 11, 0.15); color: #b45309; }

.login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.login {
    width: 100%;
    max-width: 360px;
    padding: 1.75rem;
}
.login h1 { text-align: center; }
.login p { text-align: center; }
.login .btn { width: 100%; margin-top: 0.5rem; }

/* ---- Home ---- */

.home-search { margin-top: 1rem; }

.search {
    display: block;
    width: 100%;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}
.search:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}

.site-row {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.site-row:hover { border-color: var(--primary); }
.site-row .badge { margin-bottom: 0.2rem; }
.row-label { display: block; font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.row-meta { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.1rem; }
.no-results { font-size: 0.85rem; color: var(--muted); padding: 0.5rem; text-align: center; }

.back { margin: 0 0 1rem; font-size: 0.9rem; }
.back a { color: var(--primary); text-decoration: none; font-weight: 600; }
.back a:hover { text-decoration: underline; }

.site-link { margin: 0.25rem 0 0; font-size: 0.85rem; }
.site-link a { color: var(--primary); text-decoration: none; }
.site-link a:hover { text-decoration: underline; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 640px) { .home-grid { grid-template-columns: 1fr; } }
.home-card .home-manage { display: block; font-size: 0.82rem; color: var(--primary); font-weight: 600; margin-top: 0.3rem; }
.pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
.pager-btn { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.pager-btn:hover:not(:disabled) { background: var(--card); border-color: var(--primary); }
.pager-btn:disabled { opacity: 0.45; cursor: default; }