:root{
--bg:#edf1f7;--panel:#0c1220;--panel2:#111a2d;--display:#070b14;--key:#182238;
--key2:#202c44;--text:#f8fbff;--muted:#7e8ba5;--line:#ffffff12;--blue:#2589ff;
--blue2:#0d63d7;--orange:#4b2e12;--orangeText:#ffc54d;--red:#7e2029
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 50% 0,#fff,#e7edf5 70%);min-height:100vh;color:var(--text)}
.page{min-height:100vh;display:grid;place-items:center;padding:20px}
.calc{width:min(680px,100%);background:linear-gradient(150deg,#182238,#080d18);padding:18px;border-radius:28px;border:1px solid #fff1;box-shadow:0 28px 70px #17233833}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.brand{display:flex;align-items:center;gap:10px}.logo{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#39a2ff,#0b5fcf);font-weight:900;font-size:21px}
.brand strong{display:block;letter-spacing:1.8px;font-size:13px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.3px;margin-top:3px}
.icon{width:40px;height:40px;border-radius:50%;background:#172136;border:1px solid var(--line);color:white;font-size:18px}
.display{background:var(--display);border:1px solid var(--line);border-radius:17px;padding:12px 15px;margin-bottom:9px;box-shadow:inset 0 5px 18px #0008}
.history{height:19px;color:#697792;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
#display{width:100%;height:61px;background:transparent;border:0;outline:0;color:white;text-align:right;font:700 34px/1.1 Consolas,monospace}
.modes{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.angle{display:flex;background:#070b13;border-radius:9px;padding:3px}.mode{border:0;background:transparent;color:#73809a;border-radius:7px;padding:6px 14px;font-size:10px;font-weight:800}.mode.active{background:var(--blue);color:white}.status{color:#65738b;font-size:10px}
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.keys button{height:43px;border:1px solid var(--line);border-radius:10px;background:var(--key);color:#dbe6f8;font-size:12px;font-weight:700;box-shadow:inset 0 1px #fff0005}
.keys button:hover{background:var(--key2)}.keys .number{font-size:19px;background:#151e30}.keys .mem{font-size:10px;color:#9aa9c0;background:#111a2b}.keys .operator{background:var(--orange);color:var(--orangeText);font-size:21px}.keys .special{background:linear-gradient(145deg,#164b8c,#123663);font-size:18px;color:white}.keys .danger{background:linear-gradient(145deg,#8b2932,#631a22);color:white}.keys .equals{grid-column:span 2;background:linear-gradient(135deg,var(--blue),var(--blue2));font-size:23px;color:white}.keys .zero{grid-column:span 2}
footer{display:flex;justify-content:center;gap:9px;color:#64728a;font-size:9px;margin-top:12px}footer button{border:0;background:transparent;color:#8ea3c2;font-size:9px}
.modal{position:fixed;inset:0;background:#0009;backdrop-filter:blur(7px);display:grid;place-items:center;padding:15px}.hidden{display:none}.modal-card{width:min(440px,100%);max-height:80vh;overflow:auto;background:#121b2d;border:1px solid var(--line);border-radius:18px;padding:16px}.modal-head{display:flex;justify-content:space-between;font-size:18px;margin-bottom:10px}.modal-head button{border:0;background:#202c40;color:white;border-radius:50%;width:30px;height:30px;font-size:19px}.history-item{display:block;width:100%;text-align:right;border:0;background:#0b111d;border-bottom:1px solid var(--line);padding:9px;margin-bottom:5px;border-radius:7px}.history-item small{color:#718099}.history-item b{display:block;color:white;font-size:16px;margin-top:3px}.clear-history{width:100%;padding:10px;border:0;border-radius:9px;background:#7e2029;color:white;margin-top:7px}
@media(max-width:500px){.page{padding:7px}.calc{padding:11px;border-radius:21px}.keys{gap:5px}.keys button{height:47px}.keys .number{font-size:18px}#display{font-size:30px}}


/* ===== Personalização MAC Loja ===== */
.hero-banner{
  width:min(680px,100%);
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(145deg,#121b2c,#070b13);
  border:1px solid #ffffff12;
  box-shadow:0 18px 45px #17233822;
}
.hero-banner img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
}
.logo{overflow:hidden}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
}
.tutorial{
  width:min(680px,100%);
  margin:16px auto 0;
  padding:22px;
  border-radius:20px;
  background:linear-gradient(145deg,#121c2e,#0a101c);
  border:1px solid #ffffff12;
  box-shadow:0 18px 45px #17233822;
}
.tutorial h2{
  margin:0 0 14px;
  color:#fff;
  font-size:19px;
}
.tutorial ol{
  margin:0;
  padding-left:22px;
  color:#aebbd0;
  font-size:13px;
  line-height:1.65;
}
.tutorial li{padding:5px 0}
.tutorial b{color:#dce9fb}
.tutorial strong{color:#fff}
.tips-button{
  display:block;
  width:100%;
  margin-top:17px;
  padding:12px 16px;
  border-radius:11px;
  text-align:center;
  text-decoration:none;
  background:linear-gradient(135deg,#2589ff,#0d63d7);
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 22px #2589ff30;
}
body{user-select:none}
button{user-select:none}
@media(max-width:500px){
  .hero-banner{height:190px;border-radius:17px}
  .tutorial{padding:17px}
  .tutorial h2{font-size:17px}
  .tutorial ol{font-size:12px}
}