:root { --bg:#f3f3f3; --box:#fff; --line:#ddd; --text:#222; --muted:#666; --accent:#1a6fd4; --hover:#eef5fd; --track:#ddd; }
  [data-theme=grey]  { --bg:#2b2b2b; --box:#383838; --line:#555; --text:#eee; --muted:#aaa; --accent:#4a9cf0; --hover:#3d4756; --track:#505050; }
  [data-theme=black] { --bg:#000; --box:#111; --line:#333; --text:#ddd; --muted:#999; --accent:#3b8be8; --hover:#0d1827; --track:#2a2a2a; }
  * { box-sizing: border-box; }
  body { margin: 0; padding-top: 44px; font: 16px/1.5 Arial, Helvetica, sans-serif; color: var(--text); background: var(--bg); }
  .wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

  /* Theme switch: fixed, top left */
  #themes { position: fixed; top: 0; left: 0; z-index: 10; display: flex; gap: 6px; padding: 8px; }
  #themes button { font: 13px Arial, sans-serif; padding: 4px 10px; color: var(--text); background: var(--box); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
  #themes button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); font-weight: bold; }

  /* Top banner: fixed 728x90 so the ad never shifts the page */
  #ad-top-box { overflow-x: auto; padding: 10px 0; text-align: center; background: var(--box); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }

  h1 { font-size: 26px; margin: 24px 0 4px; }
  p { margin: 0 0 12px; }
  .note { color: var(--muted); font-size: 14px; }

  #drop { display: block; margin: 20px 0 8px; padding: 56px 16px; text-align: center; background: var(--box); border: 3px dashed var(--muted); cursor: pointer; }
  #drop:hover, #drop.over { border-color: var(--accent); background: var(--hover); }
  #drop strong { display: block; font-size: 22px; margin-bottom: 4px; }
  #file { display: none; }

  #list { list-style: none; margin: 16px 0 20px; padding: 0; font-size: 14px; }
  #list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; background: var(--box); border: 1px solid var(--line); margin-bottom: -1px; }
  #list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #list li .st { color: var(--muted); text-align: right; flex-shrink: 0; max-width: 55%; }
  #list li .x { visibility: hidden; flex-shrink: 0; width: 22px; padding: 0; font: bold 16px/1 Arial, sans-serif; color: var(--muted); background: none; border: 0; cursor: pointer; }
  #list li:hover .x, #list li .x:focus-visible { visibility: visible; }
  #list li .x:hover { color: #d33; }
  @media (hover: none) { #list li .x { visibility: visible; } } /* touch screens have no hover */

  .row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  select { flex: 1; font-size: 16px; padding: 8px; color: var(--text); background: var(--box); border: 1px solid var(--line); }
  .buttons { display: flex; gap: 10px; margin-bottom: 14px; }
  .big { flex: 1; font: bold 18px Arial, Helvetica, sans-serif; padding: 14px; cursor: pointer; border: 1px solid var(--accent); border-radius: 4px; }
  #go { background: var(--accent); color: #fff; }
  #dl { background: var(--box); color: var(--accent); }
  .big:disabled { opacity: .4; cursor: not-allowed; }

  #barwrap { height: 16px; background: var(--track); border-radius: 2px; overflow: hidden; }
  #bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
  #status { font-size: 14px; color: var(--muted); margin-top: 6px; }

  footer { margin-top: 40px; padding: 24px 16px; text-align: center; background: var(--box); border-top: 1px solid var(--line); font-size: 14px; }
  footer h2 { font-size: 16px; margin: 0 0 4px; }
  .tip { display: block; width: 100%; max-width: 560px; margin: 8px auto 0; padding: 8px; font: 13px monospace; color: var(--text);
         background: var(--bg); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; word-break: break-all; }
  .link { font: 14px Arial, sans-serif; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
  #privacy { width: min(640px, 92vw); max-height: 85vh; padding: 20px 24px; color: var(--text); background: var(--box); border: 1px solid var(--line); border-radius: 4px; text-align: left; font-size: 14px; }
  #privacy::backdrop { background: rgba(0,0,0,.6); }
  #privacy h2 { font-size: 20px; margin: 0 0 4px; }
  #privacy h3 { font-size: 15px; margin: 16px 0 4px; }
  #privacy p { margin: 0 0 8px; }
  #privacy .close { float: right; font: 14px Arial, sans-serif; padding: 4px 10px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
  @media (max-width: 480px) { .buttons { flex-direction: column; } }

  /* landing-page sections */
  .crumb { font-size: 14px; margin: 16px 0 0; }
  .crumb a { color: var(--accent); }
  .lead { color: var(--muted); margin: 0 0 4px; }
  .info h2 { font-size: 20px; margin: 32px 0 8px; }
  .info p, .info li { font-size: 15px; }
  .info ol { padding-left: 20px; margin: 0 0 12px; }
  .info details { background: var(--box); border: 1px solid var(--line); margin-bottom: -1px; padding: 10px 12px; font-size: 15px; }
  .info summary { cursor: pointer; font-weight: bold; }
  .info details p { margin: 8px 0 0; }
  .related { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
  .related a { display: block; padding: 6px 10px; background: var(--box); border: 1px solid var(--line); border-radius: 4px; color: var(--accent); text-decoration: none; font-size: 14px; }
  .related a:hover { border-color: var(--accent); }
  .info h3 { font-size: 15px; margin: 16px 0 6px; }