:root { --bg: #16171b; --panel: #23252c; --line: #343741; --text: #dfe1e6; --dim: #8d919c; --accent: #e08a2c; --good: #4cc38a; --bad: #e5484d; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", Arial, sans-serif; }
.page { max-width: 860px; margin: 0 auto; padding: 28px 16px 60px; }
.loading { padding: 40px; text-align: center; color: var(--dim); }
.head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.head img { width: 84px; height: 84px; border-radius: 16px; }
h1 { margin: 0; font-size: 34px; color: #fff; }
h2 { margin: 30px 0 10px; font-size: 22px; color: #fff; border-left: 5px solid var(--accent); padding-left: 10px; }
.sub { color: var(--accent); margin-top: 4px; }
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #16171b; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.body { flex: 1; line-height: 1.5; }
.row { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.dim { color: var(--dim); font-size: 14px; }
.btn { background: #2e3139; color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 8px 14px; cursor: pointer; font-size: 15px; }
.btn:hover { border-color: var(--accent); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.red { background: #5a2124; border-color: #7a2c30; }
.btn:disabled { opacity: .5; cursor: default; }
.drop { position: relative; margin-top: 10px; border: 2px dashed #4b6b58; border-radius: 10px; min-height: 110px; display: flex; align-items: center; justify-content: center; background: #1d2621; }
.drop.busy { border-color: var(--accent); }
.drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.droptext { color: var(--good); font-size: 17px; pointer-events: none; }
.box { margin-top: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; }
.box.ok { border-color: #2f6b4d; }
.box.bad { border-color: #7a2c30; }
.box .title { font-weight: 600; color: #fff; margin: 4px 0 6px; }
.box ul { margin: 4px 0 10px; padding-left: 22px; }
code { background: #2b2e36; padding: 1px 6px; border-radius: 4px; color: #f0c48a; }
.log { font-size: 14px; margin: 2px 0; }
.log.good { color: var(--good); } .log.warn { color: #e0b44c; } .log.block { color: var(--bad); }
table.maps { width: 100%; border-collapse: collapse; }
table.maps td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
table.maps td:last-child { text-align: right; }
.foot { margin-top: 36px; color: var(--dim); font-size: 13px; line-height: 1.6; }
.foot a { color: var(--accent); }
#blazor-error-ui { background: #5a2124; color: #fff; bottom: 0; display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.by { color: #fff; font-size: 16px; margin-top: 2px; }
.by b { color: var(--accent); }
.head > div { flex: 1; }
.donate { flex: none; background: var(--accent); color: #16171b; font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 8px; font-size: 16px; }
.donate:hover { filter: brightness(1.1); }