/* Neutral tokens; apply verified TelecomSIP color/logo assets when available. */
:root { --c-bg:#f6f6f6; --c-surface:#fff; --c-text:#1d2730; --c-muted:#52606d; --c-border:#d9e0e5; --c-accent:#39444f; }
:root[data-theme="dark"] { --c-bg:#171c21; --c-surface:#242b31; --c-text:#f2f5f7; --c-muted:#b5c0c9; --c-border:#46515a; --c-accent:#c0cbd2; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --c-bg:#171c21; --c-surface:#242b31; --c-text:#f2f5f7; --c-muted:#b5c0c9; --c-border:#46515a; --c-accent:#c0cbd2; } }
html,body { min-height:100%; background:var(--c-bg); color:var(--c-text); font-family:Roboto,Arial,sans-serif; }
.connect-shell { max-width:1200px; min-height:100vh; margin:auto; display:flex; flex-direction:column; }
.connect-shell header { display:flex; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--c-border); font-size:1.2rem; }
.connect-shell header span,footer { color:var(--c-muted); font-size:.85rem; }
.connect-shell main { flex:1; }
.connect-card { width:min(340px,calc(100% - 48px)); margin:12vh auto; padding:28px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px; }
.connect-card h1,.connect-view h1 { margin-top:0; font-size:1.45rem; }
.connect-card form,.connect-form { display:grid; gap:9px; max-width:440px; }
.connect-card input,.connect-form input,.connect-form select { box-sizing:border-box; width:100%; padding:10px; border:1px solid var(--c-border); border-radius:6px; background:var(--c-surface); color:var(--c-text); }
.connect-card button,.connect-form button,.connect-shell nav button,#contact-list button { padding:10px 14px; border:1px solid var(--c-border); border-radius:6px; cursor:pointer; color:var(--c-text); background:var(--c-surface); }
.connect-card button,.connect-form button[type="submit"] { background:var(--c-accent); color:white; }
.connect-shell nav { display:flex; gap:8px; padding:12px 20px; flex-wrap:wrap; border-bottom:1px solid var(--c-border); }
.connect-shell nav button[aria-current="page"] { border-color:var(--c-accent); color:var(--c-accent); font-weight:700; }
.connect-view { padding:24px; }
#phone-view { padding:0; height:calc(100vh - 145px); min-height:550px; }
#Phone { height:100%; }
#Phone #SettingsMenu,#Phone #BtnFilter,#Phone #BtnAddSomeone,#Phone #TxtVoiceMessages,#Phone [id*="video"],#Phone [id*="Video"],#Phone [id*="chat"],#Phone [id*="Chat"],#Phone [id*="scratchpad"],#Phone [id*="Scratchpad"],#Phone [id*="shareScreen"],#Phone [id*="ShareScreen"] { display:none!important; }
#Phone [id*="present-src"],#Phone [id*="ShowCallStats"],#Phone [id*="HideCallStats"],#Phone [id*="ShowTimeline"],#Phone [id*="HideTimeline"],#Phone [id*="start-recording"],#Phone [id*="stop-recording"],#Phone [id*="btn-toggle-extra"] { display:none!important; }
#contact-list { margin-top:22px; display:grid; gap:10px; }
.connect-contact { display:flex; align-items:center; gap:8px; padding:12px; border:1px solid var(--c-border); border-radius:8px; background:var(--c-surface); }
.connect-contact strong { margin-right:auto; }
footer { padding:14px 24px; border-top:1px solid var(--c-border); }
[hidden] { display:none!important; }
@media(max-width:650px) { .connect-shell header { padding:14px; } .connect-shell nav { padding:8px; gap:4px; } .connect-shell nav button { flex:1 1 40%; } .connect-view { padding:16px; } #phone-view { height:calc(100vh - 190px); } .connect-contact { flex-wrap:wrap; } }