.f4hxn-calc {
    --blue: #0076a5;
    --blue-2: #298ad4;
    --ink: #14212c;
    --muted: #5b6b7a;
    --line: #dbe4ea;
    --key: #fff;
    --key-hover: #eef5fa;
    --soft: #f5f8fb;
    max-width: 1200px;
    margin: 0 auto;
    color: var(--ink);
    background: #fff;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.f4hxn-calc * { box-sizing: border-box; }
.f4hxn-calc .intro { max-width: 660px; margin: 0 auto 1.4rem; color: var(--muted); font-size: .98rem; line-height: 1.6; text-align: center; }
.f4hxn-calc .layout { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; align-items: flex-start; }
.f4hxn-calc .calc { width: 100%; max-width: 340px; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: max-width .18s ease; }
.f4hxn-calc .calc.sci { max-width: 460px; }
.f4hxn-calc .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.f4hxn-calc .title { font-size: 1.02rem; font-weight: 600; letter-spacing: .2px; }
.f4hxn-calc .tabs { display: inline-flex; padding: 3px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; }
.f4hxn-calc .tabs button { padding: .32rem .8rem; color: var(--muted); background: transparent; border: 0; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.f4hxn-calc .tabs button.on { color: #fff; background: var(--blue); }
.f4hxn-calc .sub { display: flex; align-items: center; justify-content: space-between; min-height: 26px; margin-bottom: .6rem; }
.f4hxn-calc .ang { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.f4hxn-calc .ang button { padding: .2rem .55rem; color: var(--muted); background: #fff; border: 0; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.f4hxn-calc .ang button.on { color: #fff; background: var(--blue-2); }
.f4hxn-calc .mem { color: var(--blue); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 600; opacity: 0; }
.f4hxn-calc .mem.on { opacity: 1; }
.f4hxn-calc .display { overflow: hidden; margin-bottom: .85rem; padding: .7rem .9rem; text-align: right; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.f4hxn-calc .expr { min-height: 1.2em; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.3; word-break: break-all; }
.f4hxn-calc .res { margin-top: .15rem; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.9rem; font-weight: 600; line-height: 1.2; word-break: break-all; }
.f4hxn-calc .res.err { color: #b03a2e; }
.f4hxn-calc .calc.shake { animation: f4hxn-calc-shake .28s; }
@keyframes f4hxn-calc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.f4hxn-calc .grid { display: grid; gap: 8px; }
.f4hxn-calc .sci-grid { display: none; grid-template-columns: repeat(5, 1fr); margin-bottom: 8px; }
.f4hxn-calc .calc.sci .sci-grid { display: grid; }
.f4hxn-calc .util { grid-template-columns: repeat(6, 1fr); margin-bottom: 8px; }
.f4hxn-calc .pad { grid-template-columns: repeat(4, 1fr); }
.f4hxn-calc button.k { padding: .85rem 0; color: var(--ink); background: var(--key); border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 1.12rem; font-weight: 500; cursor: pointer; transition: background .12s, transform .04s; -webkit-tap-highlight-color: transparent; }
.f4hxn-calc button.k:hover { background: var(--key-hover); }
.f4hxn-calc button.k:active { transform: translateY(1px); }
.f4hxn-calc .sci-grid button.k,
.f4hxn-calc .util button.k { padding: .55rem 0; color: var(--blue); background: var(--soft); font-size: .86rem; font-weight: 600; }
.f4hxn-calc button.op { color: var(--blue); background: var(--key-hover); font-weight: 600; }
.f4hxn-calc button.eq { color: #fff; background: var(--blue); font-weight: 600; }
.f4hxn-calc button.eq:hover { background: var(--blue-2); }
.f4hxn-calc .side { width: 100%; max-width: 300px; }
.f4hxn-calc .side h3 { display: flex; align-items: center; justify-content: space-between; margin: .2rem 0 .6rem; color: var(--muted); font-size: .82rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.f4hxn-calc .side h3 button { padding: .15rem .5rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: .72rem; letter-spacing: 0; text-transform: none; cursor: pointer; }
.f4hxn-calc .hist { max-height: 360px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.f4hxn-calc .hist li { margin-bottom: 6px; padding: .5rem .7rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.f4hxn-calc .hist li:hover { background: var(--soft); }
.f4hxn-calc .hist .history-expression { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; word-break: break-all; }
.f4hxn-calc .hist .history-result { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; font-weight: 600; word-break: break-all; }
.f4hxn-calc .hist .empty { color: var(--muted); border: 0; font-size: .85rem; font-style: italic; cursor: default; }
.f4hxn-calc .note { max-width: 660px; margin: 1.6rem auto 0; color: var(--muted); font-size: .82rem; line-height: 1.55; text-align: center; }
.f4hxn-calc .note code { padding: .05rem .35rem; background: var(--soft); border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

@media (max-width: 560px) {
    .f4hxn-calc .calc,
    .f4hxn-calc .calc.sci,
    .f4hxn-calc .side { max-width: 100%; }
    .f4hxn-calc button.k { padding: .75rem 0; }
}