.pc-root { padding: 16px; background: #eef2f7; min-height: 100vh; box-sizing: border-box; }
.pc-app { font-family: "Segoe UI", Arial, sans-serif; color: #1f2933; background: #f5f7fa; border: 1px solid #d2d6dc; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18); display: flex; flex-direction: column; min-height: 70vh; }
.pc-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #0b7285; color: #ffffff; }
.pc-title { font-size: 16px; margin: 0; }
.pc-context-indicator { font-size: 12px; opacity: 0.9; }
.pc-indicator-active { font-weight: bold; }
.pc-command-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f0f4f8; border-bottom: 1px solid #d2d6dc; gap: 8px; flex-wrap: wrap; }
.pc-command-group { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-command-button, .pc-tool-button, .pc-secondary-button, .pc-tab-button, .pc-primary-button { border-radius: 4px; padding: 4px 8px; font-size: 12px; line-height: 1.2; cursor: pointer; transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease; font-weight: 600; }
.pc-command-button, .pc-tool-button, .pc-tab-button, .pc-secondary-button { border: 1px solid #0b7285; background: #ffffff; color: #0b7285; box-shadow: inset 0 -1px 0 rgba(11, 114, 133, 0.08); }
.pc-command-button:hover:not(:disabled), .pc-tool-button:hover:not(:disabled), .pc-tab-button:hover:not(:disabled), .pc-secondary-button:hover:not(:disabled) { background: #0b7285; color: #ffffff; box-shadow: 0 6px 12px rgba(11, 114, 133, 0.24); }
.pc-command-button:disabled, .pc-tool-button:disabled, .pc-tab-button:disabled, .pc-secondary-button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.pc-primary-button { border: 1px solid #0b7285; background: linear-gradient(135deg, #0f766e, #0b7285); color: #ffffff; box-shadow: 0 8px 16px rgba(11, 114, 133, 0.32); padding: 6px 10px; font-size: 12px; }
.pc-primary-button:hover { background: linear-gradient(135deg, #0b7285, #0891b2); box-shadow: 0 12px 20px rgba(8, 145, 178, 0.35); }
.pc-main { flex: 1; display: grid; grid-template-columns: 120px 1fr 220px 120px; gap: 12px; padding: 12px; align-items: stretch; transition: grid-template-columns 0.25s ease; }
.pc-compact .pc-main { grid-template-columns: 80px 1fr 220px 100px; }
.pc-tools, .pc-library { background: #ffffff; border: 1px solid #d2d6dc; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pc-editor { background: #ffffff; border: 1px solid #d2d6dc; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.pc-tool-button-active, .pc-tab-active { background: #0b7285; color: #ffffff; }
.pc-tool-button { display: flex; align-items: center; gap: 4px; justify-content: flex-start; }
.pc-tool-icon { font-size: 14px; line-height: 1; }
.pc-tool-label { font-size: 11px; }
.pc-compact .pc-tool-label { display: none; }
.pc-compact .pc-tool-button { justify-content: center; }
.pc-editor-canvas { flex: 1; min-height: 420px; border: 1px dashed #9aa5b1; position: relative; background: #ffffff; border-radius: 6px; overflow: hidden; }
.pc-editor-canvas canvas { width: 100%; height: 100%; display: block; }
/* Inline text editor overlay inside the canvas host */
.pc-text-input { position: absolute; z-index: 5; min-width: 80px; max-width: 280px; padding: 2px 4px; font: 12px/1.4 Arial, sans-serif; color: #0f172a; background: #fff; border: 1px solid #94a3b8; border-radius: 3px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15); }
.pc-text-input:focus { outline: 2px solid rgba(37, 99, 235, 0.35); }
.pc-preview { display: flex; flex-direction: column; gap: 4px; }
.pc-preview-content { min-height: 52px; border: 1px solid #d2d6dc; border-radius: 4px; padding: 6px; background: #fdfdfd; }
.pc-library-list { flex: 1; overflow-y: auto; border: 1px solid #d2d6dc; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 6px; background: #fdfdfd; }
.pc-library-item { border: 1px solid #d2d6dc; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.pc-favorite-toggle { align-self: flex-end; }
.pc-favorite-active { background: #f59f00; border-color: #f59f00; color: #ffffff; }
.pc-pointer { font-size: 11px; color: #616e7c; }
.pc-measurements { display: flex; flex-direction: column; gap: 6px; }
.pc-measurement-row { display: flex; gap: 6px; align-items: center; }
.pc-measurement-row input { width: 70px; }
.pc-search { padding: 4px 6px; border: 1px solid #d2d6dc; border-radius: 4px; font-size: 12px; }
.pc-empty { text-align: center; padding: 16px 0; color: #9aa5b1; }
.pc-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #f0f4f8; border-top: 1px solid #d2d6dc; font-size: 12px; color: #475569; }
.pc-status-badge { padding: 3px 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); }
.pc-status-badge-neutral { background: #e2e8f0; color: #1f2933; }
.pc-status-badge-info { background: #d0f0ff; color: #0b7285; }
.pc-status-badge-success { background: #d1fae5; color: #047857; }
.pc-status-badge-warning { background: #fee2e2; color: #b91c1c; }
.pc-status-text { flex: 1; margin-left: 8px; font-size: 13px; }
.pc-status-metrics { font-variant-numeric: tabular-nums; font-size: 12px; color: #334155; }
.pc-modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.45); z-index: 1050; }
.pc-hidden { display: none !important; }
.pc-modal-card { width: min(720px, 92%); background: #ffffff; border-radius: 12px; padding: 24px; border: 1px solid #dae2ed; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26); display: flex; flex-direction: column; gap: 16px; }
.pc-modal-title { margin: 0; font-size: 18px; color: #0f172a; }
.pc-modal-textarea { width: 100%; min-height: 200px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 12px; font-family: "Cascadia Code", "Courier New", monospace; font-size: 13px; color: #0f172a; background: #f8fafc; resize: vertical; box-sizing: border-box; }
.pc-modal-textarea-readonly { background: #f1f5f9; color: #0f172a; }
.pc-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.pc-modal-error { font-size: 12px; color: #b91c1c; min-height: 16px; opacity: 0; transition: opacity 0.18s ease; }
.pc-modal-error-active { opacity: 1; }
.pc-library-item { transition: border 0.18s ease, box-shadow 0.18s ease; }
.pc-library-item:hover { border-color: #0b7285; box-shadow: 0 8px 18px rgba(11, 114, 133, 0.18); }
body.pc-modal-active { overflow: hidden; }

/* Elements palette */
.pc-elements { background: #ffffff; border: 1px solid #d2d6dc; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pc-elements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pc-element-btn { border: 1px solid #0b7285; background: #fff; color: #0b7285; padding: 6px 0; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 12px; }
.pc-element-btn:hover { background: #e6f0f2; }
.pc-current-element { font-size: 11px; color: #616e7c; }

/* Properties panel */
.pc-properties { background: #ffffff; border: 1px solid #d2d6dc; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pc-prop-group { border: 1px dashed #e2e8f0; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.pc-prop-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; }
.pc-prop-row input, .pc-prop-row select { padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; }
.pc-prop-hint { font-size: 11px; color: #64748b; }