.tool-icon { width: 22px; height: 22px; display: block; flex: 0 0 22px; pointer-events: none; }
:root {
    --bg: #786f6f;
    --canvas-bg: #786f6f;
    --toolbar-bg: rgba(120,111,111,0.94);
    --text: #e8e0d5;
    --btn-bg: #5a5252;
    --btn-border: #8a8080;
    --btn-hover: #6a6060;
    --btn-active-bg: #5a5252;
    --input-bg: #5a5252;
    --pen-color: #e8e0d5;
}

body.light {
    --bg: #f5f0e8;
    --canvas-bg: #f5f0e8;
    --toolbar-bg: rgba(245,240,232,0.94);
    --text: #4a3f35;
    --btn-bg: #e8e0d3;
    --btn-border: #c4b8a4;
    --btn-hover: #d4c8b5;
    --btn-active-bg: #d4c8b5;
    --input-bg: #fff;
    --pen-color: #4a3f35;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

#app {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg);
}

#file-toolbar {
    position: absolute; top: 10px; left: 10px; z-index: 30;
    display: flex; align-items: center; gap: 4px;
}
.theme-btn { font-size: 17px; }
#theme-toggle, #btnExport { display: none !important; }
#user-avatar-btn {
    position: absolute; top: 10px; right: 10px; z-index: 30;
    width: 32px; height: 32px; padding: 0; border: 1px solid var(--btn-border);
    border-radius: 50%; background: var(--toolbar-bg); color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    font: 20px/1 Arial, sans-serif;
}
#user-avatar-btn:hover { background: var(--btn-hover); }
#user-avatar-btn img, .user-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.user-modal { display: none; position: fixed; inset: 0; z-index: 180; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.58); }
.user-modal.visible { display: flex; }
.user-panel { position: relative; width: min(390px, 100%); max-height: min(600px, calc(100vh - 32px)); overflow: auto; padding: 24px; border: 1px solid var(--btn-border); border-radius: 10px; background: var(--toolbar-bg); color: var(--text); box-shadow: 0 12px 34px rgba(0,0,0,.35); }
.user-panel h2 { margin: 0 0 18px; font-size: 20px; text-align: center; }
.user-panel h3 { margin: 0 0 10px; font-size: 15px; }
.user-panel-close { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 24px; }
.user-profile-row { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--btn-border); }
.user-avatar-preview { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--btn-border); border-radius: 50%; color: var(--text); font: 30px/1 Arial,sans-serif; }
.user-upload-btn, #user-code-btn, #user-bind-btn { padding: 7px 11px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--text); cursor: pointer; font: 13px inherit; }
.user-upload-btn:hover, #user-code-btn:hover, #user-bind-btn:hover { background: var(--btn-hover); }
.user-bind-section { padding: 18px 0; border-bottom: 1px solid var(--btn-border); }
.user-bound-view { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; font-size: 14px; }
.user-bound-view strong { letter-spacing: 1px; }
.user-bound-view span { opacity: .75; font-size: 12px; }
.user-bound-view button, .member-settings-btn { padding: 6px 10px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--text); cursor: pointer; font: 13px inherit; }
.user-bound-view button { margin-left: 0; flex-basis: 100%; width: max-content; }
.user-bound-view button:hover, .member-settings-btn:hover { background: var(--btn-hover); }
.user-input-row { display: flex; gap: 7px; margin-top: 8px; }
.user-input-row[hidden], .user-bound-view[hidden] { display: none !important; }
.user-input-row input { flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid var(--btn-border); border-radius: 5px; outline: none; background: var(--input-bg); color: var(--text); font: 14px inherit; }
.user-status { min-height: 18px; margin: 8px 0 0; color: var(--text); font-size: 12px; }
.user-settings-placeholder { padding-top: 18px; }
.member-settings-btn { display: block; margin-bottom: 10px; }
.user-settings-placeholder .member-settings-btn { display: inline-block; margin: 0 8px 10px 0; }
.user-settings-placeholder #favorites-btn { color: #000; }
.user-settings-placeholder #favorites-btn .favorites-star { color: #d49b22; }
.favorites-list { display: grid; gap: 7px; max-height: min(440px, calc(100vh - 190px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; touch-action: pan-y; }
.favorites-actions { display: flex; gap: 7px; margin: -8px 0 10px; }
.favorites-actions button { padding: 6px 9px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--text); cursor: pointer; font: 12px inherit; }
.favorite-select { margin-left: auto; }
.favorite-item { display: flex; align-items: center; gap: 10px; padding: 7px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--text); cursor: pointer; text-align: left; font: 13px inherit; }
.favorite-thumb { width: 76px; height: 52px; object-fit: cover; border: 1px solid var(--btn-border); border-radius: 3px; background: var(--canvas-bg); }
.favorite-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-preview { display: block; width: 100%; max-height: 220px; object-fit: contain; margin: 0 auto 14px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--canvas-bg); }
.favorite-name-label { display: block; margin-bottom: 5px; font-size: 13px; }
.favorite-name-input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--input-bg); color: var(--text); outline: none; font: 14px inherit; }
.favorite-delete-panel { text-align: center; }
#favorite-delete-modal { z-index: 190; }
.favorite-delete-panel { z-index: 301; }
.favorite-delete-panel h2 { margin-bottom: 14px; }
.favorite-delete-panel p { margin: 0 0 18px; font-size: 14px; }
.favorite-delete-panel .favorites-actions { justify-content: center; margin: 0; gap: 14px; }
.favorite-delete-panel .favorites-actions button { min-width: 64px; }
.member-purchase-panel { text-align: center; }
.member-purchase-panel p { margin: 0 0 18px; font-size: 14px; }
.member-purchase-panel .favorites-actions { justify-content: center; margin: 0; gap: 14px; }
.member-payment-panel { width: min(420px, 100%); text-align: center; }
.member-payment-summary { display: grid; gap: 9px; margin: 2px 0 16px; padding: 13px 14px; border: 1px solid var(--btn-border); border-radius: 7px; background: var(--btn-bg); text-align: left; }
.member-payment-summary div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.member-payment-summary span { opacity: .72; }
.member-payment-summary strong { max-width: 65%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.member-payment-status { min-height: 20px; margin: 0 0 10px; font-size: 13px; }
.member-payment-qr-wrap { display: grid; justify-items: center; gap: 5px; margin: 2px 0 12px; }
.member-payment-qr { width: 220px; height: 220px; padding: 8px; border: 1px solid var(--btn-border); border-radius: 7px; background: #fff; object-fit: contain; image-rendering: pixelated; }
.member-payment-qr-tip { margin: 0; font-size: 12px; opacity: .75; }
.member-payment-open { padding: 6px 10px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--text); cursor: pointer; font: 12px inherit; }
.member-payment-back { width: 100%; padding: 7px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--text); cursor: pointer; font: 13px inherit; }
.member-payment-back:hover { background: var(--btn-hover); }
.favorite-item:hover { background: var(--btn-hover); }
.theme-lock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; font-size: 13px; }
.user-settings-placeholder:not(.function-open) .theme-lock-row { display: none; }
.user-settings-placeholder .theme-lock-row { display: none !important; }
.function-theme-row { display: flex !important; }
.theme-lock-row select { max-width: 190px; padding: 5px 7px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--input-bg); color: var(--text); font: 13px inherit; }
.member-panel { width: min(460px, 100%); }
.member-status { margin: -8px 0 16px; text-align: center; font-size: 13px; opacity: .85; }
.member-current-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: -4px 0 16px; }
.member-current-row .member-status { margin: 0; white-space: nowrap; }
.auto-renew-control { display: flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.auto-renew-control input { accent-color: #f28b35; }
.member-remaining { justify-self: end; font-size: 12px; opacity: .8; white-space: nowrap; }
.member-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.member-plan { min-height: 70px; padding: 10px 5px; border: 2px solid rgba(232,224,213,.72); border-radius: 7px; background: #fff; color: #4a3210; cursor: pointer; display: flex; flex-direction: column; gap: 7px; align-items: center; font: 13px inherit; }
.member-plan:hover { border-color: #f2b45b; }
.member-plan.active { background: #fffaf0; border-color: #f28b35; box-shadow: 0 0 0 1px rgba(242,139,53,.18); }
.member-plan strong { font-size: 15px; }
.payment-row { display: flex; align-items: center; gap: 7px; margin: 16px 0 10px; font-size: 13px; }
.payment-btn, .member-trial-btn, #member-redeem-btn { padding: 7px 10px; border: 1px solid var(--btn-border); border-radius: 5px; background: #fff; color: #4a3210; cursor: pointer; font: 13px inherit; }
.payment-btn.active { border-color: #f28b35; background: #fffaf0; color: #7b4b12; }
.member-trial-countdown { width: 100%; margin-bottom: 12px; padding: 9px; border: 1px solid var(--btn-border); border-radius: 5px; text-align: center; font-size: 13px; }
.member-confirm-pay { width: 100%; margin: 2px 0 12px; padding: 8px; border: 1px solid #5c8a6f; border-radius: 5px; background: #5c8a6f; color: #fff; cursor: pointer; font: 14px inherit; }
.member-confirm-pay:hover { filter: brightness(1.08); }
.member-confirm-pay[hidden] { display: none !important; }
.member-agreement { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 9px; color: var(--text); font-size: 11px; line-height: 1.45; }
.member-agreement input { margin-top: 2px; accent-color: #f28b35; }
.agreement-link { color: #1976d2; text-decoration: underline; }
.agreement-link:hover { color: #0d47a1; }
.agreement-panel { max-height: min(620px, calc(100vh - 32px)); }
.agreement-content { max-height: 440px; overflow: auto; color: var(--text); font-size: 13px; line-height: 1.75; white-space: pre-line; }
.redeem-row { display: flex; gap: 7px; }
.redeem-row input { flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--input-bg); color: var(--text); outline: none; font: 14px inherit; }
.user-settings-placeholder p { margin: 0; color: var(--text); opacity: .7; font-size: 13px; }
.account-settings-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.account-settings-actions button { padding: 6px 10px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); color: var(--text); cursor: pointer; font: 13px inherit; }
.account-settings-actions button:hover { background: var(--btn-hover); }
.account-settings-actions .danger-action { color: #c45c5c; }
.device-list { display: grid; gap: 8px; color: var(--text); font-size: 13px; }
.device-item { padding: 10px; border: 1px solid var(--btn-border); border-radius: 5px; background: var(--btn-bg); }
.function-theme-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #f28b35; }
.function-theme-row input[type="range"] { width: 120px; }
.function-theme-row output { min-width: 36px; text-align: right; font-size: 12px; }
.file-btn {
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--btn-border); border-radius: 5px;
    background: var(--toolbar-bg); color: var(--text); cursor: pointer;
    font: 16px/1 Arial, sans-serif;
}
.file-btn:hover { background: var(--btn-hover); }
#save-status { min-width: 0; color: var(--text); font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

#canvas-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    flex: none;
    cursor: crosshair;
    background: var(--canvas-bg);
    touch-action: none;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

#bgCanvas { z-index: 0; pointer-events: none; background: var(--canvas-bg); }
#drawCanvas { z-index: 1; }
#gridCanvas { z-index: 2; pointer-events: none; }
#eraser-cursor {
    display: none;
    position: absolute;
    z-index: 4;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72);
    pointer-events: none;
    transform: translate(-50%, -50%);
}
body.light #eraser-cursor {
    border-color: rgba(32, 32, 32, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

#solid3d-stage {
    display: none; position: absolute; inset: 0; z-index: 14; overflow: hidden;
    background: #18201f; touch-action: none;
}
#solid3d-stage.visible { display: block; }
#solid3d-canvas, #solid3d-ink-canvas { width: 100%; height: 100%; touch-action: none; }
#solid3d-canvas { z-index: 0; cursor: grab; }
#solid3d-canvas:active { cursor: grabbing; }
#solid3d-ink-canvas { z-index: 1; pointer-events: none; }
#solid3d-stage.locked #solid3d-canvas { cursor: crosshair; }
#solid3d-controls {
    position: absolute; top: 54px; left: 14px; z-index: 2; width: 260px;
    padding: 10px; border: 1px solid rgba(218, 231, 225, 0.42); border-radius: 7px;
    background: rgba(25, 33, 32, 0.9); color: #edf4f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.solid3d-controls-head { display: flex; min-height: 26px; align-items: center; justify-content: flex-start; gap: 6px; font-size: 15px; }
.solid3d-controls-head .solid3d-close { margin-left: auto; }
.solid3d-close {
    width: 26px; height: 26px; border: 1px solid rgba(218, 231, 225, 0.45); border-radius: 5px;
    background: rgba(255, 255, 255, 0.08); color: #edf4f0; cursor: pointer; font: 20px/20px Arial, sans-serif;
}
.solid3d-close:hover { background: rgba(198, 95, 100, 0.45); }
.solid3d-unit { margin: 3px 0 10px; color: #bdccc3; font-size: 12px; }
.solid3d-dimension {
    display: grid; grid-template-columns: 44px minmax(48px, 1fr) 42px 20px;
    gap: 6px; align-items: center; margin-top: 9px; color: #edf4f0; font-size: 13px;
}
.solid3d-dimension.hidden { display: none; }
.solid3d-dimension input[type="range"] { width: 100%; accent-color: #61aaa2; cursor: ew-resize; }
.solid3d-number {
    width: 42px; min-width: 0; padding: 3px 4px; border: 1px solid #71948c; border-radius: 4px;
    background: #eff6f1; color: #17312d; font: 13px inherit; text-align: center; outline: none;
}
.solid3d-number:focus { border-color: #d08a63; box-shadow: 0 0 0 2px rgba(208, 138, 99, 0.24); }
.solid3d-dimension em { color: #bdccc3; font-style: normal; font-size: 12px; }
.solid3d-section-controls {
    margin-top: 13px; padding-top: 10px;
    border-top: 1px solid rgba(218, 231, 225, 0.28);
}
.solid3d-section-toggle {
    width: 48px; height: 26px; flex: 0 0 48px; padding: 0; border: 1px solid #71948c; border-radius: 5px;
    background: rgba(97, 170, 162, 0.18); color: #edf4f0; cursor: pointer;
    font: 13px inherit;
}
.solid3d-section-toggle:hover { background: rgba(97, 170, 162, 0.34); }
.solid3d-section-toggle.active { background: #61aaa2; color: #17312d; border-color: #b7e0d8; }
.solid3d-unfold-toggle {
    width: 48px; height: 26px; flex: 0 0 48px; padding: 0; border: 1px solid #d49b68; border-radius: 5px;
    background: rgba(212, 155, 104, 0.18); color: #edf4f0; cursor: pointer; font: 13px inherit;
}
.solid3d-unfold-toggle:hover { background: rgba(212, 155, 104, 0.34); }
.solid3d-unfold-toggle.active { background: #d49b68; color: #2d211b; border-color: #ffe0a0; }
.solid3d-lock-toggle {
    width: 26px; height: 26px; flex: 0 0 26px; padding: 0; border: 1px solid #71948c; border-radius: 5px;
    background: rgba(255, 255, 255, 0.08); color: #edf4f0; cursor: pointer; font: 14px inherit;
}
.solid3d-lock-toggle.active { background: #d8a15f; color: #17312d; border-color: #ffe0a0; }
#solid3d-controls input:disabled, #solid3d-controls button:disabled { opacity: 0.52; cursor: not-allowed; }
.solid3d-section-dimension {
    display: grid; grid-template-columns: 58px minmax(50px, 1fr) 34px;
    gap: 5px; align-items: center; margin-top: 8px; color: #edf4f0; font-size: 12px;
}
.solid3d-section-dimension input[type="range"] { width: 100%; accent-color: #d8a15f; cursor: ew-resize; }
.solid3d-section-dimension em { color: #bdccc3; font-style: normal; text-align: right; font-size: 11px; }
.solid3d-cut-actions { display: flex; gap: 6px; margin-top: 10px; }
.solid3d-cut-actions[hidden] { display: none; }
.solid3d-cut-actions button[hidden] { display: none; }
.solid3d-cut-actions button {
    flex: 1 1 0; min-width: 0; height: 28px; padding: 0 5px;
    border: 1px solid #71948c; border-radius: 4px; background: rgba(97, 170, 162, 0.16);
    color: #edf4f0; cursor: pointer; font: 12px inherit;
}
.solid3d-cut-actions button:hover:not(:disabled) { background: rgba(97, 170, 162, 0.35); }
#solid3d-cut-actions button:disabled { opacity: 0.48; cursor: not-allowed; }
#func-keyboard.numeric-only .kb-row:nth-child(-n+2) { display: none; }

@media (max-width: 600px) {
    #solid3d-controls { top: 44px; left: 8px; width: 240px; padding: 8px; }
    .solid3d-dimension { grid-template-columns: 38px minmax(44px, 1fr) 38px 19px; gap: 4px; }
    .solid3d-number { width: 38px; font-size: 12px; }
    .solid3d-section-dimension { grid-template-columns: 54px minmax(42px, 1fr) 31px; gap: 4px; }
}

#toolbar-toggle {
    position: absolute; left: 10px; bottom: 12px; z-index: 31;
    width: 34px; height: 34px; padding: 0; border: 1px solid var(--btn-border); border-radius: 5px;
    background: var(--toolbar-bg); color: var(--text); cursor: pointer; font: 18px/1 Arial, sans-serif;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
#toolbar-toggle:hover { background: var(--btn-hover); }
#toolbar-toggle.dragging { cursor: grabbing; }
.tool-icon { width: 22px; height: 22px; display: block; pointer-events: none; }
#toolbar {
    position: absolute; left: 10px; top: 50%; bottom: auto; right: auto;
    z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 5px;
    width: var(--toolbar-width, 40px); overflow: visible;
    padding: 4px; background: var(--toolbar-bg); border: 1px solid var(--btn-border); border-radius: 6px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2); pointer-events: auto;
    transform: translateY(-50%); transition: transform 0.18s ease, opacity 0.18s ease;
    scrollbar-width: none;
}
body.left-hand #toolbar { left: auto; right: 10px; }
body.left-hand #more-tool-menu { right: 40px; left: auto; top: 0; }
body:not(.left-hand):not(.top-toolbar) #more-tool-menu { left: 40px; top: 0; }
body.left-hand #toolbar-toggle { left: auto; right: 10px; }
body.left-hand #pen-panel, body.left-hand #eraser-panel, body.left-hand #fill-panel, body.left-hand #radial-panel { left: auto; right: 44px; }
body.left-hand #td-menu { left: auto !important; right: 44px !important; }
body.left-hand #td-params { left: auto !important; right: 62px !important; }
body.top-toolbar #toolbar { left: 50%; right: auto; top: 10px; transform: translateX(-50%); flex-direction: row; width: auto; max-width: calc(100vw - 20px); overflow-x: auto; }
body.top-toolbar #toolbar { overflow: visible; max-width: none; }
body.top-toolbar #toolbar > * { position: relative; z-index: 60; }
body.top-toolbar #toolbar-toggle { left: auto; right: 10px; top: 10px; bottom: auto; }
body.top-toolbar #more-tool-menu { left: 0; top: 40px; flex-direction: row; }
body.top-toolbar #pen-panel, body.top-toolbar #eraser-panel, body.top-toolbar #fill-panel, body.top-toolbar #radial-panel { left: 50%; right: auto; top: 52px; transform: translateX(-50%); }
body.top-toolbar #td-menu { left: 50% !important; right: auto !important; top: 52px !important; transform: translateX(-50%) !important; }
body.top-toolbar #td-params { left: 50% !important; right: auto !important; bottom: auto !important; top: 58px !important; transform: translateX(-50%) !important; }
body.top-toolbar #custom-color-picker { left: 50%; right: auto; top: 52px; transform: translateX(-50%); }
body.top-toolbar #shape-tools-wrap { flex-direction: row; align-items: center; gap: 4px; }
body.tools-collapsed #toolbar { transform: translate(-62px, -50%); opacity: 0; pointer-events: none; }
/* 立体图形模式始终保留画笔、橡皮和选择工具。 */
body.solid3d-mode #toolbar { display: flex; }
body.solid3d-mode #page-area,
body.solid3d-mode #toolbar-toggle { display: none; }
body.solid3d-mode #toolbar > * { display: none; }
body.solid3d-mode #toolbar > #pen-tool-wrap,
body.solid3d-mode #toolbar > #eraser-tool-wrap,
body.solid3d-mode #toolbar > #btnSelect { display: inline-flex; }
.tool-btn, #toolbar > span { pointer-events: auto; flex: 0 0 auto; }
#more-tool-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
#more-tool-menu { display: none; position: absolute; z-index: 70; flex-direction: column; gap: 4px; padding: 4px; min-width: 42px; background: var(--toolbar-bg); border: 1px solid var(--btn-border); border-radius: 6px; box-shadow: 0 5px 16px rgba(0,0,0,.22); pointer-events: auto; }
#more-tool-wrap.expanded > #more-tool-menu { display: flex; }
#more-tool-menu > span { position: relative; display: inline-flex; flex: 0 0 auto; }
#more-tool-menu > #shape-tools-wrap { display: inline-flex; }
#more-tool-menu .tool-btn { flex: 0 0 auto; }
#btnGrid { margin-top: 4px; }
.tool-btn {
    width: var(--toolbar-button-size, 30px); height: var(--toolbar-button-size, 30px); border-radius: 6px;
    border: 2px solid transparent; background: transparent;
    cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: all 0.15s;
}
.tool-btn:hover { background: var(--btn-hover); }
.tool-btn:disabled { opacity: .38; cursor: default; pointer-events: none; }
.tool-btn:active { transform: scale(0.93); }
.tool-btn.active { background: var(--btn-active-bg); border-color: var(--text); }
.pen-tool-icon { color: var(--pen-icon-color, var(--text)); }
.laser-tool-icon { display: block; filter: drop-shadow(0 0 2px rgba(255, 45, 55, 0.7)); }
.text-tool-btn { font: 700 18px/1 Georgia, "Times New Roman", serif; }
#canvas-text-input {
    position: absolute; z-index: 12; display: none; min-width: 96px; min-height: 34px;
    padding: 2px 4px; resize: none; overflow: hidden; border: 1px dashed rgba(74, 122, 181, 0.7);
    border-radius: 3px; outline: none; background: transparent;
    color: var(--text); font: 22px/1.35 "PingFang SC", "Microsoft YaHei", sans-serif;
    white-space: pre; overflow-wrap: normal; touch-action: manipulation; user-select: text; -webkit-user-select: text;
}
body.light #canvas-text-input { background: transparent; }

#fill-tool-wrap { position: relative; display: inline-flex; }
#eraser-tool-wrap { position: relative; display: inline-flex; }
#pen-tool-wrap { position: relative; display: inline-flex; }
#shape-tools-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
#solid-tool-wrap { position: relative; display: inline-flex; }
#pen-panel {
    display: none; position: absolute; top: 50%; left: 44px; bottom: auto; transform: translateY(-50%);
    width: 156px; padding: 7px; gap: 5px; flex-wrap: wrap; border: 1px solid var(--btn-border); border-radius: 6px;
    background: var(--toolbar-bg); z-index: 40; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}
#pen-panel.visible { display: flex; }
.pen-swatch {
    width: 26px; height: 26px; border: 2px solid transparent; border-radius: 50%;
    background: var(--text); cursor: pointer; color: #fff; font: 12px inherit;
}
.pen-swatch[data-color="#5c8a6f"] { background: #5c8a6f; }
.pen-swatch[data-color="#c45c5c"] { background: #c45c5c; }
.pen-swatch.active { border-color: var(--text); box-shadow: 0 0 0 1px var(--btn-bg); }
.pen-swatch.pen-custom { background: conic-gradient(#c45c5c, #d4954e, #5c8a6f, #5c7ca5, #8a7a9a, #c45c5c); }
.pen-size-row { width: 100%; display: grid; grid-template-columns: 28px minmax(60px, 1fr) 18px; gap: 5px; align-items: center; color: var(--text); font-size: 12px; }
.pen-size-row input { width: 100%; accent-color: #61aaa2; }
.pen-size-row em { font-style: normal; text-align: right; }
#eraser-panel {
    display: none; position: absolute; top: 50%; left: 44px; bottom: auto; transform: translateY(-50%);
    padding: 5px; gap: 4px; border: 1px solid var(--btn-border); border-radius: 6px;
    background: var(--toolbar-bg); z-index: 40; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}
#eraser-panel.visible { display: flex; }
.eraser-size {
    width: 28px; height: 28px; padding: 1px; border: 1px solid var(--btn-border); border-radius: 5px;
    background: var(--btn-bg); color: var(--text); cursor: pointer; display: grid; place-items: center;
}
.eraser-size.active { background: var(--btn-active-bg); border-color: var(--text); }
.eraser-size-preview {
    width: var(--preview-size);
    height: var(--preview-size);
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent);
    pointer-events: none;
}
#fill-panel {
    display: none; position: absolute; top: 50%; left: 44px; bottom: auto; transform: translateY(-50%);
    width: 228px; padding: 10px; border: 1px solid var(--btn-border); border-radius: 8px;
    background: var(--toolbar-bg); z-index: 40; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}
#fill-panel.visible { display: block; }
#fill-palette { display: flex; align-items: center; gap: 6px; }
.fill-swatch { width: 18px; height: 18px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.fill-swatch.active { border-color: var(--text); }
.fill-custom { background: conic-gradient(#c45c5c, #d4954e, #5c8a6f, #5c7ca5, #8a7a9a, #c45c5c); color: #fff; font: 12px inherit; line-height: 14px; }
.fill-opacity-row { display: flex; align-items: center; gap: 6px; margin: 10px 0; color: var(--text); font-size: 13px; }
#fill-opacity { flex: 1; min-width: 80px; }
#fill-opacity-value { min-width: 32px; text-align: right; }
#btnFillConfirm { width: 100%; }

#custom-color-picker {
    display: none; position: absolute; left: 62px; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 80;
    width: 222px; padding: 9px; border: 1px solid var(--btn-border); border-radius: 7px;
    background: var(--toolbar-bg); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
#custom-color-picker.visible { display: block; }
.color-picker-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 8px; align-items: center; margin-bottom: 8px; }
#color-picker-preview { width: 24px; height: 24px; border: 1px solid var(--btn-border); border-radius: 4px; background: #e8e0d5; }
#color-picker-hue { width: 100%; accent-color: #d4954e; cursor: ew-resize; }
#btnColorPickerClose { width: 24px; height: 24px; padding: 0; border: 1px solid var(--btn-border); border-radius: 4px; background: var(--btn-bg); color: var(--text); cursor: pointer; font: 18px/20px Arial, sans-serif; }
#color-sv-wrap { position: relative; width: 196px; height: 132px; }
#color-sv-canvas { position: static; width: 196px; height: 132px; cursor: crosshair; touch-action: none; border-radius: 4px; }
#color-picker-marker { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65); pointer-events: none; transform: translate(-50%, -50%); }

#radial-tool-wrap { position: relative; display: inline-flex; }
#radial-panel {
    display: none; position: absolute; top: 50%; left: 44px; bottom: auto; transform: translateY(-50%);
    width: 214px; padding: 10px; border: 1px solid var(--btn-border); border-radius: 8px;
    background: var(--toolbar-bg); z-index: 40; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}
#radial-panel.visible { display: block; }
.radial-count-row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--text); font-size: 13px; }
#radial-count { flex: 1; min-width: 80px; }
#radial-count-value { min-width: 18px; text-align: right; }
#btnRadialConfirm { width: 100%; }

.td-opt {
    padding: 4px 10px; font-size: 12px; font-family: inherit;
    border: 1px solid var(--btn-border); background: var(--btn-hover); color: var(--text);
    border-radius: 6px; cursor: pointer; margin: 2px;
}
.td-opt:hover { background: var(--btn-border); }
.td-action {
    padding: 4px 7px; border: 1px solid var(--btn-border); border-radius: 5px;
    background: var(--btn-bg); color: var(--text); cursor: pointer; font: inherit; font-size: 12px;
}
.td-action:hover { background: var(--btn-hover); }

#td-params { display: none; left: 62px !important; right: auto !important; bottom: 10px !important; width: min(420px, calc(100vw - 78px)); border: 1px solid var(--btn-border); border-radius: 6px; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2); }
#td-params.visible { display: flex; }
#td-params { flex-wrap: wrap; }
#td-menu { top: 50% !important; left: 44px !important; bottom: auto !important; transform: translateY(-50%) !important; width: min(320px, calc(100vw - 72px)); white-space: normal !important; text-align: center; }

#func-keyboard { display: none; }
#func-keyboard.visible { display: block; }
#func-keyboard { z-index: 50 !important; background: none !important; padding: 0 !important; pointer-events: none; }
#func-keyboard .kb-row { pointer-events: none; }
#func-keyboard .kb-btn { pointer-events: auto; }

.kb-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 5px; }
.kb-row:last-child { margin-bottom: 0; }
.kb-btn {
    flex: 1; max-width: 48px; height: 36px; border-radius: 6px;
    border: 1px solid var(--btn-border); background: var(--btn-hover);
    cursor: pointer; font-size: 16px; font-family: inherit; color: var(--text);
    display: flex; align-items: center; justify-content: center;
}
.kb-btn:active { background: var(--btn-border); transform: scale(0.93); }
.kb-btn.kb-del { background: #c45c5c; border-color: #a05252; color: #fff; }
.kb-btn.kb-close { background: #c45c5c; border-color: #a05252; color: #fff; font-size: 12px; }
.kb-btn.kb-enter { background: #5c8a6f; border-color: #4a7a5e; color: #fff; font-weight: bold; max-width: 64px; flex: 2; }

#move-x-input, #move-y-input, #point-x, #point-y {
    width: 50px; font-size: 14px; padding: 3px 6px;
    border: 1px solid var(--btn-border); border-radius: 4px;
    background: var(--input-bg); color: var(--text); font-family: inherit; outline: none;
}
#btnMoveApply, #btnDrawPoint {
    padding: 4px 8px; font-size: 12px;
    border: 1px solid var(--btn-border); background: var(--btn-bg);
    color: var(--text); border-radius: 6px; cursor: pointer; font-family: inherit;
}
#btnMoveApply:hover, #btnDrawPoint:hover { background: var(--btn-hover); }

#bottom-bar {
    position: absolute; left: 60px; right: 92px; bottom: 10px;
    z-index: 25;
    display: flex; align-items: center; justify-content: flex-start;
    min-height: 0; padding: 0; background: transparent; border-top: none; gap: 10px;
    pointer-events: none;
}
#function-area, #page-area { pointer-events: auto; }
#function-area { display: none; align-items: center; gap: 6px; flex-wrap: wrap; }
#function-area.visible { display: flex; }
#func-prefix { font-size: 15px; font-weight: bold; color: var(--text); }
#function-input {
    width: 130px; font-size: 14px; padding: 5px 8px;
    border: 1px solid var(--btn-border); border-radius: 6px;
    background: var(--input-bg); outline: none; color: var(--text); font-family: inherit;
}
#btnDraw {
    padding: 4px 9px; font-size: 12px;
    border: 1px solid var(--btn-border); background: var(--btn-bg);
    color: var(--text); border-radius: 6px; cursor: pointer; font-family: inherit;
}
#btnDraw:hover { background: var(--btn-hover); }

#page-area { position: fixed; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 6px; }
#page-area button {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--btn-border); background: var(--btn-bg);
    cursor: pointer; font-size: 13px; color: var(--text);
    display: flex; align-items: center; justify-content: center;
}
#page-area button:hover { background: var(--btn-hover); }
#page-area button:active { transform: scale(0.9); }
#page-indicator { font-size: 13px; color: var(--text); min-width: 50px; text-align: center; }
#point-area[style*="display: inline"] { display: inline-flex !important; align-items: center; gap: 3px; }
#move-controls[style*="display: inline"] { display: inline-flex !important; align-items: center; gap: 4px; flex-wrap: wrap; }

@media (max-height: 600px) and (min-width: 601px) {
    #toolbar {
        top: 54px; transform: none; width: 82px; display: grid;
        grid-template-columns: repeat(2, 34px); align-items: start; gap: 4px;
    }
    body.tools-collapsed #toolbar { transform: translateX(-94px); }
    #shape-tools-wrap { display: contents; }
    #pen-panel, #eraser-panel, #fill-panel, #radial-panel { left: 78px; }
    #td-menu { left: 78px !important; }
}

/* Landscape phones have very little vertical room. Keep the controls compact
   while preserving the user's selected toolbar side. */
@media (max-height: 600px) and (orientation: landscape) and (hover: none) {
    #app { width: 100vw; height: 100dvh; }
    #file-toolbar { top: 5px; left: 6px; gap: 3px; }
    .file-btn { width: 27px; height: 27px; font-size: 14px; }
    #user-avatar-btn { top: 5px; right: 6px; width: 29px; height: 29px; }
    #toolbar {
        top: 46px; left: 6px; width: 74px; padding: 3px;
        grid-template-columns: repeat(2, 32px); gap: 3px;
    }
    body.left-hand #toolbar { left: auto; right: 6px; }
    .tool-btn { width: 28px; height: 28px; }
    #toolbar-toggle { width: 28px; height: 28px; font-size: 16px; }
    #page-area { right: 7px; bottom: 6px; gap: 4px; }
    #page-area button { width: 27px; height: 27px; }
    #page-indicator { min-width: 42px; font-size: 12px; }
    #bottom-bar { left: 90px; right: 74px; bottom: 6px; }
    #pen-panel, #eraser-panel, #fill-panel, #radial-panel { left: 84px; }
    body.left-hand #pen-panel, body.left-hand #eraser-panel, body.left-hand #fill-panel, body.left-hand #radial-panel { left: auto; right: 84px; }
    #td-menu { left: 84px !important; }
    body.left-hand #td-menu { left: auto !important; right: 84px !important; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    #file-toolbar { top: 8px; left: 8px; gap: 4px; }
    #user-avatar-btn { top: 8px; right: 8px; }
    #toolbar { left: 8px; }
    .user-panel { width: min(420px, calc(100vw - 40px)); }
}

@media (max-width: 600px) {
    #file-toolbar { top: 6px; left: 6px; gap: 3px; }
    .file-btn { width: 28px; height: 28px; font-size: 15px; }
    #user-avatar-btn { top: 6px; right: 6px; width: 30px; height: 30px; }
    .user-panel { padding: 20px 16px; }
    #save-status { display: none; }
    #toolbar { left: 6px; width: 38px; gap: 3px; padding: 4px; }
    body.left-hand #toolbar { left: auto; right: 6px; }
    body.left-hand #toolbar-toggle { left: auto; right: 6px; }
    body.left-hand #pen-panel, body.left-hand #eraser-panel, body.left-hand #fill-panel, body.left-hand #radial-panel { left: auto; right: 42px; }
    body.left-hand #td-menu { left: auto !important; right: 42px !important; }
    body.left-hand #td-params { left: auto !important; right: 52px !important; width: calc(100vw - 64px); }
    #toolbar-toggle { left: 6px; bottom: 8px; width: 32px; height: 32px; }
    body.tools-collapsed #toolbar { transform: translate(-58px, -50%); }
    .tool-btn { width: 29px; height: 29px; }
    #pen-panel, #eraser-panel, #fill-panel, #radial-panel { left: 38px; }
    #custom-color-picker { left: 50px; }
    #td-params { left: 52px !important; width: calc(100vw - 64px); }
    #td-menu { left: 42px !important; width: min(280px, calc(100vw - 58px)); }
    #bottom-bar { left: 52px; right: 82px; bottom: 8px; gap: 6px; }
    #function-input { width: 110px; font-size: 12px; }
    #td-menu { width: min(280px, calc(100vw - 18px)); }
}

/* Keep the horizontal toolbar below the file and account controls. */
body.top-toolbar #toolbar {
    left: 6px;
    right: 6px;
    top: 48px;
    width: auto;
    max-width: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
}
body.top-toolbar #toolbar-toggle {
    left: 10px;
    right: auto;
    top: auto;
    bottom: 10px;
}
body.top-toolbar #more-tool-menu {
    left: auto;
    right: 0;
    top: calc(100% + 4px);
    width: min(190px, calc(100vw - 16px));
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    flex-direction: column;
}
#more-tool-menu .tool-btn {
    width: auto;
    min-width: 132px;
    justify-content: flex-start;
    gap: 8px;
    padding-inline: 8px;
}
#more-tool-menu .tool-btn::after {
    content: attr(aria-label);
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}
#more-tool-menu #shape-tools-wrap { flex-direction: column; }

@media (hover: none), (pointer: coarse) {
    .file-btn { width: 40px; height: 40px; }
    #user-avatar-btn { width: 40px; height: 40px; }
    #toolbar { --toolbar-button-size: 40px; --toolbar-width: 50px; width: 50px; }
    .tool-btn { min-width: 40px; min-height: 40px; }
    #toolbar-toggle { width: 40px; height: 40px; }
    #page-area { bottom: 48px; right: 8px; }
    #page-area button { width: 40px; height: 40px; min-width: 40px; }
    #more-tool-menu .tool-btn { min-height: 40px; }
    .td-opt { min-height: 40px; }
    body:not(.left-hand):not(.top-toolbar) #more-tool-menu { left: 52px; }
    body.left-hand #more-tool-menu { right: 52px; }
    body:not(.left-hand) #pen-panel, body:not(.left-hand) #eraser-panel,
    body:not(.left-hand) #fill-panel, body:not(.left-hand) #radial-panel { left: 52px; }
    body.left-hand #pen-panel, body.left-hand #eraser-panel,
    body.left-hand #fill-panel, body.left-hand #radial-panel { left: auto; right: 52px; }
    body:not(.left-hand) #td-menu { left: 52px !important; }
    body.left-hand #td-menu { left: auto !important; right: 52px !important; }
}

@media (max-height: 600px) and (min-width: 601px) and (hover: none) {
    body:not(.top-toolbar) #toolbar { width: 92px; }
    body:not(.top-toolbar) #toolbar { grid-template-columns: repeat(2, 40px); }
    body.top-toolbar #toolbar { display: flex; }
}

/* Tool names stay under their icons on both side and top toolbars. */
#toolbar > .tool-btn,
#toolbar > span > .tool-btn,
#toolbar > span > span > .tool-btn {
    width: 60px;
    min-width: 60px;
    height: 48px;
    min-height: 48px;
    padding: 3px 2px;
    flex-direction: column;
    gap: 2px;
    border-width: 1px;
    font-size: 17px;
}
#toolbar > .tool-btn::after,
#toolbar > span > .tool-btn::after,
#toolbar > span > span > .tool-btn::after {
    content: attr(aria-label);
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: clip;
}
#toolbar .tool-icon,
#toolbar .laser-tool-icon { width: 20px; height: 20px; flex: 0 0 20px; }
#toolbar #more-tool-menu .tool-btn {
    width: auto;
    min-width: 132px;
    height: 40px;
    min-height: 40px;
    flex-direction: row;
    gap: 8px;
}
#toolbar #more-tool-menu .tool-btn::after {
    content: attr(aria-label);
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
}
body.top-toolbar #toolbar {
    left: 6px;
    right: 6px;
    width: auto;
    max-width: none;
    justify-content: center;
    gap: 3px;
}
body.top-toolbar #toolbar > .tool-btn,
body.top-toolbar #toolbar > span > .tool-btn,
body.top-toolbar #toolbar > span > span > .tool-btn { width: 60px; }

