:root{--bg:#f0f2f5;--card:#fff;--primary:#2c3e50;--accent:#3498db;--accent-light:#ebf5fb;--danger:#e74c3c;--danger-light:#fdedec;--success:#27ae60;--success-light:#eafaf1;--warning:#f39c12;--text:#2c3e50;--text-muted:#7f8c8d;--border:#dce1e6;--shadow:0 4px 20px rgba(0,0,0,.08);--radius:12px;--transition:.3s ease;--tap:44px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;-webkit-tap-highlight-color:rgba(52,152,219,.15)}
#app{width:100%;max-width:980px;padding:max(24px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:16px}
header{text-align:center}
header .back-home{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:6px 12px;margin:0 auto 10px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);color:var(--primary);font-weight:800;font-size:.85rem;text-decoration:none;transition:all var(--transition)}
header .back-home:hover{border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
header h1{font-size:1.5rem;font-weight:800;color:var(--primary);margin-bottom:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hint{margin-top:8px;color:var(--text-muted);font-size:.86rem;line-height:1.55}
#input-area{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:stretch}
#equation-input{font-size:1.05rem;padding:11px 16px;border:2px solid var(--border);border-radius:var(--radius);outline:none;width:520px;max-width:100%;text-align:center;transition:border-color var(--transition);font-family:'Courier New',monospace}
#equation-input:focus{border-color:var(--accent)}
#equation-input::placeholder{color:var(--text-muted);font-family:'Segoe UI',system-ui,sans-serif;font-size:.92rem}
.btn{font-size:.92rem;padding:10px 20px;border:none;border-radius:var(--radius);cursor:pointer;font-weight:700;transition:all var(--transition);display:inline-flex;align-items:center;gap:6px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:#2980b9}
.btn-secondary{background:var(--primary);color:#fff}.btn-secondary:hover:not(:disabled){background:#1a252f}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--border)}.btn-outline:hover:not(:disabled){border-color:var(--primary);background:var(--accent-light)}
.btn-icon{font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:1.2em}
.btn-icon-only{padding:10px 12px;justify-content:center}

#error-msg{color:var(--danger);font-size:.88rem;text-align:center;min-height:18px}
#error-msg.is-visible{background:var(--danger-light);border:1.5px solid rgba(231,76,60,.25);padding:10px 12px;border-radius:12px;margin-top:10px}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 18px}

#step-indicator{text-align:center;margin-bottom:10px}
.step-badge{display:inline-block;padding:4px 14px;border-radius:20px;font-size:.78rem;font-weight:800;background:var(--accent-light);color:var(--accent)}
.step-badge.verify{background:var(--success-light);color:var(--success)}

#equation-area{min-height:210px;transition:border-color .5s,background .5s;background:linear-gradient(180deg,#ffffff,#fbfcff)}
#equation-area.completed{border-color:var(--success);background:linear-gradient(180deg,var(--success-light),#fbfffb)}
#equation-placeholder{color:var(--text-muted);font-size:.95rem;text-align:center;line-height:1.7;padding:18px 8px}

.board{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.board__line{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid transparent;transition:opacity .25s ease,background .25s ease,border-color .25s ease,transform .25s ease}
.board__line.is-old{opacity:.5}
.board__line.is-current{background:rgba(52,152,219,.07);border-color:rgba(52,152,219,.28);animation:boardIn .3s ease}
.board__line.is-hidden{display:none}

.board__expr{font-family:'Courier New',monospace;font-size:1.15rem;font-weight:800;color:var(--primary);overflow-x:auto;padding:2px 0}
.board__line.is-current .board__expr{font-size:1.35rem}
.board__equation-row{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;row-gap:6px}
.board__expr .equation-side{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.board__expr .fraction{display:inline-flex;flex-direction:column;align-items:center;padding:2px 6px;vertical-align:middle}
.board__expr .frac-num{border-bottom:2px solid var(--primary);padding:2px 10px 4px;font-size:1.1em;border-radius:4px 4px 0 0}
.board__expr .frac-den{padding:4px 10px 2px;font-size:1.1em;border-radius:0 0 4px 4px}
.board__expr .frac-num.highlighted,.board__expr .frac-den.highlighted{background:var(--warning)!important;color:#fff!important}
.board__expr .frac-num.result-highlight,.board__expr .frac-den.result-highlight{background:var(--success-light)!important;color:var(--success)!important;font-weight:800}
.board__expr .fraction.highlighted .frac-num,.board__expr .fraction.highlighted .frac-den{background:var(--warning)!important;color:#fff!important}
.board__expr .fraction.result-highlight .frac-num,.board__expr .fraction.result-highlight .frac-den{color:var(--success);font-weight:800}
.board__expr .fraction.dimmed{opacity:.35}
.board__expr .term{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:10px;border:1px solid rgba(220,225,230,.9);background:#fff}
.board__expr .term-coeff{background:rgba(52,152,219,.08);border-color:rgba(52,152,219,.18);color:var(--primary)}
.board__expr .term-const{background:rgba(44,62,80,.06);border-color:rgba(44,62,80,.12);color:var(--primary)}
.board__expr .term-op{color:var(--text-muted);font-size:1.25em;font-weight:600;padding:0 2px;border:none;background:transparent}
.board__expr .term-op.highlighted{color:var(--warning)}
.board__expr .term-op.result-highlight{color:var(--success)}
.board__expr .term-equals{color:var(--primary);font-size:1.2em;font-weight:800;padding:0 4px;border:none;background:transparent}
.board__expr .term-const.result-highlight{color:var(--success);font-weight:900}
.board__expr .sign-inverted{background:var(--danger-light)!important;border-color:rgba(231,76,60,.25)!important;color:var(--danger)!important}

.board__bubble{display:flex;flex-direction:column;gap:5px;font-size:.9rem;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px 12px;line-height:1.5;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.board__line.is-old .board__bubble{opacity:.72}
.board__rule{font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.board__note{font-size:.92rem;line-height:1.45;color:var(--text)}
.board__note code{font-family:'Courier New',monospace;font-size:.88em}
.board__transform{margin-top:8px;padding:8px 10px;background:#f8f9fa;border-radius:10px;font-family:'Courier New',monospace;font-size:.82rem}
.board__transform .t-before{color:var(--text-muted)}
.board__transform .t-arrow{color:var(--accent);padding:0 6px}
.board__transform .t-after{color:var(--success);font-weight:800}

@keyframes boardIn{from{transform:translateY(4px);opacity:.4}to{transform:translateY(0);opacity:1}}

.control-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch;position:sticky;bottom:10px;z-index:20;background:rgba(240,242,245,.85);backdrop-filter:blur(10px);border:1px solid rgba(220,225,230,.6);padding:10px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.10)}

.sheet{position:fixed;inset:0;display:none;z-index:80}
.sheet.is-open{display:block}
.sheet[aria-hidden="true"]{display:none}
.sheet__overlay{position:absolute;inset:0;background:rgba(20,30,40,.48);backdrop-filter:blur(3px)}
.sheet__panel{position:absolute;left:50%;top:14vh;transform:translateX(-50%);width:min(720px,calc(100vw - 32px));max-height:72vh;background:var(--card);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.22);border:1px solid rgba(220,225,230,.7);display:flex;flex-direction:column;overflow:hidden}
.sheet__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px;border-bottom:1px solid var(--border)}
.sheet__title{font-weight:900;color:var(--primary)}
.sheet__close{min-height:40px}
.sheet__body{padding:14px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.sheet__hint{color:var(--text-muted);font-size:.86rem;line-height:1.4}
.sheet__list{display:flex;flex-direction:column;gap:8px}
.example-item{width:100%;text-align:left;border:1.5px solid var(--border);border-radius:12px;background:var(--card);padding:12px 12px;font-family:'Courier New',monospace;font-size:.95rem;color:var(--primary);cursor:pointer;transition:all var(--transition);min-height:var(--tap)}
.example-item:hover{border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
.example-item:focus{outline:3px solid rgba(52,152,219,.3);outline-offset:2px}

@media (max-width:720px){
  .board__line{grid-template-columns:1fr;gap:8px;padding:10px 12px}
  .board__expr{font-size:1rem;overflow-x:visible;white-space:normal;word-break:break-word}
  .board__line.is-current .board__expr{font-size:1.12rem}
  .sheet__panel{top:auto;bottom:10px;transform:translateX(-50%);max-height:78vh;border-radius:18px}
}
@media(max-width:640px){
  #app{gap:12px}
  #input-area{flex-direction:column;width:100%}
  #equation-input{width:100%;max-width:100%;min-height:48px;padding:12px 14px;font-size:16px}
  .btn{min-height:var(--tap);min-width:0;padding:12px 16px;justify-content:center}
  #btn-resolve{width:100%}
  .control-bar{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"back next" "reset reset";gap:8px;max-width:100%}
  #btn-back{grid-area:back}
  #btn-next{grid-area:next}
  #btn-reset{grid-area:reset}
  .card{padding:16px 12px}
}