:root {
    --ink: #17212b;
    --muted: #66737f;
    --navy: #14273d;
    --navy-2: #1d3957;
    --gold: #c59a52;
    --paper: #f4f1eb;
    --white: #fff;
    --line: #dfe3e6;
    --success: #287454;
    --danger: #a43f45;
    --shadow: 0 10px 30px rgba(20,39,61,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: #f6f7f8; font: 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color: #245c89; text-decoration: none; }
h1,h2,h3 { margin: 0 0 .7rem; font-family: Georgia,"Times New Roman",serif; line-height: 1.2; }
h1 { font-size: clamp(1.8rem,3vw,2.6rem); }
h2 { font-size: 1.35rem; }
.app-shell { display: grid; grid-template-columns: 245px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 245px; color: #eef3f7; background: var(--navy); display: flex; flex-direction: column; padding: 24px 18px; }
.brand { display: flex; align-items: center; gap: 12px; color: white; margin-bottom: 30px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-family: Georgia,serif; font-weight: 700; }
.brand strong,.brand small { display:block; }
.brand small { color:#9fb0c1; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.sidebar nav { display:grid; gap:4px; }
.sidebar nav a { color:#cbd5df; padding:10px 12px; border-radius:7px; }
.sidebar nav a:hover { background:var(--navy-2); color:white; }
.sidebar-user { margin-top:auto; padding:14px 10px 0; border-top:1px solid rgba(255,255,255,.12); font-size:.9rem; }
.link-button { border:0; background:none; padding:3px 0; color:#aebdca; cursor:pointer; }
.main { grid-column:2; min-height:100vh; min-width:0; }
.topbar { height:82px; background:white; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 32px; position:sticky; top:0; z-index:5; }
.topbar-logo-wrap { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; }
.topbar-logo { display:block; width:min(520px,46vw); max-height:68px; object-fit:contain; }
.topbar-spacer { flex:1; }
.timer-shortcut { color:var(--danger); font-weight:600; }
.menu-toggle { display:none; border:0; background:none; font-size:1.3rem; }
.content { padding:32px; max-width:1500px; margin:0 auto; }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.compact-head { align-items:center; margin-bottom:16px; }
.eyebrow { color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; }
.muted { color:var(--muted); }
.panel { background:white; border:1px solid var(--line); border-radius:12px; padding:24px; box-shadow:var(--shadow); margin-bottom:24px; }
.subpanel { margin:8px 0 24px; padding:20px; border:1px solid var(--line); border-radius:10px; background:#fafbfb; }
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.metric { background:white; border:1px solid var(--line); border-radius:12px; padding:20px; box-shadow:var(--shadow); }
.metric span { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
.metric strong { display:block; font:700 2rem/1.2 Georgia,serif; margin-top:8px; }
.button,button.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--navy); background:var(--navy); color:white; border-radius:7px; padding:9px 14px; cursor:pointer; font:inherit; font-weight:600; }
.button.secondary { background:white; color:var(--navy); }
.button.gold { background:var(--gold); border-color:var(--gold); color:#151515; }
.button.danger { background:var(--danger); border-color:var(--danger); }
.button.small { padding:5px 9px; font-size:.82rem; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
label { display:block; font-weight:600; margin-bottom:5px; }
input,select,textarea { width:100%; border:1px solid #cbd2d8; border-radius:7px; background:white; padding:9px 10px; font:inherit; color:var(--ink); }
textarea { min-height:100px; resize:vertical; }
.field { margin-bottom:16px; }
.checkbox { display:flex; align-items:center; gap:8px; }
.checkbox input { width:auto; }
.checkbox-list { display:grid; gap:7px; padding:9px 0; }
.checkbox-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px 14px; max-height:280px; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fafbfb; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:11px 10px; border-bottom:1px solid #e8ebed; vertical-align:top; }
th { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; }
.table-wrap { overflow-x:auto; }
.badge { display:inline-block; padding:3px 8px; border-radius:999px; background:#e9eef2; color:#3e5367; font-size:.75rem; font-weight:700; text-transform:capitalize; }
.badge.good { background:#dff1e9; color:var(--success); }
.badge.warn { background:#f8eed9; color:#8b6728; }
.flash { padding:12px 15px; border-radius:8px; margin-bottom:18px; }
.flash-success { background:#e3f3eb; color:#175b40; }
.flash-error { background:#f8e4e5; color:#852e34; }
.detail-list { display:grid; grid-template-columns:160px 1fr; gap:8px 16px; }
.detail-list dt { color:var(--muted); }
.detail-list dd { margin:0; }
.client-detail-grid { grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr); }
.contact-editor { margin-top:0; }
.timer-card { text-align:center; padding:40px; background:var(--navy); color:white; border-radius:14px; }
.timer-display { font:700 clamp(2.8rem,9vw,5.5rem)/1 monospace; letter-spacing:.04em; margin:24px 0; color:#fff; }
.auth-shell { background:linear-gradient(135deg,var(--navy),#273f57); }
.auth-main { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(460px,100%); background:white; border-radius:14px; padding:38px; box-shadow:0 24px 70px rgba(0,0,0,.25); }
.auth-brand { color:var(--gold); letter-spacing:.15em; text-transform:uppercase; font-weight:700; font-size:.75rem; }
.auth-logo { display:block; width:100%; max-width:520px; height:auto; margin:0 auto 24px; }
.demo-banner {
    margin:-6px 0 18px;
    padding:9px 14px;
    border:1px solid #d6b46b;
    border-radius:8px;
    background:#fff5d8;
    color:#60460f;
    font-size:.82rem;
    font-weight:700;
    text-align:center;
}
.demo-login-notice {
    margin:-12px 0 20px;
    color:#8a1018;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.06em;
    text-align:center;
    text-transform:uppercase;
}
.integration-status { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.empty { padding:30px; text-align:center; color:var(--muted); }
.lookup-action { align-self:end; }
.lookup-action .button { width:100%; }
.attorney-search-message { margin:-4px 0 12px; }
.attorney-results { max-height:330px; margin-bottom:20px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:white; }
.attorney-results table { min-width:1150px; }
.attorney-results th { position:sticky; top:0; background:#f6f8f9; z-index:1; }
.opposing-official-fields input[readonly] { background:#f2f5f7; color:#40505e; }
.opposing-selection-note { min-height:24px; margin:3px 0 8px; color:var(--success); font-weight:600; }
.pro-se-toggle { padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:white; white-space:nowrap; }
.billing-five { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.billing-five > div { min-width:0; padding:16px; border-right:1px solid var(--line); }
.billing-five > div:last-child { border-right:0; }
.billing-five span,.billing-five strong { display:block; }
.billing-five span { margin-bottom:6px; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; }
.billing-five strong { font-family:Georgia,"Times New Roman",serif; font-size:1.15rem; overflow-wrap:anywhere; }
.relationship-inline-form { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(220px,1fr) auto; gap:8px; align-items:start; }
.relationship-inline-form select,.relationship-inline-form input { margin:0; }
.relationship-column { width:220px; }
.case-relationship-inline-form { display:grid; grid-template-columns:minmax(0,145px) auto; gap:6px; align-items:center; }
.case-relationship-inline-form select { width:145px; min-width:0; margin:0; }
.activity-filter-form { display:grid; grid-template-columns:minmax(240px,1fr) minmax(320px,1.4fr) auto; gap:14px; align-items:end; }
.activity-filter-form .field { margin:0; }
.activity-filter-actions { padding-bottom:1px; white-space:nowrap; }
.activity-filter-count { margin:16px 0 10px; }
.modal-backdrop {
    position:fixed;
    inset:0;
    z-index:100;
    padding:20px;
    background:rgba(5,13,22,.72);
    display:grid;
    place-items:center;
}
.modal-card {
    width:min(520px,100%);
    padding:28px;
    border-radius:13px;
    background:white;
    box-shadow:0 30px 100px rgba(0,0,0,.4);
}
.destructive-modal-backdrop { background:rgba(83,8,14,.82); }
.destructive-modal-card { border:3px solid var(--danger); box-shadow:0 30px 100px rgba(80,4,10,.65); }
.destructive-modal-card h2 { color:var(--danger); }
.paybotx-backdrop {
    position:fixed;
    inset:0;
    z-index:120;
    padding:20px;
    background:rgba(3,7,11,.86);
    backdrop-filter:blur(11px);
    display:grid;
    place-items:center;
}
.paybotx-terminal {
    width:min(580px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    border:1px solid #42505c;
    border-radius:16px;
    background:#121a21;
    color:#edf2f6;
    box-shadow:0 36px 130px rgba(0,0,0,.78);
}
.paybotx-terminal > header {
    min-height:92px;
    padding:18px 22px;
    background:linear-gradient(120deg,#f8fafc,#e9eef3);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.paybotx-terminal > header img { width:min(300px,78%); height:auto; }
.paybotx-terminal > header button {
    width:32px;
    height:32px;
    border:1px solid #c9d1d9;
    border-radius:50%;
    background:#fff;
    color:#56616c;
    font-size:21px;
    cursor:pointer;
}
.paybotx-entry,.paybotx-processing { padding:25px; }
.paybotx-entry h2,.paybotx-processing h2 { margin:5px 0 12px; color:#edf2f6; font-size:34px; }
.paybotx-entry input {
    border-color:#40505e;
    background:#0d141a;
    color:#edf2f6;
}
.paybotx-entry label { color:#cbd5dc; }
.paybotx-security-note { color:#8495a3; font-size:.84rem; }
.paybotx-error { padding:10px 12px; border-radius:7px; background:#522b30; color:#ffd9dd; }
.paybotx-card-prompt {
    min-height:78px;
    margin-top:13px;
    padding:13px;
    border:1px solid #234f86;
    border-radius:9px;
    background:linear-gradient(110deg,rgba(18,94,182,.16),rgba(15,28,40,.45));
    display:flex;
    align-items:center;
    gap:13px;
}
.paybotx-card-prompt > i {
    width:44px;
    height:44px;
    border-radius:10px;
    background:#0f5fae;
    color:#fff;
    font-size:24px;
    font-style:normal;
    display:grid;
    place-items:center;
}
.paybotx-card-prompt p,.paybotx-timer p { margin:0; display:grid; gap:5px; }
.paybotx-card-prompt b { color:#d6e1e9; font-size:12px; }
.paybotx-card-prompt small { color:#66829a; font-size:10px; }
.paybotx-timer {
    min-height:110px;
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
}
.paybotx-timer > span {
    width:70px;
    height:70px;
    padding:5px;
    border-radius:50%;
    background:conic-gradient(#1263b7 var(--paybotx-progress,0%),#2c3740 0);
    position:relative;
    display:grid;
    place-items:center;
}
.paybotx-timer > span::before {
    content:"";
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:#121a21;
}
.paybotx-timer > span b,.paybotx-timer > span small { position:relative; z-index:1; }
.paybotx-timer > span b { margin-top:8px; font-size:22px; }
.paybotx-timer > span small { margin-top:-12px; color:#65737d; font-size:10px; }
.paybotx-timer p b { font-size:13px; }
.paybotx-timer p small { color:#63717c; font-size:10px; }
[hidden] { display:none !important; }

/*
 * Phone layout is enabled by app.js only for clearly identified phones.
 * Tablets deliberately keep the full desktop interface.
 */
.phone-ui body { font-size:14px; }
.phone-ui body.menu-open { overflow:hidden; }
.phone-ui body.menu-open::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:15;
    background:rgba(5,13,22,.52);
}
.phone-ui .app-shell { display:block; }
.phone-ui .sidebar {
    width:min(82vw,300px);
    padding:18px 14px;
    overflow-y:auto;
    transform:translateX(-105%);
    transition:transform .2s ease;
    z-index:20;
    box-shadow:18px 0 45px rgba(0,0,0,.25);
}
.phone-ui .menu-open .sidebar { transform:translateX(0); }
.phone-ui .sidebar nav { gap:1px; }
.phone-ui .sidebar nav a { padding:8px 10px; }
.phone-ui .brand { margin-bottom:16px; }
.phone-ui .main { margin-left:0; min-width:0; }
.phone-ui .menu-toggle {
    display:block;
    padding:8px;
    position:relative;
    z-index:2;
    color:var(--navy);
}
.phone-ui .topbar { height:64px; padding:0 12px; }
.phone-ui .topbar-logo { width:min(220px,56vw); max-height:48px; }
.phone-ui .timer-shortcut { font-size:0; }
.phone-ui .timer-shortcut::after { content:'●'; font-size:1rem; }
.phone-ui .content { padding:12px; }
.phone-ui h1 { font-size:1.7rem; }
.phone-ui h2 { font-size:1.18rem; }
.phone-ui h3 { font-size:1.05rem; }
.phone-ui .page-head {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    margin-bottom:14px;
}
.phone-ui .page-head.compact-head {
    align-items:center;
    flex-direction:row;
    gap:8px;
    margin-bottom:10px;
}
.phone-ui .page-head > .actions {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}
.phone-ui .page-head > .actions .button { min-width:0; padding:7px 8px; }
.phone-ui .compact-head > .actions {
    width:auto;
    display:flex;
}
.phone-ui .panel {
    margin-bottom:12px;
    padding:14px;
    border-radius:9px;
    box-shadow:0 4px 14px rgba(20,39,61,.06);
}
.phone-ui .subpanel { margin:6px 0 12px; padding:12px; }
.phone-ui .grid,
.phone-ui .grid-2,
.phone-ui .grid-3,
.phone-ui .relationship-inline-form,
.phone-ui .activity-filter-form {
    grid-template-columns:1fr;
    gap:10px;
}
.phone-ui .field { margin-bottom:10px; }
.phone-ui input,
.phone-ui select,
.phone-ui textarea { padding:8px 9px; }
.phone-ui textarea { min-height:76px; }
.phone-ui .checkbox-list { gap:5px; }
.phone-ui .checkbox-grid {
    grid-template-columns:1fr;
    max-height:220px;
    padding:9px;
}
.phone-ui .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-bottom:12px;
}
.phone-ui .metric { padding:12px; border-radius:9px; }
.phone-ui .metric span { font-size:.68rem; }
.phone-ui .metric strong { margin-top:4px; font-size:1.35rem; }
.phone-ui .detail-list,
.phone-ui .client-detail-grid {
    grid-template-columns:105px minmax(0,1fr);
    gap:6px 10px;
}
.phone-ui .detail-list dt { font-size:.78rem; font-weight:700; }
.phone-ui .billing-five { grid-template-columns:repeat(2,minmax(0,1fr)); }
.phone-ui .billing-five > div {
    padding:10px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.phone-ui .billing-five strong { font-size:1rem; }
.phone-ui .case-relationship-inline-form { grid-template-columns:1fr; }
.phone-ui .case-relationship-inline-form select { width:100%; }
.phone-ui .relationship-column { width:auto; }
.phone-ui .activity-filter-actions { padding-bottom:0; white-space:normal; }
.phone-ui .activity-filter-count { margin:10px 0 7px; }
.phone-ui .table-wrap { overflow:visible; }
.phone-ui table.phone-card-table,
.phone-ui table.phone-card-table tbody { display:block; width:100%; }
.phone-ui table.phone-card-table { min-width:0; }
.phone-ui table.phone-card-table thead {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.phone-ui table.phone-card-table tbody tr {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 10px;
    width:100%;
    margin-bottom:8px;
    padding:7px 8px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
}
.phone-ui table.phone-card-table tbody tr:last-child { margin-bottom:0; }
.phone-ui table.phone-card-table td {
    display:block;
    min-height:28px;
    padding:5px 2px;
    border:0;
    overflow-wrap:anywhere;
}
.phone-ui table.phone-card-table td::before {
    content:attr(data-phone-label);
    color:var(--muted);
    font-size:.68rem;
    font-weight:700;
    line-height:1.35;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:2px;
}
.phone-ui table.phone-card-table td[data-phone-label=""]::before,
.phone-ui table.phone-card-table td.empty::before { display:none; }
.phone-ui table.phone-card-table td.empty {
    display:block;
    grid-column:1 / -1;
    padding:12px 4px;
}
.phone-ui table.phone-card-table td.phone-wide-cell { grid-column:1 / -1; }
.phone-ui table.phone-card-table td.phone-empty-cell { display:none; }
.phone-ui table.phone-card-table td .actions { gap:5px; }
.phone-ui .attorney-results { max-height:65vh; }
.phone-ui .integration-status {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
}
.phone-ui .timer-card { padding:22px 12px; }
.phone-ui .timer-display { margin:16px 0; font-size:2.8rem; }
.phone-ui .modal-backdrop,
.phone-ui .paybotx-backdrop { padding:8px; }
.phone-ui .modal-card { padding:18px; }
.phone-ui .paybotx-terminal > header { min-height:66px; padding:12px 14px; }
.phone-ui .paybotx-entry,
.phone-ui .paybotx-processing { padding:15px; }
.phone-ui .paybotx-entry h2,
.phone-ui .paybotx-processing h2 { font-size:25px; }
.phone-ui .auth-main { padding:12px; }
.phone-ui .auth-card { padding:24px 18px; }