/* Skin matched to c360portal.com (Carthage 360): dark green page, white rounded cards, blue actions, Gotham-style type.
   Gotham is licensed, so Montserrat (loaded from Google Fonts in each page) stands in unless Gotham is installed. */
:root, :root[data-theme="light"] {
  --window: #28663C; --surface: #FFFFFF; --surface2: #F4F7FA; --header: #FFFFFF; --border: #E6E6E6;
  --text: #1A1B1F; --muted: #707070; --title: #0B70B7; --primary: #0B70B7; --primary-hover: #085992;
  --on-primary: #FFFFFF; --accent: #0B70B7; --warn: #F08530; --bad: #B42318; --btn-border: #A6A8AB; --hover: #D2E2EF;
  --pill: transparent;
}
:root[data-theme="dark"] {
  --window: #1B4A2B; --surface: #1F2326; --surface2: #272C30; --header: #1F2326; --border: #343A3F;
  --text: #E3E2E6; --muted: #A6A8AB; --title: #67A7D5; --primary: #0B70B7; --primary-hover: #1A85D0;
  --on-primary: #FFFFFF; --accent: #67A7D5; --warn: #F08530; --bad: #F28B82; --btn-border: #4A5056; --hover: #2C3A47;
  --pill: #FFFFFF; /* the colored logo sits on a white pill in dark mode */
}
/* Before theme.js runs (or if it fails): follow the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --window: #1B4A2B; --surface: #1F2326; --surface2: #272C30; --header: #1F2326; --border: #343A3F;
    --text: #E3E2E6; --muted: #A6A8AB; --title: #67A7D5; --primary-hover: #1A85D0;
    --accent: #67A7D5; --bad: #F28B82; --btn-border: #4A5056; --hover: #2C3A47; --pill: #FFFFFF;
  }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--window); color: var(--text); font: 16px/1.4 Montserrat, Gotham, system-ui, sans-serif; overflow-x: hidden; }
main { max-width: 64rem; margin: 0 auto; padding: 16px; }
main.narrow { max-width: 28rem; margin-top: 4vh; }
h1 { color: var(--title); font-size: 1.25rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: center; margin: 0 0 16px; }

.app-header { background: var(--header); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .15); }
.app-header > div { max-width: 64rem; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.brands { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brands img { display: block; height: 36px; width: auto; border-radius: 8px; background: var(--pill); padding: 2px; }
.brands .carthage { height: 40px; padding: 2px 6px; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.card { background: var(--surface); border-radius: 21px; padding: 28px; margin-bottom: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }
.hint { color: var(--muted); font-size: .85rem; margin: 4px 0; }
label { display: block; margin-top: 12px; color: var(--muted); font-size: .85rem; }
input, select, button { font: inherit; color: var(--text); background: var(--surface2); border: 1px solid var(--btn-border); border-radius: 10.5px; padding: 8px 14px; min-height: 42px; }
input, select { width: 100%; margin-top: 4px; }
.controls select { width: auto; margin: 0; }
button { cursor: pointer; width: auto; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
button:hover { background: var(--hover); }
a.btn { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; border: 1px solid var(--btn-border); border-radius: 10.5px; background: var(--surface2); color: var(--text); font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
a.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
button.primary, form button:not([type]), #join, #retry { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
button.primary:hover, form button:not([type]):hover, #join:hover, #retry:hover { background: var(--primary-hover); }
#join, form button:not([type]) { width: 100%; margin-top: 20px; }
button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button:disabled { opacity: .5; cursor: default; }
[hidden] { display: none !important; }
a { color: var(--accent); overflow-wrap: anywhere; }
#err, .bad { color: var(--bad); }
.muted { color: var(--muted); }
/* Status text sits on the green page, so give it a card of its own whenever it has something to say. */
#msg:not(:empty), #err:not(:empty) { background: var(--surface); border-radius: 14px; padding: 12px 18px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); }

.banner { background: var(--surface); border-left: 6px solid var(--warn); border-radius: 14px; padding: 12px 18px; margin-bottom: 16px; }
.banner .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.banner code { word-break: break-all; flex: 1 1 12rem; }
.seg { display: flex; }
.seg button { flex: 1; }
.seg button:first-child { border-radius: 10.5px 0 0 10.5px; }
.seg button:last-child { border-radius: 0 10.5px 10.5px 0; border-left: 0; }
.controls .seg { display: inline-flex; }