/* Keep graph entry and page navigation in one row, with navigation always visible. */
#bottom-bar {
    position: absolute;
    left: 58px;
    right: 12px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
body.left-hand:not(.top-toolbar) #bottom-bar { left: 12px; right: 58px; }
body.top-toolbar #bottom-bar { left: 12px; right: 12px; }
#function-area {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    white-space: nowrap;
}
#function-area.visible { display: flex; }
#func-prefix, #btnDraw, #point-area, #move-controls { flex: 0 0 auto; }
#function-input {
    flex: 1 1 180px;
    width: clamp(76px, 24vw, 240px);
    min-width: 64px;
    max-width: 320px;
}
#page-area {
    position: static;
    flex: 0 0 auto;
    gap: 5px;
    margin-left: auto;
    white-space: nowrap;
}
@media (max-width: 600px) {
    #bottom-bar { left: 52px; right: 8px; bottom: 8px; gap: 5px; }
    body.left-hand:not(.top-toolbar) #bottom-bar { left: 8px; right: 52px; }
    body.top-toolbar #bottom-bar { left: 8px; right: 8px; }
    #page-area { gap: 3px; }
    #page-area button { width: 30px; height: 30px; min-width: 30px; }
    #page-indicator { min-width: 38px; font-size: 11px; }
    #function-input { flex-basis: 100px; width: 100px; min-width: 56px; }
    #func-prefix { font-size: 12px; }
    #btnDraw { padding: 4px 6px; }
    #toolbar { width: 46px; }
    body.left-hand #toolbar { width: 46px; }
}
@media (hover: none), (pointer: coarse) {
    #toolbar { --toolbar-button-size: 40px; --toolbar-width: 46px; width: 46px; }
    #toolbar > .tool-btn,
    #toolbar > span > .tool-btn,
    #toolbar > span > span > .tool-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }
    #page-area { position: static; }
    body:not(.left-hand):not(.top-toolbar) #more-tool-menu { left: 48px; }
    body.left-hand #more-tool-menu { right: 48px; }
    body:not(.left-hand) #pen-panel, body:not(.left-hand) #eraser-panel,
    body:not(.left-hand) #fill-panel, body:not(.left-hand) #radial-panel { left: 48px; }
    body.left-hand #pen-panel, body.left-hand #eraser-panel,
    body.left-hand #fill-panel, body.left-hand #radial-panel { left: auto; right: 48px; }
}

