/* Shared screen-only controls. Preserve display/visibility and event bindings. */
@media screen {
    :root { --control-primary: #0066cc; --control-ink: #252529; --control-line: #dcdce3; }
    body button:not(.account-button):not(.color-dot) {
        box-sizing: border-box; min-height: 44px; min-width: 44px; max-width: 100%;
        font-family: inherit; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
        border-radius: 12px; cursor: pointer;
    }
    body :is(.nav-btn,.btn-sub-action,.toggle-actions button,.auth-admin,.auth-logout,
        .btn-copy-prompt,.btn-import-gemini,.btn-admin-password,.btn-bind-action,
        .btn-gemini-save-key,.btn-gemini-inapp,.btn-gemini-explain,.btn-dark-action,
        .btn-parent-solution-toggle,.btn-primary) {
        min-height: 48px !important; padding: 12px 16px !important;
        font-size: 14px !important; font-weight: 600; border-radius: 12px !important;
        background: #f3f3f6; color: var(--control-ink); border: 1px solid var(--control-line);
        box-shadow: none;
    }
    body :is(#btnTopRegen,#btnQuickRegen,#btnSubmitGrade,#btnGradeWorksheet,
        #btnImportGemini,#btnDoLoadCode,#btnDoUnlockAnswer,.studio-start) {
        min-height: 56px !important; padding: 15px 20px !important;
        font-size: 16px !important; font-weight: 700; border-radius: 16px !important;
        background: var(--control-primary) !important; color: #fff !important;
        border: 1px solid var(--control-primary) !important; box-shadow: 0 3px 8px #0066cc18 !important;
    }
    body :is(#btnSaveWorksheet,#btnSaveWorksheetBottom,.btn-import-gemini,.auth-submit):not(.account-button) {
        min-height: 48px; background: #1d1d1f; color: #fff; border-radius: 12px; padding: 12px 18px;
    }
    body :is(.modal-close,.btn-close-modal,.btn-back-icon,.btn-text-link,.btn-scratch-tool,
        .btn-admin-password,.btn-copy-prompt,.dock-action-btn) {
        min-height: 44px !important; min-width: 44px; padding: 10px 12px !important;
        font-size: 13px !important; border-radius: 10px !important;
    }
    body :is(.modal-close,.btn-close-modal,.btn-back-icon) { font-size: 22px !important; flex-shrink: 0; }
    body :is(.level-chip,.col-chip,.tool-btn,.btn-quick-chip) {
        min-height: 44px; padding: 10px 14px; font-size: 14px; border-radius: 10px;
    }
    body :is(.level-chip,.col-chip,.btn-quick-chip).active {
        background: #e8f1fc; color: #004b99; border-color: #0066cc; box-shadow: inset 0 0 0 1px #0066cc;
    }
    .ipad-drawing-dock .color-dot { min-width: 44px; min-height: 44px; flex-shrink: 0; border-radius: 50%; }
    body :is(.btn-danger-action,.btn-admin-delete) {
        background: #fff0ef !important; color: #a32119 !important; border: 1px solid #edb9b5 !important;
    }
    .nav-actions { align-items: center; gap: 8px; }
    .toggle-actions { gap: 10px; flex-wrap: wrap; }
    .level-btn-group { flex-wrap: wrap; }
    .modoo-select { min-height: 48px; font-size: 16px; }
    body button:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
    body button:disabled { opacity: .5; cursor: not-allowed; }
    body button:not(:disabled):hover { filter: brightness(.96); }
}
/* Quiet navigation: secondary controls remain available in a disclosure. */
@media screen {
    .modoo-navbar .nav-container { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 16px 24px; }
    .modoo-navbar .nav-actions { display: contents; }
    .modoo-navbar .nav-brand { grid-column: 1; grid-row: 1; width: auto; border: 0; margin: 0; }
    .modoo-navbar .nav-primary { grid-column: 2; grid-row: 1; }
    .modoo-navbar .clean-more { grid-column: 1 / -1; grid-row: 2; }
    .modoo-navbar .nav-primary { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
    .modoo-navbar .nav-primary .nav-btn { width: auto; flex: 0 1 auto; min-height: 44px !important; padding: 10px 14px !important; background: #f1f1f4; color: #252529; border: 0; }
    .modoo-navbar .nav-primary .btn-account { background: #1d1d1f; color: #fff; }
    .modoo-navbar .nav-actions > .nav-btn { width: auto; flex: 0 1 auto; min-width: 0; min-height: 44px !important; padding: 10px 14px !important; background: #f1f1f4; color: #252529; border-color: transparent; }
    .modoo-navbar .nav-actions > .btn-account { background: #1d1d1f; color: #fff; }
    .brand-desc, .version-tag, .brand-sub-badge { display: none; }
    .modoo-navbar .clean-more-panel .mobile-storage-link { display: none; }
    .clean-more { position: relative; grid-column: 1 / -1; width: 100%; min-width: 0; }
    .clean-more[open] { width: 100%; }
    .clean-more > summary { display: none; }
    .nav-menu-toggle { border: 1px solid #dedee5; background: transparent; color: #252529; padding: 10px 14px; font-size: 14px; }
    .nav-menu-toggle::after { content: ' ＋'; }
    .nav-menu-toggle[aria-expanded="true"]::after { content: ' −'; }
    .clean-more:not([open]) { display: none; }
    .clean-more:not([open]) .clean-more-panel { display: none; }
    .clean-more summary { cursor: pointer; padding: 12px 16px; min-height: 44px; box-sizing: border-box; font-size: 14px; border-radius: 12px; list-style: none; }
    .clean-more summary::-webkit-details-marker { display: none; }
    .clean-more summary::after { content: ' ＋'; }
    .clean-more[open] summary::after { content: ' −'; }
    .clean-more summary:focus-visible { outline: 3px solid #0071e3; }
    .clean-more-panel { position: relative; width: 100%; margin-top: 0; background: #fff; padding: 16px; box-sizing: border-box; border: 1px solid #e5e5ea; border-radius: 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; max-height: min(560px,65dvh); overflow-y: auto; overscroll-behavior: contain; }
    .clean-more-panel h3 { margin: 8px 8px 10px; font-size: 12px; font-weight: 500; color: #68686d; }
    .clean-more-panel section { min-width: 0; }
    .modoo-navbar .clean-more-panel section > button { grid-column: auto; }
    .modoo-navbar .clean-more-panel .nav-btn, .modoo-navbar .clean-more-panel #btnTopRegen { display: flex; width: 100%; justify-content: flex-start; gap: 12px; margin: 2px 0; min-height: 44px !important; padding: 10px 12px !important; font-size: 14px !important; background: transparent !important; color: #252529 !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important; text-align: left; }
    .clean-more-panel .nav-btn:hover { background: #f5f5f7 !important; }
    .clean-more-panel .auto-save-pill { grid-column: 1 / -1; margin-top: 0; width: fit-content; }
    .studio-art, .studio-tags { display: none; }
    .studio-welcome { display: block; padding: 40px; }
    .studio-intro h1 { font-size: clamp(30px, 4vw, 46px); }
    .toggle-actions .quick-icon { display: none; }
    .toggle-actions #btnQuickRegen { flex-basis: auto; min-height: 48px !important; padding: 12px 18px !important; font-size: 14px !important; }
    .toolbar-toggle-bar { gap: 12px; }
}
@media screen and (max-width: 600px) {
    .modoo-navbar .nav-container { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
    .modoo-navbar .nav-brand .brand-logo-badge { display: none; }
    .modoo-navbar .nav-primary { justify-content: flex-end; flex-wrap: nowrap; gap: 5px; }
    .modoo-navbar .nav-primary #btnOpenStorage { display: none; }
    .modoo-navbar .clean-more-panel .mobile-storage-link { display: flex; }
    .modoo-navbar .nav-primary > button { flex: 1 1 0; min-width: 0; padding: 10px 8px !important; font-size: 13px !important; }
    .clean-more-panel { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 12px; }
    .clean-more-panel section { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 8px; }
    .clean-more-panel section h3 { grid-column: 1 / -1; margin: 4px 8px; }
    .clean-more-panel section + section { border-top: 1px solid #eee; padding-top: 8px; }
    .nav-container { gap: 8px; }
    .nav-actions { display: flex; width: 100%; justify-content: flex-end; }
    .nav-actions > .nav-btn { width: auto; flex: 1; }
    .studio-welcome { padding: 28px 24px; }
    .toggle-actions { gap: 6px; }
    .toggle-actions button { flex: 1 1 auto; padding: 10px 8px !important; font-size: 13px !important; }
}
@media screen and (max-width: 600px) {
    .nav-actions { display: flex; width: 100%; }
    .nav-actions > .nav-btn { width: auto; margin: 0; }
    .nav-actions #btnTopRegen { grid-column: 1 / -1; }
    .toggle-actions { display: flex; width: 100%; }
    .toggle-actions button { flex: 1 1 auto; }
    .toggle-actions #btnQuickRegen { flex-basis: auto; }
    body .btn-dark-action { padding: 10px 8px !important; font-size: 12px !important; }
}