html body .page .content.content .employee-service-record-modal-panel {
    --sr-surface: var(--ep-surface, #fff); --sr-text: var(--ep-text, #101e43); --sr-muted: var(--ep-muted, #607187);
    --sr-brand: var(--ep-brand, #00877d); --sr-soft: var(--ep-soft, #e2f5f0); --sr-border: var(--ep-border, #e0ebee);
    width: min(100%, 560px); padding: 24px !important; border-radius: 20px !important;
    background: var(--sr-surface) !important; color: var(--sr-text) !important;
    max-height: calc(100dvh - 32px); overflow-y: auto;
    box-shadow: 0 20px 65px #122d4333;
}
html[data-theme="dark"] body .page .content.content .employee-service-record-modal-panel {
    --sr-surface: var(--ep-surface, #1b303b); --sr-text: var(--ep-text, #edf6ff); --sr-muted: var(--ep-muted, #b4c8d7);
    --sr-brand: var(--ep-brand, #7ddfc9); --sr-soft: var(--ep-soft, #1b423f); --sr-border: var(--ep-border, #354d58);
}
html body .page .content.content .employee-service-record-modal-header {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;
    padding: 0 0 18px; border-bottom: 1px solid var(--sr-border);
}
.ep-service-record-title { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ep-service-record-title > div { min-width: 0; }
.ep-service-record-title > .ep-form-icon {
    flex: 0 0 40px; width: 40px; height: 40px; padding: 8px;
    border-radius: 11px; color: var(--sr-brand); background: var(--sr-soft);
}
html body .page .content.content .employee-service-record-modal-header .ep-service-record-title span {
    color: var(--sr-brand); font-size: 10px; font-weight: 750; letter-spacing: .1em; line-height: 1.4;
}
html body .page .content.content .employee-service-record-modal-header h2 {
    margin: 5px 0 0; color: var(--sr-text); font-size: 19px; line-height: 1.3; letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
html body .page .content.content .employee-service-record-modal-close {
    flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px !important; min-height: 36px !important;
    display: grid; place-items: center; padding: 8px; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--sr-muted) 9%, var(--sr-surface)); color: var(--sr-text);
}
.employee-service-record-modal-close svg { display: block; width: 20px; height: 20px; }
html body .page .content.content .employee-service-record-modal-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin: 0; padding: 0;
}
html body .page .content.content .employee-service-record-modal-grid > div {
    position: relative; min-width: 0; padding: 14px 12px; min-height: 62px;
    border: 1px solid var(--sr-border); border-radius: 11px; background: var(--sr-surface);
}
html body .page .content.content .employee-service-record-modal-grid > div.wide { grid-column: 1 / -1; }
html body .page .content.content .employee-service-record-modal-grid dt {
    position: absolute; top: 0; left: 12px; transform: translateY(-50%);
    padding: 0 5px; margin: 0; background: var(--sr-surface); color: var(--sr-muted);
    font-size: 11px; font-weight: 650; line-height: 1.2; letter-spacing: 0; text-transform: none;
}
html body .page .content.content .employee-service-record-modal-grid dd {
    display: flex; align-items: center; gap: 10px; margin: 0; color: var(--sr-text);
    font-size: 13px; line-height: 1.5; font-weight: 500; white-space: normal; overflow-wrap: anywhere;
}
.employee-service-record-modal-grid dd > .ep-form-icon {
    flex: 0 0 30px; width: 30px; height: 30px; padding: 5px;
    border-radius: 8px; color: var(--sr-brand); background: var(--sr-soft);
}
.employee-service-record-modal-grid dd > span { min-width: 0; }
@media (max-width: 760px) {
    html body .page .content.content .employee-service-record-modal-panel { padding: 20px 16px !important; }
    html body .page .content.content .employee-service-record-modal-grid { gap: 17px 10px; }
    html body .page .content.content .employee-service-record-modal-grid > div { padding: 13px 10px; }
    html body .page .content.content .employee-service-record-modal-grid dd { font-size: 12px; gap: 7px; }
    .employee-service-record-modal-grid dd > .ep-form-icon { flex-basis: 26px; width: 26px; height: 28px; padding: 4px; }
}
@media (max-width: 359px) {
    html body .page .content.content .employee-service-record-modal-grid { grid-template-columns: 1fr; }
    html body .page .content.content .employee-service-record-modal-header h2 { font-size: 17px; }
}