:root {
    --bg: #0e141b;
    --bg2: #121b24;
    --card: #18222e;
    --line: #2a3949;
    --text: #eef3f8;
    --muted: #8b9aab;
    --accent: #f7921e;
    --accent-ink: #2a1600;
    --info: #5b8def;
    --ok: #3ecf8e;
    --bad: #ef6b6b;
    --task: #5553ce;
    --note: #c5d0dc;
    --radius: 16px;
    --topbar: 56px;
    --sidebar: 250px;
    font-family: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); min-height: 100%; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 28px 24px;
}
.brand { text-align: center; margin-bottom: 20px; }
.brand h1 { margin: 8px 0 4px; font-size: 22px; }
.brand p { color: var(--muted); margin: 0; }
.brand-logo {
    display: block;
    height: 56px;
    width: auto;
    margin: 0 auto 4px;
}
.brand-mark {
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--accent); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.brand-mark img {
    width: 34px; height: 34px; display: block; object-fit: contain;
}
.auth-form label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 13px; }
.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.auth-form .auth-label-row label { margin: 0 0 6px; }
.auth-forgot { color: var(--accent); font-size: 13px; white-space: nowrap; }
.auth-ok { color: var(--ok); text-align: center; }
.auth-form input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
}
.auth-form input:disabled {
    color: var(--muted);
    opacity: 1;
}
.auth-error { color: var(--bad); text-align: center; }
.auth-hint { color: var(--muted); font-size: 13px; text-align: center; margin-top: 16px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 12px; padding: 11px 16px; cursor: pointer;
    font-weight: 650;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: #243243; color: var(--text); }
.btn-block { width: 100%; margin-top: 16px; }

.app-shell { min-height: 100vh; overflow-x: hidden; }
.nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 20;
}
.sidenav {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, var(--sidebar));
    background: var(--bg2); border-right: 1px solid var(--line);
    transform: translateX(-105%); transition: transform 0.22s ease;
    z-index: 30; padding: 18px 14px 24px;
    display: flex; flex-direction: column; gap: 14px;
    overflow: auto;
}
.sidenav.is-open { transform: translateX(0); }
.sidenav-brand { display: flex; gap: 10px; align-items: center; }
.sidenav-brand span { display: block; color: var(--muted); font-size: 12px; }
.sidenav-group { display: flex; flex-direction: column; gap: 4px; }
.sidenav-label {
    color: var(--accent); font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 12px 12px 4px;
}
.sidenav a {
    color: var(--text); padding: 14px 12px; border-radius: 12px;
    display: flex; align-items: center; gap: 10px;
    font-size: 17px;
}
.nav-icon {
    width: 18px; height: 18px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.nav-icon svg, .sidenav a svg {
    width: 18px; height: 18px; display: block;
}
.sidenav a.is-active, .sidenav a:hover { background: #223142; }
.sidenav-fold { margin: 0; }
.sidenav-fold summary {
    list-style: none;
    cursor: pointer;
    color: var(--text);
    padding: 14px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 17px;
    font-weight: 650;
}
.sidenav-fold-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sidenav-fold summary::-webkit-details-marker { display: none; }
.sidenav-fold summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    margin-top: -4px;
}
.sidenav-fold[open] summary::after {
    transform: rotate(45deg);
    margin-top: 2px;
}
.sidenav-fold summary:hover { background: #223142; }
.sidenav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 6px 10px;
}
.sidenav-sub a {
    padding: 12px 12px;
    font-size: 16px;
    color: var(--muted);
}
.sidenav-sub a.is-active { color: var(--text); }
.sidenav-user { margin-top: auto; color: var(--muted); font-size: 13px; padding: 8px 12px; }
.sidenav-user strong { display: block; color: var(--text); }

.app-main {
    min-height: 100vh; display: flex; flex-direction: column; min-width: 0; overflow-x: hidden;
    padding-top: calc(var(--topbar) + env(safe-area-inset-top));
}
.topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: calc(var(--topbar) + env(safe-area-inset-top));
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px; padding-top: env(safe-area-inset-top);
    background: rgba(14,20,27,0.96);
    border-bottom: 1px solid var(--line); z-index: 12;
}
.topbar h1 { font-size: 16px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-btn, .topbar-user {
    width: 40px; height: 40px; border: 0; border-radius: 12px;
    background: #223142; color: var(--text); display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700;
}
.menu-btn { flex-direction: column; gap: 4px; padding: 0; }
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 1px; }
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.topbar-action {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #eef3f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.topbar-action svg { width: 20px; height: 20px; display: block; }
.topbar-action.is-on { background: #223142; }
.topbar-action-issue.is-on, .topbar-action-issue:hover { color: var(--bad); }
.topbar-action-task.is-on, .topbar-action-task:hover { color: #9b98f0; }
.topbar-action-note.is-on, .topbar-action-note:hover { color: var(--note); }
.topbar-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
}
.topbar-badge-issue { background: rgba(209, 52, 63, 0.78); }
.topbar-badge-issue.is-blink { animation: issueblink 2s ease 5; }
.topbar-badge-task { background: #6f42c1; }
.topbar-badge-note { background: #111; color: #fff; border: 1px solid #d0d0d0; }
@keyframes issueblink {
    0%, 100% { background: rgba(209, 52, 63, 0.9); color: #fff; }
    50% { background: #fff; color: #d1343f; }
}
.work-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
    min-width: 0;
}
.work-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #243243;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 6px 8px;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
    min-width: 0;
    overflow: hidden;
}
.work-tab-icon { width: 22px; height: 22px; }
.work-tab-icon svg { width: 22px; height: 22px; display: block; }
.work-tab-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #18222e;
    color: var(--text);
    font-size: 12px;
}
.work-tab.is-on { color: var(--text); border-color: var(--accent); background: #223142; }
.work-tab-issue.is-on { border-color: var(--bad); color: var(--bad); }
.work-tab-task.is-on { border-color: var(--task); color: #9b98f0; }
.work-tab-note.is-on { border-color: var(--note); color: var(--note); }
.work-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    min-width: 0;
    max-width: 100%;
}
.work-toolbar .btn {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    padding: 9px 12px;
}
.work-filter {
    display: inline-flex;
    align-items: stretch;
    flex: 0 1 auto;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #0e141b;
    min-width: 0;
    max-width: 100%;
}
.work-seg-btn {
    text-align: center;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
    background: #243243;
    white-space: nowrap;
    min-width: 0;
}
.work-seg-btn + .work-seg-btn { border-left: 1px solid var(--line); }
.work-seg-btn.is-on {
    background: var(--accent);
    color: var(--accent-ink);
}
.work-count { margin: 0 0 12px; font-size: 13px; }
.work-section-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.work-section-h span {
    background: #243243;
    color: var(--text);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}
[data-work-section] { margin-bottom: 18px; }
[data-work-section][hidden] { display: none; }
.work-kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    margin-top: 4px;
    min-width: 0;
}
.work-kv .kv { min-width: 0; }
.work-kv .kv span { display: block; color: var(--muted); font-size: 11px; }
.work-kv .kv strong {
    font-size: 13px;
    font-weight: 650;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.work-kv .is-overdue { color: var(--bad); }
.work-card.is-closed {
    background: #141b22;
    border-color: #3a4654;
}
.work-card.is-closed h3 { color: var(--muted); }
.work-status-pill { margin: 0; }
.work-status-pill.is-open { background: #1d3a2a; color: var(--ok); }
.work-status-pill.is-closed { background: #2a333d; color: #c5d0dc; }
.page-form label {
    display: block;
    margin: 12px 0 6px;
    color: var(--muted);
    font-size: 13px;
}
.page-form input,
.page-form select,
.page-form textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
}
.page-form textarea { min-height: 110px; resize: vertical; }
.work-card[hidden] { display: none !important; }
.work-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.work-card h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.work-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
}
.work-job {
    border: 1px solid var(--accent);
    border-radius: 4px;
    text-align: center;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 13px;
    min-width: 0;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.work-card .work-type-pill { margin: 0; }
.work-card-issue .work-type-pill { background: #3a1d1d; color: var(--bad); }
.work-card-task .work-type-pill { background: #24244a; color: #9b98f0; }
.work-card-note .work-type-pill { background: #2a333d; color: var(--note); }
.work-details {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.work-linkline {
    font-size: 12px;
    font-style: italic;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}
.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    min-width: 0;
}
.work-tags .pill {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}
.work-meta .is-overdue { color: var(--bad); font-weight: 650; }
.app-content {
    padding: 16px 14px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    max-width: 1100px; margin: 0 auto; width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
.card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.card-grid > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.panel, .empty-card, .nav-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; color: var(--text); display: block;
}
.panel h2, .empty-card h2, .section h2 { margin: 0 0 8px; font-size: 18px; }
.muted, .section-sub { color: var(--muted); }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stat-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.stat-box span { color: var(--muted); display: block; font-size: 12px; }
.stat-box strong { font-size: 22px; }
.section { margin-bottom: 24px; }
.nav-card h3 { margin: 0 0 6px; font-size: 16px; }
.list-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-link:last-child { border-bottom: 0; }
.list-link small { color: var(--muted); }
.search-bar { display: flex; gap: 8px; margin-bottom: 16px; min-width: 0; max-width: 100%; }
.search-bar input { flex: 1; min-width: 0; width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 12px; }
.pm-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.pm-filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}
.pm-filter input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}
.pm-filter select {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 180px;
}
.project-card-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(101px, 24%);
    gap: 6px 10px;
    align-items: start;
}
.project-card-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 76px;
    max-width: 88px;
}
.project-job {
    position: relative;
    overflow: visible;
    border: 1px solid var(--accent);
    border-radius: 4px;
    text-align: center;
    padding: 6px 8px;
    font-weight: 700;
    font-size: 15px;
    font-family: Arial, sans-serif;
    color: var(--text);
}
.issuenote,
.tasknote,
.notenote {
    position: absolute;
    z-index: 6;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    padding: 0 5px;
    border-radius: 10rem;
    pointer-events: none;
}
.issuenote {
    top: -4px;
    left: -5px;
    color: #fff;
    background: rgba(209, 52, 63, 0.72);
    border: 1px solid rgba(255, 180, 180, 0.85);
}
.tasknote {
    top: -4px;
    right: -5px;
    color: #fff;
    background: #6f42c1;
    border: 1px solid #c4b0f0;
}
.notenote {
    bottom: -5px;
    right: -5px;
    color: #fff;
    background: #111;
    border: 1px solid #d0d0d0;
}
.phase-st .issuenote,
.phase-st .tasknote,
.phase-st .notenote {
    font-size: 7px;
    padding: 0 3px;
}
.project-card-mid { min-width: 0; }
.project-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 650;
    font-size: 15px;
    line-height: 1.25;
    color: var(--text);
}
.project-gc {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}
.project-people {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.25;
    word-break: break-word;
}
.project-card-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}
.project-value {
    margin: 0;
    font-weight: 700;
    font-size: 13px;
    text-align: right;
    line-height: 1.2;
}
.revbc { margin-top: 4px; }
.revbc-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.revbc-label {
    width: 22px;
    flex-shrink: 0;
    font-size: 9px;
    color: var(--muted);
    font-weight: 650;
}
.revbc-track {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 16px;
    background: #0e141b;
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
}
.revbc-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    max-width: 100%;
}
.revbc-amt {
    position: relative;
    z-index: 1;
    display: block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    padding: 0 4px;
    white-space: nowrap;
}
.revbc-rev { background: #f7921e; }
.revbc-bill { background: #5553ce; }
.revbc-coll { background: #6b7280; }
.project-phases-toggle {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    padding: 0;
}
.project-phases-toggle:disabled { cursor: default; opacity: 0.7; }
.project-phases-toggle .pill { margin: 0; }
.project-phases-toggle .caret {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
}
.project-card.is-open .project-phases-toggle .caret {
    transform: rotate(-135deg);
    margin-top: 2px;
}
.project-phases {
    display: none;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}
.project-card.is-open .project-phases { display: block; }
.project-phase-head,
.project-phase-block,
.project-phase-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 78px 104px;
    column-gap: 8px;
    align-items: center;
    width: 100%;
}
.project-phase-head {
    background: transparent;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 0;
    margin-bottom: 4px;
}
.project-phase-head span:first-child {
    text-align: center;
}
.project-phase-block { margin-bottom: 8px; }
.project-phase-block .project-phase-text { display: contents; }
.project-phase-text {
    font-size: 12px;
}
.phase-num-pill {
    margin: 0;
    min-width: 22px;
    text-align: center;
    padding: 2px 8px;
    font-size: 11px;
}
.nav-card .phase-num-pill { margin-bottom: 0; }
.project-phase-text span:nth-child(2) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.project-phase-text span:nth-child(3),
.project-phase-head span:nth-child(3),
.project-phase-text span:nth-child(4),
.project-phase-head span:nth-child(4) {
    text-align: right;
}
.phase-due-input {
    width: 100%;
    max-width: 118px;
    background: #e8edf2;
    color: #111;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 4px;
    font-size: 11px;
    color-scheme: light;
}
.phase-status-row {
    display: flex;
    flex-wrap: nowrap;
    grid-column: 2 / -1;
    width: 100%;
    gap: 2px;
    margin-top: 6px;
    overflow: visible;
}
.phase-st {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 18px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: visible;
    white-space: nowrap;
    border: 1px solid transparent;
}
.phase-st.st-on { background: #f7921e; color: #fff; }
.phase-st.st-off { background: #db2c2c; color: #fff; }
.phase-st.st-ok { background: #55b56f; color: #fff; }
.phase-st.st-wait { background: #e5e48f; color: #333; }
.phase-st.st-none { background: #ececec; color: #666; border-color: #bbb; }
.phase-st.st-rev { background: #18222e; color: #9aa6ff; border-color: #5553ce; }
.phase-st.st-closed { background: #18222e; color: #55b56f; border-color: #55b56f; }
.nav-card .pill, .pill {
    display: inline-block;
    margin-bottom: 8px;
    background: #243243;
    color: var(--text);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 650;
}
a.nav-card:hover { border-color: var(--accent); }
.project-job:hover, .project-desc:hover { color: var(--accent); }
.back-link {
    display: inline-block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 12px;
}
.page-back {
    display: flex;
    margin: 0 0 10px;
}
.page-back-left { justify-content: flex-start; }
.page-back-right { justify-content: flex-end; }
.page-back-split { justify-content: space-between; }
.back-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(34, 49, 66, 0.45);
    border: 1px solid rgba(238, 243, 248, 0.18);
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}
.back-btn:hover { background: rgba(34, 49, 66, 0.75); }
.kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 12px 0 16px;
}
.contacts-card { margin: 12px 0; }
.contacts-card h2 { font-size: 16px; }
.contacts-card .kv-grid { margin: 0; }
.proj-summary-card { margin: 0 0 12px; }
.proj-summary-card h2 { font-size: 16px; }
.proj-summary-card .kv-grid { margin: 0; }
.proj-summary-card .flag-row { margin: 12px 0 0; }
.money-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.money-row:last-child { border-bottom: 0; }
.money-row strong { font-weight: 650; text-align: right; }
.money-row.is-total, .money-row.is-total strong { font-weight: 700; }
.money-row.is-booked, .money-row.is-booked strong { color: var(--accent); }
.money-row.is-remain, .money-row.is-remain strong { color: var(--info); }
.money-row.is-bad, .money-row.is-bad strong { color: var(--bad); }
.people-group { margin-top: 14px; }
.people-group h3 {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 700;
}
.people-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 4px;
    font-size: 14px;
}
.people-line span { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.people-line a { color: var(--accent); }
.people-line.is-block { display: block; }
.people-line.is-block strong { display: block; white-space: pre-line; font-weight: 650; }
.addr-card h2 { font-size: 16px; margin: 0 0 6px; }
.addr-card > div { flex: 1; min-width: 0; }
.contacts-other { margin-top: 10px; }
.addr-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding-top: 0;
    padding-right: 8px;
    padding-bottom: 10px;
}
.addr-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: pre-line;
}
.addr-map {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.addr-map svg { width: 22px; height: 22px; display: block; }
.defect-preview {
    display: block;
    max-width: 100%;
    max-height: 180px;
    margin-top: 8px;
    border-radius: 10px;
}
.defect-preview[hidden] { display: none !important; }
.defect-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.defect-photos img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    background: #0e141b;
}
.kv span { display: block; color: var(--muted); font-size: 12px; }
.kv strong { font-size: 14px; font-weight: 650; }
.flag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pill-warn {
    background: #3a1d1d;
    color: var(--bad);
    border: 1px solid #5a3030;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
}
.pill-billed {
    background: #f7921e;
    color: #0e141b;
}
.pill-backlog {
    background: #6b7280;
    color: #f4f7fb;
}

.inbox-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.inbox-card {
    background: #223142;
    border: 1px solid #4a6076;
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.inbox-card.is-collapsed { min-height: 0; }
.inbox-card-head {
    background: #3d4b5a;
    color: #fff;
    padding: 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    font-size: 19px;
}
.inbox-card.is-waiting {
    border-color: #c4b44a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 180, 74, 0.35);
}
.inbox-card.is-waiting .inbox-card-head {
    background: #c4b44a;
    color: #333;
}
.inbox-card.is-issue {
    border-color: #c44a4a;
}
.inbox-card.is-issue .inbox-card-head {
    background: #b42318;
    color: #fff;
}
.inbox-card.is-task {
    border-color: #8b6cc7;
}
.inbox-card.is-task .inbox-card-head {
    background: #6f42c1;
    color: #fff;
}
.inbox-card.is-note {
    border-color: #5a6570;
}
.inbox-card.is-note .inbox-card-head {
    background: #2a3138;
    color: #fff;
}
.inbox-grid.is-compact .inbox-card.is-wide {
    grid-column: 1 / -1;
}
.inbox-card-head .count {
    background: #fff;
    color: #555;
    border-radius: 9px;
    min-width: 48px;
    text-align: center;
    padding: 4px 10px;
    font-size: 21px;
}
.inbox-card-body {
    max-height: 240px;
    overflow: auto;
    background: #1a2633;
}
.inbox-card-body.is-full { max-height: none; }
.inbox-row {
    display: grid;
    grid-template-columns: 76px 1fr 68px;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #314557;
    font-size: 13px;
}
.inbox-row:last-child { border-bottom: 0; }
.inbox-job {
    border: 1px solid var(--accent);
    border-radius: 4px;
    text-align: center;
    padding: 5px 4px;
    font-weight: 700;
    font-size: 12px;
}
.inbox-detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-date {
    text-align: center;
    border: 1px solid #4a6076;
    border-radius: 4px;
    padding: 5px 4px;
    font-size: 12px;
    font-weight: 650;
    background: #223142;
}
.inbox-empty { padding: 24px 12px; color: var(--muted); text-align: center; }
.inbox-grid.is-compact { gap: 14px; }
.inbox-card.is-compact .inbox-card-head {
    padding: 8px 10px;
    font-size: 13px;
}
.inbox-card.is-compact .inbox-card-head .count {
    min-width: 28px;
    padding: 2px 6px;
    font-size: 14px;
}
.inbox-card.is-compact .inbox-card-body { max-height: 168px; }
.inbox-card.is-compact .inbox-row {
    grid-template-columns: 62px 1fr 52px;
    gap: 6px;
    padding: 4px 6px;
    font-size: 11px;
}
.inbox-card.is-compact .inbox-job {
    padding: 3px 2px;
    font-size: 11px;
}
.inbox-card.is-compact .inbox-date {
    padding: 3px 2px;
    font-size: 10px;
}

@media (min-width: 900px) {
    .menu-btn { display: none; }
    .topbar { left: var(--sidebar); }
    .nav-backdrop { display: none !important; }
    .sidenav { transform: none; }
    .app-main { margin-left: var(--sidebar); }
    .app-content { padding: 20px 24px 40px; max-width: 1100px; }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inbox-grid { grid-template-columns: repeat(2, 1fr); }
    .inbox-grid.is-compact { grid-template-columns: repeat(3, 1fr); }
    .inbox-grid.is-compact .inbox-card.is-wide { grid-column: span 2; }
    .stat-row { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
    .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.kpi-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.kpi-filter label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}
.kpi-filter select, .kpi-filter input[type="date"] {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    width: 100%;
}
.kpi-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 12px;
    font-size: 12px;
    color: var(--muted);
}
.kpi-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}
.kpi-seg {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.kpi-seg button {
    flex: 1;
    background: #243243;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
}
.kpi-seg button.is-on {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}
.kpi-bar-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 72px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    width: 100%;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.kpi-bar-row.is-on .kpi-bar-label { color: var(--accent); }
.kpi-bar-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 650;
}
.kpi-bar-track {
    position: relative;
    height: 18px;
    background: #0e141b;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}
.kpi-bar-fill { height: 100%; }
.kpi-bar-n { background: #6b7280; }
.kpi-bar-r { background: #f09023; }
.kpi-bar-over .kpi-bar-n { background: #ba2525; }
.kpi-bar-amt {
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}
.kpi-cols {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 0 12px;
    min-height: 140px;
    align-items: flex-end;
}
.kpi-col {
    flex: 0 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: inherit;
}
.kpi-col-stack {
    width: 100%;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #0e141b;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}
.kpi-col-billed { background: #f7921e; width: 100%; }
.kpi-col-backlog { background: #6b7280; width: 100%; }
.kpi-col-now .kpi-col-stack { border-color: var(--accent); }
.kpi-col-label {
    font-size: 9px;
    color: var(--muted);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 42px;
}
.kpi-col.is-on .kpi-col-label { color: var(--accent); }
.kpi-spark-wrap { margin-top: 8px; }
.kpi-spark { display: block; }
.kpi-year {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.kpi-year a, .kpi-year span {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #243243;
    font-size: 12px;
    font-weight: 650;
}
.kpi-year a.is-on, .kpi-year span.is-on {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}
.kpi-invoice {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.kpi-invoice:last-child { border-bottom: 0; }
.kpi-invoice .amt { font-weight: 700; text-align: right; }
.kpi-invoice .days { color: var(--muted); font-size: 12px; text-align: right; }
.kpi-invoice.is-over .days { color: var(--bad); }
.kpi-invoice.is-hide,
.kpi-est-card.is-hide,
.list-link.is-hide,
tr.is-hide { display: none; }
.kpi-est-card { margin-bottom: 10px; }
.kpi-est-card h3 { margin: 0 0 8px; font-size: 16px; }
.kpi-est-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    font-size: 13px;
}
.kpi-est-metrics span { display: block; color: var(--muted); font-size: 11px; }
.kpi-size {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
}
.kpi-size div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}
.kpi-table-wrap { overflow-x: auto; }
.kpi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.kpi-table th, .kpi-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    text-align: right;
    white-space: nowrap;
}
.kpi-table th:first-child, .kpi-table td:first-child { text-align: left; }
.kpi-stale { color: var(--bad); }
.kpi-fresh { color: var(--ok); }

@media (min-width: 900px) {
    .kpi-filter { grid-template-columns: repeat(3, 1fr); }
    .kpi-est-metrics { grid-template-columns: repeat(4, 1fr); }
}

button.work-seg-btn { border: 0; cursor: pointer; font: inherit; }
button.topbar-action {
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
    color: #eef3f8;
}
.topbar-action-defect:hover,
.topbar-action-defect.is-on { color: var(--accent); }
.topbar-badge-defect { background: var(--accent); color: var(--accent-ink); }
.topbar-badge.is-history { background: #2a3949; color: #c5d0dc; }
.proj-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.proj-job {
    flex: 0 0 auto;
    min-width: calc(76px * 1.2);
    padding: calc(6px * 1.2) calc(8px * 1.2);
    font-size: calc(15px * 1.2);
}
.proj-itn {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.proj-itn .topbar-action {
    width: calc(36px * 1.1);
    height: calc(36px * 1.1);
}
.proj-itn .topbar-action svg {
    width: calc(20px * 1.1);
    height: calc(20px * 1.1);
}
.proj-name {
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid rgba(238, 243, 248, 0.14);
    border-radius: 14px;
    background: rgba(24, 34, 46, 0.55);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
}
.proj-view-form {
    position: relative;
    margin: 0 0 14px;
}
.proj-view-select {
    display: block;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 12px 42px 12px 12px;
    cursor: pointer;
}
.proj-view-form::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    pointer-events: none;
}
.proj-desc {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
}
.proj-meta { margin: 0 0 10px; padding: 12px 14px; }
.proj-labeled {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 2px 0;
}
.proj-labeled span {
    width: 52px;
    flex-shrink: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}
.proj-labeled strong { font-size: 16px; font-weight: 650; }
.proj-phase {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
a.proj-phase {
    display: block;
    color: inherit;
    text-decoration: none;
}
.proj-phase-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.proj-phase-name { font-weight: 650; font-size: 15px; }
.proj-phase-due {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}
.proj-phase .phase-status-row { grid-column: auto; }
.aps-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.aps-tools input[type="search"] {
    flex: 1 1 180px;
    min-width: 0;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
}
.aps-count { margin: 0; }
a.aps-card {
    display: block;
    color: inherit;
    text-decoration: none;
}
.aps-job {
    color: var(--accent);
    font-weight: 750;
    margin-right: 6px;
    text-decoration: none;
}
.phase-head { margin-bottom: 10px; }
.phase-head h2 { margin: 0 0 4px; font-size: 18px; }
.phase-info {
    position: relative;
    overflow: visible;
    margin-bottom: 10px;
    background: #223040;
    border-color: #314556;
}
.phase-info .proj-head { margin-bottom: 8px; }
.phase-title-line,
.phase-info-name {
    width: 100%;
    margin: 6px 0 0;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
}
.phase-title-phase {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 8px;
    padding: 3px 12px 8px;
    border-radius: 3px;
    background: rgba(140, 108, 12, 0.55);
}
.phase-kicker {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(238, 243, 248, 0.8);
}
.phase-hold {
    position: absolute;
    right: -2px;
    bottom: -2px;
    margin: 0;
    z-index: 2;
}
.phase-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    font-size: 14px;
}
.phase-info-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.phase-info-row strong { text-align: right; }
.phase-money { margin-top: 6px; }
.phase-money span { font-size: 16px; }
.phase-money strong { font-size: 18px; }
.phase-due-card {
    margin-bottom: 10px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.phase-due-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
}
.phase-due-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.phase-due-rule {
    grid-column: 1 / -1;
    height: 0;
    border: 0;
    border-top: 1px solid #3d5166;
    margin: 2px 0;
}
.phase-due-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.phase-due-pick {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    min-height: 44px;
    box-sizing: border-box;
    background: #e8edf2;
    color: #111;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 6px;
    font-size: 16px;
    color-scheme: light;
    -webkit-appearance: none;
    appearance: none;
}
.phase-due-pick::-webkit-datetime-edit,
.phase-due-pick::-webkit-date-and-time-value {
    min-width: 0;
    padding: 0;
}
.phase-due-grid .btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    min-height: 44px;
    padding: 10px 8px;
    box-sizing: border-box;
    justify-self: stretch;
    text-align: center;
}
.scope-tools select {
    flex: 1 1 140px;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
}
.scope-phase {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
.phase-owners, .phase-rev {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 6px 0;
    font-size: 13px;
}
.phase-owners span, .phase-rev span { color: var(--muted); margin-right: 4px; }
.phase-step-list { display: flex; flex-direction: column; gap: 6px; }
.phase-step {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px 8px;
    min-height: 64px;
    max-height: 78px;
    color: inherit;
}
.phase-step-badge {
    flex: 0 0 calc(42px * 1.15);
    height: calc(28px * 1.15);
    font-size: calc(9px * 1.15);
}
.phase-step-main { min-width: 0; flex: 1; }
.phase-step-main strong, .phase-step-main em {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phase-step-main strong { font-size: 16px; font-style: normal; }
.phase-step-main em { font-style: normal; color: var(--muted); font-size: 14px; }
.phase-step-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
.step-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.step-pill-issue { color: #fff; background: rgba(209, 52, 63, 0.72); border: 1px solid rgba(255, 180, 180, 0.85); }
.step-pill-task { color: #fff; background: #6f42c1; border: 1px solid #c4b0f0; }
.step-pill-note { color: #fff; background: #111; border: 1px solid #d0d0d0; }
.check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    color: inherit;
    text-align: left;
}
.check-row.is-on { border-color: #55b56f; }
.check-mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #8aa0b5;
    flex-shrink: 0;
}
.check-row.is-on .check-mark { background: #55b56f; border-color: #55b56f; }
.check-row.is-locked { opacity: 0.72; }
.check-stamp { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.dwg-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 10px;
    margin: 8px 0;
    background: var(--bg);
}
.dwg-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.dwg-meta { margin: 4px 0; color: var(--muted); font-size: 12px; }
.dwg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.dwg-actions form { margin: 0; }
.dwg-actions .btn { padding: 6px 10px; font-size: 13px; }
.scope-line {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0 0 4px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
    color: inherit;
    font-size: 13px;
}
.scope-line.is-on { border-color: #55b56f; }
.scope-line.is-locked { opacity: 0.72; }
.scope-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.scope-top, .scope-flags {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}
.scope-top strong { font-size: 14px; }
.scope-desc {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.25;
    max-height: 1.25em;
    overflow: hidden;
}
.scope-flags { margin-top: 4px; font-size: 11px; color: var(--muted); }
.scope-flags .is-on { color: #55b56f; font-weight: 700; }
.aps-sub {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}
.aps-nopm {
    color: #fff;
    background: #db2c2c;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
}
.aps-card .phase-status-row { margin-top: 8px; }
.itn-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 6;
    pointer-events: none;
}
.itn-dot-issue { top: -2px; left: -2px; background: rgba(209, 52, 63, 0.85); }
.itn-dot-task { top: -2px; right: -2px; background: #6f42c1; }
.itn-dot-note { bottom: -2px; right: -2px; background: #111; border: 1px solid #d0d0d0; }
.proj-phase .pill-warn { margin: 0 6px 0 0; }
.sheet[hidden] { display: none !important; }
.sheet {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(8, 12, 16, 0.72);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.sheet-panel {
    width: min(640px, 100%);
    max-height: min(92vh, 860px);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sheet-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 4px;
}
.sheet-head h2 { margin: 0; flex: 1; font-size: 18px; }
.sheet-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #223142;
    color: var(--text);
    cursor: pointer;
}
.sheet-body {
    overflow: auto;
    padding: 0 12px 18px;
    -webkit-overflow-scrolling: touch;
}
.sheet .work-toolbar { margin: 8px 0 12px; }
.sheet-form[hidden] { display: none !important; }
body.sheet-lock { overflow: hidden; }
.btn-kind-issue,
#projSheet-issue .btn-primary,
.work-filter-issue .work-seg-btn.is-on,
#projSheet-issue .work-seg-btn.is-on {
    background: rgba(209, 52, 63, 0.55);
    color: #fff;
}
.btn-kind-task,
#projSheet-task .btn-primary,
.work-filter-task .work-seg-btn.is-on,
#projSheet-task .work-seg-btn.is-on {
    background: rgba(111, 66, 193, 0.62);
    color: #fff;
}
.btn-kind-note,
#projSheet-note .btn-primary,
.work-filter-note .work-seg-btn.is-on,
#projSheet-note .work-seg-btn.is-on {
    background: rgba(22, 22, 24, 0.72);
    color: #fff;
    border: 1px solid rgba(220, 224, 228, 0.55);
}

.home-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.home-toolbar .section-sub { margin: 0; }
.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.home-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    min-height: 118px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.home-tile:hover, .home-tile:focus { border-color: var(--accent); }
.home-tile .nav-icon { width: 28px; height: 28px; }
.home-tile .nav-icon svg { width: 28px; height: 28px; }
.home-tile-label {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
}
.home-edit-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.home-edit-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    touch-action: none;
    cursor: grab;
}
.home-edit-list.is-sorting li.is-dragging { opacity: 0.55; }
.home-grip {
    width: 14px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
    background:
        linear-gradient(currentColor, currentColor) 0 2px / 14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 8px / 14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 14px / 14px 2px no-repeat;
}
.home-tile.home-tone-projects,
.home-edit-list li.home-tone-projects,
.home-add-list .home-tone-projects { background: rgba(32, 72, 130, 0.5); border-color: rgba(120, 160, 210, 0.35); }
.home-tile.home-tone-phases,
.home-edit-list li.home-tone-phases,
.home-add-list .home-tone-phases { background: rgba(18, 90, 88, 0.5); border-color: rgba(90, 180, 170, 0.35); }
.home-tile.home-tone-work,
.home-edit-list li.home-tone-work,
.home-add-list .home-tone-work { background: rgba(130, 42, 48, 0.5); border-color: rgba(210, 120, 120, 0.35); }
.home-tile.home-tone-workflows,
.home-edit-list li.home-tone-workflows,
.home-add-list .home-tone-workflows { background: rgba(78, 48, 120, 0.5); border-color: rgba(170, 140, 210, 0.35); }
.home-tile.home-tone-purchasing,
.home-edit-list li.home-tone-purchasing,
.home-add-list .home-tone-purchasing { background: rgba(120, 78, 28, 0.5); border-color: rgba(210, 160, 90, 0.35); }
.home-tile.home-tone-quality,
.home-edit-list li.home-tone-quality,
.home-add-list .home-tone-quality { background: rgba(28, 96, 58, 0.5); border-color: rgba(110, 190, 140, 0.35); }
.home-tile.home-tone-financials,
.home-edit-list li.home-tone-financials,
.home-add-list .home-tone-financials { background: rgba(96, 88, 28, 0.5); border-color: rgba(190, 180, 90, 0.35); }
.home-tile.home-tone-delivery,
.home-edit-list li.home-tone-delivery,
.home-add-list .home-tone-delivery { background: rgba(42, 52, 110, 0.5); border-color: rgba(130, 140, 200, 0.35); }
.home-tile.home-tone-kpis,
.home-edit-list li.home-tone-kpis,
.home-add-list .home-tone-kpis { background: rgba(22, 78, 108, 0.5); border-color: rgba(90, 170, 200, 0.35); }
.home-tile.home-tone-timeclock,
.home-edit-list li.home-tone-timeclock,
.home-add-list .home-tone-timeclock { background: rgba(24, 78, 64, 0.5); border-color: rgba(90, 180, 150, 0.35); }
.home-tile.home-tone-responsibilities,
.home-edit-list li.home-tone-responsibilities,
.home-add-list .home-tone-responsibilities { background: rgba(118, 58, 28, 0.5); border-color: rgba(210, 140, 90, 0.35); }
.home-edit-label { flex: 1; font-weight: 650; min-width: 0; }
.home-edit-actions { display: flex; gap: 6px; flex-shrink: 0; }
.home-edit-actions button {
    background: #243243;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 36px;
    padding: 6px 10px;
    cursor: pointer;
}
.home-add { margin-bottom: 16px; }
.home-add h2 { margin: 0 0 6px; font-size: 16px; }
.home-add-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.home-add-list .btn { margin: 0; }
.home-save { margin-top: 8px; }
.home-edit-empty { margin-bottom: 14px; }
@media (min-width: 900px) {
    .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tc-app { display: flex; flex-direction: column; gap: 14px; }
.tc-status-card {
    background: #1c2430;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}
.tc-status-card h2 { margin: 0 0 14px; text-align: center; font-size: 26px; }
.tc-status-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 28px;
    text-align: center;
}
.tc-kicker { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--muted); }
.tc-center { text-align: center; }
.tc-meta { color: var(--text); font-size: 14px; }
.tc-pill {
    display: inline-block;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.tc-pill.is-in { background: #1e7d32; color: #fff; }
.tc-pill.is-out { background: #c62828; color: #fff; }
.tc-job {
    display: inline-block;
    min-width: 92px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #555;
    background: #2a2a2a;
    color: #ffa500;
    font-weight: 800;
}
.tc-job.is-none { background: #5a1a1a; color: #ffcccc; border-color: #a94442; }
.tc-manager {
    background: #d98200;
    color: #fff;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
}
.tc-manager h3 { margin: 0 0 8px; }
.tc-manager p { margin: 0 0 6px; }
.tc-loc {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    background: rgba(90, 40, 40, 0.45);
}
.tc-loc.is-ready { background: rgba(20, 70, 40, 0.45); }
.tc-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.tc-punch {
    width: 112px;
    height: 112px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.tc-punch span { font-size: 12px; font-weight: 700; }
.tc-punch strong { font-size: 22px; }
.tc-punch:disabled { opacity: 0.35; cursor: not-allowed; }
.tc-in { background: #1e7d32; }
.tc-out { background: #c62828; }
.tc-project { background: #1976d2; }
.tc-recent {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.tc-recent button {
    min-height: 56px;
    border: 2px solid #555;
    border-radius: 8px;
    background: #2d2d2d;
    color: #ffa500;
    font-weight: 800;
    font-size: 18px;
    cursor: pointer;
}
.tc-project-list { margin-top: 12px; }
.tc-project-item {
    width: 100%;
    text-align: left;
    background: transparent;
    color: #ffa500;
    border: 0;
    border-bottom: 1px solid #314557;
    padding: 14px 4px;
    font-weight: 700;
    cursor: pointer;
}
.tc-selected {
    margin: 12px 0;
    padding: 12px;
    background: #243243;
    border-radius: 12px;
    text-align: center;
}
.tc-confirm {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(8, 12, 16, 0.72);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.tc-confirm-card {
    width: min(520px, 100%);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    padding: 18px;
}
.tc-confirm-card h2 { margin: 0 0 8px; }
.tc-confirm-actions { display: flex; gap: 8px; margin-top: 14px; }
.tc-confirm-actions .btn { flex: 1; min-height: 52px; }
@media (min-width: 900px) {
    .tc-recent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bm-busy {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.bm-busy[hidden] { display: none !important; }
.bm-busy-spin {
    width: 25vw;
    height: 25vw;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.6vw solid rgba(247, 146, 30, 0.35);
    border-top-color: rgba(247, 146, 30, 0.85);
    background: transparent;
    animation: bm-spin 0.7s linear infinite;
}
@keyframes bm-spin {
    to { transform: rotate(360deg); }
}