@media (max-height: 600px) and (orientation: landscape) and (hover: none) {
    body:not(.top-toolbar) #toolbar { width: 92px; grid-template-columns: repeat(2, 40px); }
    body:not(.top-toolbar) #bottom-bar { left: 100px; right: 12px; }
    body.left-hand:not(.top-toolbar) #bottom-bar { left: 12px; right: 100px; }
}

/* Tighten the toolbar frame without making touch targets difficult to use. */
#toolbar {
    gap: 2px;
    padding: 2px;
    width: 46px;
}
#toolbar > .tool-btn,
#toolbar > span > .tool-btn,
#toolbar > span > span > .tool-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 1px;
    gap: 0;
}
#toolbar .tool-icon,
#toolbar .laser-tool-icon { width: 16px; height: 16px; flex-basis: 16px; }
#toolbar > .tool-btn::after,
#toolbar > span > .tool-btn::after,
#toolbar > span > span > .tool-btn::after { font-size: 8px; }
@media (hover: none), (pointer: coarse) {
    #toolbar { --toolbar-width: 46px; width: 46px; }
    #toolbar > .tool-btn,
    #toolbar > span > .tool-btn,
    #toolbar > span > span > .tool-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }
}
@media (max-height: 600px) and (orientation: landscape) and (hover: none) {
    body:not(.top-toolbar) #toolbar { width: 92px; grid-template-columns: repeat(2, 40px); }
}
#eraser-panel { flex-wrap: wrap; width: 104px; }
.eraser-size { flex: 1 1 0; min-width: 0; }
.clear-swipe {
    --swipe-progress: 0;
    position: relative;
    width: 100%;
    height: 28px;
    flex: 0 0 100%;
    overflow: hidden;
    border: 1px solid var(--btn-border);
    border-radius: 14px;
    background: var(--btn-bg);
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.clear-swipe:focus-visible { outline: 2px solid #69aaa2; outline-offset: 2px; }
.clear-swipe-track {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(100% * var(--swipe-progress));
    border-radius: inherit;
    background: color-mix(in srgb, #6c9e91 22%, transparent);
    pointer-events: none;
}
.clear-swipe-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #a6a6a6;
    font-size: 12px;
    pointer-events: none;
}
.clear-swipe-thumb {
    position: absolute;
    top: 1px;
    left: calc(2px + (100% - 28px) * var(--swipe-progress));
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--btn-hover);
    border: 1px solid var(--btn-border);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

/* The toolbar hides after the user starts drawing; a small edge arrow restores it. */
#toolbar-toggle,
#toolbar-toggle[hidden] {
    display: none;
    position: fixed;
    z-index: 80;
    left: 0;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 18px;
    height: 48px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--btn-border);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: var(--toolbar-bg);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,.16);
    font: 20px/1 Arial, sans-serif;
    touch-action: manipulation;
}
body.tools-collapsed #toolbar-toggle:not([hidden]) { display: block; }
body:not(.left-hand):not(.top-toolbar).tools-collapsed #toolbar {
    transform: translateX(calc(-100% - 8px)) translateY(-50%);
}
body.left-hand.tools-collapsed #toolbar {
    transform: translateX(calc(100% + 8px)) translateY(-50%);
}
body.left-hand.tools-collapsed #toolbar-toggle {
    left: auto;
    right: 0;
    border: 1px solid var(--btn-border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
}
body.top-toolbar.tools-collapsed #toolbar {
    transform: translateX(-50%) translateY(calc(-100% - 8px));
}
body.top-toolbar.tools-collapsed #toolbar-toggle {
    left: 50%;
    right: auto;
    top: 0;
    bottom: auto;
    width: 48px;
    height: 18px;
    transform: translateX(-50%);
    border: 1px solid var(--btn-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
}
body.solid3d-mode #toolbar-toggle { display: none !important; }

