:root { --pi2-blue:#0a65ff; --pi2-ink:#17202a; --pi2-line:#dce3e7; }
.pi2 { color:var(--pi2-ink); font-family:Arial,Helvetica,sans-serif; }
.pi2-line { font:400 1.08rem/1.9 Georgia,"Times New Roman",serif; }
.pi2-token { display:inline-flex; align-items:center; margin:0 .12rem; padding:.08rem .38rem .13rem; border:0; border-radius:.38rem; background:#e9f2ff; color:#004ac7; box-shadow:inset 0 -1px 0 #c8ddff; font:700 1rem/1.4 Georgia,"Times New Roman",serif; cursor:pointer; }
.pi2-token:hover { background:#d8eaff; }
.pi2-token:focus-visible { outline:3px solid #a7c9ff; outline-offset:2px; }
.pi2-submit { background:var(--pi2-blue); color:#fff; font-family:Arial,Helvetica,sans-serif; }
.pi2-resource-token { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.22rem; margin:0 .16rem; padding:.12rem; border-radius:.48rem; background:#e9f2ff; box-shadow:inset 0 -1px 0 #c8ddff; vertical-align:middle; }
.pi2-resource-chip,.pi2-resource-change { min-height:1.75rem; border:0; border-radius:.34rem; cursor:pointer; }
.pi2-resource-chip { max-width:18rem; overflow:hidden; background:#fff; padding:.16rem .48rem; color:#004ac7; font:700 .82rem/1.25 Arial,Helvetica,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.pi2-resource-chip:hover { background:#f7fbff; }
.pi2-resource-chip:disabled { color:#8b969b; cursor:not-allowed; }
.pi2-resource-change { background:transparent; padding:.16rem .42rem; color:#35618e; font:800 .68rem/1 Arial,Helvetica,sans-serif; }
.pi2-resource-chip:focus-visible,.pi2-resource-change:focus-visible { outline:3px solid #a7c9ff; outline-offset:2px; }
.pi2-actions { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1.25rem; padding-top:1rem; border-top:1px solid #e8edef; }
.pi2-actions button,.pi2-actions a { display:inline-flex; align-items:center; min-height:2.45rem; padding:0 .9rem; border:1px solid var(--pi2-line); border-radius:.55rem; background:#fff; color:var(--pi2-ink); font-size:.75rem; font-weight:800; text-decoration:none; cursor:pointer; }
.pi2-actions a { background:#102027; color:#fff; border-color:#102027; }
.pi2-actions .pi2-edit { margin-left:auto; color:var(--pi2-blue); }
.pi2-dialog { width:min(28rem,calc(100% - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:0; border-radius:1rem; background:transparent; box-shadow:0 25px 80px #07151d40; }
.pi2-dialog::backdrop { background:#08182073; backdrop-filter:blur(4px); }
.pi2-dialog-card { position:relative; display:block; padding:2rem; background:#f8faf9; }
.pi2-dialog-card small { color:var(--pi2-blue); font-size:.62rem; font-weight:900; letter-spacing:.16em; }
.pi2-dialog-card h2 { margin:.5rem 0; font:500 2rem/1 Georgia,"Times New Roman",serif; }
.pi2-dialog-card > p { margin:0 0 1.4rem; color:#68757d; font-size:.78rem; line-height:1.55; }
.pi2-resource-dialog { width:min(34rem,calc(100% - 2rem)); }
.pi2-resource-card { max-height:calc(100vh - 2rem); overflow:auto; }
.pi2-resource-select-field { display:grid; gap:.55rem; color:#45545d; font-size:.7rem; font-weight:900; }
.pi2-resource-select-field select { width:100%; height:4rem; border:1px solid #cfd9de; border-radius:.72rem; background:#fff; padding:0 1rem; color:var(--pi2-ink); font-size:.95rem; font-weight:750; cursor:pointer; outline:none; }
.pi2-resource-select-field select:focus { border-color:var(--pi2-blue); box-shadow:0 0 0 4px #0a65ff1a; }
.pi2-resource-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.15rem; padding-top:1rem; border-top:1px solid #dfe5e8; }
.pi2-resource-actions > span { color:#718087; font-size:.66rem; }
.pi2-resource-actions > div { display:flex; align-items:center; gap:.55rem; }
.pi2-resource-actions > div > button:not(.pi2-save) { min-height:2.55rem; border:1px solid var(--pi2-line); border-radius:.55rem; background:#fff; padding:0 .9rem; color:var(--pi2-ink); font-size:.7rem; font-weight:800; cursor:pointer; }
.pi2-resource-actions .pi2-save { margin:0; }
.pi2-resource-preview { width:calc(100vw - 2rem); max-width:none; height:calc(100vh - 2rem); max-height:none; margin:auto; padding:0; border:0; border-radius:1rem; background:#fff; box-shadow:0 25px 90px #07151d55; }
.pi2-resource-preview::backdrop { background:#081820b8; backdrop-filter:blur(4px); }
.pi2-resource-preview-card { display:flex; flex-direction:column; height:100%; min-height:0; background:#eef3f4; }
.pi2-resource-preview-header { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1rem 1.15rem; border-bottom:1px solid #d6e0e4; background:#fff; }
.pi2-resource-preview-header > div:first-child { min-width:0; }
.pi2-resource-preview-header small { color:var(--pi2-blue); font-size:.54rem; font-weight:900; letter-spacing:.15em; }
.pi2-resource-preview-header h2 { margin:.15rem 0; overflow:hidden; color:var(--pi2-ink); font:600 1.25rem/1.1 Georgia,"Times New Roman",serif; text-overflow:ellipsis; white-space:nowrap; }
.pi2-resource-preview-header p { margin:0; overflow:hidden; color:#6c7b82; font:.62rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.pi2-resource-preview-header > div:last-child { display:flex; align-items:center; gap:.55rem; flex:0 0 auto; }
.pi2-resource-preview-header a,.pi2-resource-preview-header button { display:inline-flex; align-items:center; justify-content:center; min-height:2.55rem; border-radius:.58rem; padding:0 .85rem; font-size:.68rem; font-weight:900; text-decoration:none; cursor:pointer; }
.pi2-resource-preview-header a { border:1px solid #bdd4fa; background:#edf4ff; color:#004ac7; }
.pi2-resource-preview-header button { border:0; background:var(--pi2-blue); color:#fff; }
.pi2-resource-preview-note { padding:.5rem 1.15rem; border-bottom:1px solid #d6e0e4; background:#fff8e8; color:#765317; font-size:.62rem; line-height:1.4; }
.pi2-resource-preview iframe { flex:1; min-height:0; width:100%; border:0; background:#fff; }
.pi2-sync { margin:-.55rem 0 1.15rem; padding:.65rem .75rem; border:1px solid #d4e7df; border-radius:.55rem; background:#eef9f5; color:#426256; font-size:.68rem; line-height:1.45; }
.pi2-close { position:absolute; top:1rem; right:1rem; width:2.1rem; height:2.1rem; border:1px solid var(--pi2-line); border-radius:50%; background:#fff; color:#53616a; font-size:1.25rem; cursor:pointer; }
.pi2-field { display:grid; gap:.5rem; }
.pi2-field label { display:flex; align-items:center; gap:.7rem; min-height:3rem; padding:0 .9rem; border:1px solid var(--pi2-line); border-radius:.6rem; background:#fff; font-size:.84rem; font-weight:700; cursor:pointer; }
.pi2-field label:has(input:checked) { border-color:var(--pi2-blue); background:#edf4ff; color:#004ac7; }
.pi2-field textarea,.pi2-editor textarea { width:100%; resize:vertical; border:1px solid var(--pi2-line); border-radius:.65rem; padding:.8rem; color:var(--pi2-ink); font:inherit; }
.pi2-field.pi2-select-field { gap:.55rem; }
.pi2-select-field > span { color:#45545d; font-size:.68rem; font-weight:800; }
.pi2-select-field select { width:100%; height:3.45rem; border:1px solid #cfd9de; border-radius:.7rem; background:#fff; padding:0 .8rem; color:var(--pi2-ink); font-size:1rem; font-weight:700; cursor:pointer; outline:none; }
.pi2-select-field select:focus { border-color:var(--pi2-blue); box-shadow:0 0 0 4px #0a65ff1a; }
.pi2-select-field small { color:#7d898f; font-size:.65rem; }
.pi2-save { display:block; margin:1.3rem 0 0 auto; min-height:2.55rem; padding:0 1rem; border:0; border-radius:.55rem; background:var(--pi2-blue); color:#fff; font-size:.76rem; font-weight:800; cursor:pointer; }
.pi2-live-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid #dfe5e8; }
.pi2-live-actions > span { color:#7c888f; font-size:.62rem; }
.pi2-live-actions .pi2-save { margin:0; }
.pi2-editor { min-width:100%; }
.pi2-editor-tools { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.65rem; color:#7c888f; font-size:.65rem; }
.pi2-editor-tools button { border:1px solid #cfe0ff; border-radius:.5rem; background:#edf4ff; color:#004ac7; padding:.5rem .7rem; font-size:.68rem; font-weight:800; cursor:pointer; }
.pi2-editor-field-actions { display:flex; align-items:center; gap:.4rem; }
.pi2-editor-tools .pi2-edit-field { border-color:#d8e0e4; background:#fff; color:#43525b; }
.pi2-editor-tools .pi2-edit-field:hover { border-color:#b9d1fb; background:#f7faff; color:#004ac7; }
.pi2-editor-tools .pi2-editor-warning { color:#9a6511; font-weight:800; }
.pi2-builder-dialog { width:min(42rem,calc(100% - 2rem)); }
.pi2-builder-card { max-height:calc(100vh - 2rem); overflow-y:auto; }
.pi2-builder-top { display:grid; grid-template-columns:1fr 1.2fr; gap:.75rem; }
.pi2-builder-top label,.pi2-builder-dynamic label { display:grid; gap:.4rem; color:#45545d; font-size:.65rem; font-weight:800; }
.pi2-builder-top select,.pi2-builder-top input,.pi2-builder-dynamic input:not([type="radio"]):not([type="checkbox"]),.pi2-builder-dynamic textarea { width:100%; min-height:2.7rem; border:1px solid var(--pi2-line); border-radius:.55rem; background:#fff; padding:.55rem .7rem; color:var(--pi2-ink); font:inherit; outline:none; }
.pi2-builder-top input:focus,.pi2-builder-top select:focus,.pi2-builder-dynamic input:focus,.pi2-builder-dynamic textarea:focus { border-color:var(--pi2-blue); box-shadow:0 0 0 3px #0a65ff16; }
.pi2-builder-note { margin:.8rem 0; padding:.65rem .75rem; border:1px solid #d7e3ea; border-radius:.55rem; background:#f3f8fb; color:#4b6370; font-size:.64rem; }
.pi2-builder-note.pi2-duplicate { border-color:#d4e7df; background:#eef9f5; color:#426256; }
.pi2-builder-dynamic { display:grid; gap:.55rem; }
.pi2-builder-dynamic .pi2-endpoint-status { display:block; padding:.55rem .65rem; border-radius:.5rem; background:#f2f6f7; color:#52656d; font-size:.62rem; font-weight:750; }
.pi2-builder-dynamic .pi2-endpoint-status[data-method="email"] { background:#edf8f3; color:#27644e; }
.pi2-builder-dynamic .pi2-endpoint-status[data-method="post"] { background:#edf4ff; color:#245a9a; }
.pi2-builder-options { display:grid; gap:.45rem; }
.pi2-builder-options > div { display:grid; grid-template-columns:1.1rem 1fr 2rem; align-items:center; gap:.55rem; }
.pi2-builder-options > div:has(.pi2-builder-resource-fields) { align-items:start; }
.pi2-builder-resource-fields { display:grid; grid-template-columns:minmax(8rem,.7fr) minmax(12rem,1.3fr); gap:.45rem; }
.pi2-builder-options input[type="radio"],.pi2-builder-options input[type="checkbox"] { width:1rem; height:1rem; accent-color:var(--pi2-blue); }
.pi2-builder-options button { width:2rem; height:2rem; border:1px solid var(--pi2-line); border-radius:.45rem; background:#fff; color:#75838a; cursor:pointer; }
.pi2-builder-add { justify-self:start; border:0; background:transparent; color:var(--pi2-blue); padding:.35rem 0; font-size:.68rem; font-weight:800; cursor:pointer; }
.pi2-builder-number { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; }
.pi2-builder-output { display:grid; gap:.55rem; margin-top:1rem; padding:1rem; border-radius:.65rem; background:#102027; }
.pi2-builder-output span { color:#87a0ac; font-size:.55rem; font-weight:900; letter-spacing:.14em; }
.pi2-builder-output code { overflow-wrap:anywhere; color:#baf7df; font:.72rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.pi2-builder-actions { display:flex; justify-content:flex-end; gap:.55rem; margin-top:1rem; padding-top:1rem; border-top:1px solid #dfe5e8; }
.pi2-builder-actions > button:not(.pi2-save) { border:1px solid var(--pi2-line); border-radius:.55rem; background:#fff; padding:0 .9rem; color:var(--pi2-ink); font-size:.7rem; font-weight:800; cursor:pointer; }
.pi2-builder-actions .pi2-save { margin:0; }
@media(max-width:500px){.pi2-actions .pi2-edit{margin-left:0}.pi2-dialog-card{padding:1.4rem}.pi2-line{font-size:1rem}.pi2-builder-top{grid-template-columns:1fr}.pi2-builder-number{grid-template-columns:1fr 1fr}.pi2-editor-tools{align-items:flex-start;flex-direction:column}.pi2-editor-field-actions{flex-wrap:wrap}.pi2-resource-actions{align-items:stretch;flex-direction:column}.pi2-resource-actions>div{justify-content:flex-end}.pi2-resource-preview{width:100vw;height:100vh;border-radius:0}.pi2-resource-preview-header{align-items:stretch;flex-direction:column}.pi2-resource-preview-header>div:last-child{display:grid;grid-template-columns:1fr 1fr}.pi2-builder-resource-fields{grid-template-columns:1fr}.pi2-builder-options>div{grid-template-columns:1.1rem 1fr 2rem}}
@media(prefers-reduced-motion:reduce){.pi2-dialog::backdrop{backdrop-filter:none}}