*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body,#root{width:100%;height:100%;overflow:hidden;height:100dvh}
body{font-family:'DM Sans',system-ui,sans-serif;touch-action:none;background:#f5f0eb}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#e0dbd4;border-radius:2px}
.sl{appearance:none;-webkit-appearance:none;height:4px;border-radius:3px;outline:none;cursor:pointer;
  background:linear-gradient(to right,var(--c) 0%,var(--c) var(--pct),#eae7e1 var(--pct),#eae7e1 100%)}
.sl::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
  cursor:pointer;border:2.5px solid var(--c);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.sl::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;
  border:2.5px solid var(--c);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.pm{width:32px;height:32px;border-radius:8px;border:1px solid #e0dbd4;background:#fff;color:#999;
  font-size:16px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:all .12s;flex-shrink:0;user-select:none}
.pm:hover{background:#faf8f5;color:#c97b2a;border-color:#c97b2a}
.pm:active{transform:scale(.93)}
.lang-btn{padding:4px 10px;border-radius:6px;border:1px solid #e0dbd4;background:#fff;color:#999;
  font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .12s}
.lang-btn.active{background:#c97b2a;color:#fff;border-color:#c97b2a}
.cell-input{width:70px;padding:6px 8px;border:1.5px solid #e0dbd4;border-radius:8px;font-family:inherit;
  font-size:14px;font-weight:600;color:#1a1a1a;text-align:center;outline:none;-webkit-user-select:text;user-select:text}
.cell-input:focus{border-color:#c97b2a}
.marquee{position:absolute;border:2px solid rgba(201,123,42,0.7);background:rgba(201,123,42,0.1);
  pointer-events:none;z-index:10;border-radius:2px}
.mod-card{width:80px;padding:8px 4px;border-radius:10px;border:2px solid #eae7e1;background:#fff;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .15s;flex-shrink:0}
.mod-card:hover{border-color:#d4a57488;background:#faf8f5}
.mod-card.active{border-color:#c97b2a;background:#c97b2a08;box-shadow:0 0 0 2px #c97b2a22}
.mod-card .mod-label{font-size:9px;color:#999;font-weight:600;text-align:center;line-height:1.2}
.mod-card.active .mod-label{color:#c97b2a}
@keyframes helpFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes helpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes helpSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes helpSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes helpZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes helpBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes proFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}