/* Tablet/browser viewport adaptation. Keep every surface inside the live
   viewport, including when the browser chrome or the on-screen keyboard
   changes the available height. */
:root {
    --viewport-width: 100vw;
    --viewport-height: 100dvh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --toolbar-size: clamp(40px, 5.4vw, 56px);
    --toolbar-rail: clamp(48px, 6.4vw, 68px);
    --layout-gap: clamp(5px, 1vw, 14px);
}

html,
body {
    width: var(--viewport-width, 100%);
    min-width: 0;
    min-height: 100%;
    height: var(--viewport-height);
}

body {
    overflow: hidden;
    padding: 0;
}

#app {
    width: var(--viewport-width, 100%);
    max-width: 100%;
    min-width: 0;
    height: var(--viewport-height);
    min-height: 100svh;
    max-height: 100dvh;
}

#canvas-container {
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

#file-toolbar {
    top: max(var(--layout-gap), var(--safe-top));
    left: max(var(--layout-gap), var(--safe-left));
    gap: clamp(3px, .65vw, 8px);
    max-width: calc(100% - 2 * var(--layout-gap) - 56px);
    min-width: 0;
}

.file-btn {
    width: clamp(30px, 4.7vw, 44px);
    height: clamp(30px, 4.7vw, 44px);
    font-size: clamp(14px, 1.9vw, 18px);
}

