* { box-sizing: border-box; }
:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color: #202623; background: #f5f7f6; font-size: 14px; font-synthesis: none; letter-spacing: 0; --green: #157354; --border: #e3e8e5; --muted: #738078; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 1.7; }
button:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: 3px solid #75bb9e; outline-offset: 3px; }
input, select { width: 100%; height: 43px; border: 1px solid #d7dfda; background: #fff; border-radius: 6px; padding: 0 13px; color: #25332b; min-width: 0; }
input:focus, select:focus { border-color: var(--green); outline: 2px solid #e0eee7; }
input::placeholder { color: #929a95; }
h1, h2, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: 27px; line-height: 1.45; font-weight: 650; }
h2 { font-size: 16px; font-weight: 620; }
label { display: flex; flex-direction: column; gap: 9px; font-size: 13px; font-weight: 500; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sidebar { width: 228px; height: 100dvh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; padding: 31px 18px 16px; background: #fff; border-right: 1px solid var(--border); z-index: 10; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; font-size: 19px; font-weight: 650; }
.brand-mark { display: grid; place-items: center; background: var(--green); border-radius: 8px; width: 38px; height: 38px; color: white; }
.brand-mark svg { width: 23px; height: 23px; }
.brand small { display: block; font-size: 9px; color: #8a958f; font-weight: 500; margin-top: 4px; }
.workspace-label { margin: 45px 15px 15px; font-size: 11px; color: #97a199; }
.sidebar nav { display: flex; flex-direction: column; gap: 6px; }
.nav-item { display: flex; gap: 12px; align-items: center; padding: 13px 15px; border-radius: 6px; color: #69766e; height: 46px; }
.nav-item.selected { background: #eaf4ee; color: #136b4a; font-weight: 600; }
.nav-item:hover { background: #f1f6f3; }
.nav-count { margin-left: auto; font-size: 11px; min-width: 20px; text-align: center; background: #edf0ed; border-radius: 4px; padding: 2px 5px; color: #79867d; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--border); padding-top: 19px; }
.profile { display: flex; align-items: center; gap: 10px; padding: 0 9px; min-width: 0; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #eaf0e9; color: #567154; display: grid; place-items: center; flex-shrink: 0; }
.profile-name { min-width: 0; flex: 1; overflow-wrap: anywhere; font-weight: 600; font-size: 13px; }
.profile-name small { display: block; font-size: 11px; font-weight: 400; color: #8c958e; margin-top: 4px; }
.profile > svg { color: #8a958f; width: 17px; }
.logout { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 0; color: #7b857f; padding: 19px 17px 6px; font-size: 12px; }
.logout svg { width: 16px; }
.shell { margin-left: 228px; min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { min-height: 75px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 36px; border-bottom: 1px solid var(--border); background: #fff; }
.breadcrumb { display: flex; align-items: center; gap: 13px; color: #919a94; font-size: 12px; }
.breadcrumb strong { font-weight: 500; color: #46554b; }
.topbar-right { display: flex; align-items: center; gap: 7px; color: #7b877f; font-size: 11px; }
.topbar-right time { margin-left: 21px; padding-left: 23px; border-left: 1px solid var(--border); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #57a580; }
main#main { max-width: 1510px; width: 100%; margin: 0 auto; padding: 35px 36px 20px; flex: 1; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 29px; }
.eyebrow { display: block; color: #88968d; font-size: 10px; margin-bottom: 7px; font-weight: 600; }
.heading-tag { display: flex; gap: 7px; align-items: center; color: #64796a; font-size: 12px; border: 1px solid #dce7df; border-radius: 5px; padding: 8px 11px; max-width: 45%; overflow-wrap: anywhere; }
.heading-tag svg { width: 15px; }
.metrics { display: flex; background: white; border: 1px solid var(--border); padding: 24px 0; margin-bottom: 28px; }
.metric { flex: 1; min-width: 0; padding: 0 27px; position: relative; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--border); }
.metric:last-child { border: 0; }
.metric > span:first-child { color: #87928b; font-size: 12px; }
.metric strong { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; padding-right: 40px; overflow-wrap: anywhere; }
.metric-icon { position: absolute; right: 27px; top: 13px; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; }
.green { background: #edf5ef; color: #4b8a65; }
.blue { background: #edf3f9; color: #658bb7; }
.amber { background: #fbf3e7; color: #b59455; }
.entry-section { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px 0 28px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.section-title { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.section-symbol { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #cbded0; border-radius: 6px; color: #4c8760; }
.section-symbol svg { width: 17px; }
.entry-form { display: flex; gap: 12px; width: 78%; max-width: 850px; flex-wrap: wrap; }
.entry-form select { width: 170px; max-width: 100%; flex-shrink: 0; }
.entry-form .phone-input { min-width: 180px; }
.phone-prefix b { font-weight: 550; }
.phone-input { display: flex; flex: 1; min-width: 0; height: 44px; border: 1px solid #d7dfda; background: white; border-radius: 6px; }
.phone-prefix { padding: 0 14px; display: flex; align-items: center; font-weight: 550; font-size: 14px; color: #52675a; white-space: nowrap; }
.phone-prefix span { height: 20px; width: 1px; background: var(--border); margin-left: 14px; }
.phone-input input { border: none; height: 42px; padding-left: 0; background: transparent; border-radius: 0 6px 6px 0; font-size: 15px; }
.phone-input:focus-within { border-color: var(--green); outline: 2px solid #e0eee7; }
.phone-input input:focus { outline: none; }
.button { height: 43px; display: inline-flex; gap: 8px; justify-content: center; align-items: center; border: 1px solid transparent; border-radius: 6px; padding: 0 17px; font-size: 13px; font-weight: 550; white-space: nowrap; flex-shrink: 0; }
.button svg { width: 17px; height: 17px; }
.primary { color: white; background: var(--green); border-color: var(--green); }
.primary:hover { background: #0f6145; }
.secondary { background: white; border-color: #dce3de; color: #53655a; }
.secondary:hover { background: #edf3ef; }
.danger { background: #b64442; color: white; }
.danger:hover { background: #a03634; }
.full { width: 100%; }
.icon-button { width: 34px; height: 34px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #7e8c83; border: 1px solid transparent; border-radius: 5px; }
.icon-button svg { width: 16px; height: 16px; }
.icon-button:hover:not(:disabled) { background: #edf2ee; color: var(--green); }
.icon-button.destructive:hover { background: #f9eae8; color: #b64b43; }
.data-section { width: 100%; margin-top: 10px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 0; min-height: 72px; }
.section-heading h2 { display: flex; align-items: center; gap: 9px; }
.count-label { background: #e7ede8; color: #718176; padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.filters { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
.export-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; padding: 14px 0; border-top: 1px solid var(--border); }
.export-bar label { flex-direction: row; align-items: center; color: #74857a; margin-right: 4px; white-space: nowrap; }
.export-bar select { width: 175px; }
.length-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.check-field { flex-direction: row; align-items: center; }
.check-field input { width: 18px; height: 18px; accent-color: var(--green); }
.region-cell { max-width: 180px; min-width: 90px; }
.search-field { display: flex; flex-direction: row; align-items: center; position: relative; width: 320px; max-width: 100%; }
.search-field svg { position: absolute; left: 12px; color: #a2aca5; width: 17px; }
.search-field input { padding-left: 37px; font-size: 12px; }
.filters select { max-width: 174px; font-size: 12px; color: #6f7e74; }
.filters .button { height: 43px; }
.table-scroll { width: 100%; overflow-x: auto; background: white; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
thead { background: #f8faf8; }
th { height: 45px; font-size: 11px; color: #8c978f; font-weight: 500; padding: 0 20px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { height: 61px; padding: 12px 20px; border-bottom: 1px solid #edf0ed; color: #53655a; overflow-wrap: anywhere; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfb; }
.id-cell { width: 67px; color: #9ca79f; font-size: 11px; }
.phone-number { color: #344f40; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.person-cell { display: flex; align-items: center; gap: 9px; min-width: 80px; }
.person-cell > span:last-child { max-width: 160px; overflow-wrap: anywhere; }
.mini-avatar { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #edf0e9; color: #83916f; font-size: 10px; }
td time { color: #8a968d; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.actions-cell { width: 107px; text-align: right; }
.row-actions { display: flex; gap: 3px; justify-content: flex-end; }
.row-actions form { margin: 0; }
.empty-cell { text-align: center; height: 216px; }
.empty-icon { display: grid; place-items: center; margin: 0 auto 14px; width: 54px; height: 54px; border-radius: 50%; color: #9daf9f; background: #f2f6f2; }
.empty-icon svg { width: 25px; height: 25px; }
.empty-cell strong { font-size: 12px; font-weight: 400; color: #97a198; }
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; gap: 12px; color: #91a096; font-size: 11px; }
.pager-controls { display: flex; align-items: center; gap: 12px; color: #79897f; white-space: nowrap; }
.pager-controls .icon-button { border-color: #e0e7e1; background: white; width: 28px; height: 28px; }
.page-footer { padding: 25px 36px 23px; display: flex; justify-content: space-between; color: #a4ada6; font-size: 10px; }
.alert { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 6px; font-size: 13px; margin-bottom: 22px; overflow-wrap: anywhere; line-height: 1.7; }
.alert.success { color: #2f7850; background: #e7f3e9; border: 1px solid #d4e8d7; }
.alert.error { color: #ab4943; background: #fcf0ed; border: 1px solid #f0dcd6; }
.alert > span { flex: 1; }
.alert .icon-button { margin-left: auto; }
.stack { display: flex; flex-direction: column; gap: 21px; }
dialog { border: 1px solid #e0e6e0; border-radius: 8px; width: min(440px, calc(100% - 32px)); padding: 26px; color: #304439; box-shadow: 0 20px 90px #15271c26; max-height: calc(100dvh - 40px); overflow-y: auto; }
dialog::backdrop { background: #17271e66; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-heading h2 { font-size: 19px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.confirm-message { color: #79857c; font-size: 13px; line-height: 1.9; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.active { color: #4f936d; }
.status-badge.inactive { color: #ab8983; }
.detail-cell { min-width: 220px; max-width: 500px; line-height: 1.7; font-size: 12px; }
.event-label { white-space: nowrap; font-size: 12px; }
.account-section { padding: 15px 0; border-top: 1px solid var(--border); }
.account-summary { display: flex; align-items: center; gap: 15px; padding: 10px 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--border); }
.account-summary p { font-size: 12px; color: #85958a; margin-top: 7px; }
.avatar.large { width: 48px; height: 48px; font-size: 21px; }
.password-form { max-width: 400px; margin-top: 23px; }
.password-form .button { align-self: flex-start; }
.login-page { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 75px 24px; background: #f4f7f4; }
.login-brand { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 650; color: #315d46; position: absolute; top: 32px; left: 40px; }
.login-brand svg { width: 27px; height: 27px; color: #428c61; }
.login-panel { width: 100%; max-width: 380px; }
.login-symbol { width: 49px; height: 49px; color: #498d64; background: #e4efe6; display: grid; place-items: center; border-radius: 8px; margin-bottom: 24px; }
.login-symbol svg { width: 24px; height: 24px; }
.login-panel h1 { font-size: 27px; margin-bottom: 11px; }
.login-panel > .muted { font-size: 10px; margin-bottom: 34px; color: #93a497; }
.login-panel input { height: 47px; }
.login-panel .button { height: 47px; margin-top: 7px; justify-content: space-between; }
.password-field { position: relative; }
.password-field input { padding-right: 45px; }
.password-toggle { position: absolute; right: 6px; top: 6px; }
.login-footer { position: absolute; bottom: 25px; font-size: 10px; color: #99a79d; }
.status-page { margin: 15vh auto; max-width: 530px; padding: 25px; }
.status-page p { margin: 20px 0; color: #839087; }
.refreshing svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 1650px) { main#main { padding-top: 45px; } }
@media (max-width: 1100px) {
    .sidebar { width: 194px; padding: 27px 12px 16px; }
    .shell { margin-left: 194px; }
    main#main, .topbar { padding-left: 24px; padding-right: 24px; }
    .metric { padding: 0 20px; }
    .metric-icon { right: 18px; }
    td, th { padding-left: 14px; padding-right: 14px; }
    .entry-form { width: 72%; }
}
@media (max-width: 760px) {
    .sidebar { position: static; width: 100%; height: auto; padding: 17px 16px 0; border-right: 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .brand { font-size: 16px; padding: 0; }
    .brand small { display: none; }
    .brand-mark { width: 30px; height: 30px; border-radius: 6px; }
    .brand-mark svg { width: 19px; height: 19px; }
    .workspace-label { display: none; }
    .sidebar nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; gap: 5px; margin-top: 16px; overflow-x: auto; }
    .nav-item { white-space: nowrap; padding: 12px 11px; border-radius: 5px 5px 0 0; gap: 6px; font-size: 12px; height: 42px; flex: 1 0 auto; justify-content: center; }
    .nav-item svg { width: 16px; }
    .nav-count { display: none; }
    .sidebar-bottom { padding: 0; margin: 0; border: 0; grid-column: 2; grid-row: 1; display: flex; align-items: center; }
    .profile { padding: 0; gap: 7px; max-width: 130px; }
    .profile .avatar { width: 28px; height: 28px; font-size: 11px; }
    .profile-name { font-size: 11px; }
    .profile-name small, .profile > svg { display: none; }
    .logout { padding: 5px 0 5px 13px; }
    .logout span { display: none; }
    .shell { margin-left: 0; min-height: calc(100dvh - 106px); }
    .topbar { min-height: 48px; padding: 12px 18px; }
    .breadcrumb { font-size: 10px; gap: 9px; }
    .topbar-right { font-size: 10px; }
    .topbar-right time { display: none; }
    main#main { padding: 24px 17px 15px; }
    .page-heading { margin-bottom: 23px; gap: 10px; }
    h1 { font-size: 24px; }
    .eyebrow { font-size: 9px; }
    .heading-tag { font-size: 10px; padding: 6px 8px; }
    .metrics { padding: 19px 0; margin-bottom: 17px; }
    .metric { padding: 0 14px; gap: 12px; }
    .metric > span:first-child { font-size: 10px; }
    .metric strong { font-size: 26px; padding: 0; }
    .metric-icon { display: none; }
    .entry-section { flex-direction: column; align-items: stretch; gap: 16px; padding: 15px 0 23px; }
    .entry-form { width: 100%; gap: 8px; }
    .entry-form select { width: 100%; flex-basis: 100%; }
    .entry-form .phone-input { min-width: 120px; }
    .export-bar { display: grid; grid-template-columns: 1fr 1fr; }
    .export-bar select { width: 100%; }
    .export-bar .button { padding: 0 9px; font-size: 12px; }
    .entry-form .button { padding: 0 12px; font-size: 12px; }
    .phone-prefix { padding-left: 10px; padding-right: 9px; font-size: 13px; }
    .phone-prefix span { margin-left: 8px; }
    .phone-input input { font-size: 13px; }
    h2 { font-size: 15px; }
    .filters { flex-wrap: wrap; gap: 8px; }
    .search-field { width: 100%; flex: 1 0 100%; }
    .filters select { max-width: none; flex: 1; width: auto; }
    .filters .button { height: 39px; }
    .table-scroll { border-left: 0; border-right: 0; }
    td { font-size: 12px; height: 57px; }
    td, th { padding-left: 12px; padding-right: 12px; }
    .records-table { min-width: 570px; }
    .records-table .id-cell { width: 40px; }
    table { min-width: 570px; }
    .page-footer { padding: 20px 18px; }
    .page-size { display: none; }
    .alert { font-size: 12px; padding: 11px; }
    .login-brand { top: 25px; left: 25px; }
    .login-page { justify-content: flex-start; padding-top: 140px; }
    .login-footer { position: static; margin-top: 70px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }