/* ブラウザ版の土台: リセット、シェル、ボタン・入力の共通見た目。テーマトークンは App 共有の theme.css。 */
h1:focus {
    outline: none;
}

.aom-update-notice[hidden] { display: none; }
.aom-update-notice {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100vw - 2rem);
    padding: .75rem 1rem;
    border: 1px solid #f5731a;
    border-radius: 6px;
    background: #202631;
    color: #fff;
    box-shadow: 0 4px 16px #0008;
}
.aom-update-notice button {
    flex: none;
    padding: .4rem .7rem;
    border: 0;
    border-radius: 4px;
    background: #f5731a;
    color: #17191d;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.aom-update-notice button:disabled { opacity: .6; cursor: wait; }

* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; font-family: system-ui, sans-serif; }
.app-shell { min-height: 100vh; padding: 1rem 1.5rem; background: #151a22; color: #eef0f4; }
.app-shell.light { background: #f6f7fa; color: #202631; }
.app-shell header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.app-shell h1 { font-size: 1.3rem; }
.app-shell h2 { font-size: 1.1rem; }
.status { font-size: .82rem; opacity: .8; }
.app-shell nav, .toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; align-items: center; }
.app-shell button, .app-shell input, .app-shell select { font: inherit; border-radius: 4px; }
.app-shell button { border: 1px solid #697c99; background: #2b3543; color: #fff; padding: .45rem .8rem; cursor: pointer; }
.app-shell.light button { background: #e4ebf5; color: #202631; }
.app-shell button.active, .app-shell button.selected { border-color: #51b5de; background: #164863; color: #fff; }
.app-shell button:disabled { opacity: .52; cursor: not-allowed; }
.app-shell input, .app-shell select { border: 1px solid #71819a; padding: .35rem; max-width: 100%; }
.app-shell input:disabled { opacity: .55; }
.app-shell .error { color: #ffb2a6; border: 1px solid #aa665c; padding: .6rem; }
.app-shell.light .error { color: #9c1e12; }
.app-shell .notice { border-left: 3px solid #51b5de; padding-left: .8rem; }
.panel { padding: .8rem; border: 1px solid #59677b; margin-bottom: 1rem; }
.panel .toolbar { max-height: 14rem; overflow-y: auto; }
@media (max-width: 1279px) {
    .main-workspace, .main-workspace.materials-collapsed { display: block; }
    .main-workspace .material-pane { display: none; }
    .main-workspace.mobile-materials .operator-pane { display: none; }
    .main-workspace.mobile-materials .material-pane { display: block; }
    .material-toggle, .material-position { display: none; }
    .material-pane { height: auto; max-height: none; }
    .operator-table { height: min(72vh, 850px); }
}
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
/* Browser surfaces use the Desktop theme tokens from theme.css. */
html, body, #app { height: 100%; min-height: 0; overflow: hidden; background: #0A0B0C; }
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    padding: 0 0 38px;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font: 13px var(--font-sans);
}
.app-shell.light { background: var(--bg); color: var(--text); }
.app-shell > .panel:has(> details) { flex: 1 1 auto; min-height: 0; overflow: auto; }
.app-shell header {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 4px 16px;
    background: var(--chrome);
    border-bottom: 1px solid var(--chrome-line);
}
.app-shell h1 { margin: 0; font: 600 15px var(--font-display); letter-spacing: .02em; }
.app-shell h2 { font: 600 14px var(--font-display); color: var(--text2); }
.app-shell h3 { font: 600 12px var(--font-display); color: var(--text2); }
.app-shell .status { color: var(--mute2); font-size: 11px; }
.app-shell a { color: var(--accent); }
.app-shell .error {
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    margin: 8px 16px;
}
.app-shell .notice { border-left-color: var(--accent); }
.app-shell button, .app-shell input, .app-shell select, .app-shell textarea {
    font-family: var(--font-sans);
    font-size: 12px;
    border-radius: var(--bevel-control);
    corner-shape: bevel;
}
.app-shell button {
    min-height: 34px;
    padding: 0 12px;
    color: var(--mute);
    background: var(--btn-bg);
    border: 1px solid var(--btn-line);
}
.app-shell button:hover {
    color: var(--text);
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-line);
}
.app-shell button:active { background: var(--btn-active-bg); }
.app-shell button.active, .app-shell button.selected {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--btn-accent-line);
}
.app-shell button.active:hover, .app-shell button.selected:hover {
    background: var(--btn-accent-hover-bg);
    border-color: var(--btn-accent-hover-bg);
}
.app-shell button.accent-action {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--btn-accent-line);
    font-weight: 600;
}
.app-shell button.accent-action:hover { background: var(--btn-accent-hover-bg); }
.app-shell button:disabled { opacity: .5; }
.app-shell input, .app-shell select, .app-shell textarea {
    color: var(--text);
    background: var(--input);
    border: 1px solid var(--line2);
    padding: 5px 8px;
    color-scheme: inherit;
}
.app-shell input[type=checkbox] { accent-color: var(--accent); }
.app-shell :is(button, input, select, textarea, a):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}
.app-shell .button-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    color: var(--text);
    background: var(--btn-bg);
    text-decoration: none;
}
.app-shell .button-link:hover { background: var(--btn-hover-bg); }
.app-shell .panel {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--bevel-container);
    corner-shape: bevel;
}