:root {color-scheme:dark; --bg:#0b1019;--layer:#121b29;--layer2:#192435;--line:#2c3a4c;--fg:#eef4ff;--muted:#98a9bc;--cyan:#65d7e2;--blue:#4a85e9;--ok:#55dca2;--bad:#ff818e;--radius:15px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--fg);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #86cafa;outline-offset:2px}
.app{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse 54% 63% at 22% 35%,rgba(55,92,136,.13),transparent 75%),#0b1019}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px clamp(18px,3vw,44px);border-bottom:1px solid #253245;background:rgba(15,22,33,.9)}.brand{display:flex;align-items:center;gap:13px}.brand-symbol{font-size:25px;font-weight:850;letter-spacing:-2px}.brand-separator{width:1px;height:29px;background:#3a485b}.brand-title{font-weight:690;font-size:16px;letter-spacing:-.2px}.brand-sub{font-size:11px;color:#98a9bc;margin-top:3px}.top-status{display:flex;align-items:center;gap:8px;border:1px solid #2e3e50;border-radius:99px;padding:7px 11px;color:#becfe2;font-size:12px;white-space:nowrap}.status-dot{height:7px;width:7px;border-radius:50%;background:#55dca2;box-shadow:0 0 12px #55dca280}.top-actions{display:flex;align-items:center;gap:8px}.ghostbutton{border:1px solid #344256;color:#d6e7f7;background:#162132;padding:8px 12px;border-radius:9px;font-size:12px}.ghostbutton:hover{background:#223248}.topbar .resetbutton{margin-left:7px}
.workspace{display:grid;grid-template-columns:minmax(360px,1fr) minmax(375px,475px);min-height:0;flex:1}.preview-column{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;padding:24px 22px 24px}.preview-heading{align-self:stretch;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;max-width:780px;margin:0 auto 10px;width:100%}.eyebrow{font-size:10px;text-transform:uppercase;color:#68cfdc;font-weight:730;letter-spacing:2px}.preview-heading h1{font-size:clamp(18px,2vw,25px);line-height:1.2;letter-spacing:-.6px;margin:7px 0 5px;font-weight:750}.desc{font-size:12px;color:var(--muted);line-height:1.5;max-width:420px}.live-tag{display:flex;align-items:center;gap:7px;font-size:10px;white-space:nowrap;color:#88d7e1;border:1px solid #356276;border-radius:20px;padding:6px 9px;margin-top:9px}.preview-stage{width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:490px;max-height:calc(100vh - 179px);position:relative;overflow:hidden}.stage-glow{position:absolute;width:64%;height:68%;background:radial-gradient(ellipse,rgba(76,97,127,.12),transparent 70%);pointer-events:none}.station-frame{position:relative;height:min(100%,800px);aspect-ratio:495 / 1336;max-width:100%;container-type:inline-size;flex:none;filter:drop-shadow(0px 23px 27px rgba(0,0,0,.34));}
.station-img{height:100%;width:100%;display:block;object-fit:fill;user-select:none;pointer-events:none}.device-screen{position:absolute;left:22.83%;top:21.41%;width:54.74%;height:22.0%;background:#071121;overflow:hidden;border-radius:2px;font-size:clamp(8px,2.65cqw,14px);box-shadow:0 0 2px rgba(74,120,174,.25);display:flex;flex-direction:column}.screen-page{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.screen-directory{padding:3.7% 3.7% 3.2%;background:linear-gradient(155deg,#415775,#263c5a)}.name-list{display:grid;gap:2.2%;flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);align-content:stretch}.name-item{border:1px solid rgba(255,255,255,.13);border-radius:5px;color:#f4fbff;background:linear-gradient(135deg,#99bad8,#7498bd);font-weight:730;text-align:center;min-height:0;display:grid;place-content:center;line-height:1.05;font-size:.91em;text-overflow:ellipsis;overflow:hidden;padding:2px 3px;white-space:normal;overflow-wrap:anywhere;transition:filter .12s;letter-spacing:.01em;text-shadow:0 1px 2px #384c6077}.name-item.big{font-size:1.25em;background:linear-gradient(115deg,#7187aa,#5c7195)}.name-item.placeholder{color:#dff3ff;opacity:.69;font-size:1.06em;cursor:default;font-weight:700}.name-item:hover{filter:brightness(1.2)}.name-item:active{filter:brightness(1.35)}.screen-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:5.1%;height:19%;min-height:0;margin-top:3.8%}.screen-nav button{background:linear-gradient(140deg,#93b4d3,#7698bd);border:0;border-radius:5px;display:grid;place-items:center;color:white}.screen-nav button:hover{background:#b0c7df}.screen-nav button svg{height:50%;width:50%;max-width:26px}.screen-nav button:disabled{opacity:.54;cursor:default}.screen-nav button{position:relative}.screen-nav .pad-stars{position:absolute;bottom:2%;font-size:.65em;letter-spacing:1px;line-height:1}.screen-nav button:has(.pad-stars) svg{height:44%;transform:translateY(-11%)}.screen-number{font-size:11px;opacity:.76;font-weight:600;letter-spacing:1px}.screen-call{align-items:center;padding:5.5% 5%;background:radial-gradient(ellipse at 50% 34%,#253e6e 0%,#0a152b 68%,#050913 100%);color:#eff6ff;text-align:center}.call-top{font-size:.8em;text-transform:uppercase;letter-spacing:.17em;color:#aabddb;font-weight:800}.call-icon{width:23%;aspect-ratio:1;border-radius:50%;background:#3b5c8f;margin:8% auto 5%;display:grid;place-items:center;box-shadow:0 0 0 9px #264c7948;position:relative}.call-icon.ringing::before,.call-icon.ringing::after{content:"";position:absolute;border:1.5px solid #a4d1ff87;border-radius:50%;inset:-14%;animation:ripple 1.8s ease-out infinite}.call-icon.ringing::after{animation-delay:.9s}.call-icon svg{width:54%;height:54%;stroke:#e9f8ff}.call-party{font-weight:790;font-size:1.4em;line-height:1.08;overflow:hidden;max-width:100%;max-height:18%;word-break:break-word;display:flex;align-items:center;justify-content:center}.call-sub{margin-top:3%;font-size:.88em;color:#9fbee9}.call-actions{display:flex;gap:5%;width:100%;margin-top:auto;height:20%}.call-actions button{border:0;border-radius:5px;color:white;font-size:.9em;flex:1;display:flex;justify-content:center;align-items:center;gap:5px;font-weight:700}.call-actions svg{width:17%;height:40%}.hangup{background:#bd394f}.hangup:hover{background:#e54864}.opendoor{background:#177e75}.opendoor:hover{background:#21a896}

.screen-keypad{padding:4% 4.2% 5%;background:linear-gradient(140deg,#425a7a,#293c57);gap:5.3%}.keypad-top{display:flex;align-items:center;justify-content:center;gap:3%;height:17%;min-height:0;color:#283f57}.keypad-title{border:1px solid #b6d4ee;box-shadow:inset 0 1px 3px #fff5;background:linear-gradient(105deg,#d4f2fd,#a5cde8);height:100%;display:grid;place-content:center;text-align:center;flex:1;border-radius:5px;color:#42617d;font-size:1.15em;font-weight:480;overflow:hidden}.keypad-person{width:19%;height:100%;border:1px solid #b7d5ed;border-radius:5px;background:linear-gradient(140deg,#afd5ee,#81aaca);display:grid;place-items:center}.keypad-person svg{width:75%;height:75%;stroke:#e2f8ff;stroke-width:1.5}.key-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:2.2%;flex:1;min-height:0}.key-grid button{color:#e2faff;background:linear-gradient(140deg,#91b5d5,#7297bb);border:1px solid #b2cbe2;border-radius:5px;font-size:2.0em;font-weight:400;min-height:0;line-height:1;display:grid;place-items:center;text-shadow:0 1px 2px #27496644}.key-grid button:hover{background:#b7d9ed}.key-grid .key-cancel{color:#f09c7b;font-size:2.25em}.key-grid .key-confirm{color:#19e6c1;font-size:2.45em}.key-grid .key-confirm svg{height:72%;width:52%;stroke:currentColor;stroke-width:2}.keypad-feedback{position:absolute;left:5%;right:5%;bottom:2%;pointer-events:none;text-align:center;color:#f7fbff;background:#203451ec;border-radius:5px;padding:5px;font-size:.8em}.keypad-feedback.error{color:#ffb4a8}.keypad-feedback.success{color:#8cfbe0}.screen-clock{background:linear-gradient(110deg,#7d9aba,#4b78a9);color:#dff5ff;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;cursor:pointer}.clock-globe{position:absolute;right:3%;top:3%;width:13%;height:13%;stroke:#e0faff;stroke-width:1.5}.clock-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8em}.clock-time{font-size:3.3em;font-weight:360;line-height:1;font-variant-numeric:tabular-nums}.clock-day{font-size:1.3em;font-weight:380}.clock-date{font-size:1.1em;font-weight:400}.clock-option-preview{width:100%;aspect-ratio:1.5;display:grid;align-content:center;gap:3px;text-align:center;background:linear-gradient(120deg,#7a9abf,#446f9d);border-radius:6px;color:#edfbff;font-size:15px}.clock-option-preview span{font-size:10px}.screen-keypad .key-grid button:focus-visible{outline:2px solid white;outline-offset:-1px}
.screen-saver{display:flex;align-items:center;justify-content:center;background:#020307;cursor:pointer;position:relative}.screen-saver img{width:100%;height:100%;object-fit:contain}.saver-hint{position:absolute;bottom:4%;left:0;right:0;margin:auto;text-align:center;background:#03060f99;color:white;font-size:.75em;padding:4px}.screen-success{align-items:center;justify-content:center;text-align:center;gap:6%;background:radial-gradient(circle at center,#0c6b53,#092b2a 70%,#071a21);padding:7%;}.screen-success svg{width:29%;height:auto;stroke:#8dffda}.screen-success strong{font-size:1.3em}.screen-success span{font-size:.9em;color:#c5f8e5}.screen-success button{background:#288d77;border:0;padding:7% 12%;font-weight:730;border-radius:5px;color:white;font-size:1em}
@keyframes ripple{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.below-preview{max-width:750px;align-self:stretch;width:100%;margin:7px auto 0;display:flex;align-items:center;justify-content:center;gap:9px;color:#94a9bd;font-size:12px;text-align:center}.below-preview svg{width:16px;flex:none;stroke:#6ad3dd}.fast-actions{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:12px}.fast-actions button{background:#19293b;border:1px solid #3a536a;border-radius:7px;padding:8px 11px;color:#dbe9fa;font-size:11px}.fast-actions button:hover{background:#29435c}
.control-panel{min-width:0;border-left:1px solid #29364a;background:rgba(18,26,39,.92);display:flex;flex-direction:column;max-height:calc(100vh - 69px);overflow:hidden}.panel-head{padding:22px 26px 0;border-bottom:1px solid #2c394c}.panel-head h2{font-size:18px;margin:5px 0 16px;letter-spacing:-.4px}.tabbar{display:flex;gap:3px;overflow:auto}.tabbar button{white-space:nowrap;background:transparent;border:0;color:#8fa2b7;padding:11px 13px;font-size:12px;border-bottom:2px solid transparent}.tabbar button.active{color:#c0f5ff;border-color:#69d8e4;font-weight:730}.panel-body{padding:23px 26px 40px;overflow:auto;scrollbar-color:#3b4d63 transparent;flex:1}.section-title{font-size:12px;font-weight:760;margin:0 0 10px}.help{color:#91a6bd;font-size:12px;line-height:1.55;margin:3px 0 14px}.field{margin:0 0 16px}.field label{display:block;font-size:12px;color:#becedf;margin-bottom:7px;font-weight:630}.field input[type="text"],.field input[type="password"],.field input[type="number"],.field select{width:100%;background:#0e1929;border:1px solid #354558;border-radius:8px;min-height:37px;padding:8px 10px;color:#ecf3ff;font-size:13px}.field select{cursor:pointer}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.counter{display:flex;gap:7px;align-items:center}.counter button{background:#26384e;color:#e4f5ff;border:1px solid #43586e;border-radius:7px;height:38px;width:36px;font-weight:770;font-size:18px;flex:none}.counter input{min-width:0;text-align:center}.secondary-button{width:100%;padding:10px;background:#223b52;color:#d5f5ff;border:1px solid #3c6073;border-radius:9px;font-weight:690;font-size:12px}.secondary-button:hover{background:#2b5368}.inline-note{background:#152738;border:1px solid #304658;color:#aecbd9;padding:10px 12px;border-radius:8px;font-size:11px;line-height:1.6;margin:12px 0 18px}.entry-table{display:flex;flex-direction:column;gap:7px}.entry-row{display:grid;grid-template-columns:24px minmax(0,1fr) 72px;gap:7px;align-items:center}.entry-index{font-size:10px;color:#83a1b7;text-align:center}.entry-row input{min-width:0;width:100%;border:1px solid #34475f;background:#0b1725;color:#f3f8ff;border-radius:7px;padding:9px 8px;font-size:12px}.table-titles{display:grid;grid-template-columns:24px minmax(0,1fr) 72px;gap:7px;color:#87a1b7;font-size:10px;font-weight:690;text-transform:uppercase;letter-spacing:.5px;margin:17px 0 9px}.tiny-foot{font-size:11px;color:#7f97ad;margin-top:13px;line-height:1.5}.saver-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.saver-option{padding:7px;display:flex;flex-direction:column;gap:8px;border:1px solid #35465b;border-radius:10px;background:#142134;text-align:left;color:#d6e4f5;font-size:11px;cursor:pointer}.saver-option.selected{border-color:#68dbe4;box-shadow:inset 0 0 0 1px #68dbe444}.saver-option img{width:100%;aspect-ratio:1.5;object-fit:contain;background:#060b13;border-radius:6px}.saver-option span{padding:0 3px 2px}.switch-row{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:12px;color:#dfecfa;margin:16px 0}.switch-row input{width:17px;height:17px;accent-color:#45b6cc}.divider{height:1px;background:#2b394d;margin:19px 0}.range{width:100%;accent-color:#57c7d7}.keypad-example{background:#101d2e;border:1px solid #36495e;padding:13px;border-radius:9px;font-size:12px;color:#b9c8d9;line-height:1.6}.keypad-example code{color:#ccf4fe;font-size:13px}.footer{padding:9px 24px;border-top:1px solid #253347;display:flex;align-items:center;justify-content:space-between;color:#6f849a;font-size:10px;gap:10px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:10px 16px;border:1px solid #3f6c7a;border-radius:9px;background:#172c3b;color:#dbf9ff;box-shadow:0 15px 30px #0008;z-index:99;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.hidden{display:none!important}
.zoom-overlay{position:fixed;inset:0;z-index:90;background:rgba(2,7,14,.87);backdrop-filter:blur(9px);display:flex;justify-content:center;align-items:center;padding:18px}.zoom-card{width:min(100%,480px);background:#111d2c;border:1px solid #40536b;border-radius:16px;box-shadow:0 22px 90px #000b;padding:17px 20px 21px}.zoom-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:14px}.zoom-heading{font-size:15px;font-weight:720}.zoom-sub{font-size:11px;color:#93afc6;margin-top:4px}.zoom-close{border:1px solid #476077;background:#23374d;color:#fff;padding:8px 12px;border-radius:8px}.zoom-holder{width:100%;display:flex;align-items:center;justify-content:center}.device-screen.zoomed{position:relative;top:auto;left:auto;width:min(100%,352px);height:auto;aspect-ratio:271/294;font-size:16px;border:5px solid #02060e;border-radius:8px;box-shadow:0 0 0 1px #46617a,0 16px 40px #0006}.zoom-instruction{margin:15px 0 0;color:#96a9bd;font-size:11px;text-align:center}.fast-actions .zoom-action{border-color:#58b5c1;background:#1c4455;color:#e4faff;font-weight:730}@media(max-width:420px){.device-screen.zoomed{width:min(100%,300px);font-size:14px}.zoom-card{padding:15px}}
@media(max-width:920px){.workspace{grid-template-columns:minmax(0,1fr) 380px}.preview-column{padding:17px 12px}.control-panel{max-height:calc(100vh - 69px)}.panel-body{padding:18px}.panel-head{padding:20px 18px 0}}@media(max-width:760px){.topbar{padding:13px 16px}.top-status{display:none}.brand-title{font-size:13px}.workspace{display:flex;flex-direction:column}.preview-column{min-height:630px;padding:20px 15px 22px}.preview-stage{height:600px;min-height:420px;max-height:630px;flex:initial}.station-frame{height:100%}.control-panel{border-left:0;border-top:1px solid #2b394b;max-height:none}.panel-body{overflow:visible}.footer{flex-wrap:wrap}.topbar .ghostbutton{padding:7px 8px}.preview-heading h1{font-size:19px}}@media(max-width:390px){.station-frame{height:520px}.preview-column{min-height:0}.preview-stage{height:520px}.brand-sub{display:none}.topbar .resetbutton{display:none}}