:root { color-scheme: light; --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --line: #e2e8f0; --text: #172033; --muted: #697386; --green: #18794e; --green-deep: #ecfdf3; --orange: #c97705; --red: #c53a35; --shadow: 0 3px 12px rgba(15, 23, 42, .06); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
body::before { display: none; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.04em; } h2 { margin-bottom: .25rem; font-size: 1.12rem; letter-spacing: -.02em; } a { color: var(--green); } code { color: #0f5a3d; overflow-wrap: anywhere; } button, input, textarea { font: inherit; } button { cursor: pointer; }
.topbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1240px; margin: auto; padding: 1.6rem 1.5rem 1.25rem; border-bottom: 1px solid var(--line); } .topbar-actions, .topbar-actions form { display: flex; align-items: center; gap: .6rem; }.app-nav { display: flex; flex-wrap: wrap; gap: .35rem; }.app-nav a { padding: .55rem .7rem; border-radius: 8px; color: var(--muted); font-size: .8rem; font-weight: 750; text-decoration: none; }.app-nav a:hover, .app-nav a.active { background: var(--green-deep); color: #0e5a3c; }
.eyebrow { margin-bottom: .45rem; color: var(--green); font-size: .71rem; font-weight: 800; letter-spacing: .16em; } .muted, .panel-title span, .hint { color: var(--muted); } .hint { margin: 0; font-size: .82rem; line-height: 1.45; }
.dashboard { position: relative; max-width: 1240px; margin: auto; padding: 1.5rem; }.hero { padding: 1.4rem 1.5rem; margin-bottom: 1rem; border: 1px solid #dbeafe; border-radius: 14px; background: #f8fbff; box-shadow: none; }.hero > div { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; }.hero h2 { margin: .7rem 0 .25rem; font-size: 1.6rem; }.hero p { margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }.status-dot { width: .6rem; height: .6rem; margin: 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(22, 114, 79, .12); }.status-dot.offline { background: var(--red); box-shadow: 0 0 0 5px rgba(194, 65, 59, .12); }.status-dot.pending { background: var(--orange); box-shadow: 0 0 0 5px rgba(217, 119, 6, .12); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }.stats article, .panel { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }.stats article { min-height: 106px; padding: 1rem 1.1rem; }.stats span { display: block; color: var(--muted); font-size: .78rem; }.stats strong { display: block; margin-top: .45rem; font-size: 1.35rem; overflow-wrap: anywhere; }.stats small { color: var(--muted); font-size: .86rem; }
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }.panel { padding: 1.2rem; }.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }.panel-title h2 { margin: 0 0 .2rem; }.panel-title span, .panel-title a { font-size: .8rem; }.lower-grid { grid-template-columns: .75fr 1.25fr; }
label { display: grid; gap: .45rem; color: #334155; font-size: .85rem; font-weight: 700; } input, textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 9px; padding: .75rem .8rem; outline: none; background: #fff; color: var(--text); }input:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22, 114, 79, .13); }textarea { min-height: 88px; resize: vertical; }.stacked-form, .form-grid { display: grid; gap: .9rem; }.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid .full { grid-column: 1 / -1; }.inline-form { display: flex; gap: .65rem; }.inline-form input { flex: 1; }
.button { border: 1px solid transparent; border-radius: 9px; padding: .72rem 1rem; font-size: .86rem; font-weight: 800; text-align: center; text-decoration: none; }.button.primary { background: var(--green); color: #fff; }.button.primary:hover { background: #0f5d40; }.button.secondary { border-color: #b8c8bf; background: #eff8f2; color: #13593d; }.button.warning { background: #f59e0b; color: #3d2600; }.button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }.text-button { padding: 0; border: 0; background: transparent; color: var(--green); font-weight: 800; font-size: .8rem; }.text-button.danger { color: var(--red); }
.players-panel { padding-bottom: .5rem; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; text-align: left; font-size: .88rem; }th, td { padding: .78rem .55rem; border-top: 1px solid var(--line); }th { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }td:first-child, th:first-child { padding-left: 0; }td:last-child, th:last-child { padding-right: 0; }.row-actions { display: flex; gap: .8rem; }.row-actions form { margin: 0; }.empty-state { padding: 1.3rem 0 .75rem; color: var(--muted); }
.alert { position: relative; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid; border-radius: 12px; }.alert.success { border-color: #9bd1b7; background: #edf9f2; }.alert.error { border-color: #e7a6a1; background: #fff2f1; }.alert p { margin: .45rem 0 0; }.alert ul { margin-bottom: 0; padding-left: 1.2rem; }.alert pre { margin: .55rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: inherit; font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.audit-log { display: grid; gap: .85rem; padding: 0; margin: 0; list-style: none; }.audit-log li { display: flex; align-items: flex-start; gap: .7rem; }.audit-log strong { display: block; font-size: .84rem; }.audit-log small { display: block; margin-top: .15rem; color: var(--muted); font-size: .74rem; overflow-wrap: anywhere; }.audit-status { flex: 0 0 .5rem; width: .5rem; height: .5rem; margin-top: .35rem; border-radius: 50%; background: var(--green); }.audit-status.error { background: var(--red); }
.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; }.auth-card { position: relative; width: min(100%, 470px); padding: 2rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }.auth-card h1 { margin-bottom: .6rem; }.auth-card .muted { line-height: 1.55; }.setup-card { width: min(100%, 760px); }
@media (max-width: 760px) { .topbar { align-items: flex-start; flex-direction: column; padding-top: 1.5rem; }.topbar-actions { width: 100%; }.topbar-actions .button { flex: 1; }.stats, .panel-grid, .lower-grid, .form-grid { grid-template-columns: 1fr; }.inline-form { flex-direction: column; }.dashboard { padding: 1rem; }.stats article { min-height: 84px; }.table-wrap { margin-right: -1.2rem; padding-right: 1.2rem; } }
.panel + .panel-grid { margin-top: 1rem; }.stacked-form select, .inline-form select { width: 100%; border: 1px solid #cbd5e1; border-radius: 9px; padding: .75rem .8rem; outline: none; background: #fff; color: var(--text); }.stacked-form select:focus, .inline-form select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22, 114, 79, .13); }.action-list { display: flex; flex-wrap: wrap; gap: .65rem; }.action-list form { margin: 0; }.action-list .button { height: 100%; }
.check-label { display: flex; align-items: center; gap: .6rem; font-weight: 600; }.check-label input { width: auto; accent-color: var(--green); }.block-code { display: block; margin-top: .25rem; color: var(--muted); font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }.compact-form { display: grid; gap: .45rem; min-width: 220px; margin-top: .6rem; }.compact-form input { padding: .45rem .55rem; font-size: .77rem; }details summary { color: var(--green); cursor: pointer; font-weight: 800; font-size: .8rem; }
.crate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }.crate-card { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }.crate-card > div { display: flex; justify-content: space-between; gap: .7rem; align-items: baseline; }.crate-card span, .crate-card small { color: var(--muted); font-size: .76rem; }.crate-card p { min-height: 2.5em; margin: .75rem 0; color: #475569; font-size: .84rem; }.json-editor { min-height: 460px; tab-size: 2; font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 1000px) { .crate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .crate-grid { grid-template-columns: 1fr; } }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }.quick-card { display: flex; min-height: 180px; flex-direction: column; align-items: flex-start; padding: 1.15rem; border: 1px solid #dce3ec; border-radius: 12px; background: #ffffff; box-shadow: none; }.quick-card:hover { border-color: var(--green); background: #f8fffb; }.quick-card h3 { margin: 0 0 .55rem; color: var(--green); font-size: 1rem; }.quick-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }.quick-card .button { width: 100%; margin-top: auto; }@media (max-width: 900px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .quick-grid { grid-template-columns: 1fr; } }
.danger-panel { border-color: #6e3b38; }.danger-button { border: 1px solid #a5514d; border-radius: 9px; padding: .72rem 1rem; background: #7d3936; color: #fff; font-weight: 800; }