:root{--bg:#050505;--panel:#101010;--panel2:#171717;--text:#f2f2f2;--muted:#9b9b9b;--line:#282828;--good:#78ff9a;--warn:#ffd36b;--bad:#ff6f6f;--blue:#8db7ff;--pad:16px;--radius:18px}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}body{margin:0;padding-bottom:96px;min-height:100vh}a{color:inherit}button,input,select{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.45}.topbar{position:sticky;top:0;z-index:5;background:rgba(5,5,5,.92);backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);border-bottom:1px solid var(--line)}.eyebrow{margin:0;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.13em}.topbar h1{margin:1px 0 0;font-size:21px;line-height:1}.topbar h1 span{display:block;color:var(--muted);font-size:12px;font-weight:650;margin-top:3px}.icon-btn{width:38px;height:38px;border-radius:999px;background:var(--panel2);color:var(--text);border:1px solid var(--line)}.theme-btn{min-height:38px;border-radius:999px;background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:0 13px;font-size:12px;font-weight:850;white-space:nowrap}main{max-width:920px;margin:0 auto;padding:14px var(--pad) 0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.hero h2{font-size:30px;line-height:.95;margin:0 0 10px}.hero p{margin:0 0 12px;color:var(--muted);line-height:1.45}.mini-link{font-size:13px;color:var(--blue);text-decoration:none;font-weight:750}.legend{display:flex;align-items:center;gap:7px;font-size:13px}.dot,.ease-dot{display:inline-block;width:8px;height:8px;border-radius:999px}.green{background:#78ff9a}.yellow{background:#ffd36b}.red{background:#ff6f6f}.ad-slot{min-height:74px;border:1px dashed #333;border-radius:14px;margin:14px 0;display:grid;place-items:center;color:#555;background:#090909;overflow:hidden}.ad-slot span{font-size:11px;letter-spacing:.18em}.bottom{margin-bottom:22px}.controls{display:grid;gap:12px}label span{display:block;color:var(--muted);font-size:12px;font-weight:750;margin:0 0 6px}input,select{width:100%;border:1px solid var(--line);background:#080808;color:var(--text);border-radius:12px;padding:13px 12px;outline:none}input:focus,select:focus{border-color:#666}.row{display:grid;gap:10px}.two{grid-template-columns:1fr 120px;align-items:end}.filters{grid-template-columns:1fr auto;align-items:end}.toggle{display:flex;gap:8px;align-items:center;height:46px;padding:0 12px;background:#080808;border:1px solid var(--line);border-radius:12px}.toggle span{margin:0;white-space:nowrap}.toggle input{width:auto}.primary{background:var(--text);color:#000;border-radius:12px;padding:13px 14px;font-weight:850}.status-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.status-strip div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}.status-strip strong{display:block;font-size:24px}.status-strip span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.notice{margin:12px 0;padding:13px;border-radius:14px;background:#171717;border:1px solid #2b2b2b;color:var(--muted);line-height:1.35}.target-list{display:grid;gap:10px;margin-top:12px}.card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ease-color,var(--line));border-radius:16px;padding:13px;display:grid;gap:10px;content-visibility:auto;contain-intrinsic-size:190px}.card.ready{border-color:rgba(120,255,154,.45);border-left-color:var(--ease-color);background:var(--panel)}.card.soon{border-color:rgba(255,211,107,.35);border-left-color:var(--ease-color)}.card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.name{font-size:17px;font-weight:850;text-decoration:none}.sub{color:var(--muted);font-size:12px;margin-top:2px}.ease-dot{background:var(--ease-color);margin-right:5px;vertical-align:1px}.ease-label{color:var(--ease-color);font-weight:800}.total-inline{color:var(--ease-color);font-weight:800}.pill{border-radius:999px;padding:6px 9px;font-size:12px;font-weight:850;white-space:nowrap;background:#222;color:var(--muted)}.pill.ok{background:rgba(120,255,154,.12);color:var(--good)}.pill.soon{background:rgba(255,211,107,.12);color:var(--warn)}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.stat{border:1px solid var(--line);border-radius:10px;padding:7px 6px;background:#0a0a0a}.stat b{display:block;font-size:13px}.stat b.total-color{color:var(--ease-color);text-shadow:none}.ease-label{color:var(--ease-color);font-weight:800}.total-inline{color:var(--ease-color);font-weight:800}.stat span{font-size:10px;color:var(--muted);letter-spacing:.08em}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions a{display:block;text-align:center;text-decoration:none;border-radius:11px;padding:11px;font-weight:850;background:var(--panel2);color:var(--text);border:1px solid var(--line)}.actions a.attack{background:var(--text);color:#000}.actions a.disabled{pointer-events:none;opacity:.35}.hit{outline:2px solid var(--blue)}.seo-text{margin-top:18px}.seo-text h2{font-size:18px;margin:18px 0 8px}.seo-text h2:first-child{margin-top:0}.seo-text p{color:var(--muted);line-height:1.5;margin:0 0 12px}.bottom-actions{position:fixed;left:0;right:0;bottom:0;z-index:9;background:rgba(5,5,5,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 116px;gap:10px}.bottom-actions button:not(.primary){background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:12px;font-weight:850}footer{max-width:920px;margin:0 auto;padding:0 var(--pad) 24px;color:#666;font-size:12px;line-height:1.4}.light{--bg:#f6f6f2;--panel:#fff;--panel2:#f0f0ec;--text:#080808;--muted:#666;--line:#deded8}.light .topbar,.light .bottom-actions{background:rgba(246,246,242,.94)}.light input,.light select,.light .stat,.light .ad-slot{background:#fff}.light .ad-slot{color:#aaa}@media(min-width:720px){:root{--pad:24px}.target-list{grid-template-columns:repeat(2,1fr)}.hero h2{font-size:44px}.row{grid-template-columns:1fr 1fr}.bottom-actions{max-width:920px;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0}}

.api-toggle{margin-top:-4px;justify-content:flex-start}
.light .theme-btn{background:#080808;color:#fff;border-color:#080808}

/* White theme readability fixes */
.light body{background:var(--bg);color:var(--text)}
.light .hero p,
.light .seo-text p,
.light .sub,
.light .notice,
.light label span,
.light .stat span,
.light footer{color:var(--muted)}
.light input,
.light select,
.light .toggle,
.light .stat,
.light .status-strip div,
.light .notice,
.light .card,
.light .panel{background:#fff;color:#080808;border-color:#deded8}
.light .card.ready{background:#fff;border-color:rgba(120,255,154,.42)}
.light .card.soon{background:#fffdf8;border-color:rgba(255,211,107,.38)}
.light .primary,
.light .actions a.attack{background:#080808;color:#fff;border-color:#080808}
.light .bottom-actions button:not(.primary),
.light .actions a:not(.attack),
.light .icon-btn{background:#f0f0ec;color:#080808;border-color:#deded8}
.light .actions a.disabled{background:#f2f2ef;color:#9a9a94;border-color:#deded8}
.light .pill{background:#f0f0ec;color:#555}
.light .pill.ok{background:rgba(0,180,85,.12);color:#008a43}
.light .pill.soon{background:rgba(190,130,0,.13);color:#9a6900}
.light .ad-slot{background:#fff;color:#999;border-color:#deded8}
.light .theme-btn{background:#080808;color:#fff;border-color:#080808}
.light .bottom-actions{background:rgba(246,246,242,.96)}
.light .stat b.total-color{text-shadow:none}

.stat.total b{font-weight:950}



/* Hospital state: unavailable targets recede. Everything greys out except TOTAL, which keeps a dim difficulty color. */
.card.hospital{
  border-color:rgba(120,120,120,.25);
  border-left-color:rgba(120,120,120,.35);
  background:var(--panel);
}
.card.hospital .name,
.card.hospital .sub,
.card.hospital .pill,
.card.hospital .stat:not(.total),
.card.hospital .actions{
  filter:grayscale(1);
  opacity:.42;
}
.card.hospital .total-inline,
.card.hospital .ease-label{
  color:#777 !important;
  opacity:.62;
}
.card.hospital .stat.total{
  border-color:color-mix(in srgb,var(--ease-color) 22%,var(--line));
  background:var(--panel);
  opacity:.72;
}
.card.hospital .stat.total b.total-color{
  color:var(--ease-color-dim);
}
.card.hospital .stat.total span{
  opacity:.62;
}
.light .card.hospital{
  border-color:rgba(120,120,120,.28);
  border-left-color:rgba(120,120,120,.35);
  background:#fff;
}
.light .card.hospital .stat.total{
  border-color:color-mix(in srgb,var(--ease-color) 22%,#deded8);
  background:#fff;
}


/* Final hospital override: every not-ready target is greyed out, including soon targets. Only TOTAL retains dim difficulty color. */
.card.hospital,
.card.hospital.soon{
  border-color:rgba(120,120,120,.24) !important;
  border-left-color:rgba(120,120,120,.35) !important;
}
.card.hospital .name,
.card.hospital .sub,
.card.hospital .pill,
.card.hospital .stat:not(.total),
.card.hospital .actions{
  filter:grayscale(1) !important;
  opacity:.38 !important;
}
.card.hospital .total-inline,
.card.hospital .ease-label{
  color:#777 !important;
  opacity:.55 !important;
}
.card.hospital .stat.total{
  opacity:.74 !important;
  border-color:color-mix(in srgb,var(--ease-color) 20%,var(--line)) !important;
}
.card.hospital .stat.total b.total-color{
  color:var(--ease-color-dim) !important;
}
.card.ready .ease-label,
.card.ready .total-inline,
.card.ready .stat.total b.total-color{
  color:var(--ease-color) !important;
}
.light .card.hospital,
.light .card.hospital.soon{
  border-color:rgba(120,120,120,.28) !important;
  border-left-color:rgba(120,120,120,.35) !important;
}

/* Final unavailable-state override: only actual Okay targets are full color. Hospital, network error, jail, unknown, etc. stay grey. TOTAL keeps dim difficulty color. */
.card.unavailable:not(.ready){
  border-color:rgba(120,120,120,.24) !important;
  border-left-color:rgba(120,120,120,.35) !important;
  background:var(--panel) !important;
}
.card.unavailable:not(.ready) .name,
.card.unavailable:not(.ready) .sub,
.card.unavailable:not(.ready) .pill,
.card.unavailable:not(.ready) .stat:not(.total),
.card.unavailable:not(.ready) .actions{
  filter:grayscale(1) !important;
  opacity:.38 !important;
}
.card.unavailable:not(.ready) .total-inline,
.card.unavailable:not(.ready) .ease-label{
  color:#777 !important;
  opacity:.55 !important;
}
.card.unavailable:not(.ready) .stat.total{
  opacity:.74 !important;
  border-color:color-mix(in srgb,var(--ease-color) 20%,var(--line)) !important;
}
.card.unavailable:not(.ready) .stat.total b.total-color{
  color:var(--ease-color-dim) !important;
}
.card.ready{
  opacity:1 !important;
  filter:none !important;
}
.card.ready .ease-label,
.card.ready .total-inline,
.card.ready .stat.total b.total-color{
  color:var(--ease-color) !important;
  opacity:1 !important;
}
.light .card.unavailable:not(.ready){
  border-color:rgba(120,120,120,.28) !important;
  border-left-color:rgba(120,120,120,.35) !important;
  background:#fff !important;
}

/* FINAL PATCH: ready card border is exactly the same solid step color as TOTAL, no green mixed border. */
.card.ready{
  border-color:var(--ease-color) !important;
  border-left-color:var(--ease-color) !important;
  background:var(--panel) !important;
}
.card.ready .ease-label,
.card.ready .total-inline,
.card.ready .stat.total b.total-color{
  color:var(--ease-color) !important;
  opacity:1 !important;
}
.card.ready .stat.total{
  border-color:color-mix(in srgb,var(--ease-color) 42%,var(--line)) !important;
}

/* FINAL PATCH: anything not actually Okay stays grey, including API/network errors. */
.card.unavailable:not(.ready),
.card.hospital:not(.ready){
  border-color:rgba(120,120,120,.24) !important;
  border-left-color:rgba(120,120,120,.35) !important;
  background:var(--panel) !important;
}
.card.unavailable:not(.ready) .name,
.card.unavailable:not(.ready) .sub,
.card.unavailable:not(.ready) .pill,
.card.unavailable:not(.ready) .stat:not(.total),
.card.unavailable:not(.ready) .actions{
  filter:grayscale(1) !important;
  opacity:.38 !important;
}
.card.unavailable:not(.ready) .total-inline,
.card.unavailable:not(.ready) .ease-label{
  color:#777 !important;
  opacity:.55 !important;
}
.card.unavailable:not(.ready) .stat.total{
  opacity:.74 !important;
  border-color:color-mix(in srgb,var(--ease-color) 20%,var(--line)) !important;
}
.card.unavailable:not(.ready) .stat.total b.total-color{
  color:var(--ease-color-dim) !important;
}
.light .card.ready{
  background:#fff !important;
  border-color:var(--ease-color) !important;
  border-left-color:var(--ease-color) !important;
}
.light .card.unavailable:not(.ready),
.light .card.hospital:not(.ready){
  border-color:rgba(120,120,120,.28) !important;
  border-left-color:rgba(120,120,120,.35) !important;
  background:#fff !important;
}


/* FINAL FORM/THEME FIX — no my-stats version */
.theme-btn{
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:21px;
  line-height:1;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  background:var(--panel2);
  color:var(--text);
  border:1px solid var(--line);
}
.light .theme-btn{
  background:#fff !important;
  color:#080808 !important;
  border-color:#deded8 !important;
}

input:not([type="checkbox"]),
select{
  min-height:46px;
  -webkit-appearance:none;
  appearance:none;
}
.light input:not([type="checkbox"]),
.light select,
.light textarea{
  background:#fff !important;
  color:#080808 !important;
  border-color:#d8d8d2 !important;
  -webkit-text-fill-color:#080808;
}
.light input::placeholder{color:#9a9a94 !important;-webkit-text-fill-color:#9a9a94;}
.light .toggle{
  background:#fff !important;
  color:#080808 !important;
  border-color:#d8d8d2 !important;
}
.light .toggle span{color:#080808 !important;opacity:.72;}

.toggle{
  color:var(--text);
  min-height:46px;
  height:auto;
  user-select:none;
}
.toggle span{
  color:var(--text);
  opacity:.72;
  font-weight:850;
}
.toggle input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  flex:0 0 22px;
  margin:0;
  padding:0;
  border:2px solid #777;
  border-radius:7px;
  background:transparent;
  display:grid;
  place-content:center;
}
.toggle input[type="checkbox"]::before{
  content:"";
  width:11px;
  height:11px;
  transform:scale(0);
  transition:transform .08s ease;
  background:#fff;
  clip-path:polygon(14% 44%,0 59%,39% 100%,100% 18%,84% 4%,37% 68%);
}
.toggle input[type="checkbox"]:checked{
  background:#2f80ff;
  border-color:#2f80ff;
}
.toggle input[type="checkbox"]:checked::before{transform:scale(1);}
.light .toggle input[type="checkbox"]{
  background:#fff;
  border-color:#8d8d87;
}
.light .toggle input[type="checkbox"]:checked{
  background:#2f80ff;
  border-color:#2f80ff;
}

@media(max-width:560px){
  .controls{gap:12px;padding:14px;}
  .two,.filters{grid-template-columns:1fr !important;gap:10px;}
  .toggle{width:100%;justify-content:flex-start;padding:12px;}
  .primary{width:100%;min-height:46px;}
  input:not([type="checkbox"]),select{font-size:16px;min-height:48px;padding:12px;}
  .theme-btn{width:40px;min-width:40px;height:40px;font-size:22px;}
}

/* ===== FINAL iOS WHITE THEME FORM FIX ===== */
html.light,
html.light body{
  color-scheme: light;
}
html:not(.light),
html:not(.light) body{
  color-scheme: dark;
}

/* Force iOS/Safari to stop painting native black toggle rows in white theme */
html.light .controls .toggle,
html.light label.toggle,
html.light .api-toggle{
  background:#ffffff !important;
  color:#080808 !important;
  border:1px solid #d8d8d2 !important;
  box-shadow:none !important;
}
html.light .controls .toggle span,
html.light label.toggle span,
html.light .api-toggle span{
  color:#080808 !important;
  -webkit-text-fill-color:#080808 !important;
  opacity:.72 !important;
}

/* Make iOS inputs/selects predictable in white theme */
html.light input:not([type="checkbox"]),
html.light select,
html.light textarea{
  -webkit-appearance:none !important;
  appearance:none !important;
  background:#ffffff !important;
  color:#080808 !important;
  -webkit-text-fill-color:#080808 !important;
  border:1px solid #d8d8d2 !important;
  box-shadow:none !important;
}
html.light input:not([type="checkbox"])::placeholder,
html.light textarea::placeholder{
  color:#9a9a94 !important;
  -webkit-text-fill-color:#9a9a94 !important;
}

/* Fully custom checkboxes so iOS doesn't use the blue native blob */
.toggle input[type="checkbox"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  flex:0 0 24px !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  margin:0 10px 0 0 !important;
  padding:0 !important;
  border-radius:7px !important;
  border:2px solid #777 !important;
  background:#ffffff !important;
  box-shadow:none !important;
  display:inline-grid !important;
  place-items:center !important;
  position:relative !important;
}
.toggle input[type="checkbox"]:checked{
  background:#080808 !important;
  border-color:#080808 !important;
}
.toggle input[type="checkbox"]:checked::after{
  content:"";
  width:6px;
  height:11px;
  border:solid #ffffff;
  border-width:0 3px 3px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
html:not(.light) .toggle input[type="checkbox"]{
  background:#080808 !important;
  border-color:#777 !important;
}
html:not(.light) .toggle input[type="checkbox"]:checked{
  background:#ffffff !important;
  border-color:#ffffff !important;
}
html:not(.light) .toggle input[type="checkbox"]:checked::after{
  border-color:#080808 !important;
}

/* Prevent text from getting crushed beside custom checkbox */
.toggle{
  align-items:center !important;
}
.toggle span{
  line-height:1.15 !important;
}

/* Monochrome CSS yin-yang: no Apple color emoji rendering */
.theme-btn{
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.theme-glyph{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid currentColor;
  background:linear-gradient(90deg,#080808 0 50%,#ffffff 50% 100%);
  position:relative;
  display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.theme-glyph::before,
.theme-glyph::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
}
.theme-glyph::before{
  top:1px;
  background:#ffffff;
  border:2px solid #080808;
}
.theme-glyph::after{
  bottom:1px;
  background:#080808;
  border:2px solid #ffffff;
}
html.light .theme-glyph{
  border-color:#080808;
}
html:not(.light) .theme-glyph{
  border-color:#ffffff;
}