#user-avatar-btn {
    top: max(var(--layout-gap), var(--safe-top));
    right: max(var(--layout-gap), var(--safe-right));
    width: clamp(32px, 4.7vw, 44px);
    height: clamp(32px, 4.7vw, 44px);
}

#toolbar {
    left: max(var(--layout-gap), var(--safe-left));
    width: var(--toolbar-rail);
    max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 12px);
    gap: clamp(2px, .55vw, 7px);
    padding: clamp(2px, .45vw, 6px);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.left-hand #toolbar {
    left: auto;
    right: max(var(--layout-gap), var(--safe-right));
}

#toolbar > .tool-btn,
#toolbar > span > .tool-btn,
#toolbar > span > span > .tool-btn {
    width: var(--toolbar-size);
    min-width: var(--toolbar-size);
    height: var(--toolbar-size);
    min-height: var(--toolbar-size);
    padding: clamp(1px, .3vw, 4px);
}

#toolbar .tool-icon,
#toolbar .laser-tool-icon {
    width: clamp(16px, 2.7vw, 24px);
    height: clamp(16px, 2.7vw, 24px);
    flex-basis: clamp(16px, 2.7vw, 24px);
}

#toolbar > .tool-btn::after,
#toolbar > span > .tool-btn::after,
#toolbar > span > span > .tool-btn::after {
    font-size: clamp(8px, 1.25vw, 11px);
    line-height: 1.1;
}

