#mobile-canvas-ui { display: none; }

html.mobile-canvas,
html.mobile-canvas body {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    font-family: system-ui, Arial, sans-serif;
}

html.mobile-canvas .paint-chrome,
html.mobile-canvas .paint98-chrome,
html.mobile-canvas .paint-statusbar,
html.mobile-canvas .paint98-statusbar,
html.mobile-canvas .paint98-color-box,
html.mobile-canvas .toolbar,
html.mobile-canvas .toolbar-backdrop,
html.mobile-canvas .menu-toggle,
html.mobile-canvas .floating-tools,
html.mobile-canvas .canvas-minimap,
html.mobile-canvas .brush-context-panel,
html.mobile-canvas .brush-cursor {
    display: none !important;
}

html.mobile-canvas body .canvas-scroll {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    touch-action: none;
}

html.mobile-canvas #drawing-canvas,
html.mobile-canvas #stroke-preview-canvas {
    margin: 0;
    border: 0;
    border-radius: 0;
    touch-action: none;
}

html.mobile-canvas #mobile-canvas-ui {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    color: #202626;
    font: 13px system-ui, Arial, sans-serif;
    letter-spacing: 0;
}

#mobile-canvas-ui [hidden] { display: none !important; }
#mobile-canvas-ui button,
#mobile-canvas-ui input,
#mobile-canvas-ui select { font: inherit; color: inherit; letter-spacing: 0; }
#mobile-canvas-ui svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#mobile-canvas-ui button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#mobile-canvas-ui button:disabled { opacity: .35; cursor: default; }
#mobile-canvas-ui button:focus-visible,
#mobile-canvas-ui input:focus-visible,
#mobile-canvas-ui select:focus-visible { outline: 2px solid #16826e; outline-offset: 2px; }

.mobile-top { position: absolute; top: max(12px, var(--safe-top)); left: max(12px, var(--safe-left)); right: max(12px, var(--safe-right)); display: flex; justify-content: space-between; gap: 10px; }
.mobile-top > *, .mobile-dock, .mobile-sheet, #mobile-desktop-note { pointer-events: auto; background: #fff; border: 1px solid #d6dcd9; box-shadow: 0 2px 10px #00000012; border-radius: 8px; }
.mobile-icon { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; }
.mobile-top > .mobile-icon { background: #fff; border: 1px solid #d6dcd9; border-radius: 8px; }
.mobile-icon[aria-pressed="true"] { background: #d9f2e8; color: #13634e; }
.mobile-icon:active:not(:disabled) { background: #edf1ee; }
.mobile-location { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; max-width: calc(100% - 54px); padding: 0 12px; }
#mobile-tile { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.mobile-online { font-size: 11px; color: #176247; white-space: nowrap; border-left: 1px solid #d6dcd9; padding-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mobile-online.is-offline { color: #9f3434; }
.mobile-bottom { position: absolute; bottom: max(12px, var(--safe-bottom)); left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#mobile-desktop-note { display: flex; align-items: center; max-width: 100%; padding-left: 10px; font-size: 10px; line-height: 1.35; color: #555f59; }
#mobile-note-close { flex-basis: 36px; width: 36px; height: 36px; }
#mobile-note-close svg { width: 14px; height: 14px; }
.mobile-dock { display: flex; align-items: center; gap: 4px; padding: 5px; }
.mobile-divider { width: 1px; height: 26px; background: #d6dcd9; margin: 0 3px; }
#mobile-color-sample { width: 27px; height: 27px; border: 1px solid #888; box-shadow: 0 0 0 3px #fff; border-radius: 4px; background: #000; }
.mobile-sheet { position: absolute; bottom: calc(max(12px, var(--safe-bottom)) + 68px); left: max(12px, var(--safe-left)); right: max(12px, var(--safe-right)); max-width: 420px; margin: 0 auto; max-height: calc(100dvh - 156px - var(--safe-top) - var(--safe-bottom)); overflow: auto; padding: 8px 16px 16px; overscroll-behavior: contain; }
.mobile-sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mobile-sheet h2 { font-size: 15px; font-weight: 600; }
.mobile-sheet p { line-height: 1.5; overflow-wrap: anywhere; }
.mobile-colors { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.mobile-colors button { aspect-ratio: 1; border: 1px solid #0003; border-radius: 5px; background: var(--swatch); min-width: 0; }
.mobile-colors button[aria-pressed="true"] { outline: 2px solid #202626; outline-offset: 2px; box-shadow: inset 0 0 0 2px #fff; }
.mobile-custom-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; }
.mobile-custom-color input { width: 64px; flex: 0 0 64px; height: 40px; margin: 0; padding: 3px; background: #fff; border: 1px solid #ccd4ce; border-radius: 5px; }
#mobile-nav-form { display: grid; grid-template-columns: auto minmax(0, 1fr) 52px; align-items: center; gap: 10px; margin: 14px 0; }
#mobile-canvas-ui input[type="number"], #mobile-canvas-ui select { min-width: 0; width: 100%; min-height: 44px; font-size: 16px; padding: 8px; border: 1px solid #ccd4ce; background: #fff; border-radius: 5px; }
.mobile-command { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #ccd4ce; border-radius: 5px; background: #f2f6f3; }
.mobile-bookmarks { display: grid; gap: 8px; }
.mobile-bookmark-group { display: grid; gap: 8px; margin-top: 18px; }
.mobile-bookmark-group + .mobile-bookmark-group { border-top: 1px solid #d6dcd9; padding-top: 16px; }
.mobile-bookmark-editor { display: grid; gap: 8px; }
.mobile-bookmark-editor input { width: 100%; min-width: 0; height: 44px; border: 1px solid #ccd4ce; background: #fff; border-radius: 5px; padding: 8px; font-size: 16px !important; }
.mobile-bookmark-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 6px; }
.mobile-bookmark-status { font-size: 12px; color: #677168; }
#mobile-bookmark-login { margin-top: 10px; }
.mobile-edges { display: flex; gap: 10px; margin-top: 16px; }
.mobile-edges > * { flex: 1; }
#mobile-session { margin-top: 16px; width: 100%; }
.mobile-account-note { font-size: 12px; color: #677168; padding-top: 18px; }
#mobile-canvas-ui:has(#mobile-sheet:not([hidden])) #mobile-desktop-note { visibility: hidden; }

html.mobile-canvas .login-overlay { background: #ffffffde; }
html.mobile-canvas .login-card { border: 1px solid #d6dcd9; border-radius: 8px; background: #fff; color: #202626; box-shadow: 0 8px 32px #0002; backdrop-filter: none; padding: 24px; }
html.mobile-canvas .login-card h2 { color: #13634e; }
html.mobile-canvas .login-card p, html.mobile-canvas .guest-btn { color: #46534a; }
html.mobile-canvas .canvas-notice { top: calc(max(12px, var(--safe-top)) + 58px); bottom: auto; max-width: calc(100vw - 100px); background: #202626; color: #fff; font-size: 12px; border-radius: 6px; }

@media (max-height: 480px) {
    html.mobile-canvas #mobile-desktop-note { display: none; }
    .mobile-sheet { max-height: calc(100dvh - 104px - var(--safe-bottom)); }
}