:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eef4ff;
  background: #040814;
  font-synthesis: none;
  --blue: #007bff;
  --panel: rgba(8, 16, 33, .82);
  --border: rgba(139, 164, 207, .15);
  --muted: #8e9db8;
  --soft: #b9c6da;
}
* { box-sizing: border-box; }
html { background: #040814; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: linear-gradient(180deg, #050a16 0%, #030711 100%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.ambient { position: fixed; pointer-events: none; border-radius: 999px; filter: blur(18px); opacity: .55; }
.ambient-one { width: 520px; height: 520px; left: -180px; top: -230px; background: radial-gradient(circle, rgba(0,123,255,.22), transparent 68%); }
.ambient-two { width: 440px; height: 440px; right: -190px; top: 170px; background: radial-gradient(circle, rgba(59,99,246,.14), transparent 70%); }
.shell { position: relative; width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 52px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0 46px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg, #0a8bff, #0058e7); box-shadow: 0 8px 28px rgba(0,123,255,.28); transform: rotate(9deg); }
.brand-mark span { width: 8px; height: 8px; border-radius: 50%; background: white; box-shadow: 7px 0 0 rgba(255,255,255,.66), -2px 7px 0 rgba(255,255,255,.38); }
.brand-name { font-size: 15px; font-weight: 780; letter-spacing: -.02em; }
.brand-product { color: #7f8da8; font-size: 14px; padding-left: 10px; border-left: 1px solid rgba(149,169,201,.2); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.sandbox-pill, .status-badge { display: inline-flex; align-items: center; min-height: 31px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(10,18,35,.7); color: #98a7bf; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #708099; box-shadow: 0 0 0 4px rgba(112,128,153,.08); }
.status-badge.ok { color: #a9ddc5; border-color: rgba(61,195,133,.19); background: rgba(27,110,77,.12); }
.status-badge.ok .status-dot { background: #49d492; box-shadow: 0 0 0 4px rgba(73,212,146,.08); }
.status-badge.bad { color: #ffb6b6; }
.status-badge.bad .status-dot { background: #ff7777; }
.hero { max-width: 800px; padding: 12px 0 34px; }
.hero-kicker, .section-label { color: #6caeff; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; }
.hero h1 { margin: 10px 0 15px; font-size: clamp(43px, 7vw, 72px); line-height: .98; letter-spacing: -.055em; font-weight: 720; }
.hero h1 span { color: #8492aa; }
.hero p { max-width: 690px; margin: 0; color: #8f9db5; font-size: 16px; line-height: 1.65; }
.workspace, .result-card { border: 1px solid var(--border); background: linear-gradient(180deg, rgba(11,20,39,.89), rgba(6,13,28,.88)); border-radius: 24px; box-shadow: 0 28px 80px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.workspace { overflow: visible; }
.workspace-bar { min-height: 70px; padding: 13px 16px 13px 18px; border-bottom: 1px solid rgba(132,155,194,.12); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.mode-tabs { display: inline-flex; gap: 5px; padding: 4px; background: rgba(3,8,18,.54); border: 1px solid rgba(132,155,194,.12); border-radius: 12px; }
.mode-tab { border: 0; border-radius: 9px; padding: 9px 14px; color: #8695ae; background: transparent; font-size: 12px; font-weight: 720; }
.mode-tab:hover { color: #dce7f8; }
.mode-tab.active { color: #f7faff; background: #14233f; box-shadow: inset 0 0 0 1px rgba(111,155,227,.12); }
.language-control { display: flex; align-items: center; gap: 9px; color: #7888a2; font-size: 11px; font-weight: 700; }
.language-control select { min-height: 36px; border: 1px solid rgba(127,151,190,.17); border-radius: 9px; background: #071020; color: #dce6f5; padding: 0 28px 0 10px; outline: none; }
.mode-panel { padding: 30px; }
.panel-copy { max-width: 650px; margin-bottom: 25px; }
.panel-copy h2 { margin: 5px 0 7px; font-size: 23px; letter-spacing: -.025em; }
.panel-copy p { margin: 0; color: #8291aa; font-size: 13px; line-height: 1.6; }
.autocomplete-wrap { position: relative; }
.search-field { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 17px; width: 20px; height: 20px; fill: none; stroke: #647797; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.search-input, .coordinate-field input { width: 100%; border: 1px solid #22324f; background: rgba(3,9,20,.76); color: #f4f7fc; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.search-input { height: 60px; border-radius: 14px; padding: 0 64px 0 50px; font-size: 16px; }
.search-input::placeholder, .coordinate-field input::placeholder { color: #596a87; }
.search-input:focus, .coordinate-field input:focus { border-color: rgba(0,123,255,.78); background: #061022; box-shadow: 0 0 0 4px rgba(0,123,255,.1); }
.key-hint { position: absolute; right: 14px; padding: 5px 7px; border-radius: 7px; border: 1px solid rgba(126,150,188,.16); background: #0a1426; color: #61718d; font: 10px ui-monospace, monospace; }
.suggestions { position: absolute; left: 0; right: 0; top: 68px; z-index: 30; overflow: hidden; border: 1px solid #243451; border-radius: 14px; background: #081223; box-shadow: 0 28px 70px rgba(0,0,0,.48); }
.suggestion { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 13px 15px; text-align: left; color: #ecf2fc; background: transparent; border: 0; border-bottom: 1px solid rgba(132,154,190,.1); }
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion:focus { background: rgba(52,105,191,.13); outline: none; }
.suggestion strong, .match-copy strong { display: block; font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion small, .match-copy small { display: block; color: #8493aa; font-size: 11px; line-height: 1.45; }
.suggestion .type { align-self: center; color: #61718c; font-size: 10px; text-transform: capitalize; }
.empty-match { padding: 15px; display: grid; gap: 4px; color: #dce6f5; }
.empty-match span { color: #73849f; font-size: 12px; }
.panel-footer { min-height: 45px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.request-meta { color: #71829e; font-size: 11px; min-height: 18px; }
.quiet-button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #788ba9; padding: 7px 0; font-size: 11px; font-weight: 700; }
.quiet-button:hover, .quiet-button.active { color: #9fc6ff; }
.quiet-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.action-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 11px; }
.primary-button { min-height: 60px; border: 0; border-radius: 13px; padding: 0 19px; color: white; background: linear-gradient(180deg, #1187ff, #006eea); font-size: 12px; font-weight: 780; box-shadow: 0 12px 30px rgba(0,123,255,.16); }
.primary-button:hover { filter: brightness(1.06); }
.match-list { margin-top: 18px; overflow: hidden; border: 1px solid rgba(129,153,191,.13); border-radius: 14px; background: rgba(3,9,20,.36); }
.match-row { width: 100%; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; color: #ecf2fc; background: transparent; border: 0; border-bottom: 1px solid rgba(132,154,190,.09); }
.match-row:last-child { border-bottom: 0; }
.match-row:hover { background: rgba(52,105,191,.1); }
.match-index { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #111e34; color: #6e83a4; font-size: 10px; font-weight: 800; }
.match-coordinates { color: #7890b2; font: 10px ui-monospace, monospace; }
.reverse-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 11px; align-items: end; }
.coordinate-field { display: grid; gap: 7px; color: #788aa5; font-size: 10px; font-weight: 760; text-transform: uppercase; letter-spacing: .08em; }
.coordinate-field input { height: 53px; border-radius: 12px; padding: 0 14px; font-size: 14px; text-transform: none; letter-spacing: normal; }
.reverse-form .primary-button { min-height: 53px; }
.reverse-footer { padding-top: 14px; }
.result-card { margin-top: 18px; padding: 28px; }
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; }
.result-title-wrap h2 { margin: 6px 0 5px; font-size: 27px; letter-spacing: -.035em; }
.address { margin: 0; color: #8c9bb3; font-size: 13px; line-height: 1.55; }
.category-badge { padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(74,129,212,.18); background: rgba(36,91,172,.12); color: #85b7ff; font-size: 10px; font-weight: 750; text-transform: capitalize; white-space: nowrap; }
.detail-grid { margin: 23px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.detail-item { min-width: 0; padding: 13px; border: 1px solid rgba(131,153,189,.11); border-radius: 11px; background: rgba(3,9,20,.38); }
.detail-item dt { margin-bottom: 5px; color: #667895; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.detail-item dd { margin: 0; color: #d7e2f3; font-size: 12px; overflow-wrap: anywhere; }
.detail-item a { color: #75acff; }
.json-disclosure { margin-top: 18px; border-top: 1px solid rgba(131,153,189,.1); }
.json-disclosure summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 17px 1px 0; color: #8293ae; font-size: 11px; font-weight: 720; cursor: pointer; }
.json-disclosure summary::-webkit-details-marker { display: none; }
.json-disclosure summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s; }
.json-disclosure[open] summary svg { transform: rotate(180deg); }
.json-body { margin-top: 14px; }
.json-label { margin-bottom: 7px; color: #5e708d; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
pre { margin: 0; max-height: 500px; overflow: auto; padding: 15px; border-radius: 11px; border: 1px solid #16243b; background: #020611; color: #aec2df; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.footer { display: flex; justify-content: space-between; gap: 18px; padding: 24px 4px 0; color: #4e5f7a; font-size: 10px; }
@media (max-width: 760px) {
  .shell { width: min(100% - 20px, 1120px); padding-top: 18px; }
  .topbar { padding-bottom: 30px; }
  .brand-product, .sandbox-pill { display: none; }
  .hero { padding-top: 2px; }
  .hero h1 { font-size: clamp(39px, 12vw, 56px); }
  .workspace-bar { align-items: stretch; flex-direction: column; }
  .mode-tabs { width: 100%; }
  .mode-tab { flex: 1; padding-inline: 8px; }
  .language-control { justify-content: space-between; }
  .mode-panel { padding: 20px 16px; }
  .action-form, .reverse-form { grid-template-columns: 1fr; }
  .primary-button { width: 100%; }
  .match-row { grid-template-columns: 28px minmax(0,1fr); }
  .match-coordinates { grid-column: 2; }
  .panel-footer, .result-head { align-items: flex-start; flex-direction: column; }
  .detail-grid { grid-template-columns: 1fr; }
  .key-hint { display: none; }
  .search-input { padding-right: 16px; }
  .footer { flex-direction: column; gap: 4px; }
}