body.left-hand #toolbar-toggle {
    left: auto;
    right: max(var(--layout-gap), var(--safe-right));
}

#toolbar-toggle {
    left: max(var(--layout-gap), var(--safe-left));
    width: clamp(30px, 4.7vw, 44px);
    height: clamp(38px, 6vw, 54px);
}

#bottom-bar {
    left: calc(var(--toolbar-rail) + var(--layout-gap) + var(--safe-left));
    right: max(var(--layout-gap), var(--safe-right));
    bottom: max(var(--layout-gap), var(--safe-bottom));
    gap: var(--layout-gap);
    min-width: 0;
}

body.left-hand:not(.top-toolbar) #bottom-bar {
    left: max(var(--layout-gap), var(--safe-left));
    right: calc(var(--toolbar-rail) + var(--layout-gap) + var(--safe-right));
}

body.top-toolbar #bottom-bar {
    left: max(var(--layout-gap), var(--safe-left));
    right: max(var(--layout-gap), var(--safe-right));
}

#function-area {
    min-width: 0;
    max-width: 100%;
    gap: clamp(4px, .8vw, 10px);
}

#func-prefix,
#function-area > span,
#point-area > span,
#move-controls > span {
    font-size: clamp(11px, 1.55vw, 15px) !important;
}

#function-input {
    width: clamp(76px, 22vw, 300px);
    min-width: 0;
    max-width: 100%;
    font-size: clamp(12px, 1.7vw, 16px);
}

