:root{
  --bg1:#f8fbff;
  --bg2:#fff5df;
  --ink:#243047;
  --primary:#5b7cfa;
  --primary2:#7c4dff;
  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#ef4444;
  --card:#ffffffcc;
  --shadow:0 16px 45px rgba(35,48,71,.14);
}
*{box-sizing:border-box}
body{
  min-height:100vh;
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 10%, #dbeafe 0 220px, transparent 221px),
    radial-gradient(circle at 90% 20%, #ffe8b6 0 240px, transparent 241px),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.hero{
  border-radius:30px;
  background:linear-gradient(135deg, rgba(91,124,250,.96), rgba(124,77,255,.94));
  color:white;
  padding:34px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero:after{content:"⅓ ⅖ ¾ ⅞";position:absolute;right:24px;bottom:-18px;font-size:86px;font-weight:900;opacity:.12;letter-spacing:10px}
.nav-pill{
  border:0;
  border-radius:18px;
  padding:12px 16px;
  background:white;
  color:var(--ink);
  box-shadow:0 10px 25px rgba(35,48,71,.09);
  font-weight:800;
  text-decoration:none;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.nav-pill.active{background:linear-gradient(135deg,#1d4ed8,#7c3aed);color:white}
.panel{
  background:var(--card);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.example-card{
  cursor:pointer;
  transition:.2s transform,.2s box-shadow,.2s border-color;
  border:2px solid transparent;
  min-height:172px;
}
.example-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(35,48,71,.17);border-color:#9db3ff}
.example-card.selected{border-color:#5b7cfa;background:#f5f7ff}
.badge-soft{border-radius:999px;padding:8px 12px;background:#eef2ff;color:#3730a3;font-weight:800}
.fraction{display:inline-grid;grid-template-rows:auto 2px auto;align-items:center;text-align:center;min-width:34px;margin:0 3px;vertical-align:middle;font-weight:900;color:#111827}
.fraction .bar{height:2px;background:#111827;width:100%;margin:2px 0}
.operator-bubble{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#eef2ff;color:#3730a3;font-weight:900;margin:0 4px}
.result-box{border-radius:24px;background:linear-gradient(135deg,#ecfeff,#eef2ff);padding:18px;border:1px solid #dbeafe}
.step-card{border-radius:22px;background:white;border:1px solid #e5e7eb;padding:16px;margin-bottom:12px;box-shadow:0 8px 18px rgba(35,48,71,.06)}
.step-number{width:34px;height:34px;border-radius:50%;background:#5b7cfa;color:white;display:inline-flex;align-items:center;justify-content:center;font-weight:900;margin-right:10px}
.input-mini{width:78px;text-align:center;font-weight:800;border-radius:14px!important}
.frac-editor{border-radius:24px;background:#fff7ed;border:1px solid #fed7aa;padding:16px}
.route-title{font-weight:950;letter-spacing:-.03em}
.math-line{font-size:1.12rem;line-height:2.2}
.empty-state{border:2px dashed #c7d2fe;border-radius:24px;padding:30px;text-align:center;background:#f8fafc}
footer{color:#64748b}
@media print{.no-print{display:none!important}.panel,.hero{box-shadow:none}.example-card{break-inside:avoid}}

/* Detalhamento robusto dos passos */
.step-card-feature {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,248,255,.96));
  border: 1px solid rgba(13,110,253,.18);
}
.calc-strip {
  background: rgba(13, 110, 253, .07);
  border: 1px dashed rgba(13, 110, 253, .28);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: .98rem;
}
.formula-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  background: #fff;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  margin-top: 10px;
}
.mini-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  line-height: 1;
  font-weight: 800;
  color: #1f2a44;
}
.mini-frac b {
  width: 100%;
  height: 2px;
  background: currentColor;
  margin: 3px 0;
  border-radius: 999px;
}


/* Figuras geométricas e explicação do MMC */
.geometry-explainer {
  background: linear-gradient(135deg, rgba(249,250,251,.95), rgba(239,246,255,.95));
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 18px;
  padding: 14px;
}
.figure-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 14px;
  height: 100%;
  box-shadow: 0 8px 18px rgba(35,48,71,.06);
}
.figure-label {
  font-weight: 800;
  font-size: .95rem;
  color: #1f2937;
  margin-bottom: 10px;
}
.figure-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10px, 1fr);
  gap: 3px;
  margin-bottom: 10px;
}
.figure-segment {
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.14);
  background: #f8fafc;
}
.figure-bar.color-a .figure-segment.filled { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.figure-bar.color-b .figure-segment.filled { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.figure-bar.color-c .figure-segment.filled { background: linear-gradient(135deg, #34d399, #059669); }
.figure-caption {
  font-size: .95rem;
  line-height: 1.45;
}
.multiples-box {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 12px;
  height: 100%;
}
.multiple-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  border: 1px solid #bfdbfe;
}
.multiple-pill.hit {
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  color: #fff;
  border-color: transparent;
}

/* Ajustes solicitados: appbar fixa, cards clean, abas e laboratório ampliado */
.appbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 8px 24px rgba(15,23,42,.07);
}
.brand-icon{
  width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,#1d4ed8,#7c3aed);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.main-content{padding-top:20px;}
.hero-clean{
  border-radius:22px;
  background:rgba(255,255,255,.82);
  color:var(--ink);
  padding:20px 24px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 10px 28px rgba(35,48,71,.08);
}
.hero-clean:after{display:none;}
.clean-pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;
  padding:7px 12px;color:#334155;font-weight:700;font-size:.88rem;
}
.clean-pill.big{font-size:.98rem;padding:10px 14px;background:#eef2ff;color:#3730a3;border-color:#c7d2fe;}
.result-box{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:22px;
}
.result-pills{display:flex;gap:10px;flex-wrap:wrap;}
.result-pill{
  display:flex;align-items:center;gap:8px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;
  padding:9px 12px;min-width:150px;
}
.result-pill-icon{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#eef2ff;color:#3730a3;}
.result-mini-steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.result-mini-steps span{border-radius:999px;background:#ecfeff;border:1px solid #cffafe;padding:7px 11px;font-size:.9rem;color:#155e75;}
.fraction-tabs{gap:8px;border-bottom:1px solid #e2e8f0;padding-bottom:12px;}
.fraction-tabs .nav-link{border-radius:999px;font-weight:800;color:#334155;background:#f8fafc;border:1px solid #e2e8f0;}
.fraction-tabs .nav-link.active{background:linear-gradient(135deg,#1d4ed8,#7c3aed);border-color:transparent;color:#fff;}
.steps-wrap .panel{box-shadow:none;}
.examples-grid{max-height:760px;overflow:auto;padding-right:6px;}
.example-card{min-height:210px;background:#fff;box-shadow:0 10px 24px rgba(35,48,71,.07);}
.example-count{border-radius:999px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:5px 9px;font-weight:800;font-size:.82rem;}
.math-line.compact{font-size:1rem;line-height:1.8;}
.fraction.mini{min-width:28px;font-size:.95rem;}
.small-op{width:28px;height:28px;font-size:.8rem;}
.mixed-option{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:12px;}
.input-whole{width:68px!important;}
.frac-editor{background:#fff;border-color:#e2e8f0;box-shadow:0 8px 18px rgba(35,48,71,.05);}
.figure-bar.color-d .figure-segment.filled { background: linear-gradient(135deg, #fb923c, #ea580c); }
.figure-bar.color-e .figure-segment.filled { background: linear-gradient(135deg, #f472b6, #db2777); }
.step-visual{background:linear-gradient(135deg,#ffffff,#f8fbff);}
.equivalence-row{
  display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);gap:14px;align-items:stretch;
  padding:12px;border-radius:20px;background:#f8fafc;border:1px solid #e2e8f0;margin:12px 0;
}
.equivalence-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#3730a3;font-weight:900;min-width:84px;}
.equivalence-arrow i{font-size:1.8rem;}
.equivalence-arrow small{font-weight:700;color:#64748b;}
@media (max-width: 768px){
  .equivalence-row{grid-template-columns:1fr;}
  .equivalence-arrow i{transform:rotate(90deg);}
  .result-pill{min-width:100%;}
}
.fw-black{font-weight:950;}
@media print{.appbar{position:static!important}.fraction-tabs{display:none!important}}

/* Revisão responsiva e clean */
.appbar{padding:10px 14px;}
.appbar-inner{max-width:1600px;margin:0 auto;}
.brand-title{font-size:1.25rem;line-height:1.1;}
.brand-icon{width:38px;height:38px;border-radius:14px;font-size:1rem;flex:0 0 auto;}
.nav-scroll{overflow-x:auto;white-space:nowrap;padding-bottom:2px;}
.nav-pill{padding:9px 14px;border-radius:16px;font-size:.92rem;box-shadow:0 6px 16px rgba(35,48,71,.06);}
.hero-clean{padding:14px 18px;border-radius:20px;margin-top:4px;}
.hero-clean .h4{font-size:1.35rem;}
.clean-pill{font-size:.82rem;padding:6px 10px;line-height:1.1;}
.clean-pill.big{font-size:.85rem;padding:7px 11px;}
.clean-pill.success{background:#ecfdf5;color:#047857;border-color:#a7f3d0;display:inline-flex;width:auto;}
.panel{border-radius:22px;}
.lab-panel{background:rgba(255,255,255,.92);}
.content-panel{overflow:hidden;}
.compact-btns .btn{font-size:.8rem;padding:5px 8px;}
.mixed-option{padding:10px;border-radius:16px;font-size:.92rem;}
.frac-editor{padding:12px;border-radius:18px;}
.input-mini{width:68px;font-size:.92rem;padding:5px 7px;}
.input-whole{width:58px!important;}
.result-box{padding:16px;border-radius:22px;box-shadow:0 10px 25px rgba(35,48,71,.08);}
.small-badge{padding:6px 10px;font-size:.82rem;}
.result-expression{font-size:1rem;line-height:1.8;overflow-x:auto;white-space:nowrap;padding-bottom:4px;}
.result-pills{gap:7px;}
.clean-result-pill{min-width:unset;padding:7px 10px;font-size:.86rem;gap:6px;}
.clean-result-pill i{color:#4f46e5;}
.clean-result-pill span{color:#64748b;font-weight:800;}
.result-mini-steps{gap:6px;}
.result-mini-steps span{font-size:.78rem;padding:5px 8px;}
.fraction-tabs{gap:6px;padding-bottom:8px;margin-bottom:12px!important;}
.fraction-tabs .nav-link{padding:7px 11px;font-size:.88rem;}
.search-examples{max-width:320px;}
.example-card{min-height:auto;border-radius:18px;padding:14px!important;}
.example-card .badge-soft{font-size:.78rem;padding:6px 9px;}
.example-count{font-size:.76rem;padding:4px 8px;}
.math-line.compact{font-size:.92rem;}
.fraction.mini{font-size:.88rem;min-width:24px;}
.small-op{width:24px;height:24px;font-size:.75rem;}

.step-expander{background:#fff;border:1px solid #e2e8f0;border-radius:18px;margin-bottom:12px;box-shadow:0 8px 18px rgba(35,48,71,.055);overflow:hidden;}
.step-expander summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:14px 16px;color:#1e293b;}
.step-expander summary::-webkit-details-marker{display:none;}
.step-expander summary i{transition:.2s transform;}
.step-expander[open] summary i{transform:rotate(180deg);}
.step-body{padding:0 16px 16px;}
.step-number{width:32px;height:32px;min-width:32px;font-size:.95rem;margin-right:0;}
.calc-strip{font-size:.92rem;padding:9px 10px;border-radius:12px;overflow-wrap:anywhere;}
.calc-strip.slim{padding:6px 9px;margin:5px 0;}
.formula-line.compact-formula{font-size:.98rem;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;}
.before-after-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.factor-grid{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
.factor-card{display:flex;gap:8px;align-items:center;border:1px solid #dbeafe;background:#f8fbff;border-radius:999px;padding:7px 10px;font-size:.9rem;}
.factor-card strong{color:#1d4ed8;}
.figure-card{border-radius:14px;padding:11px;box-shadow:0 6px 16px rgba(35,48,71,.05);overflow:hidden;}
.figure-label{font-size:.86rem;margin-bottom:8px;overflow-wrap:anywhere;}
.figure-bar{display:flex!important;flex-wrap:wrap;gap:3px;max-width:100%;}
.figure-segment{width:18px;max-width:18px;height:26px;border-radius:7px;flex:0 0 18px;}
.figure-caption{font-size:.84rem;overflow-wrap:anywhere;}
.multiples-box{padding:10px;border-radius:14px;}
.multiple-pill{min-width:34px;padding:4px 7px;font-size:.82rem;}
.equivalence-row.responsive-equivalence{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:10px;padding:10px;overflow:hidden;}
.equivalence-arrow{min-width:0;font-size:.85rem;text-align:center;}
.equivalence-arrow i{font-size:1.3rem;}
.conversion-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.conversion-card{border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;padding:12px;}

@media (max-width: 768px){
  body{font-size:14px;}
  .appbar{padding:8px 10px;}
  .appbar-inner{align-items:flex-start!important;}
  .brand-wrap{min-width:100%;}
  .brand-icon{width:32px;height:32px;border-radius:12px;font-size:.85rem;}
  .brand-title{font-size:1rem;}
  .nav-scroll{width:100%;gap:6px!important;}
  .nav-pill{padding:7px 10px;border-radius:14px;font-size:.82rem;gap:5px;}
  .nav-pill i{font-size:.85rem;}
  .main-content{padding-top:12px;}
  .hero-clean{padding:10px 12px;border-radius:16px;margin-bottom:10px!important;}
  .hero-clean .h4{font-size:1.05rem;margin-bottom:2px!important;}
  .hero-clean p{font-size:.78rem;}
  .clean-pill.big{font-size:.76rem;padding:6px 9px;}
  .panel{border-radius:20px;}
  .lab-panel{padding:14px!important;}
  .lab-panel h3{font-size:1.1rem;}
  .compact-btns .btn{font-size:.76rem;padding:4px 7px;}
  .mixed-option{font-size:.84rem;padding:9px;}
  .frac-editor{padding:10px;border-radius:16px;}
  .input-mini{width:58px;font-size:.85rem;padding:4px 6px;}
  .frac-editor .border-top{width:66px!important;}
  .result-box{padding:13px;border-radius:18px;}
  .result-expression{font-size:.9rem;}
  .fraction{min-width:26px;font-size:.92rem;}
  .operator-bubble{width:26px;height:26px;font-size:.8rem;margin:0 2px;}
  .result-pills{gap:6px;}
  .clean-result-pill{padding:6px 8px;font-size:.78rem;}
  .clean-result-pill i{display:none;}
  .result-mini-steps span{font-size:.72rem;padding:4px 7px;}
  .content-panel{padding:10px!important;}
  .fraction-tabs .nav-link{font-size:.8rem;padding:6px 9px;}
  .steps-wrap h3{font-size:1.05rem;}
  .badge-soft{font-size:.76rem;padding:6px 9px;}
  .step-expander{border-radius:16px;margin-bottom:10px;}
  .step-expander:not([open]) .step-body{display:none;}
  .step-expander summary{padding:11px 12px;font-size:.88rem;}
  .step-body{padding:0 12px 12px;}
  .step-number{width:28px;height:28px;min-width:28px;font-size:.82rem;}
  .calc-strip{font-size:.82rem;padding:8px;}
  .before-after-grid{grid-template-columns:1fr;gap:10px;}
  .figure-card{padding:9px;border-radius:13px;}
  .figure-label{font-size:.78rem;}
  .figure-caption{font-size:.77rem;}
  .figure-segment{width:13px;max-width:13px;flex-basis:13px;height:22px;border-radius:6px;}
  .multiple-pill{font-size:.75rem;min-width:30px;padding:3px 6px;}
  .equivalence-row.responsive-equivalence{grid-template-columns:1fr;gap:8px;padding:9px;}
  .equivalence-arrow{flex-direction:row;min-height:34px;}
  .equivalence-arrow i{transform:rotate(90deg);font-size:1.1rem;}
  .conversion-grid{grid-template-columns:1fr;gap:8px;}
  .formula-line.compact-formula{font-size:.86rem;padding:9px;}
  .search-examples{max-width:100%;}
  .example-card{padding:12px!important;}
}