:root{color-scheme:dark;--ink:#f2f5f7;--sub:#aeb9c2;--muted:#8295a1;--panel:rgba(13,26,37,.94);--line:rgba(202,224,231,.11);--accent:#a3d5c8;--red:#ed9f9b;--aqua:#b1e1e7}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}body{background:#0b141c;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,.home-bar:focus-visible{outline:2px solid #d2f3e7;outline-offset:2px}
.scene{min-height:100dvh;display:flex;justify-content:center;align-items:center;flex-direction:column;position:relative;overflow:hidden;padding:25px 12px;background:radial-gradient(ellipse 50% 45% at 50% 32%,#304554 0%,#152533 52%,#0b141c 100%)}.scene:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,255,255,.015) 81px 82px);pointer-events:none}.ambient-title{position:absolute;left:max(3.5vw,32px);top:15%;color:#b5c4ca;letter-spacing:.16em}.ambient-title .eyebrow{font-size:10px;font-weight:600;opacity:.6}.ambient-title h1{font-weight:300;font-size:clamp(28px,4.5vw,58px);margin:18px 0;line-height:1.07;letter-spacing:.07em}.ambient-title h1 span{color:#acc5ca}.ambient-title .tiny-line{width:52px;height:1px;background:#79949b}.ambient-title p{font-size:11px;opacity:.56}.desktop-note{font-size:10px;letter-spacing:.18em;opacity:.45;margin:18px 0 0}
.phone{height:min(850px,calc(100dvh - 50px));aspect-ratio:395/835;background:#05090d;border:5px solid #1b262e;border-radius:48px;padding:4px;box-shadow:0 45px 115px rgba(0,0,0,.62),inset 0 0 0 1px #566874;position:relative;z-index:1;flex-shrink:0;max-width:100%}.phone-glass{border-radius:38px;position:relative;overflow:hidden;width:100%;height:100%;background:#0c202a}.wallpaper{position:absolute;inset:0;background:radial-gradient(circle at 72% 23%,rgba(168,211,219,.2),transparent 30%),linear-gradient(165deg,#152935 2%,#345462 45%,#202e3b 70%,#0c1821 100%);pointer-events:none}.wallpaper:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,14,22,.68),transparent 65%),repeating-linear-gradient(0deg,rgba(200,220,231,.018) 0px,transparent 2px,transparent 5px)}.moon{position:absolute;top:24%;left:64%;width:66px;height:66px;border-radius:50%;background:#dfedf0;filter:blur(.1px);opacity:.62;box-shadow:0 0 60px rgba(190,228,234,.35)}.mountain{position:absolute;bottom:30%;left:-12%;width:130%;height:32%;clip-path:polygon(0 83%,19% 51%,36% 76%,54% 24%,73% 65%,88% 35%,100% 61%,100% 100%,0 100%)}.mountain-far{background:linear-gradient(#7d9aa4,#263d4c);opacity:.45;transform:translateY(-28px)}.mountain-near{background:linear-gradient(#425c66,#0b1f2b);clip-path:polygon(0 54%,15% 42%,29% 63%,48% 18%,63% 55%,79% 28%,100% 70%,100% 100%,0 100%)}.shoreline{position:absolute;bottom:0;left:0;right:0;height:34%;background:linear-gradient(0deg,#081521 0%,#163341 100%);clip-path:polygon(0 18%,16% 23%,34% 12%,50% 25%,66% 19%,100% 29%,100% 100%,0 100%);opacity:.75}
.status{position:absolute;top:0;left:0;right:0;height:41px;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:6px 31px 0 29px;font-weight:700;font-size:13px;letter-spacing:.01em;pointer-events:none}.status-symbols svg{width:43px;height:17px}.notch{position:absolute;z-index:61;top:8px;left:50%;transform:translateX(-50%);width:92px;height:23px;border-radius:20px;background:#070e13}.screen-area{position:absolute;inset:0;z-index:10}.screen{position:absolute;inset:0;padding-top:42px;padding-bottom:24px;display:flex;flex-direction:column;animation:arrive .22s ease-out}.screen.panel{background:var(--panel);backdrop-filter:blur(25px)}@keyframes arrive{from{opacity:.6;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}.home-bar{height:4px;width:108px;position:absolute;z-index:70;left:50%;bottom:10px;transform:translateX(-50%);border-radius:6px;background:#e2edf0;opacity:.92;cursor:pointer}
.lock-view{padding:53px 26px 12px;align-items:center;text-align:center;justify-content:flex-start}.lock-top{margin-top:7px}.lock-date{font-size:14px;color:#e0e9ed;letter-spacing:.035em}.lock-clock{font-size:76px;letter-spacing:-.06em;font-weight:200;line-height:1.08;margin:4px 0 9px}.forensic-stamp{display:inline-flex;align-items:center;gap:7px;color:#d5ebed;font-size:10px;text-transform:uppercase;letter-spacing:.16em;padding:8px 12px;border:1px solid #a9c9d055;border-radius:40px;background:#14273270}.small-dot{height:5px;width:5px;border-radius:50%;background:#a8d2d7}.lock-bottom{margin-top:auto;width:100%}.unlock-label{color:#d3e1e5;font-size:13px;letter-spacing:.03em}.pin-dots{display:flex;justify-content:center;gap:17px;margin:19px auto 13px}.pin-dot{width:11px;height:11px;border:1.3px solid #e1eced;border-radius:50%;transition:.14s}.pin-dot.filled{background:#e1eced}.pin-message{height:20px;color:#ffc0b9;font-size:12px;margin:0 0 8px}.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);max-width:288px;margin:0 auto;gap:8px}.pin-key{height:54px;width:64px;justify-self:center;border:1px solid rgba(255,255,255,.13);background:rgba(245,254,255,.105);backdrop-filter:blur(9px);border-radius:50%;color:#f6fbfd;font-size:25px;font-weight:300;transition:background .13s}.pin-key:active{background:#cbe2e344}.pin-key.empty{visibility:hidden}.pin-key.action{font-size:19px;background:transparent;border-color:transparent}.lock-footer{font-size:10px;letter-spacing:.08em;color:#aabac4;margin:12px 0 4px}
.home-screen{padding:70px 26px 30px}.owner-card{margin-top:8px;border:1px solid rgba(226,243,241,.24);background:linear-gradient(135deg,rgba(18,43,54,.7),rgba(20,39,49,.27));backdrop-filter:blur(10px);padding:15px 17px;border-radius:15px;box-shadow:0 12px 25px rgba(0,0,0,.12)}.owner-card .mini-kicker{font-size:10px;letter-spacing:.16em;color:#b6d2d6}.owner-card h2{font-size:20px;font-weight:500;margin:8px 0 4px;letter-spacing:.02em}.owner-card p{font-size:12px;color:#a8c9ce;margin:0}.home-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 12px;margin-top:53px}.app-tile{border:0;background:transparent;color:#e8f3f4;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;text-align:center;padding:0}.tile-icon{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 9px 20px #07152088,inset 0 1px 0 #ffffff44}.tile-icon.messages{background:linear-gradient(150deg,#77b6a8,#326f70)}.tile-icon.calls{background:linear-gradient(150deg,#91c59d,#2d8069)}.tile-icon.contacts{background:linear-gradient(150deg,#9bb9d0,#536e92)}.tile-icon svg{width:29px;height:29px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}.home-caption{margin:auto 2px 7px;font-size:10px;letter-spacing:.12em;color:#bcd0d2;text-align:center;opacity:.68}
.app-header{display:flex;align-items:center;gap:8px;min-height:57px;padding:6px 17px;border-bottom:1px solid var(--line);flex-shrink:0}.icon-btn{flex:0 0 36px;width:36px;height:36px;color:#e3edf1;display:flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:10px}.icon-btn:active{background:#ffffff18}.icon-btn svg{height:21px;width:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.header-main{flex:1;min-width:0}.header-title{font-size:18px;font-weight:650;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-sub{font-size:11px;color:#8ea2ad;margin-top:2px}.search-field{display:flex;align-items:center;border:1px solid #304b57;background:#112936;margin:14px 18px 7px;padding:0 12px;border-radius:12px;gap:8px;height:43px}.search-field svg{width:16px;height:16px;stroke:#7f9fab;stroke-width:2;fill:none}.search-field input{background:none;border:0;outline:0;color:white;width:100%;font-size:14px}.search-field input::placeholder{color:#7894a0}.list-scroll{flex:1;overflow:auto;overscroll-behavior:contain}.group-title{font-size:10px;font-weight:700;color:#72949e;letter-spacing:.17em;margin:19px 18px 9px}.list-row{width:100%;border:0;color:var(--ink);background:transparent;text-align:left;display:flex;align-items:center;padding:12px 18px;gap:12px;min-height:75px;border-bottom:1px solid var(--line)}.list-row:active{background:#30404a88}.avatar{height:46px;width:46px;flex:0 0 46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:1px solid #ffffff24}.avatar.sand{background:linear-gradient(140deg,#97785e,#473b3e)}.avatar.rose{background:linear-gradient(140deg,#b47884,#664252)}.avatar.unknown{background:linear-gradient(140deg,#486875,#23414f)}.row-content{min-width:0;flex:1}.row-main{display:flex;gap:4px;justify-content:space-between;align-items:baseline}.row-name{font-size:15px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-time{flex-shrink:0;color:#77949f;font-size:11px}.row-preview{display:block;color:#9cafb8;font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}.note{padding:20px;color:#adc0c8;line-height:1.5;font-size:13px}.date-separator{align-self:center;font-size:11px;color:#afc1c7;border:1px solid #40525e;background:#1d3442a0;padding:5px 11px;margin:18px auto 9px;border-radius:50px}.chat-list{flex:1;overflow-y:auto;padding:0 13px 22px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain;background:linear-gradient(145deg,#0f253166,#101e2666)}.bubble{max-width:86%;border-radius:16px;padding:12px 13px 7px;line-height:1.44;font-size:13px;white-space:pre-line;overflow-wrap:anywhere;box-shadow:0 5px 12px #00000014}.bubble.out{align-self:flex-end;background:linear-gradient(120deg,#355d58,#254c4d);border-bottom-right-radius:5px}.bubble.in{align-self:flex-start;background:#263c48;border-bottom-left-radius:5px}.bubble-time{display:block;text-align:right;margin-top:4px;font-size:10px;opacity:.66}.chat-bottom{padding:11px 16px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;color:#91a7ae;font-size:12px}.readonly-input{background:#1d3340;border:1px solid #31505b;border-radius:22px;padding:12px 15px;flex:1}.readonly-mark{font-size:10px;color:#6f98a2;letter-spacing:.05em}.call-type{display:inline-flex;gap:7px;align-items:center;font-size:12px;color:var(--red)}.call-type svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}.pill-group{display:flex;align-self:center;border-radius:12px;background:#263d48;margin:11px auto 8px;padding:3px}.pill{border:0;border-radius:9px;background:transparent;color:#a3b9c2;font-size:12px;padding:8px 17px}.pill.active{background:#52717b;color:white}.call-detail{padding:25px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px}.call-detail .avatar{height:75px;width:75px;font-size:28px;margin:10px}.big-number{font-size:20px;font-weight:600;letter-spacing:.01em;margin:5px 0}.detail-row{width:100%;margin:18px 0 0;padding:16px;border-radius:12px;border:1px solid #36505d;background:#213541;text-align:left;font-size:13px;line-height:1.9;color:#c5d4d8}.detail-row strong{color:white}.muted{color:#8ca5af}.empty-state{padding:32px 26px;text-align:center;color:#8da8b2;font-size:13px}.accent{color:var(--aqua)}.close-screen{display:flex;justify-content:center;padding:10px;gap:10px;color:#a0b7c1;font-size:12px}
@media(max-width:760px){.scene{padding:0;background:#0b1721}.ambient-title,.desktop-note{display:none}.phone{width:100%;height:100dvh;max-width:none;aspect-ratio:auto;border:0;border-radius:0;padding:0;box-shadow:none}.phone-glass{border-radius:0}.notch{top:6px}.status{padding-top:7px}.screen{padding-top:max(42px,env(safe-area-inset-top));padding-bottom:max(22px,env(safe-area-inset-bottom))}.lock-clock{font-size:75px}.lock-view{padding-top:55px}.pin-key{height:min(54px,7.1dvh)}.home-bar{bottom:max(9px,env(safe-area-inset-bottom))}}
@media(max-height:710px){.lock-view{padding-top:37px}.lock-clock{font-size:60px}.pin-pad{gap:3px}.pin-key{height:45px;width:55px}.lock-bottom{margin-bottom:0}.pin-dots{margin:11px auto 6px}.home-apps{margin-top:30px}}
/* No programmatic sideways scroll when PIN buttons receive focus */
.phone-glass{overflow:clip}
.mountain{left:0;width:100%}

.chat-bottom > svg{flex:0 0 17px;width:17px;height:17px;stroke:#8aa9b5;fill:none;stroke-width:1.8} .access-form{display:flex;flex-direction:column;gap:12px;margin:24px auto 0;max-width:305px;width:100%}.access-input{padding:15px;border-radius:14px;border:1px solid #a9c9d066;background:#163240bd;outline:0;color:#fff;text-align:center;letter-spacing:.12em;font-size:15px}.access-input:focus{border-color:#acd9cd}.access-input::placeholder{color:#afc0c5;letter-spacing:0}.access-btn{padding:13px;border-radius:14px;background:#86bdaf;border:0;color:#112d32;font-weight:700}.access-form .pin-message{margin-top:2px} 

/* Фото и заметки */
.tile-icon.photos{background:linear-gradient(140deg,#8697b5,#4f607e)}
.tile-icon.notes{background:linear-gradient(140deg,#d5b17d,#a07947)}
.gallery-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px 6px 20px}
.photo-tile{aspect-ratio:1/1;border:0;padding:0;position:relative;overflow:hidden;background:#223743;color:white}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.photo-tile:active img{transform:scale(1.07)}
.photo-tile span{position:absolute;inset:auto 0 0;padding:12px 4px 5px;font-size:10px;line-height:1.2;background:linear-gradient(transparent,#071218dd);text-align:center}
.photo-view{overflow:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;min-height:0}
.photo-view img{width:100%;height:auto;max-height:69%;object-fit:contain}
.photo-meta{width:100%;padding:17px 22px;color:#a8bdc6;font-size:12px;line-height:1.5}
.photo-meta strong{display:block;color:#f1f5f6;font-size:15px;font-weight:600;margin-bottom:5px}
.note-row{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:17px 20px;background:transparent;color:#e8eef0;border:0;border-bottom:1px solid var(--line);width:100%;gap:5px}
.note-row:active{background:#2b434e}
.note-title{font-weight:650;font-size:15px}
.note-updated{font-size:11px;color:#8da6ae}
.note-preview{font-size:12px;color:#b5c4c9;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-page{overflow-y:auto;padding:24px 23px;flex:1;background:linear-gradient(155deg,#152e3b,#10212c);}
.note-page h2{font-size:23px;font-weight:650;line-height:1.2;margin:0 0 18px}
.note-body{font-size:15px;line-height:1.75;color:#e0e9eb;overflow-wrap:anywhere}
.readonly-caption{margin-top:45px;color:#829aa5;font-size:11px;border-top:1px solid var(--line);padding-top:13px}