/* Day by default; night when the system is dark, unless the day/night switch picked one (html[data-theme], theme.js). */
:root {
  color-scheme: light;
  --bg: #f6f5f1; --card: #ffffff; --ink: #1f1e1d; --muted: #6b6a66; --hint: #9a9893; --line: rgba(0,0,0,.09); --line-strong: rgba(0,0,0,.18);
  --accent: #185fa5; --accent-bg: #e6f1fb; --ok: #3b6d11; --ok-bg: #eaf3de; --warn: #854f0b; --warn-bg: #faeeda; --bad: #a32d2d; --bad-bg: #fcebeb;
  --live: #16a34a; --boot: #d97706;
  --radius: 8px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #1b1b19; --card: #262624; --ink: #ecebe7; --muted: #a8a6a0; --hint: #7d7b76; --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.2);
    --accent: #85b7eb; --accent-bg: #0c2a47; --ok: #97c459; --ok-bg: #1d300b; --warn: #ef9f27; --warn-bg: #3a2604; --bad: #f09595; --bad-bg: #3d1414; --live: #4ade80; --boot: #fbbf24; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #1b1b19; --card: #262624; --ink: #ecebe7; --muted: #a8a6a0; --hint: #7d7b76; --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.2);
  --accent: #85b7eb; --accent-bg: #0c2a47; --ok: #97c459; --ok-bg: #1d300b; --warn: #ef9f27; --warn-bg: #3a2604; --bad: #f09595; --bad-bg: #3d1414; --live: #4ade80; --boot: #fbbf24; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); }
a { color: var(--accent); }
button { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 12px; cursor: pointer; }
button:hover { border-color: var(--ink); }
button.primary { background: var(--ink); color: var(--card); border-color: var(--ink); }
button.danger { color: var(--bad); }
button.link { border: 0; background: none; padding: 0; color: var(--accent); }
input, select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 10px; min-width: 0; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
.brand { font-weight: 600; font-size: 17px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.tabs button { border: 0; background: none; color: var(--muted); padding: 6px 10px; }
.tabs button.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tile .k { font-size: 12px; color: var(--muted); }
.tile .v { font-size: 22px; font-weight: 600; }
.tile .s { font-size: 12px; color: var(--hint); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.card h2 { font-size: 15px; margin: 0 0 10px; }
.lanes { display: grid; grid-template-columns: 1fr auto 1fr auto 2fr auto 1fr; gap: 8px; align-items: center; }
.lane { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px; text-align: center; font-size: 13px; }
.lane b { display: block; }
.lane.main { border: 2px solid var(--accent); background: var(--accent-bg); }
.routes { display: flex; flex-direction: column; gap: 6px; }
.routes .lane { display: flex; justify-content: space-between; text-align: left; }
.arrow { color: var(--hint); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--bg); }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--bad-bg); color: var(--bad); } .badge.info { background: var(--accent-bg); color: var(--accent); }
.alert { border-radius: var(--radius); padding: 8px 12px; margin-bottom: 8px; font-size: 13px; }
.alert.warning { background: var(--warn-bg); color: var(--warn); } .alert.danger { background: var(--bad-bg); color: var(--bad); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.muted { color: var(--muted); } .hint { color: var(--hint); font-size: 12px; } .center { text-align: center; } .pad { padding: 48px 16px; }
.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.pre { white-space: pre-wrap; }
.keybox { background: var(--ok-bg); color: var(--ok); border-radius: var(--radius); padding: 12px; margin: 10px 0; }
.keybox .mono { color: var(--ink); background: var(--card); padding: 8px; border-radius: 6px; display: block; margin: 6px 0; }
.login { max-width: 380px; margin: 12vh auto; text-align: center; }
.login .card { padding: 28px; }
.drawer { border-left: 3px solid var(--accent); padding-left: 12px; margin-top: 10px; font-size: 13px; }
.drawer dt { color: var(--muted); } .drawer dd { margin: 0 0 6px; }
.err { color: var(--bad); font-size: 13px; }
/* Auto-rent card: switch, state banner, mode cards with a one-day picture, limits as sentences */
.gm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gm-head h2 { margin: 0; }
.gm-what { margin: 3px 0 0; }
.switch { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 4px 12px 4px 4px; background: var(--bg); flex-shrink: 0; }
.switch .knob { width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s; }
.switch .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.switch.on .knob { background: var(--ok); }
.switch.on .knob::after { left: 21px; }
.switch-text { font-weight: 600; font-size: 13px; }
.switch:disabled { cursor: default; opacity: .7; }
.gm-state { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius); padding: 10px 12px; margin: 12px 0 0; font-size: 14px; }
.gm-state.off { background: var(--warn-bg); color: var(--warn); }
.gm-state.on { background: var(--ok-bg); color: var(--ok); }
.gm-state .hint { color: inherit; opacity: .85; margin-top: 2px; font-size: 13px; }
.gm-state .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-top: 6px; flex-shrink: 0; }
.gm-sec { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.gm-label { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.gm-label .hint { font-weight: 400; margin-left: 6px; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mode { border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.mode.pick { cursor: pointer; }
.mode.pick:hover { border-color: var(--accent); }
.mode.on { border: 2px solid var(--accent); padding: 11px 13px; background: var(--accent-bg); }
.mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mode-what { font-size: 13px; margin-top: 4px; }
.radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); flex-shrink: 0; }
.mode.on .radio { border-color: var(--accent); background: radial-gradient(var(--accent) 40%, transparent 46%); }
.day { width: 100%; height: auto; display: block; margin: 8px 0 2px; }
.day .axis { stroke: var(--line-strong); stroke-width: 1.5; }
.day .gpu { fill: var(--accent); }
.day .job { fill: var(--warn); stroke: var(--card); stroke-width: 1.5; }
.mode.on .day .job { stroke: var(--accent-bg); }
.day .win { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 2; }
.day .wait { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 3 2; }
.day text { font-size: 8px; fill: var(--hint); }
.pc { list-style: none; padding: 0; margin: 4px 0 0; font-size: 13px; }
.pc li { padding-left: 20px; position: relative; margin-top: 3px; }
.pc .pro::before { content: '✓'; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.pc .con::before { content: '!'; position: absolute; left: 6px; color: var(--warn); font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; }
.lg.job { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.lg.gpu { width: 18px; height: 8px; border-radius: 2px; background: var(--accent); }
.lg.wait { width: 18px; border-top: 2px dashed var(--warn); }
.lg.win { height: 12px; border-left: 1.5px dashed var(--accent); }
.meter { height: 6px; border-radius: 999px; background: var(--bg); margin: 6px 0 4px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.example { margin-top: 2px; }
.lims { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.lim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; background: var(--bg); border-radius: var(--radius); padding: 8px 12px; }
.lim input { width: 80px; }
.lim.times { grid-column: 1 / -1; }
.lim.rule { grid-column: 1 / -1; cursor: pointer; }
.lim.rule input { width: auto; margin: 0; }
.lim.times input { width: auto; }
/* Assets: filter bar, gallery grid, full-screen viewer */
a.btn { display: inline-block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 12px; }
a.btn:hover { border-color: var(--ink); }
.abar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.chips { display: inline-flex; gap: 6px; }
.chips button { border-radius: 999px; padding: 5px 14px; }
.chips button.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.atile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; }
.atile:hover { border-color: var(--accent); }
.atile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.athumb { position: relative; aspect-ratio: 4 / 5; background: #141413; }
.athumb img, .athumb video { width: 100%; height: 100%; object-fit: contain; display: block; }
.aplay, .adur { position: absolute; bottom: 8px; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; pointer-events: none; }
.aplay { left: 8px; } .adur { right: 8px; }
.ameta { padding: 8px 10px 10px; font-size: 13px; }
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(12,12,11,.97); display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.lb-media { position: relative; display: flex; align-items: center; justify-content: center; padding: 24px 64px; min-width: 0; }
.lb-media img, .lb-media video { max-width: 100%; max-height: calc(100vh - 48px); border-radius: 6px; background: #000; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 1; padding: 0; }
.lb-nav:hover { background: rgba(255,255,255,.3); }
.lb-nav.prev { left: 12px; } .lb-nav.next { right: 12px; } .lb-nav:disabled { opacity: .2; cursor: default; }
.lb-side { background: var(--card); color: var(--ink); overflow-y: auto; padding: 16px 18px 24px; }
.lb-side h3 { font-size: 12px; color: var(--muted); font-weight: 600; margin: 18px 0 6px; letter-spacing: .02em; }
.lb-side dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 5px 10px; margin: 0; font-size: 13px; }
.lb-side dt { color: var(--muted); } .lb-side dd { margin: 0; overflow-wrap: anywhere; }
.lb-side .takes td { padding: 5px 6px; }
@media (max-width: 860px) {
  .lb { grid-template-columns: 1fr; grid-template-rows: 52vh minmax(0, 1fr); }
  .lb-media { padding: 12px 52px; } .lb-media img, .lb-media video { max-height: calc(52vh - 24px); }
}
/* Rentals: one card per machine (like vast.ai's list); a flashing light on whatever is billing now */
.rh { font-size: 15px; margin: 20px 0 10px; }
.rcard { display: grid; grid-template-columns: 170px minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, .9fr) 150px; gap: 14px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; font-size: 13px; }
.rcard.on { border: 2px solid #22c55e; padding: 13px 15px; box-shadow: 0 0 0 4px rgba(34,197,94,.13); }
.rcard.boot, .rcard.warn { border: 2px solid #f59e0b; padding: 13px 15px; }
.rcard.off { opacity: .8; }
.rc-id { display: flex; gap: 10px; align-items: flex-start; }
.rc-state { font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.rcard.on .rc-state { color: var(--live); } .rcard.boot .rc-state, .rcard.warn .rc-state { color: var(--boot); }
.rc-name { font-size: 20px; font-weight: 600; line-height: 1.25; }
.rc-sub { margin-top: 3px; }
.rc-col > div:nth-child(3) { margin-top: 8px; }
.rc-price { text-align: right; }
.rc-rate { font-size: 18px; font-weight: 600; }
.rc-price button { margin-top: 8px; }
.rc-note { grid-column: 1 / -1; }
.rc-times { margin-top: 8px; font-size: 12.5px; line-height: 1.55; }
.rc-times span { display: inline-block; min-width: 46px; color: var(--muted); font-weight: 600; }
.light { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; margin-top: 3px; }
.light.on { background: #22c55e; animation: rent-pulse 1.3s ease-out infinite; }
.light.boot { background: #f59e0b; animation: rent-blink 1s ease-in-out infinite; }
.light.warn { background: #f59e0b; }
@keyframes rent-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.8); opacity: 1; } 45% { opacity: .35; } 70% { box-shadow: 0 0 0 11px rgba(34,197,94,0); opacity: 1; } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@keyframes rent-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .light.on, .light.boot { animation: none; box-shadow: 0 0 0 4px rgba(34,197,94,.35); } }
.rempty { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 16px; color: var(--muted); }
@media (max-width: 1000px) { .rcard { grid-template-columns: 1fr 1fr; } .rc-price { text-align: left; } }
@media (max-width: 560px) { .rcard { grid-template-columns: 1fr; } }
/* Costs: daily stacked bars per provider */
.cchart { width: 100%; height: auto; display: block; margin: 12px 0 4px; }
.cchart text { font-size: 10px; fill: var(--hint); }
.cchart .grid { stroke: var(--line); stroke-width: 1; }
.cchart g:hover rect[class] { opacity: .8; }
.c-gpu { fill: var(--accent); } .c-mm { fill: #e8930c; } .c-gg { fill: #8b5cf6; }
.lg.c-gpu, .lg.c-mm, .lg.c-gg { width: 12px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.lg.c-gpu { background: var(--accent); } .lg.c-mm { background: #e8930c; } .lg.c-gg { background: #8b5cf6; }
/* Buttons that are working: locked, with a spinner; leaving rows fade out */
button:disabled { opacity: .65; cursor: default; }
button.is-busy::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.is-busy::before { animation-duration: 2s; } }
tr.leaving td { transition: opacity .3s ease, background .3s ease; opacity: 0; background: var(--bad-bg); }
.revoked-toggle { margin: 8px 0 4px; font-size: 13px; color: var(--muted); }
table.keys td.mono { white-space: nowrap; }
@media (max-width: 720px) {
  table.keys, table.keys tbody { display: block; }
  table.keys tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  table.keys td { display: block; border: 0; padding: 0; }
  table.keys td:nth-child(6) { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
.revoked-list { opacity: .75; }
.rc-served { grid-column: 1 / -1; font-size: 13px; border-top: 1px dashed var(--line); padding-top: 8px; }
.rc-served > span:first-child { color: var(--muted); font-weight: 600; margin-right: 6px; }
.prompt-box { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; line-height: 1.5; background: var(--bg); border-radius: var(--radius); padding: 10px 12px; max-height: 280px; overflow: auto; margin: 4px 0 2px; }
.prompt-ir summary { cursor: pointer; margin-top: 4px; }
tr.best td { background: var(--ok-bg); }
/* The message box: fixed on screen, never wiped by a redraw */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(440px, calc(100vw - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.18); font-size: 14px; animation: toast-in .18s ease-out; }
.toast.error { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }
.toast.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok); }
.toast button { color: inherit; flex-shrink: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.form-msg { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; }
.form-msg.err { color: var(--bad); }
/* Just created: a ring that pulses once (the card also tints briefly) */
@keyframes flash-ring { 0% { box-shadow: 0 0 0 0 transparent; } 20% { box-shadow: 0 0 0 4px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes flash-tint { 0%, 100% { background: var(--card); } 20% { background: var(--accent-bg); } }
.flash { animation: flash-ring 1.8s ease-out 1; }
.card.flash { animation: flash-ring 1.8s ease-out 1, flash-tint 1.8s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .flash, .card.flash { animation: none; outline: 3px solid var(--accent); outline-offset: 2px; } }
/* Day/night switch in the top bar */
.theme { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 13px; }
.theme svg { width: 16px; height: 16px; }
.login .theme { margin-left: 10px; }
@media (max-width: 720px) {
  .lanes { grid-template-columns: 1fr; } .arrow { transform: rotate(90deg); justify-self: center; }
  .hide-sm { display: none; }
}