:root { --bg:#0d1117; --card:#161b22; --border:#30363d; --fg:#e6edf3; --dim:#8b949e;
          --green:#3fb950; --red:#f85149; --yellow:#d29922; --blue:#58a6ff;
          --pad:28px; --gap:14px; }
  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--bg); color:var(--fg);
         font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
  header { padding:18px var(--pad); border-bottom:1px solid var(--border); display:flex;
           align-items:baseline; gap:14px; flex-wrap:wrap; }
  header h1 { margin:0; font-size:22px; white-space:nowrap; }
  header .sub { color:var(--dim); font-size:13px; }
  header .sub:last-child { margin-left:auto; }
  main { padding:24px var(--pad) 40px; max-width:1180px; margin:0 auto; }

  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:var(--gap); }
  .card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px 18px;
          min-width:0; }
  .card .k { color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
  .card .v { font-size:24px; margin-top:4px; word-break:break-word; }
  .card .v small { font-size:13px; color:var(--dim); }

  h2 { font-size:16px; margin:30px 0 12px; color:var(--blue);
       display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  h2 .tag { color:var(--dim); font-size:12px; font-weight:400; }

  .tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border);
               border-radius:8px; background:var(--card); }
  table { width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
  th,td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
  th { color:var(--dim); font-weight:600; background:#1c2128; position:sticky; top:0; }
  tr:last-child td { border-bottom:none; }
  tbody tr:hover td { background:#1c2128; }

  .ok { color:var(--green); } .bad { color:var(--red); } .warn { color:var(--yellow); }
  .mono { word-break:break-all; }
  .addr { color:var(--blue); }
  .empty { background:var(--card); border:1px solid var(--border); border-radius:8px;
           padding:16px 18px; color:var(--dim); }

  #conn { background:var(--card); border:1px solid var(--border); border-radius:8px;
          padding:16px 18px; margin-top:12px; }
  #conn code { background:#0d1117; border:1px solid var(--border); border-radius:5px;
               padding:2px 7px; color:var(--green); word-break:break-all; }
  #conn pre { background:#0d1117; border:1px solid var(--border); border-radius:5px;
              padding:12px 14px; overflow-x:auto; color:var(--fg); font-size:13px; margin:8px 0 14px; }
  .foot { color:var(--dim); font-size:12px; margin-top:26px; line-height:1.9; }

  /* ── "How a miner logs in" — the three fields of mining.authorize ─────────── */
  .logintop { background:#0d1117; border:1px solid var(--border); border-left:3px solid var(--green);
              border-radius:6px; padding:11px 14px; margin:2px 0 12px; line-height:1.75; }
  .fields { display:grid; gap:10px; margin-bottom:14px; }
  .field { background:#0d1117; border:1px solid var(--border); border-radius:6px; padding:10px 13px; }
  .field .fl { color:var(--blue); font-size:12px; text-transform:uppercase; letter-spacing:.07em;
               display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; }
  .field .fl .opt { color:var(--dim); text-transform:none; letter-spacing:0; font-size:11px; }
  .field .fv { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:7px; }
  .field .fv code { flex:1 1 260px; margin:0; }
  .field .fh { color:var(--dim); font-size:12px; margin-top:7px; line-height:1.65; }
  .field .fh b { color:var(--fg); }
  /* Payout Settings: the form controls match the existing inputs. */
  .fields select, .fields input[type="password"], .fields input[type="number"] {
    background:#0d1117; border:1px solid var(--border); color:var(--fg);
    padding:9px 11px; border-radius:6px; font-size:14px; font-family:inherit;
    min-width:0; flex:1 1 220px;
  }
  .fields select { cursor:pointer; }
  .fields input.short { flex:0 1 160px; }
  .fields button { background:#238636; border:none; color:#fff; padding:9px 18px;
                   border-radius:6px; cursor:pointer; font-size:13px; font-family:inherit;
                   white-space:nowrap; }
  .fields button:hover { background:#2ea043; }
  .fields button.off { background:#21262d; color:var(--dim); }
  .copy { background:#21262d; border:1px solid var(--border); color:var(--fg); border-radius:5px;
          padding:5px 13px; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; }
  .copy:hover { border-color:var(--blue); color:var(--blue); }
  .copy.done { border-color:var(--green); color:var(--green); }
  .warnbox { background:#1c2128; border:1px solid var(--border); border-left:3px solid var(--yellow);
             border-radius:6px; padding:11px 14px; margin:0 0 14px; font-size:13px; line-height:1.75; }
  .warnbox code { background:#0d1117; border:1px solid var(--border); border-radius:5px;
                  padding:1px 6px; color:var(--yellow); }

  #walletbox, #calcbox { background:var(--card); border:1px solid var(--border); border-radius:8px;
               padding:16px 18px; margin-top:12px; }
  .walletbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .walletbar input { flex:1 1 320px; min-width:0; background:#0d1117; border:1px solid var(--border);
                     color:var(--fg); padding:11px 12px; border-radius:6px; font-size:14px;
                     font-family:inherit; }
  .walletbar input.short { flex:0 1 160px; }
  .walletbar button { background:#238636; border:none; color:#fff; padding:11px 20px;
                      border-radius:6px; cursor:pointer; font-size:14px; font-family:inherit;
                      white-space:nowrap; }
  .walletbar button.off { background:#21262d; color:var(--dim); }
  .hint { color:var(--dim); font-size:12px; margin-top:8px; line-height:1.7; }
  #walletinfo { margin-top:14px; }
  #calcout { margin-top:14px; }

  .pill { display:inline-block; padding:1px 9px; border-radius:20px; font-size:12px;
          border:1px solid var(--border); }

  @media (max-width:720px) {
    :root { --pad:14px; --gap:10px; }
    body { font-size:14px; }
    header { padding:14px var(--pad); gap:8px; }
    header h1 { font-size:19px; }
    header .sub:last-child { margin-left:0; width:100%; }
    main { padding:16px var(--pad) 32px; }
    .card { padding:13px 14px; }
    .card .v { font-size:20px; }
    h2 { font-size:15px; margin:22px 0 10px; }
    #conn, #walletbox, #calcbox { padding:14px; }
    #conn pre { font-size:12px; padding:10px; }
    .field { padding:9px 11px; }
    .field .fv code { flex:1 1 100%; }
    .copy { padding:5px 11px; }
    table { font-size:12px; min-width:480px; }
    th,td { padding:8px 10px; }
    .walletbar input { flex:1 1 100%; }
    .walletbar button { width:100%; }
    .walletbar input.short { flex:1 1 100%; }
  }
  @media (max-width:420px) {
    .card .v { font-size:18px; }
    header h1 { font-size:17px; }
  }

/* ── Sub-page navigation ─────────────────────────────────────────────────────── */
.nav { display:flex; flex-wrap:wrap; gap:4px; padding:10px var(--pad);
       border-bottom:1px solid var(--border); background:var(--card); }
.nav a { color:var(--dim); text-decoration:none; font-size:14px; padding:6px 13px;
         border-radius:6px; border:1px solid transparent; white-space:nowrap; }
.nav a:hover { color:var(--fg); background:#21262d; }
.nav a:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.brand { text-decoration:none; color:inherit; font-size:22px; font-weight:700;
         white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.brand .logo { font-size:20px; }
.lead { color:var(--dim); font-size:15px; line-height:1.7; margin:4px 0 20px; max-width:78ch; }
.lead b { color:var(--fg); }
main h1 { font-size:26px; margin:6px 0 14px; }
a { color:var(--blue); }
@media (max-width:720px) { .brand { font-size:19px; } main h1 { font-size:22px; } }