.door-lock svg{color:var(--good)}.tb-brand{display:inline-flex;align-items:center;justify-content:center;gap:6px}.tb-mark{width:auto;height:26px;flex:none;object-fit:contain}@media (min-width: 900px){.tb-mark{height:32px}}@media (max-width: 600px),(max-height: 900px){.door{min-height:100dvh;grid-template-rows:auto auto 1fr}.door-mark{padding:max(12px,env(safe-area-inset-top)) var(--pad) 8px}.door-mark img{height:clamp(72px,21dvh,200px)}.door-lang{top:max(10px,env(safe-area-inset-top))}.door-main{gap:8px;padding:10px var(--pad) 10px}.door-title{font-size:clamp(26px,4.4dvh,34px)}.door-sub{margin:-4px 0 0;font-size:clamp(15px,2.4dvh,19px)}.door-dots{margin:2px 0}.door-msg{min-height:20px;font-size:14px}.door-acts{grid-template-columns:1fr 1fr}.door-acts .btn{min-height:46px;font-size:16px}.door-lock{margin:0;font-size:12px}.door-pad{gap:10px;align-content:end;padding-top:12px;padding-bottom:max(16px,env(safe-area-inset-bottom))}.door-key{min-height:clamp(42px,7.2dvh,62px);font-size:26px}.door-setup{gap:8px}}@media (max-width: 600px){.door-pad{padding-inline:var(--pad);grid-template-columns:repeat(3,minmax(0,1fr))}.who span{display:none}.who{max-width:46%}.dock-nav{zoom:.8}}@media (max-width: 600px) and (max-height: 600px){.door-sub,.door-lock{display:none}.door-mark img{height:clamp(56px,13dvh,120px)}}@media (min-width: 601px) and (max-height: 900px){.door-pad{align-content:center}}@media (min-width: 900px){.door{grid-template-columns:minmax(0,1.15fr) minmax(420px,1fr);grid-template-rows:1fr auto;min-height:100dvh}.door-mark{grid-row:1 / -1;padding:0;background:#c9cacf url(../assets/brand/itop-hero-1600.webp) center / cover no-repeat}.door-mark img{display:none}.door-main{align-self:end;padding:48px 48px 16px}.door-pad{align-self:start;align-content:start;background:var(--canvas);padding:16px 48px 48px;grid-template-columns:repeat(3,minmax(0,120px))}.door-key{min-height:60px}}@media (min-width: 900px){.dock-nav{zoom:.86}}.online-now{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;margin:4px auto 10px;max-width:100%}.online-now[hidden]{display:none}.on-k{font:600 12px/1 var(--f-text);color:var(--muted);letter-spacing:.02em;text-transform:uppercase}.on-p{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--hairline);border-radius:var(--r-pill);background:var(--canvas);font:400 13px/1.2 var(--f-text);color:var(--ink);white-space:nowrap}.on-p b{font-weight:600}.on-p small{color:var(--muted);font-size:12px}.on-p i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--good);flex:none}.on-p.is-me{border-color:var(--ink)}@media (max-width: 600px){.online-now{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:0 2px;margin-top:-8px;justify-content:safe center}.online-now::-webkit-scrollbar{display:none}}html.door-open .online-now,html.wl-open .online-now{visibility:hidden}.on-a{position:relative;width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;background:linear-gradient(160deg,#f5f5f7,#d9dade);border:1px solid var(--hairline);overflow:visible;cursor:default}.on-a img{width:100%;height:100%;border-radius:50%;object-fit:cover}.on-a b{font:600 11px/1 var(--f-text);color:var(--ink)}.on-a i{position:absolute;inset-inline-end:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--good);border:2px solid var(--canvas)}.on-a.is-me{border-color:var(--ink)}.who-ph{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}.me-edit{display:grid;gap:10px;margin:14px 0;padding:14px;border:1px solid var(--hairline);border-radius:var(--r-card)}.me-edit h3{margin:0;font-size:15px}.me-row{display:flex;gap:14px;align-items:flex-start}.me-av{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(160deg,#f5f5f7,#d9dade);border:1px solid var(--hairline)}.me-av img{width:100%;height:100%;object-fit:cover}.me-av b{font:600 22px/1 var(--f-display)}.me-fields{display:grid;gap:6px;flex:1;min-width:0}.me-fields label{font-size:12px;color:var(--muted)}.me-btns{display:flex;gap:6px;flex-wrap:wrap}.me-code summary{cursor:pointer;font-size:14px;color:var(--blue-fill)}.me-msg{margin:0;font-size:13px;color:var(--good)}.me-msg.bad{color:var(--bad, #b00020)}
