.phone-panel{--phone-bg:#f8fafc;--phone-card:#fff;--phone-line:#dfe8ed;--phone-text:#142238;--phone-muted:#69778a;--phone-accent:#009f88;--phone-soft:#e9faf6;color:var(--phone-text);background:var(--phone-bg);padding:22px 20px 48px;min-height:calc(100vh - 58px);font-family:inherit;box-sizing:border-box}
.phone-panel.dark{--phone-bg:#12171c;--phone-card:#1b2228;--phone-line:#2b373e;--phone-text:#f5f8fa;--phone-muted:#a0afbd;--phone-accent:#31c6ae;--phone-soft:#17332f}
.phone-panel *{box-sizing:border-box}.phone-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 19px;border:1px solid var(--phone-line);background:var(--phone-card);border-radius:18px;margin-bottom:18px;box-shadow:0 3px 14px #00000008}
.phone-head>div{display:flex;gap:12px;align-items:center}.phone-head h1{font-size:22px;line-height:1.2;margin:0 0 4px;font-weight:750}.phone-head p{margin:0;color:var(--phone-muted);font-size:14px}.phone-icon{width:44px;height:44px;border:1px solid #9fdfd3;color:var(--phone-accent);background:var(--phone-soft);border-radius:14px;display:grid;place-items:center;font-size:24px}
.phone-head nav{display:flex;gap:8px;flex-wrap:wrap}.phone-head nav a,.phone-card a{color:var(--phone-accent);text-decoration:none}.phone-head nav a{padding:8px 10px;border-radius:9px;border:1px solid var(--phone-line);background:var(--phone-card);font-size:13px;font-weight:650}.phone-head nav a:hover{background:var(--phone-soft)}
.phone-msg{display:none;padding:10px 14px;margin:0 0 16px;border-radius:11px;font-size:14px}.phone-msg.show{display:block}.phone-msg.good{background:#e7f8f0;color:#067555;border:1px solid #a7e0cb}.phone-msg.bad{background:#fff1f1;color:#a32929;border:1px solid #fac0c0}
.phone-card{background:var(--phone-card);border:1px solid var(--phone-line);border-radius:18px;padding:20px;box-shadow:0 3px 14px #00000008;min-width:0}.phone-card h2{font-size:18px;margin:0 0 13px}.phone-card h3{font-size:15px;margin:0 0 10px}.phone-card p{color:var(--phone-muted);line-height:1.5;font-size:14px}.phone-card label{display:block;color:var(--phone-text);font-weight:650;font-size:13px;margin:12px 0}.phone-card label input:not([type=checkbox]),.phone-card label textarea,.phone-card label select{display:block;width:100%;background:var(--phone-card);color:var(--phone-text);border:1px solid var(--phone-line);border-radius:10px;padding:9px 11px;margin-top:5px;font:inherit;font-weight:400;min-height:38px;outline:none}.phone-card label input:focus,.phone-card label textarea:focus,.phone-card label select:focus{border-color:var(--phone-accent);box-shadow:0 0 0 3px #009f8822}.phone-card textarea{resize:vertical}
.phone-btn{border:1px solid var(--phone-line);border-radius:10px;background:var(--phone-card);color:var(--phone-accent);padding:9px 14px;min-height:38px;font-weight:700;font-family:inherit;cursor:pointer}.phone-btn:hover:not(:disabled){background:var(--phone-soft)}.phone-btn.primary{background:var(--phone-accent);color:#fff;border-color:var(--phone-accent)}.phone-btn.primary:hover:not(:disabled){filter:brightness(.93)}.phone-btn:disabled{opacity:.48;cursor:not-allowed}.phone-buttons{display:flex;gap:9px;flex-wrap:wrap}.phone-info{font-size:12px!important;color:var(--phone-muted)!important;background:var(--phone-soft);padding:9px 11px;border-radius:9px}.phone-grid,.phone-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.phone-columns{align-items:start}.phone-toggle{display:flex!important;align-items:center;gap:8px}.phone-toggle input{accent-color:var(--phone-accent);width:17px;height:17px}.phone-card hr{border:0;border-top:1px solid var(--phone-line);margin:22px 0}
.phone-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:17px;align-items:start}.phone-sidebar{position:sticky;top:16px}.phone-sidebar>.phone-btn{width:100%;margin-bottom:9px}.phone-flow{display:block;width:100%;text-align:left;padding:10px 9px;background:var(--phone-card);border:1px solid var(--phone-line);border-radius:10px;color:var(--phone-text);margin:6px 0;cursor:pointer}.phone-flow:hover{border-color:var(--phone-accent);background:var(--phone-soft)}.phone-flow small{display:block;color:var(--phone-muted);font-size:11px;margin-top:3px}.phone-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.phone-row h2{margin:0}.phone-kicker{color:var(--phone-accent);font-weight:700;letter-spacing:.07em;font-size:10px}.phone-canvas{margin:14px 0;padding:20px;border:1px dashed var(--phone-line);border-radius:13px;background-image:radial-gradient(var(--phone-line) 1px,transparent 1px);background-size:18px 18px}.phone-node{max-width:650px;background:var(--phone-card);border:1px solid #a8ded4;border-top:3px solid var(--phone-accent);border-radius:12px;padding:14px;margin:0 auto 17px;box-shadow:0 8px 20px #0000000b}.phone-node h3{padding-bottom:8px;border-bottom:1px solid var(--phone-line)}.phone-node.secondary{max-width:530px;border-color:var(--phone-line);border-top-color:#637cf7}.phone-node.secondary h3 button{float:right;border:0;background:transparent;color:#e45252;font-size:22px;cursor:pointer}.phone-node.add{max-width:530px;border-style:dashed;border-top:1px dashed var(--phone-line)}.phone-checks{display:flex;gap:16px;flex-wrap:wrap}.phone-checks label{display:flex;align-items:center;gap:7px}.phone-checks input{accent-color:var(--phone-accent)}
.phone-table{overflow-x:auto;width:100%}.phone-table table{width:100%;border-collapse:collapse;min-width:720px;font-size:13px}.phone-table th,.phone-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--phone-line);white-space:nowrap}.phone-table th{color:var(--phone-muted);font-weight:700}.phone-table button{border:0;background:transparent;color:var(--phone-accent);cursor:pointer;font:inherit}
.phone-transcript{margin-top:16px}.phone-transcript p{padding:8px 0;border-bottom:1px solid var(--phone-line);white-space:normal}
@media(max-width:900px){.phone-head{align-items:flex-start;flex-direction:column}.phone-layout{grid-template-columns:1fr}.phone-sidebar{position:static}.phone-columns{grid-template-columns:1fr}}
@media(max-width:480px){.phone-panel{padding:12px 10px 30px}.phone-head{padding:12px}.phone-head h1{font-size:18px}.phone-head nav{width:100%}.phone-head nav a{font-size:11px;padding:7px}.phone-card{padding:14px}.phone-grid{grid-template-columns:1fr;gap:0}.phone-canvas{padding:10px}.phone-row>.phone-btn{margin-top:7px}}
.phone-canvas{position:relative;min-height:650px;padding:0;overflow:hidden}.phone-canvas-viewport{min-height:650px;max-height:78vh;overflow:auto;padding:58px 20px 24px}.phone-canvas-stage{min-width:530px;transform-origin:top center}.phone-canvas-tools{position:absolute;z-index:3;top:13px;left:13px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--phone-line);border-radius:10px;background:var(--phone-card);box-shadow:0 4px 14px #0000001a}.phone-canvas-tools button{width:34px;height:32px;padding:0;border:0;border-bottom:1px solid var(--phone-line);background:var(--phone-card);color:var(--phone-text);font:700 20px/1 inherit;cursor:pointer}.phone-canvas-tools button:hover{background:var(--phone-soft);color:var(--phone-accent)}.phone-canvas-tools button:last-of-type{font-size:18px}.phone-zoom-level{display:block;padding:6px 2px;text-align:center;color:var(--phone-muted);background:var(--phone-card);font-size:10px;font-weight:700}.phone-canvas .phone-node{position:relative}@media(max-width:480px){.phone-canvas{min-height:520px;padding:0}.phone-canvas-viewport{min-height:520px;max-height:70vh;padding:56px 12px 20px}.phone-canvas-stage{min-width:460px}.phone-canvas-tools{top:10px;left:10px}}
.phone-layout{grid-template-columns:minmax(170px,196px) minmax(0,1fr);gap:12px}.phone-sidebar{padding:14px}.phone-sidebar h2{margin-bottom:10px}.phone-editor{min-width:0;padding:18px}.phone-canvas{min-height:650px;padding:0;overflow:hidden}.phone-canvas-viewport{height:clamp(560px,calc(100vh - 330px),900px);min-height:560px;max-height:none;overflow:auto;padding:58px 20px 24px;cursor:grab;touch-action:none}.phone-canvas-viewport.is-panning{cursor:grabbing;user-select:none}.phone-canvas-stage{position:relative;width:1180px;min-width:1180px;min-height:960px;transform-origin:top left}.phone-canvas-stage>.phone-node{position:absolute;z-index:2;margin:0;max-width:none}.phone-canvas-stage>.phone-node-start{width:650px}.phone-canvas-stage>.phone-node-function,.phone-canvas-stage>.phone-node.add{width:430px}.phone-node-function.is-dragging,.phone-node-start.is-dragging{box-shadow:0 14px 30px #0000002b;cursor:grabbing}.phone-drag-handle{cursor:grab;user-select:none}.phone-drag-handle:active{cursor:grabbing}.phone-edge-layer{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.phone-edge-path,.phone-edge-preview{fill:none;stroke:var(--phone-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px #00000018)}.phone-edge-preview{stroke-dasharray:8 7;opacity:.8}.phone-port{position:absolute;z-index:5;width:14px;height:14px;border:2px solid var(--phone-card);border-radius:50%;background:var(--phone-accent);box-shadow:0 0 0 2px var(--phone-accent);cursor:crosshair;transition:transform .15s ease,box-shadow .15s ease}.phone-port:hover,.phone-port.is-connecting{transform:scale(1.3);box-shadow:0 0 0 3px var(--phone-accent),0 0 0 7px #009f8833}.phone-port-source{right:-8px;top:50%;margin-top:-7px}.phone-port-target{left:-8px;top:50%;margin-top:-7px;background:var(--phone-card)}.phone-canvas-tools{z-index:8}@media(max-width:900px){.phone-layout{grid-template-columns:180px minmax(0,1fr)}.phone-editor{padding:14px}}@media(max-width:650px){.phone-layout{grid-template-columns:1fr}.phone-sidebar{position:static}.phone-canvas-viewport{height:calc(100vh - 360px);min-height:480px;padding:56px 12px 20px}.phone-canvas-stage{width:980px;min-width:980px}.phone-canvas-stage>.phone-node-start{width:590px}.phone-canvas-stage>.phone-node-function,.phone-canvas-stage>.phone-node.add{width:390px}}@media(max-width:480px){.phone-canvas{min-height:520px}.phone-canvas-viewport{height:calc(100vh - 370px);min-height:450px;max-height:none}.phone-canvas-stage{min-height:900px}}