@font-face {
    font-family: 'IRANSansFaNum';
    src: url('../assets/fonts/iransans/woff2/IRANSansWeb(FaNum).woff2') format('woff2'),
        url('../assets/fonts/iransans/woff/IRANSansWeb(FaNum).woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansFaNum';
    src: url('../assets/fonts/iransans/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'),
        url('../assets/fonts/iransans/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}
:root {
    --brand-black: #000000;
    --brand-sand: #d7c4a2;
    --bg: #f7f3eb;
    --surface: rgba(255,255,255,.9);
    --surface-strong: #fff;
    --ink: #070707;
    --muted: #6f6658;
    --line: rgba(0, 0, 0, .11);
    --accent: #d7c4a2;
    --accent-deep: #9f8a67;
    --rose: #8f2f44;
    --green: #186a57;
    --blue: #263f5e;
    --shadow: 0 22px 70px rgba(0, 0, 0, .1);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: IRANSansFaNum, Segoe UI, Tahoma, Arial, sans-serif; background: radial-gradient(circle at 12% 0, rgba(215,196,162,.35), transparent 34%), var(--bg); color: var(--ink); direction: rtl; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.workspace { min-width: 0; }
.topbar { min-height: 92px; padding: 22px 34px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: rgba(247,243,235,.78); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.eyebrow { margin: 0 0 4px; color: var(--accent-deep); font-size: .82rem; font-weight: 700; }
h1, h2, h3, p { margin-top: 0; }
.topbar h1 { margin: 0; font-size: clamp(1.4rem, 2vw, 2rem); }
.topbar-actions, .page-tools, .row-actions, .tool-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.content { padding: clamp(16px, 2.1vw, 30px) clamp(16px, 2.4vw, 34px) 60px; }
.primary-button, .ghost-button, .danger-link, .icon-button { border: 0; border-radius: 8px; cursor: pointer; min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; }
.primary-button { background: var(--brand-black); color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.primary-button:hover { background: #171717; }
.ghost-button { background: var(--surface-strong); color: var(--ink); border: 1px solid var(--line); }
.danger-link { color: #8e2639; background: #fff2f4; }
.small { min-height: 32px; padding: 0 10px; font-size: .82rem; }
.full { width: 100%; }
.user-chip { background: #fff; border: 1px solid var(--line); padding: 9px 12px; border-radius: 999px; color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 18px; }
.metric, .panel, .template-card, .login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.metric { min-height: 132px; padding: 20px; display: grid; align-content: space-between; }
.metric:hover { transform: translateY(-2px); border-color: rgba(0,0,0,.2); box-shadow: 0 26px 80px rgba(0,0,0,.14); }
.metric span, .metric small, small { color: var(--muted); }
.metric strong { font-size: 2.3rem; }
.metric.accent { border-top: 4px solid var(--accent); }
.metric.success { border-top: 4px solid var(--green); }
.metric.ink { border-top: 4px solid var(--blue); }
.metric.danger { border-top: 4px solid var(--rose); }
.metric.booth { border-top: 4px solid #8a6d3b; }
.split-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.panel { padding: 18px; overflow: hidden; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-header h2 { margin: 0; font-size: 1.1rem; }
.page-tools { justify-content: space-between; margin-bottom: 16px; }
.pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 16px 0 0; }
.page-btn { min-width: 36px; min-height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; }
.page-btn.active { background: var(--brand-black); color: #fff; }
.page-dots { padding: 8px 2px; color: var(--muted); }
.search-control { flex: 1; min-width: 240px; }
.search-control input, .filter-select, label input, label select, label textarea { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 11px 12px; outline: none; }
.filter-select { width: auto; min-width: 160px; }
.search-control input:focus, .filter-select:focus, label input:focus, label select:focus, label textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(215,196,162,.28); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.data-table th { text-align: right; color: var(--muted); font-size: .82rem; padding: 12px; border-bottom: 1px solid var(--line); }
.data-table tr { border-bottom: 1px solid var(--line); }
.data-table td { padding: 14px 12px; border-bottom: 0; vertical-align: middle; }
.data-table td strong, .data-table td small { display: block; }
.data-table td, .detail-grid strong, .detail-grid small, .profile-list-row, .service-item { overflow-wrap: anywhere; word-break: break-word; }
.row-actions, .inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-actions .small, .inline-actions .small { white-space: nowrap; }
.table-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.table-summary span { border: 1px solid var(--line); background: #fbf8f1; border-radius: 999px; padding: 3px 8px; color: var(--muted); font-size: .74rem; }
.pill, .status { border-radius: 999px; padding: 5px 10px; font-size: .78rem; display: inline-flex; }
.pill { background: rgba(215,196,162,.32); color: #423421; }
.status { background: #ece8e2; color: #5e554b; }
.status.active, .status.signed { background: #e4f5ef; color: var(--green); }
.status.sent, .status.draft, .status.awaiting, .status.waiting_user, .status.waiting_admin { background: #fff5de; color: #906122; }
.status.cancelled, .status.archived, .status.closed, .status.expired { background: #ffe8ec; color: var(--rose); }
.status.delivered, .status.completed, .status.publish { background: #e4f5ef; color: var(--green); }
.status.within_deadline { background: #e4f5ef; color: var(--green); }
.status.overdue { background: #ffe8ec; color: var(--rose); }
.status.awaiting_seller_send { background: #fff5de; color: #906122; }
.status.created, .status.registered, .status.normal { background: #f0efec; color: var(--muted); }
.status.high { background: #ffe8ec; color: var(--rose); }
.status.blocked, .status.inactive { background: #eee; color: #555; }
.status.open { background: #fff5de; color: #906122; }
.status.doing { background: #e8eef7; color: var(--blue); }
.status.done { background: #e4f5ef; color: var(--green); }
.status.none { background: #f0efec; color: var(--muted); }
.toggle-pill { border: 1px solid var(--line); border-radius: 999px; min-height: 30px; padding: 0 12px; margin-inline-start: 6px; cursor: pointer; font-size: .78rem; background: #fff; color: var(--muted); }
.toggle-pill.on { background: #e4f5ef; color: var(--green); border-color: rgba(24,106,87,.22); }
.toggle-pill.off { background: #f2f0ec; color: #6f6658; }
.toggle-pill:hover { box-shadow: 0 0 0 4px rgba(215,196,162,.22); }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; align-items: stretch; }
.template-card { padding: 16px; display: grid; gap: 10px; }
.template-card header { display: flex; justify-content: space-between; gap: 8px; }
.stack-list { display: grid; gap: 10px; }
.list-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.6); }
.list-item small { grid-column: 1; }
.empty-cell, .empty-state { padding: 28px; text-align: center; color: var(--muted); }
.hint { color: var(--muted); }
.hint code { background: #fff; padding: 2px 6px; border-radius: 6px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(28,23,19,.42); backdrop-filter: blur(0); opacity: 0; pointer-events: none; transition: .2s; z-index: 80; }
.modal-backdrop.show { opacity: 1; pointer-events: auto; backdrop-filter: blur(10px); }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: clamp(10px, 2vw, 24px); opacity: 0; pointer-events: none; z-index: 90; transition: .2s; }
.modal.show { opacity: 1; pointer-events: auto; }
.modal-panel { width: min(720px, 100%); max-height: calc(100dvh - 24px); overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 40px 90px rgba(20,14,9,.28); transform: translateY(18px) scale(.98); transition: .2s; }
.modal.show .modal-panel { transform: translateY(0) scale(1); }
.modal-panel.wide { width: min(980px, 100%); }
.modal-panel.compact { width: min(560px, 100%); }
.modal-header, .modal-footer { padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); border-bottom: 0; justify-content: flex-start; }
.icon-button { width: 40px; padding: 0; background: #f4eee6; }
.mobile-menu { display: none; }
.form-section, .modal-panel > .form-grid { padding: 18px; }
.form-section h3 { font-size: 1rem; color: var(--accent-deep); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: .88rem; }
.span-2 { grid-column: span 2; }
.quick-grid { display: grid; gap: 10px; padding: 18px; }
.quick-card { text-align: right; border: 1px solid var(--line); background: #fbf8f1; padding: 16px; border-radius: 8px; cursor: pointer; }
.quick-card span { display: block; margin-top: 5px; color: var(--muted); font-size: .84rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-separator { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.settings-separator h3 { margin: 0; color: var(--accent-deep); }
.metric-code { font-size: 1.05rem !important; direction: ltr; text-align: right; word-break: break-all; }
.service-result { direction: ltr; text-align: left; background: #14110e; color: #f8efe1; border-radius: 8px; padding: 16px; min-height: 220px; overflow: auto; }
.service-result pre { margin: 0; white-space: pre-wrap; font-family: Consolas, Monaco, monospace; font-size: .86rem; line-height: 1.7; }
.service-result .empty-state { color: #d9c8aa; direction: rtl; text-align: center; }
.service-artist-panel { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.service-detail-view { padding: 18px; }
.service-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.service-hero h2 { margin: 3px 0 0; font-size: 1.15rem; }
.service-section { margin-top: 18px; }
.service-section h3 { margin-bottom: 12px; color: var(--accent-deep); }
.service-card-list, .service-items, .ticket-timeline { display: grid; gap: 12px; }
.service-card, .service-item, .ticket-message { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 14px; }
.service-card header, .ticket-message header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.service-card header strong, .service-item strong, .ticket-message header strong { display: block; }
.mini-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.mini-metrics span { background: #fbf8f1; border: 1px solid var(--line); border-radius: 8px; padding: 8px; color: var(--muted); }
.mini-metrics b { display: block; color: var(--ink); margin-top: 2px; }
.ticket-message { position: relative; margin-inline-start: 10px; }
.ticket-message:before { content: ""; position: absolute; inset-inline-start: -11px; top: 18px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
.ticket-message p { margin: 0; line-height: 2; white-space: pre-wrap; }
.ticket-message header span { color: var(--muted); font-size: .82rem; }
.raw-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.raw-details summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.profile-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 18px; padding: 20px; background: linear-gradient(135deg, #0b0b0b, #262018); color: #fff; border-radius: 8px; box-shadow: var(--shadow); }
.profile-hero h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.profile-hero .eyebrow { color: var(--accent); }
.profile-actions, .profile-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.profile-tags { margin-top: 12px; }
.profile-tags span { border: 1px solid rgba(215,196,162,.35); background: rgba(215,196,162,.14); color: #f6ead4; border-radius: 999px; padding: 6px 10px; font-size: .82rem; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.profile-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 18px; overflow: hidden; }
.profile-panel h3 { margin-bottom: 14px; color: var(--accent-deep); }
.detail-grid.compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 12px; }
.profile-note { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 12px; margin-top: 10px; }
.profile-note p { margin: 6px 0 0; color: var(--muted); line-height: 1.9; }
.breakable { overflow-wrap: anywhere; word-break: break-word; }
.bank-lines dl { margin: 10px 0 0; display: grid; gap: 8px; }
.bank-lines dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bank-lines dl div:last-child { border-bottom: 0; }
.bank-lines dt { color: var(--muted); }
.bank-lines dd { margin: 0; direction: ltr; text-align: right; overflow-wrap: anywhere; font-weight: 700; }
.note-form .modal-footer { padding-inline: 0; }
.production-alerts { display: grid; gap: 10px; }
.production-alert { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 12px; }
.production-alert strong, .production-alert small { display: block; }
.urgent-panel { border-color: rgba(143,47,68,.24); }
.urgent-row { background: rgba(255,232,236,.32); }
.deadline-overdue { color: var(--rose); }
.production-alert.is-overdue { border-color: rgba(143,47,68,.28); background: rgba(255,232,236,.48); }
.profile-list { display: grid; gap: 10px; }
.profile-list-row { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 12px; display: grid; gap: 6px; }
.profile-list-row strong { font-size: .95rem; }
.profile-list-row p { margin: 0; color: var(--muted); line-height: 1.9; }
.call-history .profile-list-row { border-inline-start: 4px solid var(--accent); }
.file-chip { display: inline-flex; width: fit-content; margin-top: 10px; border: 1px solid var(--line); background: #fbf8f1; border-radius: 999px; padding: 6px 10px; color: var(--ink); font-size: .82rem; }
.call-shell { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(360px, 1.05fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.call-search-panel, .call-form-panel { min-height: 420px; }
.call-search-box { display: grid; gap: 8px; margin-bottom: 14px; }
.call-search-box input { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 16px 14px; outline: none; font-size: 1.05rem; direction: rtl; }
.call-results { display: grid; gap: 8px; max-height: 520px; overflow: auto; }
.contact-result { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 12px; text-align: right; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.contact-result strong { font-size: 1rem; }
.contact-result span { direction: ltr; color: var(--ink); font-weight: 700; }
.contact-result small { grid-column: 1 / -1; color: var(--muted); }
.contact-result:hover { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(215,196,162,.2); }
.call-form .modal-footer { padding-inline: 0; }
.task-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.task-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 18px; display: grid; gap: 14px; box-shadow: 0 18px 50px rgba(20,14,9,.06); min-width: 0; }
.task-card header, .task-actions, .task-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-card header { justify-content: space-between; }
.task-card header > div { min-width: 0; }
.task-card header strong, .task-card header small { overflow-wrap: anywhere; }
.task-card p { margin: 0; color: var(--muted); line-height: 1.9; overflow-wrap: anywhere; }
.task-meta { color: var(--muted); font-size: .9rem; }
.task-meta span { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--paper); max-width: 100%; overflow-wrap: anywhere; }
.task-actions { justify-content: flex-start; border-top: 1px solid var(--line); padding-top: 12px; }
.task-card.priority-urgent { border-color: rgba(176, 40, 40, .28); box-shadow: 0 18px 55px rgba(176, 40, 40, .08); }
.task-card.priority-high { border-color: rgba(215, 196, 162, .8); }
.tasks-archive-wrap { overflow-x: auto; }
.tasks-archive-table { min-width: 980px; table-layout: fixed; }
.tasks-archive-table th:first-child,
.tasks-archive-table td:first-child { width: 46%; }
.tasks-archive-table .source-cell { width: 180px; overflow-wrap: anywhere; }
.tasks-archive-table .row-actions { width: 170px; white-space: nowrap; }
.dashboard-task-list { display: grid; gap: 10px; }
.dashboard-task-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dashboard-task-list article:last-child { border-bottom: 0; }
.dashboard-task-list strong, .dashboard-task-list small { display: block; overflow-wrap: anywhere; }
.dashboard-task-list small { color: var(--muted); margin-top: 4px; }
.permission-list, .permission-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.permission-list span, .permission-checks label { background: rgba(215,196,162,.26); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--ink); }
.check-line { display: inline-flex; grid-auto-flow: column; align-items: center; justify-content: flex-start; gap: 8px; }
.check-line input, .radio-row input, .check-card input { width: auto; }
.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-row label, .check-card { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 10px 12px; color: var(--ink); }
.sms-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.check-card { justify-content: flex-start; }
.check-card small { margin-inline-start: auto; }
.autocomplete-results { display: grid; gap: 6px; margin-top: 8px; max-height: 220px; overflow: auto; }
.autocomplete-item { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 10px 12px; text-align: right; cursor: pointer; display: grid; gap: 3px; }
.autocomplete-item:hover { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(215,196,162,.18); }
.tags-container { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; min-height: 28px; }
.tag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(215,196,162,.24); padding: 6px 10px; }
.tag button { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; }
.shortcode-panel { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fbf8f1; }
.shortcode-panel h3 { margin-bottom: 12px; }
.shortcode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.shortcode-chip { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer; text-align: right; display: grid; gap: 4px; }
.shortcode-chip code { direction: ltr; text-align: left; color: var(--ink); }
.shortcode-chip span { color: var(--muted); font-size: .78rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
.detail-grid div { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; }
.detail-grid span, .detail-grid small { display: block; color: var(--muted); font-size: .82rem; }
.contract-body { white-space: pre-wrap; line-height: 2; border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: #fff; }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.2fr .8fr; }
.login-visual { padding: 8vw; color: #fff; background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.88)), url('../assets/images/a0da40e0f0962438994ee3eb2d3dce480a435b0aac84f6e51f1d07720d022c156eack.jpg') center/cover; display: grid; align-content: end; }
.gallery-wordmark { font-size: clamp(4rem, 10vw, 8rem); font-weight: 900; letter-spacing: 0; color: var(--accent); }
.login-card { width: min(420px, calc(100% - 36px)); align-self: center; justify-self: center; padding: 28px; display: grid; gap: 16px; }
.alert.danger, .toast.danger { background: #ffe8ec; color: #8e2639; }
.toast { position: fixed; left: 24px; bottom: 24px; background: var(--brand-black); color: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; transition: .2s; z-index: 200; }
.toast.show { transform: translateY(0); opacity: 1; }
@media (max-width: 980px) {
    .topbar { position: static; min-height: auto; }
    .dashboard-grid, .split-layout, .login-screen, .call-shell, .profile-grid { grid-template-columns: 1fr; }
    .login-visual { min-height: 42vh; }
    .profile-hero { align-items: flex-start; flex-direction: column; }
    .page-tools { align-items: stretch; }
    .search-control { min-width: min(100%, 240px); }
}
@media (max-width: 640px) {
    .topbar, .content { padding-inline: 16px; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .topbar-actions, .page-tools, .row-actions { width: 100%; justify-content: flex-start; }
    .topbar-actions > *, .page-tools > *, .search-control { flex: 1 1 100%; }
    .primary-button, .ghost-button, .danger-link { min-height: 38px; padding-inline: 12px; }
    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .data-table { min-width: 620px; }
    .modal-panel.wide, .modal-panel { width: 100%; }
    .modal-header, .modal-footer, .form-section, .modal-panel > .form-grid { padding: 14px; }
    .profile-hero h2 { font-size: 1.7rem; }
    .detail-grid { grid-template-columns: 1fr; }
    .service-hero, .service-card header, .ticket-message header, .list-item { grid-template-columns: 1fr; flex-direction: column; }
    .template-card header { flex-direction: column; }
    .bank-lines dl div, .production-alert { grid-template-columns: 1fr; }
}

/* Modern horizontal application shell */
.app-shell {
    min-height: 100vh;
    display: block;
    background:
        radial-gradient(circle at 8% 0, rgba(215,196,162,.28), transparent 30%),
        linear-gradient(180deg, #fbf8f1 0, #f6f0e5 42%, #f7f3eb 100%);
}
.app-header {
    position: sticky;
    top: 0;
    z-index: 70;
    border-bottom: 1px solid rgba(0,0,0,.1);
    background: rgba(250,246,238,.84);
    backdrop-filter: blur(22px);
    box-shadow: 0 12px 40px rgba(0,0,0,.05);
}
.header-inner {
    min-height: 78px;
    width: min(1660px, 100%);
    margin: 0 auto;
    padding: 12px clamp(18px, 2.4vw, 38px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}
.brand {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin: 0;
    min-width: max-content;
}
.brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--brand-black);
    border-radius: 8px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.inline-form {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}

.inline-form .search-control {
    min-width: min(420px, 100%);
}

.service-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.service-detail-grid.wide-cards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.json-details {
    margin-top: 18px;
}

.json-details pre {
    direction: rtl;
    white-space: pre-wrap;
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.nested-list {
    display: grid;
    gap: 8px;
    font-weight: 400;
}

.nested-list div {
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.brand strong,
.brand small {
    display: block;
    line-height: 1.35;
}
.brand small {
    color: var(--accent-deep);
    font-weight: 700;
}
.desktop-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.nav-group {
    position: relative;
}
.nav-trigger {
    border: 1px solid transparent;
    background: transparent;
    color: #2b241c;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-weight: 800;
    white-space: nowrap;
}
.nav-trigger span {
    color: var(--accent-deep);
    font-size: .9rem;
    transform: translateY(-1px);
}
.nav-group.active .nav-trigger,
.nav-group:hover .nav-trigger,
.nav-group:focus-within .nav-trigger {
    background: #111;
    color: #fff;
    border-color: rgba(215,196,162,.55);
    box-shadow: 0 16px 36px rgba(0,0,0,.16);
}
.nav-group.active .nav-trigger span,
.nav-group:hover .nav-trigger span,
.nav-group:focus-within .nav-trigger span {
    color: var(--accent);
}
.nav-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 235px;
    padding: 8px;
    border: 1px solid rgba(215,196,162,.42);
    border-radius: 8px;
    background: rgba(13,12,10,.96);
    color: #fff;
    box-shadow: 0 26px 70px rgba(0,0,0,.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: .18s ease;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.nav-menu:before {
    content: "";
    position: absolute;
    inset-inline-start: 24px;
    top: -6px;
    width: 12px;
    height: 12px;
    background: rgba(13,12,10,.96);
    border-top: 1px solid rgba(215,196,162,.42);
    border-right: 1px solid rgba(215,196,162,.42);
    transform: rotate(-45deg);
}
.nav-menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: #eadfcb;
    font-weight: 700;
}
.nav-menu a:hover,
.nav-menu a.active {
    background: rgba(215,196,162,.18);
    color: #fff;
}
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: max-content;
}
.mobile-menu {
    display: none;
}
.mobile-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(340px, 88vw);
    z-index: 120;
    padding: 18px;
    overflow: auto;
    background: #050505;
    color: #f7f3eb;
    box-shadow: -30px 0 80px rgba(0,0,0,.28);
    transform: translateX(105%);
    transition: transform .22s ease;
}
.mobile-drawer.open {
    transform: translateX(0);
}
body.menu-open {
    overflow: hidden;
}
body.menu-open .modal-backdrop {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(8px);
}
.mobile-brand {
    margin-bottom: 18px;
}
.mobile-nav-section {
    display: grid;
    gap: 7px;
    padding: 14px 0;
    border-top: 1px solid rgba(215,196,162,.18);
}
.mobile-nav-section strong {
    color: var(--accent);
    font-size: .82rem;
    margin-bottom: 3px;
}
.mobile-nav-section a {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: #e9ddca;
    font-weight: 700;
}
.mobile-nav-section a.active,
.mobile-nav-section a:hover {
    background: rgba(215,196,162,.17);
    color: #fff;
}
.workspace {
    min-width: 0;
}
.topbar.page-hero {
    position: relative;
    top: auto;
    z-index: 1;
    min-height: 110px;
    width: min(1660px, 100%);
    margin: 0 auto;
    padding: clamp(22px, 3vw, 42px) clamp(18px, 2.4vw, 38px) 18px;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    text-align: center;
}
.topbar.page-hero h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 3rem);
    letter-spacing: 0;
}
.content {
    width: min(1660px, 100%);
    margin: 0 auto;
    padding: clamp(14px, 2vw, 28px) clamp(18px, 2.4vw, 38px) 70px;
}
.panel,
.metric,
.template-card,
.profile-panel,
.login-card {
    box-shadow: 0 22px 70px rgba(33,25,15,.08);
}
.page-tools {
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(12px);
}
.data-table {
    min-width: 820px;
}
.data-table th {
    font-weight: 900;
}
.modal-panel {
    max-width: calc(100vw - 28px);
}
@media (max-width: 1120px) {
    .header-inner {
        grid-template-columns: auto auto;
    }
    .desktop-nav {
        display: none;
    }
    .mobile-menu {
        display: inline-flex;
    }
}
@media (max-width: 760px) {
    .header-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .brand {
        justify-content: center;
    }
    .header-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .header-actions > * {
        flex: 1 1 auto;
    }
    .header-actions .icon-button {
        flex: 0 0 42px;
    }
    .topbar.page-hero {
        min-height: 92px;
        padding-top: 20px;
        align-items: center;
    }
    .content {
        padding-inline: 12px;
    }
    .page-tools {
        display: grid;
        grid-template-columns: 1fr;
    }
    .page-tools > *,
    .topbar-actions > *,
    .search-control {
        width: 100%;
        min-width: 0;
    }
}

/* UI refresh v3: applies to the authenticated panel only. Login stays untouched. */
.app-shell {
    --panel-bg: rgba(255,255,255,.82);
    --panel-border: rgba(30,23,15,.1);
    --soft-bg: rgba(255,255,255,.54);
    --control-height: 44px;
    color: #11100e;
}
.app-shell button,
.app-shell a,
.app-shell input,
.app-shell select,
.app-shell textarea {
    -webkit-tap-highlight-color: transparent;
}
.app-shell .app-header {
    background:
        linear-gradient(90deg, rgba(255,255,255,.76), rgba(247,243,235,.9)),
        rgba(247,243,235,.86);
}
.app-shell .header-inner {
    min-height: 72px;
}
.app-shell .brand {
    padding: 6px;
    border-radius: 8px;
}
.app-shell .brand:hover {
    background: rgba(215,196,162,.18);
}
.app-shell .brand-mark {
    width: 42px;
    height: 42px;
    color: #080808;
}
.app-shell .nav-trigger {
    min-height: 40px;
    font-size: .94rem;
}
.app-shell .nav-menu {
    overflow: hidden;
}
.app-shell .header-actions .ghost-button,
.app-shell .header-actions .danger-link,
.app-shell .header-actions .user-chip {
    min-height: 40px;
}
.app-shell .workspace {
    padding-bottom: 24px;
}
.app-shell .topbar.page-hero {
    min-height: 96px;
    padding-bottom: 8px;
}
.app-shell .topbar.page-hero > div {
    width: min(760px, 100%);
}
.app-shell .eyebrow {
    letter-spacing: 0;
}
.app-shell .content {
    display: grid;
    gap: 18px;
}
.app-shell .primary-button,
.app-shell .ghost-button,
.app-shell .danger-link,
.app-shell .icon-button,
.app-shell .page-btn,
.app-shell .toggle-pill,
.app-shell .quick-card,
.app-shell .autocomplete-item,
.app-shell .contact-result,
.app-shell .shortcode-chip {
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.app-shell .primary-button,
.app-shell .ghost-button,
.app-shell .danger-link,
.app-shell .icon-button {
    min-height: var(--control-height);
    border-radius: 8px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.app-shell .primary-button {
    background: #050505;
    color: #fff;
    border: 1px solid #050505;
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.app-shell .primary-button:hover {
    background: #1b1711;
    border-color: rgba(215,196,162,.55);
    transform: translateY(-1px);
}
.app-shell .ghost-button {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(0,0,0,.12);
    color: #11100e;
}
.app-shell .ghost-button:hover {
    background: #fff;
    border-color: rgba(0,0,0,.24);
    transform: translateY(-1px);
}
.app-shell .danger-link {
    border: 1px solid rgba(143,47,68,.14);
    background: rgba(255,242,244,.9);
    color: #8f2f44;
}
.app-shell .danger-link:hover {
    border-color: rgba(143,47,68,.32);
    background: #ffe8ec;
}
.app-shell .small {
    min-height: 36px;
    padding-inline: 12px;
    font-size: .8rem;
}
.app-shell .icon-button {
    width: 44px;
    padding: 0;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(0,0,0,.1);
}
.app-shell .user-chip {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: #4a4034;
    font-weight: 800;
    border: 1px solid rgba(0,0,0,.1);
}
.app-shell .page-tools {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) repeat(auto-fit, minmax(150px, max-content));
    justify-content: stretch;
    gap: 10px;
    margin: 0;
    padding: 12px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    box-shadow: 0 20px 70px rgba(33,25,15,.07);
}
.app-shell .page-tools > .primary-button,
.app-shell .page-tools > .ghost-button,
.app-shell .page-tools > .danger-link,
.app-shell .page-tools > .filter-select,
.app-shell .page-tools > button,
.app-shell .page-tools > a {
    width: 100%;
}
.app-shell .search-control {
    min-width: 0;
    width: 100%;
}
.app-shell .search-control input,
.app-shell .filter-select,
.app-shell label input,
.app-shell label select,
.app-shell label textarea,
.app-shell .call-search-box input {
    min-height: var(--control-height);
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.92);
    color: #11100e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.app-shell label textarea {
    min-height: 118px;
    line-height: 1.9;
    resize: vertical;
}
.app-shell .search-control input::placeholder,
.app-shell label input::placeholder,
.app-shell label textarea::placeholder {
    color: #8a7a65;
}
.app-shell .panel,
.app-shell .metric,
.app-shell .template-card,
.app-shell .profile-panel,
.app-shell .call-search-panel,
.app-shell .call-form-panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
        var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 22px 70px rgba(33,25,15,.07);
}
.app-shell .panel,
.app-shell .profile-panel {
    padding: clamp(14px, 1.5vw, 22px);
}
.app-shell .panel-header {
    min-height: 44px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.app-shell .panel-header h2,
.app-shell .profile-panel h3 {
    font-size: clamp(1rem, 1.25vw, 1.22rem);
    color: #8f7855;
}
.app-shell .panel-header a {
    color: #111;
    font-weight: 900;
    border-bottom: 1px solid rgba(215,196,162,.7);
}
.app-shell .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}
.app-shell .metric {
    min-height: 126px;
    padding: 18px;
    overflow: hidden;
    position: relative;
}
.app-shell .metric:after {
    content: "";
    position: absolute;
    inset-inline-start: 16px;
    top: 16px;
    width: 38px;
    height: 5px;
    border-radius: 999px;
    background: var(--accent);
}
.app-shell .metric strong {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.1;
}
.app-shell .split-layout,
.app-shell .profile-grid,
.app-shell .call-shell {
    gap: 18px;
}
.app-shell .table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.66);
}
.app-shell .table-wrap::-webkit-scrollbar {
    height: 8px;
}
.app-shell .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.22);
    border-radius: 999px;
}
.app-shell .data-table {
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}
.app-shell .data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px 16px;
    background: rgba(251,248,241,.96);
    color: #6b5a41;
    font-size: .78rem;
}
.app-shell .data-table td {
    padding: 15px 16px;
    background: rgba(255,255,255,.52);
}
.app-shell .data-table tbody tr:hover td {
    background: rgba(215,196,162,.12);
}
.app-shell .data-table td strong {
    font-size: .98rem;
}
.app-shell .data-table td small {
    margin-top: 4px;
    line-height: 1.7;
}
.app-shell .row-actions,
.app-shell .inline-actions,
.app-shell .profile-actions {
    gap: 8px;
}
.app-shell .row-actions {
    justify-content: flex-start;
    min-width: 220px;
}
.app-shell .pill,
.app-shell .status,
.app-shell .toggle-pill,
.app-shell .table-summary span,
.app-shell .profile-tags span {
    min-height: 30px;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    border: 1px solid rgba(0,0,0,.08);
}
.app-shell .status,
.app-shell .pill {
    white-space: nowrap;
}
.app-shell .template-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.app-shell .template-card {
    min-height: 220px;
}
.app-shell .template-card header {
    align-items: flex-start;
}
.app-shell .detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.app-shell .detail-grid div,
.app-shell .mini-metrics span,
.app-shell .profile-note,
.app-shell .profile-list-row,
.app-shell .service-card,
.app-shell .service-item,
.app-shell .ticket-message,
.app-shell .radio-row label,
.app-shell .check-card,
.app-shell .shortcode-panel {
    border-radius: 8px;
    border-color: rgba(0,0,0,.1);
    background: rgba(255,255,255,.74);
}
.app-shell .detail-grid div {
    min-width: 0;
}
.app-shell .detail-grid span,
.app-shell .detail-grid small {
    margin-bottom: 6px;
    color: #7d6d58;
}
.app-shell .detail-grid strong,
.app-shell .breakable {
    min-width: 0;
    max-width: 100%;
}
.app-shell .profile-hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: clamp(18px, 2.4vw, 30px);
    background:
        linear-gradient(135deg, rgba(0,0,0,.95), rgba(34,29,22,.96)),
        #0b0b0b;
}
.app-shell .profile-hero:after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 42%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent));
}
.app-shell .profile-hero h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.app-shell .profile-actions {
    justify-content: flex-end;
}
.app-shell .profile-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
}
.app-shell .bank-lines dl {
    gap: 0;
}
.app-shell .bank-lines dl div {
    grid-template-columns: minmax(120px, .32fr) minmax(0, 1fr);
    padding: 11px 0;
}
.app-shell .bank-lines dd {
    font-size: .95rem;
}
.app-shell .note-form {
    display: grid;
    gap: 12px;
}
.app-shell .note-form .modal-footer {
    border: 0;
    padding: 0;
}
.app-shell .modal {
    padding: 18px;
}
.app-shell .modal-panel {
    border: 1px solid rgba(215,196,162,.3);
    box-shadow: 0 44px 120px rgba(0,0,0,.32);
}
.app-shell .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
}
.app-shell .modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}
.app-shell .form-section {
    display: grid;
    gap: 14px;
}
.app-shell .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.app-shell label {
    min-width: 0;
    font-weight: 800;
}
.app-shell .call-shell {
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
}
.app-shell .call-center-grid {
    grid-template-columns: minmax(280px, .78fr) minmax(360px, 1fr) minmax(300px, .88fr);
    align-items: start;
}
.app-shell .call-results {
    max-height: min(540px, 58vh);
    padding-inline-end: 2px;
}
.app-shell .contact-result {
    grid-template-columns: minmax(0, 1fr) auto;
}
.app-shell .contact-result-card {
    display: grid;
    gap: 8px;
}
.app-shell .contact-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-inline: 4px;
}
.app-shell .contact-quick-actions a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    background: rgba(255,255,255,.75);
    color: #11100e;
    font-size: .78rem;
    font-weight: 900;
}
.app-shell .contact-quick-actions a:hover {
    border-color: rgba(215,196,162,.85);
    background: #fff;
}
.app-shell .call-history-panel {
    min-height: 420px;
}
.app-shell .call-history-list {
    display: grid;
    gap: 10px;
    max-height: min(620px, 66vh);
    overflow: auto;
    padding-inline-end: 2px;
}
.app-shell .call-history-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 13px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    color: #11100e;
    text-align: right;
    cursor: pointer;
}
.app-shell .call-history-item:hover {
    border-color: rgba(215,196,162,.9);
    background: #fff;
    box-shadow: 0 14px 34px rgba(33,25,15,.08);
    transform: translateY(-1px);
}
.app-shell .call-history-item strong,
.app-shell .call-history-item p,
.app-shell .call-history-item small {
    grid-column: 1 / -1;
}
.app-shell .call-history-item strong {
    font-size: .98rem;
}
.app-shell .call-history-item small,
.app-shell .call-history-item p,
.app-shell .call-history-meta {
    color: #6f6250;
    line-height: 1.7;
}
.app-shell .call-history-item p {
    margin: 0;
    overflow-wrap: anywhere;
}
.app-shell .call-history-time {
    color: #8f7855;
    font-weight: 900;
    white-space: nowrap;
}
.app-shell .call-history-phone {
    direction: ltr;
    font-weight: 900;
    color: #11100e;
}
.app-shell .call-history-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.app-shell .call-detail-view {
    display: grid;
    gap: 14px;
    padding: 18px;
}
.app-shell .call-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.app-shell .call-detail-head div {
    display: grid;
    gap: 4px;
}
.app-shell .call-detail-head span,
.app-shell .call-detail-summary span {
    color: #8f7855;
    font-weight: 900;
}
.app-shell .call-detail-head strong {
    font-size: 1.35rem;
}
.app-shell .call-detail-summary {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    background: rgba(251,248,241,.8);
}
.app-shell .call-detail-summary p {
    margin: 0;
    line-height: 2;
    overflow-wrap: anywhere;
}
.app-shell .call-archive-panel {
    margin-top: 18px;
}
.app-shell .archive-tools {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 14px;
}
.app-shell .call-archive-table {
    min-width: 980px;
}
.app-shell .call-archive-table .row-actions {
    min-width: 110px;
}
.app-shell .ltr-text {
    direction: ltr;
    unicode-bidi: plaintext;
}
.app-shell .production-alert {
    grid-template-columns: minmax(0, 1fr) auto auto;
}
.app-shell .pagination {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,.08);
}
.app-shell .page-btn {
    font-weight: 900;
}
@media (max-width: 1180px) {
    .app-shell .page-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-shell .page-tools .search-control {
        grid-column: 1 / -1;
    }
    .app-shell .profile-grid,
    .app-shell .split-layout {
        grid-template-columns: 1fr;
    }
    .app-shell .call-shell {
        grid-template-columns: 1fr;
    }
    .app-shell .call-center-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .app-shell .call-history-panel {
        grid-column: 1 / -1;
    }
}
@media (max-width: 860px) {
    .app-shell {
        --control-height: 42px;
    }
    .app-shell .app-header {
        position: sticky;
    }
    .app-shell .header-inner {
        grid-template-columns: 1fr auto;
    }
    .app-shell .brand {
        justify-content: flex-start;
    }
    .app-shell .brand small {
        font-size: .75rem;
    }
    .app-shell .header-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) minmax(0, .9fr) minmax(0, .75fr);
        gap: 8px;
        min-width: 0;
    }
    .app-shell .header-actions > * {
        min-width: 0;
    }
    .app-shell .header-actions .user-chip,
    .app-shell .header-actions .danger-link,
    .app-shell .header-actions .ghost-button {
        width: 100%;
    }
    .app-shell .topbar.page-hero {
        min-height: 82px;
    }
    .app-shell .topbar.page-hero h1 {
        font-size: clamp(1.45rem, 8vw, 2.2rem);
    }
    .app-shell .content {
        gap: 14px;
    }
    .app-shell .page-tools {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    .app-shell .filter-select,
    .app-shell .search-control input {
        width: 100%;
    }
    .app-shell .panel,
    .app-shell .profile-panel {
        padding: 14px;
    }
    .app-shell .dashboard-grid,
    .app-shell .template-grid,
    .app-shell .detail-grid,
    .app-shell .detail-grid.compact,
    .app-shell .mini-metrics,
    .app-shell .settings-grid,
    .app-shell .sms-pick-grid,
    .app-shell .shortcode-grid {
        grid-template-columns: 1fr;
    }
    .app-shell .profile-hero {
        align-items: stretch;
    }
    .app-shell .profile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .app-shell .profile-actions > * {
        width: 100%;
    }
    .app-shell .form-grid {
        grid-template-columns: 1fr;
    }
    .app-shell .span-2 {
        grid-column: auto;
    }
    .app-shell .modal {
        align-items: end;
        padding: 0;
    }
    .app-shell .modal-panel,
    .app-shell .modal-panel.wide,
    .app-shell .modal-panel.compact {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 8px 8px 0 0;
        transform: translateY(32px);
    }
    .app-shell .modal.show .modal-panel {
        transform: translateY(0);
    }
    .app-shell .modal-header,
    .app-shell .modal-footer,
    .app-shell .form-section,
    .app-shell .modal-panel > .form-grid {
        padding: 14px;
    }
    .app-shell .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
    }
    .app-shell .modal-footer > * {
        width: 100%;
    }
    .app-shell .row-actions {
        min-width: 260px;
    }
    .app-shell .data-table {
        min-width: 780px;
    }
    .app-shell .production-alert,
    .app-shell .dashboard-task-list article,
    .app-shell .service-hero,
    .app-shell .service-card header,
    .app-shell .ticket-message header,
    .app-shell .list-item,
    .app-shell .call-center-grid,
    .app-shell .contact-result {
        grid-template-columns: 1fr;
    }
    .app-shell .call-history-panel {
        grid-column: auto;
    }
    .app-shell .call-history-list,
    .app-shell .call-results {
        max-height: none;
    }
    .app-shell .call-detail-head {
        display: grid;
    }
    .app-shell .task-actions > *,
    .app-shell .dashboard-task-list article > * {
        width: 100%;
    }
}
@media (max-width: 520px) {
    .app-shell .header-inner {
        padding-inline: 10px;
    }
    .app-shell .header-actions {
        grid-template-columns: 44px 1fr 1fr;
    }
    .app-shell .header-actions .user-chip {
        grid-column: 2 / -1;
        justify-content: center;
    }
    .app-shell .content {
        padding-inline: 10px;
        padding-bottom: 42px;
    }
    .app-shell .profile-actions {
        grid-template-columns: 1fr;
    }
    .app-shell .bank-lines dl div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .app-shell .bank-lines dd {
        text-align: left;
    }
    .app-shell .row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(110px, 1fr));
        gap: 7px;
    }
    .app-shell .row-actions > * {
        width: 100%;
    }
    .app-shell .data-table {
        min-width: 700px;
    }
}