:root{
  --md-primary:#6750A4;
  --md-primary-container:#EADDFF;
  --md-on-primary:#ffffff;
  --md-on-primary-container:#21005D;
  --md-surface:#FFFBFE;
  --md-surface-dim:#F3EDF7;
  --md-surface-container:#F3EDF7;
  --md-surface-container-high:#ECE6F0;
  --md-on-surface:#1C1B1F;
  --md-on-surface-variant:#49454F;
  --md-outline:#79747E;
  --md-outline-variant:#CAC4D0;
  --md-error:#B3261E;
  --elev-1:0 1px 2px rgba(0,0,0,.30),0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2:0 1px 2px rgba(0,0,0,.30),0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.30);
  --radius-m:16px;
  --radius-l:24px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--md-surface-dim);
  color:var(--md-on-surface);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- top bar ---------- */
.topbar{
  background:var(--md-surface);
  box-shadow:var(--elev-1);
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
}
.topbar svg{width:28px;height:28px;fill:var(--md-primary);flex:0 0 auto;}
.topbar h1{font-size:1.25rem;font-weight:500;margin:0;}
.topbar a{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;}

/* ---------- layout ---------- */
.page{
  flex:1;width:100%;max-width:1100px;margin:0 auto;padding:24px 16px 48px;
  display:flex;flex-direction:column;justify-content:center;
}
.page-narrow{
  flex:1;width:100%;max-width:720px;margin:0 auto;padding:24px 16px 48px;
  display:flex;flex-direction:column;justify-content:center;
}
.grid-2{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr;}}

.card{
  background:var(--md-surface);
  border-radius:var(--radius-l);
  box-shadow:var(--elev-1);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;}
.field label{font-size:.78rem;font-weight:500;color:var(--md-on-surface-variant);}
.field textarea{
  padding:12px 14px;border-radius:8px;border:1px solid var(--md-outline);
  background:var(--md-surface);font-size:.95rem;color:var(--md-on-surface);
  width:100%;font-family:inherit;resize:vertical;min-height:160px;
}
.field textarea:focus{outline:none;border:2px solid var(--md-primary);padding:11px 13px;}

.select-wrap{position:relative;}
.select-wrap select{
  width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:12px 40px 12px 14px;border-radius:8px;border:1px solid var(--md-outline);
  background:var(--md-surface);font-size:.95rem;color:var(--md-on-surface);
  font-family:inherit;cursor:pointer;
}
.select-wrap select:focus{outline:none;border:2px solid var(--md-primary);padding:11px 39px 11px 13px;}
.select-wrap svg{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;fill:var(--md-on-surface-variant);pointer-events:none;
}

/* ---------- segmented button (view toggle) ---------- */
.segmented{display:flex;border-radius:20px;border:1px solid var(--md-outline);overflow:hidden;}
.segmented button{
  flex:1 1 50%;background:var(--md-surface);border:none;padding:10px 16px;
  font-size:.875rem;font-weight:500;color:var(--md-on-surface);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
  transition:background .15s ease,color .15s ease;
}
.segmented button svg{width:18px;height:18px;fill:currentColor;}
.segmented button+button{border-left:1px solid var(--md-outline);}
.segmented button.active{background:var(--md-primary-container);color:var(--md-on-primary-container);}
.segmented button:hover:not(.active){background:var(--md-surface-container-high);}

/* ---------- buttons (used on privacy page) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border-radius:20px;border:1px solid var(--md-outline);background:transparent;
  color:var(--md-primary);font-size:.875rem;font-weight:500;cursor:pointer;
  text-decoration:none;font-family:inherit;
}
.btn svg{width:18px;height:18px;fill:currentColor;}
.btn:hover{background:rgba(103,80,164,.08);}

/* ---------- output area ---------- */
.output-body{flex:1;min-height:400px;display:flex;flex-direction:column;}
.output-placeholder{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--md-on-surface-variant);text-align:center;
}
.output-placeholder svg{width:40px;height:40px;fill:var(--md-outline);}
.output-placeholder p{margin:0;font-size:.85rem;max-width:220px;}

table.result-table{width:100%;border-collapse:collapse;display:none;}
table.result-table th{
  text-align:left;padding:10px 12px;font-size:.72rem;font-weight:600;
  color:var(--md-on-surface-variant);text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--md-outline-variant);
}
table.result-table td{padding:10px 12px;border-bottom:1px solid var(--md-outline-variant);font-size:.9rem;}
table.result-table tr:last-child td{border-bottom:none;}
table.result-table td.word-cell{font-weight:500;color:var(--md-on-surface);}
table.result-table td.translation-cell{
  background:var(--md-primary-container);color:var(--md-on-primary-container);
  font-weight:500;border-radius:8px;
}

#text-view{display:none;font-size:1rem;line-height:1.8;color:var(--md-on-surface);}
#text-view .t{color:var(--md-on-surface-variant);font-size:.85em;}

/* ---------- footer ---------- */
.footer{background:var(--md-surface);border-top:1px solid var(--md-outline-variant);margin-top:auto;}
.footer-inner{
  max-width:1100px;margin:0 auto;padding:20px 16px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  font-size:.82rem;color:var(--md-on-surface-variant);
}
.footer-inner a{color:var(--md-primary);text-decoration:none;font-weight:500;}
.footer-inner a:hover{text-decoration:underline;}

/* ---------- snackbar ---------- */
.snackbar{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  background:#313033;color:#F4EFF4;padding:14px 18px;border-radius:8px;
  display:flex;align-items:center;gap:16px;box-shadow:var(--elev-3);
  max-width:360px;opacity:0;pointer-events:none;
  transition:transform .25s ease,opacity .25s ease;z-index:50;
}
.snackbar.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}
.snackbar p{margin:0;font-size:.85rem;line-height:1.4;}
.snackbar a{color:#D0BCFF;font-weight:600;text-decoration:underline;}
.snackbar button{background:none;border:none;color:#F4EFF4;font-size:1.3rem;cursor:pointer;line-height:1;padding:0;margin-left:auto;flex:0 0 auto;}

/* ---------- privacy policy content ---------- */
.prose h2{font-size:1.4rem;font-weight:600;margin:0 0 20px;}
.prose h3{font-size:1.05rem;font-weight:600;margin:28px 0 10px;color:var(--md-on-surface);}
.prose p{font-size:.92rem;line-height:1.7;color:var(--md-on-surface-variant);margin:0 0 12px;}