:root {
  --md-sys-color-primary: #88d7b7;
  --md-sys-color-on-primary: #00382a;
  --md-sys-color-primary-container: #00513d;
  --md-sys-color-on-primary-container: #a4f3d2;
  --md-sys-color-surface: #0f1512;
  --md-sys-color-on-surface: #dee4e0;
  --md-sys-color-on-surface-variant: #bfc9c2;
  --md-sys-color-surface-container-low: #171d1a;
  --md-sys-color-surface-container: #1b211e;
  --md-sys-color-outline: #8a938d;
  --md-sys-color-outline-variant: #3f4944;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-error-container: #93000a;
  --warning-surface: #2b1a19;
  --warning-outline: #6f4743;
  --md-sys-shape-extra-small: 4px;
  --md-sys-shape-medium: 12px;
  --md-sys-shape-large: 16px;
  --md-sys-shape-full: 9999px;
  --motion: cubic-bezier(.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; background: var(--md-sys-color-surface); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface); font: 14px/1.5 Inter, sans-serif; transition: background-color 180ms var(--motion); }
.page-shell { width: min(100% - 48px, 1040px); min-height: 100vh; margin: 0 auto; padding: 24px 0 40px; }
.topbar { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 8px; }
.identity { display: inline-flex; align-items: center; gap: 12px; color: var(--md-sys-color-on-surface); font-size: 16px; font-weight: 500; text-decoration: none; }
.avatar { width: 44px; height: 44px; border-radius: var(--md-sys-shape-full); object-fit: cover; background: var(--md-sys-color-primary-container); }
.language-button { min-width: 64px; min-height: 40px; padding: 10px 20px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-full); color: var(--md-sys-color-primary); background: transparent; font: 500 14px/20px Inter, sans-serif; cursor: pointer; }
.language-button:hover { background: rgba(136,215,183,.08); }
.hero { padding: 64px 8px 40px; }
.hero-copy { max-width: 720px; }
h1 { color: var(--md-sys-color-on-surface); font-size: clamp(34px, 6vw, 48px); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.intro { max-width: 660px; margin-top: 20px; color: var(--md-sys-color-on-surface-variant); font-size: 16px; line-height: 24px; }

.search-form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 0 8px 48px; }
.text-field { position: relative; height: 56px; }
.text-field input { width: 100%; height: 100%; padding: 19px 48px 6px 16px; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-medium); outline: 0; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container-low); font-size: 16px; caret-color: var(--md-sys-color-primary); transition: border-color 150ms var(--motion), box-shadow 150ms var(--motion); }
.text-field label { position: absolute; top: 16px; left: 16px; color: var(--md-sys-color-on-surface-variant); font-size: 16px; pointer-events: none; transform-origin: left; transition: top 150ms var(--motion), transform 150ms var(--motion), color 150ms var(--motion); }
.text-field input:focus { border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
.text-field input:focus + label, .text-field input:not(:placeholder-shown) + label { top: 5px; color: var(--md-sys-color-primary); transform: scale(.75); }
.clear-button { position: absolute; top: 8px; right: 8px; display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--md-sys-color-on-surface-variant); background: transparent; font-size: 25px; cursor: pointer; }
.text-field.has-value .clear-button { display: block; }
.supporting-text { grid-column: 1; margin: 0 16px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.text-field.is-error input { border-color: var(--md-sys-color-error); box-shadow: inset 0 0 0 1px var(--md-sys-color-error); }
.text-field.is-error label, .supporting-text.is-error { color: var(--md-sys-color-error); }

.open-button { position: relative; display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 10px 24px; overflow: hidden; border: 0; border-radius: var(--md-sys-shape-full); color: var(--md-sys-color-on-primary); background: var(--md-sys-color-primary); font: 600 14px/20px Inter, sans-serif; text-decoration: none; cursor: pointer; }
.open-button:hover { filter: brightness(1.06); }
.search-button { height: 56px; grid-column: 2; grid-row: 1; }
.spinner { display: none; width: 20px; height: 20px; border: 2px solid rgba(0,56,42,.3); border-top-color: var(--md-sys-color-on-primary); border-radius: 50%; animation: spin .7s linear infinite; }
.search-button.is-loading span:first-child { display: none; }
.search-button.is-loading .spinner { display: block; }
.section-title { margin: 0 0 16px 8px; color: var(--md-sys-color-on-surface); font-size: 22px; font-weight: 500; line-height: 28px; }
.result-card { overflow: hidden; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium); background: var(--md-sys-color-surface-container-low); }
.report-card { margin-top: 16px; padding: 20px 24px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium); background: var(--md-sys-color-surface-container-low); }
.report-card p { color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 20px; }
.result-list { padding: 8px 0; }
.result-item { display: grid; min-height: 56px; grid-template-columns: minmax(150px,.8fr) minmax(0,1.2fr); gap: 24px; align-items: center; margin: 0 24px; padding: 8px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.result-item:last-child { border-bottom: 0; }
.result-item > span, .result-copy > span { color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 20px; }
.result-item strong, .result-copy strong { color: var(--md-sys-color-on-surface); font-size: 14px; font-weight: 500; line-height: 20px; text-align: right; overflow-wrap: anywhere; }
.result-item-tall { min-height: 72px; }
.result-item-actions { grid-template-columns: minmax(0,1fr) auto; min-height: 72px; }
.result-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.result-copy strong { text-align: left; }
.card-actions { display: flex; gap: 8px; }
.open-button[hidden] { display: none; }
footer { margin-top: 48px; padding: 24px 8px 0; border-top: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.snackbar { position: fixed; bottom: 24px; left: 50%; z-index: 12; padding: 12px 18px; border-radius: 8px; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container); opacity: 0; transform: translate(-50%, 12px); transition: .18s var(--motion); }
.snackbar.is-visible { opacity: 1; transform: translate(-50%,0); }
.error-flash-symbol { position: fixed; top: 50%; left: 50%; z-index: 20; color: var(--md-sys-color-error); font-size: 72px; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.8); transition: .16s var(--motion); }
body.is-error-flash { background: var(--warning-surface); }
body.is-error-flash .page-shell { opacity: .38; }
body.is-error-flash .error-flash-symbol { opacity: 1; transform: translate(-50%,-50%) scale(1); }
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .page-shell { width: min(100% - 24px,1040px); padding-top: 12px; }
  .hero { padding: 48px 4px 32px; }
  .search-form { grid-template-columns: 1fr; margin-inline: 4px; }
  .search-button { width: 100%; height: 50px; grid-column: 1; grid-row: 3; }
  .result-item { grid-template-columns: 1fr; gap: 3px; margin-inline: 18px; padding-block: 12px; }
  .result-item strong { text-align: left; }
  .result-item-actions { grid-template-columns: 1fr; gap: 12px; }
  .card-actions { width: 100%; }
  .card-actions > * { flex: 1; }
  footer { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }