*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* global scale boost */
html{
  font-size:200%;
}

:root{
  --bg:#f4f5f7;
  --surface:#ffffff;

  --border:#e2e5ea;

  --text:#1a1d23;
  --muted:#6b7280;

  --accent:#1a56db;

  --err:#b91c1c;
  --ok:#0a7e5a;

  --radius:0.5rem;
}

body{
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  font-size:1rem;

  background:var(--bg);
  color:var(--text);

  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:1.5rem;
}

.wrap{
  width:100%;
  max-width:32rem;
}

h1{
  font-size:1.4rem;
  font-weight:700;

  margin-bottom:0.35rem;

  line-height:1.2;
}

.sub{
  font-size:0.95rem;
  color:var(--muted);

  margin-bottom:1.5rem;
}

a{
  color:var(--accent);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* drop zone */

.drop-zone{
  background:var(--surface);

  border:2px dashed var(--border);
  border-radius:var(--radius);

  padding:2.5rem 1.5rem;

  text-align:center;

  cursor:pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    transform .15s ease;

  font-size:1rem;
  font-weight:500;
}

.drop-zone:hover,
.drop-zone.over{
  border-color:var(--accent);
  background:#eef4ff;

  transform:translateY(-1px);
}

/* files */

.file-list{
  margin-top:1rem;

  display:grid;
  gap:0.75rem;
}

.file-row{
  background:var(--surface);

  border:1px solid var(--border);
  border-radius:var(--radius);

  padding:0.8rem 1rem;

  display:flex;
  align-items:center;
  gap:0.75rem;
}

.fr-name{
  flex:1;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:0.9rem;
}

.fr-size{
  color:var(--muted);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size:0.75rem;
}

.fr-rm{
  width:2rem;
  height:2rem;

  border:0;
  border-radius:0.4rem;

  background:transparent;

  color:var(--muted);

  cursor:pointer;

  font-size:1rem;

  transition:
    background .15s ease,
    color .15s ease;
}

.fr-rm:hover{
  background:#fee2e2;
  color:var(--err);
}

.fr-state.ok{
  color:var(--ok);
}

.fr-state.err{
  color:var(--err);
}

/* buttons */

.actions{
  display:flex;
  gap:0.75rem;

  margin-top:1rem;
}

.btn{
  flex:1;

  min-height:3rem;

  padding:0.75rem 1rem;

  font-size:0.95rem;
  font-weight:600;

  border-radius:var(--radius);
  border:1px solid var(--border);

  background:var(--surface);

  cursor:pointer;

  transition:
    transform .15s ease,
    opacity .15s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);

  color:#fff;
}

.btn:disabled{
  opacity:.4;
  cursor:not-allowed;

  transform:none;
}

/* status */

.status{
  margin-top:1rem;

  font-size:0.9rem;
  text-align:center;

  color:var(--muted);
}

.status.err{
  color:var(--err);
}

.status.ok{
  color:var(--ok);
}

/* privacy */

.debug{
  margin-top:1.5rem;

  background:var(--surface);

  border:1px solid var(--border);
  border-radius:var(--radius);

  padding:1rem;
}

.debug summary{
  cursor:pointer;
  font-weight:600;
}

.debug pre{
  margin-top:0.75rem;

  white-space:pre-wrap;

  font-size:0.8rem;
  line-height:1.5;

  color:var(--muted);
}

/* mobile */

@media (max-width:640px){

  html{
    font-size:160%;
  }

  body{
    align-items:flex-start;
    padding:1rem;
  }

  .wrap{
    max-width:none;
  }

  .actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .drop-zone{
    padding:2rem 1rem;
  }
}