#page-area {
    gap: clamp(3px, .7vw, 8px);
    margin-left: auto;
    padding-right: 0;
}

#page-area button {
    width: clamp(30px, 4.7vw, 44px);
    height: clamp(30px, 4.7vw, 44px);
    min-width: clamp(30px, 4.7vw, 44px);
    font-size: clamp(12px, 1.7vw, 16px);
}

#page-indicator {
    min-width: clamp(38px, 6vw, 58px);
    font-size: clamp(11px, 1.55vw, 14px);
}

#func-keyboard {
    left: 50% !important;
    right: auto !important;
    bottom: var(--safe-bottom) !important;
    width: min(100%, 720px);
    max-width: calc(100vw - var(--safe-left) - var(--safe-right));
    transform: translateX(-50%);
    padding: 0 max(4px, 1vw) !important;
}

#func-keyboard .kb-row {
    width: 100%;
    gap: clamp(2px, .6vw, 7px);
    margin-bottom: clamp(3px, .55vw, 6px);
}

#func-keyboard .kb-btn {
    min-width: 0;
    max-width: none;
    height: clamp(32px, 5.2vw, 48px);
    font-size: clamp(13px, 2vw, 18px);
}

#solid3d-controls {
    top: max(48px, calc(var(--safe-top) + 44px));
    left: max(8px, var(--safe-left));
    width: min(clamp(230px, 34vw, 370px), calc(100vw - 16px));
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.left-hand #solid3d-controls {
    left: auto;
    right: max(8px, var(--safe-right));
}

