:root {
  --ink: #172033;
  --muted: #697386;
  --line: #e8ebf0;
  --surface: #ffffff;
  --canvas: #f4f5f7;
  --navy: #101b2d;
  --navy-2: #17263d;
  --brand: #d7753b;
  --brand-dark: #bd5d27;
  --green: #238c67;
  --violet: #7465d8;
  --orange: #e29a3f;
  --shadow: 0 16px 42px rgba(20, 31, 49, .08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--canvas); }
body:not(.authenticated) .app-shell { visibility: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.auth-gate { position: fixed; z-index: 100; inset: 0; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 75% 20%, rgba(215,117,59,.13), transparent 32%), linear-gradient(145deg,#0f1b2d,#17263c); }
.auth-gate.hidden { display: none; }
.auth-card { width: min(430px,100%); padding: 32px; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.32); }
.auth-brand { margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.auth-brand strong, .auth-brand small { display:block; }
.auth-brand strong { letter-spacing: .12em; }
.auth-brand small { margin-top:2px; color:#8d96a5; font-size:9px; letter-spacing:.18em; }
.auth-form h1 { margin: 6px 0 7px; font-family: Georgia,serif; font-size: 26px; font-weight: 500; }
.auth-form > p { margin: 0 0 22px; color: #7f8999; font-size: 11px; line-height: 1.55; }
.auth-form label { display:block; margin-top:13px; }
.auth-form label span { display:block; margin-bottom:7px; color:#4d586a; font-size:10px; font-weight:650; }
.auth-form input { width:100%; height:43px; padding:0 12px; border:1px solid #dfe3e9; border-radius:9px; outline:0; }
.auth-form input:focus { border-color:#b6bdc9; box-shadow:0 0 0 3px rgba(215,117,59,.08); }
.auth-password-field { position: relative; }
.auth-password-field input { padding-right: 48px; }
.password-visibility { position: absolute; right: 5px; top: 4px; width: 35px; height: 35px; padding: 0; border: 0; border-radius: 7px; color: #737e8f; background: transparent; display: grid; place-items: center; }
.password-visibility:hover, .password-visibility:focus-visible { color: var(--brand); background: #fff5ef; outline: 0; }
.password-visibility svg { width: 17px; height: 17px; }
.auth-form .primary-button { margin-top:16px; }
.auth-error { display:block; min-height:17px; margin-top:10px; color:#c55151; font-size:10px; line-height:1.4; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 246px; color: #fff; background: var(--navy); display: flex; flex-direction: column; padding: 28px 18px 18px; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 10px 32px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 10px 10px 10px 3px; font-family: Georgia, serif; font-size: 24px; font-weight: 700; box-shadow: 0 8px 20px rgba(215,117,59,.25); }
.brand strong { display: block; font-size: 14px; letter-spacing: .14em; }
.brand small { display: block; color: #8390a4; font-size: 9px; letter-spacing: .26em; margin-top: 3px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { position: relative; width: 100%; border: 0; color: #9eabba; background: transparent; border-radius: 10px; padding: 12px 13px; display: flex; align-items: center; gap: 12px; text-align: left; font-size: 14px; transition: .18s ease; }
.nav-item::before { content: ""; position: absolute; left: -18px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.045); }
.nav-item.active { color: #fff; background: var(--navy-2); }
.nav-item.active::before { background: var(--brand); }
.nav-item svg { width: 18px; height: 18px; }
.nav-item b { margin-left: auto; min-width: 22px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 10px; background: rgba(215,117,59,.18); color: #efa372; font-size: 11px; }
.sidebar-status { margin-top: auto; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); padding: 14px; border-radius: 12px; }
.status-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #4bc795; box-shadow: 0 0 0 4px rgba(75,199,149,.12); }
.sidebar-status p { color: #718096; font-size: 10px; margin: 10px 0 2px; }
.sidebar-status time { font-size: 11px; color: #a8b3c2; }
.sidebar-user { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 9px; margin-top: 14px; padding: 12px 8px 2px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-user strong, .sidebar-user span { display: block; }
.sidebar-user strong { font-size: 12px; }
.sidebar-user span { margin-top: 2px; color: #758398; font-size: 10px; }
.sidebar-user button { border: 0; background: transparent; color: #718096; padding: 3px; }
.sidebar-user button:hover { color: white; }
.sidebar-user svg { width: 17px; height: 17px; }
.avatar { width: 38px; height: 38px; border-radius: 12px; color: #253047; background: #edf0f5; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.avatar-admin { width: 34px; height: 34px; color: #f0b18b; background: #263752; }

.main-content { min-width: 0; grid-column: 2; }
.topbar { height: 70px; position: sticky; top: 0; z-index: 12; padding: 0 40px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(14px); }
.breadcrumbs { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #8a93a3; }
.breadcrumbs i { color: #c5cad2; font-style: normal; }.breadcrumbs b { color: #445066; }
.top-actions { display: flex; align-items: center; gap: 11px; }
.icon-button { position: relative; width: 38px; height: 38px; border: 1px solid var(--line); color: #596578; background: #fff; border-radius: 10px; display: grid; place-items: center; }
.icon-button span { position: absolute; right: 8px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); border: 1px solid #fff; }
.icon-button svg { width: 17px; height: 17px; }
.primary-button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; color: white; background: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 650; box-shadow: 0 7px 18px rgba(215,117,59,.18); transition: .18s ease; }
.primary-button:hover { background: var(--brand-dark); transform: translateY(-1px); }
.primary-button svg { width: 16px; height: 16px; stroke-width: 2.2; }
.content-wrap { max-width: 1480px; margin: 0 auto; padding: 33px 40px 60px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow, .modal-kicker { margin: 0 0 9px; color: var(--brand); font-size: 9px; font-weight: 750; letter-spacing: .18em; }
.page-heading h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 3vw, 35px); font-weight: 500; letter-spacing: -.025em; }
.page-heading > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.date-card { min-width: 144px; padding-left: 18px; border-left: 1px solid #dfe3e9; }
.date-card span, .date-card strong { display: block; }.date-card span { color: #929aa8; font-size: 10px; margin-bottom: 5px; }.date-card strong { font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.page-section { display: none; }.page-section.active { display: block; animation: appear .25s ease; }
@keyframes appear { from { opacity: 0; transform: translateY(4px); } }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { position: relative; min-height: 127px; padding: 23px 20px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; display: flex; gap: 15px; overflow: hidden; }
.stat-card.accent::after { content: ""; position: absolute; right: -40px; bottom: -42px; width: 110px; height: 110px; border: 18px solid rgba(215,117,59,.07); border-radius: 50%; }
.stat-icon { flex: 0 0 auto; width: 38px; height: 38px; color: var(--brand); background: #fff1e9; border-radius: 10px; display: grid; place-items: center; }
.stat-icon.green { color: var(--green); background: #eaf7f2; }.stat-icon.violet { color: var(--violet); background: #f0eefc; }.stat-icon.orange { color: var(--orange); background: #fff5e8; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-card span, .stat-card strong, .stat-card small { display: block; }
.stat-card span { color: #778192; font-size: 11px; }
.stat-card strong { margin: 5px 0 4px; font-family: Georgia, serif; font-size: 29px; font-weight: 500; line-height: 1; }
.stat-card small { color: #929aa6; font-size: 9.5px; white-space: nowrap; }.stat-card small em { color: var(--green); font-style: normal; font-weight: 650; }

.services-panel, .employees-panel, .activity-panel { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(20,31,49,.035); }
.services-panel { padding: 23px; margin-bottom: 18px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.section-title-row h2 { margin: 0; font-family: Georgia, serif; font-size: 19px; font-weight: 500; }
.section-title-row p { margin: 5px 0 0; color: #8992a1; font-size: 10.5px; }
.text-button { border: 0; background: transparent; color: var(--brand); display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 650; }.text-button svg { width: 14px; height: 14px; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.service-card { min-width: 0; border: 1px solid #eceef2; border-radius: 12px; padding: 16px; display: flex; align-items: flex-start; gap: 13px; transition: .18s ease; }.service-card:hover { border-color: #dce0e7; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(20,31,49,.06); }
.service-logo { flex: 0 0 auto; width: 39px; height: 39px; border-radius: 10px; display: grid; place-items: center; }
.service-logo.stone { color: #fff; background: var(--navy); font-family: Georgia, serif; font-size: 19px; }.service-logo.files { color: #6c62cc; background: #eeecff; }.service-logo.mail { color: #3d85b9; background: #eaf5fb; }
.service-logo svg { width: 18px; height: 18px; }.service-logo.small { width: 35px; height: 35px; border-radius: 9px; }
.service-info { min-width: 0; flex: 1; }.service-info > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 7px; }.service-info h3 { margin: 1px 0 0; font-size: 12px; }.service-info > p { margin: 4px 0 13px; color: #929aa6; font-size: 9.5px; }
.online { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: #4a9b7d; font-size: 8px; }.online i { width: 5px; height: 5px; border-radius: 50%; background: #4eb88d; }
.online.pending { color: #a16a28; }.online.pending i { background: #e29a3f; }
.integration-warning { display: flex; align-items: flex-start; gap: 9px; margin: 16px 26px 0; padding: 11px 13px; border: 1px solid #efd8b5; border-radius: 10px; color: #835a25; background: #fff9ef; font-size: 9px; line-height: 1.45; }.integration-warning svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.usage > span { display: block; color: #8a93a1; font-size: 9px; }.usage > span b { color: #4b5668; }.usage > div { height: 3px; margin-top: 6px; background: #eff1f4; border-radius: 4px; overflow: hidden; }.usage > div i { display: block; width: 0; height: 100%; background: var(--brand); border-radius: inherit; transition: width .5s ease; }.service-card:nth-child(2) .usage i { background: var(--violet); }.service-card:nth-child(3) .usage i { background: #5b9aca; }

.compact-panel { padding: 23px 23px 8px; }.full-panel { min-height: 450px; overflow: hidden; }.compact-panel table { margin: 0 -3px; width: calc(100% + 6px); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { padding: 11px 13px; border-bottom: 1px solid var(--line); color: #9aa2af; text-align: left; font-size: 9px; font-weight: 650; letter-spacing: .025em; text-transform: uppercase; }
td { padding: 13px; border-bottom: 1px solid #eff1f4; color: #536074; white-space: nowrap; }
tbody tr { transition: .15s ease; }.compact-panel tbody tr:last-child td, .full-panel tbody tr:last-child td { border-bottom: 0; }.employees-panel tbody tr:hover { background: #fbfbfc; }
.employee-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }.employee-cell strong, .employee-cell span { display: block; }.employee-cell strong { color: #263147; font-size: 11px; }.employee-cell span { margin-top: 3px; color: #929aa8; font-size: 9.5px; }
.avatar.color-0 { color: #96603f; background: #f7e9df; }.avatar.color-1 { color: #4c739b; background: #e5f0f7; }.avatar.color-2 { color: #5e5599; background: #eeeafb; }.avatar.color-3 { color: #357c65; background: #e4f4ef; }.avatar.color-4 { color: #8d6c3f; background: #f8efd9; }
.access-badges { display: flex; align-items: center; }.access-badge { width: 27px; height: 27px; margin-left: -5px; display: grid; place-items: center; border: 2px solid white; border-radius: 8px; color: white; background: var(--navy); font-family: Georgia,serif; font-size: 11px; }.access-badge:first-child { margin-left: 0; }.access-badge.files { background: #7465d8; }.access-badge.mail { background: #4d93be; }.access-badge svg { width: 12px; height: 12px; stroke-width: 2; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px; color: #328367; background: #eaf6f1; font-size: 9px; font-weight: 650; }.status-pill i { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }.status-pill.paused { color: #a16a28; background: #fff3e2; }
.action-trigger { width: 30px; height: 30px; border: 0; color: #8b94a2; background: transparent; border-radius: 8px; display: grid; place-items: center; }.action-trigger:hover { color: #333e51; background: #f0f2f5; }.action-trigger svg { width: 17px; height: 17px; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.search-field { flex: 1; max-width: 360px; min-width: 220px; height: 38px; padding: 0 12px; border: 1px solid #dde1e8; border-radius: 9px; display: flex; align-items: center; gap: 9px; background: #fff; }.search-field:focus-within { border-color: #b9c1cd; box-shadow: 0 0 0 3px rgba(23,32,51,.04); }.search-field svg { width: 16px; height: 16px; color: #8c95a4; }.search-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.toolbar select { height: 38px; min-width: 130px; padding: 0 31px 0 11px; border: 1px solid #dde1e8; border-radius: 9px; color: #536074; background: white; font-size: 10.5px; outline: 0; }
.result-count { margin-left: auto; color: #929aa8; font-size: 10px; }.empty-state { display: none; padding: 70px 20px; text-align: center; }.empty-state.show { display: block; }.empty-state div { font-family: Georgia,serif; font-size: 20px; }.empty-state p { color: #8c95a4; font-size: 11px; }

.integration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.integration-card { position: relative; overflow: hidden; min-height: 285px; padding: 24px; border: 1px solid var(--line); background: white; border-radius: 16px; }.integration-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border: 20px solid #f5f6f8; border-radius: 50%; }.integration-card > * { position: relative; z-index: 1; }.integration-card .service-logo { width: 46px; height: 46px; margin-bottom: 24px; }.integration-card h2 { margin: 0; font-family: Georgia,serif; font-size: 20px; font-weight: 500; }.integration-card > p { min-height: 36px; margin: 7px 0 24px; color: var(--muted); font-size: 11px; line-height: 1.55; }.integration-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }.integration-metrics div { padding: 12px; border-radius: 10px; background: #f7f8fa; }.integration-metrics span, .integration-metrics strong { display: block; }.integration-metrics span { color: #8d96a4; font-size: 9px; }.integration-metrics strong { margin-top: 4px; font-family: Georgia,serif; font-size: 18px; font-weight: 500; }.integration-card footer { padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }.integration-card footer span { color: #8992a0; font-size: 9px; }
.activity-panel { padding: 24px; }.activity-list { display: grid; }.activity-item { position: relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 13px; padding: 15px 2px; border-top: 1px solid #eff1f4; }.activity-item:first-child { border-top: 0; }.activity-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--brand); background: #fff0e7; border-radius: 10px; }.activity-icon svg { width: 16px; height: 16px; }.activity-item strong { display: block; font-size: 11px; }.activity-item p { margin: 4px 0 0; color: #828c9d; font-size: 10px; }.activity-item time { color: #9da4af; font-size: 9px; }
.activity-empty { padding: 56px 18px; color: #8490a0; text-align: center; }.activity-empty strong, .activity-empty span { display: block; }.activity-empty strong { color: #445066; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }.activity-empty span { margin-top: 7px; font-size: 10px; }.primary-button:disabled { cursor: wait; opacity: .65; transform: none; }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; padding: 24px; background: rgba(9,16,28,.58); display: none; place-items: center; backdrop-filter: blur(3px); }.modal-backdrop.open { display: grid; animation: fade .18s ease; }@keyframes fade { from { opacity: 0; } }
.modal { width: min(620px,100%); max-height: calc(100vh - 48px); overflow-y: auto; border-radius: 18px; background: white; box-shadow: 0 28px 80px rgba(0,0,0,.24); }.modal-header { padding: 24px 26px 19px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; }.modal-header h2, .credentials-modal h2 { margin: 0; font-family: Georgia,serif; font-size: 24px; font-weight: 500; }.modal-header p { margin: 6px 0 0; color: #7e8899; font-size: 10.5px; }.close-modal, .corner-close { width: 34px; height: 34px; border: 0; color: #737e8f; background: #f3f4f6; border-radius: 9px; display: grid; place-items: center; }.close-modal svg, .corner-close svg { width: 16px; height: 16px; }
#employeeForm { padding: 20px 26px 0; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.form-grid label > span { display: block; margin-bottom: 7px; color: #4d586a; font-size: 10px; font-weight: 650; }.form-grid label > span em { color: #9aa2ae; font-style: normal; font-weight: 400; }.form-grid input, .form-grid select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #dfe3e9; border-radius: 9px; color: #2d384d; background: white; outline: 0; font-size: 11px; transition: .15s ease; }.form-grid input:focus, .form-grid select:focus { border-color: #b6bdc9; box-shadow: 0 0 0 3px rgba(215,117,59,.07); }.form-grid .full { grid-column: 1/-1; }.form-grid small { display: block; margin-top: 6px; min-height: 12px; color: #9099a7; font-size: 9px; }.form-grid small.error { color: #c55151; }
.email-composer { display: grid; grid-template-columns: 1fr auto; }.email-composer input { border-radius: 9px 0 0 9px; }.email-composer b { height: 40px; padding: 0 12px; border: 1px solid #dfe3e9; border-left: 0; border-radius: 0 9px 9px 0; color: #647084; background: #f6f7f9; display: flex; align-items: center; font-size: 10.5px; font-weight: 550; }
.password-field > div { display: grid; grid-template-columns: 1fr 40px auto; }.password-field input { border-radius: 9px 0 0 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.password-field button { border: 1px solid #dfe3e9; border-left: 0; color: #647084; background: white; }.password-field button:nth-of-type(1) { display: grid; place-items: center; }.password-field button:last-child { padding: 0 12px; border-radius: 0 9px 9px 0; color: var(--brand); background: #fff9f5; display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 650; }.password-field button svg { width: 15px; height: 15px; }
.access-fieldset { margin: 20px 0 0; padding: 0; border: 0; }.access-fieldset legend { margin-bottom: 9px; color: #4d586a; font-size: 10px; font-weight: 650; }.access-option { position: relative; min-height: 54px; margin-top: 7px; padding: 8px 12px; border: 1px solid #e4e7ec; border-radius: 10px; display: grid; grid-template-columns: 35px 1fr 34px; align-items: center; gap: 10px; cursor: pointer; }.access-option:has(input:checked) { border-color: #e4c0aa; background: #fffbf8; }.access-option strong, .access-option small { display: block; }.access-option strong { font-size: 10.5px; }.access-option small { margin-top: 3px; color: #9099a7; font-size: 9px; }.access-option input { position: absolute; opacity: 0; }.access-option > i { position: relative; width: 31px; height: 18px; border-radius: 12px; background: #c8ced7; transition: .2s; }.access-option > i::after { content:""; position:absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: .2s; }.access-option input:checked + i { background: var(--brand); }.access-option input:checked + i::after { transform: translateX(13px); }
.modal-footer { margin: 22px -26px 0; padding: 16px 26px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }.secondary-button { min-height: 40px; padding: 0 16px; border: 1px solid #dfe3e9; color: #596578; background: white; border-radius: 9px; font-size: 11px; }.secondary-button:hover { background: #f6f7f9; }
.credentials-modal { position: relative; width: min(440px,100%); padding: 30px; text-align: center; overflow: visible; }.corner-close { position: absolute; right: 17px; top: 17px; }.success-icon { width: 52px; height: 52px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 0 0 8px #eaf7f2; }.success-icon svg { width: 22px; height: 22px; stroke-width: 2.4; }.credentials-modal > p:not(.modal-kicker) { max-width: 330px; margin: 8px auto 20px; color: #7f8999; font-size: 10.5px; line-height: 1.5; }.credentials-box { padding: 4px 14px; border: 1px solid #e2e6eb; border-radius: 12px; background: #f8f9fa; text-align: left; }.credentials-box label { display: block; padding: 12px 0; }.credentials-box label + label { border-top: 1px solid #e2e6eb; }.credentials-box span { display: block; margin-bottom: 6px; color: #8a93a1; font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; }.credentials-box label > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.credentials-box code { font-size: 12px; color: #243047; word-break: break-all; }.copy-button { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid #dde1e7; border-radius: 8px; color: #607086; background: white; display: grid; place-items: center; }.copy-button svg { width: 14px; height: 14px; }.security-note { margin: 14px 0; padding: 10px; color: #6f7890; background: #f4f2fb; border-radius: 9px; display: flex; align-items: center; gap: 8px; text-align: left; font-size: 9px; }.security-note svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--violet); }.wide { width: 100%; }
.popover { position: fixed; z-index: 40; display: none; width: 188px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow); }.popover.open { display: block; }.popover button { width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; color: #4d586a; background: transparent; display: flex; align-items: center; gap: 9px; text-align: left; font-size: 10px; }.popover button:hover { background: #f5f6f8; }.popover button.danger { color: #ae5f35; }.popover svg { width: 15px; height: 15px; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: 30px; min-width: 240px; padding: 12px 16px; border-radius: 10px; color: white; background: #182338; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 14px 38px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translate(-50%,12px); transition: .2s ease; font-size: 10.5px; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast svg { width: 15px; height: 15px; color: #63d4a4; }
.mobile-menu { display: none; width: 36px; height: 36px; border: 0; border-radius: 9px; color: #4f5c70; background: #f3f4f6; place-items: center; }

@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2,1fr); }.service-grid, .integration-grid { grid-template-columns: 1fr; }.service-card { padding: 15px 18px; }.integration-card { min-height: 240px; } }
@media (max-width: 760px) {
  .app-shell { display: block; }.main-content { min-width: 0; }.sidebar { transform: translateX(-100%); transition: .22s ease; box-shadow: 18px 0 50px rgba(0,0,0,.2); }.sidebar.open { transform: translateX(0); }.topbar { height: 62px; padding: 0 16px; }.mobile-menu { display: grid; }.breadcrumbs { display: none; }.top-actions .icon-button { display: none; }.top-actions .primary-button { min-height: 36px; padding: 0 12px; }.content-wrap { padding: 24px 16px 40px; }.page-heading { align-items: flex-start; }.date-card { display: none; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.stat-card { min-height: 112px; padding: 16px 13px; gap: 10px; }.stat-icon { width: 32px; height: 32px; }.stat-card strong { font-size: 23px; }.services-panel, .compact-panel { padding: 18px; }.toolbar { flex-wrap: wrap; }.search-field { max-width: none; width: 100%; }.result-count { width: 100%; }.form-grid { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }.modal-backdrop { padding: 10px; }.modal { max-height: calc(100vh - 20px); }.modal-header, #employeeForm { padding-left: 18px; padding-right: 18px; }.modal-footer { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }.password-field > div { grid-template-columns: 1fr 38px; }.password-field button:last-child { grid-column: 1/-1; height: 36px; justify-content: center; border: 1px solid #dfe3e9; border-top: 0; border-radius: 0 0 9px 9px; }.password-field input { border-radius: 9px 0 0 0; }.password-field button:nth-of-type(1) { border-radius: 0 9px 0 0; }
}
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; }.stat-card { min-height: 96px; }.page-heading h1 { font-size: 27px; }.top-actions .primary-button { font-size: 0; }.top-actions .primary-button svg { margin: 0; }.email-composer { grid-template-columns: 1fr; }.email-composer input { border-radius: 9px 9px 0 0; }.email-composer b { border-left: 1px solid #dfe3e9; border-top: 0; border-radius: 0 0 9px 9px; justify-content: flex-end; } }