@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme:light;
  --ink:#17151a;
  --muted:#68717d;
  --paper:#eef1f5;
  --surface:#fff;
  --line:#d9dee6;
  --line-strong:#b7c0cc;
  --accent:#ed416d;
  --accent-soft:#fff0f4;
  --focus:#ed416d33;
  font-family:'Space Grotesk',Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
}

* { box-sizing:border-box; }
body {
  margin:0;
  min-width:320px;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 12%,#fff 0,transparent 30%),
    radial-gradient(circle at 88% 82%,#eeeaff 0,transparent 32%),
    var(--paper);
}
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }

.app-shell { width:min(820px,calc(100% - 32px)); margin:0 auto; padding:18px 0 72px; }
.app-header { margin:0 0 26px; }
.app-top { display:flex; align-items:center; justify-content:space-between; min-height:58px; margin-bottom:clamp(38px,7vh,68px); }
.app-logo { font-size:21px; font-weight:700; letter-spacing:-1.5px; }
.app-logo span { color:var(--accent); margin-left:2px; }
.app-actions { display:flex; align-items:center; gap:14px; }
.app-login { color:var(--ink); font-size:13px; font-weight:600; }
.session-account { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:13px; font-weight:700; white-space:nowrap; }
.session-dot { width:8px; height:8px; border-radius:50%; background:#37a766; box-shadow:0 0 0 3px #37a76620; }
.language-select {
  padding:8px 10px;
  border:1px solid var(--line-strong);
  border-radius:3px;
  background:transparent;
  color:var(--ink);
  font:500 11px 'DM Mono',monospace;
}
.eyebrow { margin:0 0 14px; color:var(--accent); font:500 11px 'DM Mono',monospace; letter-spacing:.1em; }
h1 { margin:0; font-size:clamp(38px,7vw,58px); line-height:.96; letter-spacing:-.06em; }
.intro { margin:13px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }
.usage-status { display:grid; grid-template-columns:auto minmax(120px,220px); align-items:center; justify-content:space-between; gap:24px; margin-top:24px; padding:14px 16px; border:1px solid var(--line); background:#f9fafc; }
.usage-status[hidden] { display:none; }
.usage-status > div:first-child { display:grid; gap:3px; }
.usage-status > div:first-child > span { color:var(--accent); font:500 10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.usage-status strong { font-size:13px; }
.usage-mini-track { height:6px; overflow:hidden; background:#e4e8ed; }
.usage-mini-track span { display:block; width:0; height:100%; background:var(--accent); transition:width .15s; }

.mode-switch { display:flex; gap:0; width:max-content; margin:0 0 -1px; position:relative; z-index:1; }
.mode-button {
  min-width:132px;
  padding:12px 17px;
  border:1px solid var(--line);
  border-bottom-color:var(--line);
  border-radius:3px 3px 0 0;
  background:#e8ebf0;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}
.mode-button + .mode-button { margin-left:-1px; }
.mode-button.active { background:var(--surface); border-bottom-color:var(--surface); color:var(--ink); }

.card {
  padding:clamp(26px,5vw,46px);
  border:1px solid #fff;
  border-radius:4px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 26px 80px #26324412,0 2px 8px #2632440d;
  backdrop-filter:blur(12px);
}
.verification-free { margin:0 0 24px; padding:11px 13px; border-left:3px solid #37a766; background:#f3faf6; color:#42604c; font-size:13px; line-height:1.5; }
.legal-consent { display:flex; align-items:flex-start; gap:10px; margin:20px 0; color:#4f5661; font-size:12px; line-height:1.5; }
.legal-consent[hidden] { display:none; }
.legal-consent #accept-legal {
  appearance:none;
  flex:0 0 18px;
  width:18px;
  min-width:18px;
  min-height:18px;
  height:18px;
  margin:0;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:3px;
  background:#fff;
  box-shadow:none;
  cursor:pointer;
}
.legal-consent #accept-legal:checked {
  border-color:var(--accent);
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.legal-consent #accept-legal:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; }
.legal-consent span { display:block; flex:1; min-width:0; }
.legal-consent a { color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.drop-zone {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:210px;
  padding:30px;
  border:1px dashed var(--line-strong);
  border-radius:3px;
  background:#f9fafc;
  color:var(--ink);
  text-align:center;
  cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.drop-zone:hover,.drop-zone.dragging { background:var(--accent-soft); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.drop-zone input { position:absolute; inset:0; z-index:2; width:100%; opacity:0; cursor:pointer; }
.drop-icon { margin-bottom:14px; color:var(--accent); font:500 28px 'DM Mono',monospace; }
.drop-zone strong { font-size:17px; }
.drop-zone span:last-child { margin-top:5px; color:var(--muted); font-size:12px; }
.file-summary { margin-top:15px; padding:12px 14px; border:1px solid #9cc8ad; border-radius:3px; background:#edf8f0; color:#275c38; font:11px 'DM Mono',monospace; }
.batch-feature { align-items:flex-start; display:flex; gap:13px; margin-top:14px; padding:13px 14px; border:1px solid #d9d1ef; background:#f7f4ff; }
.batch-feature[hidden] { display:none; }
.batch-badge { flex:0 0 auto; padding:5px 7px; background:var(--ink); color:#fff; font:500 9px 'DM Mono',monospace; letter-spacing:.06em; }
.batch-feature p { display:grid; gap:3px; margin:0; }
.batch-feature strong { font-size:13px; }
.batch-feature small { display:block; }
.batch-file-list { display:grid; gap:5px; margin:8px 0 0; padding:0; list-style:none; }
.batch-file-list li { display:flex; justify-content:space-between; gap:16px; color:#3f5d49; }

.fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:25px; }
label { display:grid; grid-template-rows:20px 50px minmax(36px,auto); gap:7px; color:#302d34; font-size:13px; font-weight:600; }
input:not([type=file]) {
  width:100%;
  height:50px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:3px;
  background:#f9fafc;
  color:var(--ink);
  font:500 16px 'Space Grotesk',Arial,sans-serif;
  outline:0;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
input:not([type=file]):hover { border-color:var(--line-strong); }
input:not([type=file]):focus { background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px var(--focus); }
small { color:var(--muted); font-size:11px; font-weight:400; line-height:1.45; }
.primary-button {
  width:100%;
  min-height:52px;
  margin-top:10px;
  padding:14px 20px;
  border:0;
  border-radius:3px;
  background:var(--ink);
  box-shadow:0 8px 20px #17151a1f;
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-align:left;
  transition:background .15s,box-shadow .15s,transform .15s;
}
.primary-button::after { content:'→'; float:right; color:#ff8cab; font-size:18px; line-height:1; }
.primary-button:hover:not(:disabled) { background:#2c2830; box-shadow:0 11px 24px #17151a29; transform:translateY(-1px); }
.primary-button:disabled { cursor:not-allowed; opacity:.38; box-shadow:none; }

.progress-panel { margin-top:24px; }
.progress-label { display:flex; justify-content:space-between; margin-bottom:9px; color:var(--muted); font:11px 'DM Mono',monospace; }
.progress-track { height:6px; overflow:hidden; background:#e4e8ed; }
.progress-bar { width:0; height:100%; background:var(--accent); transition:width .15s; }
.result { margin-top:22px; padding:18px; border:1px solid var(--line); border-radius:3px; background:#f9fafc; }
.result.success { border-left:4px solid #62af7b; }
.result.failure { border-left:4px solid var(--accent); }
.result h2 { margin:0 0 7px; font-size:16px; }
.result p { margin:5px 0; color:var(--muted); font-size:14px; }
.download { display:inline-block; margin-top:12px; padding:11px 14px; border-radius:3px; background:var(--accent); color:#fff; font-size:13px; font-weight:700; }
.case-creator { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.case-creator h3 { margin:0 0 6px; font-size:15px; }
.case-creator > p { margin:0 0 14px; font-size:12px; }
.case-creator label { display:grid; grid-template-rows:auto 46px; min-height:0; gap:6px; }
.case-creator label span { font-size:12px; }
.case-creator input { height:46px!important; font-size:13px!important; }
.case-consent { display:flex!important; grid-template-rows:none!important; align-items:flex-start; gap:9px!important; margin-top:12px; color:var(--muted); font-size:11px; font-weight:400; line-height:1.45; }
.case-consent input { flex:0 0 auto; width:16px!important; height:16px!important; margin:1px 0 0; }
.case-consent a { color:inherit; }
.case-create-button,.case-link button { margin-top:10px; padding:11px 14px; border:0; background:var(--ink); color:#fff; font-size:12px; font-weight:700; }
.case-create-button:disabled { opacity:.5; }
.case-create-status { margin-top:9px; color:var(--muted); font-size:12px; }
.case-password-notice { margin-top:16px!important; padding-top:14px; border-top:1px solid var(--line); font-size:12px!important; }
.case-link { display:grid; grid-template-columns:1fr auto; gap:8px; }
.case-link button { margin:0; white-space:nowrap; }

@media(max-width:600px) {
  .app-shell { width:min(100% - 24px,820px); padding-top:12px; }
  .app-top { margin-bottom:38px; }
  .fields { grid-template-columns:1fr; }
  .mode-switch { width:100%; }
  .mode-button { flex:1; min-width:0; }
  .card { padding:24px 20px; }
  .drop-zone { min-height:185px; padding:24px 16px; }
  .usage-status { grid-template-columns:1fr; gap:10px; }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; }
}