#smartMaplePanel {
    position: fixed;
    right: var(--smart-maple-right, calc(35vw + 12px));
    bottom: var(--smart-maple-bottom, max(52px, calc(env(safe-area-inset-bottom) + 42px)));
    z-index: 100;
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    width: 340px;
    border: 1px solid #709d90;
    border-radius: 12px;
    background: #fff;
    color: #173d32;
    box-shadow: 0 6px 22px #173d3226;
    font: 14px/1.5 Arial, sans-serif;
    text-align: left;
}
#smartMaplePanel:not([open]) { width: auto; }
#smartMaplePanel summary { padding: 10px 14px; cursor: pointer; font-weight: 600; }
#smartMaplePanel .smart-maple-body {
    padding: 0 14px 14px;
    max-height: min(70vh, 560px, var(--smart-maple-body-height, 560px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
#smartMaplePanel p { margin: 8px 0; }
#smartMaplePanel label { display: block; margin: 8px 0; }
#smartMaplePanel input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #aac4bc;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    color: #173d32;
}
#smartMaplePanel input[type="checkbox"] { width: 16px; height: 16px; vertical-align: middle; }
#smartMaplePanel button {
    padding: 8px 10px;
    margin: 4px 4px 4px 0;
    border: 1px solid #709d90;
    border-radius: 6px;
    background: #f1f8f5;
    color: #173d32;
    cursor: pointer;
    font: inherit;
    touch-action: manipulation;
}
#smartMaplePanel button:disabled { opacity: .5; cursor: default; }
#smartMaplePanel button:focus-visible, #smartMaplePanel summary:focus-visible {
    outline: 3px solid #16856a;
    outline-offset: 2px;
}
#smartMaplePanel #smartMapleConnect { background: #176f56; color: #fff; }
#smartMapleStatus { padding: 8px; border-radius: 6px; background: #f1f4f3; min-height: 42px; }
#smartMaplePanel[data-stage="ready"] #smartMapleStatus { background: #dcf6e7; }
#smartMaplePanel[data-stage="solving"] #smartMapleStatus { background: #deeeff; }
#smartMaplePanel .smart-maple-note { color: #4e6860; font-size: 12px; }
#smartMaplePanel .smart-maple-chrome-help { border: 1px solid #d6e4df; border-radius: 6px; padding: 0 8px 8px; font-size: 12px; }
#smartMaplePanel .smart-maple-chrome-help summary { padding: 8px 0; }
#smartMaplePanel .smart-maple-chrome-help ol { margin: 0; padding-left: 20px; }
#smartMaplePanel .smart-maple-chrome-help li { margin: 6px 0; }
#smartMaplePanel .smart-maple-chrome-help code { overflow-wrap: anywhere; }
#smartMapleDiagram svg { display: block; width: 170px; height: auto; margin: 10px auto; }
#smartMapleMoves { overflow-wrap: anywhere; font: 14px/1.5 monospace; }
#smartMapleBrowserHint { padding: 8px; background: #fff0ce; border-radius: 6px; }
@media (max-width: 480px) {
    #smartMaplePanel { max-width: calc(100vw - 24px); }
    #smartMaplePanel .smart-maple-body { max-height: min(60vh, var(--smart-maple-body-height, 560px)); }
}