.solid3d-controls-head {
    flex-wrap: wrap;
    font-size: clamp(13px, 1.8vw, 16px);
}

.solid3d-dimension,
.solid3d-section-dimension {
    min-width: 0;
}

.user-modal {
    padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
}

.user-panel {
    width: min(480px, calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
    max-width: 100%;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
    overflow-y: auto;
    padding: clamp(16px, 3vw, 26px);
}

.member-payment-qr {
    width: min(220px, 58vw, 38dvh);
    height: min(220px, 58vw, 38dvh);
}

@media (orientation: landscape) and (max-height: 700px) {
    :root {
        --toolbar-size: clamp(34px, 6.5vh, 46px);
        --toolbar-rail: clamp(42px, 8vh, 56px);
    }
    #toolbar { max-height: calc(100dvh - 12px); }
    #bottom-bar { bottom: max(4px, var(--safe-bottom)); }
    #func-keyboard .kb-btn { height: clamp(28px, 7vh, 40px); }
    #solid3d-controls { max-height: calc(100dvh - 52px); }
}

@media (min-width: 601px) and (max-width: 1280px) {
    #toolbar { --toolbar-size: clamp(42px, 5.4vw, 52px); }
    body.top-toolbar #toolbar { max-width: calc(100vw - 16px); }
}

/* Compact tablet controls. Keep popovers outside the rail so opening a tool
   never hides its settings behind the toolbar's scroll box. */
:root {
    --toolbar-size: clamp(32px, 3.7vw, 42px);
    --toolbar-rail: clamp(38px, 4.5vw, 48px);
}

#toolbar {
    overflow: visible;
    gap: 2px;
    padding: 2px;
}

#toolbar > .tool-btn,
#toolbar > span > .tool-btn,
#toolbar > span > span > .tool-btn {
    width: var(--toolbar-size);
    min-width: var(--toolbar-size);
    height: var(--toolbar-size);
    min-height: var(--toolbar-size);
    padding: 1px;
    touch-action: manipulation;
}

#toolbar .tool-icon,
#toolbar .laser-tool-icon {
    width: var(--tool-icon-size, clamp(14px, 2.1vw, 19px));
    height: var(--tool-icon-size, clamp(14px, 2.1vw, 19px));
    flex-basis: var(--tool-icon-size, clamp(14px, 2.1vw, 19px));
}

#toolbar > .tool-btn::after,
#toolbar > span > .tool-btn::after,
#toolbar > span > span > .tool-btn::after {
    font-size: clamp(7px, 1vw, 9px);
}

#more-tool-menu,
#pen-panel,
#eraser-panel,
#fill-panel,
#radial-panel,
#custom-color-picker {
    z-index: 120;
}

body:not(.left-hand):not(.top-toolbar) #more-tool-menu { left: calc(var(--toolbar-rail) + 4px); }
body:not(.left-hand) #pen-panel,
body:not(.left-hand) #eraser-panel,
body:not(.left-hand) #fill-panel,
body:not(.left-hand) #radial-panel { left: calc(var(--toolbar-rail) + 4px); }
body:not(.left-hand) #custom-color-picker { left: calc(var(--toolbar-rail) + 22px); }
body.left-hand #more-tool-menu { right: calc(var(--toolbar-rail) + 4px); }
body.left-hand #pen-panel,
body.left-hand #eraser-panel,
body.left-hand #fill-panel,
body.left-hand #radial-panel { right: calc(var(--toolbar-rail) + 4px); }
body.left-hand #custom-color-picker { right: calc(var(--toolbar-rail) + 22px); left: auto; }
body:not(.left-hand) #td-menu { left: calc(var(--toolbar-rail) + 4px) !important; }
body.left-hand #td-menu { right: calc(var(--toolbar-rail) + 4px) !important; }

#toolbar-toggle,
#toolbar-toggle[hidden] {
    left: 0;
    width: var(--toolbar-toggle-width, clamp(19px, 2.6vw, 26px));
    height: var(--toolbar-toggle-height, clamp(32px, 5.4vh, 42px));
    border-left: 0;
    border-radius: 0 6px 6px 0;
    font-size: clamp(14px, 1.8vw, 18px);
}

body.left-hand #toolbar-toggle,
body.left-hand.tools-collapsed #toolbar-toggle {
    left: auto;
    right: 0;
    border-left: 1px solid var(--btn-border);
    border-right: 0;
    border-radius: 6px 0 0 6px;
}

#file-toolbar .file-btn[data-label] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: var(--file-button-width, clamp(42px, 6.2vw, 62px));
    height: var(--file-button-height, clamp(38px, 5.8vw, 54px));
    font-size: clamp(14px, 2vw, 19px);
    line-height: 1;
    touch-action: manipulation;
}

#file-toolbar .file-btn[data-label]::after {
    content: attr(data-label);
    display: block;
    color: var(--text);
    font: inherit;
    font-size: clamp(9px, 1.25vw, 12px);
    line-height: 1.1;
    white-space: nowrap;
}

@media (orientation: landscape) and (max-height: 700px) {
    :root {
        --toolbar-size: clamp(30px, 5.2vh, 38px);
        --toolbar-rail: clamp(36px, 7vh, 44px);
    }
    #toolbar-toggle { height: clamp(28px, 6.5vh, 36px); }
    #file-toolbar .file-btn[data-label] { height: clamp(34px, 8vh, 46px); }
}

/* A collapsed rail must be completely absent, including its overflowed
   labels and popovers. The edge arrow remains the only visible control. */
body:not(.left-hand):not(.top-toolbar).tools-collapsed #toolbar {
    transform: translateX(calc(-120% - 12px)) translateY(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.left-hand.tools-collapsed #toolbar {
    transform: translateX(calc(120% + 12px)) translateY(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.top-toolbar.tools-collapsed #toolbar {
    transform: translateX(-50%) translateY(calc(-120% - 12px));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* The 3D workspace has its own controls; keep the file actions out of its
   upper-left corner so they cannot cover the solid or its dimensions. */
body.solid3d-mode #file-toolbar {
    display: none !important;
}

/* Keep independent control surfaces in a stable stacking order. */
#file-toolbar { z-index: 140; }
#toolbar { z-index: 120; }
#toolbar-toggle { z-index: 130; }
#solid3d-controls { z-index: 150; }
#toolbar > span { isolation: isolate; }

body.top-toolbar #toolbar {
    top: max(48px, calc(var(--safe-top) + 44px));
    max-width: calc(var(--viewport-width, 100vw) - var(--safe-left) - var(--safe-right) - 12px);
}

body.top-toolbar #file-toolbar {
    max-width: calc(var(--viewport-width, 100vw) - var(--safe-left) - var(--safe-right) - 180px);
}