:root {
  --wj-bg: #f4f6f9;
  --wj-card: #ffffff;
  --wj-text: #17202a;
  --wj-muted: #6f7782;
  --wj-border: #d9dee5;
  --wj-red: #d94141;
  --wj-red-soft: #fff2f2;
  --wj-blue: #3b82c4;
  --wj-blue-soft: #edf7ff;
  --wj-green: #218a5b;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--wj-bg); color: var(--wj-text); font-family: Tahoma, Arial, sans-serif; }
.wj-page { min-height: 100vh; padding: 28px 14px 50px; }
.wj-card { max-width: 1050px; margin: 0 auto; background: var(--wj-card); border: 1px solid var(--wj-border); border-radius: 22px; padding: 22px; box-shadow: 0 14px 45px rgba(20,30,45,.07); position: relative; }
.wj-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.wj-kicker { display: inline-block; color: var(--wj-muted); font-size: 12px; margin-bottom: 6px; }
.wj-header h1 { margin: 0 0 7px; font-size: 27px; }
.wj-header p { margin: 0; color: var(--wj-muted); font-size: 13px; }
.wj-level-badge { background: #f5f6f8; border: 1px solid var(--wj-border); border-radius: 12px; padding: 10px 14px; white-space: nowrap; }
.wj-level-badge strong { font-size: 20px; }
.wj-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 20px; }
.wj-stats > div { border: 1px solid var(--wj-border); border-radius: 13px; padding: 10px; text-align: center; background: #fff; }
.wj-stats span, .wj-stats small { display: block; color: var(--wj-muted); font-size: 11px; }
.wj-stats strong { display: inline-block; margin-top: 4px; font-size: 22px; }
.wj-stats .danger strong { color: var(--wj-red); }
.wj-message { margin-top: 14px; border-radius: 12px; padding: 12px; text-align: center; background: #f5f5f3; font-size: 13px; }
.wj-message.info { background: var(--wj-blue-soft); color: #205b86; }
.wj-message.success { background: #eefaf4; color: var(--wj-green); }
.wj-message.danger { background: var(--wj-red-soft); color: #b52f2f; }
.wj-goal { margin-top: 14px; padding: 14px; border: 1px solid #efcaca; background: #fff8f8; border-radius: 15px; display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: center; }
.wj-goal span { display: block; color: #a05a5a; font-size: 11px; }
.wj-goal strong { font-size: 20px; }
.wj-progress-label { display:flex; justify-content:space-between; font-size: 11px; color: var(--wj-muted); margin-bottom: 6px; }
.wj-progress { height: 9px; background: #eee; border-radius: 999px; overflow: hidden; }
.wj-progress i { display:block; height:100%; width:0; background: var(--wj-red); transition: width .2s ease; }
.wj-jugs { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }
.wj-jug { border: 1px solid var(--wj-border); border-radius: 17px; background: #fff; padding: 12px; cursor: pointer; text-align: right; transition: .18s ease; }
.wj-jug:hover { transform: translateY(-2px); }
.wj-jug.selected { border-color: #313a44; box-shadow: 0 0 0 2px rgba(49,58,68,.09); }
.wj-jug.target { background: #fffafa; }
.wj-jug-head { display:flex; justify-content:space-between; gap:10px; align-items:start; }
.wj-jug-head b { font-size: 14px; }
.wj-jug-head small { color: var(--wj-muted); font-size: 10px; }
.wj-jug-glass { position: relative; display:block; width: 150px; height: 220px; margin: 12px auto 8px; border: 3px solid #9ba3ab; border-top: 0; border-radius: 0 0 38px 38px; overflow: hidden; background: linear-gradient(#fff,#f7f8f9); }
.wj-jug-glass:before { content:''; position:absolute; top:0; left:13px; right:13px; height:13px; border:3px solid #9ba3ab; border-bottom:0; border-radius:10px 10px 0 0; background:#fff; z-index:2; }
.wj-jug-glass i { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(#78c2e8,#3c91c1); opacity:.95; transition:height .25s ease; }
.wj-jug-glass em { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:bold; font-size:14px; z-index:3; }
.wj-target-mark { position:absolute; top:23px; right:9px; z-index:4; font-size:10px; background:#fff; border:1px solid #e3bcbc; color:#b03c3c; padding:3px 6px; border-radius:999px; }
.wj-jug-foot { color: var(--wj-muted); font-size: 10px; display:block; text-align:center; }
.wj-controls { margin-top: 18px; border: 1px solid var(--wj-border); border-radius: 15px; padding: 15px; }
.wj-selected { text-align:center; margin-bottom:12px; }
.wj-selected span { display:block; color:var(--wj-muted); font-size:11px; }
.wj-selected strong { font-size:15px; }
.wj-actions, .wj-pour-targets { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.wj-pour-targets { margin-top:10px; }
.wj-btn { border:1px solid var(--wj-border); background:#fff; color:var(--wj-text); border-radius:11px; padding:10px 15px; font:inherit; font-weight:bold; cursor:pointer; }
.wj-btn:hover:not(:disabled) { background:#f6f7f8; }
.wj-btn:disabled { opacity:.45; cursor:not-allowed; }
.wj-primary { background:#2f3943; border-color:#2f3943; color:#fff; }
.wj-primary:hover:not(:disabled) { background:#222a31; }
.wj-btn.active { border-color:#2f3943; }
.wj-rule { margin: 13px 0 0; text-align:center; color:var(--wj-muted); font-size:10px; }
.wj-overlay { position:absolute; inset:0; min-height:100%; background:rgba(244,246,249,.93); display:flex; align-items:center; justify-content:center; padding:25px; border-radius:22px; z-index:20; }
.wj-overlay-card { width:min(520px,100%); background:#fff; border:1px solid var(--wj-border); border-radius:20px; padding:28px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.12); }
.wj-overlay-icon { width:60px; height:60px; border-radius:50%; background:#f0f1f3; display:grid; place-items:center; margin:0 auto 12px; font-size:28px; }
.wj-overlay-card h2 { margin:5px 0 10px; font-size:26px; }
.wj-overlay-card p { color:var(--wj-muted); font-size:13px; line-height:1.8; }
.wj-overlay-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:18px 0; }
.wj-overlay-stats div { border:1px solid var(--wj-border); border-radius:12px; padding:10px; }
.wj-overlay-stats b, .wj-overlay-stats span { display:block; }
.wj-overlay-stats span { color:var(--wj-muted); font-size:11px; margin-top:3px; }

@media (max-width: 760px) {
  .wj-card { padding: 15px; }
  .wj-header { flex-direction:column; }
  .wj-stats { grid-template-columns:repeat(2,1fr); }
  .wj-goal { grid-template-columns:1fr; }
  .wj-jugs { grid-template-columns:1fr; }
  .wj-jug-glass { height:190px; }
}