html, body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #f3f4f6;
    color: #1f2937;
}

.bms-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 2px 4px;
    background: #00380b;/*#1f3a5f;*/
    color: #fff;
}

.bms-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
.bms-logo { height: 72px; width: auto; display: block; }
.bms-brand-text { font-size: 19px; font-weight: 400; color: #eaf1f8; letter-spacing: .2px; }
.bms-brand-text strong { font-weight: 700; color: #fff; }
@media (max-width: 640px) { .bms-brand-text { display: none; } }

.bms-user {
    margin-left: auto;
    opacity: 0.85;
}

.bms-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px;
}
/* Wide page container (e.g. the ticket editor) — ~90% of the window, capped, resizes with it. */
.bms-main.wide {
    max-width: 1000px;
    width: 90%;
    box-sizing: border-box;
}

.login-card {
    max-width: 380px;
    margin: 8vh auto;
    background: #fff;
    padding: 28px 28px 32px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.login-card h1 {
    font-size: 22px;
    margin: 0 0 20px;
}

.field {
    margin-bottom: 16px;
}

.field > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
}

.dx-datagrid-rowsview .dx-row > td, .dx-treelist-content .dx-row > td {
    padding: 6px !important;
}


.login-error {
    background: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f8b4b4;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.login-info {
    background: #e6f4ea;
    color: #14532d;
    border: 1px solid #a7e0bb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.login-btn {
    width: 100%;
    background: #1f3a5f;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.login-btn:hover { background: #274b78; }

.login-divider { display:flex; align-items:center; text-align:center; color:#9ca3af; font-size:13px; margin:24px 0 16px; }
.login-divider::before, .login-divider::after { content:""; flex:1; border-top:1px solid #e5e7eb; }
.login-divider span { padding:0 12px; }

/* ── Client portal landing cards ─────────────────────────────────────────── */
.portal-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:8px; }
.portal-card { display:block; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px 20px; text-decoration:none; color:inherit; transition:box-shadow .15s,border-color .15s; }
.portal-card:hover { border-color:#c7d2e0; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.portal-card h2 { margin:0 0 6px; font-size:17px; color:#1f3a5f; }
.portal-card p { margin:0; font-size:13px; color:#6b7280; }

/* ── Support tickets ─────────────────────────────────────────── */
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.page-head h1 { font-size:22px; margin:0; }
.subtle { color:#6b7280; font-weight:400; }
.btn-link { color:#1f3a5f; text-decoration:none; font-weight:600; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px 18px; margin-bottom:16px; }
.field { margin-bottom:14px; }
.field > label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#374151; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 16px; }

.ticket-layout { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
.ticket-main { min-width:0; }
.ticket-side .card.meta > div { margin-bottom:10px; font-size:14px; }

.comment { border:1px solid #e5e7eb; border-radius:10px; padding:12px 16px; margin-bottom:12px; background:#fff; }
.comment.internal { background:#fffbeb; border-color:#fde68a; }
.comment-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; color:#374151; }
.comment-head .badge { font-size:11px; padding:1px 8px; border-radius:10px; background:#e5edf7; color:#1f3a5f; }
.comment.internal .badge { background:#fde68a; color:#7c5b09; }
.comment-head .when { margin-left:auto; color:#9ca3af; }
.comment-body { font-size:14px; line-height:1.5; }
.comment-edit { margin-left:12px; font-size:12px; color:#1f3a5f; text-decoration:none; font-weight:600; }
.comment-edit:hover { text-decoration:underline; }
.comment-edit-form { margin-top:6px; }
.comment-body img { max-width:100%; height:auto; }
.reply-card label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.reply-actions { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }

@media (max-width: 880px) {
    .ticket-layout { grid-template-columns:1fr; }
    .grid-2, .grid-3 { grid-template-columns:1fr; }
}

/* ── Header nav ──────────────────────────────────────────────── */
.bms-nav { display:flex; gap:18px; margin-left:28px; }
.bms-nav a { color:#dbe7f3; text-decoration:none; font-size:15px; }
.bms-nav a:hover { color:#fff; text-decoration:underline; }
.bms-signout { margin-left:18px; color:#dbe7f3; text-decoration:none; font-size:14px; border:1px solid #ffffff44; padding:4px 12px; border-radius:6px; }
.bms-signout:hover { color:#fff; background:#ffffff1a; }

/* ── New ticket: paste row + attachments ─────────────────────── */
.paste-row { display:flex; gap:8px; align-items:flex-start; }
.paste-row > :first-child { flex:1; }
.att-list { margin-top:10px; }
.att-row { display:grid; grid-template-columns:minmax(0,1fr) 1fr 1.5fr auto; gap:8px; align-items:center; margin-bottom:6px; }
.att-row .att-name { font-size:13px; color:#374151; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-row input { padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; font-size:13px; }
.att-remove { border:1px solid #f3c0c0; background:#fdeaea; color:#9b1c1c; border-radius:6px; width:28px; height:28px; cursor:pointer; font-size:16px; line-height:1; }
.att-remove:hover { background:#f9d5d5; }

/* ── Attachment download links (ticket detail / public view) ──────────────── */
.att-dl-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.att-dl { display:inline-block; background:#eef2f7; color:#1f3a5f; text-decoration:none; font-size:13px; font-weight:600; padding:8px 14px; border-radius:6px; border:1px solid #d6e0ec; }
.att-dl:hover { background:#e2e9f3; }

/* ── Subscribers editor ──────────────────────────────────────────────────── */
.sub-list { margin:6px 0; }
.sub-row { display:grid; grid-template-columns:1.4fr 1fr auto; gap:8px; align-items:center; margin-bottom:6px; }
.sub-row input { padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; font-size:13px; }
.sub-remove { border:1px solid #f3c0c0; background:#fdeaea; color:#9b1c1c; border-radius:6px; width:28px; height:28px; cursor:pointer; font-size:16px; line-height:1; }
.sub-remove:hover { background:#f9d5d5; }
.sub-add { background:#eef2f7; color:#1f3a5f; border:1px solid #d6e0ec; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.sub-add:hover { background:#e2e9f3; }

/* ── Collapsible details card ────────────────────────────────────────────── */
.collapse-card { padding:0; overflow:hidden; }
.collapse-head { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; cursor:pointer; user-select:none; font-weight:600; color:#374151; }
.collapse-head:hover { background:#f9fafb; }
.collapse-title { font-size:14px; }
.collapse-caret { color:#9ca3af; }
.collapse-body { padding:0 18px 16px; }
.collapse-body.collapsed { display:none; }
.meta-grid > div { margin-bottom:10px; font-size:14px; }
.meta-grid .subtle { font-size:12px; display:block; }

.ticket-main-full { max-width:100%; }

/* ── Attachment list (filename, size, description, uploader) — flows in cols ── */
.att-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; margin-top:8px; }
.att-item { border:1px solid #eef0f3; border-radius:8px; padding:10px 12px; }
.att-item-head { display:flex; align-items:center; gap:8px; }
.att-item-head .att-dl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-size { color:#9ca3af; font-size:12px; white-space:nowrap; }
.att-desc { font-size:13px; color:#374151; margin-top:4px; }
.att-uploader { font-size:12px; margin-top:3px; }
.att-del { border:1px solid #f3c0c0; background:#fdeaea; color:#9b1c1c; border-radius:6px; width:22px; height:22px; cursor:pointer; font-size:14px; line-height:1; flex:0 0 auto; }
.att-del:hover { background:#f9d5d5; }

/* ── Inline-edit (priority) + subscriber chips ───────────────────────────── */
.inline-edit { display:flex; align-items:center; gap:8px; }
/* Standardised square icon buttons (subscriber edit/remove, priority edit) — DevExtreme dx-icon, minimal padding. */
.chip-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:1px solid #d6e0ec; background:#eef2f7; color:#1f3a5f; border-radius:6px; cursor:pointer; font-size:14px; line-height:1; }
.chip-btn:hover { background:#e2e9f3; }
.chip-btn .dx-icon-edit, .chip-btn .dx-icon-trash { font-size:15px; }
.chip-btn-del { border-color:#f3c0c0; background:#fdeaea; color:#9b1c1c; }
.chip-btn-del:hover { background:#f9d5d5; }
.sub-box { display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.sub-chip { display:flex; align-items:center; gap:8px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; padding:5px 8px 5px 12px; }
.sub-chip-text { flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Grid folder open-link ───────────────────────────────────────────────── */
.open-link { text-decoration:none; font-size:15px; cursor:pointer; }
.open-link:hover { text-decoration:none; opacity:.7; }
.toolbar-title { font-size:20px; font-weight:600; color:#1f2937; }
/* PrListView open link in the grid's first column — no underline. */
.lst-button .dx-link, .lst-button a.dx-link-icon { text-decoration:none; }
.lst-button .dx-link:hover { text-decoration:none; opacity:.7; }

/* ── Floating reply button ───────────────────────────────────────────────── */
/* FAB is a DevExtreme button (themed accent); keep it floating/rounded and give the content
   enough vertical room so the label isn't clipped by the button's default height. */
.reply-fab { position:fixed; right:24px; bottom:24px; z-index:900; border-radius:24px; box-shadow:0 6px 20px rgba(0,0,0,.22); }
.reply-fab.dx-button { height:auto; }
.reply-fab.dx-button .dx-button-content { padding-top:11px; padding-bottom:11px; padding-left:22px; padding-right:22px; }
.reply-fab.open { opacity:.7; }

/* ── Collapsible reply ───────────────────────────────────────────────────── */
.reply-toggle { background:#185fa5; color:#fff; border:none; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; }
.reply-toggle:hover { background:#13518f; }

/* ── Estimates / Worklog tabs ────────────────────────────────────────────── */
.ew-tabhead { display:flex; gap:4px; border-bottom:1px solid #e5e7eb; margin-bottom:12px; }
.ew-tab-btn { border:none; background:none; padding:8px 14px; font-size:14px; font-weight:600; color:#6b7280; cursor:pointer; border-bottom:2px solid transparent; }
.ew-tab-btn.active { color:#1f3a5f; border-bottom-color:#1f3a5f; }
.ew-add { margin-top:10px; }

/* ── Lightweight modal (estimate / worklog detail) ───────────────────────── */
.ew-modal-ov { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:2000; }
.ew-modal { background:#fff; border-radius:10px; width:420px; max-width:92vw; max-height:90vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.ew-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #e5e7eb; font-weight:600; color:#1f3a5f; }
.ew-modal-x { cursor:pointer; color:#9ca3af; font-size:20px; line-height:1; }
.ew-modal-body { padding:16px 18px; }
.ew-modal-body label { display:block; font-size:13px; font-weight:600; color:#374151; margin:10px 0 4px; }
.ew-modal-body label.inline { display:inline-flex; align-items:center; gap:6px; font-weight:400; }
/* Editable fields are DevExtreme widgets (dxTextBox/NumberBox/…); let them own their borders/padding. */
.ew-modal-body .dx-widget { width:100%; }
.ew-modal-body .ro { font-size:14px; margin-bottom:8px; }
.ew-modal-foot { display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid #e5e7eb; }
.ew-btn { padding:8px 14px; border:1px solid #d1d5db; background:#fff; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; }
.ew-btn-primary { background:#185fa5; color:#fff; border-color:#185fa5; }
.ew-btn-del { background:#fdeaea; color:#9b1c1c; border-color:#f3c0c0; }

/* Attachments FileUploader (new-ticket + reply): give the "Select files" button the themed
   (accent) look so it matches the rest of the DevExtreme buttons instead of the flat default. */
#attUploader .dx-fileuploader-button.dx-button,
#replyAttUploader .dx-fileuploader-button.dx-button { background-color: var(--dx-color-primary, #185fa5); border-color: transparent; }
#attUploader .dx-fileuploader-button.dx-button .dx-button-text,
#attUploader .dx-fileuploader-button.dx-button .dx-icon,
#replyAttUploader .dx-fileuploader-button.dx-button .dx-button-text,
#replyAttUploader .dx-fileuploader-button.dx-button .dx-icon { color:#fff; }
#attUploader .dx-fileuploader-button.dx-button.dx-state-hover,
#replyAttUploader .dx-fileuploader-button.dx-button.dx-state-hover { filter:brightness(.94); }

/* Full-width custom fields (textareas such as Steps to Reproduce): span both columns and
   sit apart from the paired fields with a separator above/below. Used on the New Ticket form
   (#customFields) and the existing-ticket detail view (.meta-grid). */
#customFields .cf-row.cf-full { grid-column: 1 / -1; border-top:1px solid #eef0f3; margin-top:6px; padding-top:8px; }
.meta-grid .cf-full-view { grid-column: 1 / -1; border-top:1px solid #eef0f3; border-bottom:1px solid #eef0f3; padding:8px 0; margin:4px 0; }

/* ── Test-script authoring ───────────────────────────────────────────────── */
.ts-layout { display:grid; grid-template-columns:420px 1fr; gap:20px; align-items:start; }
.ts-side { min-width:0; }
.ts-main { min-width:0; }
.ts-input { width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; font-family:inherit; }
textarea.ts-input { resize:vertical; }
.ts-check { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:400; color:#374151; cursor:pointer; }
.ts-actions { display:flex; align-items:center; gap:12px; margin-top:6px; }
.ts-btn { background:#eef2f7; color:#1f3a5f; border:1px solid #d6e0ec; border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.ts-btn:hover { background:#e2e9f3; }
.ts-btn-primary { background:#185fa5; color:#fff; border-color:#185fa5; }
.ts-btn-primary:hover { background:#14508c; }
.ts-btn-sm { padding:3px 8px; font-size:12px; }
.ts-remove { border:1px solid #f3c0c0; background:#fdeaea; color:#9b1c1c; border-radius:6px; width:24px; height:24px; cursor:pointer; font-size:14px; line-height:1; flex:0 0 auto; }
.ts-remove:hover { background:#f9d5d5; }

.ts-tree-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ts-tree { display:flex; flex-direction:column; gap:10px; }
.ts-module { border:1px solid #e5e7eb; border-radius:8px; padding:8px; background:#fafbfc; }
.ts-row { display:flex; align-items:center; gap:6px; }
.ts-module-row > .ts-name { font-weight:600; }
.ts-cats { margin:8px 0 0 10px; display:flex; flex-direction:column; gap:8px; }
.ts-cat { border-left:2px solid #e5e7eb; padding-left:8px; }
.ts-items { margin:6px 0 0 6px; display:flex; flex-direction:column; gap:3px; }
.ts-name { flex:1; min-width:0; }            /* hosts a dxTextBox (width:100%) */
.ts-area { flex:0 0 auto; }                  /* hosts a dxSelectBox (fixed width) */
.ts-row > .dx-button { flex:0 0 auto; }
.ts-item-row { padding:3px 4px; border-radius:6px; }
.ts-item-row:hover { background:#eef2f7; }
.ts-item-row.ts-selected { background:#dbe7f3; }
.ts-item-title { flex:1; min-width:0; font-size:13px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 4px; }
.ts-item-head { display:flex; align-items:flex-end; gap:16px; }

@media (max-width: 920px) { .ts-layout { grid-template-columns:1fr; } }

/* ── Dialog footer: Cancel (left) · Delete (middle) · Save (right) ───────── */
.ts-dlg-actions { display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:8px; }
.ts-dlg-msg { min-height:16px; text-align:right; margin-top:8px; }

/* ── Fixed → retest (capture dialog) ─────────────────────────────────────── */
.ts-fix-info { background:#f5f0ff; border:1px solid #ddd0f5; color:#5b21b6; border-radius:6px; padding:8px 10px; font-size:13px; margin-top:10px; }
.ts-fix-notes { margin-top:4px; color:#374151; white-space:pre-wrap; }
.ts-fix-form { background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:12px 14px; margin-top:10px; }
.ts-recorded { background:#eef2f7; border:1px solid #d6e0ec; color:#374151; border-radius:6px; padding:7px 10px; font-size:13px; margin-bottom:10px; }

/* ── Tree-grid authoring/execution (DevExtreme TreeList) ─────────────────── */
.ts-grid-actions { display:flex; gap:2px; justify-content:flex-end; }
.ts-grid-actions .ts-ib { display:inline-block; }
.ts-nodetype { font-size:11px; font-weight:600; padding:1px 8px; border-radius:10px; }
.ts-nt-module { background:#e5edf7; color:#1f3a5f; }
.ts-nt-category { background:#eef2f7; color:#475569; }
.ts-nt-item { background:#f1f3f5; color:#6b7280; }
.ts-grid-toolbar { margin:10px 0 8px; }
.ts-asn-names { font-size:12px; color:#475569; }
.ts-asn-cell { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.ts-asn-line { display:flex; align-items:center; gap:8px; font-size:13px; color:#1f2937; }
.ts-asn-name { line-height:1.3; }
.ts-chip-del { cursor:pointer; color:#b91c1c; font-size:15px; }
.ts-chip-del:hover { color:#7f1212; }
.ts-asn-pick { min-width:130px; margin-top:2px; }

/* ── Test run: assignments, progress, execution ──────────────────────────── */
.ts-asn-list { display:flex; flex-direction:column; gap:4px; margin:6px 0 10px; }
.ts-asn-row { display:flex; align-items:center; gap:8px; font-size:14px; }
.ts-asn-row > span { flex:1; }
.ts-asn-add { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ts-progress-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ts-progress { height:10px; background:#eef2f7; border-radius:6px; overflow:hidden; }
.ts-progress-bar { height:100%; width:0; background:#1e7e34; transition:width .3s; }
.ts-modcount { margin-left:auto; }
.ts-cat-name { font-size:12px; font-weight:600; color:#6b7280; margin:6px 0 2px; }
.ts-badge { display:inline-block; flex:0 0 auto; font-size:11px; font-weight:600; padding:1px 8px; border-radius:10px; min-width:64px; text-align:center; }
.ts-badge-none { background:#eef2f7; color:#9ca3af; }
.ts-outdated-dot { flex:0 0 auto; color:#e67e22; cursor:default; }
.ts-cap-content { font-size:14px; line-height:1.5; border:1px solid #eef2f7; border-radius:8px; padding:12px 14px; background:#fafbfc; }
.ts-cap-content img { max-width:100%; height:auto; }
.ts-cap-expected { margin-top:10px; }
.ts-cap-label { font-size:12px; font-weight:600; color:#6b7280; margin-bottom:3px; }
#tsCapExpected { font-size:14px; white-space:pre-wrap; }
.ts-sep { border:none; border-top:1px solid #e5e7eb; margin:14px 0; }
.ts-outdated { background:#fff4e5; border:1px solid #f5c887; color:#92561a; border-radius:6px; padding:8px 10px; font-size:13px; margin-bottom:10px; }

/* ── Mini tables + inline add-forms (estimates / worklog) ─────────────────── */
.mini-table { width:100%; border-collapse:collapse; font-size:13px; margin:6px 0 12px; }
.mini-table th { text-align:left; color:#6b7280; font-weight:600; border-bottom:1px solid #e5e7eb; padding:6px 8px; }
.mini-table td { border-bottom:1px solid #f1f3f5; padding:6px 8px; vertical-align:top; }
.mini-form { border-top:1px dashed #e5e7eb; padding-top:10px; margin-top:4px; }

/* ── Growing rich-text editor (ticket capture) ───────────────────────────── */
/* No fixed height: the editor grows with content; this just sets a generous default. */
.ticket-editor .dx-htmleditor-content { min-height: 340px; }

/* ── Notification scope radios ────────────────────────────────────────────── */
.notify-field { margin-top:6px; }
.notify-scope { display:flex; flex-wrap:wrap; gap:16px; }
.notify-scope label { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:400; color:#374151; cursor:pointer; }
.notify-scope input { margin:0; }

/* ── Home / landing page ──────────────────────────────────────────────────── */
.home-hero { display:flex; align-items:center; gap:24px; background:#fff; border:1px solid #e5e7eb;
    border-radius:14px; padding:24px 28px; margin-bottom:24px;
    background-image:linear-gradient(135deg,#ffffff 0%,#f3f7fb 100%); }
.home-hero img { height:72px; width:auto; }
.home-hero .home-hero-text h1 { margin:0; font-size:24px; color:#1f3a5f; }
.home-hero .home-hero-text p { margin:6px 0 0; color:#6b7280; font-size:14px; }

.home-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:start; }
.home-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px 24px;
    transition:box-shadow .15s, border-color .15s; }
.home-card:hover { border-color:#c7d2e0; box-shadow:0 6px 20px rgba(31,58,95,.07); }
.home-card-head { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.home-card-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:#eaf1f8; color:#1f3a5f; font-size:20px; flex:none; }
.home-card-icon.green { background:#eef6e7; color:#6aa630; }
.home-card-icon.blue  { background:#eaf1f8; color:#4f7fb3; }
.home-card h2 { margin:0; font-size:18px; color:#1f3a5f; }
.home-card-sub { margin:0 0 16px; font-size:13px; color:#6b7280; }
.home-actions { display:flex; flex-direction:column; gap:9px; }
.home-action { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid #eef0f3;
    border-radius:9px; text-decoration:none; color:#1f2937; font-size:14px; cursor:pointer;
    transition:border-color .12s, background .12s; }
.home-action:hover { border-color:#c7d2e0; background:#f8fafc; }
.home-action .dx-icon { font-size:17px; color:#5b8dbf; }
.home-action .home-action-meta { margin-left:auto; font-size:12px; color:#9ca3af; }

.home-runs { margin-top:14px; border-top:1px dashed #e5e7eb; padding-top:12px; }
.home-runs-title { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#9ca3af; margin:0 0 8px; }
.home-run { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid #eef0f3;
    border-radius:9px; text-decoration:none; color:#1f2937; font-size:14px; margin-bottom:7px;
    transition:border-color .12s, background .12s; }
.home-run:hover { border-color:#c7d2e0; background:#f8fafc; }
.home-run .home-run-name { font-weight:500; }
.home-run .home-run-client { color:#6b7280; font-size:13px; }
.home-run .home-run-status { margin-left:auto; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
.home-run .home-run-status.inprog { background:#eaf1f8; color:#2f5f93; }
.home-run .home-run-status.planned { background:#f3f4f6; color:#6b7280; }
.home-runs-empty { font-size:13px; color:#9ca3af; padding:4px 2px; }