:root {
  color: #102a43;
  background: #f5f7f9;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #102a43;
  --muted: #62758a;
  --line: #dde5ec;
  --soft: #eef3f6;
  --paper: #ffffff;
  --navy: #102a43;
  --green: #16876b;
  --green-dark: #0d6a54;
  --blue: #2474c6;
  --amber: #b26a16;
  --danger: #a63c41;
  --shadow: 0 24px 64px rgba(16, 42, 67, .11);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f5f7f9; }
body { margin: 0; min-height: 100vh; color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(22, 135, 107, .32);
  outline-offset: 3px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.02em;
}
.brand-mark {
  position: relative;
  width: 29px;
  height: 32px;
  border: 2px solid currentColor;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0 5px 0 4px;
  background: inherit;
}
.brand-mark > span {
  width: 11px;
  height: 13px;
  border-radius: 3px;
  background: var(--green);
  box-shadow: inset 0 -4px rgba(255,255,255,.28);
}

.auth-body {
  background: #eef2f5;
  display: grid;
  place-items: center;
  padding: 28px;
}
.auth-shell {
  width: min(1120px, 100%);
  min-height: 700px;
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(500px, 1.08fr);
  overflow: hidden;
  border: 1px solid rgba(16,42,67,.08);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 45px 48px;
  color: #f7fbfd;
  background: var(--navy);
}
.auth-brand::before,
.auth-brand::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}
.auth-brand::before { width: 460px; height: 460px; right: -315px; top: 110px; }
.auth-brand::after { width: 270px; height: 270px; right: -130px; top: 205px; }
.auth-brand .wordmark { z-index: 1; color: #fff; }
.auth-brand .brand-mark { background: var(--navy); }
.auth-intro { position: relative; z-index: 1; margin-top: 70px; }
.eyebrow, .step-label, .breadcrumb {
  margin: 0 0 13px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow { color: #78d6bb; }
.auth-intro h1 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1.13;
  letter-spacing: -.045em;
  font-weight: 720;
}
.auth-intro > p:last-child {
  max-width: 360px;
  margin: 25px 0 0;
  color: #c6d4df;
  font-size: 15px;
  line-height: 1.85;
}
.trust-note, .login-help {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c6d4df;
  font-size: 13px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #40c39a;
  box-shadow: 0 0 0 5px rgba(64,195,154,.13);
}
.auth-panel {
  position: relative;
  padding: 56px clamp(48px, 7vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-indicator {
  position: absolute;
  right: 43px;
  top: 38px;
  display: flex;
  gap: 7px;
}
.step-indicator span { width: 22px; height: 3px; border-radius: 2px; background: #dbe4eb; }
.step-indicator .active { width: 32px; background: var(--green); }
.form-header { margin-bottom: 26px; }
.step-label { color: var(--green); }
.form-header h1, .form-header h2 {
  margin: 0;
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.form-header > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.auth-form { display: grid; gap: 18px; }
.auth-form label { display: grid; gap: 8px; color: #334e68; font-size: 13px; font-weight: 650; }
.auth-form label > small { margin-top: -2px; color: #8393a4; font-size: 11px; font-weight: 450; }
.auth-form input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  color: var(--ink);
  border: 1px solid #cad5df;
  border-radius: 10px;
  outline: none;
  background: #fff;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.auth-form input::placeholder { color: #a1afbc; }
.auth-form input:hover { border-color: #9dafbf; }
.auth-form input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(22,135,107,.11); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.primary-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 20px;
  border-radius: 10px;
  color: #fff;
  background: var(--green);
  box-shadow: 0 7px 18px rgba(22,135,107,.20);
  cursor: pointer;
  font-weight: 700;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.primary-button:hover { background: var(--green-dark); box-shadow: 0 9px 22px rgba(22,135,107,.26); transform: translateY(-1px); }
.primary-button:focus-visible { outline: 3px solid rgba(22,135,107,.25); outline-offset: 3px; }
.primary-button:disabled { opacity: .58; cursor: default; transform: none; box-shadow: none; }
.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #f1cbcd;
  border-radius: 10px;
  color: #8d3035;
  background: #fff6f6;
  font-size: 13px;
}
.alert span { display: grid; place-items: center; flex: 0 0 19px; height: 19px; border-radius: 50%; color: #fff; background: var(--danger); font-weight: 800; }
.alert p { margin: 1px 0 0; }
.privacy-note { margin: 20px 0 0; color: #8998a6; text-align: center; font-size: 11px; }

.login-shell { width: min(440px, 100%); }
.login-card {
  padding: 48px 46px;
  border: 1px solid rgba(16,42,67,.08);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.wordmark.centered { display: flex; justify-content: center; margin-bottom: 46px; }
.centered-copy { text-align: center; }
.centered-copy h1 { font-size: 29px; }
.login-card .auth-form { margin-top: 28px; }
.login-help { justify-content: center; margin-top: 25px; color: #7c8c9a; font-size: 11px; }
.login-help .status-dot { width: 6px; height: 6px; box-shadow: none; }
.auth-footer { margin-top: 23px; color: #7b8996; text-align: center; font-size: 12px; }

.app-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); background: #f4f6f8; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 20px 22px;
  border-right: 1px solid #e1e7ec;
  background: #fff;
}
.sidebar > .wordmark { margin: 0 11px 34px; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 13px;
  border-radius: 9px;
  color: #536779;
  font-size: 13px;
  font-weight: 580;
}
.nav-item.active { color: #0f725a; background: #e9f5f1; font-weight: 700; }
.nav-item:not(.disabled):hover { background: #f0f4f6; }
.nav-item.disabled { opacity: .58; cursor: default; }
.nav-icon { width: 20px; color: #7790a3; text-align: center; font-size: 17px; }
.active .nav-icon { color: var(--green); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 4px; }
.profile-summary {
  width: 100%;
  margin-top: 13px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  color: var(--ink);
  background: #f4f6f8;
  text-align: left;
}
.profile-summary strong, .profile-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary strong { font-size: 12px; }
.profile-summary small { margin-top: 2px; color: #7d8e9e; font-size: 10px; }
.logout-button { width: 100%; padding: 8px; color: #758797; background: transparent; cursor: pointer; font-size: 11px; }
.logout-button:hover { color: #8d3035; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #315a78; font-size: 13px; font-weight: 760; }
.content { min-width: 0; padding: 35px clamp(30px, 5vw, 70px) 60px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 31px; }
.breadcrumb { margin-bottom: 7px; color: #7b8d9d; }
.topbar h1 { margin: 0; font-size: clamp(26px, 3vw, 35px); letter-spacing: -.04em; }
.system-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #dce6e2; border-radius: 999px; color: #426b5f; background: #f7fbf9; font-size: 11px; font-weight: 650; }
.system-pill i { width: 7px; height: 7px; border-radius: 50%; background: #2aa57e; box-shadow: 0 0 0 3px rgba(42,165,126,.12); }
.welcome-card {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
  padding: 36px 42px;
  border-radius: 17px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 16px 38px rgba(16,42,67,.14);
}
.welcome-card h2 { margin: 13px 0 10px; font-size: 29px; letter-spacing: -.035em; }
.welcome-card p { max-width: 490px; margin: 0 0 22px; color: #c5d2dc; font-size: 13px; line-height: 1.7; }
.welcome-card .primary-button { background: #fff; color: var(--navy); }
.welcome-card small { display: block; margin-top: 10px; color: #91a6b7; font-size: 10px; }
.soft-badge { display: inline-flex; padding: 5px 9px; border: 1px solid rgba(111,214,184,.24); border-radius: 999px; color: #8ce0c5; background: rgba(22,135,107,.17); font-size: 10px; font-weight: 760; letter-spacing: .08em; }
.primary-button.compact { min-height: 39px; padding: 0 16px; font-size: 12px; }
.device-illustration { position: relative; height: 190px; }
.sim-card {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  width: 123px; height: 154px;
  transform: translate(-50%, -48%) rotate(7deg);
  display: grid; place-items: center;
  border-radius: 15px 15px 15px 34px;
  color: #143b50;
  background: #e7f3ef;
  box-shadow: 0 24px 40px rgba(0,0,0,.25);
}
.sim-card::after { content: ""; position: absolute; left: 25px; bottom: 28px; width: 54px; height: 43px; border: 1px solid #8fb8a9; border-radius: 8px; background: #bedbce; }
.sim-card span { position: absolute; z-index: 2; left: 37px; bottom: 36px; width: 30px; height: 27px; border: solid #719c8d; border-width: 0 1px; }
.sim-card b { position: absolute; top: 27px; left: 26px; font-size: 13px; letter-spacing: .12em; }
.signal { position: absolute; z-index: 3; left: calc(50% + 58px); top: 8px; display: flex; align-items: flex-end; gap: 5px; height: 36px; }
.signal i { width: 5px; border-radius: 4px; background: #6dd7b7; }
.signal i:nth-child(1) { height: 10px; }.signal i:nth-child(2) { height: 20px; }.signal i:nth-child(3) { height: 31px; }
.connection-line { position: absolute; left: 20%; right: 8%; top: 55%; height: 1px; background: linear-gradient(90deg, transparent, rgba(112,212,183,.52), transparent); transform: rotate(-8deg); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 18px 0; }
.metric-grid article { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 19px; border: 1px solid #e1e7ec; border-radius: 13px; background: #fff; }
.metric-icon { flex: 0 0 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; font-size: 15px; font-weight: 800; }
.metric-icon.blue { color: var(--blue); background: #edf5fc; }.metric-icon.green { color: var(--green); background: #eaf6f2; }.metric-icon.amber { color: var(--amber); background: #fdf3e6; }
.metric-grid small { display: block; color: #7a8c9d; font-size: 10px; }
.metric-grid strong { display: block; margin: 2px 0 1px; font-size: 25px; letter-spacing: -.03em; }
.metric-grid strong.word-value { font-size: 18px; }
.metric-grid p { margin: 0; color: #91a0ad; font-size: 10px; }
.activity-card { min-height: 260px; padding: 24px 27px; border: 1px solid #e1e7ec; border-radius: 14px; background: #fff; }
.activity-card header h2 { margin: 0; font-size: 16px; }.activity-card header p { margin: 5px 0 0; color: #8494a2; font-size: 11px; }
.empty-state { min-height: 185px; display: grid; place-items: center; align-content: center; color: #7f909f; text-align: center; }
.empty-state span { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 50%; color: var(--green); background: #eaf6f2; font-weight: 800; }
.empty-state h3 { margin: 0; color: #526b7d; font-size: 13px; }.empty-state p { margin: 7px 0 0; font-size: 11px; }

.notice-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 15px; border: 1px solid #cce3da; border-radius: 10px; color: #276c58; background: #f1f9f6; font-size: 12px; }
.notice-banner > span { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; border-radius: 50%; color: #fff; background: var(--green); font-size: 11px; font-weight: 800; }
.page-topbar { align-items: center; }
.page-actions { display: flex; align-items: center; gap: 9px; }
.page-description { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.data-card { overflow: hidden; border: 1px solid #e0e7ec; border-radius: 14px; background: #fff; }
.data-card-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 23px; border-bottom: 1px solid #e7ecef; }
.data-card-header h2 { margin: 0; font-size: 15px; }.data-card-header p { margin: 4px 0 0; color: #8494a2; font-size: 10px; }
.user-list { display: grid; }
.user-row { min-width: 0; display: grid; grid-template-columns: 42px minmax(160px, 1.4fr) minmax(90px, .7fr) minmax(130px, .8fr) auto; gap: 14px; align-items: center; padding: 17px 22px; border-bottom: 1px solid #edf1f3; }
.user-row:last-child { border-bottom: 0; }
.user-row:hover { background: #fbfcfd; }
.user-avatar { width: 38px; height: 38px; border-radius: 10px; background: #315a78; }
.user-identity { min-width: 0; }.user-identity strong, .user-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-identity strong { font-size: 13px; }.user-identity small { margin-top: 4px; color: #8494a2; font-size: 10px; font-weight: 450; }
.user-identity em { margin-left: 5px; padding: 2px 5px; border-radius: 4px; color: #18755e; background: #e7f5f0; font-size: 9px; font-style: normal; }
.user-role small, .user-state small { display: block; margin-bottom: 5px; color: #91a0ad; font-size: 9px; }.user-role span { font-size: 11px; font-weight: 620; }
.state-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 650; }.state-label i { width: 6px; height: 6px; border-radius: 50%; }
.state-label.positive { color: #22755f; }.state-label.positive i { background: #2ba37d; }.state-label.waiting { color: #98621f; }.state-label.waiting i { background: #d5953c; }.state-label.muted { color: #82909c; }.state-label.muted i { background: #9aa6b0; }
.state-label.attention { color: #a24f32; }.state-label.attention i { background: #d66e49; }
.user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }.user-actions a, .user-actions button { padding: 7px 9px; border-radius: 7px; color: #567083; background: transparent; cursor: pointer; font-size: 10px; font-weight: 620; }.user-actions a:hover, .user-actions button:hover { color: var(--ink); background: #eef3f6; }
.user-actions .user-delete-link { color: #a05257; }.user-actions .user-delete-link:hover { color: #8e3037; background: #fff3f3; }
.info-strip { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; border: 1px solid #dce6ed; border-radius: 11px; color: #617689; background: #f8fafb; }
.info-strip > span { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; border-radius: 50%; color: #fff; background: #648297; font-size: 11px; font-weight: 800; }.info-strip p { margin: 0; font-size: 11px; line-height: 1.65; }.info-strip strong { color: #405b6e; }

.form-content { max-width: 900px; }
.back-link { display: inline-flex; margin-bottom: 24px; color: #657b8d; font-size: 11px; font-weight: 650; }.back-link:hover { color: var(--green); }
.form-page-header { margin-bottom: 25px; }.form-page-header h1 { margin: 0; font-size: 30px; letter-spacing: -.035em; }.form-page-header > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.form-content > .alert, .form-content > .notice-banner { max-width: 760px; }
.form-card { max-width: 760px; overflow: hidden; border: 1px solid #dfe7ec; border-radius: 14px; background: #fff; box-shadow: 0 8px 25px rgba(16,42,67,.04); }
.form-card.narrow-form { max-width: 570px; }
.settings-form section { display: grid; gap: 17px; padding: 25px 28px; border-bottom: 1px solid #e8edf0; }
.settings-form section h2 { margin: 0; font-size: 15px; }.settings-form section > p { margin: -9px 0 3px; color: #7a8c9b; font-size: 11px; line-height: 1.6; }
.settings-form label { display: grid; gap: 8px; color: #334e68; font-size: 12px; font-weight: 650; }.settings-form label small { color: #8393a4; font-size: 10px; font-weight: 450; }
.settings-form input, .settings-form select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #cad5df; border-radius: 9px; color: var(--ink); outline: none; background: #fff; }.settings-form input:focus, .settings-form select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(22,135,107,.10); }
.settings-form footer { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 17px 21px; background: #fafbfc; }
.secondary-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid #d5dfe6; border-radius: 9px; color: #546b7d; background: #fff; font-size: 11px; font-weight: 650; }.secondary-button:hover { border-color: #9fafbb; }
.danger-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid #d9aeb1; border-radius: 9px; color: #943e44; background: #fff8f8; cursor: pointer; font-size: 11px; font-weight: 720; }.danger-button:hover { border-color: #be767b; background: #fff0f0; }.danger-button.solid { color: #fff; border-color: #a63c41; background: #a63c41; }.danger-button.solid:hover { border-color: #8d2f34; background: #8d2f34; }
.archive-confirm-card .archive-person { display: flex; grid-template-columns: none; align-items: center; gap: 13px; background: linear-gradient(135deg, rgba(242,248,251,.88), rgba(255,255,255,.96)); }.archive-person div { display: grid; gap: 3px; }.archive-person strong { color: #263f52; font-size: 14px; }.archive-person small { color: #8393a1; font-size: 10px; }
.impact-list { display: grid; gap: 15px; margin: 2px 0 0; padding: 0; list-style: none; }.impact-list li { display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 12px; align-items: start; }.impact-list i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #45677c; background: #edf3f6; font-size: 10px; font-style: normal; font-weight: 750; }.impact-list span, .impact-list strong, .impact-list small { display: block; }.impact-list strong { color: #3b5568; font-size: 11px; }.impact-list small { margin-top: 4px; color: #7e8f9d; font-size: 10px; line-height: 1.55; }
.deleted-users-content { max-width: 1180px; }.deleted-users-content .breadcrumb a:hover { color: var(--green); }.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }.archive-card { overflow: hidden; border: 1px solid rgba(214,225,232,.92); border-radius: 16px; background: rgba(255,255,255,.91); box-shadow: 0 12px 38px rgba(32,58,76,.055); backdrop-filter: blur(14px); }.archive-card > header { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 19px 20px 16px; }.archive-card > header div { min-width: 0; }.archive-card > header strong, .archive-card > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.archive-card > header strong { color: #2d4759; font-size: 13px; }.archive-card > header small { margin-top: 4px; color: #8495a3; font-size: 9px; }.archive-stats { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 20px; border: 1px solid #e6ecef; border-radius: 11px; background: rgba(247,250,251,.82); }.archive-stats span { display: grid; gap: 2px; padding: 12px 8px; border-right: 1px solid #e6ecef; text-align: center; }.archive-stats span:last-child { border-right: 0; }.archive-stats strong { color: #344f62; font-size: 15px; }.archive-stats small { color: #8a99a5; font-size: 8px; }.archive-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px; }.archive-meta p { margin: 0; }.archive-meta small, .archive-meta strong { display: block; }.archive-meta small { color: #91a0ac; font-size: 8px; }.archive-meta strong { margin-top: 4px; color: #536c7e; font-size: 9px; font-weight: 650; }.archive-card > footer { min-height: 57px; display: flex; justify-content: flex-end; gap: 8px; align-items: center; padding: 10px 18px; border-top: 1px solid #e8edf0; background: rgba(250,252,253,.86); }.archive-card > footer form { display: contents; }.archive-empty { min-height: 310px; border: 1px solid #e1e8ec; border-radius: 16px; background: #fff; }.archive-backup-note { max-width: 850px; }.choice-row { grid-template-columns: 20px minmax(0,1fr); align-items: start; }.settings-form .choice-row > input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--green); }.choice-row span, .choice-row strong, .choice-row small { display: block; }.choice-row strong { font-size: 11px; }.choice-row small { margin-top: 4px; line-height: 1.55; }.danger-heading .breadcrumb, .danger-heading h1 { color: #923b40; }.purge-impact { max-width: 760px; margin-bottom: 17px; padding: 22px 24px; border: 1px solid #ead1d3; border-radius: 15px; background: linear-gradient(135deg, #fff8f8, #fffdfd); }.purge-impact h2 { margin: 0 0 15px; color: #8d373c; font-size: 14px; }.purge-impact > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }.purge-impact span { display: grid; gap: 3px; padding: 12px; border: 1px solid #efdfe0; border-radius: 10px; background: rgba(255,255,255,.7); }.purge-impact span strong { color: #884047; font-size: 18px; }.purge-impact span small { color: #9b777a; font-size: 8px; }.purge-impact p { margin: 15px 0 0; color: #86666a; font-size: 10px; line-height: 1.65; }.purge-impact p strong { color: #79484c; }.purge-form label b { color: #973e44; font-weight: 750; }

.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.device-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 218px; padding: 20px; border: 1px solid #dfe7ec; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(16,42,67,.035); transition: border-color .16s, box-shadow .16s, transform .16s; }
.device-card:hover { border-color: #b6c7d3; box-shadow: 0 12px 28px rgba(16,42,67,.08); transform: translateY(-2px); }
.device-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.device-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #315a78; font-size: 14px; font-weight: 780; }.device-avatar.large { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }
.device-card-copy { margin: 24px 0 18px; }.device-card-copy h2 { overflow: hidden; margin: 0; color: var(--ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }.device-card-copy p { overflow: hidden; margin: 7px 0 0; color: #7f909f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.device-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #edf1f3; color: #587184; font-size: 10px; font-weight: 650; }.device-card-footer b { color: var(--green); font-size: 14px; }
.large-empty-state { min-height: 390px; display: grid; place-items: center; align-content: center; padding: 45px 25px; border: 1px dashed #cbd7df; border-radius: 15px; color: #738797; background: rgba(255,255,255,.55); text-align: center; }.large-empty-state h2 { margin: 17px 0 8px; color: var(--ink); font-size: 19px; }.large-empty-state p { max-width: 410px; margin: 0 0 22px; font-size: 12px; line-height: 1.7; }.empty-device-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: var(--green); background: #e6f3ef; font-size: 21px; }
.install-card { max-width: 760px; overflow: hidden; border: 1px solid #dfe7ec; border-radius: 14px; background: #fff; }
.install-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 15px; padding: 23px 26px; border-bottom: 1px solid #e9eef1; }.install-step:last-child { border-bottom: 0; }.install-step > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 11px; font-weight: 800; }.install-step h2 { margin: 4px 0 6px; font-size: 14px; }.install-step p { margin: 0; color: #748797; font-size: 11px; line-height: 1.65; }
.command-box { position: relative; margin-top: 15px; }.command-box textarea { width: 100%; min-height: 100px; resize: vertical; padding: 14px 112px 14px 15px; border: 1px solid #cad6de; border-radius: 10px; color: #d9e5ec; outline: none; background: #102a43; font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }.command-box textarea:focus { border-color: #51b899; box-shadow: 0 0 0 4px rgba(22,135,107,.11); }.command-box button { position: absolute; right: 9px; top: 9px; padding: 8px 11px; border-radius: 7px; color: #123b32; background: #8fe0c7; cursor: pointer; font-size: 10px; font-weight: 750; }.command-box button:hover { background: #acf0dc; }
.privacy-callout { margin-top: 10px; padding: 10px 12px; border-radius: 8px; color: #825d27; background: #fff8e9; font-size: 10px; }
.form-actions { max-width: 760px; display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.device-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 25px; }.device-detail-header h1 { margin: 0 0 7px; font-size: 30px; letter-spacing: -.035em; }.device-detail-header .breadcrumb { margin-bottom: 5px; }
.detail-card { max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #dfe7ec; border-radius: 13px; background: #fff; }.detail-card > div { min-width: 0; padding: 21px; border-right: 1px solid #e8edf0; }.detail-card > div:last-child { border-right: 0; }.detail-card small { display: block; color: #8393a1; font-size: 9px; }.detail-card strong { display: block; overflow: hidden; margin: 6px 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.detail-card p { margin: 0; color: #91a0ad; font-size: 9px; line-height: 1.55; }
.health-card { max-width: 760px; overflow: hidden; margin-top: 16px; border: 1px solid #dfe7ec; border-radius: 13px; background: #fff; }.health-card > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 21px; border-bottom: 1px solid #e8edf0; }.health-card header small { color: #8393a1; font-size: 9px; }.health-card header h2 { margin: 5px 0 0; font-size: 14px; }.health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.health-grid article { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 17px 21px; border-bottom: 1px solid #edf1f3; }.health-grid article:nth-child(odd) { border-right: 1px solid #edf1f3; }.health-grid article:nth-last-child(-n+2) { border-bottom: 0; }.health-grid article:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }.health-grid strong { display: block; font-size: 11px; }.health-grid p { max-width: 245px; margin: 5px 0 0; color: #8797a4; font-size: 9px; line-height: 1.55; }.health-grid .state-label { flex: 0 0 auto; margin-top: 1px; }
.next-action-card { max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 16px; padding: 24px; border-radius: 13px; color: #fff; background: var(--navy); }.next-action-card h2 { margin: 10px 0 6px; font-size: 17px; }.next-action-card p { max-width: 470px; margin: 0; color: #b7c6d1; font-size: 10px; line-height: 1.65; }.next-action-card.success-card { background: #174d40; }.next-action-card .primary-button { flex: 0 0 auto; }
.access-summary-card { max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 20px 22px; border: 1px solid #dfe7ec; border-radius: 13px; background: #fff; }.access-summary-card small { color: #8393a1; font-size: 9px; }.access-summary-card h2 { margin: 5px 0; font-size: 14px; }.access-summary-card p { margin: 0; color: #8193a2; font-size: 10px; line-height: 1.55; }.access-summary-card .secondary-button { flex: 0 0 auto; }
.device-line-form { margin-top: 16px; }

.access-content { max-width: 1120px; }.access-content > .notice-banner { max-width: 1000px; }.access-page-header { max-width: 820px; }
.access-list { display: grid; gap: 18px; max-width: 1000px; }
.access-card { overflow: hidden; border: 1px solid #dfe7ec; border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(16,42,67,.035); }
.access-card-header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 19px 22px; border-bottom: 1px solid #e8edf0; }.access-card-header h2 { overflow: hidden; margin: 0; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.access-card-header p { overflow: hidden; margin: 5px 0 0; color: #8393a1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.access-form { display: grid; }.access-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 13px 22px; background: #fafbfc; }.access-presets > span { margin-right: 5px; color: #7d8f9d; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }.access-presets button { padding: 6px 9px; border: 1px solid #d9e2e8; border-radius: 7px; color: #557084; background: #fff; cursor: pointer; font-size: 9px; font-weight: 650; }.access-presets button:hover { border-color: #9fb3c1; color: var(--ink); }
.access-form fieldset { min-width: 0; margin: 0; padding: 18px 22px 20px; border: 0; border-top: 1px solid #edf1f3; }.access-form legend { padding: 0 8px 0 0; color: #526b7d; font-size: 10px; font-weight: 750; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }.permission-option { min-width: 0; display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #e1e8ed; border-radius: 10px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }.permission-option:hover { border-color: #b9c9d4; background: #fbfcfd; }.permission-option:has(input:checked) { border-color: #a6d3c5; background: #f4faf8; }.permission-option input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--green); }.permission-option strong, .permission-option small { display: block; }.permission-option strong { color: #334e68; font-size: 11px; }.permission-option small { margin-top: 4px; color: #8495a3; font-size: 9px; line-height: 1.5; }
.access-form footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 22px; border-top: 1px solid #e8edf0; background: #fafbfc; }.access-form footer p { margin: 0; color: #8293a0; font-size: 9px; line-height: 1.5; }.access-form footer .primary-button { flex: 0 0 auto; }

.settings-content { max-width: 1120px; }
.settings-heading { max-width: 940px; }
.settings-version { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #d8e2e8; border-radius: 999px; color: #607789; background: #fff; font-size: 10px; font-weight: 700; }
.settings-content > .notice-banner, .settings-content > .alert { max-width: 940px; }
.scope-panel { max-width: 940px; display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr); gap: 22px; align-items: start; margin-bottom: 18px; padding: 21px 22px; border: 1px solid #dfe7ec; border-radius: 14px; background: #fff; }
.scope-intro small, .settings-sync-card small, .settings-history > header small { color: #8393a1; font-size: 9px; }
.scope-intro h2 { margin: 5px 0; font-size: 16px; }.scope-intro p { margin: 0; color: #8193a2; font-size: 10px; line-height: 1.6; }
.scope-options { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.scope-option { min-width: 112px; max-width: 210px; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #dce5ea; border-radius: 9px; background: #fbfcfd; }
.scope-option small { color: #91a0ad; font-size: 8px; font-weight: 700; }.scope-option strong { overflow: hidden; color: #506b7e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.scope-option:hover { border-color: #aebfca; background: #fff; }.scope-option.selected { border-color: #91cab8; background: #f1f9f6; box-shadow: inset 0 0 0 1px #c7e5dc; }.scope-option.selected small, .scope-option.selected strong { color: #176e58; }
.settings-sync-card { max-width: 940px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 17px 20px; border: 1px solid #dfe7ec; border-radius: 12px; background: #fff; }
.settings-sync-card h2 { margin: 5px 0; font-size: 14px; }.settings-sync-card p { margin: 0; color: #8193a2; font-size: 10px; }
.settings-entry-grid { max-width: 940px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.notification-entry { min-width: 0; min-height: 78px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 19px; border: 1px solid #cae2da; border-radius: 13px; background: linear-gradient(110deg, #f5fbf9, #fff); transition: border-color .16s, box-shadow .16s, transform .16s; }
.notification-entry:hover { border-color: #91c8b7; box-shadow: 0 9px 25px rgba(22,135,107,.08); transform: translateY(-1px); }.notification-entry-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--green); }.notification-entry small { color: #718a7f; font-size: 8px; font-weight: 750; letter-spacing: .05em; }.notification-entry h2 { margin: 3px 0; font-size: 13px; }.notification-entry p { margin: 0; color: #7d9088; font-size: 9px; }.notification-entry > span:last-child { color: #357964; font-size: 10px; font-weight: 700; }.notification-entry b { margin-left: 5px; }
.notification-entry.update-entry { border-color: #cedde8; background: linear-gradient(110deg, #f4f8fb, #fff); }.notification-entry.update-entry:hover { border-color: #9bb9ce; box-shadow: 0 9px 25px rgba(36,116,198,.07); }.notification-entry.update-entry .notification-entry-icon { background: #315a78; }.notification-entry.update-entry small, .notification-entry.update-entry > span:last-child { color: #55768c; }
.notification-entry.call-entry { border-color: #d7dde9; background: linear-gradient(110deg, #f6f7fb, #fff); }.notification-entry.call-entry:hover { border-color: #aebad2; box-shadow: 0 9px 25px rgba(53,73,116,.07); }.notification-entry.call-entry .notification-entry-icon { background: #425b8a; }.notification-entry.call-entry small, .notification-entry.call-entry > span:last-child { color: #5d6f93; }
.notification-entry.time-entry { border-color: #ddd9e8; background: linear-gradient(110deg, #f8f7fb, #fff); }.notification-entry.time-entry:hover { border-color: #bdb3d1; box-shadow: 0 9px 25px rgba(86,66,122,.07); }.notification-entry.time-entry .notification-entry-icon { background: #695581; }.notification-entry.time-entry small, .notification-entry.time-entry > span:last-child { color: #756489; }
.settings-editor { max-width: 940px; overflow: hidden; border: 1px solid #dce5eb; border-radius: 15px; background: #fff; box-shadow: 0 10px 28px rgba(16,42,67,.045); }
.setting-section { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr); gap: 27px; padding: 26px 27px; border-bottom: 1px solid #e8edf0; }
.setting-section > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.setting-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; font-weight: 800; }.setting-icon.blue { color: #276da9; background: #eaf3fb; }.setting-icon.green { color: #17745d; background: #e9f6f1; }.setting-icon.amber { color: #9a631c; background: #fcf1df; }.setting-icon.teal { color: #327384; background: #eaf5f7; }.setting-icon.violet { color: #6d5bd0; background: #efecff; }
.setting-section h2 { margin: 2px 0 6px; font-size: 14px; }.setting-section header p { margin: 0; color: #8495a3; font-size: 10px; line-height: 1.6; }
.setting-fields { min-width: 0; display: grid; gap: 16px; }.setting-fields.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setting-fields label, .settings-save label { min-width: 0; display: grid; gap: 7px; color: #334e68; font-size: 11px; font-weight: 680; }
.setting-fields label small, .settings-save label small { color: #8495a3; font-size: 9px; font-weight: 450; line-height: 1.5; }
.setting-fields select, .setting-fields input, .settings-save input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #cad6de; border-radius: 9px; color: var(--ink); outline: none; background: #fff; font: inherit; font-weight: 500; }
.setting-fields select:focus, .setting-fields input:focus, .settings-save input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(22,135,107,.10); }
.setting-advanced { grid-column: 1 / -1; min-width: 0; margin-top: 18px; border-top: 1px solid #e8eef1; padding-top: 15px; }.setting-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #355165; cursor: pointer; font-size: 10px; font-weight: 720; list-style: none; }.setting-advanced summary::-webkit-details-marker { display: none; }.setting-advanced summary::after { content: "+"; width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #edf4f5; color: var(--green); font-size: 16px; }.setting-advanced[open] summary::after { content: "−"; }.setting-advanced summary small { margin-left: auto; color: #8495a3; font-size: 9px; font-weight: 450; }.setting-advanced .setting-fields { margin-top: 16px; }
.settings-save { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 20px 27px; background: #fafbfc; }.settings-save .primary-button { margin-bottom: 19px; }
.settings-history { max-width: 940px; overflow: hidden; margin-top: 18px; border: 1px solid #dfe7ec; border-radius: 14px; background: #fff; }
.settings-history > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px; border-bottom: 1px solid #e8edf0; }.settings-history > header h2 { margin: 4px 0 0; font-size: 15px; }.settings-history > header > span { color: #8a99a6; font-size: 9px; }
.history-list { display: grid; }.history-list article { min-width: 0; display: grid; grid-template-columns: 105px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 22px; border-bottom: 1px solid #edf1f3; }.history-list article:last-child { border-bottom: 0; }
.history-version { display: grid; gap: 5px; align-items: start; justify-items: start; }.history-version span { color: #607789; font-size: 9px; font-weight: 700; }.history-version em { padding: 3px 6px; border-radius: 999px; color: #176e58; background: #e8f5f0; font-size: 8px; font-style: normal; font-weight: 700; }
.history-copy { min-width: 0; }.history-copy strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.history-copy p { overflow: hidden; margin: 5px 0 0; color: #8a99a6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.history-list form { display: flex; }.history-list button { padding: 7px 10px; border: 1px solid #d7e1e7; border-radius: 8px; color: #587184; background: #fff; cursor: pointer; font-size: 9px; font-weight: 680; }.history-list button:hover { border-color: #99adba; color: var(--ink); }
.history-empty { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 120px; padding: 25px; color: #8193a2; }.history-empty > span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: #e9f5f1; }.history-empty strong { display: block; color: #526b7d; font-size: 11px; }.history-empty p { margin: 5px 0 0; font-size: 9px; }

.notification-content { max-width: 1120px; }.notification-heading, .notification-content > .notice-banner, .notification-content > .alert { max-width: 940px; }.notification-heading .breadcrumb a:hover { color: var(--green); }
.call-connection-content { max-width: 1120px; }.call-connection-heading, .call-connection-content > .notice-banner { max-width: 940px; }.call-connection-heading .breadcrumb a:hover { color: var(--green); }
.call-connection-hero { position: relative; max-width: 940px; min-height: 148px; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 22px; align-items: center; overflow: hidden; padding: 27px 29px; border: 1px solid #dce5eb; border-radius: 16px; background: linear-gradient(118deg, #fff, #f7f9fb); box-shadow: 0 9px 30px rgba(16,42,67,.045); }.call-connection-hero::after { content: ""; position: absolute; right: -70px; bottom: -120px; width: 250px; height: 250px; border: 1px solid rgba(49,90,120,.08); border-radius: 50%; }.call-connection-hero.positive { border-color: #b7dbd0; background: linear-gradient(118deg, #fff, #f2faf7); }.call-connection-hero.attention { border-color: #ebd2c6; background: linear-gradient(118deg, #fff, #fff8f4); }.call-connection-orbit { position: relative; width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid #d6e0e7; border-radius: 50%; }.call-connection-orbit::before { content: ""; width: 42px; height: 42px; border: 1px solid #ccd9e2; border-radius: 50%; }.call-connection-orbit span { position: absolute; width: 14px; height: 14px; border: 4px solid #fff; border-radius: 50%; background: #526c80; box-shadow: 0 0 0 1px #c7d4dd; }.call-connection-orbit i { position: absolute; right: 5px; top: 10px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #8598a8; }.call-connection-hero.positive .call-connection-orbit span, .call-connection-hero.positive .call-connection-orbit i { background: var(--green); }.call-connection-hero.attention .call-connection-orbit span, .call-connection-hero.attention .call-connection-orbit i { background: #c56845; }.call-connection-hero small, .call-check-card small, .call-firewall small { color: #7a8d9b; font-size: 9px; font-weight: 760; letter-spacing: .06em; }.call-connection-hero h2 { margin: 6px 0 7px; font-size: 19px; letter-spacing: -.025em; }.call-connection-hero p { max-width: 560px; margin: 0; color: #728595; font-size: 11px; line-height: 1.65; }.call-connection-hero em { display: block; margin-top: 11px; color: #94a1ac; font-size: 9px; font-style: normal; }.call-connection-hero > .state-label { z-index: 1; align-self: start; margin-top: 5px; }
.call-paths { max-width: 940px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }.call-paths article { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 13px; align-items: start; padding: 19px; border: 1px solid #dfe6eb; border-radius: 14px; background: #fff; }.call-path-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #315a78; font-size: 17px; }.call-path-icon.fallback { color: #425b8a; background: #edf0f7; }.call-paths small { color: #80909d; font-size: 8px; }.call-paths h2 { margin: 3px 0 5px; font-size: 13px; }.call-paths p { margin: 0; color: #8796a2; font-size: 9px; }.call-paths .state-label { margin-top: 3px; }
.call-check-card { max-width: 940px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; padding: 21px 23px; border: 1px solid #dce5eb; border-radius: 14px; background: #fff; }.call-check-card h2, .call-firewall h2 { margin: 5px 0 6px; font-size: 14px; }.call-check-card p, .call-firewall header p { margin: 0; color: #81919e; font-size: 10px; line-height: 1.55; }.call-check-card .primary-button { min-width: 128px; }
.call-firewall { max-width: 940px; overflow: hidden; margin-top: 14px; border: 1px solid #dce5eb; border-radius: 14px; background: #fff; }.call-firewall header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid #e8edf0; }.call-firewall header p { text-align: right; }.call-firewall dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }.call-firewall dl div { min-width: 0; padding: 18px 22px; border-right: 1px solid #edf1f3; }.call-firewall dl div:last-child { border-right: 0; }.call-firewall dt { color: #8796a2; font-size: 8px; }.call-firewall dd { overflow-wrap: anywhere; margin: 7px 0 0; color: #28465c; font-size: 11px; font-weight: 700; }
.display-time-content { max-width: 1120px; }.display-time-heading, .display-time-content > .notice-banner, .display-time-content > .alert { max-width: 940px; }.display-time-heading .breadcrumb a:hover { color: var(--green); }
.display-time-preview { max-width: 940px; min-height: 132px; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 21px; align-items: center; padding: 25px 28px; border: 1px solid #d7e3df; border-radius: 16px; background: linear-gradient(118deg, #fff, #f3faf7); box-shadow: 0 9px 30px rgba(16,42,67,.045); }.display-time-clock { position: relative; width: 64px; height: 64px; border: 1px solid #bcd7ce; border-radius: 50%; background: #fff; }.display-time-clock::before { content: ""; position: absolute; inset: 6px; border: 1px solid #dceae5; border-radius: 50%; }.display-time-clock i, .display-time-clock b { position: absolute; left: 31px; top: 31px; display: block; width: 2px; border-radius: 2px; background: var(--green); transform-origin: 50% 100%; }.display-time-clock i { height: 18px; transform: translateY(-100%) rotate(35deg); }.display-time-clock b { height: 13px; transform: translateY(-100%) rotate(125deg); }.display-time-preview small, .display-time-form small { color: #789087; font-size: 9px; font-weight: 760; letter-spacing: .05em; }.display-time-preview h2 { margin: 6px 0 5px; font-size: 21px; letter-spacing: -.025em; }.display-time-preview p { margin: 0; color: #6f857d; font-size: 10px; }
.display-time-form { max-width: 940px; overflow: hidden; margin-top: 14px; border: 1px solid #dce5eb; border-radius: 15px; background: #fff; }.display-time-form > header { padding: 22px 24px 18px; }.display-time-form h2 { margin: 5px 0 7px; font-size: 15px; }.display-time-form header p { margin: 0; color: #7e909d; font-size: 10px; line-height: 1.65; }.display-time-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: end; padding: 0 24px 23px; }.display-time-fields label { min-width: 0; display: grid; gap: 7px; color: #334e68; font-size: 11px; font-weight: 680; }.display-time-fields label small { color: #8495a3; font-size: 9px; font-weight: 450; }.display-time-fields select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #cad6de; border-radius: 9px; color: var(--ink); outline: none; background: #fff; font: inherit; }.display-time-fields select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(22,135,107,.10); }.display-time-fields .secondary-button { min-height: 43px; }.display-time-form footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 24px; border-top: 1px solid #e8edf0; color: #8796a2; background: #fafbfc; font-size: 9px; }
.display-time-explainer { max-width: 940px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }.display-time-explainer article { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 18px; border: 1px solid #e0e6ea; border-radius: 13px; background: #fff; }.display-time-explainer article > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: #526a7c; background: #eef3f6; font-size: 11px; font-weight: 800; }.display-time-explainer h2 { margin: 2px 0 5px; font-size: 12px; }.display-time-explainer p { margin: 0; color: #82929e; font-size: 9px; line-height: 1.55; }
.notification-entry.protection-entry { border-color: #d6e5df; background: linear-gradient(110deg, #f4faf7, #fff); }.notification-entry.protection-entry:hover { border-color: #a8cabb; box-shadow: 0 9px 25px rgba(39,105,82,.07); }.notification-entry.protection-entry .notification-entry-icon { background: #376f5c; }.notification-entry.protection-entry small, .notification-entry.protection-entry > span:last-child { color: #557d6f; }
.protection-content { max-width: 1120px; }.protection-heading, .protection-content > .notice-banner, .protection-content > .alert, .protection-hero, .protection-facts, .protection-form, .protection-note { max-width: 940px; }.protection-heading .breadcrumb a:hover { color: var(--green); }
.protection-hero { position: relative; min-height: 142px; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 22px; align-items: center; overflow: hidden; padding: 26px 28px; border: 1px solid rgba(160,197,184,.7); border-radius: 18px; background: linear-gradient(120deg, rgba(255,255,255,.96), rgba(235,247,242,.82)); box-shadow: 0 14px 36px rgba(16,42,67,.055); backdrop-filter: blur(14px); }.protection-hero::after { content: ""; position: absolute; right: -55px; bottom: -135px; width: 260px; height: 260px; border: 1px solid rgba(39,117,91,.08); border-radius: 50%; }.protection-mark { position: relative; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 21px; background: linear-gradient(145deg, #195b49, #2c8b6f); box-shadow: 0 10px 24px rgba(22,105,82,.18); }.protection-mark::before { content: ""; width: 26px; height: 31px; border: 2px solid #fff; border-radius: 13px 13px 16px 16px; clip-path: polygon(50% 0,100% 16%,94% 73%,50% 100%,6% 73%,0 16%); }.protection-mark span { position: absolute; width: 7px; height: 12px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-2px) rotate(45deg); }.protection-hero small, .protection-facts small, .protection-section small { color: #789087; font-size: 8px; font-weight: 760; letter-spacing: .07em; }.protection-hero h2 { margin: 6px 0 7px; font-size: 20px; letter-spacing: -.025em; }.protection-hero p { margin: 0; color: #71867e; font-size: 10px; }.protection-hero > .state-label { z-index: 1; align-self: start; margin-top: 5px; }
.protection-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }.protection-facts article { min-width: 0; padding: 18px 19px; border: 1px solid #e0e7e4; border-radius: 14px; background: rgba(255,255,255,.9); }.protection-facts strong { display: block; margin-top: 6px; font-size: 12px; }.protection-facts p { margin: 6px 0 0; color: #84948e; font-size: 9px; line-height: 1.55; }
.protection-form { overflow: hidden; margin-top: 14px; border: 1px solid #dce5e1; border-radius: 16px; background: #fff; box-shadow: 0 9px 28px rgba(16,42,67,.035); }.protection-section { display: grid; grid-template-columns: minmax(215px,.85fr) minmax(0,1.65fr); gap: 26px; padding: 25px 26px; border-bottom: 1px solid #e9eeec; }.protection-section > header { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 12px; align-items: start; }.protection-section-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #176e58; background: #e8f5f0; font-size: 13px; font-weight: 800; }.protection-section-icon.violet { color: #67517f; background: #f1edf5; }.protection-section-icon.blue { color: #315a78; background: #edf3f7; }.protection-section h2 { margin: 4px 0 6px; font-size: 14px; }.protection-section header p { margin: 0; color: #84948f; font-size: 9px; line-height: 1.6; }
.protection-primary { align-items: center; background: linear-gradient(108deg, #fff, #f8fbfa); }.product-switch { display: inline-flex; align-items: center; justify-self: start; gap: 11px; color: #365649; cursor: pointer; font-size: 10px; }.product-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }.product-switch span { position: relative; width: 42px; height: 24px; border: 1px solid #c8d5d0; border-radius: 999px; background: #e8eeeb; transition: background .16s, border-color .16s; }.product-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(16,42,67,.18); transition: transform .16s; }.product-switch input:checked + span { border-color: var(--green); background: var(--green); }.product-switch input:checked + span::after { transform: translateX(18px); }.product-switch input:focus-visible + span { outline: 3px solid rgba(22,135,107,.16); outline-offset: 2px; }
.protection-fields { min-width: 0; display: grid; gap: 15px; }.protection-fields.two-column { grid-template-columns: repeat(2,minmax(0,1fr)); }.protection-fields label { min-width: 0; display: grid; gap: 6px; color: #405b50; font-size: 10px; font-weight: 680; }.protection-fields label small { color: #899993; font-size: 8px; font-weight: 450; letter-spacing: 0; line-height: 1.45; }.protection-fields input, .protection-fields select { width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid #cad7d2; border-radius: 9px; color: var(--ink); outline: none; background: #fff; font: inherit; }.protection-fields input:focus, .protection-fields select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(22,135,107,.09); }
.external-protection { grid-template-rows: auto auto; }.external-protection > .product-switch { align-self: center; }.protection-details { grid-column: 1 / -1; margin-top: -4px; border: 1px solid #e1e8e5; border-radius: 12px; background: #fafcfb; }.protection-details summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 17px; cursor: pointer; color: #486458; font-size: 10px; font-weight: 700; }.protection-details summary small { color: #83968e; font-size: 8px; font-weight: 450; letter-spacing: 0; }.protection-details[open] summary { border-bottom: 1px solid #e5ebe8; }.protection-details .protection-fields { padding: 18px; }.protection-save { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 24px; color: #87978f; background: #fafbfb; font-size: 9px; }
.protection-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 16px 18px; border: 1px solid #d9e6e1; border-radius: 13px; color: #45685b; background: #f5faf8; }.protection-note > span { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; border-radius: 50%; color: #fff; background: #376f5c; font-size: 9px; font-weight: 800; }.protection-note strong { display: block; font-size: 10px; }.protection-note p { margin: 4px 0 0; color: #748c83; font-size: 9px; line-height: 1.55; }
.protection-actions { max-width: 940px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; padding: 19px 21px; border: 1px solid #dbe6e1; border-radius: 15px; background: linear-gradient(110deg,#fff,#f7fbf9); box-shadow: 0 8px 24px rgba(16,42,67,.035); }.protection-actions small, .protection-history small { color: #7e928a; font-size: 8px; font-weight: 740; letter-spacing: .06em; }.protection-actions h2 { margin: 5px 0 4px; font-size: 13px; }.protection-actions p { margin: 0; color: #83958e; font-size: 9px; }.protection-actions > div:last-child { display: flex; align-items: center; gap: 9px; }.protection-actions form { margin: 0; }.protection-actions button:disabled { cursor: default; opacity: .48; box-shadow: none; }
.protection-history { max-width: 940px; overflow: hidden; margin-top: 14px; border: 1px solid #dfe7e4; border-radius: 15px; background: #fff; }.protection-history > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 21px; border-bottom: 1px solid #e9eeec; }.protection-history h2 { margin: 4px 0 0; font-size: 13px; }.protection-history > header > span { color: #92a19b; font-size: 8px; }.protection-history-list article { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; gap: 13px; align-items: start; padding: 15px 21px; border-bottom: 1px solid #edf1ef; }.protection-history-list article:last-child { border-bottom: 0; }.protection-history-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #216c58; background: #eaf5f1; font-size: 13px; font-weight: 800; }.protection-history-list h3 { margin: 3px 0 4px; font-size: 11px; }.protection-history-list p { margin: 0; color: #84948e; font-size: 9px; }.protection-history-list .state-label { margin-top: 3px; }
.notification-intro { max-width: 940px; display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 17px; align-items: start; margin-bottom: 18px; padding: 22px 24px; border-radius: 15px; color: #fff; background: #123b32; box-shadow: 0 12px 30px rgba(16,42,67,.10); }.notification-intro-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; color: #154b3e; background: #87dec2; font-size: 18px; }.notification-intro small { color: #8adfc4; font-size: 8px; font-weight: 760; letter-spacing: .09em; }.notification-intro h2 { margin: 5px 0 7px; font-size: 17px; }.notification-intro p { max-width: 690px; margin: 0; color: #bdd4cd; font-size: 10px; line-height: 1.7; }
.notification-grid { max-width: 940px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.notification-card { min-width: 0; overflow: hidden; border: 1px solid #dce5eb; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgba(16,42,67,.035); }.notification-card.configured { border-color: #abd5c8; box-shadow: 0 8px 25px rgba(22,135,107,.07); }.notification-card > header { min-height: 95px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 19px 19px 16px; }.notification-mark { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: #315a78; background: #edf3f7; font-size: 13px; font-weight: 800; }.notification-card.configured .notification-mark { color: #176e58; background: #e7f5f0; }.notification-card h2 { margin: 2px 0 5px; font-size: 13px; }.notification-card header p { margin: 0; color: #8293a1; font-size: 9px; line-height: 1.55; }.notification-card .state-label { margin-top: 2px; }
.notification-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px; align-items: end; padding: 16px 19px 19px; border-top: 1px solid #edf1f3; background: #fafbfc; }.notification-upload label { min-width: 0; display: grid; gap: 5px; color: #415b6e; font-size: 10px; font-weight: 700; }.notification-upload label small { color: #8a99a6; font-size: 8px; font-weight: 450; }.notification-upload input[type=file] { min-width: 0; max-width: 100%; color: #657b8c; font-size: 9px; }.notification-upload input::file-selector-button { margin-right: 8px; padding: 6px 9px; border: 1px solid #ccd8e0; border-radius: 7px; color: #466174; background: #fff; cursor: pointer; font: inherit; font-weight: 700; }.primary-button.compact { min-height: 39px; padding-inline: 15px; font-size: 10px; }
.notification-details { display: grid; grid-template-columns: .9fr .8fr 1.3fr; border-top: 1px solid #edf1f3; border-bottom: 1px solid #edf1f3; background: #fbfcfd; }.notification-details div { min-width: 0; padding: 13px 17px; border-right: 1px solid #edf1f3; }.notification-details div:last-child { border-right: 0; }.notification-details small, .notification-details strong, .notification-details em { display: block; }.notification-details small { color: #8797a4; font-size: 8px; }.notification-details strong { overflow: hidden; margin-top: 5px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.notification-details em { margin-top: 4px; color: #8998a5; font-size: 7px; font-style: normal; line-height: 1.45; }.check-copy.ready { color: #17745d; }.check-copy.warning { color: #a15f18; }.check-copy.muted { color: #718391; }
.notification-actions { min-height: 53px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 14px; }.notification-actions form { display: flex; gap: 7px; }.file-button, .notification-confirm, .quiet-danger { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid #d5dfe6; border-radius: 8px; color: #526b7d; background: #fff; cursor: pointer; font-size: 9px; font-weight: 700; }.file-button:hover { border-color: #9dafbb; }.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }.notification-confirm { color: #fff; border-color: var(--green); background: var(--green); }.notification-confirm:hover { border-color: var(--green-dark); background: var(--green-dark); }.quiet-danger { color: #9a4549; border-color: #ecd1d3; }.quiet-danger:hover { border-color: #dcaeb1; background: #fff8f8; }
.notification-coming { min-height: 75px; padding: 16px 19px; border-top: 1px solid #edf1f3; background: #fafbfc; }.notification-coming span { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #637888; background: #e9eef2; font-size: 8px; font-weight: 750; }.notification-coming p { margin: 7px 0 0; color: #8a99a6; font-size: 8px; line-height: 1.5; }.notification-privacy { max-width: 940px; display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 16px 18px; border: 1px solid #dce7e2; border-radius: 12px; color: #43685d; background: #f5faf8; }.notification-privacy > span { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; border-radius: 50%; color: #fff; background: var(--green); font-size: 9px; font-weight: 800; }.notification-privacy strong { display: block; font-size: 10px; }.notification-privacy p { margin: 4px 0 0; color: #718b82; font-size: 9px; line-height: 1.55; }

.update-content { max-width: 1120px; }.update-heading, .update-content > .notice-banner, .update-content > .alert, .update-publish, .update-history, .update-content > .notification-privacy { max-width: 940px; }.update-heading .breadcrumb a:hover { color: var(--green); }
.update-publish { overflow: hidden; margin-bottom: 18px; border: 1px solid #c7ddd6; border-radius: 15px; background: #fff; box-shadow: 0 10px 28px rgba(16,42,67,.045); }.update-publish-copy { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 17px; align-items: start; padding: 23px 24px; color: #fff; background: #123b32; }.update-publish-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; color: #154b3e; background: #87dec2; font-size: 20px; font-weight: 760; }.update-publish-copy small { color: #8adfc4; font-size: 8px; font-weight: 760; letter-spacing: .08em; }.update-publish-copy h2 { margin: 5px 0 7px; font-size: 17px; }.update-publish-copy p { max-width: 650px; margin: 0; color: #bdd4cd; font-size: 10px; line-height: 1.7; }.update-publish form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; padding: 18px 22px 20px; }.update-publish label { min-width: 0; display: grid; gap: 7px; color: #415b6e; font-size: 10px; font-weight: 700; }.update-publish input[type=file] { min-width: 0; color: #657b8c; font-size: 9px; }.update-publish input::file-selector-button { margin-right: 9px; padding: 7px 10px; border: 1px solid #ccd8e0; border-radius: 7px; color: #466174; background: #f8fafb; cursor: pointer; font: inherit; font-weight: 700; }
.update-history { overflow: hidden; border: 1px solid #dfe7ec; border-radius: 14px; background: #fff; }.update-history > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 19px 22px; border-bottom: 1px solid #e8edf0; }.update-history > header small { color: #8393a1; font-size: 8px; }.update-history > header h2 { margin: 4px 0 0; font-size: 15px; }.update-history > header p { margin: 0; color: #8a99a6; font-size: 9px; }.update-release-list { display: grid; }.update-release-list article { min-width: 0; display: grid; grid-template-columns: minmax(170px, .8fr) minmax(220px, 1.4fr) minmax(120px, .55fr); gap: 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid #edf1f3; }.update-release-list article:last-child { border-bottom: 0; }.update-version { min-width: 0; display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 12px; align-items: center; }.update-app-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #315a78; font-size: 13px; font-weight: 800; }.update-version small, .update-notes small { color: #8393a1; font-size: 8px; }.update-version h3 { margin: 3px 0; font-size: 14px; }.update-version p, .update-notes p { margin: 0; color: #8193a2; font-size: 9px; line-height: 1.55; }.update-notes { min-width: 0; }.update-notes p { margin-top: 5px; color: #536b7d; white-space: pre-line; }.update-release-state { display: grid; justify-items: end; gap: 7px; }.update-release-state > small { color: #91a0ad; font-size: 8px; }.update-release-state form { margin-top: 2px; }.update-empty { min-height: 140px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 28px; color: #8193a2; }.update-empty > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: #e9f5f1; font-size: 16px; }.update-empty strong { display: block; color: #526b7d; font-size: 11px; }.update-empty p { margin: 5px 0 0; font-size: 9px; }

.calls-content { max-width: 1250px; }
.calls-heading, .calls-content > .line-switcher, .calls-content > .current-calls, .calls-content > .call-history, .calls-content > .calls-phone-note { max-width: 1040px; }
.calls-app-pill { display: grid; grid-template-columns: 34px auto; gap: 10px; align-items: center; min-width: 134px; padding: 9px 13px; border: 1px solid #d8e5e0; border-radius: 12px; color: #315d51; background: rgba(249,252,251,.9); }
.calls-app-pill > i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #176f59; font-style: normal; font-size: 16px; }
.calls-app-pill small, .calls-app-pill strong { display: block; }.calls-app-pill small { color: #80938d; font-size: 8px; }.calls-app-pill strong { margin-top: 2px; font-size: 11px; }
.line-switcher { display: flex; gap: 9px; overflow-x: auto; margin: -3px 0 18px; padding: 3px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.line-choice { min-width: 164px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid #dfe7ec; border-radius: 12px; background: #fff; scroll-snap-align: start; transition: border-color .16s, box-shadow .16s, transform .16s; }
.line-choice:hover { border-color: #b8cac4; box-shadow: 0 6px 18px rgba(16,42,67,.05); transform: translateY(-1px); }.line-choice.selected { color: #135e4c; border-color: #8fc6b5; background: #f2faf7; box-shadow: 0 7px 20px rgba(22,135,107,.07); }
.line-choice > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #45667a; background: #edf3f6; font-size: 11px; font-weight: 800; }.line-choice.selected > span:first-child { color: #fff; background: var(--green); }
.line-choice strong, .line-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.line-choice strong { font-size: 10px; }.line-choice small { margin-top: 4px; color: #83939f; font-size: 8px; }
.current-calls { margin-bottom: 18px; overflow: hidden; border: 1px solid #b9d9ce; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 12px 34px rgba(16,42,67,.05); }
.current-calls > header, .call-history > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #e8eeeb; }.current-calls header small, .call-history header small { color: #80918a; font-size: 8px; }.current-calls h2, .call-history h2 { margin: 4px 0 0; font-size: 15px; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #3d6f61; font-size: 8px; font-weight: 700; }.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #28a47c; box-shadow: 0 0 0 4px rgba(40,164,124,.11); animation: call-pulse 1.8s ease-in-out infinite; }
@keyframes call-pulse { 50% { box-shadow: 0 0 0 7px rgba(40,164,124,0); } }
.current-call-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 15px; }
.current-call-card { min-width: 0; display: grid; grid-template-columns: 58px minmax(0,1fr) minmax(105px,.55fr); gap: 15px; align-items: center; padding: 18px; border: 1px solid #e0ebe7; border-radius: 13px; background: linear-gradient(135deg,#f5fbf8,#fff); }
.current-call-card:only-child { grid-column: 1 / -1; }
.current-call-orbit { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid #b7d9ce; border-radius: 50%; background: rgba(255,255,255,.76); }.current-call-orbit span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #176f59; font-size: 16px; }
.current-call-copy { min-width: 0; }.current-call-copy h3 { overflow: hidden; margin: 7px 0 3px; font-size: 18px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }.current-call-copy p { margin: 0; color: #6e817a; font-size: 9px; }.current-call-copy > small { display: block; margin-top: 8px; color: #81928c; font-size: 8px; line-height: 1.45; }
.current-call-line, .call-line-name { min-width: 0; }.current-call-line { padding-left: 14px; border-left: 1px solid #dce8e3; }.current-call-line small, .current-call-line strong, .current-call-line span, .call-line-name small, .call-line-name strong, .call-line-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.current-call-line small, .call-line-name small { color: #8a9994; font-size: 7px; }.current-call-line strong, .call-line-name strong { margin-top: 4px; font-size: 9px; }.current-call-line span, .call-line-name span { margin-top: 3px; color: #70847c; font-size: 8px; }
.call-history { overflow: hidden; border: 1px solid #dde6eb; border-radius: 15px; background: #fff; box-shadow: 0 8px 26px rgba(16,42,67,.035); }.call-history > header > span { color: #8a99a5; font-size: 8px; }
.call-history-list { display: grid; }.call-history-list article { min-width: 0; display: grid; grid-template-columns: 40px minmax(180px,1.2fr) minmax(130px,.7fr) auto; gap: 14px; align-items: center; padding: 15px 21px; border-bottom: 1px solid #edf1f3; }.call-history-list article:last-child { border-bottom: 0; }.call-history-list article:hover { background: #fbfcfd; }
.call-direction-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #1d755e; background: #e9f5f1; font-size: 14px; font-weight: 800; }.call-direction-mark.attention { color: #a55d22; background: #fdf1e6; }.call-direction-mark.muted { color: #718594; background: #edf2f5; }
.call-person { min-width: 0; }.call-person strong, .call-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.call-person strong { font-size: 12px; letter-spacing: -.01em; }.call-person small { margin-top: 5px; color: #81919e; font-size: 8px; }.call-history-list > article > .state-label { justify-self: end; }
.call-history > footer { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 10px 18px; border-top: 1px solid #edf1f3; background: #fafbfc; }.call-history > footer p { margin: 0; color: #83929e; font-size: 8px; }.call-history > footer .secondary-button { min-height: 34px; font-size: 9px; }
.calls-empty { min-height: 220px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: left; }.calls-empty > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 13px; color: #21725d; background: #e9f5f1; font-size: 17px; }.calls-empty h3 { margin: 0; font-size: 12px; }.calls-empty p { margin: 6px 0 0; color: #82929f; font-size: 9px; line-height: 1.55; }
.calls-phone-note { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 11px; align-items: start; margin-top: 15px; padding: 15px 17px; border: 1px solid #dce8e3; border-radius: 12px; color: #3e665a; background: #f6faf8; }.calls-phone-note > span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 9px; font-weight: 800; }.calls-phone-note strong { display: block; font-size: 9px; }.calls-phone-note p { margin: 4px 0 0; color: #71877f; font-size: 8px; line-height: 1.55; }

@media (max-width: 880px) {
  .auth-body { padding: 0; background: #fff; }
  .auth-shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .auth-brand { min-height: 300px; padding: 31px 32px; }
  .auth-intro { margin: 46px 0 30px; }.auth-intro h1 { font-size: 38px; }
  .trust-note { display: none; }
  .auth-panel { padding: 47px 32px 55px; }
  .app-body { grid-template-columns: 75px minmax(0, 1fr); }
  .sidebar { padding: 26px 13px 18px; }
  .sidebar > .wordmark { justify-content: center; margin: 0 0 31px; }.sidebar > .wordmark > span:last-child { display: none; }
  .nav-item { justify-content: center; padding: 0; }.nav-item > span:last-child { display: none; }
  .profile-summary { display: flex; justify-content: center; padding: 8px 0; }.profile-summary > span:not(.avatar), .logout-button { display: none; }
  .welcome-card { grid-template-columns: 1fr .65fr; padding: 31px; }
}

@media (max-width: 650px) {
  .auth-panel { padding-inline: 24px; }.field-row { grid-template-columns: 1fr; }.login-card { padding: 40px 25px; border-radius: 17px; }
  .app-body { display: block; }.sidebar { position: fixed; z-index: 20; top: auto; bottom: 0; width: 100%; height: 67px; padding: 7px 11px; border-top: 1px solid #e1e7ec; border-right: 0; }
  .sidebar > .wordmark, .sidebar-bottom { display: none; }.sidebar nav { height: 100%; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 0; }
  .nav-item { min-height: 52px; flex-direction: column; gap: 2px; border-radius: 8px; font-size: 9px; }.nav-item > span:last-child { display: block; }.nav-icon { height: 23px; font-size: 18px; }
  .content { padding: 27px 18px 94px; }.topbar { align-items: flex-start; }.system-pill { padding: 7px 9px; font-size: 0; }.system-pill i { margin: 0; }
  .welcome-card { min-height: 330px; display: block; padding: 28px 25px; }.device-illustration { position: absolute; width: 155px; height: 125px; right: 0; bottom: 5px; opacity: .62; transform: scale(.75); }
  .welcome-card p { max-width: 330px; }.welcome-card small { max-width: 205px; }
  .metric-grid { grid-template-columns: 1fr; }.metric-grid article { padding: 15px 18px; }.activity-card { padding: 21px; }
  .page-topbar { align-items: flex-start; }.page-topbar .primary-button { flex: 0 0 auto; padding-inline: 12px; }
	.page-actions { align-items: stretch; flex-direction: column-reverse; }.page-actions .secondary-button, .page-actions .primary-button { min-height: 34px; }
  .user-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 15px; }.user-role { display: none; }.user-state { grid-column: 2; }.user-actions { grid-column: 2 / 4; justify-content: flex-start; padding-top: 4px; }
  .form-content { padding-inline: 18px; }.form-page-header h1 { font-size: 25px; }.settings-form section { padding: 22px 20px; }.settings-form .field-row { grid-template-columns: 1fr; }.settings-form footer { padding: 15px; }
	.archive-grid { grid-template-columns: 1fr; }.archive-card > header { padding-inline: 16px; }.archive-stats { margin-inline: 16px; }.archive-meta { padding-inline: 16px; }.archive-card > footer { align-items: stretch; flex-direction: column; padding: 14px 16px; }.archive-card > footer a, .archive-card > footer button { width: 100%; }.purge-impact { padding: 19px; }.purge-impact > div { grid-template-columns: 1fr 1fr; }
  .device-grid { grid-template-columns: 1fr; }.device-card { min-height: 185px; }.install-step { padding: 21px 18px; grid-template-columns: 27px minmax(0, 1fr); gap: 11px; }.command-box textarea { min-height: 135px; padding: 47px 12px 12px; }.command-box button { left: 9px; right: auto; }.form-actions { justify-content: stretch; }.form-actions > * { flex: 1; }
  .detail-card { grid-template-columns: 1fr; }.detail-card > div { border-right: 0; border-bottom: 1px solid #e8edf0; }.detail-card > div:last-child { border-bottom: 0; }.health-grid { grid-template-columns: 1fr; }.health-grid article, .health-grid article:nth-child(odd) { grid-column: auto; border-right: 0; border-bottom: 1px solid #edf1f3; }.health-grid article:last-child { border-bottom: 0; }.next-action-card { align-items: flex-start; flex-direction: column; }.next-action-card form, .next-action-card .primary-button { width: 100%; }
  .access-summary-card { align-items: flex-start; flex-direction: column; }.access-summary-card .secondary-button { width: 100%; }.access-card-header { grid-template-columns: 38px minmax(0, 1fr); padding: 17px; }.access-card-header > .state-label { grid-column: 2; }.access-presets, .access-form fieldset { padding-inline: 17px; }.permission-grid { grid-template-columns: 1fr; }.access-form footer { align-items: stretch; flex-direction: column; padding: 15px 17px; }.access-form footer .primary-button { width: 100%; }
  .settings-heading { align-items: center; }.scope-panel, .setting-section { grid-template-columns: 1fr; gap: 18px; }.scope-panel { padding: 18px; }.scope-options { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scroll-snap-type: x proximity; }.scope-option { flex: 0 0 135px; scroll-snap-align: start; }.settings-sync-card { align-items: flex-start; }.setting-section { padding: 22px 19px; }.setting-fields.two-column { grid-template-columns: 1fr; }.settings-save { grid-template-columns: 1fr; padding: 18px 19px; }.settings-save .primary-button { width: 100%; margin: 0; }.settings-history > header { align-items: flex-start; flex-direction: column; }.history-list article { grid-template-columns: 75px minmax(0, 1fr); gap: 11px; padding: 15px 18px; }.history-list form { grid-column: 2; }.history-list button { width: 100%; }
  .settings-entry-grid { grid-template-columns: 1fr; }.notification-entry { grid-template-columns: 36px minmax(0, 1fr); }.notification-entry > span:last-child { display: none; }.notification-heading { align-items: center; }.notification-intro { grid-template-columns: 37px minmax(0, 1fr); padding: 20px; }.notification-intro-mark { width: 36px; height: 36px; }.notification-grid { grid-template-columns: 1fr; }.notification-upload { grid-template-columns: 1fr; }.notification-upload .primary-button { width: 100%; }.notification-card > header { grid-template-columns: 37px minmax(0, 1fr); }.notification-card > header .state-label { grid-column: 2; justify-self: start; }.notification-details { grid-template-columns: 1fr; }.notification-details div { border-right: 0; border-bottom: 1px solid #edf1f3; }.notification-details div:last-child { border-bottom: 0; }.notification-actions { align-items: stretch; flex-direction: column; }.notification-actions form, .notification-actions .file-button, .notification-actions button { width: 100%; }
  .call-connection-hero { grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 21px; }.call-connection-orbit { width: 56px; height: 56px; }.call-connection-orbit::before { width: 33px; height: 33px; }.call-connection-hero > .state-label { grid-column: 2; justify-self: start; }.call-paths { grid-template-columns: 1fr; }.call-paths article { grid-template-columns: 37px minmax(0, 1fr); }.call-paths article > .state-label { grid-column: 2; justify-self: start; }.call-check-card { align-items: stretch; flex-direction: column; }.call-check-card .primary-button { width: 100%; }.call-firewall header { align-items: flex-start; flex-direction: column; }.call-firewall header p { text-align: left; }.call-firewall dl { grid-template-columns: 1fr; }.call-firewall dl div { border-right: 0; border-bottom: 1px solid #edf1f3; }.call-firewall dl div:last-child { border-bottom: 0; }
  .display-time-preview { grid-template-columns: 55px minmax(0, 1fr); gap: 15px; padding: 21px; }.display-time-clock { width: 52px; height: 52px; }.display-time-clock i, .display-time-clock b { left: 25px; top: 25px; }.display-time-clock i { height: 15px; }.display-time-clock b { height: 11px; }.display-time-preview > .state-label { grid-column: 2; justify-self: start; }.display-time-fields { grid-template-columns: 1fr; padding-inline: 19px; }.display-time-fields .secondary-button { width: 100%; }.display-time-form > header { padding-inline: 19px; }.display-time-form footer { align-items: stretch; flex-direction: column; padding-inline: 19px; }.display-time-form footer .primary-button { width: 100%; }.display-time-explainer { grid-template-columns: 1fr; }
  .protection-hero { grid-template-columns: 55px minmax(0,1fr); gap: 16px; padding: 21px; }.protection-mark { width: 52px; height: 52px; border-radius: 16px; }.protection-mark::before { width: 21px; height: 25px; }.protection-hero > .state-label { grid-column: 2; justify-self: start; }.protection-facts { grid-template-columns: 1fr; }.protection-actions { align-items: stretch; flex-direction: column; }.protection-actions > div:last-child { align-items: stretch; flex-direction: column; }.protection-actions form, .protection-actions button { width: 100%; }.protection-history > header { align-items: flex-start; flex-direction: column; gap: 5px; }.protection-history-list article { grid-template-columns: 34px minmax(0,1fr); padding-inline: 18px; }.protection-history-list .state-label { grid-column: 2; justify-self: start; }.protection-section { grid-template-columns: 1fr; gap: 18px; padding: 21px 19px; }.protection-fields.two-column { grid-template-columns: 1fr; }.external-protection { grid-template-rows: auto; }.protection-details { grid-column: auto; }.protection-details summary { align-items: flex-start; flex-direction: column; gap: 5px; }.protection-save { align-items: stretch; flex-direction: column; padding-inline: 19px; }.protection-save .primary-button { width: 100%; }
  .update-heading { align-items: center; }.update-publish-copy { grid-template-columns: 37px minmax(0, 1fr); padding: 20px; }.update-publish-mark { width: 36px; height: 36px; }.update-publish form { grid-template-columns: 1fr; padding: 17px; }.update-publish .primary-button { width: 100%; }.update-history > header { align-items: flex-start; flex-direction: column; }.update-release-list article { grid-template-columns: 1fr; gap: 13px; padding: 18px; }.update-release-state { justify-items: start; }.update-release-state form, .update-release-state button { width: 100%; }
  .calls-heading { align-items: center; }.calls-app-pill { min-width: 0; grid-template-columns: 33px; padding: 7px; }.calls-app-pill > span { display: none; }.line-choice { min-width: 150px; }.current-call-grid { grid-template-columns: 1fr; }.current-call-card { grid-template-columns: 50px minmax(0,1fr); gap: 13px; }.current-call-orbit { width: 49px; height: 49px; }.current-call-line { grid-column: 2; padding: 10px 0 0; border-top: 1px solid #dce8e3; border-left: 0; }.call-history-list article { grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; padding: 14px 16px; }.call-line-name { grid-column: 2; }.call-history-list > article > .state-label { grid-column: 3; grid-row: 1; }.calls-empty { min-height: 190px; padding-inline: 20px; }
}

@media (prefers-reduced-transparency: reduce) { .protection-hero { background: #eef7f3; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }