:root{--bg: #f5f5f5;--panel-bg: #fafafa;--panel-border: #d0d0d0;--panel-text: #202020;--panel-hint: #666;--accent: #0066ff;--button-bg: #ffffff;--button-border: #c0c0c0;--button-hover: #e8e8e8;--button-active: #d0e8ff;--danger: #c33;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:var(--panel-text)}html,body,#app{margin:0;padding:0;height:100%;width:100%;background:var(--bg);overflow:hidden}button{font:inherit;background:var(--button-bg);border:1px solid var(--button-border);padding:4px 10px;border-radius:4px;cursor:pointer;color:inherit}button:hover:not(:disabled){background:var(--button-hover)}button.active{background:var(--button-active);border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}button.primary{font-weight:700;padding:8px}input[type=number],input[type=text],select{font:inherit;padding:2px 4px;border:1px solid var(--button-border);border-radius:3px;width:100%;box-sizing:border-box}label{-webkit-user-select:none;user-select:none}.app-root{display:flex;height:100%;width:100%}.canvas-area{flex:1 1 auto;position:relative;overflow:hidden;background:#e8e8e8}.right-panel{flex:0 0 340px;overflow-y:auto;padding:10px;background:var(--panel-bg);border-left:1px solid var(--panel-border);box-sizing:border-box}.status-bar{position:absolute;bottom:0;left:0;right:0;padding:3px 10px;font-size:11px;background:#ffffffd9;border-top:1px solid var(--panel-border);color:#444;pointer-events:none}.group{border:1px solid var(--panel-border);border-radius:4px;padding:8px;margin-bottom:10px;background:#fff}.group>h3{margin:-8px -8px 6px;padding:3px 8px;font-size:12px;font-weight:600;color:#555;background:#f0f0f0;border-bottom:1px solid var(--panel-border);border-radius:4px 4px 0 0}.row{display:flex;gap:6px}.row>*{flex:1}.group>h3.show-head{display:flex;align-items:center;justify-content:space-between}.lock-toggle{display:inline-flex;align-items:center;gap:3px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.lock-toggle input{margin:0}.thincam-grid{display:grid;grid-template-columns:56px 1fr 56px;gap:4px 6px;align-items:center}.thincam-head{font-size:11px;color:#888}.form-row{display:grid;grid-template-columns:1fr 1.4fr;gap:4px 6px;align-items:center;margin-bottom:4px}.form-row>label{justify-self:end;font-size:12px;color:#555}.palette-btn{display:flex;align-items:center;gap:6px;justify-content:flex-start;text-align:left;padding:4px 8px;margin-bottom:3px;width:100%}.palette-btn .swatch{width:14px;height:14px;border-radius:50%;border:1px solid #00000033;display:inline-block;flex:0 0 auto}.palette-btn .swatch.square{border-radius:2px}.hint{color:var(--panel-hint);font-size:11px;line-height:1.35;margin-top:6px}.hint>summary{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600}.hint-body{white-space:pre-wrap;margin-top:4px}.settings-dialog{position:absolute;top:60px;right:360px;background:#fff;border:1px solid var(--panel-border);border-radius:6px;box-shadow:0 4px 20px #00000026;padding:12px;min-width:260px;max-height:calc(100vh - 90px);overflow:auto;z-index:20}.settings-dialog h2{margin:0 0 8px;font-size:14px;display:flex;justify-content:space-between}.settings-dialog h2 button.close{background:transparent;border:none;padding:0 4px;font-weight:700}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:50}.modal-card{background:#fff;border:1px solid var(--panel-border, #ccc);border-radius:6px;box-shadow:0 8px 40px #0000004d;padding:16px 18px;width:360px;max-width:calc(100vw - 32px)}.modal-card h2{margin:0 0 8px;font-size:15px}.modal-card p{margin:6px 0;font-size:13px}.modal-card .modal-note{color:#777;font-size:11px}.modal-card input{padding:6px 8px;border:1px solid var(--panel-border, #ccc);border-radius:4px;font-size:14px}button.danger{background:#c0392b;color:#fff;border-color:#a93226}button.danger:disabled{opacity:.6}.ro-banner{position:absolute;top:8px;left:50%;transform:translate(-50%);background:#fff3cd;border:1px solid #e0c060;color:#6b5500;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600;box-shadow:0 2px 8px #00000026;z-index:15;pointer-events:none}.ro-note{background:#fff3cd;border:1px solid #e0c060;color:#6b5500;padding:4px 8px;border-radius:4px;font-size:11px;margin-bottom:8px}.nav-hint{background:#f2f4f7;border:1px solid #e2e6ea;color:#556;padding:4px 8px;border-radius:4px;font-size:11px;line-height:1.5;margin-bottom:8px}.nav-hint b{color:#333;font-weight:600}
