:root { --bg: #f4f1ea; --ink: #2b2a28; --sub: #77736b; --card: #fff; --line: #e2ddd2; --accent: #1f8a5b; --bad: #c8412f; --gold: #d9a21b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: "M PLUS Rounded 1c", sans-serif; display: flex; flex-direction: column; }
header#top { display: flex; align-items: center; gap: 28px; padding: 14px 28px; background: #fff; border-bottom: 2px solid var(--line); }
h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: .04em; }
#date { font-size: 20px; color: var(--sub); font-weight: 700; }
#goal { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--sub); }
#goal .bar { width: 260px; height: 14px; background: var(--line); border-radius: 7px; overflow: hidden; }
#goal i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .6s; }
main { flex: 1; display: flex; gap: 20px; padding: 20px 28px; min-height: 0; }
#left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#stage { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
#side { width: 480px; display: flex; flex-direction: column; gap: 14px; }
.box { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 12px 18px; }
.lbl { font-size: 15px; color: var(--sub); font-weight: 700; }
.big { font-size: 42px; font-weight: 800; line-height: 1.2; }
#chart { width: 100%; height: 96px; display: block; margin: 4px 0; }
#hold { list-style: none; margin: 0; padding: 0; font-size: 15px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
#hold li { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed var(--line); }
footer#actions { display: flex; gap: 14px; justify-content: flex-end; padding-top: 14px; }
button { font: inherit; font-weight: 800; font-size: 20px; padding: 12px 26px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; cursor: pointer; }
button.main { background: var(--ink); color: #fff; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 18px 22px; }
.card h2 { margin: 0 0 8px; font-size: 24px; }
#goal span { white-space: nowrap; }
@media (max-width: 900px) {
  html, body { height: auto; min-height: 100%; }
  main { flex-direction: column; padding: 12px 16px; flex: none; }
  footer#actions { position: sticky; bottom: 0; padding: 10px 0; background: var(--bg); flex-wrap: wrap; }
  #goal .bar { width: 160px; }
  #side { width: auto; }
  header#top { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  #goal { margin-left: 0; }
}
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.job { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.job .kind { font-size: 14px; color: var(--sub); font-weight: 700; }
.job h3 { margin: 0; font-size: 21px; }
.job .sal { font-size: 26px; font-weight: 800; color: var(--accent); }
.job .ot { font-size: 15px; color: var(--sub); }
.job ul { margin: 6px 0 10px; padding-left: 0; list-style: none; font-size: 15px; flex: 1; }
.job li { padding: 4px 0; border-top: 1px dashed var(--line); }
@media (max-width: 900px) { .jobs { grid-template-columns: 1fr; } }
.big.neg { color: var(--bad); }
.news ul { margin: 0; padding: 0; list-style: none; font-size: 17px; }
.news li { padding: 7px 0; border-top: 1px dashed var(--line); }
.tag { display: inline-block; min-width: 110px; margin-right: 10px; padding: 1px 8px; border-radius: 6px; background: #eef4ef; color: var(--accent); font-weight: 800; font-size: 14px; text-align: center; }
.alloc .row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.alloc .nm { width: 230px; font-weight: 700; }
button.lv { font-size: 16px; padding: 6px 14px; border-width: 2px; border-color: var(--line); }
button.lv.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.result ul { list-style: none; padding: 0; font-size: 20px; }
.result li { display: flex; justify-content: space-between; max-width: 420px; padding: 4px 0; }
.up { color: var(--accent); } .down { color: var(--bad); }
.note { font-weight: 800; font-size: 20px; color: var(--bad); }
.note.back { color: var(--accent); }
.sum { font-size: 20px; }
.over h2 { font-size: 44px; }
.over.goal h2 { color: var(--gold); } .over.broke h2 { color: var(--bad); }
@media (max-width: 900px) { .alloc .row { flex-wrap: wrap; } .alloc .nm { width: 100%; } }
.start p { font-size: 19px; line-height: 1.8; }
.modes { display: flex; gap: 16px; margin: 18px 0; }
button.mode { font-size: 24px; padding: 18px 34px; }
button.mode[data-m=jev] { background: #1d3557; color: #fff; border-color: #1d3557; }
.keyrow label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--sub); }
.keyrow input { font: inherit; font-size: 16px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; max-width: 420px; }
.err { color: var(--bad); font-weight: 700; }
#jevBox { border-color: #1d3557; }
#jevBox .lbl { color: #1d3557; }
.jrow { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 3px 0; }
.jrow span { width: 96px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jrow b { width: 64px; text-align: right; }
.dist { flex: 1; display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #eee; }
.dist i { display: block; height: 100%; background: #e6e3dc; }
.dist i.d0 { background: #c8412f; } .dist i.d1 { background: #e9b949; } .dist i.d2 { background: #8cc49f; } .dist i.d3 { background: #1d6fa5; }
.hint { color: var(--sub); margin: 6px 0; } .think { color: #1d3557; font-weight: 800; }
.meta { font-size: 13px; color: var(--sub); margin-top: 6px; }
.jevtag { margin-top: 8px; padding: 4px 8px; border-radius: 8px; background: #e8eef6; color: #1d3557; font-weight: 800; font-size: 15px; }
.jevtag.bad { background: #fbe4e0; color: var(--bad); }
.job.picked { border-color: #1d3557; box-shadow: 0 0 0 3px #1d355733; }
button.ask, button.jevgo { background: #1d3557; border-color: #1d3557; color: #fff; }
.offer .from { font-weight: 800; color: var(--sub); }
.offer blockquote { margin: 12px 0; padding: 16px 20px; background: #f7f3ff; border-left: 6px solid #9b7fd1; border-radius: 8px; font-size: 20px; line-height: 1.7; }
.small { font-size: 13px; color: var(--sub); }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--sub); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.legend i.d0 { background: #c8412f; } .legend i.d1 { background: #e9b949; } .legend i.d2 { background: #8cc49f; } .legend i.d3 { background: #1d6fa5; }
.jrow.wide span { width: 170px; }
.over h2 { font-size: 64px; margin: 6px 0 16px; }
.over .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; font-size: 22px; }
.over .stats div { display: flex; flex-direction: column; border-top: 2px dashed var(--line); padding-top: 8px; }
.over .stats span { font-size: 15px; color: var(--sub); font-weight: 700; }
.over .stats b { font-size: 30px; }
.over .stats small { font-size: 15px; color: var(--sub); margin-left: 6px; }