:root {
    --bg: #121212; --c: #1c1c1e; --t: #f5f5f7; --b: #2c2c2e;
    --a: #64d2ff; --o: #3a3a3c; --e: #f5f5f7; --et: #000;
    --er: #ff453a; --s: #a1a1a6;
    --font-main: 'Noto Sans JP', sans-serif;
    --font-title: 'Righteous', cursive;
}

body:not(.dark-mode) {
    --bg: #ecece1; --c: #f9f9fb; --t: #1d1d1f; --b: #e2e2e7;
    --a: #007aff; --o: #d1d1d6; --e: #1d1d1f; --et: #fff;
    --er: #ff3b30; --s: #86868b;
}

body {
    margin: 0; display: flex; justify-content: center; align-items: center;
    height: 100dvh; background: var(--bg); color: var(--t);
    font-family: var(--font-main); font-weight: 900; overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 以前のタイトルスタイルを復元 */
.app-title { font-family: var(--font-title); font-size: 1.1rem; font-weight: 400; margin: 0; text-align: center; }
.app-title span { font-family: var(--font-main); font-weight: 900; color: var(--s); margin-left: 5px; font-size: 0.8rem; }

/* ルート強調 */
mjx-stretchy-h mjx-surd path, mjx-surd path, mjx-root mjx-surd path {
    stroke: currentColor; stroke-width: 65px;
}
mjx-box[style*="border-top"] { border-top-width: 0.18em !important; }

.calculator {
    width: 95vw; max-width: 400px; height: 95dvh;
    background: var(--c); padding: 15px; border-radius: 40px;
    display: flex; flex-direction: column; box-sizing: border-box;
}

#d {
    flex: 0.8; display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; border-bottom: 1px solid var(--b);
    overflow-x: auto; scrollbar-width: none; width: 100%;
}

.advanced-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
    margin-bottom: 10px;
}
.advanced-grid.hidden { display: none; }

.buttons {
    flex: 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(5px, 1vh, 10px);
}

button {
    width: 100%; height: 100%; border-radius: 18px; border: none;
    background: var(--b); color: var(--t); font-weight: 900;
    font-size: clamp(0.9rem, 4.5vw, 1.3rem); font-family: var(--font-main);
    cursor: pointer; transition: 0.1s;
    display: flex; align-items: center; justify-content: center;
}

button:active { transform: scale(0.92); }
.btn-op { background: var(--o); color: var(--t); }
.btn-func { color: var(--a); font-size: 0.85rem; }
.btn-adv { background: var(--a); color: #000; font-size: 0.75rem; }
.btn-clear { color: var(--er); }
.btn-equals { background: var(--e); color: var(--et); font-size: 1.6rem; }

#t { position: fixed; bottom: 10px; right: 10px; width: 35px; height: 35px; opacity: 0.5; color: var(--t); cursor: pointer; }
.err { color: var(--er); font-weight: 900; }