:root{
  --bg:#fbf7f6; --card:#fff; --ink:#1b1a22; --muted:#6f6b7a;
  --line:rgba(27,26,34,.10); --accent:#b4232f; --accent-soft:#fbe9ea;
  --ok:#1f7a4d; --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(900px 500px at 12% -10%, #fbe3e2 0%, rgba(251,227,226,0) 62%),
    radial-gradient(760px 460px at 100% 0%, #e9e4f6 0%, rgba(233,228,246,0) 58%),
    var(--bg);
  color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{max-width:760px;margin:0 auto;padding:8px 18px 56px}
.top{
  max-width:760px;margin:0 auto;padding:20px 18px 6px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:.01em}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.row-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tabs{display:flex;gap:6px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:4px}
.tab{
  appearance:none;border:0;background:transparent;color:var(--muted);
  font:inherit;font-size:14px;padding:7px 14px;border-radius:999px;cursor:pointer
}
.tab.is-on{background:var(--ink);color:#fff}
h1{font-size:clamp(24px,5vw,32px);line-height:1.15;margin:18px 0 6px;letter-spacing:-.02em}
.sub{color:var(--muted);margin:0 0 22px;font-size:15px}
.view{display:none}
.view.is-on{display:block}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.field{position:relative;display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;color:var(--muted)}
input{
  width:100%;font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus{border-color:rgba(180,35,47,.45);box-shadow:0 0 0 4px rgba(180,35,47,.09)}
.dims-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.dims-row input{padding:13px 10px;text-align:center}
.hint{position:absolute;top:100%;left:0;right:0;z-index:5;margin-top:4px}
.hint:empty{display:none}
.hint button{
  display:block;width:100%;text-align:left;font:inherit;font-size:15px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:4px;cursor:pointer
}
.hint small{color:var(--muted);margin-left:6px}
.modes{display:inline-flex;gap:6px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:4px;margin:18px 0 16px}
.mode{appearance:none;border:0;background:transparent;font:inherit;font-size:14px;color:var(--muted);padding:8px 16px;border-radius:999px;cursor:pointer}
.mode.is-on{background:var(--accent);color:#fff}
.primary{
  appearance:none;border:0;border-radius:14px;background:var(--ink);color:#fff;
  font:inherit;font-weight:600;padding:14px 22px;cursor:pointer;transition:transform .06s,opacity .15s
}
.primary:active{transform:translateY(1px)}
.primary[disabled]{opacity:.55;cursor:default}
.results{margin-top:18px;display:grid;gap:10px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px
}
.card.best{border-color:rgba(31,122,77,.35);box-shadow:0 0 0 3px rgba(31,122,77,.07)}
.card .name{font-weight:600}
.card .meta{color:var(--muted);font-size:13px;margin-top:3px}
.card .price{font-weight:700;font-size:19px;white-space:nowrap}
.card .price small{display:block;font-weight:500;font-size:12px;color:var(--muted);text-align:right}
.badge{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:var(--ok);background:rgba(31,122,77,.10);padding:2px 6px;border-radius:6px;vertical-align:1px}
.error{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--accent-soft);color:#7d1620;font-size:14px}
.track-row{display:flex;gap:10px;align-items:stretch}
.track-row input{flex:1}
.timeline{margin-top:20px}
.step{position:relative;padding:0 0 18px 26px}
.step:before{content:"";position:absolute;left:6px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--line)}
.step:after{content:"";position:absolute;left:10px;top:18px;bottom:0;width:1px;background:var(--line)}
.step:last-child:after{display:none}
.step.first:before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.step .t{font-weight:600}
.step .d{color:var(--muted);font-size:13px}
.empty{color:var(--muted);font-size:14px;margin-top:14px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}
.foot{max-width:760px;margin:0 auto;padding:0 18px 30px;color:var(--muted);font-size:12.5px}

.auth{font-size:14px;color:var(--muted)}
.auth a{color:var(--accent);text-decoration:none;font-weight:600}
.auth .who{color:var(--muted);margin-right:10px}