.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}}